@capillarytech/creatives-library 8.0.130 → 8.0.132

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/containers/Login/index.js

@@ -16,7 +16,6 @@ import * as actions from '../../containers/Cap/actions';
 import { capSaga } from '../Cap/sagas';
 import injectSaga from '../../utils/injectSaga';
 import { UserIsNotAuthenticated } from '../../utils/authWrapper';
-import loaderGif from '../../assets/loading_img.gif';
 const logo = require('./assets/images/capillary_logo.png');
 
 export class Login extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -84,7 +83,7 @@ export class Login extends React.Component { // eslint-disable-line react/prefer
           ? <div className="cap-loader-box">
             <img
               className="loader-image"
-              src={loaderGif}
+              src={"https://storage.crm.n.content-cdn.io/capillary/capillary_loading_logo.gif"}
               alt="Capillary"/>
           </div>
           : <Col className="login-box" style={{textAlign: 'center'}}>

package/package.json

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

package/services/api.js

@@ -281,6 +281,11 @@ export const createMobilePushTemplate = ({template}) => {
   const url = `${API_ENDPOINT}/templates/MOBILEPUSH`;
   return request(url, getAPICallObject('POST', template));
 };
+//this is for new mobile push templates
+export const createMobilePushTemplateV2 = (template) => {
+  const url = `${API_ENDPOINT}/templates/MOBILEPUSH`;
+  return request(url, getAPICallObject('POST', template));
+};
 
 export const duplicateTemplate = ({id, channel}) => {
   const url = `${API_ENDPOINT}/templates/duplicate/${id}/${channel}`;

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/createMobilePushPayload.js

@@ -0,0 +1,322 @@
+// 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, BIG_TEXT, BIG_PICTURE,
+  MANUAL_CAROUSEL,
+  AUTO_CAROUSEL,
+  FILMSTRIP_CAROUSEL,
+  ANDROID,
+  IOS,
+} from "../v2Containers/MobilePushNew/constants";
+import messages from '../v2Containers/MobilePushNew/messages';
+
+/**
+ * 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)
+ * - Supports platform-specific content (Android/iOS)
+ * - Handles CTA and custom fields
+ * @param {Object} params - The parameters for creating the payload
+ * @param {string} params.templateName - The name of the template
+ * @param {Object} params.androidContent - Android-specific content
+ * @param {Object} params.iosContent - iOS-specific content
+ * @param {Object} params.imageSrc - Image source URLs
+ * @param {Object} params.mpushVideoSrcAndPreview - Video source and preview URLs
+ * @param {Object} params.accountData - Account data for the payload
+ * @param {boolean} params.sameContent - Whether content is shared between platforms
+ * @param {Object} params.options - Additional options
+ * @param {Object} params.intl - Internationalization object for messages
+ */
+const createMobilePushPayload = ({
+  templateName,
+  androidContent,
+  iosContent,
+  imageSrc = {},
+  mpushVideoSrcAndPreview = {},
+  accountData,
+  sameContent = false,
+  options = {},
+  intl,
+}) => {
+  // Platform support checks must be at the top
+  const isAndroidSupported = accountData?.configs?.android === '1';
+  const isIosSupported = accountData?.configs?.ios === '1';
+
+  const {
+    accountId: accountIdFromAccountData, id, licenseCode: licenseCodeFromAccountData, sourceAccountIdentifier, sourceType: sourceTypeFromAccountData, sourceTypeName,
+  } = accountData || {};
+  // Validate account data
+  const accountId = accountIdFromAccountData || id;
+  const licenseCode = licenseCodeFromAccountData || sourceAccountIdentifier;
+  const sourceType = sourceTypeFromAccountData || sourceTypeName;
+
+  if (!accountId || !licenseCode || !sourceType) {
+    throw new Error(intl.formatMessage(messages.accountDataRequiredError));
+  }
+
+  // Validate template name
+  const trimmedTemplateName = templateName?.trim();
+  if (!trimmedTemplateName) {
+    throw new Error(intl.formatMessage(messages.templateNameEmptyError));
+  }
+
+  // Validate content
+  if (isAndroidSupported && (!androidContent?.title || !androidContent?.message)) {
+    throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'Android' }));
+  }
+  if (isIosSupported && (!iosContent?.title || !iosContent?.message)) {
+    throw new Error(intl.formatMessage(messages.contentValidationError, { platform: 'iOS' }));
+  }
+
+  // Ensure imageSrc has the required properties
+  const safeImageSrc = {
+    androidImageSrc: imageSrc?.androidImageSrc || '',
+    iosImageSrc: imageSrc?.iosImageSrc || '',
+  };
+
+  // Ensure mpushVideoSrcAndPreview has the required properties
+  const safeMpushVideoSrcAndPreview = {
+    mpushVideoSrc: mpushVideoSrcAndPreview?.mpushVideoSrc || '',
+    mpushVideoPreviewImg: mpushVideoSrcAndPreview?.mpushVideoPreviewImg || '',
+    duration: mpushVideoSrcAndPreview?.duration || 0,
+  };
+
+  // Build the payload
+  const payload = {
+    name: trimmedTemplateName,
+    definition: {
+      accountId,
+      licenseCode,
+      sourceType,
+      sameContent,
+      mode: options?.mode,
+    },
+    versions: {
+      base: {},
+    },
+  };
+
+  // Build Android content
+  if (isAndroidSupported) {
+    payload.versions.base.ANDROID = buildPlatformContent(
+      androidContent,
+      safeImageSrc.androidImageSrc,
+      safeMpushVideoSrcAndPreview,
+      ANDROID,
+    );
+  }
+
+  // Build iOS content
+  if (isIosSupported) {
+    payload.versions.base.IOS = buildPlatformContent(
+      iosContent,
+      safeImageSrc.iosImageSrc,
+      safeMpushVideoSrcAndPreview,
+      IOS,
+    );
+  }
+
+  return payload;
+};
+
+/**
+ * Builds platform-specific content for the payload
+ * @param {Object} content - Platform content (Android/iOS)
+ * @param {string} imageSrc - Image source URL
+ * @param {Object} mpushVideoSrcAndPreview - Video source and preview URLs
+ * @param {string} platform - Platform (ANDROID/IOS)
+ * @returns {Object} Platform-specific content
+ */
+function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platform) {
+  const {
+    title = '',
+    message = '',
+    expandableDetails = {},
+    actionOnClick,
+    linkType,
+    deepLinkValue,
+    externalLinkValue,
+  } = content || {};
+
+  const platformContent = {
+    title,
+    message,
+    expandableDetails: { ...expandableDetails },
+    custom: buildCustomFields(content),
+  };
+
+  // Handle CTA
+  if (actionOnClick) {
+    platformContent.cta = {
+      type: linkType === DEEP_LINK ? DEEP_LINK : EXTERNAL_URL,
+      actionLink: linkType === DEEP_LINK ? deepLinkValue : externalLinkValue,
+    };
+  }
+
+  // Handle media types
+  const style = content?.mediaType || expandableDetails?.style;
+
+  // Handle BIG_PICTURE media type
+  if (style === BIG_PICTURE || style === IMAGE) {
+    platformContent.expandableDetails.style = BIG_PICTURE;
+    platformContent.expandableDetails.image = imageSrc;
+  } else if (style === VIDEO) { // Handle VIDEO media type
+    platformContent.expandableDetails.style = VIDEO;
+    platformContent.expandableDetails.media = [{
+      url: mpushVideoSrcAndPreview.mpushVideoSrc || (content?.mediaList?.[0]?.url || ''),
+      text: content?.mediaList?.[0]?.text || '',
+      type: VIDEO,
+    }];
+  } else if (style === GIF) { // Handle GIF media type
+    platformContent.expandableDetails.style = GIF;
+    if (content?.mediaList?.[0]) {
+      // If mediaList exists, use it and preserve the original type
+      const { url = '', text = '', type = GIF } = content.mediaList[0];
+      platformContent.expandableDetails.media = [{
+        url,
+        text,
+        type: type.toLowerCase(),
+      }];
+    } else {
+      // If no mediaList but mpushVideoSrc exists, convert to VIDEO
+      platformContent.expandableDetails.media = [{
+        url: mpushVideoSrcAndPreview.mpushVideoSrc,
+        text: '',
+        type: GIF, // Backend expects GIF type for GIFs
+      }];
+    }
+  } else if ([CAROUSEL, MANUAL_CAROUSEL, AUTO_CAROUSEL, FILMSTRIP_CAROUSEL].includes(style)) { // Handle CAROUSEL media types
+    platformContent.expandableDetails.style = MANUAL_CAROUSEL;
+
+    // Handle carouselData
+    if (content?.carouselData?.length > 0) {
+      platformContent.expandableDetails.carouselData = content.carouselData.map((card) => {
+        const {
+          mediaType,
+          imageUrl,
+          videoSrc,
+          buttons,
+        } = card || {};
+
+        return {
+          mediaType: mediaType || IMAGE.toLowerCase(),
+          imageUrl: imageUrl || '',
+          videoSrc: videoSrc || '',
+          buttons: buttons ? buttons.map((button) => {
+            const { linkType: buttonLinkType, deepLinkKeys, deepLinkValue: buttonDeepLinkValue } = button || {};
+            if (buttonLinkType === DEEP_LINK && deepLinkKeys && buttonDeepLinkValue) {
+              const deepLinkKeysArray = Array.isArray(deepLinkKeys) ? deepLinkKeys : [deepLinkKeys];
+              const updatedDeepLinkValue = appendDeepLinkKeysToUrl(buttonDeepLinkValue, deepLinkKeysArray);
+
+              return {
+                ...button,
+                deepLinkValue: updatedDeepLinkValue,
+              };
+            }
+            return button;
+          }) : [],
+        };
+      });
+    }
+
+    // Handle mediaList
+    if (content?.mediaList && Array.isArray(content.mediaList) && content.mediaList.length > 0) {
+      platformContent.expandableDetails.media = content.mediaList.map((media) => {
+        const {
+          url,
+          text,
+          type,
+        } = media || {};
+
+        return {
+          url,
+          text: text || '',
+          type,
+        };
+      });
+    }
+  } else { // Handle BIG_TEXT media type (default)
+    platformContent.expandableDetails.style = BIG_TEXT;
+    platformContent.expandableDetails.message = message;
+  }
+
+  // Handle GIF media type
+  if (content?.mediaType === GIF) {
+    platformContent.expandableDetails = {
+      media: [{
+        url: mpushVideoSrcAndPreview?.mpushVideoSrc || (content?.mediaList?.[0]?.url || ''),
+        text: content?.mediaList?.[0]?.text || '',
+        type: GIF,
+      }],
+    };
+  }
+
+  // iOS-specific handling
+  if (platform === IOS) {
+    // iOS always needs a ctas array in expandableDetails
+    platformContent.expandableDetails.ctas = platformContent.expandableDetails.ctas || [];
+  }
+
+  return platformContent;
+}
+
+/**
+ * Builds custom fields array from content
+ * @param {Object} content - Platform content (Android/iOS)
+ * @returns {Array} Array of custom fields
+ */
+function buildCustomFields(content) {
+  let customFields = [];
+  const { custom = {} } = content || {};
+  // If content.custom is already an array, use it as base
+  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,
+      });
+    }
+  }
+
+  return customFields;
+}
+
+/**
+ * Appends deep link keys to URL
+ * @param {string} url - Base URL
+ * @param {Array} keys - Deep link keys
+ * @returns {string} URL with appended keys
+ */
+function appendDeepLinkKeysToUrl(url, keys) {
+  if (!url || !keys || !Array.isArray(keys) || keys?.length === 0) return url;
+
+  const separator = url.includes('?') ? '&' : '?';
+  const validKeys = keys.filter((key) => typeof key === 'string' && key?.length > 0);
+  if (validKeys?.length === 0) return url;
+
+  const keyParams = validKeys.map((key) => `${key}={{${key}}}`).join('&');
+
+  return `${url}${separator}${keyParams}`;
+}
+
+export default createMobilePushPayload;