@capillarytech/creatives-library 8.0.132 → 8.0.133-alpha.1

package/package.json

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

package/utils/createMobilePushPayload.js

@@ -8,6 +8,7 @@ import {
   FILMSTRIP_CAROUSEL,
   ANDROID,
   IOS,
+  TEXT,
 } from "../v2Containers/MobilePushNew/constants";
 import messages from '../v2Containers/MobilePushNew/messages';
 
@@ -137,6 +138,7 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
     linkType,
     deepLinkValue,
     externalLinkValue,
+    deepLinkKeysValue = [],
   } = content || {};
 
   const platformContent = {
@@ -148,28 +150,48 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
 
   // Handle CTA
   if (actionOnClick) {
+    let finalDeepLinkValue = deepLinkValue;
+
+    if (linkType === DEEP_LINK && deepLinkKeysValue && deepLinkKeysValue.length > 0) {
+      // Check if the URL already contains the keys
+      const urlHasKeys = deepLinkKeysValue.some((key) => deepLinkValue && deepLinkValue.includes(`${key}=${key}`));
+
+      // Only append keys if they're not already in the URL
+      if (!urlHasKeys) {
+        finalDeepLinkValue = appendDeepLinkKeysToUrl(deepLinkValue, deepLinkKeysValue);
+      }
+    }
+
     platformContent.cta = {
       type: linkType === DEEP_LINK ? DEEP_LINK : EXTERNAL_URL,
-      actionLink: linkType === DEEP_LINK ? deepLinkValue : externalLinkValue,
+      actionLink: linkType === DEEP_LINK ? finalDeepLinkValue : externalLinkValue,
     };
   }
 
   // Handle media types
   const style = content?.mediaType || expandableDetails?.style;
 
+  // Determine the type field based on media type
+  let templateType = TEXT; // Default type for NONE or BIG_TEXT
+
   // Handle BIG_PICTURE media type
   if (style === BIG_PICTURE || style === IMAGE) {
     platformContent.expandableDetails.style = BIG_PICTURE;
+    platformContent.expandableDetails.message = message;
     platformContent.expandableDetails.image = imageSrc;
+    templateType = IMAGE;
   } else if (style === VIDEO) { // Handle VIDEO media type
     platformContent.expandableDetails.style = VIDEO;
+    platformContent.expandableDetails.message = message;
     platformContent.expandableDetails.media = [{
       url: mpushVideoSrcAndPreview.mpushVideoSrc || (content?.mediaList?.[0]?.url || ''),
       text: content?.mediaList?.[0]?.text || '',
       type: VIDEO,
     }];
+    templateType = VIDEO;
   } else if (style === GIF) { // Handle GIF media type
     platformContent.expandableDetails.style = GIF;
+    platformContent.expandableDetails.message = message;
     if (content?.mediaList?.[0]) {
       // If mediaList exists, use it and preserve the original type
       const { url = '', text = '', type = GIF } = content.mediaList[0];
@@ -179,15 +201,20 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
         type: type.toLowerCase(),
       }];
     } else {
-      // If no mediaList but mpushVideoSrc exists, convert to VIDEO
+      // If no mediaList but mpushVideoSrc exists
+      platformContent.expandableDetails.style = GIF;
+      platformContent.expandableDetails.message = message;
       platformContent.expandableDetails.media = [{
         url: mpushVideoSrcAndPreview.mpushVideoSrc,
         text: '',
         type: GIF, // Backend expects GIF type for GIFs
       }];
     }
