@capillarytech/creatives-library 8.0.131 → 8.0.133-alpha.0

package/package.json

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

package/utils/createMobilePushPayload.js

@@ -137,6 +137,7 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
     linkType,
     deepLinkValue,
     externalLinkValue,
+    deepLinkKeysValue = [],
   } = content || {};
 
   const platformContent = {
@@ -148,9 +149,21 @@ 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,
     };
   }
 
@@ -273,31 +286,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 }));
-  }
-  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,
-      });
-    }
+    // 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 }));
   }
-
   return customFields;
 }
 
@@ -307,7 +300,7 @@ 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('?') ? '&' : '?';

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/v2Components/TemplatePreview/_templatePreview.scss

@@ -653,7 +653,7 @@
             margin-top: 0.5rem; // 8px
     
             a {
-              color: $CAP_SECONDARY_base; // #2466ea
+              color: $FONT_COLOR_05; // #2466ea
               font-size: $FONT_SIZE_S; // 12px
               text-decoration: underline;
             }
@@ -1096,7 +1096,7 @@
           padding: $CAP_SPACE_12;
           .app-header {
             color: $CAP_G04; // #5D5D5D is closest to CAP_G04
-            font-weight: $FONT_WEIGHT_SEMIBOLD; // 600 maps to SEMIBOLD
+            font-weight: 600;
             padding: 0.285rem 0.571rem 0.285rem 0.571rem;
             display: flex;
             align-items: center;
@@ -1171,7 +1171,7 @@
             gap: $CAP_SPACE_08;
             .action {
               font-size: $FONT_SIZE_S;
-              font-weight: $FONT_WEIGHT_SEMIBOLD; // 600 maps to SEMIBOLD
+              font-weight: 600;
               color: $CAP_COLOR_03; // #1970DA maps to CAP_COLOR_03 (primary brand color)
               height: 1.25rem;
             }

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

@@ -629,13 +629,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 +650,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 +697,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 +712,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 +825,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 +846,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 +891,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 +908,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
@@ -1429,9 +1449,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 +1525,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 +1553,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,

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`,