@embedreach/components 0.1.87 → 0.1.89

package/dist/chunks/index.js

@@ -5887,6 +5887,117 @@ var ReactQueryDevtools2 = process.env.NODE_ENV !== "development" ? function() {
 process.env.NODE_ENV !== "development" ? function() {
   return null;
 } : ReactQueryDevtoolsPanel;
+class InvalidTokenError extends Error {
+}
+InvalidTokenError.prototype.name = "InvalidTokenError";
+function b64DecodeUnicode(str) {
+  return decodeURIComponent(atob(str).replace(/(.)/g, (m4, p2) => {
+    let code = p2.charCodeAt(0).toString(16).toUpperCase();
+    if (code.length < 2) {
+      code = "0" + code;
+    }
+    return "%" + code;
+  }));
+}
+function base64UrlDecode(str) {
+  let output = str.replace(/-/g, "+").replace(/_/g, "/");
+  switch (output.length % 4) {
+    case 0:
+      break;
+    case 2:
+      output += "==";
+      break;
+    case 3:
+      output += "=";
+      break;
+    default:
+      throw new Error("base64 string is not of the correct length");
+  }
+  try {
+    return b64DecodeUnicode(output);
+  } catch (err) {
+    return atob(output);
+  }
+}
+function jwtDecode(token, options) {
+  if (typeof token !== "string") {
+    throw new InvalidTokenError("Invalid token specified: must be a string");
+  }
+  options || (options = {});
+  const pos = options.header === true ? 0 : 1;
+  const part = token.split(".")[pos];
+  if (typeof part !== "string") {
+    throw new InvalidTokenError(`Invalid token specified: missing part #${pos + 1}`);
+  }
+  let decoded;
+  try {
+    decoded = base64UrlDecode(part);
+  } catch (e4) {
+    throw new InvalidTokenError(`Invalid token specified: invalid base64 for part #${pos + 1} (${e4.message})`);
+  }
+  try {
+    return JSON.parse(decoded);
+  } catch (e4) {
+    throw new InvalidTokenError(`Invalid token specified: invalid json for part #${pos + 1} (${e4.message})`);
+  }
+}
+const ErrorFallback = ({ error: error2 }) => /* @__PURE__ */ jsxs("div", { className: "p-6 max-w-lg mx-auto mt-10 bg-white rounded-lg shadow-md", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-start gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-12 w-12 rounded-full bg-red-100 text-red-600 mb-4", children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "h-6 w-6",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Oops! Something went wrong." })
+  ] }),
+  /* @__PURE__ */ jsx("p", { className: "text-gray-600 mb-4", children: "We have encountered a critical error and cannot continue. Please try refreshing the page." }),
+  error2 && /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-gray-50 rounded border border-gray-200", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-700 font-mono", children: error2.toString() }) })
+] });
+class ErrorBoundary extends React__default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+  static getDerivedStateFromError(error2) {
+    return { hasError: true, error: error2 };
+  }
+  componentDidCatch(error2, errorInfo) {
+    console.error("ErrorBoundary caught an error", error2, errorInfo);
+    this.setState({ errorInfo });
+  }
+  render() {
+    const { fallback, children: children2 } = this.props;
+    const { hasError, error: error2, errorInfo } = this.state;
+    if (hasError) {
+      if (fallback) {
+        return typeof fallback === "function" ? fallback(error2, errorInfo) : fallback;
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "p-4 border border-red-300 rounded-md bg-red-50 text-red-800", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-2", children: "Something went wrong" }),
+        /* @__PURE__ */ jsxs("details", { className: "whitespace-pre-wrap text-sm", children: [
+          /* @__PURE__ */ jsx("summary", { children: "See error details" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2", children: error2?.toString() }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2", children: errorInfo?.componentStack })
+        ] })
+      ] });
+    }
+    return children2;
+  }
+}
 function e(e4) {
   function t3(e5, t4) {
     Error.captureStackTrace && Error.captureStackTrace(this, this.constructor), this.message = e5, this.code = t4;
@@ -8077,6 +8188,36 @@ const oe = (e4) => {
   const { ldClient: t3 } = useContext$1(u$1.reactContext);
   return t3;
 };
+const LaunchDarklyProvider = ({
+  children: children2,
+  tenantExternalId,
+  partnerId
+}) => {
+  const key = tenantExternalId && partnerId ? `${tenantExternalId}:${partnerId}` : "anonymous";
+  return /* @__PURE__ */ jsx(
+    D$1,
+    {
+      clientSideID: "67a3c277012e1f09c67de499",
+      context: {
+        kind: "user",
+        key,
+        custom: {
+          tenantExternalId,
+          partnerId
+        }
+      },
+      options: {
+        streaming: false
+      },
+      timeout: 2,
+      reactOptions: {
+        useCamelCaseFlagKeys: false,
+        sendEventsOnFlagRead: true
+      },
+      children: children2
+    }
+  );
+};
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1e6;
 let count$6 = 0;
@@ -35053,6 +35194,7 @@ const configDefaults = {
 };
 const Observability = ({
   tenantExternalId,
+  partnerId,
   debug
 }) => {
   const ldClient = oe();
@@ -35093,7 +35235,8 @@ const Observability = ({
         })
       ],
       resourceAttributes: {
-        ["tenant.externalId"]: tenantExternalId
+        ["tenant.externalId"]: tenantExternalId,
+        ["partner.id"]: partnerId
       }
     });
     sdk.start();
