@embedreach/components 0.3.2 → 0.3.4

package/dist/chunks/index.js

@@ -28865,6 +28865,17 @@ const MessageSquare = createLucideIcon("MessageSquare", [
  * See the LICENSE file in the root directory of this source tree.
  */
 const Minus = createLucideIcon("Minus", [["path", { d: "M5 12h14", key: "1ays0h" }]]);
+/**
+ * @license lucide-react v0.464.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Monitor = createLucideIcon("Monitor", [
+  ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
+  ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
+  ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
+]);
 /**
  * @license lucide-react v0.464.0 - ISC
  *
@@ -29078,6 +29089,16 @@ const ShoppingBag = createLucideIcon("ShoppingBag", [
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M16 10a4 4 0 0 1-8 0", key: "1ltviw" }]
 ]);
+/**
+ * @license lucide-react v0.464.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Smartphone = createLucideIcon("Smartphone", [
+  ["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
+  ["path", { d: "M12 18h.01", key: "mhygvu" }]
+]);
 /**
  * @license lucide-react v0.464.0 - ISC
  *
@@ -52031,6 +52052,11 @@ const IconDefinitions = {
   SmsIcon: Phone,
   ExpandIcon: Maximize2,
   PreviewButton: Play,
+  /**
+   * Device toggle icons
+   */
+  DesktopIcon: Monitor,
+  MobileIcon: Smartphone,
   /**
    * Statistics icons
    */
@@ -89713,6 +89739,72 @@ const RichTextInputWithMergeFields = ({
     ] })
   ] }) });
 };
+const ToggleDesktopMobileButton = () => {
+  const [mode, setMode] = useState("desktop");
+  const desktopRef = useRef(null);
+  const mobileRef = useRef(null);
+  useEffect(() => {
+    const handleDesktopClick = () => setMode("desktop");
+    const handleMobileClick = () => setMode("mobile");
+    const desktopBtn = desktopRef.current;
+    const mobileBtn = mobileRef.current;
+    if (desktopBtn) desktopBtn.addEventListener("click", handleDesktopClick);
+    if (mobileBtn) mobileBtn.addEventListener("click", handleMobileClick);
+    return () => {
+      if (desktopBtn)
+        desktopBtn.removeEventListener("click", handleDesktopClick);
+      if (mobileBtn) mobileBtn.removeEventListener("click", handleMobileClick);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 bg-muted rounded-md p-0.5 shadow-inner border w-fit", children: [
+    /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        ref: desktopRef,
+        type: "button",
+        "aria-pressed": mode === "desktop",
+        "aria-label": "Show desktop preview",
+        className: "desktop-view-button toggle-desktop-button relative flex items-center justify-center px-2 py-0 rounded-md transition-colors duration-200" + (mode === "desktop" ? " bg-background shadow text-primary" : " bg-transparent text-muted-foreground hover:bg-accent"),
+        variant: "ghost",
+        style: { minWidth: 32, minHeight: 32 },
+        children: [
+          mode === "desktop" && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              layoutId: "toggle-indicator",
+              className: "absolute inset-0 rounded-md border-2 bg-background/80 z-0 border-[color:var(--reach-primary)]",
+              transition: { type: "spring", stiffness: 400, damping: 30 }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "relative z-10 flex items-center justify-center", children: /* @__PURE__ */ jsx(IconDefinitions.DesktopIcon, { className: "w-4 h-4" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        ref: mobileRef,
+        type: "button",
+        "aria-pressed": mode === "mobile",
+        "aria-label": "Show mobile preview",
+        className: "mobile-view-button toggle-mobile-button relative flex items-center justify-center px-2 py-0 rounded-md transition-colors duration-200" + (mode === "mobile" ? " bg-background shadow text-primary" : " bg-transparent text-muted-foreground hover:bg-accent"),
+        variant: "ghost",
+        style: { minWidth: 32, minHeight: 32 },
+        children: [
+          mode === "mobile" && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              layoutId: "toggle-indicator",
+              className: "absolute inset-0 rounded-md border-2 bg-background/80 z-0 border-[color:var(--reach-primary)]",
+              transition: { type: "spring", stiffness: 400, damping: 30 }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "relative z-10 flex items-center justify-center", children: /* @__PURE__ */ jsx(IconDefinitions.MobileIcon, { className: "w-4 h-4" }) })
+        ]
+      }
+    )
+  ] });
+};
 function setRef$3(ref, value) {
   if (typeof ref === "function") {
     return ref(value);
@@ -92707,9 +92799,35 @@ const EmailPreviewHtmlRenderer = ({
     }
   ) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(MissingDataForPreview, { type: "email" }) }) });
 };
