@capillarytech/creatives-library 8.0.231 → 8.0.232

package/package.json

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

package/utils/commonUtils.js

@@ -16,7 +16,7 @@ import {
   IOS,
 } from "../v2Containers/CreativesContainer/constants";
 import { GLOBAL_CONVERT_OPTIONS } from "../v2Components/FormBuilder/constants";
-import { checkSupport, extractNames, skipTags as defaultSkipTags } from "./tagValidations";
+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} />
@@ -204,9 +204,57 @@ export const validateLiquidTemplateContent = async (
     isLiquidFlow,
     forwardedTags
   );
-  // Find unsupported tags
+  // 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)
+    (tag) => !supportedLiquidTags?.includes(tag) 
+      && !skipTags(tag) 
+      && !isTagOnlyInsideLiquidBlocks(tag)
   );
   // Handle unsupported tags
   if (unsupportedLiquidTags?.length > 0) {

package/utils/tagValidations.js

@@ -19,7 +19,6 @@ 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).
@@ -40,7 +39,7 @@ export const checkSupport = (response = {}, tagObject = {}, eventContextTags = [
     let updatedChildName = childName;
     let updatedWithoutDotChildName = childName;
     if (childName?.includes(".")) {
-      updatedChildName = "." + childName?.split(".")?.[1];
+      updatedChildName = `.${childName?.split(".")?.[1]}`;
       updatedWithoutDotChildName = childName?.split(".")?.[1];
     }
     if (tagObject?.[parentTag]) {
@@ -71,7 +70,6 @@ export const checkSupport = (response = {}, tagObject = {}, eventContextTags = [
     if (item?.children?.length) {
       processChildren(item?.name, item?.children);
     }
-
   }
 
 
@@ -80,19 +78,19 @@ export const checkSupport = (response = {}, tagObject = {}, eventContextTags = [
 
 const handleForwardedTags = (forwardedTags) => {
   const result = [];
-  Object.keys(forwardedTags).forEach(key => {
+  Object.keys(forwardedTags).forEach((key) => {
     result.push(key); // Add the main key to the result array
-    
+
     // Check if there are subtags for the current key
     if (forwardedTags[key].subtags) {
       // If subtags exist, add all subtag keys to the result array
-      Object.keys(forwardedTags[key].subtags).forEach(subkey => {
-          result.push(subkey);
+      Object.keys(forwardedTags[key].subtags).forEach((subkey) => {
+        result.push(subkey);
       });
     }
   });
   return result;
-}
+};
 
 /**
  * Extracts the names from the given data.
@@ -118,17 +116,64 @@ export function extractNames(data) {
 }
 
 // Helper to check if a tag is inside a {% ... %} block
+// Handles all Liquid block types: {% %}, {%- -%}, {%- %}, {% -%}
+// Content inside {% %} blocks can contain any dynamic tags and should not be validated
 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;
-    }
+  if (!content || tagIndex < 0 || tagIndex >= content.length) {
+    return false;
+  }
+
+  // Check if tagIndex is at the start of a {% block
+  // Need to check a few characters ahead to catch {% patterns
+  const checkWindow = content.substring(Math.max(0, tagIndex - 1), Math.min(content.length, tagIndex + 3));
+  if (/{%-?/.test(checkWindow) && content.substring(tagIndex, tagIndex + 2) === '{%') {
+    return true;
   }
-  return false;
+
+  // Check content up to tagIndex to see if we're inside any {% %} block
+  // We need to properly handle Liquid tags:
+  // - Block opening tags: {% for %}, {% if %}, {% unless %}, {% case %}, {% capture %}, etc.
+  //   These OPEN a block that needs to be closed with an "end" tag
+  // - Block closing tags: {% endfor %}, {% endif %}, {% endunless %}, etc.
+  //   These CLOSE a block opened by a corresponding opening tag
+  // - Self-contained tags: {% assign %}, {% comment %}, etc.
+  //   These are blocks themselves (from {% to %})
+  const contentBeforeTag = content.substring(0, tagIndex);
+
+  // Regex to match Liquid block opening tags (for, if, unless, case, capture, tablerow, raw, comment)
+  // These tags OPEN a block that needs to be closed with an "end" tag
+  const blockOpeningTags = ['for', 'if', 'unless', 'case', 'capture', 'tablerow', 'raw', 'comment'];
+  const blockOpeningPattern = blockOpeningTags.map(tag => `\\b${tag}\\b`).join('|');
+  const blockOpeningRegex = new RegExp(`{%-?\\s*(${blockOpeningPattern})[^%]*%}`, 'gi');
+
+  // Regex to match Liquid block closing tags (endfor, endif, endunless, endcase, endcapture, etc.)
+  const blockClosingTags = ['endfor', 'endif', 'endunless', 'endcase', 'endcapture', 'endtablerow', 'endraw', 'endcomment'];
+  const blockClosingPattern = blockClosingTags.map(tag => `\\b${tag}\\b`).join('|');
+  const blockClosingRegex = new RegExp(`{%-?\\s*(${blockClosingPattern})[^%]*%}`, 'gi');
+
+  // Find all block opening tags before tagIndex
+  const blockOpenings = Array.from(contentBeforeTag.matchAll(blockOpeningRegex), (match) => match.index);
+
+  // Find all block closing tags before tagIndex
+  const blockClosings = Array.from(contentBeforeTag.matchAll(blockClosingRegex), (match) => match.index);
+
+  // Count unmatched opening blocks (for, if, etc.)
+  const openBlockCount = blockOpenings.length - blockClosings.length;
+
+  // Also check for self-contained tags (assign, etc.) that create blocks from {% to %}
+  // These are any {% %} tags that are not block-opening or block-closing tags
+  const allBlockStarts = /{%-?/g;
+  const allBlockEnds = /-?%}/g;
+  const allStarts = Array.from(contentBeforeTag.matchAll(allBlockStarts), (match) => match.index);
+  const allEnds = Array.from(contentBeforeTag.matchAll(allBlockEnds), (match) => match.index);
+
+  // Check if we're inside a self-contained tag (more {% than %} before tagIndex, excluding block tags)
+  const selfContainedCount = allStarts.length - allEnds.length;
+
+  // We're inside a block if:
+  // 1. We're inside an unclosed block-opening tag (for, if, etc.), OR
+  // 2. We're inside a self-contained tag (assign, etc.)
+  return openBlockCount > 0 || selfContainedCount > 0;
 };
 
 /**
@@ -155,7 +200,7 @@ export const validateTags = ({
     unsupportedTags: [],
     isBraceError: false,
   };
-  if(tags && tags.length) {
+  if (tags && tags.length) {
     lodashForEach(tags, ({
       definition: {
         supportedModules,
@@ -216,7 +261,7 @@ export const validateTags = ({
   // validations (eg button) are handled on valid property coming from the response.
   response.isBraceError ? response.valid = false : response.valid = true;
   return response;
-}
+};
 
 /**
  * Checks if the given tag is supported based on the injected tags.
@@ -233,14 +278,14 @@ export const checkIfSupportedTag = (checkingTag, injectedTags) => {
       result = true;
     }
   });
-  
+
   return result;
-}
+};
 
 const indexOfEnd = (targetString, string) => {
-  let io = targetString.indexOf(string);
+  const io = targetString.indexOf(string);
   return io == -1 ? -1 : io + string.length;
-}
+};
 
 export const skipTags = (tag) => {
   // If the tag contains the word "entryTrigger.", then it's an event context tag and should not be skipped.
@@ -268,35 +313,33 @@ export const transformInjectedTags = (tags) => {
     if (subKey !== '') {
       temp['tag-header'] = true;
       if (subKey !== SUBTAGS) {
-        temp.subtags =lodashCloneDeep(temp[subKey]);
+        temp.subtags = lodashCloneDeep(temp[subKey]);
         delete temp[subKey];
       }
       temp.subtags = transformInjectedTags(temp.subtags);
     }
   });
   return tags;
-}
+};
 
 //checks if the opening curly brackets have corresponding closing brackets
 export const validateIfTagClosed = (value) => {
   if (value.includes("{{{{") || value.includes("}}}}")) {
     return false;
   }
-  let regex1 = /{{.*?}}/g;
-  let regex2 = /{{/g;
-  let regex3 = /}}/g;
+  const regex1 = /{{.*?}}/g;
+  const regex2 = /{{/g;
+  const regex3 = /}}/g;
 
-  let l1 = value.match(regex1)?.length;
-  let l2 = value.match(regex2)?.length;
-  let l3 = value.match(regex3)?.length;
+  const l1 = value.match(regex1)?.length;
+  const l2 = value.match(regex2)?.length;
+  const l3 = value.match(regex3)?.length;
 
   return (l1 == l2 && l2 == l3 && l1 == l3);
-  
 };
 
 //replaces encoded string with their respective characters
 export const preprocessHtml = (content) => {
-  
   const replacements = {
     "&#39;": "'",
     "&quot;": "'",
@@ -304,7 +347,7 @@ export const preprocessHtml = (content) => {
     "&amp;": "&",
     "&lt;": "<",
     "&gt;": ">",
-    "\n": "",  // Handling newlines by replacing them with an empty string
+    "\n": "", // Handling newlines by replacing them with an empty string
   };
 
 
@@ -318,28 +361,22 @@ export const preprocessHtml = (content) => {
   });
 
   // Step 2: Perform the standard replacements on the entire content
-  return contentWithStyleFixes?.replace(/&#39;|&quot;|&amp;|&lt;|&gt;|"|\n/g, match => replacements[match]);
+  return contentWithStyleFixes?.replace(/&#39;|&quot;|&amp;|&lt;|&gt;|"|\n/g, (match) => replacements[match]);
 };
 
 //this is used to get the subtags from custom or extended tags
-export const getTagMapValue = (object = {}) => {
-  return Object.values(
-    object
-  ).reduce((acc, current) => {
-    return { ...acc, ...current?.subtags ?? {} };
-  }, {});
-};
-
-export const getLoyaltyTagsMapValue = (object = {}) => {
-  return Object.entries(object).reduce((acc, [key, current]) => {
-    if (current?.subtags && Object.keys(current.subtags).length > 0) {
-      // If subtags exist → merge them
-      return { ...acc, ...(current.subtags ?? {}) };
-    }
-    // If no subtags → keep the tag itself
-    return { ...acc, [key]: current };
-  }, {});
-};
+export const getTagMapValue = (object = {}) => Object.values(
+  object
+).reduce((acc, current) => ({ ...acc, ...current?.subtags ?? {} }), {});
+
+export const getLoyaltyTagsMapValue = (object = {}) => Object.entries(object).reduce((acc, [key, current]) => {
+  if (current?.subtags && Object.keys(current.subtags).length > 0) {
+    // If subtags exist → merge them
+    return { ...acc, ...(current.subtags ?? {}) };
+  }
+  // If no subtags → keep the tag itself
+  return { ...acc, [key]: current };
+}, {});
 
 
 /**
@@ -348,27 +385,25 @@ export const getLoyaltyTagsMapValue = (object = {}) => {
  * @param {Object} object - The input object containing top-level keys with optional subtags.
  * @returns {Object} - A flat map containing all top-level keys and their subtags.
  */
-export const getForwardedMapValues = (object = {}) => {
-  return Object?.entries(object)?.reduce((acc, [key, current]) => {
-    // Check if current has 'subtags' and it's an object
-    if (current && current?.subtags && typeof current?.subtags === 'object') {
-      // Add the top-level key with its 'name' and 'desc'
-      acc[key] = {
-        name: current?.name,
-        desc: current?.desc,
-      };
-      
-      // Merge the subtags into the accumulator
-      acc = { ...acc, ...current?.subtags };
-    } else if (current && typeof current === 'object') {
-      // If no 'subtags', add the top-level key with its 'name' and 'desc'
-      acc[key] = {
-        name: current?.name,
-        desc: current?.desc,
-      };
-    }
-    
-    // If the current entry is not an object or lacks 'name'/'desc', skip it
-    return acc;
-  }, {});
-};
+export const getForwardedMapValues = (object = {}) => Object?.entries(object)?.reduce((acc, [key, current]) => {
+  // Check if current has 'subtags' and it's an object
+  if (current && current?.subtags && typeof current?.subtags === 'object') {
+    // Add the top-level key with its 'name' and 'desc'
+    acc[key] = {
+      name: current?.name,
+      desc: current?.desc,
+    };
+
+    // Merge the subtags into the accumulator
+    acc = { ...acc, ...current?.subtags };
+  } else if (current && typeof current === 'object') {
+    // If no 'subtags', add the top-level key with its 'name' and 'desc'
+    acc[key] = {
+      name: current?.name,
+      desc: current?.desc,
+    };
+  }
+
+  // If the current entry is not an object or lacks 'name'/'desc', skip it
+  return acc;
+}, {});

package/utils/tests/commonUtil.test.js

@@ -297,6 +297,110 @@ describe("validateLiquidTemplateContent", () => {
     expect(onSuccess).not.toHaveBeenCalled();
   });
 
+  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 })
+    );
+    await validateLiquidTemplateContent(content, {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      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 () => {
+    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 })
+    );
+    await validateLiquidTemplateContent(content, {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      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 () => {
+    const content = 'Some content without the tag';
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({ askAiraResponse: { errors: [], data: [{ name: "extractedTag" }] }, isError: false })
+    );
+    await validateLiquidTemplateContent(content, {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      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();
+  });
+
+  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 })
+    );
+    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).not.toHaveBeenCalled();
+  });
+
+  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 })
+    );
+    await validateLiquidTemplateContent(content, {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags
+    });
+    // order.items appears in {% %} syntax, so it should be skipped
+    expect(onSuccess).toHaveBeenCalledWith(content, undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
   describe("addBaseToTemplate - subject property logic", () => {
     it("should use template.versions.base.subject if it exists", () => {
       const template = {

package/v2Components/FormBuilder/index.js

@@ -49,7 +49,7 @@ import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetai
 import * as actions from "../../v2Containers/Cap/actions";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
-import { checkSupport, extractNames, preprocessHtml, validateIfTagClosed} from '../../utils/tagValidations';
+import { checkSupport, extractNames, preprocessHtml, validateIfTagClosed, isInsideLiquidBlock} from '../../utils/tagValidations';
 import { containsBase64Images } from '../../utils/content';
 import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED, EMAIL, LIQUID_SUPPORTED_CHANNELS, INAPP } from '../../v2Containers/CreativesContainer/constants';
 import globalMessages from '../../v2Containers/Cap/messages';
@@ -1549,6 +1549,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
       while (match !== null ) {
         const tagValue = match[0].substring(this.indexOfEnd(match[0], '{{'), match[0].indexOf('}}'));
+        const tagIndex = match?.index;
         match = regex.exec(content);
         let ifSupported = false;
         _.forEach(tags, (tag) => {
@@ -1579,7 +1580,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         });
 
         ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
-        if (!ifSupported && !this.liquidFlow()) {
+        // Only add to unsupportedTags if not inside a {% ... %} block and not in liquid flow
+        // Tags inside {% %} blocks can contain any dynamic tags and should not be validated
+        if (!ifSupported && !this.liquidFlow() && !isInsideLiquidBlock(content, tagIndex)) {
           response.unsupportedTags.push(tagValue);
           response.valid = false;
         }