@capillarytech/creatives-library 8.0.283 → 8.0.285-alpha.0

package/constants/unified.js

@@ -43,7 +43,6 @@ export const HOSPITALITY_BASED_SCOPE = 'HOSPITALITY_BASED_SCOPE';
 export const REGISTRATION_CUSTOM_FIELD = 'Registration custom fields';
 export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
-export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
 export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
 export const SUPPORT_CK_EDITOR = 'SUPPORT_CK_EDITOR';
 export const CUSTOM_TAG = 'CustomTagMessage';

package/package.json

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

package/utils/common.js

@@ -22,7 +22,6 @@ import {
   BADGES_ISSUE,
   ENABLE_WECHAT,
   ENABLE_WEBPUSH,
-  LIQUID_SUPPORT,
   SUPPORT_CK_EDITOR,
   ENABLE_NEW_MPUSH
 } from '../constants/unified';
@@ -91,12 +90,6 @@ export const hasPromoFeature = Auth.hasFeatureAccess.bind(
   null,
   PROMO_ENGINE,
 );
-
-export const hasLiquidSupportFeature = Auth.hasFeatureAccess.bind(
-  null,
-  LIQUID_SUPPORT,
-);
-
 export const hasSupportCKEditor = Auth.hasFeatureAccess.bind(
   null,
   SUPPORT_CK_EDITOR,

package/utils/commonUtils.js

@@ -16,7 +16,6 @@ import {
   IOS,
 } from "../v2Containers/CreativesContainer/constants";
 import { GLOBAL_CONVERT_OPTIONS } from "../v2Components/FormBuilder/constants";
-import { checkSupport, extractNames, skipTags as defaultSkipTags, isInsideLiquidBlock } from "./tagValidations";
 import { SMS_TRAI_VAR } from '../v2Containers/SmsTrai/Edit/constants';
 export const apiMessageFormatHandler = (id, fallback) => (
   <FormattedMessage id={id} defaultMessage={fallback} />
@@ -146,7 +145,6 @@ export const validateLiquidTemplateContent = async (
     isLiquidFlow,
     forwardedTags = {},
     tabType,
-    skipTags = defaultSkipTags,
   } = options;
   const emptyBodyError = formatMessage(messages?.emailBodyEmptyError);
   const somethingWrongMsg = formatMessage(messages?.somethingWentWrong);
@@ -204,81 +202,6 @@ export const validateLiquidTemplateContent = async (
     });
     return false;
   }
