cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Components/FormBuilder/index.js

@@ -50,9 +50,9 @@ import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetai
 import * as actions from "../../v2Containers/Cap/actions";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
-import { checkSupport, extractNames, preprocessHtml, validateIfTagClosed, isInsideLiquidBlock} from '../../utils/tagValidations';
+import { preprocessHtml, validateTagsCore, hasUnsubscribeTag } 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 { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS, 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, GLOBAL_CONVERT_OPTIONS } from './constants';
@@ -60,10 +60,10 @@ 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 { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
+import { isEmailUnsubscribeTagOptional, isAiContentBotDisabled } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import { bindActionCreators } from 'redux';
-import { getChannelData, validateLiquidTemplateContent, validateMobilePushContent } from '../../utils/commonUtils';
+import { getChannelData, hasPersonalizationTags, validateLiquidTemplateContent, validateMobilePushContent } from '../../utils/commonUtils';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -72,10 +72,8 @@ 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'
@@ -138,7 +136,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.liquidFlow = this.isLiquidFlowSupported.bind(this);
+    this.isLiquidFlowSupportedByChannel = this.isLiquidFlowSupportedByChannel.bind(this);
     this.onSubmitWrapper = this.onSubmitWrapper.bind(this);
     
     // Performance optimization: Debounced functions for high-frequency updates
@@ -330,8 +328,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return updatedFormData;
   }
 
