Require confirmation on toggling delegation credential (#20576)

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

@@ -3072,5 +3072,9 @@
   "most_cancelled_bookings": "Most Cancelled Bookings",
   "name_or_email": "Name or Email",
   "salesforce_round_robin_skip_fallback_to_lead_owner": "If no contact is found, fallback to lead owner if it exists",
+  "enable_delegation_credential": "Enable Delegation Credential",
+  "enable_delegation_credential_description": "Grant Cal.com automatic access to the calendars of all organization members by enabling delegation credential.",
+  "disable_delegation_credential": "Disable Delegation Credential",
+  "disable_delegation_credential_description": "Once delegation credential is disabled, organization members who haven’t connected their calendars will need to do so manually.",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/features/ee/organizations/pages/settings/delegationCredential.tsx

@@ -11,7 +11,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Badge } from "@calcom/ui/components/badge";
 import { InfoBadge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
-import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
+import { DialogContent, DialogFooter, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { Form } from "@calcom/ui/components/form";
 import { TextAreaField } from "@calcom/ui/components/form";
@@ -323,12 +323,21 @@ function DelegationCredentialList() {
     deleteMutation.mutate({ id });
   };
 
+  const [delegationToToggle, setDelegationToToggle] = useState<DelegationItemProps["delegation"] | null>(
+    null
+  );
+
   const toggleDelegation = (delegation: DelegationItemProps["delegation"]) => {
-    if (delegation) {
+    setDelegationToToggle(delegation);
+  };
+
+  const handleToggleConfirm = () => {
+    if (delegationToToggle) {
       toggleEnabledMutation.mutate({
-        id: delegation.id,
-        enabled: !delegation.enabled,
+        id: delegationToToggle.id,
+        enabled: !delegationToToggle.enabled,
       });
+      setDelegationToToggle(null);
     }
   };
 
@@ -410,7 +419,8 @@ function DelegationCredentialList() {
                 )
             )}
           </ul>
-          <AddDwDButton />
+          {/* Disable till we thoroughly test multiple delegation credentials support */}
+          {/* <AddDwDButton /> */}
         </>
       ) : (
         <EmptyScreen
@@ -438,10 +448,52 @@ function DelegationCredentialList() {
           handleCreate={handleCreate}
         />
       )}
+
+      <ToggleDelegationDialog
+        delegation={delegationToToggle}
+        onClose={() => setDelegationToToggle(null)}
+        onConfirm={handleToggleConfirm}
+      />
     </div>
   );
 }
 
+const ToggleDelegationDialog = ({
+  delegation,
+  onConfirm,
+  onClose,
+}: {
+  delegation: DelegationItemProps["delegation"] | null;
+  onConfirm: () => void;
+  onClose: () => void;
+}) => {
+  const { t } = useLocale();
+  if (!delegation) {
+    return null;
+  }
+  return (
+    <Dialog
+      name="toggle-delegation"
+      open={!!delegation}
+      onOpenChange={(open) => (!open ? onClose() : undefined)}>
+      <ConfirmationDialogContent
+        title={t(delegation.enabled ? "disable_delegation_credential" : "enable_delegation_credential")}
+        confirmBtnText={t(delegation.enabled ? "disable" : "enable")}
+        cancelBtnText={t("cancel")}
+        variety={delegation.enabled ? "danger" : "success"}
+        onConfirm={onConfirm}>
+        <p className="mt-5">
+          {t(
+            delegation.enabled
+              ? "disable_delegation_credential_description"
+              : "enable_delegation_credential_description"
+          )}
+        </p>
+      </ConfirmationDialogContent>
+    </Dialog>
+  );
+};
+
 export default function DelegationCredentialListPage() {
   return <DelegationCredentialList />;
 }