@capillarytech/creatives-library 6.9.5 → 6.9.7

package/v2Containers/Email/initialSchema.js

@@ -199,9 +199,24 @@ export const response = {
                               "getEditorInstanse",
                             ],
                           },
+                          // will remove once bee gets tested end to end
+                          // {
+                          //   id: "edmeditor",
+                          //   type: "edmeditor",
+                          //   metaType: "text",
+                          //   datatype: "string",
+                          //   required: true,
+                          //   onlyDisplay: true,
+                          //   standalone: false,
+                          //   width: 24,
+                          //   order: 2,
+                          //   customComponent: true,
+                          //   colStyle: { display: "none" },
+                          //   supportedEvents: [],
+                          // },
                           {
-                            id: "edmeditor",
-                            type: "edmeditor",
+                            id: "BEEeditor",
+                            type: "BEEeditor",
                             metaType: "text",
                             datatype: "string",
                             required: true,
@@ -365,7 +380,7 @@ export const response = {
                           styling: "semantic",
                           order: 3,
                           width: 2,
-                          offset: 1,
+                          offset: 4,
                           fluid: false,
                           onlyDisplay: true,
                           submitAction: "onTabOptionSelect",

package/v2Containers/Email/sagas.js

@@ -53,7 +53,7 @@ export function* getAllAssets(assetType, queryParams) {
 
 export function* getCmsSetting({cmsType, projectId, cmsMode, langId, isEdmSupport}) {
   try {
-    const result = yield call(Api.getCmsTemplateSettings, cmsType, projectId, cmsMode, langId, isEdmSupport);
+    const result = yield call(Api.getCmsTemplateSettingsV2, cmsType, projectId, cmsMode, langId, isEdmSupport);
 
     yield put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: result.data.response.cmsDetails });
   } catch (error) {
@@ -63,7 +63,7 @@ export function* getCmsSetting({cmsType, projectId, cmsMode, langId, isEdmSuppor
 
 export function* getCmsData({cmsType, projectId, langId}) {
   try {
-    const result = yield call(Api.getCmsTemplateData, cmsType, projectId, langId);
+    const result = yield call(Api.getCmsTemplateDataV2, cmsType, projectId, langId);
 
     yield put({ type: types.GET_CMS_EDITOR_DATA_SUCCESS, data: result.data.response.data, langId: result.data.response.langId });
   } catch (error) {

package/v2Containers/Email/selectors.js

@@ -26,9 +26,14 @@ const selectLoadingStatus = () => createSelector(
   selectEmailDomain(), (email) => email.createTemplateInProgress || (email.assetUploading !== undefined && email.assetUploading)
 );
 
+const makeSelectFetchingCmsData = () => createSelector(
+  selectEmailDomain(), (state) => state.get('fetchingCmsData')
+);
+
 export default makeSelectEmail;
 export {
   makeSelectEmail,
   makeSelectCreateResponse,
   selectLoadingStatus,
+  makeSelectFetchingCmsData,
 };

package/v2Containers/EmailWrapper/index.js

@@ -15,7 +15,13 @@ import styled from 'styled-components';
 import { CapRadioCard, CapNotification, CapInput, CapUploader, CapSpin, CapButton } from '@capillarytech/cap-ui-library';
 import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
-import { selectEmailLayout, selectCmsTemplates, selectEdmEditor, uploadSelector } from '../Templates/selectors';
+import {
+  selectEmailLayout,
+  selectCmsTemplates,
+  selectEdmEditor,
+  uploadSelector,
+  selectCmsTemplatesLoader,
+} from '../Templates/selectors';
 import * as templatesActionsCreators from '../Templates/actions';
 import Email from '../Email';
 import CmsTemplatesComponent from '../../v2Components/CmsTemplatesComponent';
@@ -76,7 +82,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       //document.getElementById('upload-email-template').click();
     } else if (step === "templateSelection" && !this.state.selectedCreateMode) {
       if (emailCreateMode === "editor" && !CmsTemplates) {
-        templatesActions.getEdmDefaultTemplates();
+        templatesActions.getDefaultBeeTemplates();
       }
     } else if (step === "createTemplateContent" && !this.state.selectedCreateMode) {
       if (emailCreateMode === 'upload' && !_.isEmpty(EmailLayout)) {
@@ -156,6 +162,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     const data = _.find(CmsTemplates, { _id: id });
 
     templatesActions.setEdmTemplate(data);
+    templatesActions.setBEETemplate(data);
     this.setState({
       selectedCreateMode: 'editor',
     });
@@ -188,6 +195,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       selectedOfferDetails,
       onPreviewContentClicked,
       onTestContentClicked,
+      cmsTemplatesLoader,
     } = this.props;
     const {
       templateName,
@@ -206,6 +214,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                   value={templateName}
                   labelPosition="top"
                   size="default"
+                  style={{ width: '68%'}}
                 />
               }
               <CardContainer>
@@ -251,7 +260,13 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 onPreviewContentClicked={onPreviewContentClicked}
                 onTestContentClicked={onTestContentClicked}
               />}
-              {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor} />}
+              {!isShowEmailCreate && (
+                <CmsTemplatesComponent
+                  cmsTemplates={CmsTemplates}
+                  handleEdmDefaultTemplateSelection={this.useEditor}
+                  cmsTemplatesLoader={cmsTemplatesLoader}
+                />
+              )}
             </div>
           }
         </CapSpin>
@@ -289,6 +304,7 @@ const mapStateToProps = createStructuredSelector({
   CmsTemplates: selectCmsTemplates(),
   SelectedEdmDefaultTemplate: selectEdmEditor(),
   isUploading: uploadSelector(),
+  cmsTemplatesLoader: selectCmsTemplatesLoader(),
 });
 
 function mapDispatchToProps(dispatch) {

package/v2Containers/TagList/index.js

@@ -242,8 +242,11 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
           tags={tags}
           onSelect={this.onSelect}
           label={this.props.label}
+          visibleTaglist={this.props.visibleTaglist}
+          hidePopover={this.props.hidePopover}
           onContextChange={this.getTagsforContext}
           moduleFilterEnabled={this.props.moduleFilterEnabled}
+          modalProps={this.props.modalProps}
         />
       </div>
     );
@@ -265,6 +268,9 @@ TagList.propTypes = {
   className: PropTypes.string,
   userLocale: PropTypes.string,
   selectedOfferDetails: PropTypes.array,
+  visibleTaglist: PropTypes.bool,
+  hidePopover: PropTypes.bool,
+  modalProps: PropTypes.any,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Templates/actions.js

@@ -1,117 +1,122 @@
-/*
- *
- * Templates actions
- *
- */
-
- import * as types from './constants';
-
- export function getAllTemplates(channel, queryParams) {
-   console.log('get all templates action trigereed', channel, queryParams);
-   return {
-     type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
-   };
- }
-
- export function resetTemplate() {
-   return {
-     type: types.RESET_TEMPLATE,
-   };
- }
-
- export function resetAccount() {
-   return {
-     type: types.RESET_ACCOUNT,
-   };
- }
-
- export function deleteTemplate(channel, id) {
-   console.log('delete template action trigereed', channel, id);
-   return {
-     type: types.DELETE_TEMPLATE_REQUEST, channel, id,
-   };
- }
-
- export function getUserList() {
-   return {
-     type: types.GET_USER_LIST_REQUEST,
-   };
- }
-
- export function getWeCrmAccounts(source) {
-   return {
-     type: types.GET_WECRM_ACCOUNTS_REQUEST, source,
-   };
- }
-
- export function setWeChatAccount(weChatAccount) {
-   console.log('setting wechat account', weChatAccount);
-   return {
-     type: types.SET_WECHAT_ACCOUNT,
-     weChatAccount,
-   };
- }
-
- export function setLineAccount(lineAccount) {
-  return {
-    type: types.SET_LINE_ACCOUNT,
-    lineAccount,
-  };
-}
-
- export function handleHtmlUpload(selectedTemplate) {
-   return {
-     type: types.SET_SELECTED_LAYOUT,
-     selectedTemplate,
-   };
- }
-
- export function handleZipUpload(selectedFile, successHandler, errorHandler) {
-   return {
-     type: types.SEND_ZIPPED_FILE_REQUEST,
-     selectedFile,
-     successHandler,
-     errorHandler,
-   };
- }
-
- export function getEdmDefaultTemplates() {
-   return {
-     type: types.GET_EDM_DEAFULT_TEMPLATES_REQUEST,
-   };
- }
-
- export function setEdmTemplate(template) {
-   return {
-     type: types.SET_EDM_TEMPLATE,
-     template,
-   };
- }
-
- export function getTemplateDetails(id, channel) {
-   console.log('getting template', id, channel);
-   return {
-     type: types.GET_TEMPLATE_DETAILS_REQUEST,
-     id,
-     channel,
-   };
- }
-
- export function resetTemplateData() {
-   return {
-     type: types.RESET_TEMPLATE_DATA,
-   };
- }
-
- export function resetUploadData() {
-   console.log('clearing upload data');
-   return {
-     type: types.RESET_UPLOAD_DATA,
-   };
- }
-
- export function resetTemplateStoreData() {
-   return {
-     type: types.CLEAR_TEMPLATE_STORE_DATA,
-   };
- }
+/*
+ *
+ * Templates actions
+ *
+ */
+
+ import * as types from './constants';
+
+ export function getAllTemplates(channel, queryParams) {
+   console.log('get all templates action trigereed', channel, queryParams);
+   return {
+     type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
+   };
+ }
+
+ export function resetTemplate() {
+   return {
+     type: types.RESET_TEMPLATE,
+   };
+ }
+
+ export function resetAccount() {
+   return {
+     type: types.RESET_ACCOUNT,
+   };
+ }
+
+ export function deleteTemplate(channel, id) {
+   console.log('delete template action trigereed', channel, id);
+   return {
+     type: types.DELETE_TEMPLATE_REQUEST, channel, id,
+   };
+ }
+
+ export function getUserList() {
+   return {
+     type: types.GET_USER_LIST_REQUEST,
+   };
+ }
+
+ export function getWeCrmAccounts(source) {
+   return {
+     type: types.GET_WECRM_ACCOUNTS_REQUEST, source,
+   };
+ }
+
+ export function setWeChatAccount(weChatAccount) {
+   console.log('setting wechat account', weChatAccount);
+   return {
+     type: types.SET_WECHAT_ACCOUNT,
+     weChatAccount,
+   };
+ }
+
+ export function setLineAccount(lineAccount) {
+  return {
+    type: types.SET_LINE_ACCOUNT,
+    lineAccount,
+  };
+}
+
+ export function handleHtmlUpload(selectedTemplate) {
+   return {
+     type: types.SET_SELECTED_LAYOUT,
+     selectedTemplate,
+   };
+ }
+
+ export function handleZipUpload(selectedFile, successHandler, errorHandler) {
+   return {
+     type: types.SEND_ZIPPED_FILE_REQUEST,
+     selectedFile,
+     successHandler,
+     errorHandler,
+   };
+ }
+
+ export function getDefaultBeeTemplates() {
+   return {
+     type: types.GET_DEAFULT_BEE_TEMPLATES_REQUEST,
+   };
+ }
+
+ export function setEdmTemplate(template) {
+   return {
+     type: types.SET_EDM_TEMPLATE,
+     template,
+   };
+ }
+ export function setBEETemplate(template) {
+   return {
+     type: types.SET_BEE_TEMPLATE,
+     template,
+   };
+ }
+ export function getTemplateDetails(id, channel) {
+   console.log('getting template', id, channel);
+   return {
+     type: types.GET_TEMPLATE_DETAILS_REQUEST,
+     id,
+     channel,
+   };
+ }
+
+ export function resetTemplateData() {
+   return {
+     type: types.RESET_TEMPLATE_DATA,
+   };
+ }
+
+ export function resetUploadData() {
+   console.log('clearing upload data');
+   return {
+     type: types.RESET_UPLOAD_DATA,
+   };
+ }
+
+ export function resetTemplateStoreData() {
+   return {
+     type: types.CLEAR_TEMPLATE_STORE_DATA,
+   };
+ }

package/v2Containers/Templates/constants.js

@@ -1,47 +1,49 @@
-/*
- *
- * Templates constants
- *
- */
-
-export const DEFAULT_ACTION = 'app/Templates/DEFAULT_ACTION';
-
-export const GET_ALL_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_REQUEST';
-export const GET_ALL_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_SUCCESS';
-export const GET_ALL_TEMPLATES_FAILURE = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_FAILURE';
-
-export const DELETE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/DELETE_TEMPLATE_REQUEST';
-export const DELETE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/DELETE_TEMPLATE_SUCCESS';
-export const DELETE_TEMPLATE_FAILURE = 'app/v2Containers/Templates/DELETE_TEMPLATE_FAILURE';
-
-export const GET_USER_LIST_REQUEST = "app/v2Containers/GET_USER_LIST_REQUEST";
-export const GET_USER_LIST_SUCCESS = "app/v2Containers/GET_USER_LIST_SUCCESS";
-export const GET_USER_LIST_FAILURE = "app/v2Containers/GET_USER_LIST_FAILURE";
-
-export const GET_WECRM_ACCOUNTS_REQUEST = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_REQUEST";
-export const GET_WECRM_ACCOUNTS_SUCCESS = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_SUCCESS";
-export const GET_WECRM_ACCOUNTS_FAILURE = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_FAILURE";
-export const SET_WECHAT_ACCOUNT = "app/v2Containers/Templates/SET_WECHAT_ACCOUNT";
-
-export const SET_SELECTED_LAYOUT = "app/v2Containers/Templates/SET_SELECTED_LAYOUT";
-export const SEND_ZIPPED_FILE_REQUEST = "app/v2Containers/Templates/SEND_ZIPPED_FILE_REQUEST";
-export const SEND_ZIPPED_FILE_SUCCESS = "app/v2Containers/Templates/SEND_ZIPPED_FILE_SUCCESS";
-export const SEND_ZIPPED_FILE_FAILURE = "app/v2Containers/Templates/SEND_ZIPPED_FILE_FAILURE";
-
-export const GET_EDM_DEAFULT_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_EDM_DEAFULT_TEMPLATES_REQUEST';
-export const GET_EDM_DEAFULT_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_EDM_DEAFULT_TEMPLATES_SUCCESS';
-export const GET_EDM_DEAFULT_TEMPLATES_FAILURE = 'app/v2Containers/Templates/GET_EDM_DEAFULT_TEMPLATES_FAILURE';
-
-export const GET_TEMPLATE_DETAILS_REQUEST = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_REQUEST';
-export const GET_TEMPLATE_DETAILS_SUCCESS = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_SUCCESS';
-export const GET_TEMPLATE_DETAILS_FAILURE = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_FAILURE';
-
-
-export const SET_EDM_TEMPLATE = "app/v2Containers/Templates/SET_EDM_TEMPLATE";
-export const RESET_ACCOUNT = "app/v2Containers/Templates/RESET_ACCOUNT";
-export const RESET_TEMPLATE = "app/v2Containers/Templates/RESET_TEMPLATE";
-export const RESET_TEMPLATE_DATA = "app/v2Containers/Templates/RESET_TEMPLATE_DATA";
-export const RESET_UPLOAD_DATA = "app/v2Containers/Templates/RESET_UPLOAD_DATA";
-export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
-
-export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";
+/*
+ *
+ * Templates constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/Templates/DEFAULT_ACTION';
+
+export const GET_ALL_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_REQUEST';
+export const GET_ALL_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_SUCCESS';
+export const GET_ALL_TEMPLATES_FAILURE = 'app/v2Containers/Templates/GET_ALL_TEMPLATES_FAILURE';
+
+export const DELETE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/DELETE_TEMPLATE_REQUEST';
+export const DELETE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/DELETE_TEMPLATE_SUCCESS';
+export const DELETE_TEMPLATE_FAILURE = 'app/v2Containers/Templates/DELETE_TEMPLATE_FAILURE';
+
+export const GET_USER_LIST_REQUEST = "app/v2Containers/GET_USER_LIST_REQUEST";
+export const GET_USER_LIST_SUCCESS = "app/v2Containers/GET_USER_LIST_SUCCESS";
+export const GET_USER_LIST_FAILURE = "app/v2Containers/GET_USER_LIST_FAILURE";
+
+export const GET_WECRM_ACCOUNTS_REQUEST = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_REQUEST";
+export const GET_WECRM_ACCOUNTS_SUCCESS = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_SUCCESS";
+export const GET_WECRM_ACCOUNTS_FAILURE = "app/v2Containers/Templates/GET_WECRM_ACCOUNTS_FAILURE";
+export const SET_WECHAT_ACCOUNT = "app/v2Containers/Templates/SET_WECHAT_ACCOUNT";
+
+export const SET_SELECTED_LAYOUT = "app/v2Containers/Templates/SET_SELECTED_LAYOUT";
+export const SEND_ZIPPED_FILE_REQUEST = "app/v2Containers/Templates/SEND_ZIPPED_FILE_REQUEST";
+export const SEND_ZIPPED_FILE_SUCCESS = "app/v2Containers/Templates/SEND_ZIPPED_FILE_SUCCESS";
+export const SEND_ZIPPED_FILE_FAILURE = "app/v2Containers/Templates/SEND_ZIPPED_FILE_FAILURE";
+
+export const GET_TEMPLATE_DETAILS_REQUEST = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_REQUEST';
+export const GET_TEMPLATE_DETAILS_SUCCESS = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_SUCCESS';
+export const GET_TEMPLATE_DETAILS_FAILURE = 'app/v2Containers/Templates/GET_TEMPLATE_DETAILS_FAILURE';
+
+
+export const SET_EDM_TEMPLATE = "app/v2Containers/Templates/SET_EDM_TEMPLATE";
+export const SET_BEE_TEMPLATE = "app/v2Containers/Templates/SET_BEE_TEMPLATE";
+
+export const RESET_ACCOUNT = "app/v2Containers/Templates/RESET_ACCOUNT";
+export const RESET_TEMPLATE = "app/v2Containers/Templates/RESET_TEMPLATE";
+export const RESET_TEMPLATE_DATA = "app/v2Containers/Templates/RESET_TEMPLATE_DATA";
+export const RESET_UPLOAD_DATA = "app/v2Containers/Templates/RESET_UPLOAD_DATA";
+export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
+
+export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";
+
+export const GET_DEAFULT_BEE_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_REQUEST';
+export const GET_DEAFULT_BEE_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_SUCCESS';
+export const GET_DEAFULT_BEE_TEMPLATES_FAILURE = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_FAILURE';

package/v2Containers/Templates/index.js

@@ -208,10 +208,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       queryParams.perPage = this.state.perPageLimit;
       const channel = this.state.channel;
       this.props.actions.getAllTemplates(channel, queryParams);
-      //this.getAllTemplates({});
-      // if (this.state.channel.toLowerCase() === "email") {
-      //   this.props.actions.getEdmDefaultTemplates();
-      // }
     }
 
     window.addEventListener("message", this.handleFrameTasks);
@@ -236,7 +232,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         nextProps.actions.getWeCrmAccounts();
       } else if (nextProps.route.name.toLowerCase() === 'email') {
         channel = 'Email';
-        // this.props.actions.getEdmDefaultTemplates();
       } else if (nextProps.route.name.toLowerCase() === "mobilepush") {
         this.setState({defaultAccount: true});
         channel = "mobilepush";
@@ -654,7 +649,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 {
                   carouselContent.map(({
                     imageUrl,
-                    actionLabel
+                    actionLabel,
                   }) => (
                     <img
                       width={208}
@@ -1001,7 +996,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         break;
     }
   };
-  
+
   createTemplate(ev) {
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
@@ -1120,7 +1115,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   toggleEdmEmailTemplateSelection = () => {
     this.setState( (prevState) => ({
       showEdmEmailTemplates: !prevState.showEdmEmailTemplates}), () => {
-      this.props.actions.getEdmDefaultTemplates();
+      this.props.actions.getDefaultBeeTemplates();
     });
   };
 
@@ -1415,7 +1410,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         //content = template.versions.base.messages[0].Text;
         const lineContent = template.versions.base.content;
         content = {
-          bodyText:lineContent && lineContent.messages[0].text ? lineContent.messages[0].text : '',
+          bodyText: lineContent && lineContent.messages[0].text ? lineContent.messages[0].text : '',
           bodyImage: lineContent && lineContent.messages[0].originalContentUrl ? lineContent.messages[0].originalContentUrl : '',
         };
         const modeType = lineContent && lineContent.messages[0].type;
@@ -1538,12 +1533,23 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
 
   isLoading = () => {
-    const lineLoader = (this.props.Templates.getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'line');
-    const smsLoader = (this.props.Templates.getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'sms');
-    const wechatLoader = (((this.state.selectedAccount !== '' && this.props.Templates.getAllTemplatesInProgress) || (this.props.Templates.fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
-    const mobilePushLoader = (((this.props.Templates.getAllTemplatesInProgress) || (this.props.Templates.fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
-    const emailLoader = ((this.props.Templates.getAllTemplatesInProgress || this.props.Templates.sendingFile) && this.state.channel.toLowerCase() === 'email');
-    const ebillLoader = ((this.props.Templates.getAllTemplatesInProgress || this.props.Templates.sendingFile) && this.state.channel.toLowerCase() === 'ebill');
+    const { EmailCreate, Templates } = this.props;
+    const {
+      getAllTemplatesInProgress,
+      deleteTemplateInProgress,
+      fetchingWeCrmAccounts,
+      sendingFile,
+    } = Templates;
+    const lineLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'line');
+    const smsLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'sms');
+    const wechatLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
+    const mobilePushLoader = (((getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
+    const emailLoader = (
+      (getAllTemplatesInProgress ||
+      sendingFile ||
+      deleteTemplateInProgress ||
+      EmailCreate.duplicateTemplateInProgress) && this.state.channel.toLowerCase() === 'email');
+    const ebillLoader = ((getAllTemplatesInProgress || sendingFile) && this.state.channel.toLowerCase() === 'ebill');
     const isLoading = ((wechatLoader !== undefined) ? wechatLoader : false) ||
       (smsLoader !== undefined ? smsLoader : false) ||
       (emailLoader !== undefined ? emailLoader : false) ||
@@ -1801,7 +1807,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         </CapRadio.CapRadioGroup>
       }
       {
-        channel.toUpperCase() === LINE && 
+        channel.toUpperCase() === LINE &&
           isFullMode
           ? (
             <CapRadio.CapRadioGroup className="line-filters" defaultValue={lineFilter} onChange={this.setLineFilter}>
@@ -1831,9 +1837,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               }
             </CapRadio.CapRadioGroup>
           )
-          : () => {
-            return null;
-          }
+          : () => null
       }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
         {isfilterContentVisisble && !isWechatEmbedded && <CapButton
@@ -1858,7 +1862,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const creativesParams = this.getCreativesParams();
     const templates = this.props.TemplatesList || [];
     const {route} = this.props;
-    const loadingTip = (this.props.Templates.sendingFile && (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill')) ? this.props.intl.formatMessage(messages.uploadingFile) : this.props.intl.formatMessage(messages.gettingAllTemplates);
+    const loadingTipMap = {
+      sendingFile: 'uploadingFile',
+      deleteTemplateInProgress: 'deletingTemplate',
+      duplicateTemplateInProgress: 'duplicatingTemplate',
+    };
+    const { sendingFile, deleteTemplateInProgress } = this.props.Templates;
+    const loadingTipIntl =
+        ((['email', 'ebill'].includes(this.state.channel.toLowerCase() === 'email')) && sendingFile && 'sendingFile') ||
+        (deleteTemplateInProgress && 'deletingTemplate') ||
+        (this.props.EmailCreate.duplicateTemplateInProgress && 'duplicatingTemplate');
+
+    const loadingTip = messages[loadingTipIntl] ? this.props.intl.formatMessage(messages[loadingTipIntl]) : this.props.intl.formatMessage(messages.gettingAllTemplates);
+
     return (
       <>
         {activeMode === ACCOUNT_CHANGE_MODE && this.renderAccountSelection()}

package/v2Containers/Templates/messages.js

@@ -354,4 +354,12 @@ export default defineMessages({
     id: `${scope}.richMediaTemplates`,
     defaultMessage: 'Rich media templates',
   },
+  deletingTemplate: {
+    id: `${scope}.deletingTemplate`,
+    defaultMessage: 'Deleting template...',
+  },
+  duplicatingTemplate: {
+    id: `${scope}.duplicatingTemplate`,
+    defaultMessage: 'Duplicating template...'
+  },
 });