-  isLiquidFlowSupported = () => {
-    return Boolean(LIQUID_SUPPORTED_CHANNELS.includes(this.props?.schema?.channel?.toUpperCase()) && hasLiquidSupportFeature());
+  isLiquidFlowSupportedByChannel = () => {
+    return Boolean(LIQUID_SUPPORTED_CHANNELS.includes(this.props?.schema?.channel?.toUpperCase()));
   }
 
   componentWillMount() {
@@ -714,7 +712,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (channel && channel.toUpperCase() === SMS) {
       for (let count = 0; count < this.state.tabCount; count += 1) {
         if (_.isEmpty(errorData[count])) {
-          return;
+          // Do not return early. An empty tab object can appear transiently and returning here
+          // prevents onFormValidityChange from firing, which makes Done appear unresponsive.
+          errorData[count] = {};
         }
         const index = count + 1;
         if (!this.state.formData[count]) {
@@ -726,17 +726,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
         let tagValidationResponse = false;
         if (content) {
-          tagValidationResponse = this.validateTags(content, tags, injectedTags, false, this.props?.isFullMode);
+          tagValidationResponse = this.validateTags(content, tags, false, this.props?.isFullMode);
         }
-        
-        if (tagValidationResponse.valid) {
+
+        const tagResult = tagValidationResponse && typeof tagValidationResponse === 'object'
+          ? tagValidationResponse
+          : { valid: false, missingTags: [], isBraceError: false };
+        if (tagResult.valid) {
           errorData[count][`sms-editor${index > 1 ? index : ''}`] = false;
         } else {
-          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;
+          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;
           isValid = false;
         }
         if(content !== '' && (ifUnicode && !unicodeCheck)) {
@@ -764,7 +766,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, injectedTags, false, this.props?.isFullMode);
+        const tagValidationResponse = this.validateTags((content), tags, false, this.props?.isFullMode);
         
         if (tagValidationResponse.valid) {
           errorData = {
@@ -847,7 +849,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             errorData[index] = true;
             isValid = false;
           } else {
-            const tagValidationResponse = this.validateTags(content, tags, injectedTags, false, this.props?.isFullMode);
+            const tagValidationResponse = this.validateTags(content, tags, false, this.props?.isFullMode);
             
             if (tagValidationResponse.valid) {
               errorData[index] = false;
@@ -903,21 +905,23 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           if (errorData[parseInt(index)]) {
             if (message) {
               message = message.trim();
-
               if (message === "") {
                 errorData[parseInt(index)][`message-editor${selector}`] = true;
                 isValid = false;
                 isCurrentTabValid = false;
+              } else if (this.props.restrictPersonalization && hasPersonalizationTags(message)) {
+                errorData[parseInt(index)][`message-editor${selector}`] = true;
+                isValid = false;
+                isCurrentTabValid = false;
               } else {
                 errorData[parseInt(index)][`message-editor${selector}`] = false;
-                const tagValidationResponse = this.validateTags(message, tags, injectedTags, false, this.props?.isFullMode);
+                const tagValidationResponse = this.validateTags(message, tags, 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;
                 }
@@ -937,9 +941,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 errorData[parseInt(index)][`message-title${selector}`] = true;
                 isValid = false;
                 isCurrentTabValid = false;
+              } else if (this.props.restrictPersonalization && hasPersonalizationTags(title)) {
+                errorData[parseInt(index)][`message-title${selector}`] = true;
+                isValid = false;
+                isCurrentTabValid = false;
               } else {
                 errorData[parseInt(index)][`message-title${selector}`] = false;
-                const tagValidationResponse = this.validateTags(title, tags, injectedTags, false, this.props?.isFullMode);
+                const tagValidationResponse = this.validateTags(title, tags, false, this.props?.isFullMode);
                 
                 if (tagValidationResponse.valid) {
                   errorData[parseInt(index)][`message-title${selector}`] = false;
@@ -1193,8 +1201,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (!content) {
               return false;
             }
-            const tagValidationResponse = this.validateTags(content, tags, injectedTags, isEmail, this.props?.isFullMode);
-            
+            const tagValidationResponse = this.validateTags(content, tags, isEmail, this.props?.isFullMode);
             // Check for base64 images in email content
             isEmail && containsBase64Images({content, callback:()=>{
               tagValidationResponse.valid = false;
@@ -1210,23 +1217,20 @@ 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.liquidFlow()) {
-                if (tagValidationResponse?.missingTags?.length > 0 || tagValidationResponse?.unsupportedTags?.length > 0) {
+              if ((showMessages && !isNaN(index)) ||  this.isLiquidFlowSupportedByChannel()) {
+                if (tagValidationResponse?.missingTags?.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.liquidFlow()){
+                  if(this.isLiquidFlowSupportedByChannel()){
                     errorString = "";
                     isLiquidValid = true;
                   }
@@ -1238,7 +1242,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           }
           if (errorString) {
-            if (this.liquidFlow()) {
+            if (this.isLiquidFlowSupportedByChannel()) {
               this.setState(
                 (prevState) => ({
                   liquidErrorMessage: {
@@ -1247,10 +1251,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   },
                 }),
                 () => {
-                  // Callback after the state is updated
                   this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
                 }
               );
+              // Footer shows the error; skip notification for Email CK/BEE (non-HTML) flow to avoid duplicate feedback
+              const isEmailChannel = this.props?.schema?.channel?.toUpperCase() === EMAIL;
+              if (!isEmailChannel) {
+                this.openNotificationWithIcon('error', errorString, 'email-validation-error');
+              }
             } else {
               this.openNotificationWithIcon('error', errorString, "email-validation-error");
             }
@@ -1264,7 +1272,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       });
     }
 
-    const isTemplateValid = this.liquidFlow() ? isLiquidValid : isValid;
+    const isTemplateValid = this.isLiquidFlowSupportedByChannel() ? isLiquidValid : isValid;
     //Updating the state with the error data
     this.setState((prevState) => ({
       isFormValid: isTemplateValid,
@@ -1323,55 +1331,59 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
   onSubmitWrapper = (args) => {
     const {singleTab = null} = args || {};
-    if (this.liquidFlow()) {
+    // Liquid validation (extractTags + Aira) only in library mode
+    const runLiquidValidation = this.isLiquidFlowSupportedByChannel() && !this.props.isFullMode;
+    if (runLiquidValidation) {
       // 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);
         return;
       }
-      
-      // For other channels (EMAIL, SMS, INAPP)
-      const content = getChannelData(this.props.schema.channel || this.props.channel, this.state.formData, this.props.baseLanguage);
-
-      // Set up callbacks for error and success handling
-      const onError = ({ standardErrors, liquidErrors }) => {
-        this.setState(
-          (prevState) => ({
-            liquidErrorMessage: {
-              ...prevState.liquidErrorMessage,
-              STANDARD_ERROR_MSG: standardErrors,
-              LIQUID_ERROR_MSG: liquidErrors,
-            },
-          }),
-          () => {
-            this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
-            this.props.stopValidation();
-          }
-        );
-      };
-      
-      const onSuccess = (contentToSubmit) => {
-        const channel = this.props.channel || this.props?.schema?.channel?.toUpperCase();
-        if(channel === EMAIL) {
-          const content = this.state.formData?.base?.[this.props.baseLanguage]?.["template-content"] || "";
-          this.handleLiquidTemplateSubmit(content);
-        } else {
-          this.handleLiquidTemplateSubmit(contentToSubmit);
+
+      // For other channels (EMAIL, SMS, INAPP): only call extractTags if there are no brace/empty errors already.
+      // Run sync validation first; if it fails, block and show errors without calling the API.
+      this.validateForm(null, null, true, false, () => {
+        if (!this.state.isFormValid) {
+          this.props.stopValidation();
+          return;
         }
-      };
-      
-      // Call the common validation function
-      validateLiquidTemplateContent(content, {
-        getLiquidTags: this.props.actions.getLiquidTags,
-        formatMessage: this.props.intl.formatMessage,
-        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)
+        const content = getChannelData(this.props.schema.channel || this.props.channel, this.state.formData, this.props.baseLanguage);
+
+        const onError = ({ standardErrors, liquidErrors }) => {
+          this.setState(
+            (prevState) => ({
+              liquidErrorMessage: {
+                ...prevState.liquidErrorMessage,
+                STANDARD_ERROR_MSG: standardErrors,
+                LIQUID_ERROR_MSG: liquidErrors,
+              },
+            }),
+            () => {
+              this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
+              this.props.stopValidation();
+              this.props.onFormValidityChange(false, this.state.errorData);
+            }
+          );
+        };
+
+        const onSuccess = (contentToSubmit) => {
+          const channel = this.props.channel || this.props?.schema?.channel?.toUpperCase();
+          if(channel === EMAIL) {
+            const content = this.state.formData?.base?.[this.props.baseLanguage]?.["template-content"] || "";
+            this.handleLiquidTemplateSubmit(content);
+          } else {
+            this.handleLiquidTemplateSubmit(contentToSubmit);
+          }
+        };
+
+        validateLiquidTemplateContent(content, {
+          getLiquidTags: this.props.actions.getLiquidTags,
+          formatMessage: this.props.intl.formatMessage,
+          messages,
+          onError,
+          onSuccess,
+          skipTags: this.skipTags.bind(this)
+        });
       });
     } else {
       this.props.onSubmit(this.state.formData);
@@ -1398,7 +1410,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     
     // Set up callbacks for error and success handling
     const onLiquidError = ({ standardErrors, liquidErrors }) => {
-
       this.setState(
         (prevState) => ({
           liquidErrorMessage: {
@@ -1410,6 +1421,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         () => {
           this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.state.currentTab);
           this.props.stopValidation();
+          // Block save: tell parent form is invalid so Done/submit is blocked
+          this.props.onFormValidityChange(false, this.state.errorData);
         }
       );
     };
@@ -1439,13 +1452,6 @@ 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(),
     });
   }
@@ -1500,102 +1506,40 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     });
   }
 
-  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';
+  validateTags(content, tagsParam, isEmail = false, isFullMode = this.props?.isFullMode) {
     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 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 ;
-    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);
-            }
-          }
-        });
-      });
-      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 && this.props?.moduleType === OUTBOUND) {
-        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;
-        }
-      }
-      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 and not in liquid flow
-        // Tags inside {% %} blocks can contain any dynamic tags and should not be validated
-        if (!ifSupported && !this.liquidFlow() && !isInsideLiquidBlock(content, tagIndex)) {
-          response.unsupportedTags.push(tagValue);
-          response.valid = false;
-        }
+    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,
+    });
 
-        if (response?.unsupportedTags?.length == 0 && response?.missingTags?.length == 0 ) {
-          response.valid = 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);
+      }
+      if (!validString) {
+        response.isContentEmpty = true;
       }
-    }
-    if(!validateIfTagClosed(contentForValidation)){
-      response.isBraceError = true;
-      response.valid = false;
     }
     return response;
   }
@@ -2829,36 +2773,30 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
   getMissingOrUnsupportedTagsName = (content = '', type) => {
-    const { MISSING_TAGS, UNSUPPORTED_TAGS} = tagsTypes;
+    const { MISSING_TAGS } = tagsTypes;
     const tagValidationResponse = this.validateTags(content);
-    if (type && (type === MISSING_TAGS || type === UNSUPPORTED_TAGS)) {
-      return tagValidationResponse[type].join(', ').toString();
+    if (type && type === MISSING_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, UNSUPPORTED_TAGS } = tagsTypes;
+    const { MISSING_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, UNSUPPORTED_TAG_ERROR, TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
+    const { MISSING_TAG_ERROR, TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
     const { formatMessage } = this.props.intl;
     
-    const { accessibleFeatures = [] } = this.props.currentOrgDetails || {};
-    const isAiContentBotDisabled = accessibleFeatures?.includes(
-      AI_CONTENT_BOT_DISABLED
-    );
+    const aiContentBotDisabled = isAiContentBotDisabled();
 
     let errorMessageText = false;
     switch (errorType) {
       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;
@@ -2868,8 +2806,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       default:
         break;
     }
+
+    if (this.props.restrictPersonalization && hasPersonalizationTags(messageContent)) {
+      errorMessageText = formatMessage(messages.personalizationTagsErrorMessage);
+    }
+    // Empty/required error: only show after user has triggered validation (ifError / "Done").
+    // All other errors (brace, personalization, missing tags, generic): show in real time while typing.
+    const isContentEmpty = !messageContent || !/\S/.test(String(messageContent).trim());
+    const isEmptyError = errorType && isContentEmpty;
+    const showError = errorType && (isEmptyError ? ifError : true);
     const prevErrorMessage = this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.[0];
-    if (prevErrorMessage !== errorMessageText && errorMessageText && this.liquidFlow()) {
+    if (prevErrorMessage !== errorMessageText && errorMessageText && this.isLiquidFlowSupportedByChannel()) {
       this.setState((prevState) => ({
         liquidErrorMessage: {
         ...prevState.liquidErrorMessage,
@@ -2880,15 +2827,25 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
       });
     }
-    else{
+    // Always render the textarea regardless of the liquid error state update above.
+    // Previously the textarea was inside the `else` branch, so it was not rendered during the
+    // one render cycle when the liquid error message was first set – causing the input to lose
+    // focus whenever a brace/tag error first appeared.
     if (styling === 'semantic') {
       columns.push(
         <CapColumn key="input" span={val.width} offset={offset}>
           <TextArea
             id={val.id}
             placeholder={val.placeholder ? val.placeholder : ''}
-            className={`${ifError ? 'error-form-builder' : ''}`}
-            errorMessage={errorMessageText && !this.liquidFlow() ? errorMessageText : ''}
+            className={`${showError ? 'error-form-builder' : ''}`}
+            errorMessage={
+              showError && errorMessageText && (
+                !this.isLiquidFlowSupportedByChannel() ||
+                [MOBILE_PUSH, INAPP].includes(this.props.schema?.channel?.toUpperCase())
+              )
+                ? errorMessageText
+                : ''
+            }
             label={val.label}
             autosize={val.autosize ? val.autosizeParams : false}
             onChange={(e) => this.updateFormData(e.target.value, val)}
@@ -2901,7 +2858,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             cols={cols}
           />
           {[SMS, MOBILE_PUSH].includes(this.props.schema?.channel)
-            && !isAiContentBotDisabled
+            && !aiContentBotDisabled
             && (
               <CapAskAira.ContentGenerationBot
                 text={messageContent || ""}
@@ -2919,7 +2876,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         </CapColumn>
       );
     }
-  }
   };
 
 
@@ -3033,6 +2989,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 userLocale={this.props.userLocale}
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 eventContextTags={this.props?.eventContextTags}
+                restrictPersonalization={this.props.restrictPersonalization}
+                waitEventContextTags={this.props?.waitEventContextTags}
               />
             </CapColumn>
           );
@@ -3062,11 +3020,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 userLocale={this.props.userLocale}
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
                 moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
                 containerStyle={val.style || {}}
                 inputProps={val.inputProps || {}}
                 showInput={val.showInput !== false}
                 showTagList={val.showTagList !== false}
+                restrictPersonalization={this.props.restrictPersonalization}
               />
             </CapColumn>
           );
@@ -3436,15 +3396,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         switch (type) {
           case "input":
             const errorType = isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id];
-            const { accessibleFeatures = [] } = this.props.currentOrgDetails || {};
-            const isAiContentBotDisabled = accessibleFeatures?.includes(
-              AI_CONTENT_BOT_DISABLED
-            );
+            const aiContentBotDisabled = isAiContentBotDisabled();
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             const { TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
             const { formatMessage } = this.props.intl;
-            let errorMessageText = errorType === TAG_BRACKET_COUNT_MISMATCH_ERROR ?  formatMessage(globalMessages.unbalanacedCurlyBraces) :(val.errorMessage && ifError ? val.errorMessage : '');
             const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+            // Show personalization error for title field inline (same as message textarea) when restrictPersonalization is true
+            const hasPersonalizationError = this.props.restrictPersonalization && hasPersonalizationTags(value);
+            if (hasPersonalizationError) {
+              ifError = true;
+            }
+            let errorMessageText = hasPersonalizationError
+              ? formatMessage(messages.personalizationTagsErrorMessage)
+              : (errorType === TAG_BRACKET_COUNT_MISMATCH_ERROR ? formatMessage(globalMessages.unbalanacedCurlyBraces) : (val.errorMessage && ifError ? val.errorMessage : ''));
             if (styling === 'semantic') {
               columns.push(
               <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
@@ -3465,7 +3429,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     size={val.size || "default"}
                   />
                   {this.props.schema?.channel === EMAIL &&
-                    !isAiContentBotDisabled && (
+                    !aiContentBotDisabled && (
                       <CapAskAira.ContentGenerationBot
                         text={value || ""}
                         setText={this.handleSetText.bind(this, val)}
@@ -3695,6 +3659,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     selectedOfferDetails={this.props.selectedOfferDetails}
                     channel={channel}
                     eventContextTags={this.props?.eventContextTags}
+                    restrictPersonalization={this.props.restrictPersonalization}
+                    waitEventContextTags={this.props?.waitEventContextTags}
+                    getPopupContainer={this.props.tagListGetPopupContainer}
+                    popoverOverlayStyle={this.props.tagListPopoverOverlayStyle}
+                    popoverOverlayClassName={this.props.tagListPopoverOverlayClassName}
                   />
                 </CapColumn>
               );
@@ -3741,11 +3710,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     userLocale={this.state.translationLang}
                     selectedOfferDetails={this.props.selectedOfferDetails}
                     eventContextTags={this.props?.eventContextTags}
+                    waitEventContextTags={this.props?.waitEventContextTags}
                     moduleFilterEnabled={moduleFilterEnabledForCapTagList}
                     containerStyle={val.style || {}}
                     inputProps={val.inputProps || {}}
                     showInput={val.showInput !== false}
                     showTagList={val.showTagList !== false}
+                    restrictPersonalization={this.props.restrictPersonalization}
                   />
                 </CapColumn>
               );
@@ -3971,7 +3942,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.liquidFlow() && "error-boundary"}  `}
+                  className={(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.isLiquidFlowSupportedByChannel() ? "error-boundary" : ""}
                 >
                   <CKEditor
                     id={val.id}
@@ -4015,7 +3986,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.liquidFlow() && "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.isLiquidFlowSupportedByChannel() ? "error-boundary" : ""}>
                 <BeeEditor
                   uid={uuid}
                   tokenData={beeToken}
@@ -4034,6 +4005,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   onContextChange={this.props.onContextChange}
                   moduleFilterEnabled={isModuleFilterEnabled}
                   eventContextTags={this.props?.eventContextTags}
+                  waitEventContextTags={this.props?.waitEventContextTags}
                 />
               </CapColumn>
             );
@@ -4301,7 +4273,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
     return (
-      <CapSpin spinning={Boolean((this.liquidFlow() && this.props.liquidExtractionInProgress) || this.props.metaDataStatus === REQUEST)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
+      <CapSpin spinning={Boolean((this.isLiquidFlowSupportedByChannel() && this.props.liquidExtractionInProgress) || this.props.metaDataStatus === REQUEST)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
       <CapRow>
         {this.props.schema && this.renderForm()}
         <SlideBox
@@ -4336,6 +4308,7 @@ FormBuilder.defaultProps = {
   userLocale: localStorage.getItem('jlocale') || 'en',
   showLiquidErrorInFooter: () => {},
   metaDataStatus: "",
+  waitEventContextTags: {},
   isTestAndPreviewMode: false, // Default to false to maintain existing behavior
 };
 
@@ -4384,11 +4357,16 @@ FormBuilder.propTypes = {
   type: PropTypes.string.isRequired,
   isEmailLoading: PropTypes.bool.isRequired,
   moduleType: PropTypes.string.isRequired,
-  showLiquidErrorInFooter: PropTypes.bool.isRequired,
+  showLiquidErrorInFooter: PropTypes.func.isRequired,
   eventContextTags: PropTypes.array.isRequired,
+  waitEventContextTags: PropTypes.object,
   forwardedTags: PropTypes.object.isRequired,
   isLoyaltyModule: PropTypes.bool.isRequired,
   isTestAndPreviewMode: PropTypes.bool, // Add new prop type
+  restrictPersonalization: PropTypes.bool,
+  tagListGetPopupContainer: PropTypes.func,
+  tagListPopoverOverlayStyle: PropTypes.object,
+  tagListPopoverOverlayClassName: PropTypes.string,
 };
 
 const mapStateToProps = createStructuredSelector({