@capillarytech/creatives-library 8.0.87-alpha.4 → 8.0.87-alpha.6

package/initialState.js

@@ -50,4 +50,5 @@ export default {
   facebook: {
 
   },
+  metaTagsStatus: '',
 };

package/package.json

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

package/services/api.js

@@ -569,4 +569,14 @@ export const getLiquidTags = (content) => {
   return request(url, getAPICallObject("POST", { content }, false, true));
 };
 
+export const postMetaId = (payload) => {
+  const url = `${API_ENDPOINT}/templates/metaId`;
+  // TODO: remove this after testing
+  return {
+    status: true,
+    metaId: "2334",
+  };
+  return request(url, getAPICallObject('POST', payload));
+};
+
 export {request, getAPICallObject};

package/v2Components/FormBuilder/index.js

@@ -44,7 +44,7 @@ import EDMEditor from "../Edmeditor";
 import BeeEditor from '../../v2Containers/BeeEditor';
 import CustomPopOver from '../CustomPopOver';
 import messages from './messages';
-import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetails } from "../../v2Containers/Cap/selectors";
+import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetails, selectMetaTagsStatus } from "../../v2Containers/Cap/selectors";
 import * as actions from "../../v2Containers/Cap/actions";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
@@ -82,6 +82,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     super(props);
     this.state = {
       formData: {},
+      prevFormData: {},
       errorData: {},
       currentTab: 1,
       currentLangTab: 'en',
@@ -140,7 +141,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   componentWillMount() {
     this.setState({usingTabContainer: this.props.usingTabContainer ? this.props.usingTabContainer : false});
     if (this.props.formData && (this.props.isEdit || (!this.props.isEdit && !_.isEmpty(this.props.formData)))) {
-      this.setState({formData: this.props.formData}, () => {
+      console.log('**** componentWillMount: ', {
+        formData: this.props.formData,
+        prevFormData: this.props.formData
+      });
+      this.setState({
+        formData: this.props.formData, 
+        prevFormData: this.props.formData
+      }, () => {
         // if (!this.props.isNewVersionFlow) {
         this.initialiseForm(this.props.schema, false, true);
         // }
@@ -172,6 +180,32 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     // }
     if (nextProps.isEdit) {
       if (!_.isEqual(nextProps.formData, this.state.formData) && !_.isEmpty(nextProps.formData)) {
+
+        const oldContent = convert(this.state.prevFormData?.base?.en?.["template-content"]);
+        const newContent = convert(this.state.formData?.base?.en?.["template-content"]);
+        console.log("**** componentWillReceiveProps: ", {
+          formData: this.state.formData,
+          prevFormData: this.state.prevFormData,
+          nextPropsFormData: nextProps.formData
+        });
+        if (!_.isEmpty(oldContent)){
+          console.log("**** oldContent is empty: ", {
+            oldContent,
+            newContent
+          });
+          this.setState({
+            prevFormData: nextProps.formData
+          });
+        } else if (oldContent !== newContent) {
+            console.log("**** oldContent !== newContent: ", {
+              oldContent,
+              newContent
+            });
+            this.setState({
+              prevFormData: this.state.formData
+            });
+          }
+        
         if (type === 'embedded' && !isLibraryModule) { //TODO: has to be checked and changed.
           this.setState({checkValidation: true, formData: nextProps.formData}, () => {
             this.validateForm();
@@ -1064,7 +1098,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   };
   handleLiquidTemplateSubmit =(templateContent) => {
     if(templateContent){this.setState((prevState) => {
+      console.log('**** handleLiquidTemplateSubmit: ', { prevState, templateContent });
       return {
+        // prevFormData: { ...prevState.formData },
         formData: {
           ...prevState?.formData,
           base: {
@@ -1077,11 +1113,81 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       };
     }, () => {
-      if (this.props.onSubmit) {
-        this.props.onSubmit(this.state.formData);
-      }
+      this.metaIDSaveWrapper();
     });}
   }
+
+  checkDiffInContent = () => {
+    //oldCOntent will be prop based
+    //newContent will be state based
+    //newcontent is this.state.formData?.base?.en?.["template-content"]
+    //oldContent is this.props.formData?.base?.en?.["template-content"]
+    //will check if the new content has any new tags or not
+    const oldContent = convert(this.state.prevFormData?.base?.en?.["template-content"]);
+    const newContent = convert(this.state.formData?.base?.en?.["template-content"]);
+    console.log("**** checkDiffInContent", { oldContent, newContent });
+    if (_.isEmpty(oldContent)) {
+      return false;
+    } else if (!_.isEqual(oldContent, newContent)) {
+      return true;
+    }
+    return false;
+  };
+  
+  metaIDSaveWrapper = () => {
+    const {
+      actionName,
+      actionId,
+      ouId,
+      clientName,
+      module, 
+      metaId,
+      setMetaId,
+    } = this.props.loyaltyMetaData;
+    const handleMetaIDResult = (result) => {
+      console.log("**** handleMetaIDResult: 1", { result });
+      if (result.status && this.props.onSubmit) {
+        console.log("**** handleMetaIDResult: 2", { result });
+        setMetaId(result?.metaId);
+        this.props.onSubmit(this.state.formData);
+      } else {
+        // this.setState({ metaID: null });
+        this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage); //add a custom message
+        this.props.stopValidation();
+        return;
+      }
+    };
+    console.log("**** metaIDSaveWrapper: BODY", { actionName, actionId, ouId, clientName, module, metaId, setMetaId, messageDetails: this.props.messageDetails });
+    const content = this.state.formData?.base?.en?.["template-content"] || "";
+    console.log("**** metaIDSaveWrapper: checkDiffInContent: ", this.checkDiffInContent());
+    // Only generate metaId for loyalty module and specific action
+    if (this.props.isLoyaltyModule && actionName === 'SEND_COMMUNICATION_ACTION') {
+      if (this.checkDiffInContent()) {
+        //need to pass payload , this will be same as the payload for template creation/edit api
+        const payload = {
+          ouId: ouId || -1,
+          clientName: clientName || "EMF",
+          sourceEntityId: actionId,
+          module: module,
+          executionParams: {},
+          content,
+          ...this.props.messageDetails,
+          channel: this.props.messageDetails?.type
+        };
+        console.log("**** metaIDSaveWrapper: payload: ", {
+          payload,
+          props: this.props,
+          state: this.state
+        });
+        this.props.actions.postMetaId(payload, handleMetaIDResult);
+      } else {
+        this.props.onSubmit(this.state.formData);
+      }
+    } else {
+      this.props.onSubmit(this.state.formData);
+    }
+  };
+  
   saveForm(saveForm) {
     if (this.props.isNewVersionFlow && !saveForm) {
       this.props.getValidationData();
@@ -1156,7 +1262,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         };
         this.props.actions.getLiquidTags(preprocessHtml(content), handleResult);
       } else {
-        this.props.onSubmit(this.state.formData);
+        this.metaIDSaveWrapper();
       }
     } else {
       this.setState({checkValidation: true});
@@ -3793,7 +3899,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
     return (
-      <CapSpin spinning={Boolean(this.liquidFlow && this.props.liquidExtractionInProgress)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
+      <CapSpin spinning={Boolean((this.liquidFlow && this.props.liquidExtractionInProgress) || this.props.metaIdStatus === 'REQUEST')} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
       <CapRow>
         {this.props.schema && this.renderForm()}
         <SlideBox
@@ -3827,6 +3933,9 @@ FormBuilder.defaultProps = {
   isNewVersionFlow: false,
   userLocale: localStorage.getItem('jlocale') || 'en',
   showLiquidErrorInFooter: () => {},
+  metaIdStatus: false,
+  isLoyaltyModule: false,
+  loyaltyMetaData: {},
 };
 
 FormBuilder.propTypes = {
@@ -3875,11 +3984,13 @@ FormBuilder.propTypes = {
   currentOrgDetails: PropTypes.object,
   liquidExtractionInProgress: PropTypes.bool,
   showLiquidErrorInFooter: PropTypes.func,
+  loyaltyMetaData: PropTypes.object
 };
 
 const mapStateToProps = createStructuredSelector({
   currentOrgDetails: selectCurrentOrgDetails(),
   liquidExtractionInProgress: selectLiquidStateDetails(),
+  metaIdStatus: selectMetaTagsStatus(),
   metaEntities: makeSelectMetaEntities(),
 });
 

package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap

@@ -303,7 +303,7 @@ exports[`Test Templates container Should render correct preview component for za
             className="preview-text"
             type="label1"
           >
-            Preview of the template is generated on the Zalo platform. Click on 'Open preview' to view it in a new tab
+            Preview of the template is generated on the Zalo platform. Click on ‘Open preview’ to view it in a new tab
           </CapLabel>
         </CapRow>
         <CapRow>

package/v2Containers/Cap/actions.js

@@ -85,3 +85,12 @@ export const getLiquidTags = (data,callback) => {
     callback,
   };
 };
+
+export const postMetaId = (data, callback) => {
+  console.log("postMetaId action", data, callback);
+  return {
+    type: types.GET_META_ID_REQUEST,
+    data,
+    callback,
+  };
+};

package/v2Containers/Cap/constants.js

@@ -63,3 +63,7 @@ export const DEFAULT_MODULE = 'creatives';
 export const GET_LIQUID_TAGS_FAILURE = 'cap/GET_LIQUID_TAGS_FAILURE_V2';
 export const GET_LIQUID_TAGS_REQUEST = 'cap/GET_LIQUID_TAGS_REQUEST_V2';
 export const GET_LIQUID_TAGS_SUCCESS = 'cap/GET_LIQUID_TAGS_SUCCESS_V2';
+
+export const GET_META_ID_FAILURE = 'cap/GET_META_ID_FAILURE_V2';
+export const GET_META_ID_REQUEST = 'cap/GET_META_ID_REQUEST_V2';
+export const GET_META_ID_SUCCESS = 'cap/GET_META_ID_SUCCESS_V2';

package/v2Containers/Cap/reducer.js

@@ -199,6 +199,12 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state
         .set('demoVideoAndLinkJSONStatus', types.FAILURE)
         .set('demoVideoAndLinkJSONError', action?.error);
+    case types.GET_META_ID_REQUEST:
+      return state.set('metaTagsStatus', types.REQUEST);
+    case types.GET_META_ID_SUCCESS:
+      return state.set('metaTagsStatus', types.SUCCESS);
+    case types.GET_META_ID_FAILURE:
+      return state.set('metaTagsStatus', types.FAILURE);
     default:
       return state;
   }

package/v2Containers/Cap/sagas.js

@@ -186,6 +186,28 @@ const getTopbarData = (parentModule) => {
   }
 };
 
+export function* postMetaId(action) {
+  try {
+    console.log("postMetaId saga", action);
+    // const result = yield call(Api.postMetaId, action?.data);
+    const result = {
+      status: true,
+      metaId: "2334",
+    };
+    console.log("postMetaId saga result", result);
+    if (result) {
+      if (action?.callback) {
+        yield call(action?.callback, result);
+      }
+      yield put({ type: types.GET_META_ID_SUCCESS, result });
+    } else {
+      yield put({ type: types.GET_META_ID_FAILURE });
+    }
+  } catch (error) {
+    yield put({ type: types.GET_META_ID_FAILURE, error });
+  }
+}
+
 function* getTopbarMenuData(params) {
   const {parentModule} = params;
   try {
@@ -225,6 +247,10 @@ export function* watchLiquidEntity() {
   yield takeLatest(types.GET_LIQUID_TAGS_REQUEST, getLiquidTags);
 }
 
+export function* watchMetaId() {
+  yield takeLatest(types.GET_META_ID_REQUEST, postMetaId);
+}
+
 function* watchForOrgChange() {
   yield takeLatest(types.SWITCH_ORG_REQUEST, switchOrg);
 }
@@ -257,6 +283,7 @@ export default [
   watchGetTopbarMenuData,
   watchForGetVideosConfig,
   watchLiquidEntity,
+  watchMetaId,
 ];
 
 
@@ -268,6 +295,7 @@ export function* capSagaForFetchSchemaForEntity() {
 export function* capSagaLiquidEntity() {
   yield all([
     watchLiquidEntity(),
+    watchMetaId(),
   ]);
 };
 
@@ -279,5 +307,6 @@ export function* v2CapSagas() {
     watchForFetchUserInfo(),
     watchGetTopbarMenuData(),
     watchForGetVideosConfig(),
+    watchMetaId(),
   ]);
 }

package/v2Containers/Cap/selectors.js

@@ -72,6 +72,11 @@ const selectLiquidStateDetails = () => createSelector(
   (globalState) => globalState.get('fetchingLiquidTags')
 );
 
+const selectMetaTagsStatus = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('metaTagsStatus')
+);
+
 const makeSelectFetchingSchema = () => createSelector(
   selectCapDomain,
   (globalState) => globalState.get('fetchingSchema')
@@ -113,4 +118,5 @@ export {
   makeSelectFetchingSchemaError,
   makeSelectDemoVideoAndLink,
   selectLiquidStateDetails,
+  selectMetaTagsStatus,
 };

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -158,6 +158,7 @@ export function SlideBoxContent(props) {
       hostName = '',
       eventContextTags,
       isLoyaltyModule,
+      loyaltyMetaData = {},
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -514,6 +515,8 @@ export function SlideBoxContent(props) {
           onCreateComplete={onCreateComplete}
           smsRegister={smsRegister}
           eventContextTags={eventContextTags}
+          loyaltyMetaData={loyaltyMetaData}
+          messageDetails={messageDetails}
         />
       )}
       {isEditFTP && (
@@ -615,6 +618,8 @@ export function SlideBoxContent(props) {
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         eventContextTags={eventContextTags}
         isLoyaltyModule={isLoyaltyModule}
+        loyaltyMetaData={loyaltyMetaData}
+        messageDetails={messageDetails}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -645,6 +650,8 @@ export function SlideBoxContent(props) {
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         eventContextTags={eventContextTags}
         isLoyaltyModule={isLoyaltyModule}
+        loyaltyMetaData={loyaltyMetaData}
+        messageDetails={messageDetails}
       />
         )}
       {isEditMPush &&
@@ -671,6 +678,8 @@ export function SlideBoxContent(props) {
           hideTestAndPreviewBtn={hideTestAndPreviewBtn}
           creativesMode={creativesMode}
           eventContextTags={eventContextTags}
+          loyaltyMetaData={loyaltyMetaData}
+          messageDetails={messageDetails}
         />
         }
       {isCreateMPush &&
@@ -700,6 +709,8 @@ export function SlideBoxContent(props) {
           hideTestAndPreviewBtn={hideTestAndPreviewBtn}
           onTestContentClicked={onTestContentClicked}
           eventContextTags={eventContextTags}
+          loyaltyMetaData={loyaltyMetaData}
+          messageDetails={messageDetails}
         />
       }
       {

package/v2Containers/CreativesContainer/index.js

@@ -75,6 +75,7 @@ const SlideBoxWrapper = styled.div`
 `;
 export class Creatives extends React.Component {
   constructor(props) {
+    //send metaId and setMetaId from loyalty module in props
     super(props);
     this.state = {
       isLoadingContent: true,
@@ -88,6 +89,7 @@ export class Creatives extends React.Component {
       weChatMaptemplateStep: 0,
       isLiquidValidationError: false,
       errorMessages: [],
+      metaId: null,
     };
     this.creativesTemplateSteps = {
       1: 'modeSelection',
@@ -1272,6 +1274,7 @@ export class Creatives extends React.Component {
       enableNewChannels,
       eventContextTags,
       isLoyaltyModule,
+      loyaltyMetaData = {},
     } = this.props;
     const mapTemplateCreate =
       slidBoxContent === "createTemplate" &&
@@ -1377,6 +1380,7 @@ export class Creatives extends React.Component {
               hostName={this.props?.hostName || ''}
               eventContextTags={eventContextTags}
               isLoyaltyModule={isLoyaltyModule}
+              loyaltyMetaData={loyaltyMetaData}
             />
           )}
           footer={this.shouldShowFooter() && (

package/v2Containers/Email/index.js

@@ -2747,6 +2747,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   eventContextTags={this.props?.eventContextTags}
                   forwardedTags={this.props?.forwardedTags}
                   isLoyaltyModule={this.props?.isLoyaltyModule}
+                  messageDetails={this.props?.messageDetails}
+                  loyaltyMetaData={this.props?.loyaltyMetaData}
               /> : ''}
             </Col>
           </Row>

package/v2Containers/EmailWrapper/index.js

@@ -229,6 +229,8 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       eventContextTags,
       // Flag to enable loyalty module specific features in the email editor
       isLoyaltyModule,
+      loyaltyMetaData = {},
+      messageDetails = {},
     } = this.props;
     const {
       templateName,
@@ -303,6 +305,8 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 moduleType={moduleType}
                 eventContextTags={eventContextTags}
                 isLoyaltyModule={isLoyaltyModule}
+                loyaltyMetaData={loyaltyMetaData}
+                messageDetails={messageDetails}
               />}
               {!isShowEmailCreate && (
                 <CmsTemplatesComponent

package/v2Containers/MobilePush/Edit/index.js

@@ -1991,6 +1991,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
+                loyaltyMetaData={this.props?.loyaltyMetaData}
+                messageDetails={this.props?.messageDetails}
               />}
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&

package/v2Containers/MobilepushWrapper/index.js

@@ -72,7 +72,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
   }
 
   render() {
-    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = []} = this.props;
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = [], loyaltyMetaData = {}, messageDetails = {}} = this.props;
     const {templateName} = this.state;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
@@ -120,6 +120,8 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               templateData={templateData}
               hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
               eventContextTags={eventContextTags}
+              loyaltyMetaData={loyaltyMetaData}
+              messageDetails={messageDetails}
           />
 
 

package/v2Containers/Sms/Create/index.js

@@ -994,6 +994,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 onTestContentClicked={this.props.onTestContentClicked}
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 eventContextTags={this.props?.eventContextTags}
+                loyaltyMetaData={this.props?.loyaltyMetaData}
+                messageDetails={this.props?.messageDetails}
               />
             </CapColumn>
           </CapRow>

package/v2Containers/Sms/Edit/index.js

@@ -992,6 +992,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 onTestContentClicked={this.props.onTestContentClicked}
                 eventContextTags={this.props?.eventContextTags}
+                loyaltyMetaData={this.props?.loyaltyMetaData}
+                messageDetails={this.props?.messageDetails}
               />
             </CapColumn>
           </CapRow>

package/v2Containers/SmsWrapper/index.js

@@ -30,6 +30,8 @@ const SmsWrapper = (props) => {
     smsRegister,
     onShowTemplates,
     eventContextTags,
+    loyaltyMetaData = {},
+    messageDetails = {},
   } = props;
 
   const smsProps = {
@@ -46,6 +48,8 @@ const SmsWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
     eventContextTags,
+    loyaltyMetaData,
+    messageDetails,
   };
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   return <>

package/v2Containers/Zalo/index.js

@@ -278,50 +278,31 @@ export const Zalo = (props) => {
     return tagError;
   };
 
-  const handleErrorValidation = (value, field) => {
+  //this function is used for checking errror validation in this it validate tags error and length error
+  const handleErrorValidation = (e, field) => {
     const { minLength, maxLength } = field;
-    let error = '';
-    let warning = '';
-    // Check if the value contains any tags
-    const hasTags = /{{.*?}}/.test(value);
-    // Validate tags if present
-    if (value) {
-      const tagError = tagValidationErrorMessage(value);
-      if (tagError) {
-        return { error: tagError };
-      }
-    }
-
-    // Length validation
-    if (!value || value.length <= minLength || value.length > maxLength) {
-      if (hasTags) {
-        // Show warning instead of error for tag-based content
-        warning = formatMessage(messages.tagLengthWarning, {
-          maxLength,
-        });
-      } else {
-        // Show error for static content
-        error = formatMessage(messages.maxMinLengthMessage, {
-          minLength,
-          maxLength,
-        });
-      }
+    let error = e ? tagValidationErrorMessage(e) : '';
+    if (!e || e.length <= minLength || e.length > maxLength) {
+      error = formatMessage(messages.maxMinLengthMessage, {
+        minLength,
+        maxLength,
+      });
     }
-    return { error, warning };
+    return error;
   };
 
+  // this function is used for handle form data change in this also handle error validtion on change of value
   const handleFormDataChange = (e, field) => {
     const {
       target: { value },
     } = e;
     const updatedZaloTemplateInfo = templateListParams?.map((listParams) => {
       if (listParams?.name === field?.name) {
-        const { error, warning } = handleErrorValidation(value, field);
+        const error = handleErrorValidation(value, field);
         return {
           ...listParams,
           value,
           error,
-          warning,
         };
       }
       return listParams;
@@ -330,26 +311,19 @@ export const Zalo = (props) => {
   };
 
   const renderTextBoxesForListParams = (listParam) => {
-    const { name = '', error = '', warning = '', value = '' } = listParam;
+    const { name, error, value } = listParam;
     return (
-      <>
-        <CapInput
-          id={`zalo-${name}`}
-          onChange={(e) => handleFormDataChange(e, listParam)}
-          errorMessage={error}
-          placeholder={formatMessage(messages.addVariableWithMessage)}
-          defaultValue={value || ''}
-          value={value || ''}
-          size="default"
-          onFocus={() => setTextAreaId(name)}
-          disabled={isFullMode}
-        />
-        {warning && (
-          <CapLabel type="warning" className="variable-field-warning">
-            {warning}
-          </CapLabel>
-        )}
-      </>
+      <CapInput
+        id={`zalo-${name}`}
+        onChange={(e) => handleFormDataChange(e, listParam)}
+        errorMessage={error}
+        placeholder={formatMessage(messages.addVariableWithMessage)}
+        defaultValue={value || ''}
+        value={value || ''}
+        size="default"
+        onFocus={() => setTextAreaId(name)}
+        disabled={isFullMode}
+      />
     );
   };
 
@@ -377,9 +351,11 @@ export const Zalo = (props) => {
   const isEditDoneDisabled = () => {
     let disableCheck = false;
     templateListParams?.forEach((listParams) => {
-      const { error = '' } = listParams;
-      // Only check for errors, not warnings
-      if (error) {
+      const { error, value } = listParams;
+      const errorMessage = !error
+        ? handleErrorValidation(value, listParams)
+        : error;
+      if (errorMessage) {
         disableCheck = true;
       }
     });

package/v2Containers/Zalo/messages.js

@@ -33,7 +33,7 @@ export default defineMessages({
   },
   previewText: {
     id: `${prefix}.previewText`,
-    defaultMessage: `Preview of the template is generated on the Zalo platform. Click on 'Open preview' to view it in a new tab`,
+    defaultMessage: `Preview of the template is generated on the Zalo platform. Click on ‘Open preview’ to view it in a new tab`,
   },
   openPreview: {
     id: `${prefix}.openPreview`,
@@ -83,8 +83,4 @@ export default defineMessages({
     id: `${prefix}.btnDisabledTooltip`,
     defaultMessage: 'Please add all mandatory fields to proceed further',
   },
-  tagLengthWarning: {
-    id: 'app.containers.Zalo.tagLengthWarning',
-    defaultMessage: 'If the character count of the tag value exceeds {maxLength}, the campaign will fail.',
-  },
 });