@capillarytech/creatives-library 8.0.128 → 8.0.129

package/containers/App/constants.js

@@ -18,6 +18,7 @@ export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 export const ENABLE_WECHAT = 'ENABLE_WECHAT';
 export const ENABLE_CUSTOMER_BARCODE_TAG = "ENABLE_CUSTOMER_BARCODE_TAG";
 export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = "EMAIL_UNSUBSCRIBE_TAG_MANDATORY";
+export const ENABLE_NEW_MPUSH = "ENABLE_NEW_MPUSH";
 
 export const CARD_RELATED_TAGS = [
   'card_series',

package/package.json

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

package/services/api.js

@@ -277,7 +277,7 @@ export const createWeChatTemplate = ({template}) => {
   return request(url, getAPICallObject('POST', template));
 };
 
-export const createMobilePushTemplate = ({template}) => {
+export const createMobilePushTemplate = (template) => {
   const url = `${API_ENDPOINT}/templates/MOBILEPUSH`;
   return request(url, getAPICallObject('POST', template));
 };

package/tests/integration/TemplateCreation/TemplateCreation.integration.test.js

@@ -32,7 +32,7 @@ jest.mock('@capillarytech/cap-ui-utils', () => ({
   },
 }));
 
-jest.setTimeout(30000);
+jest.setTimeout(60000);
 
 const initializeCreatives = () => { 
   const store = configureStore(mockInitialState, initialReducer, history);
@@ -51,6 +51,12 @@ beforeEach(() => {
   server.listen();
   localStorage.clear();
   localStorage.setItem('token', true);
+  
+  // Mock cap auth
+  window.capAuth = {
+    hasFeatureAccess: jest.fn().mockReturnValue(false),
+    isInitialized: jest.fn().mockReturnValue(true),
+  };
 });
 
 // clean up once the tests are done
@@ -62,7 +68,6 @@ afterAll(() => {
 });
 
 describe("Creatives testing template creation", () => {
-  jest.useFakeTimers();
   it("Should navigate from creatives home page and create template in RCS channel", async () => {
     initializeCreatives();
     const creativesScreen = await helper.getCreativesScreen();
@@ -93,7 +98,7 @@ describe("Creatives testing template creation", () => {
       name: globalMessages.email.defaultMessage,
     });
     await userEvent.click(whatsapp);
-    waitFor(() => {
+    await waitFor(() => {
       expect(
         creativesScreen.getByText(
           /Whatsapp accounts are not setup for your brand/i

package/tests/integration/TemplateCreation/api-response.js

@@ -20418,3 +20418,8 @@ export const tag = {
   }
 };
 
+export const cdnTransformationConfig = {
+  enabled: false,
+  transformations: [],
+};
+

package/tests/integration/TemplateCreation/msw-handler.js

@@ -4,73 +4,52 @@ import 'whatwg-fetch';
 import * as apiResponse from './api-response';
 
 import config from '../../../config/app';
+import { MOBILE_PUSH } from '../../../v2Containers/CreativesContainer/constants';
 const API_ENDPOINT = config.development.api_endpoint;
 const AUTH_ENDPOINT = config.development.auth_endpoint;
 const CAMPAIGNS_API_ENDPOINT = config.development.campaigns_api_org_endpoint;
 
 export const server = setupServer(
-    rest.options('*', (req, res, ctx) =>
-      res(
-        ctx.status(200),
-        ctx.set('access-control-allow-origin', '*'),
-        ctx.set('Access-Control-Allow-Headers', 'x-cap-org'),
-        ctx.set('Access-Control-Allow-Headers', 'x-cap-remote-user'),
-        ctx.set('Access-Control-Allow-Headers', 'x-cap-api-data-context-org-id'),
-        ctx.set('Access-Control-Allow-Headers', 'x-cap-api-auth-org-id'),
-      ),
-    ),
-    rest.get(`${AUTH_ENDPOINT}/auth/org/:orgId/users`, (req, res, ctx) => {
-      const { orgId } = req.params;
-      switch (orgId) {
-        case '50146':
-          return res(ctx.status(200), ctx.json(apiResponse.authOrgUsersReonData));
-      }
-    }),
+  rest.options('*', (req, res, ctx) => res(
+    ctx.status(200),
+    ctx.set('access-control-allow-origin', '*'),
+    ctx.set('Access-Control-Allow-Headers', 'x-cap-org'),
+    ctx.set('Access-Control-Allow-Headers', 'x-cap-remote-user'),
+    ctx.set('Access-Control-Allow-Headers', 'x-cap-api-data-context-org-id'),
+    ctx.set('Access-Control-Allow-Headers', 'x-cap-api-auth-org-id'),
+  )),
+  rest.get(`${AUTH_ENDPOINT}/auth/org/:orgId/users`, (req, res, ctx) => {
+    const { orgId } = req.params;
+    switch (orgId) {
+      case '50146':
+        return res(ctx.status(200), ctx.json(apiResponse.authOrgUsersReonData));
+    }
+  }),
 
-    rest.get(`${AUTH_ENDPOINT}/user`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.authUserReonData)),
-    ),
+  rest.get(`${AUTH_ENDPOINT}/user`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.authUserReonData))),
 
-    rest.get(`${AUTH_ENDPOINT}/org/users`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.authOrgUsersReonData)),
-    ),
-    rest.get(`${API_ENDPOINT}/templates/Sms`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.smsTemplates)),
-    ),
-    rest.get(`${API_ENDPOINT}/templates/v1/Sms`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.smsTemplates)),
-    ),
-    rest.get(`${API_ENDPOINT}/templates/Rcs`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.rcsTemplates)),
-    ),
-    rest.get(`${API_ENDPOINT}/templates/v1/Rcs`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.rcsTemplates)),
-    ),
-    rest.get(`${API_ENDPOINT}/meta/wecrm`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.viberAccount)),
-    ),
-    rest.get(`${API_ENDPOINT}/meta/wecrm`, (req, res, ctx) => 
-      res(ctx.status(200), ctx.json(apiResponse.whatsappAccount)),
-    ),
-    rest.get(`${API_ENDPOINT}/meta/wecrm`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.mpushAccount)),
-    ),
-    rest.get(`${API_ENDPOINT}/assets/image`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.gallery)),
-    ),
-    rest.get(`${API_ENDPOINT}/templates/v1/Line`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.lineTemplates)),
-    ),
-    rest.get(`${API_ENDPOINT}/templates/v1/Viber`, (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(apiResponse.viberTemplates)),
-  ),
-    rest.get(`${API_ENDPOINT}/templates/v1/Email`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.emailTemplates)),
-    ),
-    rest.get(`${API_ENDPOINT}/meta/TAG`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.tag)),
-    ),
-    rest.get(`${CAMPAIGNS_API_ENDPOINT}/meta/domainProperties`, (req, res, ctx) =>
-      res(ctx.status(200), ctx.json(apiResponse.domainProperties)),
-    ),
-  );
+  rest.get(`${AUTH_ENDPOINT}/org/users`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.authOrgUsersReonData))),
+  rest.get(`${API_ENDPOINT}/templates/Sms`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.smsTemplates))),
+  rest.get(`${API_ENDPOINT}/templates/v1/Sms`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.smsTemplates))),
+  rest.get(`${API_ENDPOINT}/templates/Rcs`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.rcsTemplates))),
+  rest.get(`${API_ENDPOINT}/templates/v1/Rcs`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.rcsTemplates))),
+  rest.get(`${API_ENDPOINT}/meta/wecrm`, (req, res, ctx) => {
+    const sourceName = req.url.searchParams.get('source_name');
+    switch (sourceName) {
+      case 'WHATSAPP':
+        return res(ctx.status(200), ctx.json(apiResponse.whatsappAccount));
+      case 'VIBER':
+        return res(ctx.status(200), ctx.json(apiResponse.viberAccount));
+      case MOBILE_PUSH:
+        return res(ctx.status(200), ctx.json(apiResponse.mpushAccount));
+      default:
+        return res(ctx.status(200), ctx.json(apiResponse.whatsappAccount));
+    }
+  }),
+  rest.get(`${API_ENDPOINT}/assets/image`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.gallery))),
+  rest.get(`${API_ENDPOINT}/templates/v1/Line`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.lineTemplates))),
+  rest.get(`${API_ENDPOINT}/templates/v1/Viber`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.viberTemplates))),
+  rest.get(`${API_ENDPOINT}/templates/v1/Email`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.emailTemplates))),
+  rest.get(`${API_ENDPOINT}/meta/TAG`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.tag))),
+  rest.get(`${CAMPAIGNS_API_ENDPOINT}/meta/domainProperties`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.domainProperties))),
+);

