@capillarytech/creatives-library 8.0.226 → 8.0.227

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.226",
+  "version": "8.0.227",
   "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,14 +231,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 +266,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 = {
     "'": "'",
     """: "'",
@@ -304,7 +367,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
   };
 
 
@@ -318,28 +381,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 +405,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/tagValidations.test.js

@@ -10,35 +10,36 @@ import {
   validateTags,
   skipTags,
   isInsideLiquidBlock,
+  validateTagFormat,
 } from '../tagValidations';
 import { containsBase64Images } from '../content';
 import { eventContextTags } from '../../v2Containers/TagList/tests/mockdata';
 
 describe("check if curly brackets are balanced", () => {
-    it("test for balanced curly brackets", () => {
-        let value = "hello {{optout"
-        let res = validateIfTagClosed(value);
-        expect(res).toEqual(false);
-        value += "}}"
-        let result = validateIfTagClosed(value);
-        expect(result).toEqual(true);
-        //valid cases
-        expect(validateIfTagClosed("{{{Hello}}}")).toEqual(true);
-        expect(validateIfTagClosed("{{{Hello}}")).toEqual(true);
-        expect(validateIfTagClosed("{{Hello}}}")).toEqual(true);
-
-        //invalid cases
-        expect(validateIfTagClosed("{{Hello}")).toEqual(false);
-        expect(validateIfTagClosed("{Hello}}")).toEqual(false);
-        expect(validateIfTagClosed("{{{Hello}")).toEqual(false);
-        expect(validateIfTagClosed("{Hello}}}")).toEqual(false);
-        expect(validateIfTagClosed("{{{{Hello}}}}")).toEqual(false);
-        expect(validateIfTagClosed("{{{{{Hello}}}}}")).toEqual(false);
-        expect(validateIfTagClosed("{{{{Hello}}")).toEqual(false);
-        expect(validateIfTagClosed("{{{{Hello}}World}}")).toEqual(false);
-        expect(validateIfTagClosed("{{Hello{{World}}")).toEqual(false);
-    })
-})
+  it("test for balanced curly brackets", () => {
+    let value = "hello {{optout";
+    const res = validateIfTagClosed(value);
+    expect(res).toEqual(false);
+    value += "}}";
+    const result = validateIfTagClosed(value);
+    expect(result).toEqual(true);
+    //valid cases
+    expect(validateIfTagClosed("{{{Hello}}}")).toEqual(true);
+    expect(validateIfTagClosed("{{{Hello}}")).toEqual(true);
+    expect(validateIfTagClosed("{{Hello}}}")).toEqual(true);
+
+    //invalid cases
+    expect(validateIfTagClosed("{{Hello}")).toEqual(false);
+    expect(validateIfTagClosed("{Hello}}")).toEqual(false);
+    expect(validateIfTagClosed("{{{Hello}")).toEqual(false);
+    expect(validateIfTagClosed("{Hello}}}")).toEqual(false);
+    expect(validateIfTagClosed("{{{{Hello}}}}")).toEqual(false);
+    expect(validateIfTagClosed("{{{{{Hello}}}}}")).toEqual(false);
+    expect(validateIfTagClosed("{{{{Hello}}")).toEqual(false);
+    expect(validateIfTagClosed("{{{{Hello}}World}}")).toEqual(false);
+    expect(validateIfTagClosed("{{Hello{{World}}")).toEqual(false);
+  });
+});
 
 describe("validateTags", () => {
   const tagsParam = [
@@ -85,12 +86,12 @@ describe("validateTags", () => {
 
   it("should return invalid response when a mandatory tag is missing", () => {
     const content = "Hello {{tag1}}, {{tag2}}, {{tag3}}";
-    const updatedTagsParam = [...tagsParam,       {
+    const updatedTagsParam = [...tagsParam, {
       definition: {
         supportedModules: [{ context: "DEFAULT", mandatory: true }],
         value: "tag4",
       },
-    },];
+    }];
     const injectedTagsParams = [];
     const location = { query: { module: "DEFAULT" } };
     const tagModule = null;
@@ -351,9 +352,9 @@ describe("checkSupport", () => {
       data: [{ name: "tag1" }, { name: "tag2" }, { name: "tag3" }],
     };
     const tagObject = {
-      tag1: { definition: { subtags: ["tag1.1", "tag1.2"] } },
-      tag2: { definition: { subtags: ["tag2.1", "tag2.2"] } },
-      tag3: { definition: { subtags: ["tag3.1", "tag3.2"] } },
+      "tag1": { definition: { subtags: ["tag1.1", "tag1.2"] } },
+      "tag2": { definition: { subtags: ["tag2.1", "tag2.2"] } },
+      "tag3": { definition: { subtags: ["tag3.1", "tag3.2"] } },
       "tag1.1": {},
       "tag2.1": {},
       "tag3.1": {},
@@ -386,9 +387,9 @@ describe("checkSupport", () => {
       ],
     };
     const tagObject = {
-      tag1: { definition: { subtags: [".1", "tag1.2"] } },
-      tag2: { definition: { subtags: ["tag2.1", "tag2.2"] } },
-      tag3: { definition: { subtags: ["tag3.1", "tag3.2"] } },
+      "tag1": { definition: { subtags: [".1", "tag1.2"] } },
+      "tag2": { definition: { subtags: ["tag2.1", "tag2.2"] } },
+      "tag3": { definition: { subtags: ["tag3.1", "tag3.2"] } },
       "tag1.1": {},
       "tag2.1": {},
       "tag3.1": {},
@@ -405,9 +406,9 @@ describe("checkSupport", () => {
       ],
     };
     const tagObject = {
-      tag1: { definition: { subtags: [".1", "tag1.2"] } },
-      tag2: { definition: { subtags: ["tag2.1", "tag2.2"] } },
-      tag3: { definition: { subtags: ["tag3.1", "tag3.2"] } },
+      "tag1": { definition: { subtags: [".1", "tag1.2"] } },
+      "tag2": { definition: { subtags: ["tag2.1", "tag2.2"] } },
+      "tag3": { definition: { subtags: ["tag3.1", "tag3.2"] } },
       "tag1.1": {},
       "tag2.1": {},
       "tag3.1": {},
@@ -433,7 +434,7 @@ describe("checkSupport", () => {
     const eventContextTags = [{ tagName: "leaderboard", subTags: ["userId"]}];
     const isLiquidFlow = true;
     const result = checkSupport(response, tagObject, eventContextTags, isLiquidFlow);
-    expect(result).toEqual( [ 'leaderboard', 'person.userId' ]);
+    expect(result).toEqual( ['leaderboard', 'person.userId']);
   });
 
   it("should not add childName to supportedList which does not have dot in eventContextTags", () => {
@@ -443,7 +444,7 @@ describe("checkSupport", () => {
     const eventContextTags = [{ tagName: "entryTrigger.lifetimePoints", children: [{name: "userId"}] }];
     const isLiquidFlow = true;
     const result = checkSupport(response, tagObject, eventContextTags, isLiquidFlow);
-    expect(result).toEqual( [ "entryTrigger.lifetimePoints" ]);
+    expect(result).toEqual( ["entryTrigger.lifetimePoints"]);
   });
 
   it("should add only parent tag to supportedList if isLiquidFlow false", () => {
@@ -452,7 +453,7 @@ describe("checkSupport", () => {
     const eventContextTags = [{ tagName: "leaderboard", subTags: ["userId"]}];
     const isLiquidFlow = false;
     const result = checkSupport(response, tagObject, eventContextTags, isLiquidFlow);
-    expect(result).toEqual( [ 'leaderboard' ]);
+    expect(result).toEqual( ['leaderboard']);
   });
 
   it("test for checking loyalty tags in that are coming in forwardedTags", () => {
@@ -472,7 +473,7 @@ describe("checkSupport", () => {
       },
     };
     const result = checkSupport(response, tagObject, [], isLiquidFlow, forwardedTags);
-    expect(result).toEqual( [ 'leaderboard', 'person.userId' ]);
+    expect(result).toEqual( ['leaderboard', 'person.userId']);
   });
 });
 
@@ -529,8 +530,6 @@ describe('preprocessHtml', () => {
     const expectedOutput = "<style {line-height:0;font-size:75%} >sup{line-height:0;font-size:75% }</style> ";
     expect(preprocessHtml(input)).toEqual(expectedOutput);
   });
-
-
 });
 
 
@@ -556,7 +555,7 @@ describe("getTagMapValue", () => {
       },
     };
     const result = getTagMapValue(object);
-    expect(result).toEqual({ name: "233", tagName: "234", });
+    expect(result).toEqual({ name: "233", tagName: "234" });
   });
   it("should return the tag map value when an object is provided but subtag is not present in one of the obj", () => {
     const object = {
@@ -888,9 +887,9 @@ describe("getLoyaltyTagsMapValue", () => {
       },
     };
     const inputCopy = JSON.parse(JSON.stringify(object));
-    
+
     getLoyaltyTagsMapValue(object);
-    
+
     expect(object).toEqual(inputCopy);
   });
 
@@ -1393,7 +1392,7 @@ describe('containsBase64Images', () => {
 
   beforeEach(() => {
     mockCapNotification = {
-      error: jest.fn()
+      error: jest.fn(),
     };
     mockCallback = jest.fn();
   });
@@ -1420,7 +1419,7 @@ describe('containsBase64Images', () => {
   it('should return true for content with base64 images and trigger notification', () => {
     const content = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" alt="test" />';
     expect(containsBase64Images({content, CapNotification: mockCapNotification, callback: mockCallback})).toBe(true);
-    
+
     expect(mockCapNotification.error).toHaveBeenCalledWith({
       key: 'base64Error',
       message: 'Base64 images are not allowed. Please upload your image to a gallery and use it, or add the image URL instead.',
@@ -1452,12 +1451,12 @@ describe('containsBase64Images', () => {
     const jpegContent = '<img src="data:image/jpeg;base64,/9j/4AAQ..." />';
     const gifContent = '<img src="data:image/gif;base64,R0lGODlh..." />';
     const webpContent = '<img src="data:image/webp;base64,UklGRi..." />';
-    
+
     expect(containsBase64Images({content: pngContent, CapNotification: mockCapNotification})).toBe(true);
     expect(containsBase64Images({content: jpegContent, CapNotification: mockCapNotification})).toBe(true);
     expect(containsBase64Images({content: gifContent, CapNotification: mockCapNotification})).toBe(true);
     expect(containsBase64Images({content: webpContent, CapNotification: mockCapNotification})).toBe(true);
-    
+
     expect(mockCapNotification.error).toHaveBeenCalledTimes(4);
   });
 
@@ -1489,11 +1488,209 @@ describe('containsBase64Images', () => {
   it('should execute callback only when base64 images are found', () => {
     const contentWithBase64 = '<img src="data:image/png;base64,iVBORw0..." alt="test" />';
     const contentWithoutBase64 = '<img src="https://example.com/image.jpg" alt="test" />';
-    
+
     containsBase64Images({content: contentWithBase64, callback: mockCallback});
     expect(mockCallback).toHaveBeenCalledTimes(1);
-    
+
     containsBase64Images({content: contentWithoutBase64, callback: mockCallback});
     expect(mockCallback).toHaveBeenCalledTimes(1); // Should still be 1, not called again
   });
 });
+
+describe('validateTagFormat', () => {
+  describe('valid tag formats', () => {
+    it('should return true for empty string', () => {
+      expect(validateTagFormat('')).toBe(true);
+    });
+
+    it('should return true for text without tags', () => {
+      expect(validateTagFormat('Hello world')).toBe(true);
+      expect(validateTagFormat('No tags here at all')).toBe(true);
+    });
+
+    it('should return true for a single valid tag', () => {
+      expect(validateTagFormat('{{tag_name}}')).toBe(true);
+      expect(validateTagFormat('{{first_name}}')).toBe(true);
+      expect(validateTagFormat('{{customer.name}}')).toBe(true);
+    });
+
+    it('should return true for multiple valid tags', () => {
+      expect(validateTagFormat('Hello {{first_name}}, your order {{order_id}} is ready')).toBe(true);
+      expect(validateTagFormat('{{tag1}} and {{tag2}} and {{tag3}}')).toBe(true);
+    });
+
+    it('should return true for tags with various characters', () => {
+      expect(validateTagFormat('{{tag_name_123}}')).toBe(true);
+      expect(validateTagFormat('{{customer.first_name}}')).toBe(true);
+      expect(validateTagFormat('{{tag-name}}')).toBe(true);
+      expect(validateTagFormat('{{tag.name}}')).toBe(true);
+    });
+
+    it('should return true for tags with whitespace in tag name (trimmed)', () => {
+      expect(validateTagFormat('{{  tag_name  }}')).toBe(true);
+      expect(validateTagFormat('{{ tag_name }}')).toBe(true);
+    });
+
+    it('should return true for tags with special characters in tag name', () => {
+      expect(validateTagFormat('{{tag@name}}')).toBe(true);
+      expect(validateTagFormat('{{tag#name}}')).toBe(true);
+      expect(validateTagFormat('{{tag$name}}')).toBe(true);
+    });
+  });
+
+  describe('invalid tag formats - single braces', () => {
+    it('should return false for single opening brace', () => {
+      expect(validateTagFormat('{tag}')).toBe(false);
+      expect(validateTagFormat('Hello {name}')).toBe(false);
+    });
+
+    it('should return false for single closing brace', () => {
+      expect(validateTagFormat('tag}')).toBe(false);
+      expect(validateTagFormat('Hello name}')).toBe(false);
+    });
+
+    it('should return false for unclosed single brace', () => {
+      expect(validateTagFormat('{tag')).toBe(false);
+      expect(validateTagFormat('tag}')).toBe(false);
+    });
+
+    it('should return false for mixed single and double braces', () => {
+      expect(validateTagFormat('{{valid}} and {invalid}')).toBe(false);
+      expect(validateTagFormat('{invalid} and {{valid}}')).toBe(false);
+    });
+  });
+
+  describe('invalid tag formats - unclosed double braces', () => {
+    it('should return false for unclosed opening double braces', () => {
+      expect(validateTagFormat('{{tag')).toBe(false);
+      expect(validateTagFormat('{{tag}')).toBe(false);
+    });
+
+    it('should return false for unclosed closing double braces', () => {
+      expect(validateTagFormat('tag}}')).toBe(false);
+      expect(validateTagFormat('{tag}}')).toBe(false);
+    });
+
+    it('should return false for mismatched braces', () => {
+      expect(validateTagFormat('{{tag}')).toBe(false);
+      expect(validateTagFormat('{tag}}')).toBe(false);
+    });
+  });
+
+  describe('invalid tag formats - empty tag names', () => {
+    it('should return false for empty tag name', () => {
+      expect(validateTagFormat('{{}}')).toBe(false);
+    });
+
+    it('should return false for tag with only whitespace', () => {
+      expect(validateTagFormat('{{   }}')).toBe(false);
+    });
+  });
+
+  describe('invalid tag formats - invalid patterns', () => {
+    it('should return false for tag with "or" pattern', () => {
+      expect(validateTagFormat('{{first or first}}')).toBe(false);
+      expect(validateTagFormat('{{tag1 or tag2}}')).toBe(false);
+      expect(validateTagFormat('{{name OR name}}')).toBe(false);
+      expect(validateTagFormat('{{first Or first}}')).toBe(false);
+    });
+
+    it('should return false for tag with "and" pattern', () => {
+      expect(validateTagFormat('{{first and first}}')).toBe(false);
+      expect(validateTagFormat('{{tag1 and tag2}}')).toBe(false);
+      expect(validateTagFormat('{{name AND name}}')).toBe(false);
+      expect(validateTagFormat('{{first And first}}')).toBe(false);
+    });
+
+    it('should return false for tag with "or" pattern in mixed case', () => {
+      expect(validateTagFormat('{{first Or first}}')).toBe(false);
+      expect(validateTagFormat('{{first OR first}}')).toBe(false);
+      expect(validateTagFormat('{{first oR first}}')).toBe(false);
+    });
+
+    it('should return false for tag with "and" pattern in mixed case', () => {
+      expect(validateTagFormat('{{first And first}}')).toBe(false);
+      expect(validateTagFormat('{{first AND first}}')).toBe(false);
+      expect(validateTagFormat('{{first aNd first}}')).toBe(false);
+    });
+
+    it('should allow "or" and "and" as part of other words', () => {
+      expect(validateTagFormat('{{order_id}}')).toBe(true);
+      expect(validateTagFormat('{{customer_name}}')).toBe(true);
+      expect(validateTagFormat('{{landing_page}}')).toBe(true);
+    });
+  });
+
+  describe('invalid tag formats - unclosed single braces in tag name', () => {
+    it('should return false for unclosed single opening brace in tag name', () => {
+      expect(validateTagFormat('{{first{name}}')).toBe(false);
+      expect(validateTagFormat('{{tag{value}}')).toBe(false);
+    });
+
+    it('should return false for unclosed single closing brace in tag name', () => {
+      expect(validateTagFormat('{{first}name}}')).toBe(false);
+      expect(validateTagFormat('{{tag}value}}')).toBe(false);
+    });
+
+    it('should return false for mismatched single braces in tag name', () => {
+      expect(validateTagFormat('{{first{name}}')).toBe(false);
+      expect(validateTagFormat('{{first}name}}')).toBe(false);
+    });
+
+    it('should return false for balanced single braces in tag name (regex cannot match)', () => {
+      // The regex pattern /{{[^}]*}}/g stops at the first }, so {{first{name}}}
+      // would leave a remaining } brace, making it invalid
+      expect(validateTagFormat('{{first{name}}}')).toBe(false);
+      expect(validateTagFormat('{{tag{value}}}')).toBe(false);
+    });
+  });
+
+  describe('invalid tag formats - remaining braces after removing valid tags', () => {
+    it('should return false when there are remaining single braces after valid tags', () => {
+      expect(validateTagFormat('{{valid}} {invalid}')).toBe(false);
+      expect(validateTagFormat('{invalid} {{valid}}')).toBe(false);
+    });
+
+    it('should return false when there are remaining unclosed braces', () => {
+      expect(validateTagFormat('{{valid}} {unclosed')).toBe(false);
+      expect(validateTagFormat('{{valid}} unclosed}')).toBe(false);
+    });
+
+    it('should return false for complex mixed valid and invalid patterns', () => {
+      expect(validateTagFormat('{{tag1}} and {tag2} and {{tag3}}')).toBe(false);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should return false for tags that do not start with {{', () => {
+      expect(validateTagFormat('{tag}}')).toBe(false);
+    });
+
+    it('should return false for tags that do not end with }}', () => {
+      expect(validateTagFormat('{{tag}')).toBe(false);
+    });
+
+    it('should handle multiple invalid tags', () => {
+      expect(validateTagFormat('{{first or first}} and {{second and second}}')).toBe(false);
+    });
+
+    it('should return false if any tag is invalid in a string with multiple tags', () => {
+      expect(validateTagFormat('{{valid1}} {{valid2}} {{invalid or invalid}}')).toBe(false);
+      expect(validateTagFormat('{{invalid or invalid}} {{valid1}} {{valid2}}')).toBe(false);
+    });
+
+    it('should return true for all valid tags even with many tags', () => {
+      expect(validateTagFormat('{{tag1}} {{tag2}} {{tag3}} {{tag4}} {{tag5}}')).toBe(true);
+    });
+
+    it('should handle tags with nested structure', () => {
+      expect(validateTagFormat('{{customer.first_name}}')).toBe(true);
+      expect(validateTagFormat('{{order.items.count}}')).toBe(true);
+    });
+
+    it('should handle tags with numbers and underscores', () => {
+      expect(validateTagFormat('{{tag_123}}')).toBe(true);
+      expect(validateTagFormat('{{tag1_2_3}}')).toBe(true);
+    });
+  });
+});

package/v2Components/FormBuilder/constants.js

@@ -4,10 +4,11 @@ export const UPLOAD = 'upload';
 export const USE_EDITOR = 'useEditor';
 export const COPY_PRIMARY_LANGUAGE = 'copyPrimaryLanguage';
 export const GLOBAL_CONVERT_OPTIONS = {
-    selectors: [
-      ...[1, 2, 3, 4, 5, 6].map(level => ({
-        selector: `h${level}`,
-        options: { uppercase: false }
-      }))
-    ]
-  };
+  wordwrap: null,
+  selectors: [
+    ...[1, 2, 3, 4, 5, 6].map((level) => ({
+      selector: `h${level}`,
+      options: { uppercase: false },
+    })),
+  ],
+};

package/v2Components/FormBuilder/index.js

@@ -54,7 +54,7 @@ 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';
 import { convert } from 'html-to-text';
-import { OUTBOUND, ADD_LANGUAGE, UPLOAD, USE_EDITOR, COPY_PRIMARY_LANGUAGE } from './constants';
+import { OUTBOUND, ADD_LANGUAGE, UPLOAD, USE_EDITOR, COPY_PRIMARY_LANGUAGE, GLOBAL_CONVERT_OPTIONS } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../constants/unified';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX, SKIP_TAGS_REGEX_GROUPS} from '../../constants/unified';
@@ -1516,7 +1516,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     response.unsupportedTags = [];
     response.isBraceError = false;
     response.isContentEmpty = false;
-    const contentForValidation = isEmail ? convert(content) : content ;
+    const contentForValidation = isEmail ? convert(content, GLOBAL_CONVERT_OPTIONS) : content ;
     if(tags && tags.length) {
       _.forEach(tags, (tag) => {
         _.forEach(tag.definition.supportedModules, (module) => {

package/v2Components/TestAndPreviewSlidebox/SendTestMessage.js

@@ -9,6 +9,19 @@ import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
 import isEmpty from 'lodash/isEmpty';
 import messages from './messages';
 
+const isSendTestButtonDisabled = ({
+  selectedTestEntities,
+  formData,
+  isSendingTestMessage,
+  isContentValid,
+}) => {
+  const hasSelectedEntities = !isEmpty(selectedTestEntities);
+  const hasTemplateSubject = !isEmpty(formData['template-subject']) || !isEmpty(formData[0]?.['template-subject']);
+  const isReadyToSend = hasSelectedEntities && hasTemplateSubject && isContentValid && !isSendingTestMessage;
+
+  return !isReadyToSend;
+};
+
 const SendTestMessage = ({
   isFetchingTestCustomers,
   isFetchingTestGroups,
@@ -19,6 +32,7 @@ const SendTestMessage = ({
   formData,
   isSendingTestMessage,
   formatMessage,
+  isContentValid = true,
 }) => (
   <CapStepsAccordian
     showNumberSteps={false}
@@ -43,7 +57,16 @@ const SendTestMessage = ({
               multiple
               placeholder={formatMessage(messages.testCustomersPlaceholder)}
             />
-            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || isSendingTestMessage}>
+            <CapButton
+              onClick={handleSendTestMessage}
+              disabled={isSendTestButtonDisabled({
+                selectedTestEntities,
+                formData,
+                isSendingTestMessage,
+                isContentValid,
+              })}
+              title={!isContentValid ? formatMessage(messages.contentInvalid) : ''}
+            >
               <FormattedMessage {...messages.sendTestButton} />
             </CapButton>
           </CapRow>),
@@ -63,6 +86,7 @@ SendTestMessage.propTypes = {
   formData: PropTypes.object.isRequired,
   isSendingTestMessage: PropTypes.bool.isRequired,
   formatMessage: PropTypes.func.isRequired,
+  isContentValid: PropTypes.bool,
 };
 
 export default SendTestMessage;

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -52,6 +52,7 @@ import {
   INITIAL_PAYLOAD, EMAIL, TEST, DESKTOP, ACTIVE, MOBILE,
 } from './constants';
 import { GLOBAL_CONVERT_OPTIONS } from '../FormBuilder/constants';
+import { validateIfTagClosed, validateTagFormat } from '../../utils/tagValidations';
 
 const TestAndPreviewSlidebox = (props) => {
   const {
@@ -103,10 +104,58 @@ const TestAndPreviewSlidebox = (props) => {
   const [selectedTestEntities, setSelectedTestEntities] = useState([]);
   const [beeContent, setBeeContent] = useState(''); // Track BEE editor content separately
   const previousBeeContentRef = useRef(''); // Track previous BEE content to prevent unnecessary updates
+  const [isContentValid, setIsContentValid] = useState(true); // Track if content tags are valid
 
   const isUpdatePreviewDisabled = useMemo(() => (
-    requiredTags.some((tag) => !customValues[tag.fullPath])
-  ), [requiredTags, customValues]);
+    requiredTags.some((tag) => !customValues[tag.fullPath]) || !isContentValid
+  ), [requiredTags, customValues, isContentValid]);
+
+  /**
+   * 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;
+    
+    try {
+      // Convert HTML to text (same as what's used for tag extraction)
+      // This ensures we validate the same content that will be used for tag extraction
+      const textContent = convert(content, GLOBAL_CONVERT_OPTIONS);
+      
+      // Check if there are any braces in the content
+      const hasBraces = textContent.includes('{') || textContent.includes('}');
+      
+      // If no braces exist, content is valid (no tag validation needed)
+      if (!hasBraces) {
+        return true;
+      }
+      
+      // 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}}
+      return validateTagFormat(textContent);
+    } catch (error) {
+      // If conversion fails, fall back to validating the original content
+      console.warn('Error converting content for validation:', error);
+      const hasBraces = content.includes('{') || content.includes('}');
+      if (!hasBraces) {
+        return true;
+      }
+      
+      // Apply same validation to original content
+      if (!validateIfTagClosed(content)) {
+        return false;
+      }
+      
+      return validateTagFormat(content);
+    }
+  };
 
   // Function to resolve tags in text with custom values
   const resolveTagsInText = (text, tagValues) => {
@@ -153,6 +202,10 @@ const TestAndPreviewSlidebox = (props) => {
       if (existingContent && existingContent.trim() !== '') {
         // We already have content, update local state only if it's different
         if (existingContent !== previousBeeContentRef.current) {
+          // Validate content tags for BEE editor
+          const isValid = validateContentTags(existingContent);
+          setIsContentValid(isValid);
+          
           previousBeeContentRef.current = existingContent;
           setBeeContent(existingContent);
           setPreviewDataHtml({
@@ -186,6 +239,10 @@ const TestAndPreviewSlidebox = (props) => {
           }
 
           if (htmlFile) {
+            // Validate content tags
+            const isValid = validateContentTags(htmlFile);
+            setIsContentValid(isValid);
+
             // Update our states
             previousBeeContentRef.current = htmlFile;
             setBeeContent(htmlFile);
@@ -194,9 +251,16 @@ const TestAndPreviewSlidebox = (props) => {
               resolvedTitle: formData['template-subject'] || ''
             });
 
-            // Always extract tags when content changes
-            const payloadContent = convert(htmlFile, GLOBAL_CONVERT_OPTIONS);
-            actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+            // Only extract tags if content is valid
+            if (isValid) {
+              const payloadContent = convert(htmlFile, GLOBAL_CONVERT_OPTIONS);
+              actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+            } else {
+              // Show error notification for invalid content
+              CapNotification.error({
+                message: formatMessage(messages.contentInvalid),
+              });
+            }
           }
 
           // Restore original handler
@@ -211,23 +275,45 @@ const TestAndPreviewSlidebox = (props) => {
         const templateContent = currentTabData?.[activeTab]?.['template-content'];
 
         if (templateContent) {
+          // Validate content tags
+          const isValid = validateContentTags(templateContent);
+          setIsContentValid(isValid);
+
           // Update preview with initial content
           setPreviewDataHtml({
             resolvedBody: templateContent,
             resolvedTitle: formData['template-subject'] || ''
           });
 
-          // Always extract tags when showing
-          const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
-          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+          // Only extract tags if content is valid
+          if (isValid) {
+            const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
+            actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+          } else {
+            // Show error notification for invalid content
+            CapNotification.error({
+              message: formatMessage(messages.contentInvalid),
+            });
+          }
         } else {
           // Fallback to content prop if no template content
-          const payloadContent = convert(
-            getCurrentContent,
-            GLOBAL_CONVERT_OPTIONS
-          );
-          // Always extract tags when showing
-          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+          const contentToValidate = getCurrentContent;
+          const isValid = validateContentTags(contentToValidate);
+          setIsContentValid(isValid);
+
+          // Only extract tags if content is valid
+          if (isValid) {
+            const payloadContent = convert(
+              contentToValidate,
+              GLOBAL_CONVERT_OPTIONS
+            );
+            actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+          } else {
+            // Show error notification for invalid content
+            CapNotification.error({
+              message: formatMessage(messages.contentInvalid),
+            });
+          }
         }
       }
       
@@ -243,17 +329,28 @@ const TestAndPreviewSlidebox = (props) => {
     const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
     
-    if (templateContent && templateContent.trim() !== '') {
-      // Common function to handle content update
+    if (templateContent && templateContent.trim() !== '' && show) {
+      // Common function to handle content update with validation
       const handleContentUpdate = (content) => {
+        // Validate content tags for each update
+        const isValid = validateContentTags(content);
+        setIsContentValid(isValid);
+
         setPreviewDataHtml({
           resolvedBody: content,
           resolvedTitle: formData['template-subject'] || ''
         });
 
-        // Extract tags from content
-        const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
-        actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+        // Only extract tags if content is valid
+        if (isValid) {
+          const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
+          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+        } else {
+          // Show error notification for invalid content
+          CapNotification.error({
+            message: formatMessage(messages.contentInvalid),
+          });
+        }
       };
 
       if (isDragDrop) {
@@ -287,6 +384,7 @@ const TestAndPreviewSlidebox = (props) => {
       setTagsExtracted(false);
       setPreviewDevice('desktop');
       setSelectedTestEntities([]);
+      setIsContentValid(true);
       actions.clearPrefilledValues();
     }
   }, [show]);
@@ -530,6 +628,22 @@ const TestAndPreviewSlidebox = (props) => {
 
   // Handle update preview
   const handleUpdatePreview = async () => {
+    // Re-validate content to get latest state (in case liquid errors were fixed)
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    const templateContent = currentTabData?.[activeTab]?.['template-content'];
+    const contentToValidate = templateContent || getCurrentContent;
+    const isValid = validateContentTags(contentToValidate);
+    setIsContentValid(isValid);
+
+    // Check if content is valid before updating preview
+    if (!isValid) {
+      CapNotification.error({
+        message: formatMessage(messages.contentInvalid),
+      });
+      return;
+    }
+
     try {
       // Include unsubscribe tag if content contains it
       const resolvedTags = { ...customValues };
@@ -559,9 +673,20 @@ const TestAndPreviewSlidebox = (props) => {
     const currentTabData = formData[currentTab - 1];
     const activeTab = currentTabData?.activeTab;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
+    const content = templateContent || getCurrentContent;
+
+    // Validate content tags before extracting
+    const isValid = validateContentTags(content);
+    setIsContentValid(isValid);
+
+    if (!isValid) {
+      CapNotification.error({
+        message: formatMessage(messages.contentInvalid),
+      });
+      return;
+    }
     
     // Check for personalization tags (excluding unsubscribe)
-    const content = templateContent || getCurrentContent;
     const tags = content.match(/{{[^}]+}}/g) || [];
     const hasPersonalizationTags = tags.some(tag => !tag.includes('unsubscribe'));
     
@@ -590,6 +715,22 @@ const TestAndPreviewSlidebox = (props) => {
   };
 
   const handleSendTestMessage = () => {
+    // Re-validate content to get latest state (in case liquid errors were fixed)
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    const templateContent = currentTabData?.[activeTab]?.['template-content'];
+    const contentToValidate = templateContent || getCurrentContent;
+    const isValid = validateContentTags(contentToValidate);
+    setIsContentValid(isValid);
+
+    // Check if content is valid before sending test message
+    if (!isValid) {
+      CapNotification.error({
+        message: formatMessage(messages.contentInvalid),
+      });
+      return;
+    }
+
     const allUserIds = [];
     selectedTestEntities.forEach((entityId) => {
       const group = testGroups.find((g) => g.groupId === entityId);
@@ -685,6 +826,7 @@ const TestAndPreviewSlidebox = (props) => {
       formData={formData}
       isSendingTestMessage={isSendingTestMessage}
       formatMessage={formatMessage}
+      isContentValid={isContentValid}
     />
   );
 

package/v2Components/TestAndPreviewSlidebox/messages.js

@@ -144,4 +144,12 @@ export default defineMessages({
     id: `${scope}.invalidJSON`,
     defaultMessage: 'Invalid JSON input',
   },
+  contentInvalid: {
+    id: `${scope}.contentInvalid`,
+    defaultMessage: 'Content is invalid. Please fix the tags in your content before testing or previewing.',
+  },
+  previewUpdateError: {
+    id: `${scope}.previewUpdateError`,
+    defaultMessage: 'Failed to update preview',
+  },
 });