+const HELP_TOPICS = [
+  {
+    id: "dynamic-content",
+    title: "Dynamic Content",
+    image: "https://cdn.embedreach.com/assets/engage/merge-tags-demo.gif",
+    imageAlt: "Merge Tags Demo",
+    imageDesc: "Demonstration: Adding merge tags to personalize your emails",
+    selectorTitle: "Dynamic Content",
+    selectorSubtitle: "Dynamic content is a way to insert dynamic content into your email like name, email, or other details.",
+    selectorIcon: /* @__PURE__ */ jsx(Merge, {})
+  },
+  {
+    id: "responsive-design",
+    title: "Responsive Design",
+    image: "https://cdn.embedreach.com/assets/engage/layout-mobile-desktop.gif",
+    imageAlt: "Mobile Desktop Switch Demo",
+    imageDesc: "Demonstration: Switching between mobile and desktop preview modes",
+    selectorTitle: "Responsive Design",
+    selectorSubtitle: "Switch between mobile and desktop preview modes to ensure your emails look great on all devices.",
+    selectorIcon: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(Smartphone, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx(Monitor, { className: "w-4 h-4" })
+    ] })
+  }
+];
 const EmailPreviewHelpDialog = () => {
   const { toggleEmailHelpDialog: toggleEmailHelpDialog2, data: business } = useBusiness();
   const { toast: toast2 } = useToast();
+  const [selectedTopic, setSelectedTopic] = useState("dynamic-content");
   const handleDontShowAgain = () => {
     toggleEmailHelpDialog2(false);
     toast2({
@@ -92717,37 +92835,48 @@ const EmailPreviewHelpDialog = () => {
     });
   };
   const shouldShowDontShowAgainButton = business?.uiDefaults?.emailHelpDialogShow !== false;
+  const topic = HELP_TOPICS.find((t3) => t3.id === selectedTopic) ?? HELP_TOPICS[0];
   return /* @__PURE__ */ jsxs("div", { className: "p-6 overflow-y-auto", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-8 text-center", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold mb-2", children: "Email Editor Help Center" }),
       /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "Learn how to use our email editor's powerful features" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-4 max-w-xl mx-auto", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium", children: "Using Dynamic Content" }),
