@embedreach/components 0.3.16 → 0.3.17

package/dist/chunks/index.js

@@ -97651,6 +97651,11 @@ const buildFinalSMSBody = (args) => {
   return companyName && smsBody ? `${companyName}:
 ${smsBody}` : smsBody ?? "";
 };
+var ReachMergeFieldTypeEnum = /* @__PURE__ */ ((ReachMergeFieldTypeEnum2) => {
+  ReachMergeFieldTypeEnum2["STATIC"] = "static";
+  ReachMergeFieldTypeEnum2["DYNAMIC"] = "dynamic";
+  return ReachMergeFieldTypeEnum2;
+})(ReachMergeFieldTypeEnum || {});
 const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
 async function convertToPng(base64Data) {
   if (!isBrowser) {
@@ -97702,6 +97707,12 @@ function extractBase64Data(dataUrl) {
   }
   return parts[1];
 }
+const extractMergeFieldNamesUtil = (text2) => {
+  const mergeFieldRegex = /\{\{([^}]+)\}\}/g;
+  const matches2 = text2.match(mergeFieldRegex);
+  if (!matches2) return [];
+  return matches2.map((match2) => match2.slice(2, -2));
+};
 const capitalize = (str) => {
   if (!str) return str;
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -100342,7 +100353,7 @@ const SMSEditor = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground pt-1 border-t", children: "Maximum file size: 5MB. We will try to compress the image if possible." })
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground pt-1 border-t", children: "Maximum size of all images: 5MB. We will try to compress the image if possible." })
               ] }) })
             ]
           }
