@embedreach/components 0.1.89 → 0.1.90

package/dist/chunks/index.js

@@ -62851,11 +62851,6 @@ const useRecipientStats = (automation2) => {
 const AutomationContext = createContext$1(
   null
 );
-const CommunicationContext = createContext$1(null);
-const LoadingContext = createContext$1(null);
-const ValidationContext = createContext$1(
-  null
-);
 const useAutomation = () => {
   const context2 = useContext$1(AutomationContext);
   if (!context2) {
@@ -62865,6 +62860,7 @@ const useAutomation = () => {
   }
   return context2;
 };
+const CommunicationContext = createContext$1(null);
 const useCommunication = () => {
   const context2 = useContext$1(CommunicationContext);
   if (!context2) {
@@ -62874,6 +62870,7 @@ const useCommunication = () => {
   }
   return context2;
 };
+const LoadingContext = createContext$1(null);
 const useLoading = () => {
   const context2 = useContext$1(LoadingContext);
   if (!context2) {
@@ -62881,6 +62878,9 @@ const useLoading = () => {
   }
   return context2;
 };
+const ValidationContext = createContext$1(
+  null
+);
 const useValidation = () => {
   const context2 = useContext$1(ValidationContext);
   if (!context2) {
@@ -62898,13 +62898,13 @@ const ViewAutomationProvider = ({
   const mountedRef = useRef(true);
   const { automation: fetchedAutomation, isLoading: isFetchLoading } = useGetBusinessAutomation(automationId);
   const automation2 = existingAutomation || fetchedAutomation;
-  const { isUpdating } = useUpdateBusinessAutomation(automationId);
   const communicationGroupId = automation2?.action_data?.find(
     (action) => action.action_type === "send_communication"
   )?.action_metadata.communication_group_id;
+  const { isUpdating } = useUpdateBusinessAutomation(automationId);
   const { communicationGroup, isGetting: isLoadingCommunicationGroup } = useGetCommunicationGroup(communicationGroupId || void 0);
-  const { isUpdating: isUpdatingCommunicationGroup } = useUpdateCommunicationGroup();
   const { estimatedMatchesStats } = useRecipientStats(automation2);
+  const { isUpdating: isUpdatingCommunicationGroup } = useUpdateCommunicationGroup();
   const [isLoading, setIsLoading] = useState(false);
   useEffect(() => {
     const loadingState = (!existingAutomation && isFetchLoading || isUpdating || isLoadingCommunicationGroup || isUpdatingCommunicationGroup) && mountedRef.current;
@@ -64989,6 +64989,20 @@ const DropdownMenuSeparator = React.forwardRef(({ className: className2, ...prop
   }
 ));
 DropdownMenuSeparator.displayName = Separator2.displayName;
+const CancelAutomationDialog = ({
+  open,
+  onOpenChange,
+  onCancel
+}) => {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "text-xl font-semibold", children: "Cancel Automation" }),
+    /* @__PURE__ */ jsx(DialogDescription, { className: "text-gray-600 mt-2 text-center", children: "Are you sure you want to cancel this automation? This action cannot be undone." }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-center gap-3 mt-6", children: [
+      /* @__PURE__ */ jsx(Button$1, { variant: "outline", onClick: () => onOpenChange(false), children: "Keep Running" }),
+      /* @__PURE__ */ jsx(Button$1, { variant: "destructive", onClick: onCancel, children: "Yes, Cancel Automation" })
+    ] })
+  ] }) });
+};
 const stepIndicatorContainer = "reach-styles-module__stepIndicatorContainer___FoKXB";
 const iconContainer = "reach-styles-module__iconContainer___Ki-1n";
 const checkIcon = "reach-styles-module__checkIcon___-krUS";
@@ -65418,6 +65432,12 @@ const EmailPreview = ({ mergeFieldsResponse }) => {
   const { communicationGroup } = useCommunication();
   const { automation: automation2 } = useAutomation();
   const { updateCommunicationGroup: updateCommunicationGroup2 } = useUpdateCommunicationGroup();
+  const { refetchAutomation: refreshAutomation } = useGetBusinessAutomation(
+    automation2?.id || ""
+  );
+  const { channelSenders } = useChannelSender();
+  const { channelAccounts } = useChannelAccount();
+  const { updateChannelSender: updateChannelSender2 } = useUpdateChannelSender();
   const [isUpdating, setIsUpdating] = useState(false);
   const [fromEmail, setFromEmail] = useState(
     communicationGroup?.email_channel_sender_id || null
@@ -65438,20 +65458,19 @@ const EmailPreview = ({ mergeFieldsResponse }) => {
   const [replyToEmailError, setReplyToEmailError] = useState(
     null
   );
-  const { refetchAutomation: refreshAutomation } = useGetBusinessAutomation(
-    automation2?.id || ""
-  );
   const [showHelpDialog, setShowHelpDialog] = useState(false);
   const initialRenderRef = useRef(true);
   const [isFormLoading, setIsFormLoading] = useState(true);
   const [userModifiedEmail, setUserModifiedEmail] = useState(false);
+  const [stripoDialogDimensions, setStripoDialogDimensions] = useState({
+    width: 0,
+    height: 0
+  });
+  const [updatingField, setUpdatingField] = useState(null);
   const debouncedSubject = useDebounce(subject, 500);
   const debouncedPreviewText = useDebounce(previewText, 500);
   const debouncedFromName = useDebounce(fromName, 500);
   const debouncedReplyToEmail = useDebounce(replyToEmail, 500);
-  const { channelSenders } = useChannelSender();
-  const { channelAccounts } = useChannelAccount();
-  const { updateChannelSender: updateChannelSender2 } = useUpdateChannelSender();
   const emailChannelSendersWithChannelAccounts = useMemo(
     () => channelSenders?.results?.filter((sender) => sender.channel_sender_metadata.userPart)?.flatMap((sender) => {
       const channelAccount = channelAccounts?.results?.find(
@@ -65470,10 +65489,6 @@ const EmailPreview = ({ mergeFieldsResponse }) => {
     }) || [],
     [channelSenders?.results, channelAccounts?.results]
   );
-  const [stripoDialogDimensions, setStripoDialogDimensions] = useState({
-    width: 0,
-    height: 0
-  });
   const emailPreviewDimensions = useMemo(
     () => ({
       width: 800,
@@ -65552,10 +65567,12 @@ const EmailPreview = ({ mergeFieldsResponse }) => {
         (sender) => sender.id === fromEmail
       );
       if (channelSender) {
-        setFromName(channelSender.channel_sender_metadata.emailFromName);
         if (!userModifiedEmail || isFormLoading) {
           setReplyToEmail(channelSender.channel_sender_metadata.emailReplyTo);
         }
+        if (isFormLoading) {
+          setFromName(channelSender.channel_sender_metadata.emailFromName);
+        }
         setIsFormLoading(false);
       }
     }
@@ -65584,7 +65601,7 @@ const EmailPreview = ({ mergeFieldsResponse }) => {
   ]);
   useEffect(() => {
     if (!initialRenderRef.current && debouncedFromName && fromEmail) {
-      setIsUpdating(true);
+      setUpdatingField("fromName");
       const updateSender = async () => {
         try {
           const channelSender = channelSenders?.results?.find(
@@ -65604,7 +65621,7 @@ const EmailPreview = ({ mergeFieldsResponse }) => {
         } catch (error2) {
           console.error("Error updating from name:", error2);
         } finally {
-          setIsUpdating(false);
+          setUpdatingField(null);
         }
       };
       updateSender();
@@ -65627,31 +65644,42 @@ const EmailPreview = ({ mergeFieldsResponse }) => {
     }
   }, [debouncedReplyToEmail]);
   useEffect(() => {
-    if (!initialRenderRef.current && debouncedReplyToEmail && fromEmail && !replyToEmailError) {
-      setIsUpdating(true);
-      const updateReplyTo = async () => {
-        try {
-          const channelSender = channelSenders?.results?.find(
-            (sender) => sender.id === fromEmail
-          );
-          if (channelSender) {
-            await updateChannelSender2({
-              id: fromEmail,
-              toUpdate: {
-                channel_sender_metadata: {
-                  ...channelSender.channel_sender_metadata,
-                  emailReplyTo: debouncedReplyToEmail
-                }
+    const updateReplyTo = async (args) => {
+      try {
+        const channelSender = channelSenders?.results?.find(
+          (sender) => sender.id === args.fromEmail
+        );
+        if (channelSender) {
+          console.log("Updating reply-to email:", args.debouncedReplyToEmail);
+          updateChannelSender2({
+            id: args.fromEmail,
+            toUpdate: {
+              channel_sender_metadata: {
+                ...channelSender.channel_sender_metadata,
+                emailReplyTo: args.debouncedReplyToEmail
               }
-            });
-          }
-        } catch (error2) {
-          console.error("Error updating reply-to email:", error2);
-        } finally {
-          setIsUpdating(false);
+            }
+          });
         }
-      };
-      updateReplyTo();
+      } catch (error2) {
+        console.error("Error updating reply-to email:", error2);
+      } finally {
+        setUpdatingField(null);
+      }
+    };
+    if (!initialRenderRef.current && fromEmail && !replyToEmailError) {
+      setUpdatingField("replyToEmail");
+      if (debouncedReplyToEmail) {
+        updateReplyTo({
+          fromEmail,
+          debouncedReplyToEmail
+        });
+      } else {
+        updateReplyTo({
+          fromEmail,
+          debouncedReplyToEmail: null
+        });
+      }
     }
   }, [
     debouncedReplyToEmail,
@@ -65765,7 +65793,7 @@ const EmailPreview = ({ mergeFieldsResponse }) => {
               placeholder: "Enter from name",
               value: fromName ?? "",
               onChange: (e4) => setFromName(e4.target.value),
-              disabled: isUpdating || !fromEmail || isFormLoading
+              disabled: isUpdating && updatingField !== "fromName" || !fromEmail || isFormLoading
             }
           )
         ] }),
@@ -65786,10 +65814,13 @@ const EmailPreview = ({ mergeFieldsResponse }) => {
               placeholder: "Enter reply to email",
               value: replyToEmail ?? "",
               onChange: (e4) => {
-                setReplyToEmail(e4.target.value);
-                setUserModifiedEmail(true);
+                const newValue = e4.target.value;
+                setReplyToEmail(newValue);
+                if (!userModifiedEmail) {
+                  setUserModifiedEmail(true);
+                }
               },
-              disabled: isUpdating || !fromEmail || isFormLoading
+              disabled: isUpdating && updatingField !== "replyToEmail" || !fromEmail || isFormLoading
             }
           ),
           replyToEmailError && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500 mt-1", children: replyToEmailError })
@@ -66094,19 +66125,12 @@ const useMe = () => {
 };
 const SMSPreview = ({ iconDefinitions, mergeFieldsResponse }) => {
   const { automation: automation2 } = useAutomation();
-  const [isUpdating, setIsUpdating] = useState(false);
   const _getCommunicationGroupFromAutomation = useCallback(() => {
     const actionGroup = automation2?.action_data?.find(
       (action) => action.action_type === "send_communication"
     );
     return actionGroup?.action_metadata.communication_group_id;
   }, [automation2?.action_data]);
-  const [mergeFieldValue, setMergeFieldValue] = useState("");
-  const [fromNumber, setFromNumber] = useState(null);
-  const [initCompanyName, setInitCompanyName] = useState(false);
-  const [companyName, setCompanyName] = useState(null);
-  const [message2, setMessage] = useState(null);
-  const [showSmsEditor, setShowSmsEditor] = useState(false);
   const { channelSenders } = useChannelSender();
   const { data: me2, isLoading: isMeLoading } = useMe();
   const { channelAccounts } = useChannelAccount();
@@ -66114,6 +66138,13 @@ const SMSPreview = ({ iconDefinitions, mergeFieldsResponse }) => {
   const { communicationGroup } = useGetCommunicationGroup(
     _getCommunicationGroupFromAutomation() ?? void 0
   );
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [mergeFieldValue, setMergeFieldValue] = useState("");
+  const [fromNumber, setFromNumber] = useState(null);
+  const [initCompanyName, setInitCompanyName] = useState(false);
+  const [companyName, setCompanyName] = useState(null);
+  const [message2, setMessage] = useState(null);
+  const [showSmsEditor, setShowSmsEditor] = useState(false);
   const inputRef = useRef(null);
   const debouncedMessage = useDebounce(message2, 1e3);
   const debouncedFromNumber = useDebounce(fromNumber, 1e3);
@@ -67061,9 +67092,9 @@ const PreviewAndSchedule = ({
   const { automation: automation2 } = useAutomation();
   const { communicationGroup } = useCommunication();
   const { updateAutomation: businessUpdateAutomation } = useUpdateBusinessAutomation(automation2?.id || "");
-  const updateAutomation2 = externalUpdateAutomation || ((params) => businessUpdateAutomation(params));
   const { channelSenders } = useChannelSender();
   const { channelAccounts } = useChannelAccount();
+  const updateAutomation2 = externalUpdateAutomation || ((params) => businessUpdateAutomation(params));
   const [emailPreview, setEmailPreview] = useState(null);
   const [smsPreview, setSmsPreview] = useState(null);
   const [channelSenderData, setChannelSenderData] = useState(null);
@@ -67510,29 +67541,19 @@ const TitleAndContent = ({ title: title2, subtitle, content: content2, className
     /* @__PURE__ */ jsx("div", { className: "bg-white rounded-2xl w-full border border-gray-200 p-6 relative", children: content2 })
   ] });
 };
-const containerVariants = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: 0.5,
-      staggerChildren: 0.1
-    }
-  }
-};
-const itemVariants = {
-  hidden: { opacity: 0, y: 10 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      type: "spring",
-      stiffness: 300,
-      damping: 24
-    }
-  }
-};
 const TriggerEditAutomation = ({ automation: automation2 }) => {
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 24
+      }
+    }
+  };
   if (!automation2.name) {
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[200px]", children: /* @__PURE__ */ jsx(BasicLoader, {}) });
   }
@@ -67540,7 +67561,16 @@ const TriggerEditAutomation = ({ automation: automation2 }) => {
     motion.div,
     {
       className: "bg-white rounded-2xl shadow-sm border border-gray-100 p-6 max-w-lg",
-      variants: containerVariants,
+      variants: {
+        hidden: { opacity: 0 },
+        visible: {
+          opacity: 1,
+          transition: {
+            duration: 0.5,
+            staggerChildren: 0.1
+          }
+        }
+      },
       initial: "hidden",
       animate: "visible",
       children: [
@@ -67749,7 +67779,7 @@ const getAutomationSteps = ({
     }
   ];
 };
-const useAutomationActions = () => {
+const useValidateStep = () => {
   const { automation: automation2 } = useAutomation();
   const { communicationGroup } = useCommunication();
   const validateStep = useCallback(
@@ -67838,6 +67868,7 @@ const EditAutomation = ({
   const { automation: automation2 } = useAutomation();
   const { communicationGroup } = useCommunication();
   const { estimatedMatchesStats } = useValidation();
+  const { validateStep } = useValidateStep();
   const [currentStep, setCurrentStep] = useState(
     void 0
   );
@@ -67845,7 +67876,6 @@ const EditAutomation = ({
   const { updateAutomation: updateAutomation2 } = useUpdateBusinessAutomation(
     automation2?.id || ""
   );
-  const { validateStep } = useAutomationActions();
   useEffect(() => {
     if (automation2) {
       setCurrentStep(
@@ -68044,6 +68074,39 @@ const EditAutomation = ({
     renderFooter()
   ] });
 };
+const EditAutomationDialog = ({
+  open,
+  onOpenChange,
+  iconDefinitions,
+  setOpenEditAutomationPopup,
+  logoUrl,
+  getExtraMergeFields,
+  onBeforeSchedule
+}) => {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "max-w-7xl w-full overflow-hidden p-0 h-full max-h-[calc(100dvh-10dvh)]",
+      hideCloseButton: true,
+      children: [
+        /* @__PURE__ */ jsxs(VisuallyHidden$2, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Edit Automation" }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: "Edit the automation to change the content, schedule, and other details." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          EditAutomation,
+          {
+            iconDefinitions,
+            setOpenEditAutomationPopup,
+            logoUrl,
+            getExtraMergeFields,
+            onBeforeSchedule
+          }
+        )
+      ]
+    }
+  ) });
+};
 const validateEmail = (email) => {
   const emailRegex = /^[^\s@.]+(?:\.[^\s@.]+)*@[^\s@.]+(?:\.[^\s@.]+)+$/;
   return emailRegex.test(email);
@@ -68200,6 +68263,52 @@ const SendPreviewPopup = ({ automation: automation2, type, setOpenSendPreviewPop
     )
   ] });
 };
+const PreviewEmailDialog = ({
+  open,
+  onOpenChange,
+  automation: automation2,
+  iconDefinitions,
+  setOpenSendPreviewPopup
+}) => {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxs(VisuallyHidden$2, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Send Preview Email" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Send a preview email to the automation." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      SendPreviewPopup,
+      {
+        automation: automation2,
+        type: "email",
+        setOpenSendPreviewPopup,
+        iconDefinitions
+      }
+    )
+  ] }) });
+};
+const PreviewSmsDialog = ({
+  open,
+  onOpenChange,
+  automation: automation2,
+  iconDefinitions,
+  setOpenSendPreviewPopup
+}) => {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxs(VisuallyHidden$2, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Send Preview SMS" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Send a preview SMS to the automation." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      SendPreviewPopup,
+      {
+        automation: automation2,
+        type: "sms",
+        setOpenSendPreviewPopup,
+        iconDefinitions
+      }
+    )
+  ] }) });
+};
 const ViewAutomationHeaderContainer = ({
   iconDefinitions,
   autoOpenEditPopup,
@@ -68209,13 +68318,14 @@ const ViewAutomationHeaderContainer = ({
   onBeforeSchedule,
   showBackButton = false
 }) => {
+  const mergedIconDefinitions = mergeIconDefinitions(iconDefinitions);
   const [openEditAutomationPopup, setOpenEditAutomationPopup] = useState(false);
   const [openSendPreviewSmsPopup, setOpenSendPreviewSmsPopup] = useState(false);
+  const [openSendPreviewEmailPopup, setOpenSendPreviewEmailPopup] = useState(false);
   const [
     cancelAutomationConfirmationPopup,
     setCancelAutomationConfirmationPopup
   ] = useState(false);
-  const [openSendPreviewEmailPopup, setOpenSendPreviewEmailPopup] = useState(false);
   const { automation: automation2 } = useAutomation();
   const { updateAutomation: updateAutomation2 } = useUpdateBusinessAutomation(
     automation2?.id || ""
@@ -68223,7 +68333,6 @@ const ViewAutomationHeaderContainer = ({
   const { invalidateAutomation } = useGetBusinessAutomation(
     automation2?.id || ""
   );
-  const mergedIconDefinitions = mergeIconDefinitions(iconDefinitions);
   const navigate = useNavigate();
   const { toast: toast2 } = useToast();
   useEffect(() => {
@@ -68277,102 +68386,6 @@ const ViewAutomationHeaderContainer = ({
   if (!automation2) {
     return /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center h-full", children: /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching Automation data", "Finishing up"] }) });
   }
-  const renderEditAutomationDialog = () => /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open: openEditAutomationPopup,
-      onOpenChange: handleEditDialogChange,
-      children: /* @__PURE__ */ jsxs(
-        DialogContent,
-        {
-          className: "max-w-7xl w-full overflow-hidden p-0 h-full max-h-[calc(100dvh-10dvh)]",
-          hideCloseButton: true,
-          children: [
-            /* @__PURE__ */ jsxs(VisuallyHidden$2, { children: [
-              /* @__PURE__ */ jsx(DialogTitle, { children: "Edit Automation" }),
-              /* @__PURE__ */ jsx(DialogDescription, { children: "Edit the automation to change the content, schedule, and other details." })
-            ] }),
-            /* @__PURE__ */ jsx(
-              EditAutomation,
-              {
-                iconDefinitions: mergedIconDefinitions,
-                setOpenEditAutomationPopup,
-                logoUrl,
-                getExtraMergeFields,
-                onBeforeSchedule
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-  const renderCancelAutomationDialog = () => /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open: cancelAutomationConfirmationPopup,
-      onOpenChange: setCancelAutomationConfirmationPopup,
-      children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: "text-xl font-semibold", children: "Cancel Automation" }),
-        /* @__PURE__ */ jsx(DialogDescription, { className: "text-gray-600 mt-2 text-center", children: "Are you sure you want to cancel this automation? This action cannot be undone." }),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-center gap-3 mt-6", children: [
-          /* @__PURE__ */ jsx(
-            Button$1,
-            {
-              variant: "outline",
-              onClick: () => setCancelAutomationConfirmationPopup(false),
-              children: "Keep Running"
-            }
-          ),
-          /* @__PURE__ */ jsx(Button$1, { variant: "destructive", onClick: handleCancelAutomation, children: "Yes, Cancel Automation" })
-        ] })
-      ] })
-    }
-  );
-  const renderPreviewSmsDialog = () => /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open: openSendPreviewSmsPopup,
-      onOpenChange: setOpenSendPreviewSmsPopup,
-      children: /* @__PURE__ */ jsxs(DialogContent, { children: [
-        /* @__PURE__ */ jsxs(VisuallyHidden$2, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: "Send Preview SMS" }),
-          /* @__PURE__ */ jsx(DialogDescription, { children: "Send a preview SMS to the automation." })
-        ] }),
-        /* @__PURE__ */ jsx(
-          SendPreviewPopup,
-          {
-            automation: automation2,
-            type: "sms",
-            setOpenSendPreviewPopup: setOpenSendPreviewSmsPopup,
-            iconDefinitions: mergedIconDefinitions
-          }
-        )
-      ] })
-    }
-  );
-  const renderPreviewEmailDialog = () => /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open: openSendPreviewEmailPopup,
-      onOpenChange: setOpenSendPreviewEmailPopup,
-      children: /* @__PURE__ */ jsxs(DialogContent, { children: [
-        /* @__PURE__ */ jsxs(VisuallyHidden$2, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: "Send Preview Email" }),
-          /* @__PURE__ */ jsx(DialogDescription, { children: "Send a preview email to the automation." })
-        ] }),
-        /* @__PURE__ */ jsx(
-          SendPreviewPopup,
-          {
-            automation: automation2,
-            type: "email",
-            setOpenSendPreviewPopup: setOpenSendPreviewEmailPopup,
-            iconDefinitions: mergedIconDefinitions
-          }
-        )
-      ] })
-    }
-  );
   const renderBackButton = () => {
     if (!showBackButton) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex justify-between items-start mb-4", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button$1, { onClick: () => navigate(-1), children: "Back" }) }) });
@@ -68448,10 +68461,46 @@ const ViewAutomationHeaderContainer = ({
     ] })
   ] }) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    renderEditAutomationDialog(),
