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

package/package.json

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

package/utils/commonUtils.js

@@ -16,7 +16,7 @@ import {
   IOS,
 } from "../v2Containers/CreativesContainer/constants";
 import { GLOBAL_CONVERT_OPTIONS } from "../v2Components/FormBuilder/constants";
-import { checkSupport, extractNames } from "./tagValidations";
+import { checkSupport, extractNames, skipTags as defaultSkipTags } from "./tagValidations";
 import { SMS_TRAI_VAR } from '../v2Containers/SmsTrai/Edit/constants';
 export const apiMessageFormatHandler = (id, fallback) => (
   <FormattedMessage id={id} defaultMessage={fallback} />
@@ -146,7 +146,7 @@ export const validateLiquidTemplateContent = async (
     isLiquidFlow,
     forwardedTags = {},
     tabType,
-    skipTags = () => false,
+    skipTags = defaultSkipTags,
   } = options;
   const emptyBodyError = formatMessage(messages?.emailBodyEmptyError);
   const somethingWrongMsg = formatMessage(messages?.somethingWentWrong);

package/utils/tagValidations.js

@@ -221,7 +221,7 @@ export const validateTags = ({
 /**
  * Checks if the given tag is supported based on the injected tags.
  * @param {string} checkingTag - The tag to check.
- * @param {Array} injectedTags - The injected tags.
+ * @param {Object} injectedTags - The injected tags.
  * @returns {boolean} - True if the tag is supported, false otherwise.
  */
 export const checkIfSupportedTag = (checkingTag, injectedTags) => {
@@ -235,7 +235,7 @@ export const checkIfSupportedTag = (checkingTag, injectedTags) => {
   });
   
   return result;
-}
+};
 
 const indexOfEnd = (targetString, string) => {
   let io = targetString.indexOf(string);
@@ -247,19 +247,14 @@ export const skipTags = (tag) => {
   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]*\\)"];
-  let skipped = false;
-  lodashForEach(regexGroups, (group) => {
-    const groupRegex = new RegExp(group, "g");
-    let match = groupRegex.exec(tag);
-    if (match !== null ) {
-      skipped = true;
-      return true;
-    }
-    return true;
+  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]*\\)", "referral_unique_(code|url).*userid"];
+  // Use some() to check if any pattern matches (stops on first match)
+  return regexGroups.some((group) => {
+    // Create a new RegExp for each test to avoid state issues with global flag
+    const groupRegex = new RegExp(group);
+    return groupRegex.test(tag);
   });
-  return skipped;
-}
+};
 
 export const transformInjectedTags = (tags) => {
   lodashForEach(tags, (tag) => {

package/utils/tests/commonUtil.test.js

@@ -7,6 +7,7 @@ import {
   addBaseToTemplate,
   validateCarouselCards,
 } from "../commonUtils";
+import { skipTags } from "../tagValidations";
 import { SMS_TRAI_VAR } from '../../v2Containers/SmsTrai/Edit/constants';
 import { ANDROID, IOS } from '../../v2Containers/CreativesContainer/constants';
 
@@ -122,6 +123,150 @@ describe("validateLiquidTemplateContent", () => {
     expect(onSuccess).toHaveBeenCalledWith("foo", undefined);
   });
 
+  it("should skip referral_unique_code tags and not trigger unsupported tag error", async () => {
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({ askAiraResponse: { errors: [], data: [{ name: "referral_unique_code_C6SOE_userid" }] }, isError: false })
+    );
+    await validateLiquidTemplateContent("foo", {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags,
+      skipTags
+    });
+    expect(onSuccess).toHaveBeenCalledWith("foo", undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("should skip referral_unique_url tags and not trigger unsupported tag error", async () => {
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({ askAiraResponse: { errors: [], data: [{ name: "referral_unique_url_C6SOE_userid" }] }, isError: false })
+    );
+    await validateLiquidTemplateContent("foo", {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags,
+      skipTags
+    });
+    expect(onSuccess).toHaveBeenCalledWith("foo", undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("should skip referral_unique_code tags with different codes", async () => {
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({ askAiraResponse: { errors: [], data: [{ name: "referral_unique_code_ABC123_userid" }] }, isError: false })
+    );
+    await validateLiquidTemplateContent("foo", {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags,
+      skipTags
+    });
+    expect(onSuccess).toHaveBeenCalledWith("foo", undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("should skip referral_unique_url tags with different codes", async () => {
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({ askAiraResponse: { errors: [], data: [{ name: "referral_unique_url_ABC123_userid" }] }, isError: false })
+    );
+    await validateLiquidTemplateContent("foo", {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags,
+      skipTags
+    });
+    expect(onSuccess).toHaveBeenCalledWith("foo", undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("should skip referral_unique_code tags with alphanumeric codes", async () => {
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({ askAiraResponse: { errors: [], data: [{ name: "referral_unique_code_XYZ789_userid" }] }, isError: false })
+    );
+    await validateLiquidTemplateContent("foo", {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags,
+      skipTags
+    });
+    expect(onSuccess).toHaveBeenCalledWith("foo", undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("should skip referral_unique_url tags with alphanumeric codes", async () => {
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({ askAiraResponse: { errors: [], data: [{ name: "referral_unique_url_XYZ789_userid" }] }, isError: false })
+    );
+    await validateLiquidTemplateContent("foo", {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags,
+      skipTags
+    });
+    expect(onSuccess).toHaveBeenCalledWith("foo", undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("should skip both referral_unique_code and referral_unique_url tags in the same content", async () => {
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({ askAiraResponse: { errors: [], data: [{ name: "referral_unique_code_C6SOE_userid" }, { name: "referral_unique_url_C6SOE_userid" }] }, isError: false })
+    );
+    await validateLiquidTemplateContent("foo", {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags,
+      skipTags
+    });
+    expect(onSuccess).toHaveBeenCalledWith("foo", undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("should skip referral_unique_code_632L7_userid tag (real-world example)", async () => {
+    const getLiquidTags = jest.fn((content, cb) =>
+      cb({ askAiraResponse: { errors: [], data: [{ name: "referral_unique_code_632L7_userid" }] }, isError: false })
+    );
+    await validateLiquidTemplateContent("foo", {
+      getLiquidTags,
+      formatMessage,
+      messages,
+      onError,
+      onSuccess,
+      tagLookupMap,
+      eventContextTags,
+      skipTags
+    });
+    expect(onSuccess).toHaveBeenCalledWith("foo", undefined);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
   it("calls onError with emailBodyEmptyError when validString is falsy", async () => {
     const getLiquidTags = jest.fn((content, cb) => cb({ askAiraResponse: { errors: [], data: [] }, isError: false }));
     const formatMessage = jest.fn((msg) => msg.id);

package/utils/tests/tagValidations.test.js

@@ -952,6 +952,92 @@ describe("skipTags", () => {
     const result = skipTags(tag);
     expect(result).toEqual(true);
   });
+
+  it("should return true for referral unique code tags with userid", () => {
+    const tag = "referral_unique_code_C6SOE_userid";
+    const result = skipTags(tag);
+    expect(result).toEqual(true);
+  });
+
+  it("should return true for referral unique url tags with userid", () => {
+    const tag = "referral_unique_url_C6SOE_userid";
+    const result = skipTags(tag);
+    expect(result).toEqual(true);
+  });
+
+  it("should return true for referral unique code tags with different codes", () => {
+    const tag = "referral_unique_code_ABC123_userid";
+    const result = skipTags(tag);
+    expect(result).toEqual(true);
+  });
+
+  it("should return true for referral unique url tags with different codes", () => {
+    const tag = "referral_unique_url_ABC123_userid";
+    const result = skipTags(tag);
+    expect(result).toEqual(true);
+  });
+
+  it("should return true for referral unique code tags with alphanumeric codes", () => {
+    const tag = "referral_unique_code_XYZ789_userid";
+    const result = skipTags(tag);
+    expect(result).toEqual(true);
+  });
+
+  it("should return true for referral unique url tags with alphanumeric codes", () => {
+    const tag = "referral_unique_url_XYZ789_userid";
+    const result = skipTags(tag);
+    expect(result).toEqual(true);
+  });
+
+  it("should return false for tags that don't match referral pattern", () => {
+    const tag = "referral_code_userid";
+    const result = skipTags(tag);
+    expect(result).toEqual(false);
+  });
+
+  it("should return false for tags with referral but missing unique_code or unique_url", () => {
+    const tag = "referral_C6SOE_userid";
+    const result = skipTags(tag);
+    expect(result).toEqual(false);
+  });
+
+  it("should return false for tags with referral_unique_code but missing userid", () => {
+    const tag = "referral_unique_code_C6SOE";
+    const result = skipTags(tag);
+    expect(result).toEqual(false);
+  });
+
+  it("should return false for tags with referral_unique_url but missing userid", () => {
+    const tag = "referral_unique_url_C6SOE";
+    const result = skipTags(tag);
+    expect(result).toEqual(false);
+  });
+
+  it("should return true for referral_unique_code tags with numeric codes like 632L7", () => {
+    const tag = "referral_unique_code_632L7_userid";
+    const result = skipTags(tag);
+    expect(result).toEqual(true);
+  });
+
+  it("should return true for referral_unique_url tags with numeric codes like 632L7", () => {
+    const tag = "referral_unique_url_632L7_userid";
+    const result = skipTags(tag);
+    expect(result).toEqual(true);
+  });
+
+  it("should return true for referral tags with various token formats", () => {
+    const tags = [
+      "referral_unique_code_123_userid",
+      "referral_unique_code_ABC_userid",
+      "referral_unique_code_123ABC_userid",
+      "referral_unique_url_456_userid",
+      "referral_unique_url_DEF_userid",
+      "referral_unique_url_456DEF_userid",
+    ];
+    tags.forEach((tag) => {
+      expect(skipTags(tag)).toEqual(true);
+    });
+  });
 });
 
 

package/v2Components/FormBuilder/index.js

@@ -1491,20 +1491,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     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 = [];
-    let skipped = false;
-    _.forEach(regexGroups, (group) => {
-      //const groupRegex = /dynamic_expiry_date_after_\(\d+\)_days.FORMAT_\d/g;
-      const groupRegex = new RegExp(group, "g");
-      let match = groupRegex.exec(tag);
-      if (match !== null ) {
-        skipped = true;
-        return true;
-      }
-      return true;
+    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]*\\)", "referral_unique_(code|url).*userid"];
+    // Use some() to check if any pattern matches (stops on first match)
+    return regexGroups.some((group) => {
+      // Create a new RegExp for each test to avoid state issues with global flag
+      const groupRegex = new RegExp(group);
+      return groupRegex.test(tag);
     });
-    return skipped;
   }
 
   validateTags(content, tagsParam, injectedTagsParams, isEmail = false) {

package/v2Components/TestAndPreviewSlidebox/SendTestMessage.js

@@ -19,7 +19,6 @@ const SendTestMessage = ({
   formData,
   isSendingTestMessage,
   formatMessage,
-  isContentValid = true,
 }) => (
   <CapStepsAccordian
     showNumberSteps={false}
@@ -44,11 +43,7 @@ const SendTestMessage = ({
               multiple
               placeholder={formatMessage(messages.testCustomersPlaceholder)}
             />
-            <CapButton
-              onClick={handleSendTestMessage}
-              disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || isSendingTestMessage || !isContentValid}
-              title={!isContentValid ? formatMessage(messages.contentInvalid) : ''}
-            >
+            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || isSendingTestMessage}>
               <FormattedMessage {...messages.sendTestButton} />
             </CapButton>
           </CapRow>),
@@ -68,7 +63,6 @@ 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,7 +52,6 @@ import {
   INITIAL_PAYLOAD, EMAIL, TEST, DESKTOP, ACTIVE, MOBILE,
 } from './constants';
 import { GLOBAL_CONVERT_OPTIONS } from '../FormBuilder/constants';
-import { validateIfTagClosed } from '../../utils/tagValidations';
 
 const TestAndPreviewSlidebox = (props) => {
   const {
@@ -104,147 +103,10 @@ 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]) || !isContentValid
-  ), [requiredTags, customValues, isContentValid]);
-
-  // Function to validate tags in content
-  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
-      // 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;
-    } 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;
-      }
-      
-      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;
-    }
-  };
+    requiredTags.some((tag) => !customValues[tag.fullPath])
+  ), [requiredTags, customValues]);
 
   // Function to resolve tags in text with custom values
   const resolveTagsInText = (text, tagValues) => {
@@ -291,10 +153,6 @@ 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({
@@ -328,10 +186,6 @@ const TestAndPreviewSlidebox = (props) => {
           }
 
           if (htmlFile) {
-            // Validate content tags
-            const isValid = validateContentTags(htmlFile);
-            setIsContentValid(isValid);
-
             // Update our states
             previousBeeContentRef.current = htmlFile;
             setBeeContent(htmlFile);
@@ -340,16 +194,9 @@ const TestAndPreviewSlidebox = (props) => {
               resolvedTitle: formData['template-subject'] || ''
             });
 
-            // 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),
-              });
-            }
+            // Always extract tags when content changes
+            const payloadContent = convert(htmlFile, GLOBAL_CONVERT_OPTIONS);
+            actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
           }
 
           // Restore original handler
@@ -364,45 +211,23 @@ 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'] || ''
           });
 
-          // 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),
-            });
-          }
+          // Always extract tags when showing
+          const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
+          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
         } else {
           // Fallback to content prop if no template content
-          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),
-            });
-          }
+          const payloadContent = convert(
+            getCurrentContent,
+            GLOBAL_CONVERT_OPTIONS
+          );
+          // Always extract tags when showing
+          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
         }
       }
       
