@embedreach/components 0.1.88 → 0.1.90

package/dist/chunks/index.js

@@ -45317,14 +45317,16 @@ const BasicLoader = ({
   ] });
 };
 const BlurDiv = ({ children: children2, className: className2 }) => {
-  return (
-    // <motion.div
-    //   initial={{ opacity: 0, filter: 'blur(8px)' }}
-    //   animate={{ opacity: 1, filter: 'blur(0px)' }}
-    //   exit={{ opacity: 0, filter: 'blur(8px)' }}
-    //   transition={{ duration: 0.3, ease: 'easeInOut' }}
-    //   className={className}>
-    /* @__PURE__ */ jsx("div", { className: className2, children: children2 })
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, filter: "blur(8px)" },
+      animate: { opacity: 1, filter: "blur(0px)" },
+      exit: { opacity: 0, filter: "blur(8px)" },
+      transition: { duration: 0.3, ease: "easeInOut" },
+      className: className2,
+      children: children2
+    }
   );
 };
 const IconDefinitions = {
@@ -62826,87 +62828,6 @@ const useSendTestCommunication = () => {
     isSendSuccess: sendTestCommunicationMutation.isSuccess
   };
 };
-var AutomationSteps = /* @__PURE__ */ ((AutomationSteps2) => {
-  AutomationSteps2[AutomationSteps2["SelectTrigger"] = 0] = "SelectTrigger";
-  AutomationSteps2[AutomationSteps2["SelectAudience"] = 1] = "SelectAudience";
-  AutomationSteps2[AutomationSteps2["SelectCommunication"] = 2] = "SelectCommunication";
-  AutomationSteps2[AutomationSteps2["PreviewAndSchedule"] = 3] = "PreviewAndSchedule";
-  return AutomationSteps2;
-})(AutomationSteps || {});
-const validateAutomationStep = async (args) => {
-  const { currentStep, automation: automation2, communicationGroup } = args;
-  if (currentStep === 0) {
-    return {
-      canMove: true,
-      errorMessage: null
-    };
-  }
-  if (currentStep === 1) {
-    return {
-      canMove: automation2.includeSegmentIds.length > 0,
-      errorMessage: "Please ensure you have selected at least one segment"
-    };
-  }
-  if (currentStep === 2) {
-    const actionDataCommunication = automation2.action_data?.find(
-      (action) => action.action_type === "send_communication"
-    );
-    if (!actionDataCommunication) {
-      return {
-        canMove: false,
-        errorMessage: "Please ensure you have selected either a email communication or text communication"
-      };
-    }
-    if (!communicationGroup || !communicationGroup.sms_channel_sender_id && !communicationGroup.email_channel_sender_id) {
-      return {
-        canMove: false,
-        errorMessage: "Please ensure you have selected either a email communication or text communication"
-      };
-    }
-    if (communicationGroup.email_channel_sender_id) {
-      if (!communicationGroup.email_html_body || !communicationGroup.email_subject) {
-        return {
-          canMove: false,
-          errorMessage: "Please ensure you have a email body and subject"
-        };
-      }
-    }
-    if (communicationGroup.sms_channel_sender_id) {
-      if (!communicationGroup.sms_message_body) {
-        return {
-          canMove: false,
-          errorMessage: "Please ensure you have a sms message body"
-        };
-      }
-    }
-  }
-  if (currentStep === 3) {
-    const isOneTime = isOneTimeTriggerMetadata(automation2.trigger_metadata);
-    if (isOneTime) {
-      const oneTimeMetadata = automation2.trigger_metadata;
-      return {
-        canMove: Boolean(
-          oneTimeMetadata.scheduled_at && new Date(oneTimeMetadata.scheduled_at) > /* @__PURE__ */ new Date() && automation2.action_data?.some(
-            (action) => action.action_type === "send_communication" && action.action_metadata.communication_group_id
-          )
-        ),
-        errorMessage: "Please ensure you have set a valid future date for your one-time automation"
-      };
-    }
-    return {
-      canMove: Boolean(
-        automation2.action_data?.some(
-          (action) => action.action_type === "send_communication" && action.action_metadata.communication_group_id
-        )
-      ),
-      errorMessage: null
-    };
-  }
-  return {
-    canMove: true,
-    errorMessage: null
-  };
-};
 const useRecipientStats = (automation2) => {
   const { data: estimatedMatches } = useGetCountOfBusinessAutomationRecipients({
     include_segments: automation2?.includeSegmentIds ?? [],
@@ -62927,29 +62848,66 @@ const useRecipientStats = (automation2) => {
     estimatedMatchesStats
   };
 };
-const useAutomation = (automationId, existingAutomation) => {
+const AutomationContext = createContext$1(
+  null
+);
+const useAutomation = () => {
+  const context2 = useContext$1(AutomationContext);
+  if (!context2) {
+    throw new Error(
+      "useAutomation must be used within a ViewAutomationProvider"
+    );
+  }
+  return context2;
+};
+const CommunicationContext = createContext$1(null);
+const useCommunication = () => {
+  const context2 = useContext$1(CommunicationContext);
+  if (!context2) {
+    throw new Error(
+      "useCommunication must be used within a ViewAutomationProvider"
+    );
+  }
+  return context2;
+};
+const LoadingContext = createContext$1(null);
+const useLoading = () => {
+  const context2 = useContext$1(LoadingContext);
+  if (!context2) {
+    throw new Error("useLoading must be used within a ViewAutomationProvider");
+  }
+  return context2;
+};
+const ValidationContext = createContext$1(
+  null
+);
+const useValidation = () => {
+  const context2 = useContext$1(ValidationContext);
+  if (!context2) {
+    throw new Error(
+      "useValidation must be used within a ViewAutomationProvider"
+    );
+  }
+  return context2;
+};
+const ViewAutomationProvider = ({
+  automationId,
+  existingAutomation,
+  children: children2
+}) => {
   const mountedRef = useRef(true);
-  const [manualLoading, setManualLoading] = useState(false);
-  const {
-    automation: fetchedAutomation,
-    isLoading: isFetchLoading,
-    invalidateAutomation: originalInvalidateAutomation
-  } = useGetBusinessAutomation(automationId);
-  const automation2 = fetchedAutomation;
-  const { updateAutomation: updateAutomation2, isUpdating } = useUpdateBusinessAutomation(automationId);
+  const { automation: fetchedAutomation, isLoading: isFetchLoading } = useGetBusinessAutomation(automationId);
+  const automation2 = existingAutomation || fetchedAutomation;
   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 { updateCommunicationGroup: updateCommunicationGroup2, isUpdating: isUpdatingCommunicationGroup } = useUpdateCommunicationGroup();
   const { estimatedMatchesStats } = useRecipientStats(automation2);
-  const [isValidatingStep, setIsValidatingStep] = useState(false);
+  const { isUpdating: isUpdatingCommunicationGroup } = useUpdateCommunicationGroup();
   const [isLoading, setIsLoading] = useState(false);
-  const invalidateAutomation = useCallback(() => {
-    originalInvalidateAutomation();
-  }, [originalInvalidateAutomation]);
   useEffect(() => {
-    const loadingState = (isFetchLoading || isUpdating || isLoadingCommunicationGroup || isValidatingStep || isUpdatingCommunicationGroup || manualLoading) && mountedRef.current;
+    const loadingState = (!existingAutomation && isFetchLoading || isUpdating || isLoadingCommunicationGroup || isUpdatingCommunicationGroup) && mountedRef.current;
     setIsLoading(loadingState);
   }, [
     existingAutomation,
@@ -62957,54 +62915,46 @@ const useAutomation = (automationId, existingAutomation) => {
     isFetchLoading,
     isUpdating,
     isLoadingCommunicationGroup,
-    isValidatingStep,
-    isUpdatingCommunicationGroup,
-    manualLoading
+    isUpdatingCommunicationGroup
   ]);
   useEffect(() => {
     return () => {
       mountedRef.current = false;
     };
   }, []);
-  const validateStep = useCallback(
-    async (currentStep) => {
-      if (!automation2) {
-        return {
-          canMove: false,
-          errorMessage: "Automation not loaded"
-        };
-      }
-      try {
-        setIsValidatingStep(true);
-        return await validateAutomationStep({
-          currentStep,
-          automation: automation2,
-          communicationGroup
-        });
-      } finally {
-        if (mountedRef.current) {
-          setIsValidatingStep(false);
+  return /* @__PURE__ */ jsx(
+    AutomationContext.Provider,
+    {
+      value: {
+        automation: automation2
+      },
+      children: /* @__PURE__ */ jsx(
+        CommunicationContext.Provider,
+        {
+          value: {
+            communicationGroup
+          },
+          children: /* @__PURE__ */ jsx(
+            LoadingContext.Provider,
+            {
+              value: {
+                isLoading
+              },
+              children: /* @__PURE__ */ jsx(
+                ValidationContext.Provider,
+                {
+                  value: {
+                    estimatedMatchesStats
+                  },
+                  children: children2
+                }
+              )
+            }
+          )
         }
-      }
-    },
-    [automation2, communicationGroup]
-  );
-  const setIsLoadingSafe = useCallback((loading2) => {
-    if (mountedRef.current) {
-      setManualLoading(loading2);
+      )
     }
-  }, []);
-  return {
-    automation: automation2,
-    updateAutomation: updateAutomation2,
-    communicationGroup,
-    updateCommunicationGroup: updateCommunicationGroup2,
-    isLoading,
-    setIsLoading: setIsLoadingSafe,
-    invalidateAutomation,
-    validateStep,
-    estimatedMatchesStats
-  };
+  );
 };
 const getChannelSenders = async () => {
   const response = await baseRequest(
@@ -63289,13 +63239,13 @@ ${smsPreview.body}` : smsPreview.body
 };
 const AutomationContent = ({
   iconDefinitions,
-  isLoading: isLoadingCommunicationGroup,
-  communicationGroup
+  isLoading: isLoadingCommunicationGroup
 }) => {
   const { channelSenders } = useChannelSender();
   const [emailData, setEmailData] = useState(null);
   const [smsData, setSmsData] = useState(null);
   const [loading2, setLoading2] = useState(false);
+  const { communicationGroup } = useCommunication();
   useEffect(() => {
     if (!communicationGroup || !channelSenders) {
       setLoading2(false);
@@ -65039,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";
@@ -65088,6 +65052,87 @@ const StepIndicator = ({
     )
   ] });
 };
+var AutomationSteps = /* @__PURE__ */ ((AutomationSteps2) => {
+  AutomationSteps2[AutomationSteps2["SelectTrigger"] = 0] = "SelectTrigger";
+  AutomationSteps2[AutomationSteps2["SelectAudience"] = 1] = "SelectAudience";
+  AutomationSteps2[AutomationSteps2["SelectCommunication"] = 2] = "SelectCommunication";
+  AutomationSteps2[AutomationSteps2["PreviewAndSchedule"] = 3] = "PreviewAndSchedule";
+  return AutomationSteps2;
+})(AutomationSteps || {});
+const validateAutomationStep = async (args) => {
+  const { currentStep, automation: automation2, communicationGroup } = args;
+  if (currentStep === 0) {
+    return {
+      canMove: true,
+      errorMessage: null
+    };
+  }
+  if (currentStep === 1) {
+    return {
+      canMove: automation2.includeSegmentIds.length > 0,
+      errorMessage: "Please ensure you have selected at least one segment"
+    };
+  }
+  if (currentStep === 2) {
+    const actionDataCommunication = automation2.action_data?.find(
+      (action) => action.action_type === "send_communication"
+    );
+    if (!actionDataCommunication) {
+      return {
+        canMove: false,
+        errorMessage: "Please ensure you have selected either a email communication or text communication"
+      };
+    }
+    if (!communicationGroup || !communicationGroup.sms_channel_sender_id && !communicationGroup.email_channel_sender_id) {
+      return {
+        canMove: false,
+        errorMessage: "Please ensure you have selected either a email communication or text communication"
+      };
+    }
+    if (communicationGroup.email_channel_sender_id) {
+      if (!communicationGroup.email_html_body || !communicationGroup.email_subject) {
+        return {
+          canMove: false,
+          errorMessage: "Please ensure you have a email body and subject"
+        };
+      }
+    }
+    if (communicationGroup.sms_channel_sender_id) {
+      if (!communicationGroup.sms_message_body) {
+        return {
+          canMove: false,
+          errorMessage: "Please ensure you have a sms message body"
+        };
+      }
+    }
+  }
+  if (currentStep === 3) {
+    const isOneTime = isOneTimeTriggerMetadata(automation2.trigger_metadata);
+    if (isOneTime) {
+      const oneTimeMetadata = automation2.trigger_metadata;
+      return {
+        canMove: Boolean(
+          oneTimeMetadata.scheduled_at && new Date(oneTimeMetadata.scheduled_at) > /* @__PURE__ */ new Date() && automation2.action_data?.some(
+            (action) => action.action_type === "send_communication" && action.action_metadata.communication_group_id
+          )
+        ),
+        errorMessage: "Please ensure you have set a valid future date for your one-time automation"
+      };
+    }
+    return {
+      canMove: Boolean(
+        automation2.action_data?.some(
+          (action) => action.action_type === "send_communication" && action.action_metadata.communication_group_id
+        )
+      ),
+      errorMessage: null
+    };
+  }
+  return {
+    canMove: true,
+    errorMessage: null
+  };
+};
 const mergeFieldTemplateCreator = (args) => {
   const { mergeFieldName } = args;
   return `{{${mergeFieldName}}}`;
@@ -65383,24 +65428,28 @@ const StripoWrapper = ({
     }
   ) });
 };
-const EmailPreview = ({
-  automation: automation2,
-  mergeFieldsResponse,
-  communicationGroup,
-  updateCommunicationGroup: updateCommunicationGroup2
-}) => {
+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
+    communicationGroup?.email_channel_sender_id || null
   );
   const [subject, setSubject] = useState(
-    communicationGroup.email_subject || null
+    communicationGroup?.email_subject || null
   );
   const [previewText, setPreviewText] = useState(
-    communicationGroup.email_preview_text || null
+    communicationGroup?.email_preview_text || null
   );
   const [body, setBody] = useState(
-    communicationGroup.email_html_body || null
+    communicationGroup?.email_html_body || null
   );
   const [showStripoEditor, setShowStripoEditor] = useState(false);
   const [saveClicked, setSaveClicked] = useState(false);
@@ -65409,20 +65458,19 @@ const EmailPreview = ({
   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(
@@ -65441,10 +65489,6 @@ const EmailPreview = ({
     }) || [],
     [channelSenders?.results, channelAccounts?.results]
   );
-  const [stripoDialogDimensions, setStripoDialogDimensions] = useState({
-    width: 0,
-    height: 0
-  });
   const emailPreviewDimensions = useMemo(
     () => ({
       width: 800,
@@ -65460,10 +65504,10 @@ const EmailPreview = ({
     return () => clearTimeout(timer);
   }, []);
   useEffect(() => {
-    if (communicationGroup.email_html_body) {
+    if (communicationGroup?.email_html_body) {
       setBody(communicationGroup.email_html_body);
     }
-  }, [communicationGroup.email_html_body, refreshAutomation]);
+  }, [communicationGroup?.email_html_body, refreshAutomation]);
   useEffect(() => {
     if (isUpdating) {
       const timer = setTimeout(() => {
@@ -65486,7 +65530,7 @@ const EmailPreview = ({
     };
   }, []);
   useEffect(() => {
-    if (!initialRenderRef.current && fromEmail && debouncedSubject && body && communicationGroup.id) {
+    if (!initialRenderRef.current && fromEmail && debouncedSubject && body && communicationGroup?.id) {
       setIsUpdating(true);
       const updateGroup = async () => {
         try {
@@ -65514,7 +65558,7 @@ const EmailPreview = ({
     debouncedSubject,
     debouncedPreviewText,
     body,
-    communicationGroup.id,
+    communicationGroup?.id,
     updateCommunicationGroup2
   ]);
   useEffect(() => {
@@ -65523,10 +65567,12 @@ const EmailPreview = ({
         (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);
       }
     }
@@ -65540,7 +65586,7 @@ const EmailPreview = ({
         const channelSender = allEmailSenders[0];
         setFromEmail(channelSender.id);
         updateCommunicationGroup2({
-          groupId: communicationGroup.id,
+          groupId: communicationGroup?.id || "",
           params: {
             email_channel_sender_id: channelSender.id
           }
@@ -65550,12 +65596,12 @@ const EmailPreview = ({
   }, [
     channelSenders?.results,
     fromEmail,
-    communicationGroup.id,
+    communicationGroup?.id,
     updateCommunicationGroup2
   ]);
   useEffect(() => {
     if (!initialRenderRef.current && debouncedFromName && fromEmail) {
-      setIsUpdating(true);
+      setUpdatingField("fromName");
       const updateSender = async () => {
         try {
           const channelSender = channelSenders?.results?.find(
@@ -65575,7 +65621,7 @@ const EmailPreview = ({
         } catch (error2) {
           console.error("Error updating from name:", error2);
         } finally {
-          setIsUpdating(false);
+          setUpdatingField(null);
         }
       };
       updateSender();
@@ -65598,31 +65644,42 @@ const EmailPreview = ({
     }
   }, [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,
@@ -65632,10 +65689,10 @@ const EmailPreview = ({
     replyToEmailError
   ]);
   useEffect(() => {
-    if (showStripoEditor === false && communicationGroup.id) {
+    if (showStripoEditor === false && communicationGroup?.id) {
       refreshAutomation();
     }
-  }, [showStripoEditor, communicationGroup.id, refreshAutomation]);
+  }, [showStripoEditor, communicationGroup?.id, refreshAutomation]);
   if (!channelAccounts || !channelSenders) {
     return /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center flex-1 h-full bg-white rounded-2xl w-full border border-gray-200 p-6 space-y-4 relative", children: /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching Email Preview..."] }) });
   }
@@ -65673,7 +65730,7 @@ const EmailPreview = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: " w-full", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: " w-full", children: automation2 && /* @__PURE__ */ jsx(
           StripoWrapper,
           {
             showStripoEditor,
@@ -65736,7 +65793,7 @@ const EmailPreview = ({
               placeholder: "Enter from name",
               value: fromName ?? "",
               onChange: (e4) => setFromName(e4.target.value),
-              disabled: isUpdating || !fromEmail || isFormLoading
+              disabled: isUpdating && updatingField !== "fromName" || !fromEmail || isFormLoading
             }
           )
         ] }),
@@ -65757,10 +65814,13 @@ const EmailPreview = ({
               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 })
@@ -66063,20 +66123,14 @@ const useMe = () => {
   });
   return query;
 };
-const SMSPreview = ({ automation: automation2, iconDefinitions, mergeFieldsResponse }) => {
-  const [isUpdating, setIsUpdating] = useState(false);
+const SMSPreview = ({ iconDefinitions, mergeFieldsResponse }) => {
+  const { automation: automation2 } = useAutomation();
   const _getCommunicationGroupFromAutomation = useCallback(() => {
-    const actionGroup = automation2.action_data?.find(
+    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);
+  }, [automation2?.action_data]);
   const { channelSenders } = useChannelSender();
   const { data: me2, isLoading: isMeLoading } = useMe();
   const { channelAccounts } = useChannelAccount();
@@ -66084,6 +66138,13 @@ const SMSPreview = ({ automation: automation2, iconDefinitions, mergeFieldsRespo
   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);
@@ -66294,16 +66355,15 @@ ${message2}` : message2
   ] });
 };
 const EditCampaignContent = ({
-  automation: automation2,
   iconDefinitions,
-  getExtraMergeFields,
-  communicationGroup,
-  updateAutomation: updateAutomation2,
-  updateCommunicationGroup: updateCommunicationGroup2
+  getExtraMergeFields
 }) => {
   const [selectedChannels, setSelectedChannels] = useState(null);
   const emailContainerRef = useRef(null);
   const { toast: toast2 } = useToast();
+  const { communicationGroup } = useCommunication();
+  const { updateCommunicationGroup: updateCommunicationGroup2 } = useUpdateCommunicationGroup();
+  const { automation: automation2 } = useAutomation();
   const { getMergeFields: getMergeFields2, isGetting: isGetMergeFieldsLoading } = useGetMergeFields(communicationGroup?.id ?? void 0);
   const [mergeFieldsResponse, setMergeFieldsResponse] = useState(void 0);
   useEffect(() => {
@@ -66506,11 +66566,7 @@ const EditCampaignContent = ({
           /* @__PURE__ */ jsx(
             EmailPreview,
             {
-              automation: automation2,
               iconDefinitions,
-              updateAutomation: updateAutomation2,
-              communicationGroup,
-              updateCommunicationGroup: updateCommunicationGroup2,
               mergeFieldsResponse
             }
           )
@@ -66522,7 +66578,6 @@ const EditCampaignContent = ({
       /* @__PURE__ */ jsx(
         SMSPreview,
         {
-          automation: automation2,
           iconDefinitions,
           mergeFieldsResponse
         }
@@ -67031,16 +67086,15 @@ const SelectTime = ({ iconDefinitions, automation: automation2, updateAutomation
   ) });
 };
 const PreviewAndSchedule = ({
-  automation: automation2,
   iconDefinitions,
-  isLoading,
-  communicationGroup,
   updateAutomation: externalUpdateAutomation
 }) => {
-  const { updateAutomation: businessUpdateAutomation } = useUpdateBusinessAutomation(automation2.id);
-  const updateAutomation2 = externalUpdateAutomation || ((params) => businessUpdateAutomation(params));
+  const { automation: automation2 } = useAutomation();
+  const { communicationGroup } = useCommunication();
+  const { updateAutomation: businessUpdateAutomation } = useUpdateBusinessAutomation(automation2?.id || "");
   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);
@@ -67102,7 +67156,7 @@ const PreviewAndSchedule = ({
       }
     }
   }, [communicationGroup, channelSenderData, channelAccountsData]);
-  if (isLoading) {
+  if (!automation2) {
     return /* @__PURE__ */ jsx(BasicLoader, { text: ["Loading..."] });
   }
   if (!emailPreview && !smsPreview) {
@@ -67123,8 +67177,8 @@ const PreviewAndSchedule = ({
         {
           subtitle: "Estimated recipient count may vary at time of delivery",
           iconDefinitions,
-          includeSegments: automation2.includeSegmentIds,
-          excludeSegments: automation2.excludeSegmentIds
+          includeSegments: automation2.includeSegmentIds || [],
+          excludeSegments: automation2.excludeSegmentIds || []
         }
       )
     ] }),
@@ -67487,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, {}) });
   }
@@ -67517,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: [
@@ -67558,15 +67611,12 @@ const TriggerEditAutomation = ({ automation: automation2 }) => {
     }
   ) });
 };
-const useAutomationSteps = ({
+const getAutomationSteps = ({
   automation: automation2,
-  updateAutomation: updateAutomation2,
   communicationGroup,
-  updateCommunicationGroup: updateCommunicationGroup2,
   iconDefinitions,
   getExtraMergeFields,
-  handleSaveAsDraft,
-  isLoading
+  handleSaveAsDraft
 }) => {
   if (!automation2) return [];
   return [
@@ -67662,10 +67712,6 @@ const useAutomationSteps = ({
             /* @__PURE__ */ jsx(
               EditCampaignContent,
               {
-                automation: automation2,
-                updateAutomation: updateAutomation2,
-                communicationGroup,
-                updateCommunicationGroup: updateCommunicationGroup2,
                 iconDefinitions,
                 getExtraMergeFields
               }
@@ -67698,15 +67744,7 @@ const useAutomationSteps = ({
         {
           className: "flex-1",
           title: "Preview and Schedule",
-          content: /* @__PURE__ */ jsx(
-            PreviewAndSchedule,
-            {
-              automation: automation2,
-              iconDefinitions,
-              isLoading,
-              communicationGroup
-            }
-          )
+          content: /* @__PURE__ */ jsx(PreviewAndSchedule, { iconDefinitions })
         },
         "send"
       ),
@@ -67741,6 +67779,29 @@ const useAutomationSteps = ({
     }
   ];
 };
+const useValidateStep = () => {
+  const { automation: automation2 } = useAutomation();
+  const { communicationGroup } = useCommunication();
+  const validateStep = useCallback(
+    async (currentStep) => {
+      if (!automation2) {
+        return {
+          canMove: false,
+          errorMessage: "Automation not loaded"
+        };
+      }
+      return await validateAutomationStep({
+        currentStep,
+        automation: automation2,
+        communicationGroup
+      });
+    },
+    [automation2, communicationGroup]
+  );
+  return {
+    validateStep
+  };
+};
 const BackNextButtonGroup = ({
   iconDefinitions,
   handleBack,
@@ -67797,30 +67858,38 @@ const BackNextButtonGroup = ({
   ] });
 };
 const EditAutomation = ({
-  automation: automation2,
-  updateAutomation: updateAutomation2,
-  communicationGroup,
-  updateCommunicationGroup: updateCommunicationGroup2,
   iconDefinitions,
   setOpenEditAutomationPopup,
   logoUrl,
   getExtraMergeFields,
-  onBeforeSchedule,
-  estimatedMatchesStats,
-  isLoading,
-  validateCanGoToNextStep,
-  setIsLoading
+  onBeforeSchedule
 }) => {
   const { toast: toast2 } = useToast();
+  const { automation: automation2 } = useAutomation();
+  const { communicationGroup } = useCommunication();
+  const { estimatedMatchesStats } = useValidation();
+  const { validateStep } = useValidateStep();
   const [currentStep, setCurrentStep] = useState(
-    /**
-     * We dont show the trigger step for trigger based automations
-     */
-    automation2.trigger_type === AutomationTriggerType.TRIGGER_BASED ? AutomationSteps.SelectTrigger : AutomationSteps.SelectAudience
+    void 0
   );
   const [isValidatingStep, setIsValidatingStep] = useState(false);
+  const { updateAutomation: updateAutomation2 } = useUpdateBusinessAutomation(
+    automation2?.id || ""
+  );
+  useEffect(() => {
+    if (automation2) {
+      setCurrentStep(
+        automation2.trigger_type === AutomationTriggerType.TRIGGER_BASED ? AutomationSteps.SelectTrigger : AutomationSteps.SelectAudience
+      );
+    }
+  }, [automation2]);
+  if (!automation2 || !currentStep || !communicationGroup) {
+    return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col @container justify-center items-center h-[500px]", children: /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching Automation data", "Finishing up"] }) });
+  }
   const handleSaveAsDraft = () => {
-    setIsLoading(true);
+    if (!automation2) {
+      return;
+    }
     updateAutomation2({
       status: AutomationStatus.DRAFT
     });
@@ -67829,21 +67898,14 @@ const EditAutomation = ({
       title: "Automation saved as draft",
       description: "You can continue editing it later"
     });
-    setIsLoading(false);
   };
-  const STEPS = useAutomationSteps({
+  const STEPS = getAutomationSteps({
     automation: automation2,
+    communicationGroup,
     iconDefinitions,
     getExtraMergeFields,
-    handleSaveAsDraft,
-    isLoading,
-    communicationGroup,
-    updateAutomation: updateAutomation2,
-    updateCommunicationGroup: updateCommunicationGroup2
+    handleSaveAsDraft
   });
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col @container justify-center items-center h-[500px]", children: /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching Automation data", "Finishing up"] }) });
-  }
   const handleScheduleAutomation = async () => {
     if (onBeforeSchedule) {
       try {
@@ -67852,7 +67914,6 @@ const EditAutomation = ({
           estimatedSmsRecipients: estimatedMatchesStats.phones
         });
         if (result === true) {
-          setIsLoading(true);
           updateAutomation2({
             status: AutomationStatus.ACTIVE
           });
@@ -67860,7 +67921,6 @@ const EditAutomation = ({
           toast2({
             title: "Automation scheduled!"
           });
-          setIsLoading(false);
         } else {
           toast2({
             title: "Oops!",
@@ -67876,21 +67936,15 @@ const EditAutomation = ({
         });
       }
     } else {
-      setIsLoading(true);
       updateAutomation2({ status: AutomationStatus.ACTIVE });
       setOpenEditAutomationPopup(false);
       toast2({
         title: "Automation scheduled!"
       });
-      setIsLoading(false);
     }
   };
   const handleNextStep = async () => {
-    const { canMove, errorMessage } = await validateCanGoToNextStep({
-      currentStep,
-      automation: automation2,
-      communicationGroup
-    });
+    const { canMove, errorMessage } = await validateStep(currentStep);
     if (!canMove) {
       toast2({
         title: "Oops!",
@@ -67917,11 +67971,7 @@ const EditAutomation = ({
     setIsValidatingStep(true);
     try {
       for (let step = currentStep; step < targetStep; step++) {
-        const { canMove, errorMessage } = await validateCanGoToNextStep({
-          currentStep: step,
-          automation: automation2,
-          communicationGroup
-        });
+        const { canMove, errorMessage } = await validateStep(step);
         if (!canMove) {
           return { canMove, errorMessage };
         }
@@ -68024,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);
@@ -68180,32 +68263,76 @@ const SendPreviewPopup = ({ automation: automation2, type, setOpenSendPreviewPop
     )
   ] });
 };
-const ViewAutomationHeaderContainer = ({
+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,
-  updateAutomation: updateAutomation2,
-  communicationGroup,
-  updateCommunicationGroup: updateCommunicationGroup2,
-  isLoading,
-  setIsLoading,
+  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,
   logoUrl,
   getExtraMergeFields,
   onDuplicationCreated,
   onBeforeSchedule,
-  invalidateAutomation,
-  estimatedMatchesStats,
-  validateStep,
   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 mergedIconDefinitions = mergeIconDefinitions(iconDefinitions);
+  const { automation: automation2 } = useAutomation();
+  const { updateAutomation: updateAutomation2 } = useUpdateBusinessAutomation(
+    automation2?.id || ""
+  );
+  const { invalidateAutomation } = useGetBusinessAutomation(
+    automation2?.id || ""
+  );
   const navigate = useNavigate();
   const { toast: toast2 } = useToast();
   useEffect(() => {
@@ -68231,6 +68358,13 @@ const ViewAutomationHeaderContainer = ({
     updateAutomation2({ status: AutomationStatus.DRAFT });
   };
   const handleDuplicateAutomation = async () => {
+    if (!automation2) {
+      toast2({
+        title: "Error duplicating automation",
+        description: "Please try again"
+      });
+      return;
+    }
     const { id: duplicatedId } = await duplicateBusinessAutomation(
       automation2.id
     );
@@ -68249,113 +68383,9 @@ const ViewAutomationHeaderContainer = ({
       description: "The automation has been duplicated"
     });
   };
-  const validateStepAdapter = async (args) => {
-    return validateStep(args.currentStep);
-  };
-  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,
-              {
-                automation: automation2,
-                updateAutomation: updateAutomation2,
-                communicationGroup,
-                updateCommunicationGroup: updateCommunicationGroup2,
-                isLoading,
-                setIsLoading,
-                iconDefinitions: mergedIconDefinitions,
-                setOpenEditAutomationPopup,
-                logoUrl,
-                getExtraMergeFields,
-                onBeforeSchedule,
-                estimatedMatchesStats,
-                validateCanGoToNextStep: validateStepAdapter
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-  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
-          }
-        )
-      ] })
-    }
-  );
+  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 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" }) }) });
@@ -68431,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(),
@@ -68443,57 +68509,34 @@ const ViewAutomationHeaderContainer = ({
   ] });
 };
 const ViewAutomationHeader = React__default.memo(ViewAutomationHeaderContainer);
-const ViewAutomationContent = ({
-  iconDefinitions,
+const ViewAutomationMain = ({
   autoOpenEditPopup,
-  automationId,
   showBackButton = false,
   logoUrl,
   getExtraMergeFields,
   onDuplicationCreated,
-  onBeforeSchedule
+  onBeforeSchedule,
+  iconDefinitions
 }) => {
-  const params = useParams();
-  const [searchParams] = useSearchParams();
+  const { automation: automation2 } = useAutomation();
+  const { communicationGroup } = useCommunication();
+  const { isLoading } = useLoading();
   const finalIconDefinitions = mergeIconDefinitions(iconDefinitions);
   const [activeTab, setActiveTab] = React__default.useState("content");
-  const effectiveAutomationId = automationId || params?.automationId || searchParams.get("automationId") || "";
-  const shouldAutoOpenEditPopup = autoOpenEditPopup || searchParams.get("autoOpenEditPopup");
-  const shouldShowBackButton = searchParams.get("showBackButton") === "true" || showBackButton;
-  const {
-    automation: automation2,
-    updateAutomation: updateAutomation2,
-    communicationGroup,
-    updateCommunicationGroup: updateCommunicationGroup2,
-    isLoading,
-    setIsLoading,
-    invalidateAutomation,
-    validateStep,
-    estimatedMatchesStats
-  } = useAutomation(effectiveAutomationId);
   if (!automation2 || !communicationGroup) {
     return /* @__PURE__ */ jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching Automation data", "Finishing up"] }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "bg-background", children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       ViewAutomationHeader,
       {
-        automation: automation2,
-        updateAutomation: updateAutomation2,
-        communicationGroup,
-        updateCommunicationGroup: updateCommunicationGroup2,
-        isLoading,
-        setIsLoading,
         iconDefinitions: finalIconDefinitions,
-        autoOpenEditPopup: shouldAutoOpenEditPopup,
-        showBackButton: shouldShowBackButton,
+        autoOpenEditPopup,
+        showBackButton,
         logoUrl,
         getExtraMergeFields,
         onDuplicationCreated,
-        onBeforeSchedule,
-        invalidateAutomation,
-        estimatedMatchesStats,
-        validateStep
+        onBeforeSchedule
       }
     ),
     /* @__PURE__ */ jsx(
@@ -68507,8 +68550,7 @@ const ViewAutomationContent = ({
               AutomationContent,
               {
                 iconDefinitions: finalIconDefinitions,
-                isLoading,
-                communicationGroup
+                isLoading
               }
             )
           },
@@ -68533,6 +68575,21 @@ const ViewAutomationContent = ({
     )
   ] });
 };
+const ViewAutomationContent = ({ ...props }) => {
+  const params = useParams();
+  const [searchParams] = useSearchParams();
+  const effectiveAutomationId = props.automationId || params?.automationId || searchParams.get("automationId") || "";
+  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(
+    ViewAutomationMain,
+    {
+      ...props,
+      autoOpenEditPopup: shouldAutoOpenEditPopup,
+      showBackButton: shouldShowBackButton
+    }
+  ) }) });
+};
 const ViewAutomation = ({ inRouter = false, ...props }) => inRouter ? /* @__PURE__ */ jsx(ViewAutomationContent, { ...props }) : /* @__PURE__ */ jsx(MemoryRouter, { children: /* @__PURE__ */ jsx(ViewAutomationContent, { ...props }) });
 Object.values(
   /* @__PURE__ */ Object.assign({})