@@ -100354,7 +100365,7 @@ const SMSEditor = ({
               "Enter the URL of the image you want to add to your SMS message. You can use merge fields to make the URL dynamic (e.g., https://example.com/images/{{customer_name}}.jpg).",
               /* @__PURE__ */ jsx("br", {}),
               /* @__PURE__ */ jsx("br", {}),
-              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Maximum file size: 5MB. We will try to compress the image if possible." })
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Maximum size of all images: 5MB. We will try to compress the image if possible." })
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
@@ -100681,6 +100692,9 @@ const SMSEditorContent = ({
   const hasMergeFieldsInUrl = useCallback((url) => {
     return /\{\{[^}]+\}\}/.test(url);
   }, []);
+  const extractMergeFieldNames = useCallback((content2) => {
+    return extractMergeFieldNamesUtil(content2);
+  }, []);
   const [editingMessage, setEditingMessage] = useState(initialMessage);
   const [imagePreview, setImagePreview] = useState(
     initialImageUrls.length > 0 ? initialImageUrls[0] : null
@@ -100690,6 +100704,7 @@ const SMSEditorContent = ({
   const [isUploadingImage, setIsUploadingImage] = useState(false);
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [hasInitialized, setHasInitialized] = useState(false);
+  const [dynamicMergeFieldImages, setDynamicMergeFieldImages] = useState([]);
   const fileInputRef = useRef(null);
   const autoSaveRef = useRef();
   const isInitialMountRef = useRef(true);
@@ -100697,6 +100712,29 @@ const SMSEditorContent = ({
     message: initialMessage
   });
   const { communicationGroup } = useGetCommunicationGroup(communicationGroupId);
+  const getDynamicMergeFieldImages = useCallback(
+    (content2) => {
+      if (!communicationGroup?.extraMergeFields) return [];
+      const mergeFieldNames = extractMergeFieldNames(content2);
+      const dynamicImages = [];
+      for (const mergeField of communicationGroup.extraMergeFields) {
+        if (mergeField.type === ReachMergeFieldTypeEnum.DYNAMIC) {
+          for (const field of mergeField.mergeFields) {
+            if (mergeFieldNames.includes(field.templateName) && field.image) {
+              dynamicImages.push({
+                templateName: field.templateName,
+                displayName: field.displayName,
+                placeholderUrl: field.image.placeholderUrl,
+                maxSize: field.image.maxSize
+              });
+            }
+          }
+        }
+      }
+      return dynamicImages;
+    },
+    [communicationGroup?.extraMergeFields, extractMergeFieldNames]
+  );
   const finalSMSBody = useMemo(() => {
     return buildFinalSMSBody({
       companyName: stableCompanyName || void 0,
@@ -100704,6 +100742,12 @@ const SMSEditorContent = ({
     });
   }, [stableCompanyName, editingMessage]);
   const debouncedMessage = useDebounce(editingMessage, 1e3);
+  useEffect(() => {
+    if (hasInitialized) {
+      const dynamicImages = getDynamicMergeFieldImages(editingMessage);
+      setDynamicMergeFieldImages(dynamicImages);
+    }
+  }, [editingMessage, getDynamicMergeFieldImages, hasInitialized]);
   const autoSave = useCallback(async () => {
     if (isInitialMountRef.current) {
       return;
@@ -100825,7 +100869,7 @@ const SMSEditorContent = ({
         console.log("File too large", file.size, MAX_FILE_SIZE);
         toast2({
           title: "File too large",
-          description: `Image must be 5MB or smaller. Your file is ${(file.size / (1024 * 1024)).toFixed(1)}MB.`,
+          description: `Sum of all images attached must be 5MB or smaller. The file you tried to upload is ${(file.size / (1024 * 1024)).toFixed(1)}MB.`,
           variant: "destructive"
         });
         return;
@@ -100941,30 +100985,52 @@ const SMSEditorContent = ({
     ) }),
     /* @__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: hasMergeFieldsInUrl(imagePreview) ? /* @__PURE__ */ jsx("div", { className: "max-h-48 max-w-xs rounded-xl shadow-lg border border-gray-200 bg-gray-50 p-4 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Image will be populated at send time based on the following merge fields:" }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: getMergeFieldsFromUrl(
-            imagePreview,
-            getMergeFields2
-          ).map((fieldName, index2) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800 font-medium border border-blue-200",
-              children: fieldName
-            },
-            index2
-          )) })
-        ] }) }) : /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: imagePreview,
-            alt: "SMS attachment preview",
-            className: "max-h-48 max-w-xs rounded-xl shadow-lg border border-gray-200 object-contain bg-white transition-transform duration-200",
-            style: {
-              boxShadow: "0 4px 24px 0 rgba(0,0,0,0.08)"
-            }
-          }
-        ) }) }),
+        (imagePreview || dynamicMergeFieldImages.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4 justify-center mb-6", children: [
+          imagePreview && /* @__PURE__ */ jsx("div", { className: "relative group w-fit", children: hasMergeFieldsInUrl(imagePreview) ? /* @__PURE__ */ jsx("div", { className: "max-h-48 max-w-xs rounded-xl shadow-lg border border-gray-200 bg-gray-50 p-4 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Image will be populated at send time based on the following merge fields:" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: getMergeFieldsFromUrl(
+              imagePreview,
+              getMergeFields2
+            ).map((fieldName, index2) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800 font-medium border border-blue-200",
+                children: fieldName
+              },
+              index2
+            )) })
+          ] }) }) : /* @__PURE__ */ jsxs("div", { className: "max-h-48 max-w-xs rounded-xl shadow-lg border border-green-200 bg-green-50 p-4 flex flex-col items-center justify-center min-h-[12rem]", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: imagePreview,
+                alt: "SMS attachment preview",
+                className: "max-h-32 max-w-48 rounded-lg border border-green-300 object-contain bg-white",
+                style: {
+                  boxShadow: "0 2px 12px 0 rgba(0,0,0,0.06)"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-green-600 mt-2", children: "Uploaded Image" })
+          ] }) }),
+          dynamicMergeFieldImages.map((dynamicImage, index2) => /* @__PURE__ */ jsxs("div", { className: "relative group w-fit", children: [
+            /* @__PURE__ */ jsx("div", { className: "max-h-48 max-w-xs rounded-xl shadow-lg border border-blue-200 bg-blue-50 p-4 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: dynamicImage.placeholderUrl,
+                  alt: `Dynamic merge field ${dynamicImage.displayName} placeholder`,
+                  className: "max-h-32 max-w-48 rounded-lg border border-blue-300 object-contain bg-white",
+                  style: {
+                    boxShadow: "0 2px 12px 0 rgba(0,0,0,0.06)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-blue-600 mt-3", children: dynamicImage.displayName })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-2 text-center", children: "Will be dynamically fetched at send time" })
+          ] }, index2))
+        ] }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -100999,7 +101065,10 @@ const SMSEditorContent = ({
         MemoizedSMSPreview,
         {
           body: finalSMSBody,
-          imageUrls: imagePreview ? [imagePreview] : []
+          imageUrls: [
+            ...dynamicMergeFieldImages.map((img) => img.placeholderUrl),
+            ...imagePreview ? [imagePreview] : []
+          ]
         }
       ) }) }) })
     ] })
