chore: add toast and tooltip (#13724)

* chore: add toast and tooltop

* chore: update text

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -1,3 +1,4 @@
+import { InfoIcon } from "lucide-react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
@@ -179,11 +180,20 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         {displayDestinationCalendarSelector && (
           <div className="w-full">
             <Switch
-              label={`${t("display_add_to_calendar_organizer")}. ${t("reconnect_calendar_to_use")} `}
+              tooltip={t("reconnect_calendar_to_use")}
+              label={
+                <>
+                  {t("display_add_to_calendar_organizer")}
+                  <InfoIcon className="text-default hover:text-attention hover:bg-attention ms-1 inline h-4 w-4 rounded-md" />
+                </>
+              }
               checked={useEventTypeDestinationCalendarEmail}
               onCheckedChange={(val) => {
                 setUseEventTypeDestinationCalendarEmail(val);
                 formMethods.setValue("useEventTypeDestinationCalendarEmail", val, { shouldDirty: true });
+                if (val) {
+                  showToast(t("reconnect_calendar_to_use"), "warning");
+                }
               }}
             />
           </div>

apps/web/public/static/locales/en/common.json

@@ -808,7 +808,7 @@
   "label": "Label",
   "placeholder": "Placeholder",
   "display_add_to_calendar_organizer":"Display 'Add to calendar' email as the organizer",
-  "reconnect_calendar_to_use": "Please note that you may need to disconnect and then reconnect your calendar to use this feature.",
+  "reconnect_calendar_to_use": "Please note that you may need to disconnect and then reconnect your 'Add to Calendar' account to use this feature.",
   "type": "Type",
   "edit": "Edit",
   "add_input": "Add an Input",

packages/ui/components/form/switch/Switch.tsx

@@ -1,6 +1,7 @@
 import { useId } from "@radix-ui/react-id";
 import * as Label from "@radix-ui/react-label";
 import * as PrimitiveSwitch from "@radix-ui/react-switch";
+import type { ReactNode } from "react";
 import React from "react";
 
 import cx from "@calcom/lib/classNames";
@@ -15,7 +16,7 @@ const Wrapper = ({ children, tooltip }: { tooltip?: string; children: React.Reac
 };
 const Switch = (
   props: React.ComponentProps<typeof PrimitiveSwitch.Root> & {
-    label?: string;
+    label?: string | ReactNode;
     fitToHeight?: boolean;
     disabled?: boolean;
     tooltip?: string;
@@ -44,7 +45,7 @@ const Switch = (
           className={cx(
             isChecked ? "bg-brand-default dark:bg-brand-emphasis" : "bg-emphasis",
             primitiveProps.disabled && "cursor-not-allowed",
-            "focus:ring-brand-default focus:border-subtle h-5 w-[34px] rounded-full shadow-none focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
+            "focus:ring-brand-default focus:border-subtle h-5 w-[34px] min-w-[34px] rounded-full shadow-none focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
             props.className
           )}
           {...primitiveProps}>