@capillarytech/creatives-library 8.0.136-beta.4 → 8.0.136

package/v2Containers/MobilePushNew/index.js

@@ -157,6 +157,9 @@ const MobilePushNew = ({
   const prevUploadedAssetDataRef = useRef(null);
   const prevVideoDataRef = useRef(null);
 
+  // Add ref to track current template name value
+  const templateNameRef = useRef("");
+
   const videoData = useMemo(
     () => {
       const videoDataId = `vd_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
@@ -326,6 +329,7 @@ const MobilePushNew = ({
   // Define resetFormData early to avoid initialization errors
   const resetFormData = useCallback(() => {
     setTemplateName("");
+    templateNameRef.current = "";
     setAndroidContent({
       title: "",
       message: "",
@@ -559,7 +563,10 @@ const MobilePushNew = ({
       const stateUpdates = [];
 
       // Template name
-      stateUpdates.push(() => setTemplateName(name));
+      stateUpdates.push(() => {
+        setTemplateName(name);
+        templateNameRef.current = name;
+      });
 
       // Process Android content
       const androidContentType = editContent?.ANDROID;
@@ -630,18 +637,23 @@ const MobilePushNew = ({
             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);
+                // Extract query parameters from deep link URL using the same approach as main content
+                const deepLinkValue = button?.actionLink;
+                if (deepLinkValue && deepLinkValue.includes('?')) {
+                  const queryString = deepLinkValue.split('?')[1];
+                  const searchParams = new URLSearchParams(queryString);
+                  const extractedKeys = [];
+                  searchParams.forEach((value, key) => {
+                    if (value === key) { // Only extract keys where value equals key
+                      extractedKeys.push(key);
+                    }
+                  });
+                  if (extractedKeys?.length > 0) {
+                    deepLinkKeys = extractedKeys;
                   }
-                });
-                if (extractedKeys?.length > 0) {
-                  deepLinkKeys = extractedKeys;
                 }
               } catch (error) {
-                console.error("[MobilePushNew] Error extracting deep link keys:", error);
+                console.error("[MobilePushNew] Error extracting deep link keys from CTA button:", error);
               }
             }
 
@@ -677,6 +689,45 @@ const MobilePushNew = ({
           }
         }
 
+        // Determine actionOnClick and linkType for Android - prioritize CTA buttons for video, root level CTA for others, carousel data as fallback
+        const androidActionOnClick = (() => {
+          // For video templates, prioritize CTA buttons over root level CTA
+          if (androidMediaType === VIDEO && androidButtons.length > 0) {
+            return true;
+          }
+          // If there's a root level CTA, use it
+          if (!!androidMainCta || !!androidContentType?.cta) {
+            return true;
+          }
+          // Otherwise, check carousel data
+          if (androidMediaType === CAROUSEL) {
+            const carouselLinkInfo = processCarouselDataForDeepLinks(androidCarouselData);
+            return carouselLinkInfo.deepLinkValue || carouselLinkInfo.externalLinkValue;
+          }
+          return false;
+        })();
+
+        const androidLinkType = (() => {
+          // For video templates, prioritize CTA buttons over root level CTA
+          if (androidMediaType === VIDEO && androidButtons.length > 0) {
+            const firstButton = androidButtons[0];
+            return firstButton?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK;
+          }
+          // If there's a root level CTA, use its type
+          if (androidMainCta?.type === EXTERNAL_URL || androidContentType?.cta?.type === EXTERNAL_URL) {
+            return EXTERNAL_LINK;
+          }
+          if (androidMainCta?.type === DEEP_LINK || androidContentType?.cta?.type === DEEP_LINK) {
+            return DEEP_LINK;
+          }
+          // Otherwise, check carousel data
+          if (androidMediaType === CAROUSEL) {
+            const carouselLinkInfo = processCarouselDataForDeepLinks(androidCarouselData);
+            return carouselLinkInfo.externalLinkValue ? EXTERNAL_LINK : DEEP_LINK;
+          }
+          return DEEP_LINK;
+        })();
+
         // Process Android content
         const androidContentData = {
           title: androidTitle,
@@ -686,53 +737,145 @@ const MobilePushNew = ({
           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),
+          // Handle root level CTA or carousel data
+          actionOnClick: androidActionOnClick,
+          linkType: androidLinkType,
           deepLinkValue: (() => {
-            // Get the deep link value
-            const deepLinkValue = androidMainCta?.type === DEEP_LINK ? androidMainCta?.actionLink : (androidContentType?.cta?.type === DEEP_LINK ? androidContentType?.cta?.actionLink : "");
+            // For video templates, prioritize CTA buttons over root level CTA
+            if (androidMediaType === VIDEO && androidButtons.length > 0) {
+              const firstButton = androidButtons[0];
+              if (firstButton?.type === DEEP_LINK && firstButton?.actionLink) {
+                const deepLinkValue = firstButton.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;
+                  }
 
-            // 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;
+                  }
+                }
 
-              // 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] : "";
               }
+              return "";
             }
+            // If there's a root level CTA, use it
+            if (androidMainCta?.type === DEEP_LINK || androidContentType?.cta?.type === DEEP_LINK) {
+              const deepLinkValue = androidMainCta?.type === DEEP_LINK ? androidMainCta?.actionLink : 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;
+                }
 
-            // If no match found, return the base URL without query parameters
-            return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+                // 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] : "";
+            }
+            // Otherwise, check carousel data
+            if (androidMediaType === CAROUSEL) {
+              const carouselLinkInfo = processCarouselDataForDeepLinks(androidCarouselData);
+              return carouselLinkInfo.deepLinkValue;
+            }
+            return "";
           })(),
           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);
+            // For video templates, prioritize CTA buttons over root level CTA
+            if (androidMediaType === VIDEO && androidButtons.length > 0) {
+              const firstButton = androidButtons[0];
+              if (firstButton?.type === DEEP_LINK && firstButton?.actionLink) {
+                const deepLinkValue = firstButton.actionLink;
+                
+                if (deepLinkValue && deepLinkValue.includes('?')) {
+                  try {
+                    // Extract query parameters from deep link URL
+                    const queryString = deepLinkValue.split('?')[1];
+                    const searchParams = new URLSearchParams(queryString);
+                    const extractedKeys = [];
+                    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 extractedKeys;
-              } catch (error) {
-                console.error("[MobilePushNew] Error extracting deep link keys:", error);
+                }
                 return [];
               }
+              return [];
+            }
+            // If there's a root level CTA, extract keys from URL
+            if (androidMainCta?.type === DEEP_LINK || androidContentType?.cta?.type === DEEP_LINK) {
+              const deepLinkValue = androidMainCta?.type === DEEP_LINK ? androidMainCta?.actionLink : androidContentType?.cta?.actionLink;
+              
+              if (deepLinkValue && deepLinkValue.includes('?')) {
+                try {
+                  // Extract query parameters from deep link URL
+                  const queryString = deepLinkValue.split('?')[1];
+                  const searchParams = new URLSearchParams(queryString);
+                  const extractedKeys = [];
+                  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 [];
+            }
+            // Otherwise, check carousel data
+            if (androidMediaType === CAROUSEL) {
+              const carouselLinkInfo = processCarouselDataForDeepLinks(androidCarouselData);
+              return carouselLinkInfo.deepLinkKeysValue;
             }
             return [];
           })(),
-          externalLinkValue: androidMainCta?.type === EXTERNAL_URL ? androidMainCta?.actionLink : (androidContentType?.cta?.type === EXTERNAL_URL ? androidContentType?.cta?.actionLink : ""),
+          externalLinkValue: (() => {
+            // For video templates, prioritize CTA buttons over root level CTA
+            if (androidMediaType === VIDEO && androidButtons.length > 0) {
+              const firstButton = androidButtons[0];
+              if (firstButton?.type === EXTERNAL_URL) {
+                return firstButton?.actionLink || "";
+              }
+              return "";
+            }
+            // If there's a root level CTA, use it
+            if (androidMainCta?.type === EXTERNAL_URL || androidContentType?.cta?.type === EXTERNAL_URL) {
+              return androidMainCta?.type === EXTERNAL_URL ? androidMainCta?.actionLink : androidContentType?.cta?.actionLink;
+            }
+            // Otherwise, check carousel data
+            if (androidMediaType === CAROUSEL) {
+              const carouselLinkInfo = processCarouselDataForDeepLinks(androidCarouselData);
+              return carouselLinkInfo.externalLinkValue;
+            }
+            return "";
+          })(),
         };
 
         stateUpdates.push(() => setAndroidContent(androidContentData));
@@ -826,18 +969,23 @@ const MobilePushNew = ({
             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);
+                // Extract query parameters from deep link URL using the same approach as main content
+                const deepLinkValue = button?.actionLink;
+                if (deepLinkValue && deepLinkValue.includes('?')) {
+                  const queryString = deepLinkValue.split('?')[1];
+                  const searchParams = new URLSearchParams(queryString);
+                  const extractedKeys = [];
+                  searchParams.forEach((value, key) => {
+                    if (value === key) { // Only extract keys where value equals key
+                      extractedKeys.push(key);
+                    }
+                  });
+                  if (extractedKeys?.length > 0) {
+                    deepLinkKeys = extractedKeys;
                   }
-                });
-                if (extractedKeys?.length > 0) {
-                  deepLinkKeys = extractedKeys;
                 }
               } catch (error) {
-                console.error("[MobilePushNew] Error extracting deep link keys:", error);
+                console.error("[MobilePushNew] Error extracting deep link keys from CTA button:", error);
               }
             }
 
@@ -873,6 +1021,45 @@ const MobilePushNew = ({
           }
         }
 
+        // Determine actionOnClick and linkType for iOS - prioritize CTA buttons for video, root level CTA for others, carousel data as fallback
+        const iosActionOnClick = (() => {
+          // For video templates, prioritize CTA buttons over root level CTA
+          if (iosMediaType === VIDEO && iosButtons.length > 0) {
+            return true;
+          }
+          // If there's a root level CTA, use it
+          if (!!iosMainCta || !!iosContentType?.cta) {
+            return true;
+          }
+          // Otherwise, check carousel data
+          if (iosMediaType === CAROUSEL) {
+            const iosCarouselLinkInfo = processCarouselDataForDeepLinks(iosCarouselData);
+            return iosCarouselLinkInfo.deepLinkValue || iosCarouselLinkInfo.externalLinkValue;
+          }
+          return false;
+        })();
+
+        const iosLinkType = (() => {
+          // For video templates, prioritize CTA buttons over root level CTA
+          if (iosMediaType === VIDEO && iosButtons.length > 0) {
+            const firstButton = iosButtons[0];
+            return firstButton?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK;
+          }
+          // If there's a root level CTA, use its type
+          if (iosMainCta?.type === EXTERNAL_URL || iosContentType?.cta?.type === EXTERNAL_URL) {
+            return EXTERNAL_LINK;
+          }
+          if (iosMainCta?.type === DEEP_LINK || iosContentType?.cta?.type === DEEP_LINK) {
+            return DEEP_LINK;
+          }
+          // Otherwise, check carousel data
+          if (iosMediaType === CAROUSEL) {
+            const iosCarouselLinkInfo = processCarouselDataForDeepLinks(iosCarouselData);
+            return iosCarouselLinkInfo.externalLinkValue ? EXTERNAL_LINK : DEEP_LINK;
+          }
+          return DEEP_LINK;
+        })();
+
         // iOS content
         const iosContentData = {
           title: iosTitle,
@@ -882,53 +1069,83 @@ const MobilePushNew = ({
           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),
+          // Handle root level CTA or carousel data
+          actionOnClick: iosActionOnClick,
+          linkType: iosLinkType,
           deepLinkValue: (() => {
-            // Get the deep link value
-            const deepLinkValue = iosMainCta?.type === DEEP_LINK ? iosMainCta?.actionLink : (iosContentType?.cta?.type === DEEP_LINK ? iosContentType?.cta?.actionLink : "");
+            // If there's a root level CTA, use it
+            if (iosMainCta?.type === DEEP_LINK || iosContentType?.cta?.type === DEEP_LINK) {
+              const deepLinkValue = iosMainCta?.type === DEEP_LINK ? iosMainCta?.actionLink : 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;
+                }
 
-            // 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;
+                }
               }
 
-              // 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] : "";
             }
-
-            // If no match found, return the base URL without query parameters
-            return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+            // Otherwise, check carousel data
+            if (iosMediaType === CAROUSEL) {
+              const iosCarouselLinkInfo = processCarouselDataForDeepLinks(iosCarouselData);
+              return iosCarouselLinkInfo.deepLinkValue;
+            }
+            return "";
           })(),
           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 [];
+            // If there's a root level CTA, extract keys from URL
+            if (iosMainCta?.type === DEEP_LINK || iosContentType?.cta?.type === DEEP_LINK) {
+              const deepLinkValue = iosMainCta?.type === DEEP_LINK ? iosMainCta?.actionLink : iosContentType?.cta?.actionLink;
+              
+              if (deepLinkValue && deepLinkValue.includes('?')) {
+                try {
+                  // Extract query parameters from deep link URL
+                  const queryString = deepLinkValue.split('?')[1];
+                  const searchParams = new URLSearchParams(queryString);
+                  const extractedKeys = [];
+                  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 [];
+            }
+            // Otherwise, check carousel data
+            if (iosMediaType === CAROUSEL) {
+              const iosCarouselLinkInfo = processCarouselDataForDeepLinks(iosCarouselData);
+              return iosCarouselLinkInfo.deepLinkKeysValue;
             }
             return [];
           })(),
-          externalLinkValue: iosMainCta?.type === EXTERNAL_URL ? iosMainCta?.actionLink : (iosContentType?.cta?.type === EXTERNAL_URL ? iosContentType?.cta?.actionLink : ""),
+          externalLinkValue: (() => {
+            // If there's a root level CTA, use it
+            if (iosMainCta?.type === EXTERNAL_URL || iosContentType?.cta?.type === EXTERNAL_URL) {
+              return iosMainCta?.type === EXTERNAL_URL ? iosMainCta?.actionLink : iosContentType?.cta?.actionLink;
+            }
+            // Otherwise, check carousel data
+            if (iosMediaType === CAROUSEL) {
+              const iosCarouselLinkInfo = processCarouselDataForDeepLinks(iosCarouselData);
+              return iosCarouselLinkInfo.externalLinkValue;
+            }
+            return "";
+          })(),
         };
 
         stateUpdates.push(() => setIosContent(iosContentData));
@@ -974,7 +1191,10 @@ const MobilePushNew = ({
     const stateUpdates = [];
 
     // Template name
-    stateUpdates.push(() => setTemplateName(name));
+    stateUpdates.push(() => {
+      setTemplateName(name);
+      templateNameRef.current = name;
+    });
 
     // Process Android content
     const androidContentType = templateContent?.ANDROID;
@@ -1045,18 +1265,23 @@ const MobilePushNew = ({
           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);
+              // Extract query parameters from deep link URL using the same approach as main content
+              const deepLinkValue = button?.actionLink;
+              if (deepLinkValue && deepLinkValue.includes('?')) {
+                const queryString = deepLinkValue.split('?')[1];
+                const searchParams = new URLSearchParams(queryString);
+                const extractedKeys = [];
+                searchParams.forEach((value, key) => {
+                  if (value === key) { // Only extract keys where value equals key
+                    extractedKeys.push(key);
+                  }
+                });
+                if (extractedKeys?.length > 0) {
+                  deepLinkKeys = extractedKeys;
                 }
-              });
-              if (extractedKeys?.length > 0) {
-                deepLinkKeys = extractedKeys;
               }
             } catch (error) {
-              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+              console.error("[MobilePushNew] Error extracting deep link keys from CTA button:", error);
             }
           }
 
@@ -1092,6 +1317,45 @@ const MobilePushNew = ({
         }
       }
 
+      // Determine actionOnClick and linkType for Android - prioritize CTA buttons for video, root level CTA for others, carousel data as fallback
+      const androidActionOnClick = (() => {
+        // For video templates, prioritize CTA buttons over root level CTA
+        if (androidMediaType === VIDEO && androidButtons.length > 0) {
+          return true;
+        }
+        // If there's a root level CTA, use it
+        if (!!androidMainCta || !!androidContentType?.cta) {
+          return true;
+        }
+        // Otherwise, check carousel data
+        if (androidMediaType === CAROUSEL) {
+          const carouselLinkInfo = processCarouselDataForDeepLinks(androidCarouselData);
+          return carouselLinkInfo.deepLinkValue || carouselLinkInfo.externalLinkValue;
+        }
+        return false;
+      })();
+
+      const androidLinkType = (() => {
+        // For video templates, prioritize CTA buttons over root level CTA
+        if (androidMediaType === VIDEO && androidButtons.length > 0) {
+          const firstButton = androidButtons[0];
+          return firstButton?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK;
+        }
+        // If there's a root level CTA, use its type
+        if (androidMainCta?.type === EXTERNAL_URL || androidContentType?.cta?.type === EXTERNAL_URL) {
+          return EXTERNAL_LINK;
+        }
+        if (androidMainCta?.type === DEEP_LINK || androidContentType?.cta?.type === DEEP_LINK) {
+          return DEEP_LINK;
+        }
+        // Otherwise, check carousel data
+        if (androidMediaType === CAROUSEL) {
+          const carouselLinkInfo = processCarouselDataForDeepLinks(androidCarouselData);
+          return carouselLinkInfo.externalLinkValue ? EXTERNAL_LINK : DEEP_LINK;
+        }
+        return DEEP_LINK;
+      })();
+
       // Process Android content
       const androidContentData = {
         title: androidTitle,
@@ -1101,53 +1365,145 @@ const MobilePushNew = ({
         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),
+        // Handle root level CTA or carousel data
+        actionOnClick: androidActionOnClick,
+        linkType: androidLinkType,
         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;
-            }
+          // For video templates, prioritize CTA buttons over root level CTA
+          if (androidMediaType === VIDEO && androidButtons.length > 0) {
+            const firstButton = androidButtons[0];
+            if (firstButton?.type === DEEP_LINK && firstButton?.actionLink) {
+              const deepLinkValue = firstButton.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;
+                }
+              }
 
-            // 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] : "";
             }
+            return "";
           }
+          // If there's a root level CTA, use it
+          if (androidMainCta?.type === DEEP_LINK || androidContentType?.cta?.type === DEEP_LINK) {
+            const deepLinkValue = androidMainCta?.type === DEEP_LINK ? androidMainCta?.actionLink : 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;
+              }
 
-          // If no match found, return the base URL without query parameters
-          return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+              // 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] : "";
+          }
+          // Otherwise, check carousel data
+          if (androidMediaType === CAROUSEL) {
+            const carouselLinkInfo = processCarouselDataForDeepLinks(androidCarouselData);
+            return carouselLinkInfo.deepLinkValue;
+          }
+          return "";
         })(),
         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);
+          // For video templates, prioritize CTA buttons over root level CTA
+          if (androidMediaType === VIDEO && androidButtons.length > 0) {
+            const firstButton = androidButtons[0];
+            if (firstButton?.type === DEEP_LINK && firstButton?.actionLink) {
+              const deepLinkValue = firstButton.actionLink;
+              
+              if (deepLinkValue && deepLinkValue.includes('?')) {
+                try {
+                  // Extract query parameters from deep link URL
+                  const queryString = deepLinkValue.split('?')[1];
+                  const searchParams = new URLSearchParams(queryString);
+                  const extractedKeys = [];
+                  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 extractedKeys;
-            } catch (error) {
-              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+              }
               return [];
             }
+            return [];
+          }
+          // If there's a root level CTA, extract keys from URL
+          if (androidMainCta?.type === DEEP_LINK || androidContentType?.cta?.type === DEEP_LINK) {
+            const deepLinkValue = androidMainCta?.type === DEEP_LINK ? androidMainCta?.actionLink : androidContentType?.cta?.actionLink;
+            
+            if (deepLinkValue && deepLinkValue.includes('?')) {
+              try {
+                // Extract query parameters from deep link URL
+                const queryString = deepLinkValue.split('?')[1];
+                const searchParams = new URLSearchParams(queryString);
+                const extractedKeys = [];
+                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 [];
+          }
+          // Otherwise, check carousel data
+          if (androidMediaType === CAROUSEL) {
+            const carouselLinkInfo = processCarouselDataForDeepLinks(androidCarouselData);
+            return carouselLinkInfo.deepLinkKeysValue;
           }
           return [];
         })(),
-        externalLinkValue: androidMainCta?.type === EXTERNAL_URL ? androidMainCta?.actionLink : (androidContentType?.cta?.type === EXTERNAL_URL ? androidContentType?.cta?.actionLink : ""),
+        externalLinkValue: (() => {
+          // For video templates, prioritize CTA buttons over root level CTA
+          if (androidMediaType === VIDEO && androidButtons.length > 0) {
+            const firstButton = androidButtons[0];
+            if (firstButton?.type === EXTERNAL_URL) {
+              return firstButton?.actionLink || "";
+            }
+            return "";
+          }
+          // If there's a root level CTA, use it
+          if (androidMainCta?.type === EXTERNAL_URL || androidContentType?.cta?.type === EXTERNAL_URL) {
+            return androidMainCta?.type === EXTERNAL_URL ? androidMainCta?.actionLink : androidContentType?.cta?.actionLink;
+          }
+          // Otherwise, check carousel data
+          if (androidMediaType === CAROUSEL) {
+            const carouselLinkInfo = processCarouselDataForDeepLinks(androidCarouselData);
+            return carouselLinkInfo.externalLinkValue;
+          }
+          return "";
+        })(),
       };
 
       stateUpdates.push(() => setAndroidContent(androidContentData));
@@ -1241,18 +1597,23 @@ const MobilePushNew = ({
           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);
+              // Extract query parameters from deep link URL using the same approach as main content
+              const deepLinkValue = button?.actionLink;
+              if (deepLinkValue && deepLinkValue.includes('?')) {
+                const queryString = deepLinkValue.split('?')[1];
+                const searchParams = new URLSearchParams(queryString);
+                const extractedKeys = [];
+                searchParams.forEach((value, key) => {
+                  if (value === key) { // Only extract keys where value equals key
+                    extractedKeys.push(key);
+                  }
+                });
+                if (extractedKeys?.length > 0) {
+                  deepLinkKeys = extractedKeys;
                 }
-              });
-              if (extractedKeys?.length > 0) {
-                deepLinkKeys = extractedKeys;
               }
             } catch (error) {
-              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+              console.error("[MobilePushNew] Error extracting deep link keys from CTA button:", error);
             }
           }
 
@@ -1288,6 +1649,45 @@ const MobilePushNew = ({
         }
       }
 
+      // Determine actionOnClick and linkType for iOS - prioritize CTA buttons for video, root level CTA for others, carousel data as fallback
+      const iosActionOnClick = (() => {
+        // For video templates, prioritize CTA buttons over root level CTA
+        if (iosMediaType === VIDEO && iosButtons.length > 0) {
+          return true;
+        }
+        // If there's a root level CTA, use it
+        if (!!iosMainCta || !!iosContentType?.cta) {
+          return true;
+        }
+        // Otherwise, check carousel data
+        if (iosMediaType === CAROUSEL) {
+          const iosCarouselLinkInfo = processCarouselDataForDeepLinks(iosCarouselData);
+          return iosCarouselLinkInfo.deepLinkValue || iosCarouselLinkInfo.externalLinkValue;
+        }
+        return false;
+      })();
+
+      const iosLinkType = (() => {
+        // For video templates, prioritize CTA buttons over root level CTA
+        if (iosMediaType === VIDEO && iosButtons.length > 0) {
+          const firstButton = iosButtons[0];
+          return firstButton?.type === EXTERNAL_URL ? EXTERNAL_LINK : DEEP_LINK;
+        }
+        // If there's a root level CTA, use its type
+        if (iosMainCta?.type === EXTERNAL_URL || iosContentType?.cta?.type === EXTERNAL_URL) {
+          return EXTERNAL_LINK;
+        }
+        if (iosMainCta?.type === DEEP_LINK || iosContentType?.cta?.type === DEEP_LINK) {
+          return DEEP_LINK;
+        }
+        // Otherwise, check carousel data
+        if (iosMediaType === CAROUSEL) {
+          const iosCarouselLinkInfo = processCarouselDataForDeepLinks(iosCarouselData);
+          return iosCarouselLinkInfo.externalLinkValue ? EXTERNAL_LINK : DEEP_LINK;
+        }
+        return DEEP_LINK;
+      })();
+
       // Process iOS content
       const iosContentData = {
         title: iosTitle,
@@ -1297,53 +1697,145 @@ const MobilePushNew = ({
         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),
+        // Handle root level CTA or carousel data
+        actionOnClick: iosActionOnClick,
+        linkType: iosLinkType,
         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;
-            }
+          // For video templates, prioritize CTA buttons over root level CTA
+          if (iosMediaType === VIDEO && iosButtons.length > 0) {
+            const firstButton = iosButtons[0];
+            if (firstButton?.type === DEEP_LINK && firstButton?.actionLink) {
+              const deepLinkValue = firstButton.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;
+                // 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] : "";
             }
+            return "";
           }
+          // If there's a root level CTA, use it
+          if (iosMainCta?.type === DEEP_LINK || iosContentType?.cta?.type === DEEP_LINK) {
+            const deepLinkValue = iosMainCta?.type === DEEP_LINK ? iosMainCta?.actionLink : 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] : "";
+            // If no match found, return the base URL without query parameters
+            return deepLinkValue ? deepLinkValue.split('?')[0] : "";
+          }
+          // Otherwise, check carousel data
+          if (iosMediaType === CAROUSEL) {
+            const iosCarouselLinkInfo = processCarouselDataForDeepLinks(iosCarouselData);
+            return iosCarouselLinkInfo.deepLinkValue;
+          }
+          return "";
         })(),
         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);
+          // For video templates, prioritize CTA buttons over root level CTA
+          if (iosMediaType === VIDEO && iosButtons.length > 0) {
+            const firstButton = iosButtons[0];
+            if (firstButton?.type === DEEP_LINK && firstButton?.actionLink) {
+              const deepLinkValue = firstButton.actionLink;
+              
+              if (deepLinkValue && deepLinkValue.includes('?')) {
+                try {
+                  // Extract query parameters from deep link URL
+                  const queryString = deepLinkValue.split('?')[1];
+                  const searchParams = new URLSearchParams(queryString);
+                  const extractedKeys = [];
+                  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 extractedKeys;
-            } catch (error) {
-              console.error("[MobilePushNew] Error extracting deep link keys:", error);
+              }
               return [];
             }
+            return [];
+          }
+          // If there's a root level CTA, extract keys from URL
+          if (iosMainCta?.type === DEEP_LINK || iosContentType?.cta?.type === DEEP_LINK) {
+            const deepLinkValue = iosMainCta?.type === DEEP_LINK ? iosMainCta?.actionLink : iosContentType?.cta?.actionLink;
+            
+            if (deepLinkValue && deepLinkValue.includes('?')) {
+              try {
+                // Extract query parameters from deep link URL
+                const queryString = deepLinkValue.split('?')[1];
+                const searchParams = new URLSearchParams(queryString);
+                const extractedKeys = [];
+                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 [];
+          }
+          // Otherwise, check carousel data
+          if (iosMediaType === CAROUSEL) {
+            const iosCarouselLinkInfo = processCarouselDataForDeepLinks(iosCarouselData);
+            return iosCarouselLinkInfo.deepLinkKeysValue;
           }
           return [];
         })(),
-        externalLinkValue: iosMainCta?.type === EXTERNAL_URL ? iosMainCta?.actionLink : (iosContentType?.cta?.type === EXTERNAL_URL ? iosContentType?.cta?.actionLink : ""),
+        externalLinkValue: (() => {
+          // For video templates, prioritize CTA buttons over root level CTA
+          if (iosMediaType === VIDEO && iosButtons.length > 0) {
+            const firstButton = iosButtons[0];
+            if (firstButton?.type === EXTERNAL_URL) {
+              return firstButton?.actionLink || "";
+            }
+            return "";
+          }
+          // If there's a root level CTA, use it
+          if (iosMainCta?.type === EXTERNAL_URL || iosContentType?.cta?.type === EXTERNAL_URL) {
+            return iosMainCta?.type === EXTERNAL_URL ? iosMainCta?.actionLink : iosContentType?.cta?.actionLink;
+          }
+          // Otherwise, check carousel data
+          if (iosMediaType === CAROUSEL) {
+            const iosCarouselLinkInfo = processCarouselDataForDeepLinks(iosCarouselData);
+            return iosCarouselLinkInfo.externalLinkValue;
+          }
+          return "";
+        })(),
       };
 
       stateUpdates.push(() => setIosContent(iosContentData));
@@ -1802,7 +2294,9 @@ const MobilePushNew = ({
       return;
     }
     // Only require templateName in full mode
-    if (isFullMode && !templateName?.trim()) {
+    // Use ref to get the latest template name value for validation
+    const currentTemplateName = templateNameRef.current || templateName;
+    if (isFullMode && !currentTemplateName?.trim()) {
       CapNotification.error({
         message: formatMessage(messages.emptyTemplateErrorMessage),
       });
@@ -1810,7 +2304,8 @@ const MobilePushNew = ({
     }
 
     // In library mode, set templateName programmatically if empty
-    let finalTemplateName = templateName;
+    // Use ref to get the latest template name value to avoid closure issues
+    let finalTemplateName = templateNameRef.current || templateName;
     if (!isFullMode && (!finalTemplateName || !finalTemplateName.trim())) {
       if (androidContent?.title && androidContent.title.trim()) {
         finalTemplateName = androidContent.title.trim();
@@ -1840,10 +2335,10 @@ const MobilePushNew = ({
       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];
@@ -1873,7 +2368,7 @@ const MobilePushNew = ({
           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
@@ -1941,7 +2436,7 @@ const MobilePushNew = ({
             ...processedIosContent.expandableDetails,
             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];
@@ -2126,7 +2621,6 @@ const MobilePushNew = ({
   }, [
     templateNameError,
     formatMessage,
-    templateName,
     androidContent,
     iosContent,
     imageSrc,
@@ -2183,6 +2677,8 @@ const MobilePushNew = ({
     (ev) => {
       const { value } = ev.target;
       setTemplateName(value);
+      // Update ref to always have the latest value
+      templateNameRef.current = value;
       const isInvalid = !value || value.trim() === "";
       setTemplateNameError(isInvalid);
       if (value && onEnterTemplateName) {
@@ -2443,6 +2939,66 @@ const MobilePushNew = ({
     };
   }, [handleSave]);
 
+  // Function to process carousel data and extract deep link information
+  const processCarouselDataForDeepLinks = useCallback((carouselData = []) => {
+    if (!carouselData || carouselData?.length === 0) {
+      return { deepLinkValue: "", deepLinkKeysValue: [], externalLinkValue: "" };
+    }
+
+    // Find the first carousel card with actionOnClick enabled
+    const activeCard = carouselData.find((card) => card?.buttons
+      && card?.buttons?.length > 0
+      && card?.buttons[0]?.actionOnClick);
+
+    if (!activeCard || !activeCard?.buttons || activeCard?.buttons?.length === 0) {
+      return { deepLinkValue: "", deepLinkKeysValue: [], externalLinkValue: "" };
+    }
+
+    const button = activeCard?.buttons[0];
+
+    if (button?.linkType === DEEP_LINK) {
+      const deepLinkValue = button?.deepLinkValue || "";
+      const deepLinkKeys = button.deepLinkKeys || [];
+
+      // Find matching deep link from available options
+      let finalDeepLinkValue = deepLinkValue;
+      if (deepLink?.length > 0 && deepLinkValue) {
+        // Try to find exact match first
+        const exactMatch = deepLink.find((link) => link.value === deepLinkValue);
+        if (exactMatch) {
+          finalDeepLinkValue = exactMatch.value;
+        } else {
+          // 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 the selected deep link option from dropdown, like other media types
+            finalDeepLinkValue = partialMatch.value;
+          } else {
+            // If no match found, return the original value (this handles custom deep links)
+            finalDeepLinkValue = deepLinkValue;
+          }
+        }
+      }
+
+      return {
+        deepLinkValue: finalDeepLinkValue,
+        deepLinkKeysValue: deepLinkKeys,
+        externalLinkValue: "",
+      };
+    } if (button?.linkType === EXTERNAL_LINK) {
+      return {
+        deepLinkValue: "",
+        deepLinkKeysValue: [],
+        externalLinkValue: button.externalLinkValue || "",
+      };
+    }
+
+    return { deepLinkValue: "", deepLinkKeysValue: [], externalLinkValue: "" };
+  }, [deepLink]);
+
+
   return (
     <CapSpin
       spinning={spin || editData?.editTemplateInProgress || fetchingLiquidValidation || getTemplateDetailsInProgress}