-    renderCancelAutomationDialog(),
-    renderPreviewSmsDialog(),
-    renderPreviewEmailDialog(),
+    /* @__PURE__ */ jsx(
+      EditAutomationDialog,
+      {
+        open: openEditAutomationPopup,
+        onOpenChange: handleEditDialogChange,
+        iconDefinitions: mergedIconDefinitions,
+        setOpenEditAutomationPopup,
+        logoUrl,
+        getExtraMergeFields,
+        onBeforeSchedule
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CancelAutomationDialog,
+      {
+        open: cancelAutomationConfirmationPopup,
+        onOpenChange: setCancelAutomationConfirmationPopup,
+        onCancel: handleCancelAutomation
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PreviewSmsDialog,
+      {
+        open: openSendPreviewSmsPopup,
+        onOpenChange: setOpenSendPreviewSmsPopup,
+        automation: automation2,
+        iconDefinitions: mergedIconDefinitions,
+        setOpenSendPreviewPopup: setOpenSendPreviewSmsPopup
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PreviewEmailDialog,
+      {
+        open: openSendPreviewEmailPopup,
+        onOpenChange: setOpenSendPreviewEmailPopup,
+        automation: automation2,
+        iconDefinitions: mergedIconDefinitions,
+        setOpenSendPreviewPopup: setOpenSendPreviewEmailPopup
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "p-6 border-b border-gray-200 bg-background", children: [
       renderBackButton(),
       renderHeaderInfo(),
@@ -68460,7 +68509,7 @@ const ViewAutomationHeaderContainer = ({
   ] });
 };
 const ViewAutomationHeader = React__default.memo(ViewAutomationHeaderContainer);
-const ViewAutomationWrapper = ({
+const ViewAutomationMain = ({
   autoOpenEditPopup,
   showBackButton = false,
   logoUrl,
@@ -68533,7 +68582,7 @@ const ViewAutomationContent = ({ ...props }) => {
   const shouldAutoOpenEditPopup = props.autoOpenEditPopup || searchParams.get("autoOpenEditPopup");
   const shouldShowBackButton = searchParams.get("showBackButton") === "true" || props.showBackButton;
   return /* @__PURE__ */ jsx(ViewAutomationProvider, { automationId: effectiveAutomationId, children: /* @__PURE__ */ jsx("div", { className: "bg-background", children: /* @__PURE__ */ jsx(
-    ViewAutomationWrapper,
+    ViewAutomationMain,
     {
       ...props,
       autoOpenEditPopup: shouldAutoOpenEditPopup,