@@ -35114,7 +35257,6 @@ const Observability = ({
 };
 const ReachProvider = ({
   authToken: authToken2,
-  tenantExternalId,
   language,
   children: children2,
   theme: theme2,
@@ -35126,38 +35268,52 @@ const ReachProvider = ({
     }
     return createQueryClient();
   });
-  return /* @__PURE__ */ jsx("div", { "data-reach-root": true, className: "h-full w-full", children: /* @__PURE__ */ jsxs(QueryClientProvider, { client: queryClient, children: [
+  let tenantExternalId;
+  let partnerId;
+  try {
+    const decodedToken = jwtDecode(authToken2);
+    tenantExternalId = decodedToken?.tenantExternalId;
+    partnerId = decodedToken?.partnerId || decodedToken?.platformId;
+    if (!tenantExternalId || !partnerId) {
+      throw new Error("Invalid authentication token");
+    }
+  } catch (error2) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-6 max-w-lg mx-auto mt-10 bg-white rounded-lg shadow-md", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-red-600 mb-4", children: "Authentication Error" }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-700", children: "The provided authentication token is invalid. Please ensure you're using a valid token." })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(ErrorFallback, {}), children: /* @__PURE__ */ jsx("div", { "data-reach-root": true, className: "h-full w-full", children: /* @__PURE__ */ jsxs(QueryClientProvider, { client: queryClient, children: [
     /* @__PURE__ */ jsxs(
-      D$1,
+      LaunchDarklyProvider,
       {
-        clientSideID: "67a3c277012e1f09c67de499",
-        context: {
-          kind: "user",
-          key: tenantExternalId || "anonymous",
-          custom: {
-            businessId: tenantExternalId
-            // Add any other custom attributes
-          }
-        },
-        options: {
-          streaming: false
-        },
-        timeout: 2,
-        reactOptions: {
-          useCamelCaseFlagKeys: false,
-          sendEventsOnFlagRead: true
-        },
+        tenantExternalId,
+        partnerId,
         children: [
-          /* @__PURE__ */ jsx(Observability, { tenantExternalId, debug }),
-          /* @__PURE__ */ jsx(I18nProvider, { language, initialLanguage: language?.default, children: /* @__PURE__ */ jsx(Provider$1, { initialTheme: theme2, children: /* @__PURE__ */ jsxs(Provider$2, { children: [
-            children2,
-            /* @__PURE__ */ jsx(Toaster, {})
-          ] }) }) })
+          /* @__PURE__ */ jsx(
+            Observability,
+            {
+              tenantExternalId,
+              partnerId,
+              debug
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            I18nProvider,
+            {
+              language,
+              initialLanguage: language?.default,
+              children: /* @__PURE__ */ jsx(Provider$1, { initialTheme: theme2, children: /* @__PURE__ */ jsxs(Provider$2, { children: [
+                children2,
+                /* @__PURE__ */ jsx(Toaster, {})
+              ] }) })
+            }
+          )
         ]
       }
     ),
     debug && /* @__PURE__ */ jsx(ReactQueryDevtools2, {})
-  ] }) });
+  ] }) }) });
 };
 function setRef$3(ref, value) {
   if (typeof ref === "function") {
@@ -62672,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 ?? [],
@@ -62773,29 +62848,66 @@ const useRecipientStats = (automation2) => {
     estimatedMatchesStats
   };
 };
-const useAutomation = (automationId, existingAutomation) => {
+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) {
+    throw new Error(
+      "useAutomation must be used within a ViewAutomationProvider"
+    );
+  }
+  return context2;
+};
+const useCommunication = () => {
+  const context2 = useContext$1(CommunicationContext);
+  if (!context2) {
+    throw new Error(
+      "useCommunication must be used within a ViewAutomationProvider"
+    );
+  }
+  return context2;
+};
+const useLoading = () => {
+  const context2 = useContext$1(LoadingContext);
+  if (!context2) {
+    throw new Error("useLoading must be used within a ViewAutomationProvider");
+  }
+  return context2;
+};
+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 { isUpdating } = useUpdateBusinessAutomation(automationId);
   const communicationGroupId = automation2?.action_data?.find(
     (action) => action.action_type === "send_communication"
   )?.action_metadata.communication_group_id;
   const { communicationGroup, isGetting: isLoadingCommunicationGroup } = useGetCommunicationGroup(communicationGroupId || void 0);
