@capillarytech/creatives-library 8.0.123 → 8.0.124

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.123",
+  "version": "8.0.124",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -231,7 +231,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,240 @@
+// 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,
+} = {}) {
+  // 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) {
+      // 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) {
+      // 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 || [],
+        }));
+      }
+
+      // 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 || [];
+    }
+
+    // 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)
+  function buildCustomFields(content) {
+    // If content.custom is already an array, return as is
+    if (Array.isArray(content?.custom)) return content?.custom;
+    // If it's an object, map to array
+    if (content?.custom && typeof content?.custom === 'object') {
+      return Object.entries(content?.custom).map(([key, value]) => ({ key, value }));
+    }
+    return [];
+  }
+
+  // Compose androidContent for legacy payload
+  const 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',
+  };
+
+  // Add main notification body CTA if actionOnClick is enabled
+  if (androidContent?.actionOnClick && (androidContent?.deepLinkValue || androidContent?.externalLinkValue)) {
+    const actionLink = androidContent?.linkType === EXTERNAL_LINK ? androidContent?.externalLinkValue : androidContent?.deepLinkValue;
+    androidLegacy.cta = {
+      type: androidContent.linkType === EXTERNAL_LINK ? EXTERNAL_URL : DEEP_LINK,
+      actionLink,
+    };
+  }
+
+  // Compose iosContent for legacy payload
+  const 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',
+  };
+
+  // Add main notification body CTA if actionOnClick is enabled
+  if (iosContent?.actionOnClick && (iosContent?.deepLinkValue || iosContent?.externalLinkValue)) {
+    const actionLink = iosContent?.linkType === EXTERNAL_LINK ? iosContent?.externalLinkValue : iosContent?.deepLinkValue;
+    iosLegacy.cta = {
+      type: iosContent?.linkType === EXTERNAL_LINK ? EXTERNAL_URL : DEEP_LINK,
+      actionLink,
+    };
+  }
+
+  // Compose the full payload in legacy format
+  const payload = {
+    versions: {
+      base: {
+        ANDROID: androidLegacy,
+        IOS: iosLegacy,
+      },
+    },
+    type: MOBILE_PUSH_CHANNEL,
+    name: trimmedTemplateName,
+    definition: {
+      accountId,
+      licenseCode,
+      mode: options?.mode || TEXT.toLowerCase(),
+      sourceType,
+      sameContent,
+    },
+  };
+
+  return payload;
+}
+
+export { createPayload };