@capillarytech/creatives-library 8.0.134-alpha.0 → 8.0.135

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 || {};
 
@@ -573,7 +570,7 @@ const MobilePushNew = ({
           expandableDetails: androidExpandableDetails = {},
           image: androidImage = "",
           cta: androidMainCta = null,
-          type: androidType = "NONE", // Get the type from root level
+          type: androidType = NONE, // Get the type from root level
         } = androidContentType || {};
 
         const {
@@ -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 = "";
@@ -597,7 +594,7 @@ const MobilePushNew = ({
         } else if (androidStyle === MANUAL_CAROUSEL || androidStyle === AUTO_CAROUSEL || androidStyle === FILMSTRIP_CAROUSEL || androidStyle === CAROUSEL) {
           androidMediaType = CAROUSEL;
         } else if (androidStyle === BIG_TEXT) {
-          androidMediaType = "NONE";
+          androidMediaType = NONE;
         }
 
         // Then check media array for video/GIF
@@ -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
@@ -751,8 +758,8 @@ const MobilePushNew = ({
           expandableDetails: iosExpandableDetails = {},
           image: iosImage = "",
           cta: iosMainCta = null,
-          type: iosType = "NONE", // Get the type from root level
-          mediaType: iosMediaTypeFromRoot = "NONE", // Also check mediaType from root
+          type: iosType = NONE, // Get the type from root level
+          mediaType: iosMediaTypeFromRoot = NONE, // Also check mediaType from root
         } = iosContentType || {};
 
         const {
@@ -761,11 +768,11 @@ const MobilePushNew = ({
           image: iosExpandableImage = "",
           media: iosMedia = [],
           carouselData: iosCarouselData = [],
-          mediaType: iosMediaTypeFromStyle = "NONE", // Also check mediaType from style
+          mediaType: iosMediaTypeFromStyle = NONE, // Also check mediaType from style
         } = iosExpandableDetails || {};
 
         // Determine media type based on all available information
-        let iosMediaType = "NONE";
+        let iosMediaType = NONE;
         let iosImageSrc = "";
         let iosVideoSrc = "";
         let iosVideoPreview = "";
@@ -777,7 +784,7 @@ const MobilePushNew = ({
         } else if (iosStyle === MANUAL_CAROUSEL || iosStyle === AUTO_CAROUSEL || iosStyle === FILMSTRIP_CAROUSEL) {
           iosMediaType = CAROUSEL;
         } else if (iosStyle === BIG_TEXT) {
-          iosMediaType = "NONE";
+          iosMediaType = NONE;
         }
 
         // Then check media array for video/GIF
@@ -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