@capillarytech/creatives-library 8.0.223-alpha.0 → 8.0.224

package/package.json

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

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.
@@ -155,7 +153,7 @@ export const validateTags = ({
     unsupportedTags: [],
     isBraceError: false,
   };
-  if(tags && tags.length) {
+  if (tags && tags.length) {
     lodashForEach(tags, ({
       definition: {
         supportedModules,
@@ -216,7 +214,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,25 +231,25 @@ 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.
   if (tag?.match(ENTRY_TRIGGER_TAG_REGEX)) {
     return false;
   }
-  const regexGroups = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)","Link_to_[a-zA-z]","SURVEY.*.TOKEN", "^[A-Za-z].*\\([a-zA-Z\\d]*\\)"];
+  const regexGroups = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)", "Link_to_[a-zA-z]", "SURVEY.*.TOKEN", "^[A-Za-z].*\\([a-zA-Z\\d]*\\)"];
   let skipped = false;
   lodashForEach(regexGroups, (group) => {
     const groupRegex = new RegExp(group, "g");
-    let match = groupRegex.exec(tag);
+    const match = groupRegex.exec(tag);
     if (match !== null ) {
       skipped = true;
       return true;
@@ -259,7 +257,7 @@ export const skipTags = (tag) => {
     return true;
   });
   return skipped;
-}
+};
 
 export const transformInjectedTags = (tags) => {
   lodashForEach(tags, (tag) => {
@@ -274,35 +272,100 @@ 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);
-  
+};
+
+/**
+ * Validates tag format: ensures tags are in format {{tag_name}} and checks for invalid patterns
+ * Validates against:
+ * - Single braces like {tag} (must be {{tag}})
+ * - Invalid patterns like {{first or first}}, {{first and first}}
+ * - Empty tag names
+ * - Unclosed single braces within tag names
+ * @param {string} textContent - The text content to validate
+ * @returns {boolean} - True if all tags have valid format, false otherwise
+ */
+export const validateTagFormat = (textContent) => {
+  // Find all potential tag patterns {{tag_name}}
+  const tagPattern = /{{[^}]*}}/g;
+  const matches = textContent.match(tagPattern) || [];
+
+  // Remove all valid {{tag}} patterns from content to check for invalid braces
+  let contentWithoutValidTags = textContent;
+  matches.forEach((match) => {
+    contentWithoutValidTags = contentWithoutValidTags.replace(match, '');
+  });
+
+  // Check if there are any remaining braces (single braces or unclosed braces)
+  // These would be invalid patterns like {tag}, {first, first}, etc.
+  if (contentWithoutValidTags.includes('{') || contentWithoutValidTags.includes('}')) {
+    return false;
+  }
+
+  // Check each tag for valid format
+  const allTagsValid = matches.every((match) => {
+    // Valid tag format: {{tag_name}} - must start with {{ and end with }}
+    if (!match.startsWith('{{') || !match.endsWith('}}')) {
+      return false;
+    }
+
+    // Extract tag name (content between {{ and }})
+    const tagName = match.slice(2, -2).trim();
+
+    // Tag name should not be empty
+    if (!tagName) {
+      return false;
+    }
+
+    // Check for invalid patterns in tag name
+    // Invalid patterns: "first or first", "first and first", etc.
+    const invalidPatterns = [
+      /\s+or\s+/i, // " or " as separate word (e.g., "first or first")
+      /\s+and\s+/i, // " and " as separate word
+    ];
+
+    const hasInvalidPattern = invalidPatterns.some((pattern) => pattern.test(tagName));
+    if (hasInvalidPattern) {
+      return false;
+    }
+
+    // Check for unclosed single braces in tag name (e.g., {{first{name}})
+    const singleOpenBraces = (tagName.match(/{/g) || []).length;
+    const singleCloseBraces = (tagName.match(/}/g) || []).length;
+    if (singleOpenBraces !== singleCloseBraces) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return allTagsValid;
 };
 
 //replaces encoded string with their respective characters
 export const preprocessHtml = (content) => {
-  
   const replacements = {
     "'": "'",
     """: "'",
@@ -310,7 +373,7 @@ export const preprocessHtml = (content) => {
     "&": "&",
     "&lt;": "<",
     "&gt;": ">",
-    "\n": "",  // Handling newlines by replacing them with an empty string
+    "\n": "", // Handling newlines by replacing them with an empty string
   };
 
 
@@ -324,28 +387,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 };
+}, {});
 
 
 /**
@@ -354,27 +411,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/v2Components/TestAndPreviewSlidebox/index.js

@@ -52,7 +52,7 @@ import {
   INITIAL_PAYLOAD, EMAIL, TEST, DESKTOP, ACTIVE, MOBILE,
 } from './constants';
 import { GLOBAL_CONVERT_OPTIONS } from '../FormBuilder/constants';
-import { validateIfTagClosed } from '../../utils/tagValidations';
+import { validateIfTagClosed, validateTagFormat } from '../../utils/tagValidations';
 
 const TestAndPreviewSlidebox = (props) => {
   const {
@@ -110,7 +110,12 @@ const TestAndPreviewSlidebox = (props) => {
     requiredTags.some((tag) => !customValues[tag.fullPath]) || !isContentValid
   ), [requiredTags, customValues, isContentValid]);
 
-  // Function to validate tags in content
+  /**
+   * Validates tags in content: checks for proper tag format and balanced braces
+   * Uses validateIfTagClosed and validateTagFormat from utils/tagValidations
+   * @param {string} content - The HTML content to validate
+   * @returns {boolean} - True if content is valid, false otherwise
+   */
   const validateContentTags = (content) => {
     if (!content) return true;
     
@@ -127,66 +132,14 @@ const TestAndPreviewSlidebox = (props) => {
         return true;
       }
       
-      // First check if tags are properly closed using the utility function
+      // First check if tags are properly closed using the utility function from tagValidations
       // This validates that all opening braces have corresponding closing braces
       if (!validateIfTagClosed(textContent)) {
         return false;
       }
       
       // Now validate tag format: tags must be in format {{tag_name}}
-      // Find all valid tag patterns {{tag_name}}
-      const tagPattern = /{{[^}]*}}/g;
-      const matches = textContent.match(tagPattern) || [];
-      
-      // Remove all valid {{tag}} patterns from content to check for invalid braces
-      let contentWithoutValidTags = textContent;
-      matches.forEach((match) => {
-        contentWithoutValidTags = contentWithoutValidTags.replace(match, '');
-      });
-      
-      // Check if there are any remaining braces (single braces or unclosed braces)
-      // These would be invalid patterns like {tag}, {first, first}, etc.
-      if (contentWithoutValidTags.includes('{') || contentWithoutValidTags.includes('}')) {
-        return false;
-      }
-      
-      // Check each tag for valid format
-      for (const match of matches) {
-        // Valid tag format: {{tag_name}} - must start with {{ and end with }}
-        if (!match.startsWith('{{') || !match.endsWith('}}')) {
-          return false;
-        }
-        
-        // Extract tag name (content between {{ and }})
-        const tagName = match.slice(2, -2).trim();
-        
-        // Tag name should not be empty
-        if (!tagName) {
-          return false;
-        }
-        
-        // Check for invalid patterns in tag name
-        // Invalid patterns: "first or first", "first and first", etc.
-        const invalidPatterns = [
-          /\s+or\s+/i,  // " or " as separate word (e.g., "first or first")
-          /\s+and\s+/i, // " and " as separate word
-        ];
-        
-        for (const pattern of invalidPatterns) {
-          if (pattern.test(tagName)) {
-            return false;
-          }
-        }
-        
-        // Check for unclosed single braces in tag name (e.g., {{first{name}})
-        const singleOpenBraces = (tagName.match(/{/g) || []).length;
-        const singleCloseBraces = (tagName.match(/}/g) || []).length;
-        if (singleOpenBraces !== singleCloseBraces) {
-          return false;
-        }
-      }
-      
-      return true;
+      return validateTagFormat(textContent);
     } catch (error) {
       // If conversion fails, fall back to validating the original content
       console.warn('Error converting content for validation:', error);
@@ -200,49 +153,7 @@ const TestAndPreviewSlidebox = (props) => {
         return false;
       }
       
-      const tagPattern = /{{[^}]*}}/g;
-      const matches = content.match(tagPattern) || [];
-      
-      // Remove all valid {{tag}} patterns from content to check for invalid braces
-      let contentWithoutValidTags = content;
-      matches.forEach((match) => {
-        contentWithoutValidTags = contentWithoutValidTags.replace(match, '');
-      });
-      
-      // Check if there are any remaining braces (single braces or unclosed braces)
-      if (contentWithoutValidTags.includes('{') || contentWithoutValidTags.includes('}')) {
-        return false;
-      }
-      
-      for (const match of matches) {
-        if (!match.startsWith('{{') || !match.endsWith('}}')) {
-          return false;
-        }
-        
-        const tagName = match.slice(2, -2).trim();
-        if (!tagName) {
-          return false;
-        }
-        
-        const invalidPatterns = [
-          /\s+or\s+/i,
-          /\s+and\s+/i,
-        ];
-        
-        for (const pattern of invalidPatterns) {
-          if (pattern.test(tagName)) {
-            return false;
-          }
-        }
-        
-        const singleOpenBraces = (tagName.match(/{/g) || []).length;
-        const singleCloseBraces = (tagName.match(/}/g) || []).length;
-        if (singleOpenBraces !== singleCloseBraces) {
-          return false;
-        }
-      }
-      
-      return true;
+      return validateTagFormat(content);
     }
   };