@capillarytech/creatives-library 8.0.114 → 8.0.115

package/package.json

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

package/utils/commonUtils.js

@@ -1,9 +1,23 @@
 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";
+import { SMS_TRAI_VAR } from '../v2Containers/SmsTrai/Edit/constants';
 export const apiMessageFormatHandler = (id, fallback) => (
   <FormattedMessage id={id} defaultMessage={fallback} />
 );
@@ -83,3 +97,339 @@ export const transformCustomFieldsData = (customFields) => {
 };
 
 export const isTagIncluded = (value) => value && value.includes('{{') && value.includes('}}');
+
+
+/**
+ *
+ * @param {*} channel
+ * @param {*} formData
+ * @returns
+ */
+export const getChannelData = (channel, formData, baseLanguage) => {
+  switch (channel?.toUpperCase()) {
+    case EMAIL.toUpperCase():
+      return convert(
+        formData?.base?.[baseLanguage]?.["template-content"] || "",
+        GLOBAL_CONVERT_OPTIONS
+      );
+
+    case SMS:
+      return (
+        `${formData?.base?.["sms-editor"]} ${formData?.["template-name"]}` || ""
+      );
+    case SMS_TRAI_VAR?.toUpperCase():
+      return formData?.versions?.base?.["updated-sms-editor"].join(" ") || "";
+    default:
+      return JSON.stringify(formData);
+  }
+};
+
+/**
+ * Validates liquid template content for a given channel and options.
+ * @param {string} content - The content to validate.
+ * @param {string} channel - Channel type (e.g., EMAIL, SMS, MOBILE_PUSH).
+ * @param {object} options - Validation options and callbacks.
+ * @returns {Promise} Resolves to the validation result.
+ */
+export const validateLiquidTemplateContent = async (
+  content,
+  options
+) => {
+  const {
+    getLiquidTags,
+    formatMessage,
+    messages,
+    onError = () => {},
+    onSuccess = () => {},
+    tagLookupMap,
+    eventContextTags,
+    isLiquidFlow,
+    forwardedTags = {},
+    tabType,
+    skipTags = () => false,
+  } = options;
+  const emptyBodyError = formatMessage(messages?.emailBodyEmptyError);
+  const somethingWrongMsg = formatMessage(messages?.somethingWentWrong);
+  // Empty content check
+  
+  if (!content || content.trim() === "") {
+    onError({
+      standardErrors: [emptyBodyError],
+      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 {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 = [];
+    if (!validString) {
+      standardErrors = [emptyBodyError];
+    }
+    let liquidErrors;
+    if (result && Array.isArray(result?.errors)) {
+      liquidErrors = result?.errors?.map((error) => {
+        const message = typeof error?.message === "string"
+          ? error.message
+          : somethingWrongMsg;
+        return message;
+      });
+    } else {
+      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 {
+    singleTab,
+    onError: parentOnError, // The onError callback from the calling function (e.g., validateMobilePushContent)
+    ...commonVltcOptions // Other options like getLiquidTags, formatMessage, messages, currentTab, etc.
+  } = options;
+
+  let isAndroidValid = false;
+  let isIosValid = false;
+
+  // 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: () => {},
+  };
+  // Initialize error structure with platform-specific categories
+  const aggregatedErrors = {
+    standardErrors: {
+      [ANDROID]: [],
+      [IOS]: [],
+      generic: [],
+    },
+    liquidErrors: {
+      [ANDROID]: [],
+      [IOS]: [],
+      generic: [],
+    },
+  };
+
+  if (androidContent && (singleTab === ANDROID || !singleTab)) {
+
+    isAndroidValid = await validateLiquidTemplateContent(
+      androidContent,
+      { ...vltcCallOptions, tabType: ANDROID }
+    );
+  }
+
+  if (iosContent && (singleTab === IOS || !singleTab)) {
+
+    isIosValid = await validateLiquidTemplateContent(
+      iosContent,
+      { ...vltcCallOptions, tabType: IOS }
+    );
+  }
+  //if singleTab is android, then validate only android content and make ios valid by default
+  if (singleTab === ANDROID) {
+    isIosValid = true;
+  }
+  //if singleTab is ios, then validate only ios content and make android valid by default
+  if (singleTab === IOS) {
+    isAndroidValid = true;
+  }
+
+  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 }
+  );
+  const getContentToSubmit = () => {
+    if (currentTab === 1 && androidContent) return [androidContent, ANDROID?.toLowerCase()];
+    if (currentTab === 2 && iosContent) return [iosContent, IOS?.toLowerCase()];
+    if (androidContent) return [androidContent, ANDROID?.toLowerCase()];
+    if (iosContent) return [iosContent, IOS?.toLowerCase()];
+    return ["", ""];
+  };
+
+  if (overallSuccess) {
+    const [contentToSubmit, tabTypeToSubmit] = getContentToSubmit();
+    // Call the FINAL onSuccess only ONCE here
+    onSuccess(contentToSubmit, tabTypeToSubmit);
+    return true;
+  }
+  return false;
+};
+
+// Helper function to extract content for a platform
+export const extractContent = (platformData) => {
+  if (!platformData) return '';
+  const { title, message, ctas } = platformData;
+  return [
+    title,
+    message,
+    ...((ctas?.map((cta) => cta?.text || cta?.actionLink)) || []),
+  ].filter(Boolean).join(' ');
+};
+
+/**
+ * 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 baseContent = formData?.versions?.base?.content;
+    androidContent = extractContent(baseContent?.ANDROID);
+    iosContent = extractContent(baseContent?.IOS);
+  } catch (error) {
+    parseError = error; // Capture parsing error
+  }
+
+  // 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

@@ -19,6 +19,7 @@ const SUBTAGS = 'subtags';
  * @param {Object} tagObject - The tagLookupMap.
  */
 export const checkSupport = (response = {}, tagObject = {}, eventContextTags = [], isLiquidFlow = false, forwardedTags = {}) => {
+
   const supportedList = [];
   // Verifies the presence of the tag in the 'Add Labels' section.
   // Incase of journey event context the tags won't be available in the tagObject(tagLookupMap).
@@ -73,6 +74,7 @@ export const checkSupport = (response = {}, tagObject = {}, eventContextTags = [
 
   }
 
+
   return supportedList;
 };
 
@@ -115,6 +117,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 +146,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 +175,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 +186,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 +201,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;
       }
     }