@capillarytech/creatives-library 8.0.113 → 8.0.114-alpha.0

package/utils/commonUtils.js

@@ -1,9 +1,22 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import get from 'lodash/get';
-import { EMBEDDED } from '../v2Containers/Whatsapp/constants';
-import { EDIT, PREVIEW } from '../v2Containers/App/constants';
-
+import { convert } from "html-to-text";
+import { EMBEDDED } from "../v2Containers/Whatsapp/constants";
+import {
+  EDIT,
+  EMAIL,
+  INAPP,
+  PREVIEW,
+} from "../v2Containers/App/constants";
+import {
+  MOBILE_PUSH,
+  SMS,
+  ANDROID,
+  IOS,
+} from "../v2Containers/CreativesContainer/constants";
+import { GLOBAL_CONVERT_OPTIONS } from "../v2Components/FormBuilder/constants";
+import { checkSupport, extractNames } from "./tagValidations";
 export const apiMessageFormatHandler = (id, fallback) => (
   <FormattedMessage id={id} defaultMessage={fallback} />
 );
@@ -83,3 +96,376 @@ export const transformCustomFieldsData = (customFields) => {
 };
 
 export const isTagIncluded = (value) => value && value.includes('{{') && value.includes('}}');
+
+
+/**
+ *
+ * @param {*} channel
+ * @param {*} formData
+ * @returns
+ */
+export const getChannelData = (channel, formData) => {
+  switch (channel?.toUpperCase()) {
+    case EMAIL.toUpperCase():
+      return convert(
+        formData?.base?.en?.["template-content"] || "",
+        GLOBAL_CONVERT_OPTIONS
+      );
+
+    case SMS:
+      return (
+        `${formData?.base?.["sms-editor"]} ${formData?.["template-name"]}` || ""
+      );
+
+    default:
+      return JSON.stringify(formData);
+  }
+};
+
+/**
+ * Validates liquid template content and handles errors
+ * @param {string} content - The content to validate
+ * @param {string} channel - Channel type (EMAIL, SMS, MOBILE_PUSH, etc.)
+ * @param {object} options - Additional options for validation
+ * @param {function} options.getLiquidTags - Function to call to get liquid tags
+ * @param {function} options.formatMessage - Intl formatMessage function for i18n
+ * @param {object} options.messages - Messages for i18n
+ * @param {function} options.onError - Callback when error occurs
+ * @param {function} options.onSuccess - Callback when validation succeeds
+ * @param {object} options.tagLookupMap - Map of supported tags
+ * @param {array} options.eventContextTags - Context-specific tags
+ * @param {boolean} options.isLiquidFlow - Whether liquid flow is enabled
+ * @param {object} options.forwardedTags - Any forwarded tags (for Loyalty module)
+ * @param {string} options.tabType - For MPUSH: 'android' or 'ios'
+ * @param {number} options.currentTab - For MPUSH: current active tab (1 for Android, 2 for iOS)
+ * @param {function} options.skipTags - Function to determine if tags should be skipped
+ * @returns {Promise} - Promise that resolves to validation result
+ */
+export const validateLiquidTemplateContent = async (
+  content,
+  channel,
+  options
+) => {
+  const {
+    getLiquidTags,
+    formatMessage,
+    messages,
+    onError = () => {},
+    onSuccess = () => {},
+    tagLookupMap,
+    eventContextTags,
+    isLiquidFlow,
+    forwardedTags = {},
+    tabType,
+    skipTags = () => false,
+  } = options;
+
+  // Empty content check
+  if (!content || content.trim() === "") {
+    const errorMsg = formatMessage(messages.emailBodyEmptyError);
+    onError({
+      standardErrors: [errorMsg],
+      liquidErrors: [],
+      tabType,
+    });
+    return false;
+  }
+
+  // Await getLiquidTags as a promise if it doesn't already return one
+  const getLiquidTagsAsync = (inputContent) => new Promise((resolve) => {
+    getLiquidTags(inputContent, (result) => {
+      resolve(result);
+    });
+  });
+
+  const result = await getLiquidTagsAsync(content);
+  const validString = /\S/.test(content);
+
+  // Handle API errors or empty content
+  if (result?.errors?.length > 0 || !validString) {
+    let standardErrors = [];
+    if (!validString) {
+      const emptyBodyError = formatMessage(messages.emailBodyEmptyError);
+      standardErrors = [emptyBodyError];
+    }
+    let liquidErrors;
+    if (result && Array.isArray(result?.errors)) {
+      liquidErrors = result?.errors?.map((error) => {
+        const message = typeof error?.message === "string"
+          ? error.message
+          : formatMessage(messages.somethingWentWrong);
+        return message;
+      });
+    } else {
+      const somethingWrongMsg = formatMessage(messages.somethingWentWrong);
+      liquidErrors = [somethingWrongMsg];
+    }
+    onError({
+      standardErrors,
+      liquidErrors,
+      tabType,
+    });
+    return false;
+  }
+
+  // Extract and validate tags
+  const extractedLiquidTags = extractNames(result?.data || []);
+  // Get supported tags
+  const supportedLiquidTags = checkSupport(
+    result,
+    tagLookupMap,
+    eventContextTags,
+    isLiquidFlow,
+    forwardedTags
+  );
+  // Find unsupported tags
+  const unsupportedLiquidTags = extractedLiquidTags?.filter(
+    (tag) => !supportedLiquidTags?.includes(tag) && !skipTags(tag)
+  );
+  // Handle unsupported tags
+  if (unsupportedLiquidTags?.length > 0) {
+    const errorMsg = formatMessage(messages.unsupportedTagsValidationError, {
+      unsupportedTags: unsupportedLiquidTags.join(", "),
+    });
+    onError({
+      standardErrors: [],
+      liquidErrors: [errorMsg],
+      tabType,
+    });
+    return false;
+  }
+  // All validations passed
+  onSuccess(content, tabType);
+  return true;
+};
+
+// Internal helper function to validate platform-specific content
+export const _validatePlatformSpecificContent = async (
+  androidContent,
+  iosContent,
+  channel,
+  options // Contains parent's onError and other options for validateLiquidTemplateContent
+) => {
+  const {
+    onError: parentOnError, // The onError callback from the calling function (e.g., validateMobilePushContent)
+    ...commonVltcOptions // Other options like getLiquidTags, formatMessage, messages, currentTab, etc.
+  } = options;
+
+  let isAndroidValid = !androidContent; // True if no Android content, hence valid by default
+  let isIosValid = !iosContent; // True if no iOS content, hence valid by default
+
+  // Initialize error structure with platform-specific categories
+  const aggregatedErrors = {
+    standardErrors: {
+      [ANDROID]: [],
+      [IOS]: [],
+      generic: [],
+    },
+    liquidErrors: {
+      [ANDROID]: [],
+      [IOS]: [],
+      generic: [],
+    },
+  };
+
+  // This aggregator is passed to validateLiquidTemplateContent.
+  // It accumulates errors in the new structure and calls the parentOnError
+  const internalOnErrorAggregator = ({
+    standardErrors = [],
+    liquidErrors = [],
+    tabType: tabTypeFromVLTC,
+  }) => {
+    aggregatedErrors.standardErrors[tabTypeFromVLTC?.toUpperCase()].push(
+      ...standardErrors
+    );
+    aggregatedErrors.liquidErrors[tabTypeFromVLTC?.toUpperCase()].push(
+      ...liquidErrors
+    );
+    parentOnError(aggregatedErrors);
+  };
+
+  // Base options for calling validateLiquidTemplateContent
+  const vltcCallOptions = {
+    ...commonVltcOptions,
+    onError: internalOnErrorAggregator,
+    onSuccess: () => {},
+  };
+
+  if (androidContent) {
+    isAndroidValid = await validateLiquidTemplateContent(
+      androidContent,
+      channel,
+      { ...vltcCallOptions, tabType: ANDROID }
+    );
+  }
+
+  if (iosContent) {
+    isIosValid = await validateLiquidTemplateContent(
+      iosContent,
+      channel,
+      { ...vltcCallOptions, tabType: IOS }
+    );
+  }
+  return isAndroidValid && isIosValid; // Overall success
+};
+
+/**
+ * Validate Mobile Push content for both Android and iOS tabs
+ * @param {object} formData - Form data containing Android and iOS content
+ * @param {object} options - Options for validation
+ * @returns {Promise} - Promise that resolves when validation completes
+ */
+export const validateMobilePushContent = async (formData, options) => {
+  const {
+    currentTab,
+    onError, // This is the onError callback passed by the caller of validateMobilePushContent
+    onSuccess, // This is the FINAL success callback for MobilePush
+    ...restOptions // Options for validateLiquidTemplateContent (getLiquidTags, formatMessage, etc.)
+  } = options;
+  // Clear previous errors by calling the passed onError
+  onError({ standardErrors: [], liquidErrors: [] });
+
+  const androidContent = JSON.stringify(formData?.[0]);
+  const iosContent = JSON.stringify(formData?.[1]);
+  // Pass the original 'onError' from this function's arguments,
+  // 'currentTab', and other relevant options to the helper.
+  const overallSuccess = await _validatePlatformSpecificContent(
+    androidContent,
+    iosContent,
+    MOBILE_PUSH,
+    { ...restOptions, currentTab, onError }
+  );
+  if (overallSuccess) {
+    // Determine content to submit based on the *active* tab preference
+    let contentToSubmit = "";
+    let tabTypeToSubmit = "";
+    if (currentTab === 1 && androidContent) {
+      contentToSubmit = androidContent;
+      tabTypeToSubmit = "android";
+    } else if (currentTab === 2 && iosContent) {
+      contentToSubmit = iosContent;
+      tabTypeToSubmit = "ios";
+    } else if (androidContent) {
+      // Fallback
+      contentToSubmit = androidContent;
+      tabTypeToSubmit = "android";
+    } else if (iosContent) {
+      // Fallback
+      contentToSubmit = iosContent;
+      tabTypeToSubmit = "ios";
+    }
+    // Call the FINAL onSuccess only ONCE here
+    onSuccess(contentToSubmit, tabTypeToSubmit);
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Validate INAPP content for both Android and iOS
+ * @param {object} formData - Form data containing Android and iOS content
+ * @param {object} options - Options for validation
+ * @returns {Promise} - Promise that resolves when validation completes
+ */
+export const validateInAppContent = async (formData, options) => {
+  const {
+    onError, // This is the onError callback passed by the caller of validateInAppContent
+    onSuccess, // FINAL success callback
+    ...restOptions // Options for validateLiquidTemplateContent
+  } = options;
+
+  // Clear previous errors with new structure
+  onError({
+    standardErrors: {
+      [ANDROID]: [],
+      [IOS]: [],
+      generic: [],
+    },
+    liquidErrors: {
+      [ANDROID]: [],
+      [IOS]: [],
+      generic: [],
+    },
+  });
+
+  let androidContent = "";
+  let iosContent = "";
+  let parseError = null;
+
+  // Extract content
+  try {
+    const androidData = formData?.versions?.base?.content?.ANDROID;
+    if (androidData) {
+      androidContent = [
+        androidData.title,
+        androidData.message,
+        ...(androidData.ctas?.map((cta) => cta.text || cta.actionLink) || []),
+      ]
+        .filter(Boolean)
+        .join(" ");
+    }
+
+    const iosData = formData?.versions?.base?.content?.IOS;
+    if (iosData) {
+      iosContent = [
+        iosData.title,
+        iosData.message,
+        ...(iosData.ctas?.map((cta) => cta.text || cta.actionLink) || []),
+      ]
+        .filter(Boolean)
+        .join(" ");
+    }
+  } catch (error) {
+    parseError = error; // Capture parsing error
+  }
+
+  // Handle parsing errors immediately
+  if (parseError) {
+    onError({
+      standardErrors: {
+        generic: [
+          restOptions.formatMessage(restOptions.messages.somethingWentWrong),
+        ],
+        [ANDROID]: [],
+        [IOS]: [],
+      },
+      liquidErrors: {
+        generic: [],
+        [ANDROID]: [],
+        [IOS]: [],
+      },
+    });
+    return false;
+  }
+
+  // Check if *any* content exists
+  if (parseError) {
+    onError((prevErrors) => ({
+      ...prevErrors,
+      standardErrors: {
+        ...prevErrors.standardErrors,
+        generic: [
+          restOptions.formatMessage(restOptions.messages.somethingWentWrong),
+        ],
+      },
+    }));
+    return false;
+  }
+
+  // Pass the original 'onError' from this function's arguments
+  // and other relevant options to the helper.
+  const overallSuccess = await _validatePlatformSpecificContent(
+    androidContent,
+    iosContent,
+    INAPP,
+    { ...restOptions, onError }
+  );
+
+  if (overallSuccess) {
+    // Call FINAL onSuccess ONCE
+    onSuccess();
+    return true;
+  }
+  // Errors already reported via the 'onError' callback passed to _validatePlatformSpecificContent
+  return false;
+};

package/utils/tagValidations.js

@@ -115,6 +115,20 @@ export function extractNames(data) {
   return names;
 }
 
+// Helper to check if a tag is inside a {% ... %} block
+export const isInsideLiquidBlock = (content, tagIndex) => {
+  const blockRegex = /{%(.*?)%}/gs;
+  let match;
+  for (match = blockRegex.exec(content); match !== null; match = blockRegex.exec(content)) {
+    const blockStart = match.index;
+    const blockEnd = blockStart + match[0].length;
+    if (tagIndex >= blockStart && tagIndex < blockEnd) {
+      return true;
+    }
+  }
+  return false;
+};
+
 /**
  * Validates the tags based on the provided parameters.
  * @param {Object} params - The parameters for tag validation.
@@ -130,7 +144,6 @@ export const validateTags = ({
   const tags = tagsParam;
   const injectedTags = transformInjectedTags(injectedTagsParams);
   let currentModule = location?.query?.module ? location?.query?.module : DEFAULT;
-
   if (tagModule) {
     currentModule = tagModule;
   }
@@ -160,6 +173,7 @@ export const validateTags = ({
     let match = regex.exec(content);
     while (match !== null) {
       const tagValue = match[0].substring(indexOfEnd(match[0], '{{'), match[0].indexOf('}}'));
+      const tagIndex = match?.index;
       match = regex.exec(content);
       let ifSupported = false;
       lodashForEach(tags, (tag) => {
@@ -170,10 +184,10 @@ export const validateTags = ({
       const ifSkipped = skipTags(tagValue);
       if (ifSkipped) {
         ifSupported = true;
-        let isUnsubscribeSkipped = tagValue.indexOf("unsubscribe") != -1 ;
+        const isUnsubscribeSkipped = tagValue.indexOf("unsubscribe") !== -1;
         if (isUnsubscribeSkipped) {
           const missingTagIndex = response.missingTags.indexOf("unsubscribe");
-          if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
+          if (missingTagIndex !== -1) {
             response.missingTags.splice(missingTagIndex, 1);
           }
         }
@@ -185,11 +199,12 @@ export const validateTags = ({
         }
       });
       ifSupported = ifSupported || checkIfSupportedTag(tagValue, injectedTags);
-      if (!ifSupported) {
+      // Only add to unsupportedTags if not inside a {% ... %} block and does not contain a dot
+      if (!ifSupported && !isInsideLiquidBlock(content, tagIndex) && tagValue?.indexOf('.') === -1) {
         response.unsupportedTags.push(tagValue);
         response.valid = false;
       }
-      if (response.unsupportedTags.length == 0 && response.missingTags.length == 0 ) {
+      if (response.unsupportedTags.length === 0 && response.missingTags.length === 0) {
         response.valid = true;
       }
     }

package/utils/tests/authWrapper.test.js

@@ -76,7 +76,7 @@ describe("Authentication Redirects", () => {
 
     await waitFor(() => {
       expect(history.location.pathname).toEqual("/");
-    });
+    }, { timeout: 5000, interval: 100 });
   });
 
 
@@ -94,7 +94,7 @@ describe("Authentication Redirects", () => {
 
     await waitFor(() => {
       expect(history.location.pathname).toEqual("/some-route");
-    });
+    }, { timeout: 5000, interval: 100 });
   });
 });
 

package/utils/tests/cdnTransformation.test.js

@@ -1,15 +1,15 @@
+import * as nodeHtmlParser from 'node-html-parser';
+import Bugsnag from '@bugsnag/js';
 import * as cdnUtils from "../cdnTransformation";
 import * as mockdata from "./cdnTransformation.mockdata";
-import * as nodeHtmlParser from 'node-html-parser'
-import Bugsnag from '@bugsnag/js';
 import * as cdnTransformationHandler from './cdnTransformation.handler.mockdata';
 
-var bugsnagSpy;
-var localStorageMock;
-jest.setTimeout(180000);
+let bugsnagSpy;
+let localStorageMock;
+jest.setTimeout(30000);
 beforeEach(() => {
-  localStorageMock = (function () {
-    var store = {
+  localStorageMock = (() => {
+    let store = {
       CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
       CREATIVES_S3_BUCKET_PATH: "intouch_creative_assets",
       CREATIVES_CDN_BASE_URL: "https://storage.crm.n.content-cdn.io",
@@ -18,16 +18,16 @@ beforeEach(() => {
       S3_CDN_MAP: '{"crm-nightly-new-fileservice.s3.amazonaws.com":{"cdn_host":"storage.crm.n.content-cdn.io","bucket_path":"intouch_creative_assets"}, "crm-prod-new-fileservice.s3.amazonaws.com": { "cdn_host": "storage.crm.p.content-cdn.io", "bucket_path": "fileservice.p/intouch_creative_assets" }}',
     };
     return {
-      getItem: function (key) {
+      getItem(key) {
         return store[key];
       },
-      setItem: function (key, value) {
+      setItem(key, value) {
         store[key] = value.toString();
       },
-      clear: function () {
+      clear() {
         store = {};
       },
-      removeItem: function (key) {
+      removeItem(key) {
         delete store[key];
       },
     };
@@ -225,20 +225,21 @@ describe("cdnTransformationTests", () => {
     });
 
     it("should call bugsnag when parse() throws some unexpected error.", async () => {
-      const spy = jest.spyOn(nodeHtmlParser, 'parse').mockImplementation(()=>{
+      const parseSpy = jest.spyOn(nodeHtmlParser, 'parse').mockImplementation(() => {
         throw new Error();
-      })
+      });
       expect(await cdnUtils.updateImagesInHtml(mockdata.emailRawInput)).toEqual(mockdata.emailRawInput);
       expect(bugsnagSpy).toHaveBeenCalled();
+      parseSpy.mockRestore();
     });
 
-    it("Should update images in html, (api call made here to find s3 images file size which are not in window object)", async ()=>{
+    it("Should update images in html, (api call made here to find s3 images file sizes which are not in window object)", async () => {
       /**
        * Out of 3 images. One s3 url is in window object, one is cdn url and another is also s3 url but not in window object.
        */
       cdnTransformationHandler.server.listen();
       cdnTransformationHandler.server.use(cdnTransformationHandler.getS3FileSizesFromUrlSuccessResponse2);
-      localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY", "true");      
+      localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY", "true");
       localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_MAPPING", "[[30, 90], [80, 85], [150, 80], [400, 75], [600, 70], [1200, 65], [102400, 60]]");
       window[cdnUtils.CREATIVES_S3_ASSET_FILESIZES] = {
         "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/394c053f-309b-49fc-ba74-6e700b1.jpeg": 76800, //this image has quality 85 since file size less than 80kb