@capillarytech/creatives-library 8.0.125-alpha.3 → 8.0.125-alpha.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.125-alpha.3",
+  "version": "8.0.125-alpha.5",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/MobilePushNew/index.js

@@ -597,15 +597,17 @@ const MobilePushNew = ({
           }));
         }
 
+        let androidButtonsValue = [];
+        if (Array.isArray(androidCtas)) {
+          androidButtonsValue = androidCtas;
+        } else if (Array.isArray(androidCta)) {
+          androidButtonsValue = androidCta;
+        }
         const androidContentData = {
           title: androidTitle,
           message: androidMessage,
           mediaType: androidMediaType,
-          buttons: (() => {
-            if (Array.isArray(androidCtas)) return androidCtas;
-            if (Array.isArray(androidCta)) return androidCta;
-            return [];
-          })(),
+          buttons: androidButtonsValue,
           actionOnClick: false,
           linkType: DEEP_LINK,
           deepLinkValue: "",
@@ -643,17 +645,14 @@ const MobilePushNew = ({
             androidContentData.linkType = DEEP_LINK;
             androidContentData.deepLinkValue = androidMainCta.actionLink;
             androidContentData.externalLinkValue = "";
+          } else if (androidMainCta.actionLink.startsWith('http://') || androidMainCta.actionLink.startsWith('https://')) {
+            androidContentData.linkType = EXTERNAL_LINK;
+            androidContentData.externalLinkValue = androidMainCta.actionLink;
+            androidContentData.deepLinkValue = "";
           } else {
-            // Fallback to URL pattern detection if type is not explicitly set
-            if (androidMainCta.actionLink.startsWith('http://') || androidMainCta.actionLink.startsWith('https://')) {
-              androidContentData.linkType = EXTERNAL_LINK;
-              androidContentData.externalLinkValue = androidMainCta.actionLink;
-              androidContentData.deepLinkValue = "";
-            } else {
-              androidContentData.linkType = DEEP_LINK;
-              androidContentData.deepLinkValue = androidMainCta.actionLink;
-              androidContentData.externalLinkValue = "";
-            }
+            androidContentData.linkType = DEEP_LINK;
+            androidContentData.deepLinkValue = androidMainCta.actionLink;
+            androidContentData.externalLinkValue = "";
           }
         } else {
           // If no CTA data, ensure both link values are empty
@@ -756,11 +755,15 @@ const MobilePushNew = ({
           }));
         }
 
+        let iosButtonsValue = [];
+        if (Array.isArray(ctas)) {
+          iosButtonsValue = ctas;
+        }
         const iosContentData = {
           title: iosTitle,
           message: iosMessage,
           mediaType: iosMediaType,
-          buttons: Array.isArray(ctas) ? ctas : [],
+          buttons: iosButtonsValue,
           actionOnClick: false,
           linkType: DEEP_LINK,
           deepLinkValue: "",
@@ -816,6 +819,260 @@ const MobilePushNew = ({
     }
   }, [editData?.templateDetails, isEditMode, params?.id, resetFormData]);
 
