@capillarytech/creatives-library 7.17.40-alpha.0 → 7.17.41

package/components/CapTagList/index.js

@@ -183,7 +183,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           onVisibleChange={this.togglePopoverVisibility}
           content={<div>
             <Spin tip="Getting tags..." spinning={this.props.loading}>
-              <Search style={{ marginBottom: 8, width: '250px'}} placeholder={this.props.intl.formatMessage(messages.searchText)} onChange={this.onChange} />
+              <Search style={{ marginBottom: 8, width: '250px'}} placeholder="Search" onChange={this.onChange} />
               {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue="All" options={options}>
               </CapSelect> : ''}
               <Tree

package/components/CapTagList/messages.js

@@ -34,8 +34,4 @@ export default defineMessages({
     id: 'creatives.components.CapTagList.loyalty',
     defaultMessage: 'Loyalty',
   },
-  "searchText": {
-    id: 'creatives.components.CapTagList.searchText',
-    defaultMessage: 'Search',
-  },
 });

package/components/FormBuilder/index.js

@@ -1516,8 +1516,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       this.setState({errorData: formData});
     } else {
       const tempTab = ifError ? currentTab : this.state.currentTab;
-      const version = `${this.props.intl.formatMessage(messages.version)} ${this.state.currentTab}`;
-      formData[tabCount].name = `${this.props.intl.formatMessage(messages.copyOf)} ${formData[tempTab - 1].name ? formData[tempTab - 1].name : version}`;
+      const version = `Version ${this.state.currentTab}`;
+      formData[tabCount].name = `Copy of ${formData[tempTab - 1].name ? formData[tempTab - 1].name : version}`;
       formData[tabCount].base = false;
       const initialTab = this.state.currentTab;
       this.setState({formData, tabCount: tabCount + 1, currentTab: tabCount + 1, tabKey: formData[tabCount].tabKey}, () => {

package/components/FormBuilder/messages.js

@@ -54,12 +54,4 @@ export default defineMessages({
     id: 'creatives.components.FormBuilder.ok',
     defaultMessage: 'Ok',
   },
-  copyOf: {
-    id: 'creatives.components.FormBuilder.copyOf',
-    defaultMessage: 'Copy of',
-  },
-  Version: {
-    id: 'creatives.components.FormBuilder.version',
-    defaultMessage: 'Version',
-  },
 });

package/containers/App/constants.js

@@ -7,8 +7,6 @@ export const TRAI_DLT = 'TRAI_DLT';
 export const CARD_BASED_SCOPE = 'CARD_BASED_SCOPE';
 export const HOSPITALITY_BASED_SCOPE = 'HOSPITALITY_BASED_SCOPE';
 export const REGISTRATION_CUSTOM_FIELD = 'Registration custom fields';
-export const GIFT_CARDS = 'GIFT_CARDS';
-export const PROMO_ENGINE = 'PROMO_ENGINE';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
 export const EXTENDED_TAG = 'ExtendedTagMessage';
@@ -45,29 +43,5 @@ export const HOSPITALITY_RELATED_TAGS = [
   "email",
   "resID_Source",
 ];
-export const GIFT_VOUCHER_RELATED_TAGS = [
-  "gift_voucher",
-  "gift_voucher_expiry_date.FORMAT_1",
-  "gift_voucher_expiry_date.FORMAT_2",
-  "gift_voucher_expiry_date.FORMAT_3",
-  "gift_voucher_expiry_date.FORMAT_4",
-  "gift_voucher_expiry_date.FORMAT_5",
-  "gift_voucher_expiry_date.FORMAT_6",
-  "gift_voucher_expiry_date.FORMAT_7",
-  "gift_voucher_expiry_date.FORMAT_8",
-  "gift_voucher_expiry_date",
-];
-export const PROMO_ENGINE_RELATED_TAGS = [
-  "promotion",
-  "promotion_expiry_date.FORMAT_1",
-  "promotion_expiry_date.FORMAT_2",
-  "promotion_expiry_date.FORMAT_3",
-  "promotion_expiry_date.FORMAT_4",
-  "promotion_expiry_date.FORMAT_5",
-  "promotion_expiry_date.FORMAT_6",
-  "promotion_expiry_date.FORMAT_7",
-  "promotion_expiry_date.FORMAT_8",
-  "promotion_expiry_date",
-];
 
 export const CUSTOMER_BARCODE_TAG = "customer_barcode";

package/containers/Assets/Gallery/index.js

@@ -336,7 +336,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
           <CapInput
             className="search-text"
             style={{width: '210px'}}
-            placeholder={this.props.intl.formatMessage(messages.searchText)}
+            placeholder="Search"
             prefix={<i className="material-icons" style={{color: '#707070', fontSize: '16px'}}>search</i>}
             value={this.state.searchText}
             onChange={(e) => this.searchAsset(e.target.value)}

package/containers/Assets/Gallery/messages.js

@@ -86,8 +86,4 @@ export default defineMessages({
     id: 'creatives.containers.Assets.Gallery.assetDeleteFailed',
     defaultMessage: 'Image deletion failed.',
   },
-  searchText: {
-    id: 'creatives.components.CapTagList.searchText',
-    defaultMessage: 'Search',
-  },
 });

package/containers/Email/index.js

@@ -3104,7 +3104,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           <CapInput
             className="search-text"
             style={{width: '210px'}}
-            placeholder={this.props.intl.formatMessage(messages.searchText)}
+            placeholder="Search"
             prefix={<i className="material-icons" style={{color: '#707070', fontSize: '16px'}}>search</i>}
             value={this.state.searchText}
             onChange={(e) => this.searchAsset(e.target.value)}

package/containers/Templates/index.js

@@ -866,7 +866,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   duplicateTemplate(template) {
     
     const duplicateObj = _.cloneDeep(template);
-    duplicateObj.name = `${this.props.intl.formatMessage(messages.copyOf)} ${template.name} ${moment().format('MM-DD-YYYY HH:mm:ss')}`;
+    duplicateObj.name = `Copy of ${template.name} ${moment().format('MM-DD-YYYY HH:mm:ss')}`;
     delete duplicateObj._id;
     if (this.state.channel.toLowerCase() === "sms") {
       this.props.smsActions.createTemplate(duplicateObj);

package/containers/Templates/messages.js

@@ -330,8 +330,4 @@ export default defineMessages({
     id: 'creatives.containers.Templates.Line',
     defaultMessage: 'Line',
   },
-  "copyOf": {
-    id: 'creatives.containers.Templates.copyOf',
-    defaultMessage: 'Copy of',
-  },
 });

package/index.js

@@ -124,8 +124,8 @@ const ViberContainer = {Viber, viberReducer, viberSaga};
 const FacebookPreviewContainer = { FacebookPreview, facebookPreviewReducer, facebookPreviewSaga };
 const SmsTraiContainer = {SmsTraiCreate, SmsTraiCreateReducer, SmsTraiCreateSaga};
 const WhatsappContainer = { Whatsapp, whatsappReducer, whatsappSaga };
-const zaloContainer = { Zalo, zaloReducer, zaloSaga };
 const RcsContainer = { Rcs, rcsReducer, rcsSaga };
+const ZaloContainer = { Zalo, zaloReducer, zaloSaga };
 
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 const FTPContainer = {FTP, FTPReducer, FTPSagas};
@@ -173,6 +173,6 @@ export { CapContainer,
   FacebookPreviewContainer,
   SmsTraiContainer,
   WhatsappContainer,
-  zaloContainer,
   RcsContainer,
+  ZaloContainer,
 };

package/package.json

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

package/services/api.js

@@ -90,7 +90,7 @@ function checkStatus(response) {
   const isLoginPage = window.location.pathname.indexOf('/login') !== -1;
   if (!isLoginPage) redirectIfUnauthenticated(response);
 
-  const error = new Error({ statusText, status });
+  const error = new Error(statusText);
   error.response = response;
   error.isError = true;
   error.status = status;
@@ -493,14 +493,14 @@ export const getSenderDetails = (channel, orgUnitId) => {
 export const getCdnTransformationConfig = () => {
   const url = `${API_ENDPOINT}/common/getCdnTransformationConfig`;
   return request(url, getAPICallObject('GET'));
-}
+};
 
 export const getS3UrlFileSizes = (data) => {
   const url = `${API_ENDPOINT}/assets/files/metadata`;
   return request(url, getAPICallObject('POST', data));
-}
+};
 
 export const getTemplateInfoById = ({id, username, oa_id, token}) => {
-    const url = `${API_ENDPOINT}/templates/${id}/Zalo?username=${username}&oa_id=${oa_id}&token=${token}`;
-    return request(url, getAPICallObject('GET'));
-  }
+  const url = `${API_ENDPOINT}/templates/${id}/Zalo?username=${username}&oa_id=${oa_id}&token=${token}`;
+  return request(url, getAPICallObject('GET'));
+};

package/utils/common.js

@@ -7,8 +7,6 @@ import {
   CARD_BASED_SCOPE,
   HOSPITALITY_RELATED_TAGS,
   HOSPITALITY_BASED_SCOPE,
-  GIFT_CARDS,
-  PROMO_ENGINE,
   EXTENDED_TAG,
   CUSTOMER_EXTENDED_FIELD,
   CUSTOM_TAG,
@@ -68,15 +66,7 @@ export const hasHospitalityBasedScope = Auth.hasFeatureAccess.bind(
   null,
   HOSPITALITY_BASED_SCOPE,
 );
-export const hasPromoFeature = Auth.hasFeatureAccess.bind(
-  null,
-  PROMO_ENGINE,
-);
 
-export const hasGiftVoucherFeature = Auth.hasFeatureAccess.bind(
-  null,
-  GIFT_CARDS,
-);
 export const hasJPLocaleHideFeatureEnabled = Auth.hasFeatureAccess.bind(
   null,
   JP_LOCALE_HIDE_FEATURE,
@@ -304,8 +294,8 @@ export const isTraiDLTEnable = (isFullMode, smsRegister) => {
   return isTraiDltFeature;
 };
 
-//Input: " Spaces In Input "---> Output: "spaces_in_input"
-export const intlKeyGenerator = (value = "") => String(value).replace(/[^a-zA-Z0-9_ ]/g, "").replace(/ /g, "_").toLowerCase();
+
+export const intlKeyGenerator = (value = "") => String(value).replace(/[^a-zA-Z0-9_]/g, "").toLowerCase();
 
 export const handleInjectedData = (data, scope) => {
   let tagType;
@@ -317,7 +307,6 @@ export const handleInjectedData = (data, scope) => {
       } else if (tag?.name === CUSTOMER_EXTENDED_FIELD) {
         tagType = EXTENDED_TAG;
       }
-
       if (tag?.name) {
         const name = tag.name;
         const key = intlKeyGenerator(name);
@@ -358,3 +347,7 @@ export const handleInjectedData = (data, scope) => {
   }
   return data;
 };
+
+export const handlePreviewInNewTab = (previewUrl) => {
+  window.open(previewUrl, '_blank');
+}

package/utils/tests/common.test.js

@@ -51,7 +51,7 @@ describe("handleInjectedData", () => {
     const result = handleInjectedData(data, "scope");
     const intlKey = intlKeyGenerator("scope");
     expect(intlKey).toEqual('scope');
-    expect(result.tag1.name).toEqual(<FormattedMessage defaultMessage="Registration Fields" id="scope.registration_fields" values={{}} />);
+    expect(result.tag1.name).toEqual(<FormattedMessage defaultMessage="Registration Fields" id="scope.registrationfields" values={{}} />);
   });
 
   it("adds tagType for Registration custom fields", () => {
@@ -65,7 +65,7 @@ describe("handleInjectedData", () => {
     const intlKey = intlKeyGenerator();
     expect(intlKey).toEqual('');
     expect(result.tag1.name).toEqual(
-      <FormattedMessage defaultMessage="Registration custom fields" id="scope.registration_custom_fields_name.CustomTagMessage" values={{}} />
+      <FormattedMessage defaultMessage="Registration custom fields" id="scope.registrationcustomfields_name.CustomTagMessage" values={{}} />
     );
   });
 
@@ -79,7 +79,7 @@ describe("handleInjectedData", () => {
     const result = handleInjectedData(data, "scope");
 
     expect(result.tag1.name).toEqual(
-      <FormattedMessage defaultMessage="Customer extended fields" id="scope.customer_extended_fields_name.ExtendedTagMessage" values={{}} />
+      <FormattedMessage defaultMessage="Customer extended fields" id="scope.customerextendedfields_name.ExtendedTagMessage" values={{}} />
     );
   });
   it("adds tagType for Customer extended fields fields", () => {
@@ -157,7 +157,7 @@ describe("handleInjectedData", () => {
     const result = handleInjectedData(data, "scope");
 
     expect(result.tag1.subtags.subtag1.desc).toEqual(
-      <FormattedMessage defaultMessage="Enter your first name" id="scope.enter_your_first_name" values={{}} />
+      <FormattedMessage defaultMessage="Enter your first name" id="scope.enteryourfirstname" values={{}} />
     );
   });
   it("replaces subtag name desc with intl key", () => {
@@ -175,7 +175,7 @@ describe("handleInjectedData", () => {
     const result = handleInjectedData(data, "scope");
 
     expect(result.tag1.subtags.subtag1.desc).toEqual(
-      <FormattedMessage defaultMessage="Enter your first name" id="scope.enter_your_first_name" values={{}} />
+      <FormattedMessage defaultMessage="Enter your first name" id="scope.enteryourfirstname" values={{}} />
     );
   });
 });

package/v2Components/CapTagList/index.js

@@ -321,7 +321,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           trigger="click"
           placement={translationLang === "ja-JP" && channel === 'EMAIL' ? "bottom" : "rightTop"}
           >
-          <CapButton isAddBtn type="flat">{label || ''}</CapButton>
+          <CapButton disabled={this?.props?.disabled} isAddBtn type="flat">{label || ''}</CapButton>
         </CapPopover>
         }
         <CapModal
@@ -358,6 +358,7 @@ CapTagList.propTypes = {
   disableTagsDetails: PropTypes.object,
   currentOrgDetails: PropTypes.object,
   channel: PropTypes.string,
+  disabled: PropTypes.bool
 };
 
 CapTagList.defaultValue = {

package/v2Components/FormBuilder/index.js

@@ -1669,7 +1669,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     } else {
       const tempTab = ifError ? currentTab : this.state.currentTab;
       const version = `Version ${this.state.currentTab}`;
-      formData[tabCount].name = `${this.props.intl.formatMessage(messages.copyOf)} ${formData[tempTab - 1].name ? formData[tempTab - 1].name : version}`;
+      formData[tabCount].name = `Copy of ${formData[tempTab - 1].name ? formData[tempTab - 1].name : version}`;
       formData[tabCount].base = false;
       const initialTab = this.state.currentTab;
       this.setState({formData, tabCount: tabCount + 1, currentTab: tabCount + 1, tabKey: formData[tabCount].tabKey}, () => {

package/v2Components/FormBuilder/messages.js

@@ -86,8 +86,4 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.imageReUpload',
     defaultMessage: 'Re upload',
   },
-  copyOf: {
-    id: 'creatives.componentsV2.FormBuilder.copyOf',
-    defaultMessage: 'Copy of',
-  },
 });

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -477,4 +477,44 @@
   position: absolute;
   right: -17px;
   bottom: -17px;
+}
+
+.zalo-preview-container {
+  text-align: center;
+
+  .preview-head {
+    font-weight: 500;
+    font-size: $FONT_SIZE_M;
+    color: $FONT_COLOR_01;
+  }
+
+  .preview-text {
+    font-weight: 400;
+    font-size: $FONT_SIZE_S;
+    padding-top: $CAP_SPACE_08;
+  }
+
+  .preview-link {
+    font-weight: 500;
+    font-size: $FONT_SIZE_M;
+    color: $FONT_COLOR_05;
+    margin-top: $CAP_SPACE_19;
+    cursor: pointer;
+
+    svg {
+      height: $CAP_SPACE_16;
+      width: $CAP_SPACE_16;
+    }
+  }
+}
+
+.zalo-preview-container-creative {
+  position: fixed;
+  padding-left: 72px;
+  padding-right: 110px;
+}
+
+.zalo-preview-container-campaign {
+  padding-left: 0px;
+  padding-right: 73px;
 }

package/v2Components/TemplatePreview/index.js

@@ -18,11 +18,14 @@ import {
   WECHAT,
   WHATSAPP,
   RCS,
+  ZALO
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg';
 import videoPlay from '../../assets/videoPlay.svg';
+import zaloMessage from '../../v2Containers/Zalo/messages';
+import { handlePreviewInNewTab } from '../../utils/common';
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const smsMobileIos = require('./assets/images/sms_mobile_ios.svg');
@@ -327,6 +330,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       return renderArray;
     };
 
+    const handlePreview = () => {
+      const {templatePreviewUrl = ''} = templateData;
+      handlePreviewInNewTab(templatePreviewUrl);
+    };
+
     const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
     const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
 
@@ -785,6 +793,32 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 ''
               )
             }
+            {
+              channel?.toUpperCase() === ZALO && (
+                <CapRow className={`zalo-preview-container ${templateData?.fullMode ? 'zalo-preview-container-creative' : 'zalo-preview-container-campaign'}`}>
+                  <CapRow>
+                    <CapLabel className="preview-head">
+                      {formatMessage(zaloMessage.previewHead)}
+                    </CapLabel>
+                  </CapRow>
+                  <CapRow>
+                    <CapLabel className="preview-text">
+                      {formatMessage(zaloMessage.previewText)}
+                    </CapLabel>
+                  </CapRow>
+                  <CapRow>
+                    <CapLabel
+                      data-testid="preview-link-button"
+                      onClick={handlePreview}
+                      className="preview-link"
+                    >
+                      {formatMessage(zaloMessage.openPreview)}{' '}
+                      <CapIcon type="open-in-new-light"></CapIcon>
+                    </CapLabel>
+                  </CapRow>
+                </CapRow>
+              )
+            }
             {
               channel?.toUpperCase() === RCS && (
                 <div className="shell-v2 align-center">

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

@@ -292,3 +292,50 @@ exports[`Test Templates container Should render correct preview component for wh
   </CapColumn>
 </CapRow>
 `;
+
+exports[`Test Templates container Should render correct preview component for zalo channel 1`] = `
+<CapRow>
+  <CapColumn
+    span={24}
+  >
+    <div
+      className="preview-container "
+    >
+      <CapRow
+        className="zalo-preview-container zalo-preview-container-campaign"
+      >
+        <CapRow>
+          <CapLabel
+            className="preview-head"
+            type="label1"
+          >
+            Preview
+          </CapLabel>
+        </CapRow>
+        <CapRow>
+          <CapLabel
+            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
+          </CapLabel>
+        </CapRow>
+        <CapRow>
+          <CapLabel
+            className="preview-link"
+            data-testid="preview-link-button"
+            onClick={[Function]}
+            type="label1"
+          >
+            Open Preview
+             
+            <CapIcon
+              type="open-in-new-light"
+            />
+          </CapLabel>
+        </CapRow>
+      </CapRow>
+    </div>
+  </CapColumn>
+</CapRow>
+`;

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

@@ -11,6 +11,7 @@ describe('Test Templates container', () => {
     content,
     whatsappAccountName,
     whatsappContentLen,
+    templateData
   ) => {
     renderedComponent = shallowWithIntl(
       <TemplatePreview
@@ -18,6 +19,7 @@ describe('Test Templates container', () => {
         content={content}
         whatsappAccountName={whatsappAccountName}
         whatsappContentLen={whatsappContentLen}
+        templateData={templateData}
       />,
     );
   };
@@ -61,6 +63,13 @@ describe('Test Templates container', () => {
     renderFunction('whatsapp', {}, 'test', 0);
     expect(renderedComponent).toMatchSnapshot();
   });
+  it('Should render correct preview component for zalo channel', () => {
+    renderFunction('zalo', {}, '', '', {
+      templatePreviewUrl: 'https://account.zalo.cloud/znspreview/-CL4HT4Hwza4v5ocK3pdVQ=='
+    });
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
   it('Should render correct preview component for rcs channel', () => {
     renderFunction('rcs', {
       rcsPreviewContent: {

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -213,7 +213,7 @@ export function SlideBoxContent(props) {
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
     isEditFTP = isEdit && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
-    isEditZalo = isEdit && channel === constants.ZALO
+    isEditZalo = isEdit && channel?.toUpperCase() === constants.ZALO;
   }
   const isDltEnabled = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
   const hasJPLocaleHideFeatureEnabled = commonUtil?.hasJPLocaleHideFeatureEnabled();
@@ -510,11 +510,17 @@ export function SlideBoxContent(props) {
       {
         isEditZalo &&
         <Zalo
-            templateData={templateData}
-            location={creativesLocationProps}
-            selectedOfferDetails={selectedOfferDetails}
-            getDefaultTags={type}
-            channel={channel}
+          isFullMode={isFullMode}
+          templateData={templateData}
+          getFormData={getFormData}
+          getDefaultTags={type}
+          forwardedTags={forwardedTags}
+          selectedOfferDetails={selectedOfferDetails}
+          location={{
+            pathname: `/zalo/edit`,
+            query,
+            search: '',
+          }}
         />
       }
       {

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -61,9 +61,8 @@ export function SlideBoxHeader(props) {
       email: <FormattedMessage {...messages.emailHeader} />,
       mobilepush: <FormattedMessage {...messages.pushNotificationHeader} />,
       wechat: <FormattedMessage {...messages.wechat} />,
-      line: <FormattedMessage {...messages.lineHeader} />,
-      no_communication: <FormattedMessage {...messages.noCommunication} />,
-      ftp: <FormattedMessage {...messages.ftp} />,
+      no_communication: 'NO_COMMUNICATION',
+      ftp: 'FTP',
       whatsapp: <FormattedMessage {...messages.whatsappTemplate} />,
       rcs: <FormattedMessage {...messages.rcsCreative} />,
       zalo: <FormattedMessage {...messages.zaloTemplate} />,