-  const { updateCommunicationGroup: updateCommunicationGroup2, isUpdating: isUpdatingCommunicationGroup } = useUpdateCommunicationGroup();
+  const { isUpdating: isUpdatingCommunicationGroup } = useUpdateCommunicationGroup();
   const { estimatedMatchesStats } = useRecipientStats(automation2);
-  const [isValidatingStep, setIsValidatingStep] = useState(false);
   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,
@@ -62803,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(
@@ -63135,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);
@@ -64934,6 +65038,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}}}`;
@@ -65229,24 +65414,22 @@ 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 [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);
@@ -65256,7 +65439,7 @@ const EmailPreview = ({
     null
   );
   const { refetchAutomation: refreshAutomation } = useGetBusinessAutomation(
-    automation2.id
+    automation2?.id || ""
   );
   const [showHelpDialog, setShowHelpDialog] = useState(false);
   const initialRenderRef = useRef(true);
@@ -65306,10 +65489,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(() => {
@@ -65332,7 +65515,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 {
@@ -65360,7 +65543,7 @@ const EmailPreview = ({
     debouncedSubject,
     debouncedPreviewText,
     body,
-    communicationGroup.id,
+    communicationGroup?.id,
     updateCommunicationGroup2
   ]);
   useEffect(() => {
@@ -65386,7 +65569,7 @@ const EmailPreview = ({
         const channelSender = allEmailSenders[0];
         setFromEmail(channelSender.id);
         updateCommunicationGroup2({
-          groupId: communicationGroup.id,
+          groupId: communicationGroup?.id || "",
           params: {
             email_channel_sender_id: channelSender.id
           }
@@ -65396,7 +65579,7 @@ const EmailPreview = ({
   }, [
     channelSenders?.results,
     fromEmail,
-    communicationGroup.id,
+    communicationGroup?.id,
     updateCommunicationGroup2
   ]);
   useEffect(() => {
@@ -65478,10 +65661,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..."] }) });
   }
@@ -65519,7 +65702,7 @@ const EmailPreview = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: " w-full", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: " w-full", children: automation2 && /* @__PURE__ */ jsx(
           StripoWrapper,
           {
             showStripoEditor,
@@ -65909,14 +66092,15 @@ const useMe = () => {
   });
   return query;
 };
-const SMSPreview = ({ automation: automation2, iconDefinitions, mergeFieldsResponse }) => {
+const SMSPreview = ({ iconDefinitions, mergeFieldsResponse }) => {
+  const { automation: automation2 } = useAutomation();
   const [isUpdating, setIsUpdating] = useState(false);
   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]);
+  }, [automation2?.action_data]);
   const [mergeFieldValue, setMergeFieldValue] = useState("");
   const [fromNumber, setFromNumber] = useState(null);
   const [initCompanyName, setInitCompanyName] = useState(false);
@@ -66140,16 +66324,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(() => {
@@ -66352,11 +66535,7 @@ const EditCampaignContent = ({
           /* @__PURE__ */ jsx(
             EmailPreview,
             {
-              automation: automation2,
               iconDefinitions,
-              updateAutomation: updateAutomation2,
-              communicationGroup,
-              updateCommunicationGroup: updateCommunicationGroup2,
               mergeFieldsResponse
             }
           )
@@ -66368,7 +66547,6 @@ const EditCampaignContent = ({
       /* @__PURE__ */ jsx(
         SMSPreview,
         {
-          automation: automation2,
           iconDefinitions,
           mergeFieldsResponse
         }
@@ -66877,13 +67055,12 @@ const SelectTime = ({ iconDefinitions, automation: automation2, updateAutomation
   ) });
 };
 const PreviewAndSchedule = ({
-  automation: automation2,
   iconDefinitions,
-  isLoading,
-  communicationGroup,
   updateAutomation: externalUpdateAutomation
 }) => {
-  const { updateAutomation: businessUpdateAutomation } = useUpdateBusinessAutomation(automation2.id);
+  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();
@@ -66948,7 +67125,7 @@ const PreviewAndSchedule = ({
       }
     }
   }, [communicationGroup, channelSenderData, channelAccountsData]);
-  if (isLoading) {
+  if (!automation2) {
     return /* @__PURE__ */ jsx(BasicLoader, { text: ["Loading..."] });
   }
   if (!emailPreview && !smsPreview) {
@@ -66969,8 +67146,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 || []
         }
       )
     ] }),
@@ -67404,15 +67581,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 [
@@ -67508,10 +67682,6 @@ const useAutomationSteps = ({
             /* @__PURE__ */ jsx(
               EditCampaignContent,
               {
-                automation: automation2,
-                updateAutomation: updateAutomation2,
-                communicationGroup,
-                updateCommunicationGroup: updateCommunicationGroup2,
                 iconDefinitions,
                 getExtraMergeFields
               }
@@ -67544,15 +67714,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"
       ),
@@ -67587,6 +67749,29 @@ const useAutomationSteps = ({
     }
   ];
 };
+const useAutomationActions = () => {
+  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,
@@ -67643,30 +67828,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 [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 || ""
+  );
+  const { validateStep } = useAutomationActions();
+  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
     });
@@ -67675,21 +67868,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 {
@@ -67698,7 +67884,6 @@ const EditAutomation = ({
           estimatedSmsRecipients: estimatedMatchesStats.phones
         });
         if (result === true) {
-          setIsLoading(true);
           updateAutomation2({
             status: AutomationStatus.ACTIVE
           });
@@ -67706,7 +67891,6 @@ const EditAutomation = ({
           toast2({
             title: "Automation scheduled!"
           });
-          setIsLoading(false);
         } else {
           toast2({
             title: "Oops!",
@@ -67722,21 +67906,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!",
@@ -67763,11 +67941,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 };
         }
@@ -68027,21 +68201,12 @@ const SendPreviewPopup = ({ automation: automation2, type, setOpenSendPreviewPop
   ] });
 };
 const ViewAutomationHeaderContainer = ({
-  automation: automation2,
-  updateAutomation: updateAutomation2,
-  communicationGroup,
-  updateCommunicationGroup: updateCommunicationGroup2,
-  isLoading,
-  setIsLoading,
   iconDefinitions,
   autoOpenEditPopup,
   logoUrl,
   getExtraMergeFields,
   onDuplicationCreated,
   onBeforeSchedule,
-  invalidateAutomation,
-  estimatedMatchesStats,
-  validateStep,
   showBackButton = false
 }) => {
   const [openEditAutomationPopup, setOpenEditAutomationPopup] = useState(false);
@@ -68051,6 +68216,13 @@ const ViewAutomationHeaderContainer = ({
     setCancelAutomationConfirmationPopup
   ] = useState(false);
   const [openSendPreviewEmailPopup, setOpenSendPreviewEmailPopup] = useState(false);
+  const { automation: automation2 } = useAutomation();
+  const { updateAutomation: updateAutomation2 } = useUpdateBusinessAutomation(
+    automation2?.id || ""
+  );
+  const { invalidateAutomation } = useGetBusinessAutomation(
+    automation2?.id || ""
+  );
   const mergedIconDefinitions = mergeIconDefinitions(iconDefinitions);
   const navigate = useNavigate();
   const { toast: toast2 } = useToast();
@@ -68077,6 +68249,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
     );
@@ -68095,9 +68274,9 @@ const ViewAutomationHeaderContainer = ({
       description: "The automation has been duplicated"
     });
   };
-  const validateStepAdapter = async (args) => {
-    return validateStep(args.currentStep);
-  };
+  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,
     {
@@ -68116,19 +68295,11 @@ const ViewAutomationHeaderContainer = ({
             /* @__PURE__ */ jsx(
               EditAutomation,
               {
-                automation: automation2,
-                updateAutomation: updateAutomation2,
-                communicationGroup,
-                updateCommunicationGroup: updateCommunicationGroup2,
-                isLoading,
-                setIsLoading,
                 iconDefinitions: mergedIconDefinitions,
                 setOpenEditAutomationPopup,
                 logoUrl,
                 getExtraMergeFields,
-                onBeforeSchedule,
-                estimatedMatchesStats,
-                validateCanGoToNextStep: validateStepAdapter
+                onBeforeSchedule
               }
             )
           ]
@@ -68289,57 +68460,34 @@ const ViewAutomationHeaderContainer = ({
   ] });
 };
 const ViewAutomationHeader = React__default.memo(ViewAutomationHeaderContainer);
-const ViewAutomationContent = ({
-  iconDefinitions,
+const ViewAutomationWrapper = ({
   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(
@@ -68353,8 +68501,7 @@ const ViewAutomationContent = ({
               AutomationContent,
               {
                 iconDefinitions: finalIconDefinitions,
-                isLoading,
-                communicationGroup
+                isLoading
               }
             )
           },
@@ -68379,6 +68526,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(
+    ViewAutomationWrapper,
+    {
+      ...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({})