@embedreach/components 0.3.10 → 0.3.11

package/dist/chunks/index.js

@@ -96972,7 +96972,7 @@ function MultiSelectDialog({
         ] })
       ] }) }),
       /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 max-h-[300px]", children: /* @__PURE__ */ jsx(Command, { className: "rounded-none border-none", children: /* @__PURE__ */ jsxs(CommandGroup, { children: [
+      /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 max-h-[300px] rounded-md", children: /* @__PURE__ */ jsx(Command, { className: "rounded-none border-none", children: /* @__PURE__ */ jsxs(CommandGroup, { children: [
         extraCommandItems.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
           extraCommandItems.map((renderItem, index2) => /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children: renderItem(setOpen) }, `extra-command-${index2}`)),
           /* @__PURE__ */ jsx(Separator, { className: "my-2" })
@@ -97295,22 +97295,19 @@ const SMSEditor = ({
             singleSelect: true
           }
         ),
-        /* @__PURE__ */ jsx(InfoTooltip, { title: "Merge Fields" })
+        /* @__PURE__ */ jsx(
+          InfoTooltip,
+          {
+            size: "large",
+            title: "Merge fields are placeholders for dynamic content. For example you can use the recipients name, or email in the contents of your message."
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: `flex items-center gap-2 text-sm transition-colors duration-300 ${characterCountFormatted.colorClass}`,
+          className: `flex items-center gap-2 text-xs transition-colors duration-300 ${characterCountFormatted.colorClass}`,
           children: [
-            /* @__PURE__ */ jsx(
-              SavingIndicator,
-              {
-                isSaving: !!(isUpdating || hasUnsavedChanges),
-                savingText: isUpdating || hasUnsavedChanges ? "Saving..." : "Autosave enabled",
-                size: "xs",
-                textSize: "xs"
-              }
-            ),
             characterCountFormatted.text,
             characterCount > SMS_LIMITS.RECOMMENDED_LIMIT && /* @__PURE__ */ jsx(
               InfoTooltip,
@@ -97331,7 +97328,16 @@ const SMSEditor = ({
           ]
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
+      SavingIndicator,
+      {
+        isSaving: !!(isUpdating || hasUnsavedChanges),
+        savingText: isUpdating || hasUnsavedChanges ? "Saving..." : "Autosave enabled",
+        size: "xs",
+        textSize: "xs"
+      }
+    ) })
   ] });
 };
 const SMSSenderAndCompanyEditor = React__default.memo(
@@ -97566,7 +97572,7 @@ const SMSEditorContent = ({
     if (isInitialMountRef.current) {
       return;
     }
-    const rawSMSBody = debouncedMessage || "";
+    const rawSMSBody = editingMessage || "";
     if (rawSMSBody.length > SMS_ABSOLUTE_LIMIT) {
       toast2({
         title: "SMS is too long",
@@ -97603,7 +97609,7 @@ const SMSEditorContent = ({
       });
     }
   }, [
-    debouncedMessage,
+    editingMessage,
     communicationGroupId,
     updateCommunicationGroup2,
     toast2,
@@ -97729,20 +97735,14 @@ const SMSEditorContent = ({
     return /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center p-8", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading editor..." }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: cn$2("w-full @container", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-700 mb-2", children: "Live Preview" }),
-        /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: "See how your message will appear to customers" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        MemoizedSMSSenderAndCompanyEditor$1,
-        {
-          communicationGroupId,
-          initialSenderId: initialSenderId || null,
-          companyName: initialCompanyNameRef.current || null
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-6", children: /* @__PURE__ */ jsx(
+      MemoizedSMSSenderAndCompanyEditor$1,
+      {
+        communicationGroupId,
+        initialSenderId: initialSenderId || null,
+        companyName: initialCompanyNameRef.current || null
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-6 h-full", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
         imagePreview && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsx("div", { className: "relative group w-fit", children: /* @__PURE__ */ jsx(
@@ -97785,7 +97785,7 @@ const SMSEditorContent = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "hidden @lg:block flex-1 min-w-0", children: /* @__PURE__ */ jsx("div", { className: "sticky top-4", children: /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-xl p-4 border border-gray-200", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "block flex-1 min-w-0", children: /* @__PURE__ */ jsx("div", { className: "sticky top-4", children: /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-xl p-4 border border-gray-200", children: /* @__PURE__ */ jsx(
         SMSPreview,
         {
           body: buildFinalSMSBody({
@@ -97815,7 +97815,7 @@ const EditSMSContent = () => {
   if (isGetMergeFieldsLoading || !getMergeFields2) {
     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 Content..."] }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-2xl w-full border border-gray-200 p-6 space-y-4 relative", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-2xl w-full p-6 space-y-4 relative", children: [
     /* @__PURE__ */ jsx(TitleAndResetButton, { title: "SMS Campaign", type: ChannelType.SMS }),
     hasAnySMSsenders === false ? /* @__PURE__ */ jsx("div", { className: "w-full pt-8 mx-auto", children: /* @__PURE__ */ jsx(SMSSetup, {}) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsx(
       SMSEditorContent,
@@ -99021,7 +99021,8 @@ const useEmailChannelSenders = () => {
   }, [channelSenders?.results, channelAccounts?.results]);
 };
 const EmailDetailsPreview = ({
-  mergeFieldsResponse
+  mergeFieldsResponse,
+  disableEditContent
 }) => {
   const automation2 = useAutomation();
   const communicationGroup = useCommunicationGroup();
@@ -99178,7 +99179,7 @@ const EmailDetailsPreview = ({
       )
     ] }),
     /* @__PURE__ */ jsxs(Popover, { open: popoverOpen, onOpenChange: handlePopoverClose, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: !disableEditContent && /* @__PURE__ */ jsxs(
         Button$1,
         {
           size: "sm",
@@ -99727,6 +99728,7 @@ const AutomationEditorEmailPreview = ({
   const showPreview = !disablePreview && hasEmailContent;
   const showChannelDisabledWarning = !communicationGroup.emailChannelSenderId || emailChannelSenders.length === 0;
   const EditButton = () => {
+    if (disableEditContent) return null;
     const button = /* @__PURE__ */ jsxs(
       Button$1,
       {
@@ -99849,8 +99851,14 @@ const AutomationEditorEmailPreview = ({
       }
     ),
     showChannelDisabledWarning && /* @__PURE__ */ jsx(ChannelDisabledWarning, { channelType: "email" }),
-    hasEmailContent ? /* @__PURE__ */ jsx("div", { className: "relative flex-1 w-full flex flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-y-auto flex flex-col", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 px-4 pb-20", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-full flex-shrink-0 max-w-2xl mx-auto rounded-md", children: /* @__PURE__ */ jsx(EmailDetailsPreview, { mergeFieldsResponse: getMergeFields2 }) }),
+    hasEmailContent ? /* @__PURE__ */ jsx("div", { className: "flex-1 w-full flex flex-col overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-4 px-4 pt-4 pb-20", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 px-4 pb-20", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full flex-shrink-0 max-w-2xl mx-auto rounded-md", children: /* @__PURE__ */ jsx(
+        EmailDetailsPreview,
+        {
+          mergeFieldsResponse: getMergeFields2,
+          disableEditContent
+        }
+      ) }),
       /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-background flex-1 min-h-0 flex flex-col items-center max-w-2xl mx-auto w-full", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 w-full justify-end p-3", children: [
           /* @__PURE__ */ jsx(ResetToDefaultButton, { type: ChannelType.EMAIL }),
@@ -99952,7 +99960,7 @@ const MemoizedSMSSenderAndCompanyEditor = React__default.memo(
     );
   }
 );
-const SMSDetailsPreview = () => {
+const SMSDetailsPreview = ({ disableEditContent }) => {
   const automation2 = useAutomation();
   const communicationGroup = useCommunicationGroup();
   const { channelSenders } = useChannelSender();
@@ -100003,7 +100011,7 @@ const SMSDetailsPreview = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(
+    !disableEditContent && /* @__PURE__ */ jsx(
       MemoizedSMSSenderAndCompanyEditor,
       {
         trigger: /* @__PURE__ */ jsx(MemoizedTriggerButton, {}),
@@ -100099,6 +100107,7 @@ const AutomationEditorSMSPreview = ({
   const showPreview = !disablePreview && hasSendableSmsContent;
   const showChannelDisabledWarning = !communicationGroup?.smsChannelSenderId || smsChannelSenders.length === 0;
   const EditButton = () => {
+    if (disableEditContent) return null;
     const button = /* @__PURE__ */ jsxs(
       Button$1,
       {
@@ -100186,8 +100195,13 @@ const AutomationEditorSMSPreview = ({
           ) })
         ] }) }),
         showChannelDisabledWarning && /* @__PURE__ */ jsx(ChannelDisabledWarning, { channelType: "sms" }),
-        hasAnySMSsenders ? /* @__PURE__ */ jsx("div", { className: "relative flex-1 w-full flex flex-col overflow-hidden h-full", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-y-auto flex flex-col", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 px-4 pt-4 pb-20", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-full flex-shrink-0 max-w-2xl mx-auto rounded-md", children: /* @__PURE__ */ jsx(SMSDetailsPreview, {}) }),
+        hasAnySMSsenders ? /* @__PURE__ */ jsx("div", { className: "flex-1 w-full flex flex-col overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-4 px-4 pt-4 pb-20", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 px-4 pt-4 pb-20", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-full flex-shrink-0 max-w-2xl mx-auto rounded-md", children: /* @__PURE__ */ jsx(
+            SMSDetailsPreview,
+            {
+              disableEditContent
+            }
+          ) }),
           /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-background flex-1 min-h-0 flex flex-col items-center max-w-2xl mx-auto w-full", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 w-full justify-end p-3", children: [
               /* @__PURE__ */ jsx(ResetToDefaultButton, { type: ChannelType.SMS }),
@@ -106548,7 +106562,7 @@ const SelectSenderScreen = () => {
     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 Content..."] }) });
   }
   const hasEmailChannelSenders = emailChannelSendersWithChannelAccounts.length > 0;
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-2xl w-full border border-gray-200 p-6 space-y-4 relative", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-2xl w-full p-6 space-y-4 relative", children: /* @__PURE__ */ jsx(
     SelectEmailOrSMS,
     {
       automationType: automation2?.triggerMetadata?.triggerType,
@@ -107250,7 +107264,7 @@ const OneTimeWizardMain = ({ onFinish, getExtraMergeFields, onBeforeSchedule })
     step.step
   )) });
   const renderContent = () => /* @__PURE__ */ jsx("section", { className: "flex-1 mr-6 w-full relative rounded-xl bg-gray-100 ml-6 @[1000px]:ml-0", children: /* @__PURE__ */ jsx("div", { className: " overflow-y-auto top-0 left-0 right-0 bottom-0 flex-1 h-full flex-col flex", children: /* @__PURE__ */ jsx(BlurDiv, { className: "pt-0 h-full", children: STEPS.find((step) => step.step === currentStep)?.content }, currentStep) }) });
-  const renderFooter = () => /* @__PURE__ */ jsx("footer", { className: "w-full flex justify-end shadow-md z-10 items-center h-16 px-6", children: /* @__PURE__ */ jsx(
+  const renderFooter = () => /* @__PURE__ */ jsx("footer", { className: "w-full flex justify-end z-10 items-center h-16 px-6", children: /* @__PURE__ */ jsx(
     BackNextButtonGroup,
     {
       handleSkipAndSaveAsDraft,
@@ -107269,7 +107283,7 @@ const OneTimeWizardMain = ({ onFinish, getExtraMergeFields, onBeforeSchedule })
   return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col @container h-full min-h-0", children: [
     renderHeader(),
     /* @__PURE__ */ jsxs("main", { className: "flex gap-4 flex-1 min-h-0", children: [
-      /* @__PURE__ */ jsx("div", { className: "hidden @[1000px]:block", children: renderStepNav() }),
+      /* @__PURE__ */ jsx("div", { className: "block", children: renderStepNav() }),
       renderContent()
     ] }),
     renderFooter()