@capillarytech/creatives-library 8.0.287-alpha.3 → 8.0.288

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/initialState.js

@@ -14,7 +14,9 @@ export default {
     metaEntities: {
       tags: [],
       layouts: [],
+      tagLookupMap: {},
     },
+    liquidTags: [],
     fetchingLiquidTags: false,
     fetchingSchema: true,
     fetchingSchemaError: '',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.287-alpha.3",
+  "version": "8.0.288",
   "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,
@@ -125,11 +132,7 @@ export const hasCustomerBarcodeFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_CUSTOMER_BARCODE_TAG,
 );
 
-// Note: The "EMAIL_UNSUBSCRIBE_TAG_MANDATORY" feature flag determines if the Unsubscribe tag in email is optional. 
-// When this flag is enabled for an org, the Unsubscribe tag is NOT mandatory in the email flow.
-// This is as per the requirement in the tech doc:
-// https://capillarytech.atlassian.net/wiki/spaces/CAM/pages/3941662838/Remove+mandate+for+Unsubscribe+tag+in+email+flow
-export const isEmailUnsubscribeTagOptional = Auth.hasFeatureAccess.bind(
+export const isEmailUnsubscribeTagMandatory = Auth.hasFeatureAccess.bind(
   null,
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
 );

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} />
@@ -140,7 +141,12 @@ export const validateLiquidTemplateContent = async (
     messages,
     onError = () => {},
     onSuccess = () => {},
+    tagLookupMap,
+    eventContextTags,
+    isLiquidFlow,
+    forwardedTags = {},
     tabType,
+    skipTags = defaultSkipTags,
   } = options;
   const emptyBodyError = formatMessage(messages?.emailBodyEmptyError);
   const somethingWrongMsg = formatMessage(messages?.somethingWentWrong);
@@ -198,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;
 };
@@ -284,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, singleTab).
- * @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 {
@@ -478,3 +559,31 @@ export const validateCarouselCards = (
     reasons,
   };
 };
+
+export const hasPersonalizationTags = (text = '') =>
+  (text && ((text.includes('{{') && text.includes('}}')) || (text.includes('[') && text.includes(']'))));
+
+export const getMessageForDevice = (templateData, device) => templateData?.versions?.[device]?.base?.expandableDetails?.message;
+
+export const getTitleForDevice = (templateData, device) => templateData?.versions?.[device]?.base?.title || '';
+
+export const checkForPersonalizationTokens = (formData) => {
+  // Check for {{ }} (liquid tags) and [ ] (event context tags) in mobile push content
+  const tokenRegex = /\{\{[\s\S]*?\}\}|\[[\s\S]*?\]/;
+
+  // Check all tabs/versions for personalization tokens
+  if (formData && typeof formData === 'object') {
+    for (const key in formData) {
+      const tabData = formData[key];
+      if (tabData && typeof tabData === 'object') {
+        for (const fieldKey in tabData) {
+          const fieldValue = tabData[fieldKey];
+          if (typeof fieldValue === 'string' && tokenRegex.test(fieldValue)) {
+            return true;
+          }
+        }
+      }
+    }
+  }
+  return false;
+};

package/utils/tagValidations.js

@@ -13,121 +13,259 @@ import { ENTRY_TRIGGER_TAG_REGEX, SKIP_TAGS_REGEX_GROUPS } from '../constants/un
 const DEFAULT = 'default';
 const SUBTAGS = 'subtags';
 
-/** Whitespace-tolerant check for {{ unsubscribe }}-style tag in content. */
-const UNSUBSCRIBE_TAG_REGEX = /\{\{\s*unsubscribe\s*\}\}/;
-export const hasUnsubscribeTag = (content) =>
-  typeof content === 'string' && UNSUBSCRIBE_TAG_REGEX.test(content);
-
 /**
- * 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[], isBraceError: boolean }}
+ * Checks if the response object of Tags supports the Tags added in the Add Labels Section
+ * @param {Object} response - The response object to check.
+ * @param {Object} tagObject - The tagLookupMap.
  */