+  // Data population useEffect - for library mode (not full mode) using templateData
+  useEffect(() => {
+    if (isFullMode || !templateData || isEmpty(templateData)) {
+      return;
+    }
+
+    // Always reset form state before populating new template data
+    resetFormData();
+
+    // templateData is expected to have a similar structure as editData.templateDetails
+    const { name = "", versions = {} } = templateData || {};
+    const templateContent = versions?.base || {};
+
+    if (isEmpty(templateContent)) {
+      setSpin(false);
+      return;
+    }
+
+    setTemplateName(name);
+    // Process Android content
+    const androidContentType = templateContent?.ANDROID;
+    if (!isEmpty(androidContentType)) {
+      const {
+        title: androidTitle = "",
+        message: androidMessage = "",
+        ctas: androidCta = [],
+        expandableDetails: androidExpandableDetails = {},
+        image: androidImage = "",
+        cta: androidMainCta = null,
+      } = androidContentType || {};
+      const { style: androidStyle, ctas: androidCtas = [], image: androidExpandableImage = "" } = androidExpandableDetails || {};
+      let androidMediaType = NONE;
+      let androidImageSrc = "";
+      let androidVideoSrc = "";
+      let androidVideoPreview = "";
+      let carouselDataFromTemplate = [];
+      if (androidStyle === BIG_PICTURE) {
+        androidMediaType = IMAGE;
+        androidImageSrc = androidExpandableImage || androidImage;
+      } else if (androidStyle === BIG_TEXT) {
+        androidMediaType = NONE;
+      } else if (androidStyle === MANUAL_CAROUSEL) {
+        androidMediaType = CAROUSEL;
+      }
+      if (androidExpandableDetails?.media && Array.isArray(androidExpandableDetails.media) && androidExpandableDetails.media.length > 0) {
+        const mediaItem = androidExpandableDetails.media[0];
+        if (mediaItem.type === VIDEO) {
+          if (mediaItem.url && mediaItem.url.toLowerCase().includes('.gif')) {
+            androidMediaType = GIF;
+          } else {
+            androidMediaType = VIDEO;
+          }
+          androidVideoSrc = mediaItem.url;
+          androidVideoPreview = mediaItem.url;
+        } else if (mediaItem.type === GIF) {
+          androidMediaType = GIF;
+          androidVideoSrc = mediaItem.url;
+          androidVideoPreview = mediaItem.url;
+        }
+      } else if (androidImage && (androidImage.includes('.mp4') || androidImage.includes('.mov'))) {
+        androidMediaType = VIDEO;
+        androidVideoSrc = androidImage;
+        androidVideoPreview = androidImage;
+      } else if (androidImage && androidImage.toLowerCase().includes('.gif')) {
+        androidMediaType = GIF;
+        androidVideoSrc = androidImage;
+        androidVideoPreview = androidImage;
+      } else if ((androidExpandableDetails?.style === MANUAL_CAROUSEL || androidContentType?.type === CAROUSEL) && androidExpandableDetails?.carouselData) {
+        androidMediaType = CAROUSEL;
+        carouselDataFromTemplate = androidExpandableDetails.carouselData.map((card) => ({
+          mediaType: card.mediaType || IMAGE.toLowerCase(),
+          imageUrl: card.imageUrl || '',
+          videoSrc: card.videoSrc || '',
+          buttons: card.buttons || [],
+        }));
+      }
+      let androidButtonsValue = [];
+      if (Array.isArray(androidCtas)) {
+        androidButtonsValue = androidCtas;
+      } else if (Array.isArray(androidCta)) {
+        androidButtonsValue = androidCta;
+      }
+      const androidContentData = {
+        title: androidTitle,
+        message: androidMessage,
+        mediaType: androidMediaType,
+        buttons: androidButtonsValue,
+        actionOnClick: false,
+        linkType: DEEP_LINK,
+        deepLinkValue: "",
+        externalLinkValue: "",
+        imageSrc: androidImageSrc,
+        videoSrc: androidVideoSrc,
+        videoPreview: androidVideoPreview,
+        carouselData: carouselDataFromTemplate,
+      };
+      setAndroidContent(androidContentData);
+      if (androidImageSrc) {
+        setUpdateMpushImageSrc(androidImageSrc, 0, IMAGE);
+      }
+      if (androidVideoSrc) {
+        setUpdateMpushVideoSrc(0, {
+          videoSrc: androidVideoSrc,
+          previewUrl: androidVideoPreview,
+        }, true);
+      }
+      if (androidMainCta?.actionLink) {
+        androidContentData.actionOnClick = true;
+        if (androidMainCta.type === EXTERNAL_URL) {
+          androidContentData.linkType = EXTERNAL_LINK;
+          androidContentData.externalLinkValue = androidMainCta.actionLink;
+          androidContentData.deepLinkValue = "";
+        } else if (androidMainCta.type === DEEP_LINK) {
+          androidContentData.linkType = DEEP_LINK;
+          androidContentData.deepLinkValue = androidMainCta.actionLink;
+          androidContentData.externalLinkValue = "";
+        } else if (androidMainCta.actionLink.startsWith('http://') || androidMainCta.actionLink.startsWith('https://')) {
+          androidContentData.linkType = EXTERNAL_LINK;
+          androidContentData.externalLinkValue = androidMainCta.actionLink;
+          androidContentData.deepLinkValue = "";
+        } else {
+          androidContentData.linkType = DEEP_LINK;
+          androidContentData.deepLinkValue = androidMainCta.actionLink;
+          androidContentData.externalLinkValue = "";
+        }
+      } else {
+        androidContentData.deepLinkValue = "";
+        androidContentData.externalLinkValue = "";
+      }
+      const androidButtons = androidExpandableDetails?.ctas || [];
+      if (androidButtons.length > 0) {
+        const ctaDataFromAndroid = androidButtons.map((button, index) => ({
+          text: button.actionText || button.label || "",
+          index,
+          url: button.actionLink || "",
+          urlType: button.type || DEEP_LINK,
+          ctaType: index === 0 ? PRIMARY : SECONDARY,
+          isSaved: true,
+        }));
+        setCtaDataAndroid(ctaDataFromAndroid);
+        setPrimaryButtonAndroid(androidButtons.length >= 1);
+        setSecondaryButtonAndroid(androidButtons.length >= 2);
+      } else {
+        setCtaDataAndroid([]);
+        setPrimaryButtonAndroid(false);
+        setSecondaryButtonAndroid(false);
+      }
+    }
+    // Process iOS content
+    const iosContentType = templateContent?.IOS;
+    if (!isEmpty(iosContentType)) {
+      const {
+        title: iosTitle = "",
+        message: iosMessage = "",
+        ctas = [],
+        expandableDetails: iosExpandableDetails = {},
+        image: iosImage = "",
+      } = iosContentType || {};
+      const { style: iosStyle, image: iosExpandableImage = "" } = iosExpandableDetails || {};
+      let iosMediaType = NONE;
+      let iosImageSrc = "";
+      let iosVideoSrc = "";
+      let iosVideoPreview = "";
+      let carouselDataFromTemplate = [];
+      if (iosStyle === BIG_PICTURE) {
+        iosMediaType = IMAGE;
+        iosImageSrc = iosExpandableImage || iosImage;
+      } else if (iosStyle === BIG_TEXT) {
+        iosMediaType = NONE;
+      } else if (iosStyle === MANUAL_CAROUSEL) {
+        iosMediaType = CAROUSEL;
+      }
+      if (iosExpandableDetails?.media && Array.isArray(iosExpandableDetails.media) && iosExpandableDetails.media.length > 0) {
+        const mediaItem = iosExpandableDetails.media[0];
+        if (mediaItem.type === VIDEO) {
+          if (mediaItem.url && mediaItem.url.toLowerCase().includes('.gif')) {
+            iosMediaType = GIF;
+          } else {
+            iosMediaType = VIDEO;
+          }
+          iosVideoSrc = mediaItem.url;
+          iosVideoPreview = mediaItem.url;
+        } else if (mediaItem.type === GIF) {
+          iosMediaType = GIF;
+          iosVideoSrc = mediaItem.url;
+          iosVideoPreview = mediaItem.url;
+        }
+      } else if (iosImage && (iosImage.includes('.mp4') || iosImage.includes('.mov'))) {
+        iosMediaType = VIDEO;
+        iosVideoSrc = iosImage;
+        iosVideoPreview = iosImage;
+      } else if (iosImage && iosImage.toLowerCase().includes('.gif')) {
+        iosMediaType = GIF;
+        iosVideoSrc = iosImage;
+        iosVideoPreview = iosImage;
+      } else if ((iosExpandableDetails?.style === MANUAL_CAROUSEL || iosContentType?.type === CAROUSEL) && iosExpandableDetails?.carouselData) {
+        iosMediaType = CAROUSEL;
+        carouselDataFromTemplate = iosExpandableDetails.carouselData.map((card) => ({
+          mediaType: card.mediaType || IMAGE.toLowerCase(),
+          imageUrl: card.imageUrl || '',
+          videoSrc: card.videoSrc || '',
+          buttons: card.buttons || [],
+        }));
+      }
+      let iosButtonsValue = [];
+      if (Array.isArray(ctas)) {
+        iosButtonsValue = ctas;
+      }
+      const iosContentData = {
+        title: iosTitle,
+        message: iosMessage,
+        mediaType: iosMediaType,
+        buttons: iosButtonsValue,
+        actionOnClick: false,
+        linkType: DEEP_LINK,
+        deepLinkValue: "",
+        externalLinkValue: "",
+        imageSrc: iosImageSrc,
+        videoSrc: iosVideoSrc,
+        videoPreview: iosVideoPreview,
+        carouselData: carouselDataFromTemplate,
+      };
+      setIosContent(iosContentData);
+      if (iosImageSrc) {
+        setUpdateMpushImageSrc(iosImageSrc, 1, IMAGE);
+      }
+      if (iosVideoSrc) {
+        setUpdateMpushVideoSrc(1, {
+          videoSrc: iosVideoSrc,
+          previewUrl: iosVideoPreview,
+        }, true);
+      }
+      const iosButtons = iosExpandableDetails?.ctas || [];
+      if (iosButtons.length > 0) {
+        const ctaDataFromIos = iosButtons.map((button, index) => ({
+          text: button.actionText || button.label || "",
+          index,
+          url: button.actionLink || "",
+          urlType: button.type || DEEP_LINK,
+          ctaType: index === 0 ? PRIMARY : SECONDARY,
+          isSaved: true,
+        }));
+        setCtaDataIos(ctaDataFromIos);
+        setPrimaryButtonIos(iosButtons.length >= 1);
+        setSecondaryButtonIos(iosButtons.length >= 2);
+      } else {
+        setCtaDataIos([]);
+        setPrimaryButtonIos(false);
+        setSecondaryButtonIos(false);
+      }
+    }
+    setSpin(false);
+  }, [isFullMode, templateData, resetFormData]);
+
   // Determine platform support from accountData
   const isAndroidSupported = accountData?.configs?.android === '1';
   const isIosSupported = accountData?.configs?.ios === '1';