-      /* @__PURE__ */ jsxs("div", { className: "relative rounded-lg overflow-hidden bg-gray-50", children: [
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: "https://cdn.embedreach.com/assets/engage/merge-tags-demo.gif",
-            alt: "Merge Tags Demo",
-            className: "w-full shadow-lg max-w-md mx-auto"
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-4", children: /* @__PURE__ */ jsx("p", { className: "text-white text-sm", children: "Demonstration: Adding merge tags to personalize your emails" }) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "px-2", children: /* @__PURE__ */ jsx(
-        BigSelector,
-        {
-          onClick: () => {
-          },
-          title: "Dynamic Content",
-          subtitle: "Dynamic content is a way to insert dynamic content into your email such as the customer's name, email, or other details.",
-          icon: /* @__PURE__ */ jsx(Merge, {}),
-          selected: true
-        }
-      ) }),
-      shouldShowDontShowAgainButton && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-4", children: /* @__PURE__ */ jsx(Button$1, { size: "sm", onClick: handleDontShowAgain, children: "Don't show me again" }) })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: "mb-8 flex flex-col items-center min-h-[340px]", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 24 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -24 },
+        transition: { duration: 0.3 },
+        className: "w-full flex flex-col items-center",
+        children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium mb-2", children: topic.title }),
+          /* @__PURE__ */ jsxs("div", { className: "relative rounded-lg overflow-hidden bg-gray-50 w-full max-w-2xl", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: topic.image,
+                alt: topic.imageAlt,
+                className: "w-full shadow-lg max-w-md mx-auto"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-4", children: /* @__PURE__ */ jsx("p", { className: "text-white text-sm", children: topic.imageDesc }) })
+          ] })
+        ]
+      },
+      topic.id
+    ) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 sm:flex-row sm:gap-6 max-w-xl mx-auto", children: HELP_TOPICS.map((t3) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+      BigSelector,
+      {
+        onClick: () => setSelectedTopic(t3.id),
+        title: t3.selectorTitle,
+        subtitle: t3.selectorSubtitle,
+        icon: t3.selectorIcon,
+        selected: selectedTopic === t3.id
+      }
+    ) }, t3.id)) }),
+    shouldShowDontShowAgainButton && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-4", children: /* @__PURE__ */ jsx(Button$1, { size: "sm", onClick: handleDontShowAgain, children: "Don't show me again" }) })
   ] });
 };
 const MissingSenderForPreview = ({
@@ -93018,7 +93147,9 @@ const initStripo = (options) => {
             warn: console.warn,
             success: console.log
           },
-          mergeTags: options.mergeFields
+          mergeTags: options.mergeFields,
+          mobileViewButtonSelector: ".toggle-mobile-button",
+          desktopViewButtonSelector: ".toggle-desktop-button"
         });
         resolve(void 0);
       }
@@ -93227,6 +93358,10 @@ const EmailPreview = ({
   });
   useEffect(() => {
     if (!business) return;
+    if (showHelpDialog !== null) return;
+    if (!showStripoEditor) {
+      return;
+    }
     if (!business?.uiDefaults) {
       setShowHelpDialog(true);
       return;
@@ -93234,7 +93369,12 @@ const EmailPreview = ({
     if (business?.uiDefaults?.emailHelpDialogShow && !showHelpDialog) {
       setShowHelpDialog(true);
     }
-  }, [business, business?.uiDefaults?.emailHelpDialogShow, showHelpDialog]);
+  }, [
+    business,
+    business?.uiDefaults?.emailHelpDialogShow,
+    showHelpDialog,
+    showStripoEditor
+  ]);
   const debouncedSubject = useDebounce(subject, 500);
   const debouncedPreviewText = useDebounce(previewText, 500);
   const computedEmailChannelSendersWithChannelAccounts = useMemo(
@@ -93400,6 +93540,7 @@ const EmailPreview = ({
                   /* @__PURE__ */ jsx(IconDefinitions.InfoIcon, { className: "w-4 h-4" })
                 ] }) })
               ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(ToggleDesktopMobileButton, {}) }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(
                   Button$1,
@@ -101889,13 +102030,11 @@ const AutomationEditorEmailPreview = ({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "w-full h-full", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-1 border-b", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: "Email Editor" }),
-                /* @__PURE__ */ jsx(Button$1, { size: "sm", onClick: () => setShowHelpDialog(true), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Help" }),
-                  /* @__PURE__ */ jsx(IconDefinitions.InfoIcon, { className: "w-4 h-4" })
-                ] }) })
-              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Button$1, { size: "sm", onClick: () => setShowHelpDialog(true), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Help" }),
+                /* @__PURE__ */ jsx(IconDefinitions.InfoIcon, { className: "w-4 h-4" })
+              ] }) }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(ToggleDesktopMobileButton, {}) }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(
                   Button$1,