@capillarytech/creatives-library 8.0.286 → 8.0.287-alpha.1

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

@@ -14,9 +14,7 @@ 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.286",
+  "version": "8.0.287-alpha.1",
   "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,
@@ -132,7 +125,11 @@ export const hasCustomerBarcodeFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_CUSTOMER_BARCODE_TAG,
 );
 
-export const isEmailUnsubscribeTagMandatory = Auth.hasFeatureAccess.bind(
+// 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(
   null,
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
 );

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} />
@@ -141,12 +140,7 @@ 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);
@@ -204,81 +198,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 +284,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, singleTab).
+ * @returns {Promise<boolean>} - Promise that resolves to true when validation succeeds, false otherwise
  */
 export const validateMobilePushContent = async (formData, options) => {
   const {

package/utils/tagValidations.js

@@ -13,259 +13,121 @@ 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);
+
 /**
- * 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.
+ * 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 }}
  */
-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);
-  };
-
-  //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);
-      }
-    }
+export const validateTagsCore = ({
+  contentForBraceCheck,
+  contentForUnsubscribeScan,
+  tags,
+  currentModule,
+  isFullMode,
+  initialMissingTags = null,
+  skipTagsFn = skipTags,
+  includeIsContentEmpty = false,
+}) => {
+  const response = {
+    valid: true,
+    missingTags: [],
+    isBraceError: false,
+    ...(includeIsContentEmpty && { isContentEmpty: false }),
   };
 
-  //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);
+  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);
+              }
+            }
+          });
+        }
       });
+    } else {
+      response.missingTags = [...initialMissingTags];
     }
-  });
-  return result;
-};
-
-/**
- * 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);
+    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);
     }
 
-    if (node?.children?.length > 0) {
-      node?.children?.forEach((child) => traverse(child));
+    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;
+  response.isBraceError = !validateIfTagClosed(contentForBraceCheck);
+  if (response.isBraceError) {
+    response.valid = false;
+  } else if (response.missingTags.length > 0) {
+    response.valid = 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;
+  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[], 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;
   }
-  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;
+  return validateTagsCore({
+    contentForBraceCheck: content,
+    contentForUnsubscribeScan: content,
+    tags,
+    currentModule,
+    isFullMode,
+  });
 };
 
 /**