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

package/constants/unified.js

@@ -43,6 +43,7 @@ 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.285-alpha.0",
+  "version": "8.0.285",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/common.js

@@ -22,6 +22,7 @@ import {
   BADGES_ISSUE,
   ENABLE_WECHAT,
   ENABLE_WEBPUSH,
+  LIQUID_SUPPORT,
   SUPPORT_CK_EDITOR,
   ENABLE_NEW_MPUSH
 } from '../constants/unified';
@@ -90,6 +91,12 @@ 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,6 +16,7 @@ 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} />
@@ -145,6 +146,7 @@ export const validateLiquidTemplateContent = async (
     isLiquidFlow,
     forwardedTags = {},
     tabType,
+    skipTags = defaultSkipTags,
   } = options;
   const emptyBodyError = formatMessage(messages?.emailBodyEmptyError);
   const somethingWrongMsg = formatMessage(messages?.somethingWentWrong);
@@ -202,6 +204,81 @@ 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;
 };
@@ -288,8 +365,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 (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
+ * @param {object} options - Options for validation
+ * @returns {Promise} - Promise that resolves when validation completes
  */
 export const validateMobilePushContent = async (formData, options) => {
   const {

package/utils/tagValidations.js

@@ -177,118 +177,97 @@ export const isInsideLiquidBlock = (content, tagIndex) => {
 };
 
 /**
- * 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 }}
+ * Validates the tags based on the provided parameters.
+ * @param {Object} params - The parameters for tag validation.
  */
-export const validateTagsCore = ({
-  contentForBraceCheck,
-  contentForUnsubscribeScan,
-  tags,
-  currentModule,
+export const validateTags = ({
+  content,
+  tagsParam,
+  injectedTagsParams,
+  location,
+  tagModule,
+  eventContextTags,
   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) {
-    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);
-              }
-            }
-          });
+    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);
+          }
         }
       });
-    } else {
-      response.missingTags = [...initialMissingTags];
-    }
-
-    const regex = /{{([^}]+)}}/g;
-    let match = regex.exec(contentForUnsubscribeScan);
+    });
+  }
+  // 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);
     while (match !== null) {
-      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 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 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);
+          }
         }
       }
-      match = regex.exec(contentForUnsubscribeScan);
-    }
-
-    if (response.missingTags.length > 0) {
-      response.valid = false;
+      // 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;
+      }
     }
   }
-
-  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,11 +27,6 @@ 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 () => {
@@ -48,7 +43,7 @@ describe("validateLiquidTemplateContent", () => {
       eventContextTags
     });
     expect(onError).toHaveBeenCalledWith({
-      standardErrors: ["empty"],
+      standardErrors: [undefined],
       liquidErrors: [],
       tabType: undefined
     });
@@ -91,9 +86,9 @@ describe("validateLiquidTemplateContent", () => {
     expect(onSuccess).not.toHaveBeenCalled();
   });
 
-  it("calls onSuccess when API returns no errors and extracted tags (extracted tags are not validated)", async () => {
+  it("calls onError for unsupported tags", async () => {
     const getLiquidTags = jest.fn((content, cb) =>
-      cb({ askAiraResponse: { errors: [], data: [{ name: "foo" }] }, isError: false })
+      cb({ askAiraResponse: { errors: [], data: [{ name: "baz" }] }, isError: false })
     );
     await validateLiquidTemplateContent("foo", {
       getLiquidTags,
@@ -104,11 +99,15 @@ describe("validateLiquidTemplateContent", () => {
       tagLookupMap,
       eventContextTags
     });
-    expect(onSuccess).toHaveBeenCalledWith("foo", undefined);
-    expect(onError).not.toHaveBeenCalled();
+    expect(onError).toHaveBeenCalledWith({
+      standardErrors: [],
+      liquidErrors: [undefined],
+      tabType: undefined
+    });
+    expect(onSuccess).not.toHaveBeenCalled();
   });
 
-  it("calls onSuccess for valid content when API returns multiple extracted tags but no errors", async () => {
+  it("calls onSuccess for valid content", async () => {
     const getLiquidTags = jest.fn((content, cb) =>
       cb({ askAiraResponse: { errors: [], data: [{ name: "foo" }, { name: "bar" }] }, isError: false })
     );
@@ -298,7 +297,7 @@ describe("validateLiquidTemplateContent", () => {
     expect(onSuccess).not.toHaveBeenCalled();
   });
 
-  it("calls onSuccess when API returns extracted tags but no errors (extracted tags are not validated)", async () => {
+  it("should skip tags that appear in {% %} syntax (like order.items in for loop)", 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 })
@@ -312,11 +311,12 @@ 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("calls onSuccess when API returns extracted tags in {% %} blocks but no errors", async () => {
+  it("should skip tags that appear only inside {% %} blocks (like item.name in for loop)", 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,11 +330,12 @@ 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("calls onSuccess when API returns extracted tags not in content but no errors", async () => {
+  it("should validate tags that don't appear in content but are extracted by API", async () => {
     const content = 'Some content without the tag';
     const getLiquidTags = jest.fn((content, cb) =>
       cb({ askAiraResponse: { errors: [], data: [{ name: "extractedTag" }] }, isError: false })
@@ -348,11 +349,16 @@ describe("validateLiquidTemplateContent", () => {
       tagLookupMap,
       eventContextTags
     });
-    expect(onSuccess).toHaveBeenCalledWith(content, undefined);
-    expect(onError).not.toHaveBeenCalled();
+    // 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();
   });
 
-  it("calls onSuccess when API returns tags outside {% %} but no errors", async () => {
+  it("should validate tags that appear outside {% %} blocks", 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 })
@@ -366,71 +372,17 @@ describe("validateLiquidTemplateContent", () => {
       tagLookupMap,
       eventContextTags
     });
-    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).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
+    // 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();
+    expect(onSuccess).not.toHaveBeenCalled();
   });
 
-  it("calls onSuccess when API returns tags with dots in {% %} syntax but no errors", async () => {
+  it("should skip tags with dots that appear in {% %} syntax", async () => {
     const content = '{% assign myVar = order.items %} Some text';
     const getLiquidTags = jest.fn((content, cb) =>
       cb({ askAiraResponse: { errors: [], data: [{ name: "order.items" }] }, isError: false })
@@ -444,6 +396,7 @@ describe("validateLiquidTemplateContent", () => {
       tagLookupMap,
       eventContextTags
     });
+    // order.items appears in {% %} syntax, so it should be skipped
     expect(onSuccess).toHaveBeenCalledWith(content, undefined);
     expect(onError).not.toHaveBeenCalled();
   });