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

package/v2Components/ErrorInfoNote/index.js

@@ -186,6 +186,7 @@ export const ErrorInfoNote = (props) => {
     errorMessages,
     onErrorClick,
     onClose,
+    isLiquidEnabled = true,
     intl,
     useLegacyDisplay = false, // Use simple list display instead of tabs (for BEE Editor)
   } = props;
@@ -229,7 +230,7 @@ export const ErrorInfoNote = (props) => {
     const standardErrors = Array.isArray(rawStandardErrors) ? rawStandardErrors : [];
     const liquidErrors = Array.isArray(rawLiquidErrors) ? rawLiquidErrors : [];
     const hasStandardErrors = standardErrors.length > 0;
-    const hasLiquidErrors = liquidErrors.length > 0;
+    const hasLiquidErrors = liquidErrors.length > 0 && isLiquidEnabled;
 
     if (!hasStandardErrors && !hasLiquidErrors) {
       return null;
@@ -356,7 +357,7 @@ export const ErrorInfoNote = (props) => {
           className="error-info-note__tabs"
         />
         <CapRow className="error-info-note__actions">
-          {hasLiquidErrors && (
+          {hasLiquidErrors && isLiquidEnabled && (
             <CapButton
               type="flat"
               className="error-info-note__liquid-doc"
@@ -451,6 +452,7 @@ ErrorInfoNote.defaultProps = {
   },
   onErrorClick: null,
   onClose: null,
+  isLiquidEnabled: true,
   intl: null,
   useLegacyDisplay: false, // Use simple list display for BEE Editor
 };
@@ -477,6 +479,7 @@ ErrorInfoNote.propTypes = {
   }),
   onErrorClick: PropTypes.func,
   onClose: PropTypes.func,
+  isLiquidEnabled: PropTypes.bool,
   intl: PropTypes.object,
   useLegacyDisplay: PropTypes.bool, // Use simple list display for BEE Editor
 };

package/v2Components/FormBuilder/index.js

@@ -50,7 +50,7 @@ import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetai
 import * as actions from "../../v2Containers/Cap/actions";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
-import { preprocessHtml, validateTagsCore, hasUnsubscribeTag } from '../../utils/tagValidations';
+import { checkSupport, extractNames, preprocessHtml, validateIfTagClosed, isInsideLiquidBlock} from '../../utils/tagValidations';
 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';
@@ -60,7 +60,7 @@ 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';
 import { REQUEST } from '../../v2Containers/Cap/constants'
-import { isEmailUnsubscribeTagOptional } from '../../utils/common';
+import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import { bindActionCreators } from 'redux';
 import { getChannelData, validateLiquidTemplateContent, validateMobilePushContent } from '../../utils/commonUtils';
@@ -72,8 +72,10 @@ const {CapRadioGroup} = CapRadio;
 
 const tagsTypes = {
   MISSING_TAGS: 'missingTags',
+  UNSUPPORTED_TAGS: 'unsupportedTags',
 };
 const errorMessageForTags = {
+  UNSUPPORTED_TAG_ERROR: 'unsupportedTagsError',
   MISSING_TAG_ERROR: 'missingTagsError',
   GENERIC_VALIDATION_ERROR: 'genericValidationError',
   TAG_BRACKET_COUNT_MISMATCH_ERROR: 'tagBracketCountMismatchError'
@@ -136,7 +138,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.handleSetRadioValue = this.handleSetRadioValue.bind(this);
     this.formElements = [];
     // Check if the liquid flow feature is supported and the channel is in the supported list.
-    this.isLiquidFlowSupportedByChannel = this.isLiquidFlowSupportedByChannel.bind(this);
+    this.liquidFlow = this.isLiquidFlowSupported.bind(this);
     this.onSubmitWrapper = this.onSubmitWrapper.bind(this);
     
     // Performance optimization: Debounced functions for high-frequency updates
@@ -328,8 +330,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return updatedFormData;
   }
 
-  isLiquidFlowSupportedByChannel = () => {
-    return Boolean(LIQUID_SUPPORTED_CHANNELS.includes(this.props?.schema?.channel?.toUpperCase()));
+  isLiquidFlowSupported = () => {
+    return Boolean(LIQUID_SUPPORTED_CHANNELS.includes(this.props?.schema?.channel?.toUpperCase()) && hasLiquidSupportFeature());
   }
 
   componentWillMount() {
@@ -724,19 +726,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
         let tagValidationResponse = false;
         if (content) {
-          tagValidationResponse = this.validateTags(content, tags, false, this.props?.isFullMode);
+          tagValidationResponse = this.validateTags(content, tags, injectedTags, false, this.props?.isFullMode);
         }
-
-        const tagResult = tagValidationResponse && typeof tagValidationResponse === 'object'
-          ? tagValidationResponse
-          : { valid: false, missingTags: [], isBraceError: false };
-        if (tagResult.valid) {
+        
+        if (tagValidationResponse.valid) {
           errorData[count][`sms-editor${index > 1 ? index : ''}`] = false;
         } else {
-          const { MISSING_TAG_ERROR, GENERIC_VALIDATION_ERROR, TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags || {};
-          const { missingTags, isBraceError } = tagResult;
-          errorData[count][`sms-editor${index > 1 ? index : ''}`] = missingTags && missingTags.length ? MISSING_TAG_ERROR : (isBraceError ? TAG_BRACKET_COUNT_MISMATCH_ERROR : GENERIC_VALIDATION_ERROR);
-          errorData[count][`bracket-error`] = isBraceError && TAG_BRACKET_COUNT_MISMATCH_ERROR;
+          errorData[count]['invalid-tags'] = tagValidationResponse.unsupportedTags;          
+          const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR, GENERIC_VALIDATION_ERROR, TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags || {};
+          const { missingTags, unsupportedTags, isBraceError} = tagValidationResponse;
+          errorData[count][`sms-editor${index > 1 ? index : ''}`] = missingTags && missingTags.length ? MISSING_TAG_ERROR : ( unsupportedTags && unsupportedTags.length ? UNSUPPORTED_TAG_ERROR : (isBraceError ? TAG_BRACKET_COUNT_MISMATCH_ERROR : GENERIC_VALIDATION_ERROR));
+          errorData[count][`bracket-error`] = tagValidationResponse.isBraceError && TAG_BRACKET_COUNT_MISMATCH_ERROR;
           isValid = false;
         }
         if(content !== '' && (ifUnicode && !unicodeCheck)) {
@@ -764,7 +764,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       if (this.state.formData['message-editor'] !== undefined ) {
         const content = this.state.formData['0']['message-editor'] || '';
         
-        const tagValidationResponse = this.validateTags((content), tags, false, this.props?.isFullMode);
+        const tagValidationResponse = this.validateTags((content), tags, injectedTags, false, this.props?.isFullMode);
         
         if (tagValidationResponse.valid) {
           errorData = {
@@ -847,7 +847,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             errorData[index] = true;
             isValid = false;
           } else {
-            const tagValidationResponse = this.validateTags(content, tags, false, this.props?.isFullMode);
+            const tagValidationResponse = this.validateTags(content, tags, injectedTags, false, this.props?.isFullMode);
             
             if (tagValidationResponse.valid) {
               errorData[index] = false;
@@ -910,13 +910,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 isCurrentTabValid = false;
               } else {
                 errorData[parseInt(index)][`message-editor${selector}`] = false;
-                const tagValidationResponse = this.validateTags(message, tags, false, this.props?.isFullMode);
+                const tagValidationResponse = this.validateTags(message, tags, injectedTags, false, this.props?.isFullMode);
                 
                 if (tagValidationResponse.valid) {
                   errorData[parseInt(index)][`message-editor${selector}`] = false;
                 } else {
-                  const { isBraceError } = tagValidationResponse;
+                  const {isBraceError} = tagValidationResponse;
                   errorData[parseInt(index)][`message-editor${selector}`] = isBraceError ? TAG_BRACKET_COUNT_MISMATCH_ERROR : true;
+                  errorData[parseInt(index)]['invalid-tags'] = tagValidationResponse.unsupportedTags;
                   errorData[parseInt(index)][`bracket-error`] = isBraceError && TAG_BRACKET_COUNT_MISMATCH_ERROR;
                   isValid = false;
                 }
@@ -938,7 +939,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 isCurrentTabValid = false;
               } else {
                 errorData[parseInt(index)][`message-title${selector}`] = false;
-                const tagValidationResponse = this.validateTags(title, tags, false, this.props?.isFullMode);
+                const tagValidationResponse = this.validateTags(title, tags, injectedTags, false, this.props?.isFullMode);
                 
                 if (tagValidationResponse.valid) {
                   errorData[parseInt(index)][`message-title${selector}`] = false;
@@ -1192,7 +1193,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (!content) {
               return false;
             }
-            const tagValidationResponse = this.validateTags(content, tags, isEmail, this.props?.isFullMode);
+            const tagValidationResponse = this.validateTags(content, tags, injectedTags, isEmail, this.props?.isFullMode);
+            
             // Check for base64 images in email content
             isEmail && containsBase64Images({content, callback:()=>{
               tagValidationResponse.valid = false;
@@ -1208,20 +1210,23 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               errorData[index][currentLang]['template-content'] = true;
               isValid = false;
               isLiquidValid = false;
-              if ((showMessages && !isNaN(index)) ||  this.isLiquidFlowSupportedByChannel()) {
-                if (tagValidationResponse?.missingTags?.length > 0) {
+              if ((showMessages && !isNaN(index)) ||  this.liquidFlow()) {
+                if (tagValidationResponse?.missingTags?.length > 0 || tagValidationResponse?.unsupportedTags?.length > 0) {
                   errorString += `${this.props.intl.formatMessage(messages.contentNotValidLanguage)} ${currentLang}\n`;
                 }
                 if (tagValidationResponse?.missingTags?.length > 0) {
                   errorString += `${this.props.intl.formatMessage(messages.missingTags)} ${tagValidationResponse.missingTags.toString()}\n`;
                 }
+                if (tagValidationResponse?.unsupportedTags?.length > 0) {
+                  errorString += `${this.props.intl.formatMessage(messages.unsupportedTags)} ${tagValidationResponse.unsupportedTags.toString()}\n`;
+                }
                 if (tagValidationResponse?.isBraceError){
                   errorString += this.props.intl.formatMessage(globalMessages.unbalanacedCurlyBraces);
                 }
                 if (tagValidationResponse?.isContentEmpty) {
                   errorString += this.props.intl.formatMessage(messages.emailBodyEmptyError);
                   // Adds a bypass for cases where content is initially empty in the creation flow.
-                  if(this.isLiquidFlowSupportedByChannel()){
+                  if(this.liquidFlow()){
                     errorString = "";
                     isLiquidValid = true;
                   }
@@ -1233,7 +1238,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           }
           if (errorString) {
-            if (this.isLiquidFlowSupportedByChannel()) {
+            if (this.liquidFlow()) {
               this.setState(
                 (prevState) => ({
                   liquidErrorMessage: {
@@ -1260,7 +1265,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       });
     }
 
-    const isTemplateValid = this.isLiquidFlowSupportedByChannel() ? isLiquidValid : isValid;
+    const isTemplateValid = this.liquidFlow() ? isLiquidValid : isValid;
     //Updating the state with the error data
     this.setState((prevState) => ({
       isFormValid: isTemplateValid,
@@ -1319,7 +1324,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
   onSubmitWrapper = (args) => {
     const {singleTab = null} = args || {};
-    if (this.isLiquidFlowSupportedByChannel()) {
+    if (this.liquidFlow()) {
       // For MPUSH, we need to validate both Android and iOS content separately
       if (this.props.channel === MOBILE_PUSH || this.props?.schema?.channel?.toUpperCase() === MOBILE_PUSH) {
         this.validateFormBuilderMPush(this.state.formData, singleTab);
@@ -1363,6 +1368,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         messages,
         onError,
         onSuccess,
+        tagLookupMap: this.props?.metaEntities?.tagLookupMap,
+        eventContextTags: this.props?.eventContextTags,
+        isLiquidFlow: this.liquidFlow(),
+        forwardedTags: this.props?.isLoyaltyModule ? this.props?.forwardedTags : {},
         skipTags: this.skipTags.bind(this)
       });
     } else {
@@ -1431,6 +1440,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       getLiquidTags: this.props.actions.getLiquidTags,
       formatMessage: this.props.intl.formatMessage,
       messages: messages,
+      tagLookupMap: this.props?.metaEntities?.tagLookupMap,
+      eventContextTags: this.props?.eventContextTags,
+      isLiquidFlow: this.liquidFlow(), // Use the method instead of props
+      forwardedTags: this.props?.isLoyaltyModule ? this.props?.forwardedTags : {},
+      skipTags: this.skipTags.bind(this),
+      extractNames,
+      checkSupport,
       singleTab: singleTab?.toUpperCase(),
     });
   }
@@ -1485,41 +1501,116 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     });
   }
 
-  validateTags(content, tagsParam, isEmail = false, isFullMode = this.props?.isFullMode) {
+  validateTags(content, tagsParam, injectedTagsParams, isEmail = false, isFullMode = this.props?.isFullMode) {
+    const type = (this.props.location && this.props.location.query.type) ? this.props.location.query.type : 'full';
     let currentModule = this.props.location.query.module ? this.props.location.query.module : 'default';
     if (this.props.tagModule) {
       currentModule = this.props.tagModule;
     }
     const tags = tagsParam ? tagsParam : this.props.tags;
-    const contentForValidation = isEmail ? convert(content, GLOBAL_CONVERT_OPTIONS) : content;
-    const isOutboundModule = (currentModule || '').toUpperCase() === OUTBOUND;
-
-    const initialMissingTags = (tags && tags.length && !isFullMode && isEmail && isOutboundModule && !isEmailUnsubscribeTagOptional() && !hasUnsubscribeTag(content))
-      ? ['unsubscribe']
-      : [];
-
-    const response = validateTagsCore({
-      contentForBraceCheck: contentForValidation,
-      contentForUnsubscribeScan: content,
-      tags,
-      currentModule,
-      isFullMode,
-      initialMissingTags, // [] or ['unsubscribe']; core uses this instead of definition-based when provided
-      skipTagsFn: this.skipTags.bind(this),
-      includeIsContentEmpty: true,
-    });
-
-    // When unsubscribe tag is optional (isEmailUnsubscribeTagOptional): do not enforce unsubscribe (defensive splice); set isContentEmpty only when content is empty. Do not override response.valid so brace/format errors are preserved.
-    const validString = /\S/.test(contentForValidation);
-    if (isEmailUnsubscribeTagOptional() && isEmail && isOutboundModule) {
-      const missingTagIndex = response.missingTags.indexOf('unsubscribe');
-      if (missingTagIndex !== -1) {
-        response.missingTags.splice(missingTagIndex, 1);
+    const injectedTags = this.transformInjectedTags(injectedTagsParams ? injectedTagsParams : this.props.injectedTags);
+    const excludedTags = ['user_id_b64', 'outbox_id_b64'];
+    
+    
+    const response = {};
+    response.valid = true;
+    response.missingTags = [];
+    response.unsupportedTags = [];
+    response.isBraceError = false;
+    response.isContentEmpty = false;
+    const contentForValidation = isEmail ? convert(content, GLOBAL_CONVERT_OPTIONS) : content ;
+    const isModuleTypeOutbound = (this.props?.moduleType || '').toUpperCase() === OUTBOUND;
+    // Run tag validation (missing + unsupported): library mode, or full mode with liquid support, or
+    // legacy Email (CK Editor) when unsubscribe is required (EMAIL_UNSUBSCRIBE_TAG_MANDATORY false) so missing-unsubscribe error shows
+    const shouldRunTagValidation = !isFullMode
+      || (isEmail && hasLiquidSupportFeature())
+      || (isEmail && !isEmailUnsubscribeTagMandatory() && isModuleTypeOutbound);
+    if (tags && tags.length && !isFullMode) {
+      _.forEach(tags, (tag) => {
+        _.forEach(tag.definition.supportedModules, (module) => {
+          if (module.mandatory && (currentModule === module.context)) {
+            if (content.indexOf(`{{${tag.definition.value}}}`) === -1) {
+              response.valid = false;
+              response.missingTags.push(tag.definition.value);
+            }
+          }
+        });
+      });
+      // Legacy Email (CK Editor): when unsubscribe is required, ensure we validate it even if tag schema didn't mark it mandatory for this module
+      if (isEmail && !isEmailUnsubscribeTagMandatory() && isModuleTypeOutbound) {
+        const hasUnsubscribeInContent = /{{unsubscribe(\(#[a-zA-Z\d]{6}\))?}}/g.test(content);
+        if (!hasUnsubscribeInContent && response.missingTags.indexOf('unsubscribe') === -1) {
+          response.valid = false;
+          response.missingTags.push('unsubscribe');
+        }
+      }
+      const regex = /{{[(A-Z\w+(\s\w+)*$\(\)@!#$%^&*~.,/\\]+}}/g;
+      let match = regex.exec(content);
+      const regexImgSrc=/<img[^>]*\bsrc\s*=\s*"[^"]*{{customer_barcode}}[^"]*"/;
+      let matchImg = regexImgSrc.exec(content);
+      const regexCustomerBarcode = /{{customer_barcode}}(?![^<]*>)/g;
+      let matchCustomerBarcode = regexCustomerBarcode.exec(content);
+      // \S matches anything other than a space, a tab, a newline, or a carriage return.
+      const validString= /\S/.test(contentForValidation);
+      if (isEmailUnsubscribeTagMandatory() && isEmail && isModuleTypeOutbound) {
+        const missingTagIndex = response?.missingTags?.indexOf("unsubscribe");
+        if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
+          response?.missingTags?.splice(missingTagIndex, 1); 
+        }
+        if (validString) {
+          response.valid = true;
+        } else {
+          response.isContentEmpty = true;
+        }
       }
-      if (!validString) {
-        response.isContentEmpty = true;
+      while (match !== null ) {
+        const tagValue = match[0].substring(this.indexOfEnd(match[0], '{{'), match[0].indexOf('}}'));
+        const tagIndex = match?.index;
+        match = regex.exec(content);
+        let ifSupported = false;
+        _.forEach(tags, (tag) => {
+          if (tag.definition.value === tagValue) {
+            ifSupported = true;
+          }
+          if(tagValue === CUSTOMER_BARCODE_TAG && (matchImg === null || matchCustomerBarcode !== null)){
+            ifSupported = false;
+          }
+        });
+        const ifSkipped = this.skipTags(tagValue);
+        if (ifSkipped) {
+          ifSupported = true;
+          let isUnsubscribeSkipped = tagValue.indexOf("unsubscribe") != -1 ;
+          if (isUnsubscribeSkipped) {
+            const missingTagIndex = response.missingTags.indexOf("unsubscribe");
+            if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
+              response.missingTags.splice(missingTagIndex, 1);
+            }
+          }
+        }
+
+        // Event Context Tags support
+        this.props?.eventContextTags?.forEach((tag) => {
+          if (tagValue === tag?.tagName) {
+            ifSupported = true;
+          }
+        });
+
+        ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
+        // Only add to unsupportedTags if not inside a {% ... %} block (scenario 3: liquid orgs also get unsupported-tag errors)
+        if (!ifSupported && !isInsideLiquidBlock(content, tagIndex)) {
+          response.unsupportedTags.push(tagValue);
+          response.valid = false;
+        }
+
+        if (response?.unsupportedTags?.length == 0 && response?.missingTags?.length == 0 ) {
+          response.valid = true;
+        }
       }
     }
+    if(!validateIfTagClosed(contentForValidation)){
+      response.isBraceError = true;
+      response.valid = false;
+    }
     return response;
   }
   /* eslint-enable */
@@ -2752,21 +2843,21 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
   getMissingOrUnsupportedTagsName = (content = '', type) => {
-    const { MISSING_TAGS } = tagsTypes;
+    const { MISSING_TAGS, UNSUPPORTED_TAGS} = tagsTypes;
     const tagValidationResponse = this.validateTags(content);
-    if (type && type === MISSING_TAGS) {
-      return (tagValidationResponse[type] || []).join(', ').toString();
+    if (type && (type === MISSING_TAGS || type === UNSUPPORTED_TAGS)) {
+      return tagValidationResponse[type].join(', ').toString();
     }
     return null;
   };
   
   renderTextAreaContent = (styling, columns, val, isVersionEnable, rows, cols, offset = 0) => {
     const { checkValidation, errorData, currentTab, formData } = this.state;
-    const { MISSING_TAGS } = tagsTypes;
+    const { MISSING_TAGS, UNSUPPORTED_TAGS } = tagsTypes;
     const errorType = (isVersionEnable ? errorData[`${currentTab - 1}`][val.id] : errorData[val.id]);
     const ifError = checkValidation && errorType;
     const messageContent = isVersionEnable ? formData[`${currentTab - 1}`][val.id] : formData[val.id];
-    const { MISSING_TAG_ERROR, TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
+    const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR, TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
     const { formatMessage } = this.props.intl;
     
     const { accessibleFeatures = [] } = this.props.currentOrgDetails || {};
@@ -2779,6 +2870,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       case MISSING_TAG_ERROR:
         errorMessageText = formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingOrUnsupportedTagsName(messageContent, MISSING_TAGS)});
         break;
+      case UNSUPPORTED_TAG_ERROR:
+        errorMessageText = formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getMissingOrUnsupportedTagsName(messageContent, UNSUPPORTED_TAGS)});
+        break;
       case TAG_BRACKET_COUNT_MISMATCH_ERROR:
         errorMessageText = formatMessage(globalMessages.unbalanacedCurlyBraces);
         break;
@@ -2789,7 +2883,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         break;
     }
     const prevErrorMessage = this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.[0];
-    if (prevErrorMessage !== errorMessageText && errorMessageText && this.isLiquidFlowSupportedByChannel()) {
+    if (prevErrorMessage !== errorMessageText && errorMessageText && this.liquidFlow()) {
       this.setState((prevState) => ({
         liquidErrorMessage: {
         ...prevState.liquidErrorMessage,
@@ -2808,7 +2902,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             id={val.id}
             placeholder={val.placeholder ? val.placeholder : ''}
             className={`${ifError ? 'error-form-builder' : ''}`}
-            errorMessage={errorMessageText && !this.isLiquidFlowSupportedByChannel() ? errorMessageText : ''}
+            errorMessage={errorMessageText && !this.liquidFlow() ? errorMessageText : ''}
             label={val.label}
             autosize={val.autosize ? val.autosizeParams : false}
             onChange={(e) => this.updateFormData(e.target.value, val)}
@@ -3891,7 +3985,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <CapColumn
                   style={val.colStyle ? val.colStyle : {border : ""}}
                   span={val.width}
-                  className={(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.isLiquidFlowSupportedByChannel() ? "error-boundary" : ""}
+                  className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow() && "error-boundary"}  `}
                 >
                   <CKEditor
                     id={val.id}
@@ -3935,7 +4029,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               isModuleFilterEnabled = this.props.isFullMode;
             }
             columns.push(
-              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.isLiquidFlowSupportedByChannel() ? "error-boundary" : ""}>
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow() && "error-boundary"}`}>
                 <BeeEditor
                   uid={uuid}
                   tokenData={beeToken}
@@ -4221,7 +4315,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
     return (
-      <CapSpin spinning={Boolean((this.isLiquidFlowSupportedByChannel() && this.props.liquidExtractionInProgress) || this.props.metaDataStatus === REQUEST)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
+      <CapSpin spinning={Boolean((this.liquidFlow() && this.props.liquidExtractionInProgress) || this.props.metaDataStatus === REQUEST)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
       <CapRow>
         {this.props.schema && this.renderForm()}
         <SlideBox

package/v2Components/FormBuilder/messages.js

@@ -26,6 +26,10 @@ export default defineMessages({
     id: 'creatives.components.FormBuilder.missingTagsValidationError',
     defaultMessage: 'Missing tags: {missingTags}. Please add them to this message.',
   },
+  unsupportedTagsValidationError: {
+    id: 'creatives.components.FormBuilder.unsupportedTagsValidationError',
+    defaultMessage: 'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
+  },
   genericTagsValidationError: {
     id: 'creatives.components.FormBuilder.genericTagsValidationError',
     defaultMessage: 'Please check the message content for unsupported/missing tags',
@@ -38,6 +42,10 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.missingTags',
     defaultMessage: 'Missing tags are:',
   },
+  unsupportedTags: {
+    id: 'creatives.componentsV2.FormBuilder.unsupportedTags',
+    defaultMessage: 'Unsupported tags are:',
+  },
   upload: {
     id: 'creatives.componentsV2.FormBuilder.upload',
     defaultMessage: 'Upload',

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -102,6 +102,7 @@ const HTMLEditor = forwardRef(({
   onTagSelect = null,
   onContextChange = null,
   globalActions = null,
+  isLiquidEnabled = false, // Controls Liquid tab visibility in ValidationTabs
   isFullMode = true, // Full mode vs library mode - controls layout and visibility
   onErrorAcknowledged = null, // Callback when user clicks redirection icon to acknowledge errors
   onValidationChange = null, // Callback when validation state changes (for parent to track errors)
@@ -572,6 +573,7 @@ const HTMLEditor = forwardRef(({
     content,
     layout,
     validation,
+    isLiquidEnabled,
     editorRef: getActiveEditorRef(),
     handleLabelInsert,
     handleSave,
@@ -591,6 +593,7 @@ const HTMLEditor = forwardRef(({
     content,
     layout,
     validation,
+    isLiquidEnabled,
     getActiveEditorRef,
     handleLabelInsert,
     handleSave,
@@ -779,6 +782,7 @@ HTMLEditor.propTypes = {
   onTagSelect: PropTypes.func,
   onContextChange: PropTypes.func, // Deprecated: use globalActions instead
   globalActions: PropTypes.object,
+  isLiquidEnabled: PropTypes.bool, // Controls Liquid tab visibility in validation
   isFullMode: PropTypes.bool, // Full mode vs library mode
   onErrorAcknowledged: PropTypes.func, // Callback when user clicks redirection icon to acknowledge errors
   onValidationChange: PropTypes.func, // Callback when validation state changes
@@ -812,6 +816,7 @@ HTMLEditor.defaultProps = {
   onTagSelect: null,
   onContextChange: null,
   globalActions: null, // Redux actions for API calls
+  isLiquidEnabled: false,
   isFullMode: true, // Default to full mode
   onErrorAcknowledged: null, // Callback when user clicks redirection icon to acknowledge errors
   onValidationChange: null, // Callback when validation state changes

package/v2Components/HtmlEditor/__tests__/HTMLEditor.apiErrors.test.js

@@ -229,6 +229,7 @@ const defaultProps = {
   channel: 'EMAIL',
   userLocale: 'en',
   moduleFilterEnabled: true,
+  isLiquidEnabled: false,
   isFullMode: true,
   onErrorAcknowledged: jest.fn(),
   onValidationChange: jest.fn(),

package/v2Components/HtmlEditor/__tests__/HTMLEditor.test.js

@@ -3201,6 +3201,7 @@ describe('HTMLEditor', () => {
             onTagSelect={onTagSelect}
             onContextChange={onContextChange}
             globalActions={globalActions}
+            isLiquidEnabled={true}
             isFullMode={false}
             onErrorAcknowledged={onErrorAcknowledged}
             onValidationChange={onValidationChange}
@@ -3260,6 +3261,20 @@ describe('HTMLEditor', () => {
       expect(screen.getByTestId('device-toggle')).toBeInTheDocument();
     });
 
+    it('should handle isLiquidEnabled prop', () => {
+      render(
+        <TestWrapper>
+          <HTMLEditor isLiquidEnabled={true} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
+    });
+
     it('should handle isFullMode prop', () => {
       render(
         <TestWrapper>

package/v2Components/HtmlEditor/components/CodeEditorPane/index.js

@@ -69,7 +69,7 @@ const CodeEditorPaneComponent = ({
 }) => {
   const context = useEditorContext();
   const {
-    content, validation, variant,
+    content, validation, variant, isLiquidEnabled,
   } = context || {};
   const { content: contentValue, updateContent } = content || {};
   const editorRef = useRef(null);
@@ -298,6 +298,7 @@ const CodeEditorPaneComponent = ({
         <ValidationErrorDisplay
           validation={validation}
           onErrorClick={onErrorClick}
+          isLiquidEnabled={isLiquidEnabled}
           className="code-editor-pane__validation"
         />
       </div>