-  // Extract and validate tags
-  const extractedLiquidTags = extractNames(result?.data || []);
-  // Get supported tags
-  const supportedLiquidTags = checkSupport(
-    result,
-    tagLookupMap,
-    eventContextTags,
-    isLiquidFlow,
-    forwardedTags
-  );
-  // Helper function to check if a tag appears only inside {% %} blocks
-  const isTagOnlyInsideLiquidBlocks = (tagName) => {
-    // Escape special regex characters in tag name, including dots
-    // Dots need to be escaped to match literally (item.name should match item.name, not item or name)
-    const escapedTagName = tagName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    
-    // First, check if tag appears in {% %} syntax itself (like "order.items" in "{% for item in order.items %}")
-    // This is a tag used in Liquid logic, not output, so it should always be skipped
-    // Match the tag name as a whole (with dots escaped), optionally surrounded by word boundaries or non-word chars
-    // For tags with dots, we match them directly; for simple tags, we use word boundaries
-    const hasDot = tagName.includes('.');
-    const liquidSyntaxPattern = hasDot
-      ? `{%[^%]*${escapedTagName}[^%]*%}`
-      : `{%[^%]*\\b${escapedTagName}\\b[^%]*%}`;
-    const liquidSyntaxRegex = new RegExp(liquidSyntaxPattern, 'g');
-    const liquidSyntaxMatches = Array.from(content.matchAll(liquidSyntaxRegex));
-    
-    // Find all occurrences of {{tagName}} in the content (output tags)
-    // Match patterns like: {{tagName}}, {{ tagName }}, {{tagName }}, {{ tagName}}
-    // Use non-word-boundary approach for tags with dots (item.name should match item.name, not item or name separately)
-    const outputTagRegex = new RegExp(`\\{\\{\\s*${escapedTagName}\\s*\\}\\}`, 'g');
-    const outputTagMatches = Array.from(content.matchAll(outputTagRegex));
-    const outputTagPositions = outputTagMatches.map((match) => match.index);
-    
-    // If tag appears in {% %} syntax, skip validation
-    if (liquidSyntaxMatches.length > 0) {
-      return true;
-    }
-    
-    // If no output tag matches found, don't skip validation
-    // The tag was extracted by the API, so it exists somewhere and should be validated
-    if (outputTagPositions.length === 0) {
-      return false;
-    }
-    
-    // Check if all output tag occurrences are inside {% %} blocks
-    // We check the position of {{ to see if it's inside a block
-    // Only skip validation if ALL occurrences are inside blocks
-    return outputTagPositions.every((tagIndex) => {
-      if (tagIndex === undefined || tagIndex === null) {
-        return false;
-      }
-      return isInsideLiquidBlock(content, tagIndex);
-    });
-  };
-  
-  // Find unsupported tags, excluding those that are only inside {% %} blocks
-  const unsupportedLiquidTags = extractedLiquidTags?.filter(
-    (tag) => !supportedLiquidTags?.includes(tag) 
-      && !skipTags(tag) 
-      && !isTagOnlyInsideLiquidBlocks(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;
 };
@@ -365,8 +288,8 @@ export const _validatePlatformSpecificContent = async (
 /**
  * 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
+ * @param {object} options - Options for validation (currentTab, onError, onSuccess, getLiquidTags, formatMessage, messages, tagLookupMap, eventContextTags, isLiquidFlow, forwardedTags, singleTab). skipTags and extractNames are no longer accepted.
+ * @returns {Promise<boolean>} - Promise that resolves to true when validation succeeds, false otherwise
  */
 export const validateMobilePushContent = async (formData, options) => {
   const {

package/utils/tagValidations.js

@@ -177,97 +177,118 @@ export const isInsideLiquidBlock = (content, tagIndex) => {
 };
 
 /**
- * Validates the tags based on the provided parameters.
- * @param {Object} params - The parameters for tag validation.
+ * Shared core for tag validation. Used by validateTags (tagValidations) and FormBuilder.validateTags.
+ * @param {Object} params
+ * @param {string} params.contentForBraceCheck - String to run validateIfTagClosed on.
+ * @param {string} params.contentForUnsubscribeScan - String to scan for {{...}} unsubscribe variants.
+ * @param {Array} [params.tags] - Tag definitions (for definition-based missing tags).
+ * @param {string} [params.currentModule] - Module context (e.g. 'default', 'outbound').
+ * @param {boolean} [params.isFullMode] - If true, skip unsubscribe checks.
+ * @param {Array} [params.initialMissingTags=null] - If set, use instead of computing from definitions.
+ * @param {function} [params.skipTagsFn=skipTags] - skipTags implementation.
+ * @param {boolean} [params.includeIsContentEmpty=false] - If true, response includes isContentEmpty: false.
+ * @returns {{ valid: boolean, missingTags: string[], unsupportedTags: string[], isBraceError: boolean }}
  */
-export const validateTags = ({
-  content,
-  tagsParam,
-  injectedTagsParams,
-  location,
-  tagModule,
-  eventContextTags,
+export const validateTagsCore = ({
+  contentForBraceCheck,
+  contentForUnsubscribeScan,
+  tags,
+  currentModule,
   isFullMode,
+  initialMissingTags = null,
+  skipTagsFn = skipTags,
+  includeIsContentEmpty = false,
 }) => {
-  const tags = tagsParam;
-  const injectedTags = transformInjectedTags(injectedTagsParams);
-  let currentModule = location?.query?.module ? location?.query?.module : DEFAULT;
-  if (tagModule) {
-    currentModule = tagModule;
-  }
   const response = {
     valid: true,
     missingTags: [],
     unsupportedTags: [],
     isBraceError: false,
+    ...(includeIsContentEmpty && { isContentEmpty: false }),
   };
-  // Mandatory-tags check: only when we have a tags list and are in library mode
+
   if (tags && tags.length && !isFullMode) {
-    lodashForEach(tags, ({
-      definition: {
-        supportedModules,
-        value,
-      },
-    }) => {
-      lodashForEach(supportedModules, (module) => {
-        if (module.mandatory && (currentModule === module.context)) {
-          if (content.indexOf(`{{${value}}}`) === -1) {
-            response.valid = false;
-            response.missingTags.push(value);
-          }
+    if (initialMissingTags == null) {
+      // Definition-based: same as original tagValidations (when caller does not pass initialMissingTags)
+      lodashForEach(tags, ({
+        definition: {
+          supportedModules,
+          value,
+        },
+      }) => {
+        if (value === 'unsubscribe') {
+          lodashForEach(supportedModules, (module) => {
+            if (module.mandatory && (currentModule === module.context)) {
+              if (contentForUnsubscribeScan.indexOf(`{{${value}}}`) === -1) {
+                response.missingTags.push(value);
+              }
+            }
+          });
         }
       });
-    });
-  }
-  // In library mode, always scan content for {{...}} and flag unsupported tags (even when tags list is empty)
-  if (!isFullMode && content) {
-    const regex = /{{[(A-Z\w+(\s\w+)*$\(\)@!#$%^&*~.,/\\]+}}/g;
-    let match = regex.exec(content);
+    } else {
+      response.missingTags = [...initialMissingTags];
+    }
+
+    const regex = /{{([^}]+)}}/g;
+    let match = regex.exec(contentForUnsubscribeScan);
     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) => {
-        if (tag?.definition?.value === tagValue) {
-          ifSupported = true;
+      const tagValue = match[1].trim();
+      const ifSkipped = skipTagsFn(tagValue);
+      if (ifSkipped && tagValue.indexOf('unsubscribe') !== -1) {
+        const missingTagIndex = response.missingTags.indexOf('unsubscribe');
+        if (missingTagIndex !== -1) {
+          response.missingTags.splice(missingTagIndex, 1);
         }
-      });
-      const ifSkipped = skipTags(tagValue);
-      if (ifSkipped) {
-        ifSupported = true;
-        const isUnsubscribeSkipped = tagValue.indexOf("unsubscribe") !== -1;
-        if (isUnsubscribeSkipped) {
-          const missingTagIndex = response.missingTags.indexOf("unsubscribe");
-          if (missingTagIndex !== -1) {
-            response.missingTags.splice(missingTagIndex, 1);
-          }
-        }
-      }
-      // Journey Event Context Tags support
-      eventContextTags?.forEach((tag) => {
-        if (tagValue === tag?.tagName) {
-          ifSupported = true;
-        }
-      });
-      ifSupported = ifSupported || checkIfSupportedTag(tagValue, injectedTags);
-      // 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) {
-        response.valid = true;
       }
+      match = regex.exec(contentForUnsubscribeScan);
     }
+
+    if (response.missingTags.length > 0) {
+      response.valid = false;
+    }
+  }
+
+  response.isBraceError = !validateIfTagClosed(contentForBraceCheck);
+  if (response.isBraceError) {
+    response.valid = false;
+  } else if (response.missingTags.length > 0) {
+    response.valid = false;
   }
-  response.isBraceError = !validateIfTagClosed(content);
-  // response should not be valid if there is unbalanced bracket error, as
-  // validations (eg button) are handled on valid property coming from the response.
-  response.isBraceError ? response.valid = false : response.valid = true;
   return response;
 };
 
+/**
+ * Validates the tags based on the provided parameters.
+ * @param {Object} params - The parameters for tag validation.
+ * @param {string} params.content - Content to validate.
+ * @param {Array} [params.tagsParam] - Tag definitions.
+ * @param {Object} [params.location] - Location with query.module.
+ * @param {string} [params.tagModule] - Override for current module context.
+ * @param {boolean} [params.isFullMode] - If true, skip unsubscribe checks.
+ * @returns {{ valid: boolean, missingTags: string[], unsupportedTags: string[], isBraceError: boolean }}
+ */
+export const validateTags = ({
+  content,
+  tagsParam,
+  location,
+  tagModule,
+  isFullMode,
+}) => {
+  const tags = tagsParam;
+  let currentModule = location?.query?.module ? location?.query?.module : DEFAULT;
+  if (tagModule) {
+    currentModule = tagModule;
+  }
+  return validateTagsCore({
+    contentForBraceCheck: content,
+    contentForUnsubscribeScan: content,
+    tags,
+    currentModule,
+    isFullMode,
+  });
+};
+
 /**
  * Checks if the given tag is supported based on the injected tags.
  * @param {string} checkingTag - The tag to check.

package/utils/tests/commonUtil.test.js

@@ -27,6 +27,11 @@ describe("validateLiquidTemplateContent", () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    formatMessage.mockImplementation((msg, vars) =>
+      vars && vars.unsupportedTags != null
+        ? `${msg?.id}:${vars.unsupportedTags}`
+        : (msg?.id ?? "unsupported")
+    );
   });
 
   it("calls onError for empty content", async () => {
@@ -43,7 +48,7 @@ describe("validateLiquidTemplateContent", () => {
       eventContextTags
     });
     expect(onError).toHaveBeenCalledWith({
-      standardErrors: [undefined],
+      standardErrors: ["empty"],
       liquidErrors: [],
       tabType: undefined
     });
@@ -86,9 +91,9 @@ describe("validateLiquidTemplateContent", () => {
     expect(onSuccess).not.toHaveBeenCalled();
   });
 
-  it("calls onError for unsupported tags", async () => {
+  it("calls onSuccess when API returns no errors and extracted tags (extracted tags are not validated)", async () => {
     const getLiquidTags = jest.fn((content, cb) =>
-      cb({ askAiraResponse: { errors: [], data: [{ name: "baz" }] }, isError: false })
+      cb({ askAiraResponse: { errors: [], data: [{ name: "foo" }] }, isError: false })
     );
     await validateLiquidTemplateContent("foo", {
       getLiquidTags,
@@ -99,15 +104,11 @@ describe("validateLiquidTemplateContent", () => {
       tagLookupMap,
       eventContextTags
     });
-    expect(onError).toHaveBeenCalledWith({
-      standardErrors: [],
-      liquidErrors: [undefined],
-      tabType: undefined
-    });
-    expect(onSuccess).not.toHaveBeenCalled();
+    expect(onSuccess).toHaveBeenCalledWith("foo", undefined);
+    expect(onError).not.toHaveBeenCalled();
   });
 
-  it("calls onSuccess for valid content", async () => {
+  it("calls onSuccess for valid content when API returns multiple extracted tags but no errors", async () => {
     const getLiquidTags = jest.fn((content, cb) =>
       cb({ askAiraResponse: { errors: [], data: [{ name: "foo" }, { name: "bar" }] }, isError: false })
     );
@@ -297,7 +298,7 @@ describe("validateLiquidTemplateContent", () => {
     expect(onSuccess).not.toHaveBeenCalled();
   });
 
-  it("should skip tags that appear in {% %} syntax (like order.items in for loop)", async () => {
+  it("calls onSuccess when API returns extracted tags but no errors (extracted tags are not validated)", async () => {
     const content = '{% for item in order.items %} Hello {% endfor %}';
     const getLiquidTags = jest.fn((content, cb) =>
       cb({ askAiraResponse: { errors: [], data: [{ name: "order.items" }] }, isError: false })
@@ -311,12 +312,11 @@ describe("validateLiquidTemplateContent", () => {
       tagLookupMap,
       eventContextTags
     });
-    // order.items appears in {% %} syntax, so it should be skipped and validation should pass
     expect(onSuccess).toHaveBeenCalledWith(content, undefined);
     expect(onError).not.toHaveBeenCalled();
   });
 
-  it("should skip tags that appear only inside {% %} blocks (like item.name in for loop)", async () => {
+  it("calls onSuccess when API returns extracted tags in {% %} blocks but no errors", async () => {
     const content = '{% for item in order.items %} {{ item.name }} - {{ item.quantity }} {% endfor %}';
     const getLiquidTags = jest.fn((content, cb) =>
       cb({ askAiraResponse: { errors: [], data: [{ name: "item.name" }, { name: "item.quantity" }] }, isError: false })
@@ -330,12 +330,11 @@ describe("validateLiquidTemplateContent", () => {
       tagLookupMap,
       eventContextTags
     });
-    // item.name and item.quantity appear inside {% for %} block, so they should be skipped
     expect(onSuccess).toHaveBeenCalledWith(content, undefined);
     expect(onError).not.toHaveBeenCalled();
   });
 
-  it("should validate tags that don't appear in content but are extracted by API", async () => {
+  it("calls onSuccess when API returns extracted tags not in content but no errors", async () => {
     const content = 'Some content without the tag';
     const getLiquidTags = jest.fn((content, cb) =>
       cb({ askAiraResponse: { errors: [], data: [{ name: "extractedTag" }] }, isError: false })
@@ -349,16 +348,11 @@ describe("validateLiquidTemplateContent", () => {
       tagLookupMap,
       eventContextTags
     });
-    // extractedTag doesn't appear in content but was extracted by API, should be validated
-    expect(onError).toHaveBeenCalledWith({
-      standardErrors: [],
-      liquidErrors: [undefined],
-      tabType: undefined
-    });
-    expect(onSuccess).not.toHaveBeenCalled();
+    expect(onSuccess).toHaveBeenCalledWith(content, undefined);
+    expect(onError).not.toHaveBeenCalled();
   });
 
-  it("should validate tags that appear outside {% %} blocks", async () => {
+  it("calls onSuccess when API returns tags outside {% %} but no errors", async () => {
     const content = '{{ outsideTag }} {% for item in order.items %} {{ item.name }} {% endfor %}';
     const getLiquidTags = jest.fn((content, cb) =>
       cb({ askAiraResponse: { errors: [], data: [{ name: "outsideTag" }, { name: "item.name" }] }, isError: false })
@@ -372,17 +366,71 @@ describe("validateLiquidTemplateContent", () => {
       tagLookupMap,
       eventContextTags
     });
-    // outsideTag appears outside {% %} block, so it should be validated
-    // item.name appears inside block, so it should be skipped
-    expect(onError).toHaveBeenCalledWith({
-      standardErrors: [],
-      liquidErrors: [undefined],
-      tabType: undefined
+    expect(onSuccess).toHaveBeenCalledWith(content, undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("calls onSuccess when API returns tag in {{ }} and no errors", async () => {
+    const content = 'Hello {{ unsupportedTag }} world';
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({ askAiraResponse: { errors: [], data: [{ name: "unsupportedTag" }] }, isError: false })
+    );
+    await validateLiquidTemplateContent(content, {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags
     });
-    expect(onSuccess).not.toHaveBeenCalled();
+    expect(onSuccess).toHaveBeenCalledWith(content, undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("calls onSuccess when API returns tag with spacing variants and no errors", async () => {
+    const content = '{{ tag}} and {{tag }} and {{ tag }}';
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({
+        askAiraResponse: {
+          errors: [],
+          data: [{ name: "tag" }]
+        },
+        isError: false
+      })
+    );
+    await validateLiquidTemplateContent(content, {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags
+    });
+    expect(onSuccess).toHaveBeenCalledWith(content, undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("calls onSuccess when API returns tag inside {% %} blocks but no errors", async () => {
+    const content = '{% for x in some.unsupported %} {{ x }} {% endfor %}';
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({ askAiraResponse: { errors: [], data: [{ name: "some.unsupported" }] }, isError: false })
+    );
+    await validateLiquidTemplateContent(content, {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags
+    });
+    expect(onSuccess).toHaveBeenCalledWith(content, undefined);
+    expect(onError).not.toHaveBeenCalled();
   });
 
-  it("should skip tags with dots that appear in {% %} syntax", async () => {
+  it("calls onSuccess when API returns tags with dots in {% %} syntax but no errors", async () => {
     const content = '{% assign myVar = order.items %} Some text';
     const getLiquidTags = jest.fn((content, cb) =>
       cb({ askAiraResponse: { errors: [], data: [{ name: "order.items" }] }, isError: false })
@@ -396,7 +444,6 @@ describe("validateLiquidTemplateContent", () => {
       tagLookupMap,
       eventContextTags
     });
-    // order.items appears in {% %} syntax, so it should be skipped
     expect(onSuccess).toHaveBeenCalledWith(content, undefined);
     expect(onError).not.toHaveBeenCalled();
   });