package/utils/common.js

@@ -22,6 +22,7 @@ import {
   BADGES_ISSUE,
   ENABLE_WECHAT,
   LIQUID_SUPPORT,
+  ENABLE_NEW_MPUSH,
 } from '../containers/App/constants';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -124,6 +125,12 @@ export const isEmailUnsubscribeTagMandatory = Auth.hasFeatureAccess.bind(
   null,
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
 );
+
+export const hasNewMobilePushFeatureEnabled = Auth.hasFeatureAccess.bind(
+  null,
+  ENABLE_NEW_MPUSH,
+);
+
 //filtering tags based on scope
 export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
     (tag) => !tagsToFilter?.includes(tag?.definition?.value)

package/utils/commonUtils.js

@@ -35,7 +35,7 @@ export const addBaseToTemplate = (template) => {
         ...template.versions,
         base: {
           ...history[0],
-          ...( get(template, 'versions.base.subject') ? {subject : get(template, 'versions.base.subject')} :{ subject:history?.[0]?.subject }),
+          ...( get(template, 'versions.base.subject') ? {subject: get(template, 'versions.base.subject')} : { subject: history?.[0]?.subject }),
         },
       },
     });
@@ -151,7 +151,7 @@ export const validateLiquidTemplateContent = async (
   const emptyBodyError = formatMessage(messages?.emailBodyEmptyError);
   const somethingWrongMsg = formatMessage(messages?.somethingWentWrong);
   // Empty content check
-  
+
   if (!content || content.trim() === "") {
     onError({
       standardErrors: [emptyBodyError],
@@ -170,7 +170,6 @@ export const validateLiquidTemplateContent = async (
 
   const {askAiraResponse: result, isError} = await getLiquidTagsAsync(content);
   const validString = /\S/.test(content);
-
   // Handle API errors or empty content
   if (result?.errors?.length > 0 || !validString || isError) {
     let standardErrors = [];
@@ -302,7 +301,6 @@ export const _validatePlatformSpecificContent = async (
   if (singleTab === IOS) {
     isAndroidValid = true;
   }
-
   return isAndroidValid && isIosValid; // Overall success
 };
 
@@ -340,7 +338,6 @@ export const validateMobilePushContent = async (formData, options) => {
     if (iosContent) return [iosContent, IOS?.toLowerCase()];
     return ["", ""];
   };
-
   if (overallSuccess) {
     const [contentToSubmit, tabTypeToSubmit] = getContentToSubmit();
     // Call the FINAL onSuccess only ONCE here
@@ -373,7 +370,6 @@ export const validateInAppContent = async (formData, options) => {
     onSuccess, // FINAL success callback
     ...restOptions // Options for validateLiquidTemplateContent
   } = options;
-
   // Clear previous errors with new structure
   onError({
     standardErrors: {

package/utils/createPayload.js

@@ -0,0 +1,405 @@
+// Utility to create the Mobile Push payload for rich media, with validation
+import { DEEP_LINK } from "../v2Components/CapInAppCTA/constants";
+import { EXTERNAL_URL } from "../v2Components/CapMpushCTA/constants";
+import {
+  IMAGE, VIDEO, GIF, CAROUSEL, TEXT, BIG_TEXT, BIG_PICTURE, MOBILE_PUSH_CHANNEL,
+  EXTERNAL_LINK,
+  ANDROID,
+  IOS,
+  MANUAL_CAROUSEL,
+  AUTO_CAROUSEL,
+  FILMSTRIP_CAROUSEL,
+} from "../v2Containers/MobilePushNew/constants";
+import { NONE } from "../v2Containers/Whatsapp/constants";
+/**
+ * Constructs the payload for Mobile Push, supporting both legacy and rich media as per backend contract.
+ * - Trims and validates templateName
+ * - Handles legacy and rich media (VIDEO, GIF, CAROUSEL, etc.)
+ * - Builds androidContent and iosContent with correct structure
+ * @param {Object} params - All required params
+ * @param {string} params.templateName
+ * @param {Object} params.androidContent
+ * @param {Object} params.iosContent
+ * @param {Object} params.accountData
+ * @param {Object} [params.options] - Optional extra options (ouId, actionId, etc.)
+ * @returns {Object} - Payload ready for backend
+ */
+function createPayload({
+  templateName, androidContent, iosContent, imageSrc = {}, mpushVideoSrcAndPreview = {}, accountData, options = {}, sameContent = false,
+} = {}) {
+  // Platform support checks must be at the top
+  const isAndroidSupported = accountData?.configs?.android === '1';
+  const isIosSupported = accountData?.configs?.ios === '1';
+  // Validate and trim template name
+  const trimmedTemplateName = (templateName || "").trim();
+  if (!trimmedTemplateName) {
+    throw new Error("Template name is empty or contains only white spaces");
+  }
+
+  // Validate androidContent and iosContent
+  if (androidContent && (!androidContent?.title || !androidContent?.message)) {
+    throw new Error("Android content must have title and message");
+  }
+
+  if (iosContent && (!iosContent?.title || !iosContent?.message)) {
+    throw new Error("iOS content must have title and message");
+  }
+
+  // Validate accountData
+  if (!accountData) {
+    throw new Error("Account data is required. Please select a MobilePush account.");
+  }
+
+  const accountId = accountData?.accountId || accountData?.id;
+  const licenseCode = accountData?.licenseCode || accountData?.sourceAccountIdentifier;
+  const sourceType = accountData?.sourceType || accountData?.sourceTypeName;
+
+  // Ensure imageSrc has the required properties
+  const safeImageSrc = {
+    androidImageSrc: imageSrc?.androidImageSrc || "",
+    iosImageSrc: imageSrc?.iosImageSrc || "",
+  };
+
+  // Helper to build expandableDetails for legacy and rich media
+  function buildExpandableDetails(content, contentImageSrc, platform = ANDROID) {
+    const style = content?.expandableDetails?.style || content?.mediaType || BIG_TEXT;
+    const expandableDetails = { style };
+
+    if (style === IMAGE || style === BIG_PICTURE) {
+      expandableDetails.style = BIG_PICTURE;
+      expandableDetails.message = content?.message;
+      expandableDetails.image = contentImageSrc || "";
+    } else if (style === VIDEO) {
+      expandableDetails.message = content?.message;
+      // Always build media array for VIDEO
+      let url = '';
+      let text = '';
+      let videoPreviewUrl = '';
+      if (mpushVideoSrcAndPreview?.mpushVideoSrc) {
+        url = mpushVideoSrcAndPreview?.mpushVideoSrc;
+        videoPreviewUrl = mpushVideoSrcAndPreview?.mpushVideoPreviewImg || '';
+      } else if (content?.mediaList && content?.mediaList[0]) {
+        const { url: mediaUrl = '', text: mediaText = '' } = content?.mediaList[0];
+        url = mediaUrl;
+        text = mediaText;
+      }
+      expandableDetails.media = [
+        {
+          url,
+          text,
+          type: VIDEO,
+          videoPreviewUrl,
+        },
+      ];
+    } else if (style === GIF) {
+      expandableDetails.message = content?.message;
+      // Handle GIF: preserve original type from mediaList if available, otherwise convert to VIDEO
+      let url = '';
+      let text = '';
+      let mediaType = VIDEO; // Default to VIDEO for backend compatibility
+
+      if (content?.mediaList && content?.mediaList[0]) {
+        // If mediaList exists, use it and preserve the original type
+        const { url: mediaUrl = '', text: mediaText = '', type: originalType = VIDEO } = content?.mediaList[0];
+        url = mediaUrl;
+        text = mediaText;
+        mediaType = originalType; // Preserve original type from mediaList
+      } else if (mpushVideoSrcAndPreview?.mpushVideoSrc) {
+        // If no mediaList but mpushVideoSrc exists, convert to VIDEO
+        url = mpushVideoSrcAndPreview?.mpushVideoSrc;
+        mediaType = VIDEO;
+      }
+
+      expandableDetails.media = [
+        {
+          url,
+          text,
+          type: mediaType,
+        },
+      ];
+    } else if (style === BIG_TEXT || style === TEXT || style === NONE) {
+      expandableDetails.style = BIG_TEXT;
+      expandableDetails.message = content?.message;
+    } else if ((style === CAROUSEL || style === MANUAL_CAROUSEL || style === AUTO_CAROUSEL || style === FILMSTRIP_CAROUSEL)) {
+      // Handle carousel data
+      expandableDetails.style = 'MANUAL_CAROUSEL';
+      expandableDetails.message = content?.message;
+
+      // Add carousel data if it exists
+      if (content?.carouselData && Array.isArray(content?.carouselData) && content?.carouselData.length > 0) {
+        expandableDetails.carouselData = content?.carouselData.map((card) => ({
+          mediaType: card.mediaType || 'image',
+          imageUrl: card.imageUrl || '',
+          videoSrc: card.videoSrc || '',
+          buttons: card.buttons ? card.buttons.map((button) => {
+            if (button.linkType === DEEP_LINK && button.deepLinkKeys && button.deepLinkValue) {
+              const deepLinkKeys = Array.isArray(button.deepLinkKeys) ? button.deepLinkKeys : [button.deepLinkKeys];
+              const updatedDeepLinkValue = appendDeepLinkKeysToUrl(button.deepLinkValue, deepLinkKeys);
+              return {
+                actionOnClick: button.actionOnClick,
+                linkType: button.linkType,
+                deepLinkValue: updatedDeepLinkValue,
+                externalLinkValue: button.externalLinkValue,
+                // deepLinkKeys property removed - not expected by backend
+              };
+            }
+            return {
+              actionOnClick: button.actionOnClick,
+              linkType: button.linkType,
+              deepLinkValue: button.deepLinkValue,
+              externalLinkValue: button.externalLinkValue,
+              // deepLinkKeys property removed - not expected by backend
+            };
+          }) : [],
+        }));
+      }
+
+      // Handle mediaList for carousel (used in tests and some scenarios)
+      if (content?.mediaList && Array.isArray(content?.mediaList) && content?.mediaList.length > 0) {
+        expandableDetails.media = content?.mediaList.map((m) => ({
+          url: m.url,
+          text: m.text || "",
+          type: m.type,
+        }));
+      }
+    } else if ([GIF].includes(style) && content?.mediaList) {
+      expandableDetails.media = (content?.mediaList || []).map((m) => ({
+        url: m.url,
+        text: m.text || "",
+        type: m.type,
+      }));
+    }
+
+    // iOS always needs ctas array
+    if (platform === IOS) {
+      expandableDetails.ctas = content?.expandableDetails?.ctas || [];
+    }
+
+    // Process button CTAs to append deep link keys as query parameters
+    if (content?.expandableDetails?.ctas && Array.isArray(content.expandableDetails.ctas)) {
+      expandableDetails.ctas = content.expandableDetails.ctas.map((cta) => {
+        if (cta.type === DEEP_LINK && cta.deepLinkKeys && cta.actionLink) {
+          const deepLinkKeys = Array.isArray(cta.deepLinkKeys) ? cta.deepLinkKeys : [cta.deepLinkKeys];
+          const updatedActionLink = appendDeepLinkKeysToUrl(cta.actionLink, deepLinkKeys);
+          return {
+            actionText: cta.actionText,
+            type: cta.type,
+            actionLink: updatedActionLink,
+            // deepLinkKeys property removed - not expected by backend
+          };
+        }
+        return {
+          actionText: cta.actionText,
+          type: cta.type,
+          actionLink: cta.actionLink,
+          // deepLinkKeys property removed - not expected by backend
+        };
+      });
+    }
+
+    // Add any additional expandableDetails fields
+    if (content?.expandableDetails) {
+      Object.entries(content?.expandableDetails).forEach(([k, v]) => {
+        if (!(k in expandableDetails)) expandableDetails[k] = v;
+      });
+    }
+    return expandableDetails;
+  }
+
+  // Helper to build custom fields array (legacy)
+  // Helper function to append deep link keys as query parameters
+  function appendDeepLinkKeysToUrl(baseUrl, deepLinkKeys) {
+    if (!baseUrl || !deepLinkKeys || deepLinkKeys.length === 0) {
+      return baseUrl;
+    }
+
+    try {
+      const url = new URL(baseUrl);
+      deepLinkKeys.forEach((key) => {
+        if (key) {
+          url.searchParams.set(key, key);
+        }
+      });
+      return url.toString();
+    } catch (error) {
+      // If URL parsing fails, append as query string manually
+      const separator = baseUrl.includes('?') ? '&' : '?';
+      const queryParams = deepLinkKeys
+        .filter((key) => key)
+        .map((key) => `${key}=${key}`)
+        .join('&');
+      return queryParams ? `${baseUrl}${separator}${queryParams}` : baseUrl;
+    }
+  }
+
+  function buildCustomFields(content) {
+    let customFields = [];
+
+    // If content.custom is already an array, use it as base
+    if (Array.isArray(content?.custom)) {
+      customFields = [...content.custom];
+    }
+    // If it's an object, map to array
+    else if (content?.custom && typeof content?.custom === 'object') {
+      customFields = Object.entries(content?.custom).map(([key, value]) => ({ key, value }));
+    }
+
+    // Add deepLinkKeys to custom fields if it exists
+    if (content?.deepLinkKeysValue && content?.linkType === DEEP_LINK) {
+      if (Array.isArray(content.deepLinkKeysValue)) {
+        // Handle array of deep link keys
+        content.deepLinkKeysValue.forEach((key) => {
+          if (key) {
+            customFields.push({
+              key,
+              value: key,
+            });
+          }
+        });
+      } else if (typeof content.deepLinkKeysValue === 'string' && content.deepLinkKeysValue) {
+        // Handle single string value (backward compatibility)
+        customFields.push({
+          key: content.deepLinkKeysValue,
+          value: content.deepLinkKeysValue,
+        });
+      }
+    }
+
+    // Add carousel button deep link keys to custom fields
+    if (content?.carouselData && Array.isArray(content.carouselData)) {
+      content.carouselData.forEach((card) => {
+        if (card.buttons && Array.isArray(card.buttons)) {
+          card.buttons.forEach((button) => {
+            if (button.linkType === DEEP_LINK && button.deepLinkKeys) {
+              if (Array.isArray(button.deepLinkKeys)) {
+                // Handle array of deep link keys
+                button.deepLinkKeys.forEach((key) => {
+                  if (key) {
+                    customFields.push({
+                      key,
+                      value: key,
+                    });
+                  }
+                });
+              } else if (typeof button.deepLinkKeys === 'string' && button.deepLinkKeys) {
+                // Handle single string value (backward compatibility)
+                customFields.push({
+                  key: button.deepLinkKeys,
+                  value: button.deepLinkKeys,
+                });
+              }
+            }
+          });
+        }
+      });
+    }
+
+    return customFields;
+  }
+
+  // Compose androidContent for legacy payload
+  let androidLegacy;
+  if (isAndroidSupported && isValidContent(androidContent)) {
+    androidLegacy = {
+      luid: "{{luid}}",
+      cuid: "{{cuid}}",
+      communicationId: "{{communicationId}}",
+      title: androidContent.title,
+      message: androidContent.message,
+      expandableDetails: buildExpandableDetails(androidContent, safeImageSrc.androidImageSrc),
+      custom: buildCustomFields(androidContent),
+      type: androidContent.mediaType,
+      deviceType: 'ANDROID',
+    };
+    if (androidContent?.actionOnClick && (androidContent?.deepLinkValue || androidContent?.externalLinkValue)) {
+      let actionLink = androidContent?.linkType === EXTERNAL_LINK ? androidContent?.externalLinkValue : androidContent?.deepLinkValue;
+      
+      // Append deep link keys as query parameters for deep links
+      if (androidContent?.linkType === DEEP_LINK && androidContent?.deepLinkKeysValue && androidContent.deepLinkKeysValue.length > 0) {
+        actionLink = appendDeepLinkKeysToUrl(actionLink, androidContent.deepLinkKeysValue);
+      }
+      
+      androidLegacy.cta = {
+        type: androidContent.linkType === EXTERNAL_LINK ? EXTERNAL_URL : DEEP_LINK,
+        actionLink,
+      };
+    }
+  }
+
+  // Compose iosContent for legacy payload
+  let iosLegacy;
+  if (isIosSupported && isValidContent(iosContent)) {
+    iosLegacy = {
+      luid: "{{luid}}",
+      cuid: "{{cuid}}",
+      communicationId: "{{communicationId}}",
+      title: iosContent.title,
+      message: iosContent.message,
+      expandableDetails: buildExpandableDetails(iosContent, safeImageSrc.iosImageSrc, 'IOS'),
+      custom: buildCustomFields(iosContent),
+      type: iosContent.mediaType,
+      deviceType: 'IOS',
+    };
+    if (iosContent?.actionOnClick && (iosContent?.deepLinkValue || iosContent?.externalLinkValue)) {
+      let actionLink = iosContent?.linkType === EXTERNAL_LINK ? iosContent?.externalLinkValue : iosContent?.deepLinkValue;
+      
+      // Append deep link keys as query parameters for deep links
+      if (iosContent?.linkType === DEEP_LINK && iosContent?.deepLinkKeysValue && iosContent.deepLinkKeysValue.length > 0) {
+        actionLink = appendDeepLinkKeysToUrl(actionLink, iosContent.deepLinkKeysValue);
+      }
+      
+      iosLegacy.cta = {
+        type: iosContent?.linkType === EXTERNAL_LINK ? EXTERNAL_URL : DEEP_LINK,
+        actionLink,
+      };
+    }
+  }
+
+  // Helper to check if content is non-empty and valid
+  function isValidContent(content) {
+    return content && typeof content === 'object' && content.title && content.message;
+  }
+
+  // Determine platform support from accountData
+  // const isAndroidSupported = accountData?.configs?.android === '1';
+  // const isIosSupported = accountData?.configs?.ios === '1';
+
+  if (isAndroidSupported && (!androidContent || !androidContent?.title || !androidContent?.message)) {
+    console.error('Android content missing or invalid:', androidContent);
+    throw new Error("Android content must have title and message");
+  }
+  if (isIosSupported && (!iosContent || !iosContent?.title || !iosContent?.message)) {
+    console.error('iOS content missing or invalid:', iosContent);
+    throw new Error("iOS content must have title and message");
+  }
+
+  // Compose the full payload in legacy format
+  const versionsBase = {};
+  if (androidLegacy) versionsBase.ANDROID = androidLegacy;
+  if (iosLegacy) versionsBase.IOS = iosLegacy;
+
+  // Fallback template name to platform title if not provided
+  let finalTemplateName = trimmedTemplateName;
+  if (!finalTemplateName) {
+    finalTemplateName = (androidContent && androidContent.title) || (iosContent && iosContent.title) || '';
+  }
+
+  const payload = {
+    versions: {
+      base: versionsBase,
+    },
+    type: MOBILE_PUSH_CHANNEL,
+    name: finalTemplateName,
+    definition: {
+      accountId,
+      licenseCode,
+      mode: options?.mode || TEXT.toLowerCase(),
+      sourceType,
+      sameContent,
+    },
+  };
+
+  return payload;
+}
+
+export { createPayload };