@@ -1107,6 +1364,7 @@ const MobilePushNew = ({
         carouselLinkErrors,
         updateCarouselLinkError,
         linkProps: { deepLink },
+        videoPreviewKey: videoState?.videoPreviewKey,
       };
 
       const ctaButtonProps = {
@@ -1332,6 +1590,25 @@ const MobilePushNew = ({
           imageAdded: definitionMode === IMAGE.toLowerCase(),
         });
 
+        // --- BEGIN: Library mode communication fix ---
+        if (!isFullMode) {
+          // Send the created/edited template data to the consumer app
+          const templateDataToSend = {
+            ...response,
+            payload,
+          };
+          console.log('[MobilePushNew] Library mode: sending template data to consumer app:', templateDataToSend);
+          if (window && window.parent) {
+            console.log('[MobilePushNew] Calling window.parent.postMessage with MOBILEPUSH_TEMPLATE_SAVED');
+            window.parent.postMessage({ type: 'MOBILEPUSH_TEMPLATE_SAVED', data: templateDataToSend }, '*');
+          }
+          if (typeof getFormLibraryData === 'function') {
+            console.log('[MobilePushNew] Calling getFormLibraryData with template data');
+            getFormLibraryData(templateDataToSend);
+          }
+        }
+        // --- END: Library mode communication fix ---
+
         // Show success toast and refresh list after create (not edit)
         if (!isEditMode && response && (response.templateId || response._id)) {
           const message = `${intl.formatMessage(messages.templateCreateSuccess)}`;
@@ -1370,7 +1647,7 @@ const MobilePushNew = ({
           resetFormData();
         }
 
-        if (getFormLibraryData) {
+        if (getFormLibraryData && isFullMode) {
           getFormLibraryData({ validity: true });
         }
       };