@@ -103624,11 +103693,46 @@ const AutomationEditorSMSPreview = ({
   const currentlySelectedSender = smsChannelSenders.find(
     (sender) => sender.channelSender.id === communicationGroup?.smsChannelSenderId
   );
+  const extractMergeFieldNames = useCallback((content2) => {
+    return extractMergeFieldNamesUtil(content2);
+  }, []);
+  const smsBody = communicationGroup?.smsMessageBody || "";
+  const getDynamicMergeFieldImages = useCallback(
+    (content2) => {
+      if (!communicationGroup?.extraMergeFields) return [];
+      const mergeFieldNames = extractMergeFieldNames(content2);
+      const dynamicImages = [];
+      for (const mergeField of communicationGroup.extraMergeFields) {
+        if (mergeField.type === ReachMergeFieldTypeEnum.DYNAMIC) {
+          for (const field of mergeField.mergeFields) {
+            if (mergeFieldNames.includes(field.templateName) && field.image) {
+              dynamicImages.push({
+                templateName: field.templateName,
+                displayName: field.displayName,
+                placeholderUrl: field.image.placeholderUrl,
+                maxSize: field.image.maxSize
+              });
+            }
+          }
+        }
+      }
+      return dynamicImages;
+    },
+    [communicationGroup?.extraMergeFields, extractMergeFieldNames]
+  );
   const imageUrls = useMemo(
     () => communicationGroup?.textMessageMediaUrls ?? [],
     [communicationGroup?.textMessageMediaUrls]
   );
-  const smsBody = communicationGroup?.smsMessageBody || "";
+  const dynamicMergeFieldImages = useMemo(() => {
+    return getDynamicMergeFieldImages(smsBody);
+  }, [getDynamicMergeFieldImages, smsBody]);
+  const allImageUrls = useMemo(() => {
+    return [
+      ...dynamicMergeFieldImages.map((img) => img.placeholderUrl),
+      ...imageUrls
+    ];
+  }, [imageUrls, dynamicMergeFieldImages]);
   const isLoading = !communicationGroup || !channelSenders || !channelAccounts;
   const lastValidCompanyName = useRef(null);
   const lastChangeTime = useRef(0);
@@ -103857,7 +103961,7 @@ const AutomationEditorSMSPreview = ({
                           SMSPreviewExpanded,
                           {
                             smsBody: finalSMSBody,
-                            imageUrls
+                            imageUrls: allImageUrls
                           }
                         )
                       }
@@ -103868,7 +103972,7 @@ const AutomationEditorSMSPreview = ({
                   MemoizedSMSPreview,
                   {
                     body: finalSMSBody,
-                    imageUrls
+                    imageUrls: allImageUrls
                   }
                 )
               ] }),

package/dist/index.d.ts

@@ -87,6 +87,7 @@ declare type DynamicMergeField = ReachMergeFieldBase & {
     mergeFields: {
         displayName: string;
         templateName: string;
+        image?: ImageMergeFieldType;
     }[];
     /**
      * The url of the dynamic merge field (e.g. "https://acme.co/id/")
@@ -120,6 +121,11 @@ declare interface EngageTypedOverrides {
  */
 declare type FeatureKey = 'measure' | 'measure-setup' | 'acquire-setup' | 'reputation' | 'engage-segment-builder' | 'engage-automations-create-modal' | 'engage-automations-view-modal' | 'engage';
 
+declare type ImageMergeFieldType = {
+    placeholderUrl: string;
+    maxSize: number;
+};
+
 declare interface LanguageConfig {
     /** Initial language code (e.g., 'en', 'es', 'fr') */
     default: string;