From 7ebea576024db314efc3f51264fad7b547227d81 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Mon, 28 Nov 2022 19:14:38 +0000
Subject: [PATCH] Dialog Api improvements (#5714)

---
 apps/web/components/Embed.tsx                 |  8 +-
 apps/web/components/ImageUploader.tsx         |  8 +-
 .../components/booking/BookingListItem.tsx    |  4 +-
 .../components/dialog/EditLocationDialog.tsx  |  2 +-
 .../components/dialog/RescheduleDialog.tsx    | 85 +++++++++---------
 .../components/eventtype/CreateEventType.tsx  |  4 +-
 .../eventtype/EditLocationDialog.tsx          |  1 -
 .../components/eventtype/EventAdvancedTab.tsx | 15 ++--
 .../settings/DisableTwoFactorModal.tsx        |  6 +-
 .../settings/EnableTwoFactorModal.tsx         |  6 +-
 .../UsernameAvailability/PremiumTextfield.tsx |  6 +-
 .../UsernameTextfield.tsx                     |  6 +-
 .../web/pages/settings/developer/api-keys.tsx |  2 +-
 .../settings/my-account/conferencing.tsx      | 14 ++-
 .../web/pages/settings/my-account/profile.tsx | 29 ++++---
 .../routing-forms/components/FormActions.tsx  |  4 +-
 .../routing-forms/components/SingleForm.tsx   | 18 ++--
 .../giphy/components/SearchDialog.tsx         |  9 +-
 .../components/AccountDialog.tsx              | 10 +--
 .../ee/sso/components/SAMLConfiguration.tsx   |  2 +-
 .../components/MemberChangeRoleModal.tsx      |  2 +-
 .../components/MemberInvitationModal.tsx      |  1 -
 .../ee/teams/components/MemberListItem.tsx    |  7 +-
 .../workflows/components/AddActionDialog.tsx  | 28 +++---
 .../components/WorkflowStepContainer.tsx      |  8 +-
 .../components/NewScheduleButton.tsx          | 20 +++--
 packages/ui/ConfirmationDialogContent.tsx     | 86 -------------------
 packages/ui/TimezoneChangeDialog.tsx          | 16 ++--
 .../ui/v2/core/ConfirmationDialogContent.tsx  | 20 ++---
 packages/ui/v2/core/Dialog.tsx                | 64 ++++++--------
 packages/ui/v2/core/ImageUploader.tsx         | 10 +--
 .../modules/event-types/CreateEventType.tsx   |  5 +-
 .../integrations/DisconnectIntegration.tsx    | 24 ++++--
 33 files changed, 218 insertions(+), 312 deletions(-)
 delete mode 100644 packages/ui/ConfirmationDialogContent.tsx

diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index a35e3e0173..899ea460a5 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -619,7 +619,7 @@ const ChooseEmbedTypesDialogContent = () => {
   const { t } = useLocale();
   const router = useRouter();
   return (
-    <DialogContent type="creation" useOwnActionButtons size="lg">
+    <DialogContent type="creation" size="lg">
       <div className="mb-4">
         <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
           {t("how_you_want_add_cal_site")}
@@ -797,7 +797,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   ];
 
   return (
-    <DialogContent size="xl" className="p-0.5" type="creation" useOwnActionButtons>
+    <DialogContent size="xl" className="p-0.5" type="creation">
       <div className="flex">
         <div className="flex w-1/3 flex-col bg-gray-50 p-8">
           <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
@@ -1095,9 +1095,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       {t("copy_code")}
                     </Button>
                   ) : null}
-                  <DialogClose asChild>
-                    <Button color="secondary">{t("Close")}</Button>
-                  </DialogClose>
+                  <DialogClose />
                 </div>
               </div>
             );