@@ -418,28 +243,17 @@ const TestAndPreviewSlidebox = (props) => {
     const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
     
-    if (templateContent && templateContent.trim() !== '' && show) {
-      // Common function to handle content update with validation
+    if (templateContent && templateContent.trim() !== '') {
+      // Common function to handle content update
       const handleContentUpdate = (content) => {
-        // Validate content tags for each update
-        const isValid = validateContentTags(content);
-        setIsContentValid(isValid);
-
         setPreviewDataHtml({
           resolvedBody: content,
           resolvedTitle: formData['template-subject'] || ''
         });
 
-        // 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),
-          });
-        }
+        // Extract tags from content
+        const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
+        actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
       };
 
       if (isDragDrop) {
@@ -473,7 +287,6 @@ const TestAndPreviewSlidebox = (props) => {
       setTagsExtracted(false);
       setPreviewDevice('desktop');
       setSelectedTestEntities([]);
-      setIsContentValid(true);
       actions.clearPrefilledValues();
     }
   }, [show]);
@@ -717,22 +530,6 @@ 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 };
@@ -762,20 +559,9 @@ 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'));
     
@@ -804,22 +590,6 @@ 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);
@@ -915,7 +685,6 @@ const TestAndPreviewSlidebox = (props) => {
       formData={formData}
       isSendingTestMessage={isSendingTestMessage}
       formatMessage={formatMessage}
-      isContentValid={isContentValid}
     />
   );
 

package/v2Components/TestAndPreviewSlidebox/messages.js

@@ -144,12 +144,4 @@ 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',
-  },
 });