-export const validateTagsCore = ({
-  contentForBraceCheck,
-  contentForUnsubscribeScan,
-  tags,
-  currentModule,
-  isFullMode,
-  initialMissingTags = null,
-  skipTagsFn = skipTags,
-  includeIsContentEmpty = false,
-}) => {
-  const response = {
-    valid: true,
-    missingTags: [],
-    isBraceError: false,
-    ...(includeIsContentEmpty && { isContentEmpty: false }),
+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).
+  //Here forwardedTags only use in case of loyalty module
+  const mappedForwardedTags = handleForwardedTags(forwardedTags);
+  const checkNameInTagObjectOrEventContext = (name) => !!tagObject[name] || eventContextTags?.some((tag) => tag?.tagName === name) || mappedForwardedTags.includes(name);
+
+  // Verify if childTag is a valid sub-tag of parentTag from the 'Add Labels' section or if it's unsupported.
+  const checkSubtags = (parentTag, childName) => {
+    // For event context tags the parentTag will be the event context tag name and subtags will be the child attributes for leaderboards
+    if (checkNameInTagObjectOrEventContext(parentTag) && isLiquidFlow && eventContextTags?.length) {
+      const childNameAfterDot = childName?.split(".")?.[1];
+      if (eventContextTags?.some((tag) => tag?.subTags?.includes(childNameAfterDot))) {
+        supportedList.push(childName);
+      }
+    }
+    if (!tagObject?.[parentTag] && !mappedForwardedTags.includes(parentTag)) return false;
+    let updatedChildName = childName;
+    let updatedWithoutDotChildName = childName;
+    if (childName?.includes(".")) {
+      updatedChildName = `.${childName?.split(".")?.[1]}`;
+      updatedWithoutDotChildName = childName?.split(".")?.[1];
+    }
+    if (tagObject?.[parentTag]) {
+      const subTags = tagObject?.[parentTag]?.definition?.subtags;
+      return subTags?.includes(updatedChildName);
+    }
+    return mappedForwardedTags.includes(updatedChildName) || mappedForwardedTags.includes(updatedWithoutDotChildName) || mappedForwardedTags.includes(childName);
   };
 
-  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 (!hasUnsubscribeTag(contentForUnsubscribeScan)) {
-                response.missingTags.push(value);
-              }
-            }
-          });
-        }
+  //Recursively checks if the childTag is actually a Sub-tag of the ParentTag
+  const processChildren = (parentTag = "", children = []) => {
+    for (const child of children) {
+      if (checkSubtags(parentTag, child?.name)) {
+        supportedList.push(child?.name);
+      }
+      if (child?.children?.length) {
+        processChildren(child?.name, child?.children);
+      }
+    }
+  };
+
+  //Checks if the tag is present in the Add Label Section
+  for (const item of response?.data || []) {
+    if (checkNameInTagObjectOrEventContext(item?.name)) {
+      supportedList?.push(item?.name);
+    }
+    //Repeat the process for subtags
+    if (item?.children?.length) {
+      processChildren(item?.name, item?.children);
+    }
+  }
+
+
+  return supportedList;
+};
+
+const handleForwardedTags = (forwardedTags) => {
+  const result = [];
+  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);
       });
-    } else {
-      response.missingTags = [...initialMissingTags];
     }
+  });
+  return result;
+};
 
-    const regex = /{{([^}]+)}}/g;
-    let match = regex.exec(contentForUnsubscribeScan);
-    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);
-        }
-      }
-      match = regex.exec(contentForUnsubscribeScan);
+/**
+ * Extracts the names from the given data.
+ * @param {Array} data - The data to extract names from.
+ * @returns {Array} - The extracted names.
+ */
+export function extractNames(data) {
+  const names = [];
+
+  function traverse(node) {
+    if (node?.name) {
+      names.push(node?.name);
     }
 
-    if (response.missingTags.length > 0) {
-      response.valid = false;
+    if (node?.children?.length > 0) {
+      node?.children?.forEach((child) => traverse(child));
     }
   }
 
-  response.isBraceError = !validateIfTagClosed(contentForBraceCheck);
-  if (response.isBraceError) {
-    response.valid = false;
-  } else if (response.missingTags.length > 0) {
-    response.valid = false;
+  data?.forEach((item) => traverse(item));
+
+  return names;
+}
+
+// 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) => {
+  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 response;
+
+  // 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;
 };
 
 /**
  * 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[], isBraceError: boolean }}
  */
 export const validateTags = ({
   content,
   tagsParam,
+  injectedTagsParams,
   location,
   tagModule,
+  eventContextTags,
   isFullMode,
 }) => {
   const tags = tagsParam;
+  const injectedTags = transformInjectedTags(injectedTagsParams);
   let currentModule = location?.query?.module ? location?.query?.module : DEFAULT;
   if (tagModule) {
     currentModule = tagModule;
   }
-  return validateTagsCore({
-    contentForBraceCheck: content,
-    contentForUnsubscribeScan: content,
-    tags,
-    currentModule,
-    isFullMode,
-  });
+  const response = {
+    valid: true,
+    missingTags: [],
+    unsupportedTags: [],
+    isBraceError: 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);
+          }
+        }
+      });
+    });
+  }
+  // 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[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);
+          }
+        }
+      }
+      // 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(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;
 };
 
 /**