+    templateType = GIF;
   } else if ([CAROUSEL, MANUAL_CAROUSEL, AUTO_CAROUSEL, FILMSTRIP_CAROUSEL].includes(style)) { // Handle CAROUSEL media types
     platformContent.expandableDetails.style = MANUAL_CAROUSEL;
+    platformContent.expandableDetails.message = message;
+    templateType = CAROUSEL;
 
     // Handle carouselData
     if (content?.carouselData?.length > 0) {
@@ -221,8 +248,8 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
     }
 
     // Handle mediaList
-    if (content?.mediaList && Array.isArray(content.mediaList) && content.mediaList.length > 0) {
-      platformContent.expandableDetails.media = content.mediaList.map((media) => {
+    if (content?.mediaList && Array.isArray(content?.mediaList) && content?.mediaList?.length > 0) {
+      platformContent.expandableDetails.media = content?.mediaList?.map((media) => {
         const {
           url,
           text,
@@ -239,18 +266,14 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
   } else { // Handle BIG_TEXT media type (default)
     platformContent.expandableDetails.style = BIG_TEXT;
     platformContent.expandableDetails.message = message;
+    templateType = TEXT;
   }
 
+  // Set the type and deviceType fields
+  platformContent.type = templateType;
+  platformContent.deviceType = platform;
+
   // Handle GIF media type
-  if (content?.mediaType === GIF) {
-    platformContent.expandableDetails = {
-      media: [{
-        url: mpushVideoSrcAndPreview?.mpushVideoSrc || (content?.mediaList?.[0]?.url || ''),
-        text: content?.mediaList?.[0]?.text || '',
-        type: GIF,
-      }],
-    };
-  }
 
   // iOS-specific handling
   if (platform === IOS) {
@@ -273,31 +296,11 @@ function buildCustomFields(content) {
   if (Array.isArray(custom)) {
     customFields = [...custom];
   } else if (custom && typeof custom === 'object') {
-    // If it's an object, map to array
-    customFields = Object.entries(custom).map(([key, value]) => ({ key, value }));
+    // If it's an object, map to array, excluding deepLinkKeys
+    customFields = Object.entries(custom)
+      .filter(([key]) => key !== 'deepLinkKeysValue' && key !== 'deepLinkValue' && key !== 'linkType')
+      .map(([key, value]) => ({ key, value }));
   }
-  const { deepLinkKeysValue, deepLinkValue, linkType } = custom || {};
-  // Add deepLinkKeys to custom fields if it exists
-  if (deepLinkKeysValue && linkType === DEEP_LINK) {
-    if (Array.isArray(deepLinkKeysValue)) {
-      // Handle array of deep link keys
-      deepLinkKeysValue.forEach((key) => {
-        if (key) {
-          customFields.push({
-            key,
-            value: deepLinkValue,
-          });
-        }
-      });
-    } else {
-      // Handle single deep link key
-      customFields.push({
-        key: deepLinkKeysValue,
-        value: deepLinkValue,
-      });
-    }
-  }
-
   return customFields;
 }
 
@@ -307,14 +310,14 @@ function buildCustomFields(content) {
  * @param {Array} keys - Deep link keys
  * @returns {string} URL with appended keys
  */
-function appendDeepLinkKeysToUrl(url, keys) {
+export function appendDeepLinkKeysToUrl(url, keys) {
   if (!url || !keys || !Array.isArray(keys) || keys?.length === 0) return url;
 
   const separator = url.includes('?') ? '&' : '?';
   const validKeys = keys.filter((key) => typeof key === 'string' && key?.length > 0);
   if (validKeys?.length === 0) return url;
 
-  const keyParams = validKeys.map((key) => `${key}={{${key}}}`).join('&');
+  const keyParams = validKeys.map((key) => `${key}=${key}`).join('&');
 
   return `${url}${separator}${keyParams}`;
 }

package/utils/tests/createMobilePushPayload.test.js

@@ -893,7 +893,7 @@ describe('createMobilePushPayload', () => {
       });
 
       expect(result.versions.base.ANDROID.expandableDetails.carouselData[0].buttons[0].deepLinkValue)
-        .toBe('app://test?key1={{key1}}&key2={{key2}}');
+        .toBe('app://test?key1=key1&key2=key2');
     });
 
     it('should handle single deep link key in carousel buttons', () => {
@@ -922,7 +922,7 @@ describe('createMobilePushPayload', () => {
       });
 
       expect(result.versions.base.ANDROID.expandableDetails.carouselData[0].buttons[0].deepLinkValue)
-        .toBe('app://test?singleKey={{singleKey}}');
+        .toBe('app://test?singleKey=singleKey');
     });
 
     it('should handle URL with existing query parameters', () => {
@@ -951,7 +951,7 @@ describe('createMobilePushPayload', () => {
       });
 
       expect(result.versions.base.ANDROID.expandableDetails.carouselData[0].buttons[0].deepLinkValue)
-        .toBe('app://test?param=value&key1={{key1}}&key2={{key2}}');
+        .toBe('app://test?param=value&key1=key1&key2=key2');
     });
 
     it('should not modify URL when deepLinkKeys is missing', () => {

package/utils/transformerUtils.js

@@ -126,7 +126,7 @@ const transformMpushPayload = (mpushData, options = {}) => {
     type: androidContent?.type || TEXT,
     deviceType: IOS,
     title: mpushData?.messageSubject || "",
-    message: ""
+    message: "",
   };
 
   // Get base payload structure
@@ -137,41 +137,40 @@ const transformMpushPayload = (mpushData, options = {}) => {
     channel: PUSH,
     messageSubject: mpushData?.messageSubject || "",
     androidContent: {
-      type: TEXT,
+      type: androidContent?.type || TEXT, // Use the type from content if available, fallback to TEXT
       deviceType: ANDROID,
       ...androidContent,
       cta: {
         type: EXTERNAL_URL,
         actionText: null,
         templateCtaId: null,
-        ...(androidContent?.cta || {})
+        ...(androidContent?.cta || {}),
       },
       expandableDetails: {
         style: BIG_TEXT,
-        ...androidContent?.expandableDetails
+        ...androidContent?.expandableDetails,
       },
-      customProperties: androidContent?.custom || {}
+      customProperties: androidContent?.custom || {},
     },
     iosContent: {
-      type: TEXT,
+      type: iosContent?.type || TEXT, // Use the type from content if available, fallback to TEXT
       deviceType: IOS,
       ...iosContent,
       cta: {
         type: EXTERNAL_URL,
         actionText: null,
         templateCtaId: null,
-        ...(iosContent?.cta || {})
+        ...(iosContent?.cta || {}),
       },
       expandableDetails: {
         style: BIG_TEXT,
-        ...iosContent?.expandableDetails
+        ...iosContent?.expandableDetails,
       },
-      customProperties: iosContent?.custom || {}
+      customProperties: iosContent?.custom || {},
     },
-    accountId: mpushData?.accountId || 0
+    accountId: mpushData?.accountId || 0,
   };
-  payload.centralCommsPayload.mpushDeliverySettings =
-    mobilePushDeliverySettings || {};
+  payload.centralCommsPayload.mpushDeliverySettings = mobilePushDeliverySettings || {};
 
   return payload;
 };

package/v2Components/CapMpushCTA/index.js

@@ -242,17 +242,6 @@ export const CapMpushCTA = (props) => {
                             {urlType === DEEP_LINK ? selectedDeepLink?.label : ''}
                         </CapColumn>
                         <CapColumn>
-                            {urlType === DEEP_LINK && deepLinkKeysFromSelectionArray?.length > 0 && (ctaData[index]?.deepLinkKeys || selectedDeepLink?.keys) ? (
-                                <CapLabel type="label2" className="inapp-saved-cta-deep-link-keys">
-                                    {(() => {
-                                        const keys = selectedDeepLink?.keys || ctaData[index]?.deepLinkKeys;
-                                        if (Array.isArray(keys)) {
-                                            return keys.join(', ');
-                                        }
-                                        return keys;
-                                    })()}
-                                </CapLabel>
-                            ) : ''}
                         </CapColumn>
                         {(
                             <CapRow className="cta-action-grp">

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -716,6 +716,7 @@ export function SlideBoxContent(props) {
             creativesMode={creativesMode}
             eventContextTags={eventContextTags}
             showLiquidErrorInFooter={showLiquidErrorInFooter}
+            handleClose={handleClose}
           />
         )
       )}

package/v2Containers/CreativesContainer/index.js

@@ -802,7 +802,7 @@ export class Creatives extends React.Component {
               androidContent.expandableDetails = this.getMobilePushCarouselData({...androidContent?.expandableDetails});
             }
             templateData.androidContent = androidContent;
-            templateData.androidContent.type = get(channelTemplate, 'definition.mode', '').toUpperCase();
+            templateData.androidContent.type = androidContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || constants.TEXT;
             templateData.androidContent.deviceType = constants.ANDROID;
           }
           const iosContent = channel === constants.INAPP ? get(channelTemplate, 'versions.base.content.IOS') : get(channelTemplate, 'versions.base.IOS');
@@ -824,7 +824,7 @@ export class Creatives extends React.Component {
               iosContent.expandableDetails = this.getMobilePushCarouselData({...iosContent?.expandableDetails});
             }
             templateData.iosContent = iosContent;
-            templateData.iosContent.type = get(channelTemplate, 'definition.mode').toUpperCase();
+            templateData.iosContent.type = iosContent?.type || get(channelTemplate, 'definition.mode', '')?.toUpperCase() || 'TEXT';
             templateData.iosContent.deviceType = constants.IOS;
           }
           templateData.messageSubject = channelTemplate?.name ? channelTemplate?.name : "messageSubject";

package/v2Containers/MobilePushNew/components/MediaUploaders.js

@@ -549,7 +549,7 @@ const MediaUploaders = ({
                 <FormattedMessage {...messages.actionDescription} />
               </CapLabel>
             </CapRow>
-            {button.actionOnClick && (
+            {button?.actionOnClick && (
               <CapRow style={{ display: "flex", justifyContent: "space-around" }}>
                 <CapColumn span={6}>
                   <CapHeading type="h4" className="buttons-heading">
@@ -563,7 +563,7 @@ const MediaUploaders = ({
                     selectPlaceholder={formatMessage(messages.selectDeepLink)}
                   />
                 </CapColumn>
-                {button.linkType === DEEP_LINK && (
+                {button?.linkType === DEEP_LINK && (
                   <CapColumn span={14}>
                     <CapHeading type="h4" className="buttons-heading">
                       {formatMessage(messages.deepLink)}
@@ -583,7 +583,7 @@ const MediaUploaders = ({
                     )}
                   </CapColumn>
                 )}
-                {button.linkType === EXTERNAL_LINK && (
+                {button?.linkType === EXTERNAL_LINK && (
                   <CapColumn span={14}>
                     <CapHeading type="h4" className="buttons-heading">
                       {formatMessage(messages.externalLink)}
@@ -592,7 +592,7 @@ const MediaUploaders = ({
                       id={`mobile-push-external-link-input-${activeTab}-${cardIndex}`}
                       onChange={(e) => handleCarouselExternalLinkChange(cardIndex, e.target.value)}
                       placeholder={formatMessage(messages.enterExternalLink)}
-                      value={button.externalLinkValue}
+                      value={button?.externalLinkValue}
                       size="default"
                       isRequired
                     />
@@ -605,8 +605,8 @@ const MediaUploaders = ({
                 )}
               </CapRow>
             )}
-            {button.linkType === DEEP_LINK && button.deepLinkValue && (() => {
-              const selectedDeepLink = deepLink?.find((link) => link?.value === button.deepLinkValue);
+            {button?.linkType === DEEP_LINK && button?.deepLinkValue && button?.actionOnClick && (() => {
+              const selectedDeepLink = deepLink?.find((link) => link?.value === button?.deepLinkValue);
               const deepLinkKeysFromSelection = selectedDeepLink?.keys;
               let deepLinkKeysFromSelectionArray = [];
               if (Array.isArray(deepLinkKeysFromSelection)) {
@@ -617,7 +617,7 @@ const MediaUploaders = ({
               return deepLinkKeysFromSelectionArray?.length > 0;
             })() && (
               <CapRow style={{ marginTop: "10px", left: "6%", width: '115%'}}>
-                <CapColumn span={7}>
+                <CapColumn span={14}>
                   <CapHeading type="h4" className="deep-link-keys-heading">
                     {formatMessage(messages.deepLinkKeys)}
                   </CapHeading>

package/v2Containers/MobilePushNew/components/PlatformContentFields.js

@@ -58,8 +58,6 @@ const PlatformContentFields = ({
     externalLinkValue,
   } = linkProps;
 
-  // Debug logging removed - issue identified and fixed
-
   // Get the selected deep link object to extract keys
   const selectedDeepLink = deepLink?.find((link) => link?.value === deepLinkValue);
   const deepLinkKeysFromSelection = selectedDeepLink?.keys;
@@ -289,7 +287,7 @@ const PlatformContentFields = ({
               )}
               {content?.actionOnClick && content?.linkType === DEEP_LINK && deepLinkValue && deepLinkKeysFromSelectionArray?.length > 0 && (
                 <CapRow style={{ marginTop: "10px", left: "6%", width: '115%'}}>
-                  <CapColumn span={7}>
+                  <CapColumn span={14}>
                     <CapHeading type="h4" className="deep-link-keys-heading">
                       {formatMessage(messages.deepLinkKeys)}
                     </CapHeading>

package/v2Containers/MobilePushNew/index.js

@@ -488,8 +488,6 @@ const MobilePushNew = ({
     const accountObj = accountData || {};
     const deepLinkObj = accountObj?.configs?.deeplink || "";
 
-    // Debug logging removed - issue identified and fixed
-
     if (!isEmpty(accountObj)) {
       const { configs = {} } = accountObj;
       const isAndroidSupported = configs?.android === DEVICE_SUPPORTED;
@@ -498,9 +496,9 @@ const MobilePushNew = ({
         // Parse deep link data - handle both object and array formats
         const parsedDeepLinks = JSON.parse(deepLinkObj || "[]");
         // Debug logging removed - issue identified and fixed
-        
+
         let keys = [];
-        
+
         if (Array.isArray(parsedDeepLinks)) {
           // Handle array format
           keys = parsedDeepLinks.map((link) => ({
@@ -518,9 +516,6 @@ const MobilePushNew = ({
             keys: link?.keys,
           }));
         }
-
-        // Debug logging removed - issue identified and fixed
-
         setActiveTab(isAndroidSupported ? ANDROID : IOS);
         setDeepLink(keys);
       } catch (error) {
@@ -528,7 +523,6 @@ const MobilePushNew = ({
         setDeepLink([]);
       }
     } else {
-      // Debug logging removed - issue identified and fixed
       setDeepLink([]);
     }
   }, [accountData?.configs?.deeplink, accountData?.configs?.android, accountData]);
@@ -539,15 +533,18 @@ const MobilePushNew = ({
     if (params?.id) {
       setSpin(true);
       mobilePushActions.getTemplateDetails(params.id);
+    } else if (!isFullMode && templateData && !isEmpty(templateData)) {
+      // Library mode: set template data directly without API call
+      setSpin(true);
+      mobilePushActions.setTemplateDetails(templateData);
     }
-  }, [params?.id, resetFormData, mobilePushActions]);
+  }, [params?.id, templateData, isFullMode, resetFormData, mobilePushActions]);
 
   // Data population useEffect - ONLY for edit mode
   useEffect(() => {
     if (!isEditMode) {
       return;
     }
-
     const { name = "", versions = {} } = editData?.templateDetails || {};
     const editContent = versions?.base || {};
 
@@ -585,7 +582,7 @@ const MobilePushNew = ({
         } = androidExpandableDetails || {};
 
         // Determine media type based on all available information
-        let androidMediaType = "NONE";
+        let androidMediaType = NONE;
         let androidImageSrc = "";
         let androidVideoSrc = "";
         let androidVideoPreview = "";
@@ -629,13 +626,14 @@ const MobilePushNew = ({
         const androidButtons = androidCtas || [];
         if (androidButtons.length > 0) {
           const ctaDataFromAndroid = androidButtons.map((button, index) => {
-            let deepLinkKeys = [];
-            if (button?.type === DEEP_LINK && button?.actionLink) {
+            // Use deep link keys from the button if available, otherwise try to extract from URL
+            let deepLinkKeys = button?.deepLinkKeys || [];
+            if (!deepLinkKeys.length && button?.type === DEEP_LINK && button?.actionLink) {
               try {
                 const url = new URL(button?.actionLink);
                 const extractedKeys = [];
                 url.searchParams.forEach((value, key) => {
-                  if (value === key) {
+                  if (value === key) { // Only extract keys where value equals key
                     extractedKeys.push(key);
                   }
                 });
@@ -649,7 +647,15 @@ const MobilePushNew = ({
 
             return {
               text: button?.actionText || "",
-              url: button?.actionLink || "",
+              url: (() => {
+                const deepLinkValue = button?.actionLink || "";
+                if (deepLink?.length > 0 && deepLinkValue && button?.type === DEEP_LINK) {
+                  const baseDeepLinkValue = deepLinkValue.split('?')[0];
+                  const match = deepLink.find((link) => link.value === baseDeepLinkValue);
+                  if (match) return match.value;
+                }
+                return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+              })(),
               urlType: button?.type || DEEP_LINK,
               deepLinkKeys,
               ctaType: index === 0 ? PRIMARY : SECONDARY,
@@ -688,7 +694,7 @@ const MobilePushNew = ({
             const deepLinkValue = androidMainCta?.type === DEEP_LINK ? androidMainCta?.actionLink : (androidContentType?.cta?.type === DEEP_LINK ? androidContentType?.cta?.actionLink : "");
 
             // If we have deep links available, find the matching one
-            if (deepLink?.length > 0) {
+            if (deepLink?.length > 0 && deepLinkValue) {
               // Try to find exact match first
               const exactMatch = deepLink.find((link) => link.value === deepLinkValue);
               if (exactMatch) {
@@ -703,7 +709,8 @@ const MobilePushNew = ({
               }
             }
 
-            return deepLinkValue;
+            // If no match found, return the base URL without query parameters
+            return deepLinkValue ? deepLinkValue.split('?')[0] : "";
           })(),
           deepLinkKeysValue: (() => {
             // Extract deep link keys from the URL
@@ -815,13 +822,14 @@ const MobilePushNew = ({
         const iosButtons = iosCtas || [];
         if (iosButtons.length > 0) {
           const ctaDataFromIos = iosButtons.map((button, index) => {
-            let deepLinkKeys = [];
-            if (button?.type === DEEP_LINK && button?.actionLink) {
+            // Use deep link keys from the button if available, otherwise try to extract from URL
+            let deepLinkKeys = button?.deepLinkKeys || [];
+            if (!deepLinkKeys?.length && button?.type === DEEP_LINK && button?.actionLink) {
               try {
                 const url = new URL(button?.actionLink);
                 const extractedKeys = [];
                 url.searchParams.forEach((value, key) => {
-                  if (value === key) {
+                  if (value === key) { // Only extract keys where value equals key
                     extractedKeys.push(key);
                   }
                 });
@@ -835,7 +843,15 @@ const MobilePushNew = ({
 
             return {
               text: button?.actionText || "",
-              url: button?.actionLink || "",
+              url: (() => {
+                const deepLinkValue = button?.actionLink || "";
+                if (deepLink?.length > 0 && deepLinkValue && button?.type === DEEP_LINK) {
+                  const baseDeepLinkValue = deepLinkValue.split('?')[0];
+                  const match = deepLink.find((link) => link.value === baseDeepLinkValue);
+                  if (match) return match.value;
+                }
+                return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+              })(),
               urlType: button?.type || DEEP_LINK,
               deepLinkKeys,
               ctaType: index === 0 ? PRIMARY : SECONDARY,
@@ -872,9 +888,9 @@ const MobilePushNew = ({
           deepLinkValue: (() => {
             // Get the deep link value
             const deepLinkValue = iosMainCta?.type === DEEP_LINK ? iosMainCta?.actionLink : (iosContentType?.cta?.type === DEEP_LINK ? iosContentType?.cta?.actionLink : "");
-            
+
             // If we have deep links available, find the matching one
-            if (deepLink?.length > 0) {
+            if (deepLink?.length > 0 && deepLinkValue) {
               // Try to find exact match first
               const exactMatch = deepLink.find((link) => link.value === deepLinkValue);
               if (exactMatch) {
@@ -889,7 +905,8 @@ const MobilePushNew = ({
               }
             }
 
-            return deepLinkValue;
+            // If no match found, return the base URL without query parameters
+            return deepLinkValue ? deepLinkValue.split('?')[0] : "";
           })(),
           deepLinkKeysValue: (() => {
             // Extract deep link keys from the URL
@@ -945,23 +962,412 @@ const MobilePushNew = ({
       return;
     }
 
-    // Do NOT reset form state here; only populate 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;
     }
 
-    // ... rest of the library mode data population ...
+    // Prepare all state updates
+    const stateUpdates = [];
+
+    // Template name
+    stateUpdates.push(() => setTemplateName(name));
+
+    // Process Android content
+    const androidContentType = templateContent?.ANDROID;
+    if (!isEmpty(androidContentType)) {
+      const {
+        title: androidTitle = "",
+        message: androidMessage = "",
+        expandableDetails: androidExpandableDetails = {},
+        image: androidImage = "",
+        cta: androidMainCta = null,
+        type: androidType = "NONE", // Get the type from root level
+      } = androidContentType || {};
+
+      const {
+        style: androidStyle = "",
+        ctas: androidCtas = [],
+        image: androidExpandableImage = "",
+        media: androidMedia = [],
+        carouselData: androidCarouselData = [],
+      } = androidExpandableDetails || {};
+
+      // Determine media type based on all available information
+      let androidMediaType = NONE;
+      let androidImageSrc = "";
+      let androidVideoSrc = "";
+      let androidVideoPreview = "";
+
+      // First check expandableDetails.style
+      if (androidStyle === BIG_PICTURE) {
+        androidMediaType = IMAGE;
+        androidImageSrc = androidExpandableImage || androidImage;
+      } else if (androidStyle === MANUAL_CAROUSEL || androidStyle === AUTO_CAROUSEL || androidStyle === FILMSTRIP_CAROUSEL || androidStyle === CAROUSEL) {
+        androidMediaType = CAROUSEL;
+      } else if (androidStyle === BIG_TEXT) {
+        androidMediaType = "NONE";
+      }
+
+      // Then check media array for video/GIF
+      if (androidMedia?.length > 0) {
+        const mediaItem = androidMedia[0];
+        const { type, url, videoPreviewUrl } = mediaItem || {};
+        if (type === VIDEO) {
+          // Check if it's actually a GIF
+          if (url && url.toLowerCase().includes('.gif')) {
+            androidMediaType = GIF;
+          } else {
+            androidMediaType = VIDEO;
+          }
+          androidVideoSrc = url;
+          androidVideoPreview = videoPreviewUrl || url;
+        } else if (type === GIF) {
+          androidMediaType = GIF;
+          androidVideoSrc = url;
+          androidVideoPreview = url;
+        }
+      }
+
+      // Also check root level type
+      if (androidType === VIDEO || androidType === GIF || androidType === CAROUSEL) {
+        androidMediaType = androidType;
+      }
+
+      // Handle CTA data
+      const androidButtons = androidCtas || [];
+      if (androidButtons.length > 0) {
+        const ctaDataFromAndroid = androidButtons.map((button, index) => {
+          // Use deep link keys from the button if available, otherwise try to extract from URL
+          let deepLinkKeys = button?.deepLinkKeys || [];
+          if (!deepLinkKeys.length && button?.type === DEEP_LINK && button?.actionLink) {
+            try {
+              const url = new URL(button?.actionLink);
+              const extractedKeys = [];
+              url.searchParams.forEach((value, key) => {
+                if (value === key) { // Only extract keys where value equals key
+                  extractedKeys.push(key);
+                }
+              });
+              if (extractedKeys?.length > 0) {
+                deepLinkKeys = extractedKeys;
+              }
+            } catch (error) {
+              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+            }
+          }
+
+          return {
+            text: button?.actionText || "",
+            url: (() => {
+              const deepLinkValue = button?.actionLink || "";
+              if (deepLink?.length > 0 && deepLinkValue && button?.type === DEEP_LINK) {
+                const baseDeepLinkValue = deepLinkValue.split('?')[0];
+                const match = deepLink.find((link) => link.value === baseDeepLinkValue);
+                if (match) return match.value;
+              }
+              return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+            })(),
+            urlType: button?.type || DEEP_LINK,
+            deepLinkKeys,
+            ctaType: index === 0 ? PRIMARY : SECONDARY,
+            isSaved: true,
+            index,
+          };
+        });
+
+        stateUpdates.push(() => setCtaDataAndroid(ctaDataFromAndroid));
+
+        const hasPrimaryButton = androidButtons.some((button, index) => index === 0 && button?.actionText);
+        const hasSecondaryButton = androidButtons.some((button, index) => index === 1 && button?.actionText);
+
+        if (hasPrimaryButton) {
+          stateUpdates.push(() => setPrimaryButtonAndroid(true));
+        }
+        if (hasSecondaryButton) {
+          stateUpdates.push(() => setSecondaryButtonAndroid(true));
+        }
+      }
+
+      // Process Android content
+      const androidContentData = {
+        title: androidTitle,
+        message: androidMessage,
+        mediaType: androidMediaType,
+        imageSrc: androidImageSrc,
+        videoSrc: androidVideoSrc,
+        videoPreview: androidVideoPreview,
+        carouselData: androidCarouselData,
+        // Handle root level CTA
+        actionOnClick: !!androidMainCta || !!androidContentType?.cta,
+        linkType: (androidMainCta?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK) || (androidContentType?.cta?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK),
+        deepLinkValue: (() => {
+          // Get the deep link value
+          const deepLinkValue = androidMainCta?.type === DEEP_LINK ? androidMainCta?.actionLink : (androidContentType?.cta?.type === DEEP_LINK ? androidContentType?.cta?.actionLink : "");
+
+          // If we have deep links available, find the matching one
+          if (deepLink?.length > 0 && deepLinkValue) {
+            // Try to find exact match first
+            const exactMatch = deepLink.find((link) => link.value === deepLinkValue);
+            if (exactMatch) {
+              return exactMatch.value;
+            }
+
+            // Try to find match without query params
+            const baseDeepLinkValue = deepLinkValue.split('?')[0];
+            const partialMatch = deepLink.find((link) => link.value === baseDeepLinkValue || link.value.split('?')[0] === baseDeepLinkValue);
+            if (partialMatch) {
+              return partialMatch.value;
+            }
+          }
+
+          // If no match found, return the base URL without query parameters
+          return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+        })(),
+        deepLinkKeysValue: (() => {
+          // Extract deep link keys from the URL
+          const deepLinkValue = androidMainCta?.type === DEEP_LINK ? androidMainCta?.actionLink : (androidContentType?.cta?.type === DEEP_LINK ? androidContentType?.cta?.actionLink : "");
+          if (deepLinkValue) {
+            try {
+              const url = new URL(deepLinkValue);
+              const extractedKeys = [];
+              url.searchParams.forEach((value, key) => {
+                if (value === key) { // Only extract keys where value equals key
+                  extractedKeys.push(key);
+                }
+              });
+              return extractedKeys;
+            } catch (error) {
+              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+              return [];
+            }
+          }
+          return [];
+        })(),
+        externalLinkValue: androidMainCta?.type === EXTERNAL_URL ? androidMainCta?.actionLink : (androidContentType?.cta?.type === EXTERNAL_URL ? androidContentType?.cta?.actionLink : ""),
+      };
+
+      stateUpdates.push(() => setAndroidContent(androidContentData));
+
+      // Set media sources for upload state
+      if (androidImageSrc) {
+        stateUpdates.push(() => setUpdateMpushImageSrc(androidImageSrc, 0, IMAGE));
+      }
+      if (androidVideoSrc) {
+        stateUpdates.push(() => setUpdateMpushVideoSrc(0, {
+          videoSrc: androidVideoSrc,
+          previewUrl: androidVideoPreview,
+        }, true)); // isInitialization = true
+      }
+    }
+
+    // Process iOS content
+    const iosContentType = templateContent?.IOS;
+    if (!isEmpty(iosContentType)) {
+      const {
+        title: iosTitle = "",
+        message: iosMessage = "",
+        expandableDetails: iosExpandableDetails = {},
+        image: iosImage = "",
+        cta: iosMainCta = null,
+        type: iosType = "NONE", // Get the type from root level
+        mediaType: iosMediaTypeFromRoot = "NONE", // Also check mediaType from root
+      } = iosContentType || {};
+
+      const {
+        style: iosStyle = "",
+        ctas: iosCtas = [],
+        image: iosExpandableImage = "",
+        media: iosMedia = [],
+        carouselData: iosCarouselData = [],
+        mediaType: iosMediaTypeFromStyle = "NONE", // Also check mediaType from style
+      } = iosExpandableDetails || {};
+
+      // Determine media type based on all available information
+      let iosMediaType = "NONE";
+      let iosImageSrc = "";
+      let iosVideoSrc = "";
+      let iosVideoPreview = "";
+
+      // First check expandableDetails.style
+      if (iosStyle === BIG_PICTURE) {
+        iosMediaType = IMAGE;
+        iosImageSrc = iosExpandableImage || iosImage;
+      } else if (iosStyle === MANUAL_CAROUSEL || iosStyle === AUTO_CAROUSEL || iosStyle === FILMSTRIP_CAROUSEL) {
+        iosMediaType = CAROUSEL;
+      } else if (iosStyle === BIG_TEXT) {
+        iosMediaType = "NONE";
+      }
+
+      // Then check media array for video/GIF
+      if (iosMedia?.length > 0) {
+        const mediaItem = iosMedia[0];
+        const { type, url, videoPreviewUrl } = mediaItem || {};
+        if (type === VIDEO) {
+          // Check if it's actually a GIF
+          if (url && url.toLowerCase().includes('.gif')) {
+            iosMediaType = GIF;
+          } else {
+            iosMediaType = VIDEO;
+          }
+          iosVideoSrc = url;
+          iosVideoPreview = videoPreviewUrl || url;
+        } else if (type === GIF) {
+          iosMediaType = GIF;
+          iosVideoSrc = url;
+          iosVideoPreview = url;
+        }
+      }
+
+      // Check all possible media type sources
+      if (iosType === VIDEO || iosType === GIF || iosType === CAROUSEL) {
+        iosMediaType = iosType;
+      }
+      if (iosMediaTypeFromRoot === VIDEO || iosMediaTypeFromRoot === GIF || iosMediaTypeFromRoot === CAROUSEL || iosMediaTypeFromRoot === IMAGE) {
+        iosMediaType = iosMediaTypeFromRoot;
+      }
+      if (iosMediaTypeFromStyle === VIDEO || iosMediaTypeFromStyle === GIF || iosMediaTypeFromStyle === CAROUSEL || iosMediaTypeFromStyle === IMAGE) {
+        iosMediaType = iosMediaTypeFromStyle;
+      }
+
+      // Handle iOS CTA data
+      const iosButtons = iosCtas || [];
+      if (iosButtons.length > 0) {
+        const ctaDataFromIos = iosButtons.map((button, index) => {
+          // Use deep link keys from the button if available, otherwise try to extract from URL
+          let deepLinkKeys = button?.deepLinkKeys || [];
+          if (!deepLinkKeys?.length && button?.type === DEEP_LINK && button?.actionLink) {
+            try {
+              const url = new URL(button?.actionLink);
+              const extractedKeys = [];
+              url.searchParams.forEach((value, key) => {
+                if (value === key) { // Only extract keys where value equals key
+                  extractedKeys.push(key);
+                }
+              });
+              if (extractedKeys?.length > 0) {
+                deepLinkKeys = extractedKeys;
+              }
+            } catch (error) {
+              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+            }
+          }
+
+          return {
+            text: button?.actionText || "",
+            url: (() => {
+              const deepLinkValue = button?.actionLink || "";
+              if (deepLink?.length > 0 && deepLinkValue && button?.type === DEEP_LINK) {
+                const baseDeepLinkValue = deepLinkValue.split('?')[0];
+                const match = deepLink.find((link) => link.value === baseDeepLinkValue);
+                if (match) return match.value;
+              }
+              return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+            })(),
+            urlType: button?.type || DEEP_LINK,
+            deepLinkKeys,
+            ctaType: index === 0 ? PRIMARY : SECONDARY,
+            isSaved: true,
+            index,
+          };
+        });
+
+        stateUpdates.push(() => setCtaDataIos(ctaDataFromIos));
+
+        const hasPrimaryButton = iosButtons.some((button, index) => index === 0 && button?.actionText);
+        const hasSecondaryButton = iosButtons.some((button, index) => index === 1 && button?.actionText);
+
+        if (hasPrimaryButton) {
+          stateUpdates.push(() => setPrimaryButtonIos(true));
+        }
+        if (hasSecondaryButton) {
+          stateUpdates.push(() => setSecondaryButtonIos(true));
+        }
+      }
+
+      // Process iOS content
+      const iosContentData = {
+        title: iosTitle,
+        message: iosMessage,
+        mediaType: iosMediaType,
+        imageSrc: iosImageSrc,
+        videoSrc: iosVideoSrc,
+        videoPreview: iosVideoPreview,
+        carouselData: iosCarouselData,
+        // Handle root level CTA
+        actionOnClick: !!iosMainCta || !!iosContentType?.cta,
+        linkType: (iosMainCta?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK) || (iosContentType?.cta?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK),
+        deepLinkValue: (() => {
+          // Get the deep link value
+          const deepLinkValue = iosMainCta?.type === DEEP_LINK ? iosMainCta?.actionLink : (iosContentType?.cta?.type === DEEP_LINK ? iosContentType?.cta?.actionLink : "");
+
+          // If we have deep links available, find the matching one
+          if (deepLink?.length > 0 && deepLinkValue) {
+            // Try to find exact match first
+            const exactMatch = deepLink.find((link) => link.value === deepLinkValue);
+            if (exactMatch) {
+              return exactMatch.value;
+            }
+
+            // Try to find match without query params
+            const baseDeepLinkValue = deepLinkValue.split('?')[0];
+            const partialMatch = deepLink.find((link) => link.value === baseDeepLinkValue || link.value.split('?')[0] === baseDeepLinkValue);
+            if (partialMatch) {
+              return partialMatch.value;
+            }
+          }
+
+          // If no match found, return the base URL without query parameters
+          return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+        })(),
+        deepLinkKeysValue: (() => {
+          // Extract deep link keys from the URL
+          const deepLinkValue = iosMainCta?.type === DEEP_LINK ? iosMainCta?.actionLink : (iosContentType?.cta?.type === DEEP_LINK ? iosContentType?.cta?.actionLink : "");
+          if (deepLinkValue) {
+            try {
+              const url = new URL(deepLinkValue);
+              const extractedKeys = [];
+              url.searchParams.forEach((value, key) => {
+                if (value === key) { // Only extract keys where value equals key
+                  extractedKeys.push(key);
+                }
+              });
+              return extractedKeys;
+            } catch (error) {
+              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+              return [];
+            }
+          }
+          return [];
+        })(),
+        externalLinkValue: iosMainCta?.type === EXTERNAL_URL ? iosMainCta?.actionLink : (iosContentType?.cta?.type === EXTERNAL_URL ? iosContentType?.cta?.actionLink : ""),
+      };
+
+      stateUpdates.push(() => setIosContent(iosContentData));
+
+      // Set media sources for upload state
+      if (iosImageSrc) {
+        stateUpdates.push(() => setUpdateMpushImageSrc(iosImageSrc, 1, IMAGE));
+      }
+      if (iosVideoSrc) {
+        stateUpdates.push(() => setUpdateMpushVideoSrc(1, {
+          videoSrc: iosVideoSrc,
+          previewUrl: iosVideoPreview,
+        }, true)); // isInitialization = true
+      }
+    }
+
+    // Execute all state updates
+    stateUpdates.forEach((update) => {
+      update();
+    });
 
     // Turn off spinner after all data is populated
     setSpin(false);
-  }, [templateData, isFullMode]);
+  }, [templateData, isFullMode, deepLink, setUpdateMpushImageSrc, setUpdateMpushVideoSrc]);
 
   // Determine platform support from accountData
   const isAndroidSupported = accountData?.configs?.android === '1';
@@ -1429,9 +1835,54 @@ const MobilePushNew = ({
     setAndroidDeepLinkError(androidDeepLinkUrlError || "");
     setIosDeepLinkError(iosDeepLinkUrlError || "");
 
-    // Validate deep link keys
-    const androidDeepLinkKeysErrorMsg = androidContent?.linkType === DEEP_LINK && androidContent?.deepLinkValue && (!Array.isArray(androidContent?.deepLinkKeysValue) || androidContent?.deepLinkKeysValue?.length === 0) ? formatMessage(messages.deepLinkKeysRequired) : "";
-    const iosDeepLinkKeysErrorMsg = iosContent?.linkType === DEEP_LINK && iosContent?.deepLinkValue && (!Array.isArray(iosContent?.deepLinkKeysValue) || iosContent?.deepLinkKeysValue?.length === 0) ? formatMessage(messages.deepLinkKeysRequired) : "";
+    // Validate deep link keys - only require keys if the selected deep link has keys defined
+    const androidDeepLinkKeysErrorMsg = (() => {
+      if (androidContent?.linkType === DEEP_LINK && androidContent?.deepLinkValue) {
+        // Use the same matching logic as deep link value extraction
+        let selectedDeepLink = null;
+        
+        // Try to find exact match first
+        selectedDeepLink = deepLink?.find((link) => link.value === androidContent?.deepLinkValue);
+        
+        // If no exact match, try to find match without query params
+        if (!selectedDeepLink && androidContent?.deepLinkValue) {
+          const baseDeepLinkValue = androidContent?.deepLinkValue.split('?')[0];
+          selectedDeepLink = deepLink?.find((link) => link.value === baseDeepLinkValue || link.value.split('?')[0] === baseDeepLinkValue);
+        }
+
+        const hasKeysDefined = selectedDeepLink?.keys && selectedDeepLink.keys.length > 0;
+
+        // Only require keys if the selected deep link has keys defined
+        if (hasKeysDefined && (!Array.isArray(androidContent?.deepLinkKeysValue) || androidContent?.deepLinkKeysValue?.length === 0)) {
+          return formatMessage(messages.deepLinkKeysRequired);
+        }
+      }
+      return "";
+    })();
+
+    const iosDeepLinkKeysErrorMsg = (() => {
+      if (iosContent?.linkType === DEEP_LINK && iosContent?.deepLinkValue) {
+        // Use the same matching logic as deep link value extraction
+        let selectedDeepLink = null;
+
+        // Try to find exact match first
+        selectedDeepLink = deepLink?.find((link) => link.value === iosContent?.deepLinkValue);
+
+        // If no exact match, try to find match without query params
+        if (!selectedDeepLink && iosContent?.deepLinkValue) {
+          const baseDeepLinkValue = iosContent?.deepLinkValue.split('?')[0];
+          selectedDeepLink = deepLink?.find((link) => link.value === baseDeepLinkValue || link.value.split('?')[0] === baseDeepLinkValue);
+        }
+        
+        const hasKeysDefined = selectedDeepLink?.keys && selectedDeepLink.keys.length > 0;
+
+        // Only require keys if the selected deep link has keys defined
+        if (hasKeysDefined && (!Array.isArray(iosContent?.deepLinkKeysValue) || iosContent?.deepLinkKeysValue?.length === 0)) {
+          return formatMessage(messages.deepLinkKeysRequired);
+        }
+      }
+      return "";
+    })();
 
     setAndroidDeepLinkKeysError(androidDeepLinkKeysErrorMsg || "");
     setIosDeepLinkKeysError(iosDeepLinkKeysErrorMsg || "");
@@ -1460,12 +1911,26 @@ const MobilePushNew = ({
         if (savedCtas?.length > 0) {
           processedAndroidContent.expandableDetails = {
             ...processedAndroidContent.expandableDetails,
-            ctas: savedCtas.map((cta) => ({
-              actionText: cta.text,
-              type: cta.urlType || DEEP_LINK,
-              actionLink: cta.url,
-              deepLinkKeys: cta.deepLinkKeys, // Keep deepLinkKeys for createMobilePushPayload.js to process
-            })),
+            ctas: savedCtas.map((cta) => {
+              let actionLink = cta?.url;
+
+              // Append deep link keys to URL if they exist
+              if (cta?.urlType === DEEP_LINK && cta?.deepLinkKeys?.length > 0) {
+                const deepLinkKeysArray = Array.isArray(cta?.deepLinkKeys) ? cta?.deepLinkKeys : [cta?.deepLinkKeys];
+                const validKeys = deepLinkKeysArray.filter((key) => typeof key === 'string' && key?.length > 0);
+                if (validKeys?.length > 0) {
+                  const separator = actionLink.includes('?') ? '&' : '?';
+                  const keyParams = validKeys.map((key) => `${key}={{${key}}}`).join('&');
+                  actionLink = `${actionLink}${separator}${keyParams}`;
+                }
+              }
+
+              return {
+                actionText: cta?.text,
+                type: cta?.urlType || DEEP_LINK,
+                actionLink,
+              };
+            }),
           };
         }
       }
@@ -1474,19 +1939,32 @@ const MobilePushNew = ({
         if (savedCtas?.length > 0) {
           processedIosContent.expandableDetails = {
             ...processedIosContent.expandableDetails,
-            ctas: savedCtas.map((cta) => ({
-              actionText: cta.text,
-              type: cta.urlType || DEEP_LINK,
-              actionLink: cta.url,
-              deepLinkKeys: cta.deepLinkKeys, // Keep deepLinkKeys for createMobilePushPayload.js to process
-            })),
+            ctas: savedCtas.map((cta) => {
+              let actionLink = cta?.url;
+              
+              // Append deep link keys to URL if they exist
+              if (cta?.urlType === DEEP_LINK && cta?.deepLinkKeys?.length > 0) {
+                const deepLinkKeysArray = Array.isArray(cta?.deepLinkKeys) ? cta?.deepLinkKeys : [cta?.deepLinkKeys];
+                const validKeys = deepLinkKeysArray.filter((key) => typeof key === 'string' && key?.length > 0);
+                if (validKeys?.length > 0) {
+                  const separator = actionLink.includes('?') ? '&' : '?';
+                  const keyParams = validKeys.map((key) => `${key}={{${key}}}`).join('&');
+                  actionLink = `${actionLink}${separator}${keyParams}`;
+                }
+              }
+              
+              return {
+                actionText: cta?.text,
+                type: cta?.urlType || DEEP_LINK,
+                actionLink,
+              };
+            }),
           };
         }
       }
 
-      // Fix: Only include enabled platform content in payload and pass intl
-      const createPayload = createMobilePushPayloadWithIntl.WrappedComponent;
-      const payload = createPayload({
+      // Create payload with enabled platform content and intl
+      const payload = createMobilePushPayloadWithIntl({
         templateName: finalTemplateName,
         androidContent: isAndroidSupported ? processedAndroidContent : undefined,
         iosContent: isIosSupported ? processedIosContent : undefined,
@@ -1525,7 +2003,6 @@ const MobilePushNew = ({
           mode: isEditMode ? EDIT : CREATE,
           imageAdded: definitionMode === IMAGE.toLowerCase(),
         });
-
         // --- BEGIN: Library mode communication fix ---
         if (!isFullMode) {
           // In library mode, only communicate to parent/callback, do NOT call create/edit API

package/v2Containers/MobilePushNew/messages.js

@@ -117,7 +117,7 @@ export default defineMessages({
   },
   deepLinkKeysPlaceholder: {
     id: `${scope}.deepLinkKeysPlaceholder`,
-    defaultMessage: 'Please input {key}',
+    defaultMessage: 'Please input {key} here',
   },
   deepLinkKeysRequired: {
     id: `${scope}.deepLinkKeysRequired`,