diff --git a/apps/web/components/ImageUploader.tsx b/apps/web/components/ImageUploader.tsx
index 0a7795b5e8..6041a5f7d4 100644
--- a/apps/web/components/ImageUploader.tsx
+++ b/apps/web/components/ImageUploader.tsx
@@ -156,12 +156,8 @@ export default function ImageUploader({
           </div>
         </div>
         <div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
-          <DialogClose asChild>
-            <Button onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</Button>
-          </DialogClose>
-          <DialogClose asChild>
-            <Button color="secondary">{t("cancel")}</Button>
-          </DialogClose>
+          <DialogClose onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</DialogClose>
+          <DialogClose color="secondary">{t("cancel")}</DialogClose>
         </div>
       </DialogContent>
     </Dialog>
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 201f0a2879..0e098f6a2f 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -237,9 +237,7 @@ function BookingListItem(booking: BookingItemProps) {
           />
 
           <DialogFooter>
-            <DialogClose>
-              <Button color="secondary">{t("cancel")}</Button>
-            </DialogClose>
+            <DialogClose />
 
             <Button
               disabled={mutation.isLoading}
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index 11bd6f8251..59f2a14824 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -212,7 +212,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
   return (
     <Dialog open={isOpenDialog}>
-      <DialogContent useOwnActionButtons>
+      <DialogContent>
         <div className="flex flex-row space-x-3">
           <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
             <Icon.FiMapPin className="text-primary-600 h-6 w-6" />
diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index 4424653d0f..3f6b20d59a 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -2,7 +2,17 @@ import { Dispatch, SetStateAction, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Dialog, DialogContent, Icon, showToast, TextArea } from "@calcom/ui";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  Icon,
+  showToast,
+  TextArea,
+} from "@calcom/ui";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
@@ -30,44 +40,41 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
 
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
-      <DialogContent
-        Icon={Icon.FiClock}
-        useOwnActionButtons
-        title={t("send_reschedule_request")}
-        description={t("reschedule_modal_description")}>
-        <div>
-          <p className="text-sm font-medium text-black">
-            {t("reason_for_reschedule_request")}
-            <span className="font-normal text-gray-500"> (Optional)</span>
-          </p>
-          <TextArea
-            data-testid="reschedule_reason"
-            name={t("reschedule_reason")}
-            value={rescheduleReason}
-            onChange={(e) => setRescheduleReason(e.target.value)}
-            className="mt-2"
-          />
-        </div>
-        <div className="flex justify-end space-x-2">
-          <Button
-            onClick={() => {
-              setRescheduleReason("");
-              setIsOpenDialog(false);
-            }}
-            color="secondary">
-            {t("cancel")}
-          </Button>
-          <Button
-            data-testid="send_request"
-            disabled={isLoading}
-            onClick={() => {
-              rescheduleApi({
-                bookingId,
-                rescheduleReason,
-              });
-            }}>
-            {t("send_reschedule_request")}
-          </Button>
+      <DialogContent>
+        <div className="flex flex-row space-x-3">
+          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
+            <Icon.FiClock className="m-auto h-6 w-6" />
+          </div>
+          <div className="pt-1">
+            <DialogHeader title={t("send_reschedule_request")} />
+            <p className="-mt-8 text-sm text-gray-500">{t("reschedule_modal_description")}</p>
+            <p className="mt-6 mb-2 text-sm font-bold text-black">
+              {t("reason_for_reschedule_request")}
+              <span className="font-normal text-gray-500"> (Optional)</span>
+            </p>
+            <TextArea
+              data-testid="reschedule_reason"
+              name={t("reschedule_reason")}
+              value={rescheduleReason}
+              onChange={(e) => setRescheduleReason(e.target.value)}
+              className="mb-5 sm:mb-6"
+            />
+
+            <DialogFooter>
+              <DialogClose />
+              <Button
+                data-testid="send_request"
+                disabled={isLoading}
+                onClick={() => {
+                  rescheduleApi({
+                    bookingId,
+                    rescheduleReason,
+                  });
+                }}>
+                {t("send_reschedule_request")}
+              </Button>
+            </DialogFooter>
+          </div>
         </div>
       </DialogContent>
     </Dialog>
diff --git a/apps/web/components/eventtype/CreateEventType.tsx b/apps/web/components/eventtype/CreateEventType.tsx
index f7cff9aa49..c732671227 100644
--- a/apps/web/components/eventtype/CreateEventType.tsx
+++ b/apps/web/components/eventtype/CreateEventType.tsx
@@ -264,9 +264,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
             <Button type="submit" loading={createMutation.isLoading}>
               {t("continue")}
             </Button>
-            <DialogClose asChild>
-              <Button color="secondary">{t("cancel")}</Button>
-            </DialogClose>
+            <DialogClose />
           </div>
         </Form>
       </DialogContent>
diff --git a/apps/web/components/eventtype/EditLocationDialog.tsx b/apps/web/components/eventtype/EditLocationDialog.tsx
index b19615cef9..a06873616e 100644
--- a/apps/web/components/eventtype/EditLocationDialog.tsx
+++ b/apps/web/components/eventtype/EditLocationDialog.tsx
@@ -211,7 +211,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
       <DialogContent
         type="creation"
         Icon={Icon.FiMapPin}
-        useOwnActionButtons
         title={t("edit_location")}
         description={!booking ? t("this_input_will_shown_booking_this_event") : undefined}>
         {booking && (
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 0730bc93a3..c5405451f5 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -15,7 +15,9 @@ import {
   Checkbox,
   CustomInputItem,
   Dialog,
+  DialogClose,
   DialogContent,
+  DialogFooter,
   Icon,
   Label,
   SettingsToggle,
@@ -352,11 +354,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
           <DialogContent
             title={t("custom_event_name")}
             description={t("custom_event_name_description")}
-            type="creation"
-            actionText="Create"
-            // Set event name back to what it was on close
-            actionOnClose={() => formMethods.setValue("eventName", eventType.eventName ?? "")}
-            actionOnClick={() => setShowEventNameTip(false)}>
+            type="creation">
             <TextField
               label={t("event_name")}
               type="text"
@@ -370,6 +368,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               <p>{`{HOST/ATTENDEE} = ${t("dynamically_display_attendee_or_organizer")}`}</p>
               <p>{`{LOCATION} = ${t("event_location")}`}</p>
             </div>
+            <DialogFooter>
+              <Button color="primary" onClick={() => setShowEventNameTip(false)}>
+                {t("create")}
+              </Button>
+              <DialogClose onClick={() => formMethods.setValue("eventName", eventType.eventName ?? "")} />
+            </DialogFooter>
           </DialogContent>
         </Dialog>
       )}
@@ -383,7 +387,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               type="creation"
               Icon={Icon.FiPlus}
               title={t("add_new_custom_input_field")}
-              useOwnActionButtons
               description={t("this_input_will_shown_booking_this_event")}>
               <CustomInputTypeForm
                 selectedCustomInput={selectedCustomInput}
diff --git a/apps/web/components/settings/DisableTwoFactorModal.tsx b/apps/web/components/settings/DisableTwoFactorModal.tsx
index 809059ac97..16caf51282 100644
--- a/apps/web/components/settings/DisableTwoFactorModal.tsx
+++ b/apps/web/components/settings/DisableTwoFactorModal.tsx
@@ -72,11 +72,7 @@ const DisableTwoFactorAuthModal = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        title={t("disable_2fa")}
-        description={t("disable_2fa_recommendation")}
-        type="creation"
-        useOwnActionButtons>
+      <DialogContent title={t("disable_2fa")} description={t("disable_2fa_recommendation")} type="creation">
         <Form form={form} handleSubmit={handleDisable}>
           <div className="mb-4">
             <PasswordField
diff --git a/apps/web/components/settings/EnableTwoFactorModal.tsx b/apps/web/components/settings/EnableTwoFactorModal.tsx
index 7f3f9f1b8d..0fc1d80366 100644
--- a/apps/web/components/settings/EnableTwoFactorModal.tsx
+++ b/apps/web/components/settings/EnableTwoFactorModal.tsx
@@ -130,11 +130,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        title={t("enable_2fa")}
-        description={setupDescriptions[step]}
-        type="creation"
-        useOwnActionButtons>
+      <DialogContent title={t("enable_2fa")} description={setupDescriptions[step]} type="creation">
         <WithStep step={SetupStep.ConfirmPassword} current={step}>
           <form onSubmit={handleSetup}>
             <div className="mb-4">
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index 08030ad41c..1389d64b02 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -347,10 +347,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 {t("save")}
               </Button>
             )}
-            <DialogClose asChild>
-              <Button color="secondary" onClick={() => setOpenDialogSaveUsername(false)}>
-                {t("cancel")}
-              </Button>
+            <DialogClose color="secondary" onClick={() => setOpenDialogSaveUsername(false)}>
+              {t("cancel")}
             </DialogClose>
           </div>
         </DialogContent>
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index 4007eba87f..b1edd1b919 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -194,10 +194,8 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
               {t("save")}
             </Button>
 
-            <DialogClose asChild>
-              <Button color="secondary" onClick={() => setOpenDialogSaveUsername(false)}>
-                {t("cancel")}
-              </Button>
+            <DialogClose color="secondary" onClick={() => setOpenDialogSaveUsername(false)}>
+              {t("cancel")}
             </DialogClose>
           </div>
         </DialogContent>
diff --git a/apps/web/pages/settings/developer/api-keys.tsx b/apps/web/pages/settings/developer/api-keys.tsx
index 6a1aebdfc2..1d9e5da35c 100644
--- a/apps/web/pages/settings/developer/api-keys.tsx
+++ b/apps/web/pages/settings/developer/api-keys.tsx
@@ -79,7 +79,7 @@ const ApiKeysView = () => {
       </LicenseRequired>
 
       <Dialog open={apiKeyModal} onOpenChange={setApiKeyModal}>
-        <DialogContent type="creation" useOwnActionButtons>
+        <DialogContent type="creation">
           <ApiKeyDialogForm handleClose={() => setApiKeyModal(false)} defaultValues={apiKeyToEdit} />
         </DialogContent>
       </Dialog>
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index 0d6fa2237d..cf3486ae10 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -5,7 +5,9 @@ import { trpc } from "@calcom/trpc/react";
 import {
   Button,
   Dialog,
+  DialogClose,
   DialogContent,
+  DialogFooter,
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -111,10 +113,14 @@ const ConferencingLayout = () => {
           title={t("Remove app")}
           description={t("are_you_sure_you_want_to_remove_this_app")}
           type="confirmation"
-          actionText={t("yes_remove_app")}
-          Icon={Icon.FiAlertCircle}
-          actionOnClick={() => deleteAppMutation.mutate({ id: deleteCredentialId })}
-        />
+          Icon={Icon.FiAlertCircle}>
+          <DialogFooter>
+            <Button color="primary" onClick={() => deleteAppMutation.mutate({ id: deleteCredentialId })}>
+              {t("yes_remove_app")}
+            </Button>
+            <DialogClose />
+          </DialogFooter>
+        </DialogContent>
       </Dialog>
     </div>
   );
diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index c26538d1ac..05419874c2 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -14,7 +14,9 @@ import {
   Avatar,
   Button,
   Dialog,
+  DialogClose,
   DialogContent,
+  DialogFooter,
   DialogTrigger,
   Form,
   getSettingsLayout as getLayout,
@@ -298,13 +300,7 @@ const ProfileView = () => {
             title={t("delete_account_modal_title")}
             description={t("confirm_delete_account_modal")}
             type="creation"
-            actionText={t("delete_my_account")}
-            actionProps={{
-              // @ts-expect-error data attributes aren't typed
-              "data-testid": "delete-account-confirm",
-            }}
-            Icon={Icon.FiAlertTriangle}
-            actionOnClick={(e) => e && onConfirmButton(e)}>
+            Icon={Icon.FiAlertTriangle}>
             <>
               <p className="mb-7">{t("delete_account_confirmation_message")}</p>
               {isCALIdentityProviver && (
@@ -326,6 +322,15 @@ const ProfileView = () => {
               )}
 
               {hasDeleteErrors && <Alert severity="error" title={deleteErrorMessage} />}
+              <DialogFooter>
+                <Button
+                  color="primary"
+                  data-testid="delete-account-confirm"
+                  onClick={(e) => onConfirmButton(e)}>
+                  {t("delete_my_account")}
+                </Button>
+                <DialogClose />
+              </DialogFooter>
             </>
           </DialogContent>
         </Dialog>
@@ -337,9 +342,7 @@ const ProfileView = () => {
           title={t("confirm_password")}
           description={t("confirm_password_change_email")}
           type="creation"
-          actionText={t("confirm")}
-          Icon={Icon.FiAlertTriangle}
-          actionOnClick={(e) => e && onConfirmPassword(e)}>
+          Icon={Icon.FiAlertTriangle}>
           <>
             <PasswordField
               data-testid="password"
@@ -352,6 +355,12 @@ const ProfileView = () => {
             />
 
             {confirmPasswordErrorMessage && <Alert severity="error" title={confirmPasswordErrorMessage} />}
+            <DialogFooter>
+              <Button color="primary" onClick={(e) => onConfirmPassword(e)}>
+                {t("confirm")}
+              </Button>
+              <DialogClose />
+            </DialogFooter>
           </>
         </DialogContent>
       </Dialog>
diff --git a/packages/app-store/ee/routing-forms/components/FormActions.tsx b/packages/app-store/ee/routing-forms/components/FormActions.tsx
index bc2855ec4b..ca0865f9a2 100644
--- a/packages/app-store/ee/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/ee/routing-forms/components/FormActions.tsx
@@ -120,9 +120,7 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
             <Button loading={mutation.isLoading} data-testid="add-form" type="submit">
               {t("continue")}
             </Button>
-            <DialogClose asChild>
-              <Button color="secondary">{t("cancel")}</Button>
-            </DialogClose>
+            <DialogClose />
           </div>
         </Form>
       </DialogContent>
diff --git a/packages/app-store/ee/routing-forms/components/SingleForm.tsx b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
index b9e177aaf8..d98a15bdd9 100644
--- a/packages/app-store/ee/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
@@ -379,16 +379,14 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                 )}
               </div>
               <DialogFooter>
-                <DialogClose asChild>
-                  <Button
-                    color="secondary"
-                    onClick={() => {
-                      setIsTestPreviewOpen(false);
-                      setDecidedAction(null);
-                      setResponse({});
-                    }}>
-                    {t("close")}
-                  </Button>
+                <DialogClose
+                  color="secondary"
+                  onClick={() => {
+                    setIsTestPreviewOpen(false);
+                    setDecidedAction(null);
+                    setResponse({});
+                  }}>
+                  {t("close")}
                 </DialogClose>
                 <Button type="submit" data-testid="test-routing">
                   {t("test_routing")}
diff --git a/packages/app-store/giphy/components/SearchDialog.tsx b/packages/app-store/giphy/components/SearchDialog.tsx
index f891b0a965..fc363f3900 100644
--- a/packages/app-store/giphy/components/SearchDialog.tsx
+++ b/packages/app-store/giphy/components/SearchDialog.tsx
@@ -187,13 +187,12 @@ export const SearchDialog = (props: ISearchDialog) => {
         )}
         <DialogFooter>
           <DialogClose
+            color="minimal"
+            tabIndex={-1}
             onClick={() => {
               props.setIsOpenDialog(false);
-            }}
-            asChild>
-            <Button type="button" color="minimal" tabIndex={-1}>
-              {t("cancel")}
-            </Button>
+            }}>
+            {t("cancel")}
           </DialogClose>
 
           <Button
diff --git a/packages/app-store/office365video/components/AccountDialog.tsx b/packages/app-store/office365video/components/AccountDialog.tsx
index ceae5db1d3..2216ffe2d9 100644
--- a/packages/app-store/office365video/components/AccountDialog.tsx
+++ b/packages/app-store/office365video/components/AccountDialog.tsx
@@ -15,13 +15,13 @@ export function AccountDialog(props: DialogProps) {
 
         <DialogFooter>
           <DialogClose
+            type="button"
+            color="secondary"
+            tabIndex={-1}
             onClick={() => {
               props.onOpenChange?.(false);
-            }}
-            asChild>
-            <Button type="button" color="secondary" tabIndex={-1}>
-              Cancel
-            </Button>
+            }}>
+            Cancel
           </DialogClose>
 
           <Button type="button" onClick={() => mutation.mutate("")}>
diff --git a/packages/features/ee/sso/components/SAMLConfiguration.tsx b/packages/features/ee/sso/components/SAMLConfiguration.tsx
index 2bf4ae1441..a80296462a 100644
--- a/packages/features/ee/sso/components/SAMLConfiguration.tsx
+++ b/packages/features/ee/sso/components/SAMLConfiguration.tsx
@@ -174,7 +174,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
 
         {/* Add/Update SAML Connection */}
         <Dialog open={configModal} onOpenChange={setConfigModal}>
-          <DialogContent type="creation" useOwnActionButtons>
+          <DialogContent type="creation">
             <ConfigDialogForm handleClose={() => setConfigModal(false)} teamId={teamId} />
           </DialogContent>
         </Dialog>
diff --git a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
index 8e3ba8ccc7..0849de0f48 100644
--- a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
+++ b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
@@ -67,7 +67,7 @@ export default function MemberChangeRoleModal(props: {
   }
   return (
     <Dialog open={props.isOpen} onOpenChange={props.onExit}>
-      <DialogContent type="creation" useOwnActionButtons size="md">
+      <DialogContent type="creation" size="md">
         <>
           <div className="mb-4 sm:flex sm:items-start">
             <div className="text-center sm:text-left">
diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index b72c1c9e77..53370eb1ee 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -66,7 +66,6 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
       }}>
       <DialogContent
         type="creation"
-        useOwnActionButtons
         title={t("invite_new_member")}
         description={
           IS_TEAM_BILLING_ENABLED ? (
diff --git a/packages/features/ee/teams/components/MemberListItem.tsx b/packages/features/ee/teams/components/MemberListItem.tsx
index ba6b5e309f..b962b53cae 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -13,6 +13,7 @@ import {
   ConfirmationDialogContent,
   Dialog,
   DialogContent,
+  DialogFooter,
   DialogTrigger,
   Dropdown,
   DropdownItem,
@@ -258,11 +259,11 @@ export default function MemberListItem(props: Props) {
       )}
       {showTeamAvailabilityModal && (
         <Dialog open={showTeamAvailabilityModal} onOpenChange={() => setShowTeamAvailabilityModal(false)}>
-          <DialogContent type="creation" useOwnActionButtons size="md">
+          <DialogContent type="creation" size="md">
             <TeamAvailabilityModal team={props.team} member={props.member} />
-            <div className="flex justify-end border-t pt-5">
+            <DialogFooter>
               <Button onClick={() => setShowTeamAvailabilityModal(false)}>{t("done")}</Button>
-            </div>
+            </DialogFooter>
           </DialogContent>
         </Dialog>
       )}
diff --git a/packages/features/ee/workflows/components/AddActionDialog.tsx b/packages/features/ee/workflows/components/AddActionDialog.tsx
index f2ab45a5cf..c515b8e26b 100644
--- a/packages/features/ee/workflows/components/AddActionDialog.tsx
+++ b/packages/features/ee/workflows/components/AddActionDialog.tsx
@@ -102,7 +102,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
 
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
-      <DialogContent type="creation" useOwnActionButtons={true} title={t("add_action")}>
+      <DialogContent type="creation" title={t("add_action")}>
         <div className="space-x-3 ">
           <div className="pt-1">
             <Form
@@ -188,21 +188,17 @@ export const AddActionDialog = (props: IAddActionDialog) => {
                 </div>
               )}
               <DialogFooter>
-                <DialogClose asChild>
-                  <Button
-                    color="secondary"
-                    onClick={() => {
-                      setIsOpenDialog(false);
-                      form.unregister("sendTo");
-                      form.unregister("action");
-                      form.unregister("numberRequired");
-                      setIsPhoneNumberNeeded(false);
-                      setIsEmailAddressNeeded(false);
-                      setIsSenderIdNeeded(false);
-                    }}>
-                    {t("cancel")}
-                  </Button>
-                </DialogClose>
+                <DialogClose
+                  onClick={() => {
+                    setIsOpenDialog(false);
+                    form.unregister("sendTo");
+                    form.unregister("action");
+                    form.unregister("numberRequired");
+                    setIsPhoneNumberNeeded(false);
+                    setIsEmailAddressNeeded(false);
+                    setIsSenderIdNeeded(false);
+                  }}
+                />
                 <Button type="submit">{t("add")}</Button>
               </DialogFooter>
             </Form>
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index c6d610a1ef..5a2e525651 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -603,7 +603,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           </ConfirmationDialogContent>
         </Dialog>
         <Dialog open={isAdditionalInputsDialogOpen} onOpenChange={setIsAdditionalInputsDialogOpen}>
-          <DialogContent useOwnActionButtons type="creation" className="sm:max-w-[610px] md:h-[570px]">
+          <DialogContent type="creation" className="sm:max-w-[610px] md:h-[570px]">
             <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
               <h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
               <div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
@@ -649,11 +649,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
               </div>
             </div>
             <div className="flex flex-row-reverse">
-              <DialogClose asChild>
-                <Button color="primary" type="button">
-                  {t("close")}
-                </Button>
-              </DialogClose>
+              <DialogClose color="primary" />
             </div>
           </DialogContent>
         </Dialog>
diff --git a/packages/features/schedules/components/NewScheduleButton.tsx b/packages/features/schedules/components/NewScheduleButton.tsx
index e8af5aed3b..0a3b1d4df5 100644
--- a/packages/features/schedules/components/NewScheduleButton.tsx
+++ b/packages/features/schedules/components/NewScheduleButton.tsx
@@ -4,7 +4,17 @@ import { useForm } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Form, Icon, showToast } from "@calcom/ui";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogTrigger,
+  Form,
+  Icon,
+  showToast,
+} from "@calcom/ui";
 
 export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
   const router = useRouter();
@@ -78,14 +88,12 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
               />
             </div>
           </div>
-          <div className="mt-8 flex flex-row-reverse gap-x-2">
+          <DialogFooter>
             <Button type="submit" loading={createMutation.isLoading}>
               {t("continue")}
             </Button>
-            <DialogClose asChild>
-              <Button color="secondary">{t("cancel")}</Button>
-            </DialogClose>
-          </div>
+            <DialogClose />
+          </DialogFooter>
         </Form>
       </DialogContent>
     </Dialog>
diff --git a/packages/ui/ConfirmationDialogContent.tsx b/packages/ui/ConfirmationDialogContent.tsx
deleted file mode 100644
index 7d9713e3c9..0000000000
--- a/packages/ui/ConfirmationDialogContent.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * @deprecated file
- * All new changes should be made to the V2 file in
- * `/packages/ui/v2/core/ConfirmationDialogContent.tsx`
- */
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React, { PropsWithChildren, ReactNode } from "react";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import { Button, DialogClose, DialogContent, Icon } from ".";
-
-export type ConfirmationDialogContentProps = {
-  confirmBtn?: ReactNode;
-  confirmBtnText?: string;
-  cancelBtnText?: string;
-  isLoading?: boolean;
-  loadingText?: string;
-  onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  title: string;
-  variety?: "danger" | "warning" | "success";
-};
-
-/**
- * @deprecated file
- * All new changes should be made to the V2 file in
- * `/packages/ui/v2/core/ConfirmationDialogContent.tsx`
- */
-export default function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
-  const { t } = useLocale();
-  const {
-    title,
-    variety,
-    confirmBtn = null,
-    confirmBtnText = t("confirm"),
-    cancelBtnText = t("cancel"),
-    loadingText = t("loading"),
-    isLoading = false,
-    onConfirm,
-    children,
-  } = props;
-
-  return (
-    <DialogContent>
-      <div className="flex">
-        {variety && (
-          <div className="mt-0.5 ltr:mr-3">
-            {variety === "danger" && (
-              <div className="mx-auto rounded-full bg-red-100 p-2 text-center">
-                <Icon.FiAlertCircle className="h-5 w-5 text-red-600" />
-              </div>
-            )}
-            {variety === "warning" && (
-              <div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
-                <Icon.FiAlertCircle className="h-5 w-5 text-orange-600" />
-              </div>
-            )}
-            {variety === "success" && (
-              <div className="mx-auto rounded-full bg-green-100 p-2 text-center">
-                <Icon.FiCheck className="h-5 w-5 text-green-600" />
-              </div>
-            )}
-          </div>
-        )}
-        <div>
-          <DialogPrimitive.Title className="font-cal text-xl text-gray-900">{title}</DialogPrimitive.Title>
-          <DialogPrimitive.Description className="text-sm text-neutral-500">
-            {children}
-          </DialogPrimitive.Description>
-        </div>
-      </div>
-      <div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
-        <DialogClose disabled={isLoading} onClick={onConfirm} asChild>
-          {confirmBtn || (
-            <Button data-testid="confirm-button" color="primary" loading={isLoading}>
-              {isLoading ? loadingText : confirmBtnText}
-            </Button>
-          )}
-        </DialogClose>
-        <DialogClose disabled={isLoading} asChild>
-          <Button color="secondary">{cancelBtnText}</Button>
-        </DialogClose>
-      </div>
-    </DialogContent>
-  );
-}
diff --git a/packages/ui/TimezoneChangeDialog.tsx b/packages/ui/TimezoneChangeDialog.tsx
index b9983266bc..ae2eaa890e 100644
--- a/packages/ui/TimezoneChangeDialog.tsx
+++ b/packages/ui/TimezoneChangeDialog.tsx
@@ -6,6 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 
 import { Dialog, DialogContent, showToast } from ".";
+import { DialogClose, DialogFooter } from "./Dialog";
 
 export default function TimezoneChangeDialog() {
   const { t } = useLocale();
@@ -58,20 +59,23 @@ export default function TimezoneChangeDialog() {
 
   if (data?.user.impersonatedByUID) return null;
 
+  const ONE_DAY = 60 * 60 * 24; // 1 day in seconds (60 seconds * 60 minutes * 24 hours)
+  const THREE_MONTHS = ONE_DAY * 90; // 90 days in seconds (90 days * 1 day in seconds)
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
         title={t("update_timezone_question")}
         description={t("update_timezone_description", { formattedCurrentTz })}
         type="creation"
-        actionText={t("update_timezone")}
-        actionOnClick={() => updateTimezone()}
-        closeText={t("dont_update")}
-        onInteractOutside={() => onCancel(86400, false) /* 1 day expire */}
-        actionOnClose={() => onCancel(7776000, true) /* 3 months expire */}>
-        {/* todo: save this in db and auto-update when timezone changes (be able to disable??? if yes, /settings) 
+        onInteractOutside={() => onCancel(ONE_DAY, false) /* 1 day expire */}>
+        {/* todo: save this in db and auto-update when timezone changes (be able to disable??? if yes, /settings)
         <Checkbox description="Always update timezone" />
         */}
+        <DialogFooter>
+          <DialogClose onClick={() => onCancel(THREE_MONTHS, true)}>{t("dont_update")}</DialogClose>
+          <DialogClose onClick={() => updateTimezone()}>{t("update_timezone")}</DialogClose>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );
diff --git a/packages/ui/v2/core/ConfirmationDialogContent.tsx b/packages/ui/v2/core/ConfirmationDialogContent.tsx
index 66c3c138d0..7e6a85df01 100644
--- a/packages/ui/v2/core/ConfirmationDialogContent.tsx
+++ b/packages/ui/v2/core/ConfirmationDialogContent.tsx
@@ -33,7 +33,7 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
   } = props;
 
   return (
-    <DialogContent type="creation" useOwnActionButtons={true}>
+    <DialogContent type="creation">
       <div className="flex">
         {variety && (
           <div className="mt-0.5 ltr:mr-3">
@@ -62,16 +62,14 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
         </div>
       </div>
       <div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
-        <DialogClose disabled={isLoading} onClick={onConfirm} asChild>
-          {confirmBtn || (
-            <Button color="primary" loading={isLoading}>
-              {isLoading ? loadingText : confirmBtnText}
-            </Button>
-          )}
-        </DialogClose>
-        <DialogClose disabled={isLoading} asChild>
-          <Button color="secondary">{cancelBtnText}</Button>
-        </DialogClose>
+        {confirmBtn ? (
+          confirmBtn
+        ) : (
+          <DialogClose color="primary" loading={isLoading} onClick={(e) => onConfirm && onConfirm(e)}>
+            {isLoading ? loadingText : confirmBtnText}
+          </DialogClose>
+        )}
+        <DialogClose disabled={isLoading}>{cancelBtnText}</DialogClose>
       </div>
     </DialogContent>
   );
diff --git a/packages/ui/v2/core/Dialog.tsx b/packages/ui/v2/core/Dialog.tsx
index 3e45fb0615..e1d59dd59d 100644
--- a/packages/ui/v2/core/Dialog.tsx
+++ b/packages/ui/v2/core/Dialog.tsx
@@ -1,12 +1,12 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { useRouter } from "next/router";
-import React, { ReactNode, useState } from "react";
+import React, { forwardRef, HTMLProps, ReactNode, useState } from "react";
 import { Icon } from "react-feather";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Button } from "../../components/button";
+import { Button, ButtonProps } from "../../components/button";
 
 export type DialogProps = React.ComponentProps<typeof DialogPrimitive["Root"]> & {
   name?: string;
@@ -70,20 +70,11 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
   description?: string | JSX.Element | undefined;
   closeText?: string;
   actionDisabled?: boolean;
-  actionText?: string;
   Icon?: Icon;
-  // If this is set it allows you to overide the action buttons. Usefull if you need to use formcontext
-  useOwnActionButtons?: boolean;
-  actionOnClick?: (e: Event | React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  actionOnClose?: () => void;
-  actionProps?: React.ComponentProps<typeof Button>;
 };
 
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
-  (
-    { children, title, Icon, actionProps, useOwnActionButtons, type = "creation", ...props },
-    forwardedRef
-  ) => {
+  ({ children, title, Icon, type = "creation", ...props }, forwardedRef) => {
     const { t } = useLocale();
 
     return (
@@ -125,31 +116,6 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
               </div>
             </div>
           )}
-          {!useOwnActionButtons && (
-            <DialogFooter>
-              <div className="mt-2 flex space-x-2">
-                <DialogClose asChild>
-                  {/* This will require the i18n string passed in */}
-                  <Button color="minimal" onClick={props.actionOnClose}>
-                    {props.closeText ?? t("close")}
-                  </Button>
-                </DialogClose>
-                {props.actionOnClick ? (
-                  <Button
-                    color="primary"
-                    disabled={props.actionDisabled}
-                    onClick={props.actionOnClick}
-                    {...actionProps}>
-                    {props.actionText}
-                  </Button>
-                ) : (
-                  <Button color="primary" type="submit" disabled={props.actionDisabled} {...actionProps}>
-                    {props.actionText}
-                  </Button>
-                )}
-              </div>
-            </DialogFooter>
-          )}
         </DialogPrimitive.Content>
       </DialogPrimitive.Portal>
     );
@@ -175,7 +141,7 @@ export function DialogHeader(props: DialogHeaderProps) {
 export function DialogFooter(props: { children: ReactNode }) {
   return (
     <div>
-      <div className="mt-5 flex justify-end space-x-2 rtl:space-x-reverse">{props.children}</div>
+      <div className="mt-7 flex justify-end space-x-2 rtl:space-x-reverse ">{props.children}</div>
     </div>
   );
 }
@@ -183,4 +149,24 @@ export function DialogFooter(props: { children: ReactNode }) {
 DialogContent.displayName = "DialogContent";
 
 export const DialogTrigger = DialogPrimitive.Trigger;
-export const DialogClose = DialogPrimitive.Close;
+// export const DialogClose = DialogPrimitive.Close;
+
+export function DialogClose(
+  props: {
+    dialogCloseProps?: React.ComponentProps<typeof DialogPrimitive["Close"]>;
+    children?: ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    disabled?: boolean;
+    color?: ButtonProps["color"];
+  } & React.ComponentProps<typeof Button>
+) {
+  const { t } = useLocale();
+  return (
+    <DialogPrimitive.Close asChild {...props.dialogCloseProps}>
+      {/* This will require the i18n string passed in */}
+      <Button color={props.color || "minimal"} {...props}>
+        {props.children ? props.children : t("Close")}
+      </Button>
+    </DialogPrimitive.Close>
+  );
+}
diff --git a/packages/ui/v2/core/ImageUploader.tsx b/packages/ui/v2/core/ImageUploader.tsx
index 2cc0dc55c4..a2b9317b93 100644
--- a/packages/ui/v2/core/ImageUploader.tsx
+++ b/packages/ui/v2/core/ImageUploader.tsx
@@ -163,7 +163,7 @@ export default function ImageUploader({
           {buttonMsg}
         </Button>
       </DialogTrigger>
-      <DialogContent useOwnActionButtons>
+      <DialogContent>
         <div className="mb-4 sm:flex sm:items-start">
           <div className="mt-3 text-center sm:mt-0 sm:text-left">
             <h3 className="font-cal text-lg leading-6 text-gray-900" id="modal-title">
@@ -201,12 +201,8 @@ export default function ImageUploader({
           </div>
         </div>
         <div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-4">
-          <DialogClose asChild>
-            <Button onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</Button>
-          </DialogClose>
-          <DialogClose asChild>
-            <Button color="secondary">{t("cancel")}</Button>
-          </DialogClose>
+          <DialogClose onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</DialogClose>
+          <DialogClose color="secondary">{t("cancel")}</DialogClose>
         </div>
       </DialogContent>
     </Dialog>
diff --git a/packages/ui/v2/modules/event-types/CreateEventType.tsx b/packages/ui/v2/modules/event-types/CreateEventType.tsx
index d3aedd23b4..b4010045bd 100644
--- a/packages/ui/v2/modules/event-types/CreateEventType.tsx
+++ b/packages/ui/v2/modules/event-types/CreateEventType.tsx
@@ -205,7 +205,6 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
       <DialogContent
         type="creation"
         className="overflow-y-auto"
-        useOwnActionButtons
         title={teamId ? t("add_new_team_event_type") : t("add_new_event_type")}
         description={t("new_event_type_to_book_description")}>
         <Form
@@ -315,9 +314,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
             <Button type="submit" loading={createMutation.isLoading}>
               {t("continue")}
             </Button>
-            <DialogClose asChild>
-              <Button color="secondary">{t("cancel")}</Button>
-            </DialogClose>
+            <DialogClose />
           </div>
         </Form>
       </DialogContent>
diff --git a/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx b/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx
index e0f4ff3ea5..3ba8231da9 100644
--- a/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx
+++ b/packages/ui/v2/modules/integrations/DisconnectIntegration.tsx
@@ -3,7 +3,17 @@ import { useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 
-import { Button, ButtonProps, Dialog, DialogContent, DialogTrigger, Icon, showToast } from "../../..";
+import {
+  Button,
+  ButtonProps,
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+  Icon,
+  showToast,
+  DialogFooter,
+  DialogClose,
+} from "../../..";
 
 export default function DisconnectIntegration({
   credentialId,
@@ -52,10 +62,14 @@ export default function DisconnectIntegration({
           title={t("remove_app")}
           description={t("are_you_sure_you_want_to_remove_this_app")}
           type="confirmation"
-          actionText={t("yes_remove_app")}
-          Icon={Icon.FiAlertCircle}
-          actionOnClick={() => mutation.mutate({ id: credentialId })}
-        />
+          Icon={Icon.FiAlertCircle}>
+          <DialogFooter>
+            <DialogClose onClick={() => setModalOpen(false)} />
+            <DialogClose color="primary" onClick={() => mutation.mutate({ id: credentialId })}>
+              {t("yes_remove_app")}
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
       </Dialog>
     </>
   );