@capillarytech/creatives-library 8.0.44 → 8.0.45

package/v2Containers/CreativesContainer/index.js

@@ -9,7 +9,9 @@ import {
 } from "@capillarytech/cap-ui-library";
 import { injectIntl, FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
-import {isEmpty, get, forEach, cloneDeep} from 'lodash';
+import {
+  isEmpty, get, forEach, cloneDeep,
+} from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
@@ -17,7 +19,9 @@ import styled from 'styled-components';
 import { GA } from '@capillarytech/cap-ui-utils';
 
 import * as actions from './actions';
-import { selectEmailLayout, uploadSelector, templateUserList, makeSelectTemplates } from '../Templates/selectors';
+import {
+  selectEmailLayout, uploadSelector, templateUserList, makeSelectTemplates,
+} from '../Templates/selectors';
 import SlideBoxContent from './SlideBoxContent';
 import SlideBoxHeader from './SlideBoxHeader';
 import SlideBoxFooter from './SlideBoxFooter';
@@ -28,26 +32,30 @@ import './index.scss';
 import * as templateActions from '../Templates/actions';
 import * as globalActions from '../Cap/actions';
 import * as zaloActions from '../Zalo/actions';
-import {isLoading as isLoadingSelector} from './selectors';
+import { isLoading as isLoadingSelector } from './selectors';
 import messages from './messages';
 import zaloMessages from '../Zalo/messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { makeSelectFetchingCmsData } from '../Email/selectors';
-import { IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TEMPLATE, STICKER } from '../Line/Container/constants';
-import {IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
+import {
+  IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TEMPLATE, STICKER,
+} from '../Line/Container/constants';
+import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
 import { WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES } from '../Whatsapp/constants';
 
 import { updateImagesInHtml } from '../../utils/cdnTransformation';
 import { IOS } from '../InApp/constants';
-import injectReducer from '../../utils/injectReducer'
+import injectReducer from '../../utils/injectReducer';
 import injectSaga from '../../utils/injectSaga';
 import creativesContainerReducer from './reducer';
 import { compose } from 'redux';
 import { capSagaForFetchSchemaForEntity } from '../Cap/sagas';
 import { v2TemplateSagaWatchGetDefaultBeeTemplates } from '../Templates/sagas';
-import { CAP_SPACE_28, CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64, CAP_SPACE_72, CAP_SPACE_80 } from '@capillarytech/cap-ui-library/styled/variables';
+import {
+  CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64,
+} from '@capillarytech/cap-ui-library/styled/variables';
 
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
@@ -70,7 +78,7 @@ export class Creatives extends React.Component {
       isLoadingContent: true,
       templateStep: 1, //modeSelection: for template name and (for email selecting upload or editor), and createTemplate to create template create based on modeSelection
       showSlideBox: true,
-      slidBoxContent: this.getSlideBoxContent({mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode}),
+      slidBoxContent: this.getSlideBoxContent({ mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode }),
       templateData: this.getTemplateData(props.templateData),
       templateNameExists: props.creativesMode === 'edit', // if edit mode templateNameExists will be true, and false in create flow.
       currentChannel: this.props.channel || 'sms',
@@ -85,6 +93,7 @@ export class Creatives extends React.Component {
       3: 'createTemplateContent',
     };
   }
+
   componentWillUnmount() {
     if (get(this.props, 'location.query.type', '') === "embedded") {
       this.props.templateActions.resetTemplateStoreData();
@@ -100,15 +109,15 @@ export class Creatives extends React.Component {
   }
 
   onEnterTemplateName = () => {
-    this.setState({templateNameExists: true});
+    this.setState({ templateNameExists: true });
   };
 
   onRemoveTemplateName = () => {
-    this.setState({templateNameExists: false});
+    this.setState({ templateNameExists: false });
   }
 
   onSelectTemplate = (template, fbAdManager) => {
-    const data = {slidBoxContent: constants.EDIT_TEMPLATE, templateData: template};
+    const data = { slidBoxContent: constants.EDIT_TEMPLATE, templateData: template };
     if (fbAdManager) {
       data.fbAdManager = fbAdManager;
     }
@@ -117,7 +126,7 @@ export class Creatives extends React.Component {
 
   actionCallback = () => {
     CapNotification.error({
-      message: <FormattedMessage {...zaloMessages.zaloFailureNotificationPreview}/>,
+      message: <FormattedMessage {...zaloMessages.zaloFailureNotificationPreview} />,
     });
   };
 
@@ -126,7 +135,7 @@ export class Creatives extends React.Component {
       const templateData = template;
       const usersList = commonUtil.getMergedUserList(this.props.templateUserList);
       const userId = parseInt(template.updatedBy, 10);
-      templateData.updatedByName = commonUtil.getUserNameById(userId, usersList );
+      templateData.updatedByName = commonUtil.getUserNameById(userId, usersList);
       this.setState({ slidBoxContent: constants.PREVIEW, templateData });
     } else {
       const {
@@ -134,7 +143,7 @@ export class Creatives extends React.Component {
         sourceAccountIdentifier = "",
         configs: { token = "" } = {},
       } = get(this.props, "Templates.selectedZaloAccount", {});
-      const { hostName = ''} = get(this.props, "Templates.senderDetails", {});
+      const { hostName = '' } = get(this.props, "Templates.senderDetails", {});
       this.props.zaloActions.getTemplateInfoById({
         username: name,
         oa_id: sourceAccountIdentifier,
@@ -146,9 +155,11 @@ export class Creatives extends React.Component {
       });
     }
   };
+
   onEditTemplate = () => {
     this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true, templateNameExists: true });
   };
+
   onCreateNew = (fbAdManager) => {
     const data = { slidBoxContent: 'createTemplate', showSlideBox: true };
     if (fbAdManager) {
@@ -161,13 +172,15 @@ export class Creatives extends React.Component {
     this.setState({ slidBoxContent: 'templates', showSlideBox: true, isGetFormData: false });
     this.resetStep();
   };
+
   onChannelChange = (channel) => {
-    this.setState({currentChannel: channel, templateData: null});
+    this.setState({ currentChannel: channel, templateData: null });
   }
+
   onCreateNextStep = () => {
     this.setState((prevState) => {
       let templateStep = prevState.templateStep + 1;
-      const {emailCreateMode, currentChannel} = prevState;
+      const { emailCreateMode, currentChannel } = prevState;
       if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || [constants.MOBILE_PUSH, constants.WECHAT, constants.INAPP].includes(currentChannel.toUpperCase())) {
         templateStep = prevState.templateStep + 2;
       }
@@ -178,22 +191,23 @@ export class Creatives extends React.Component {
   }
 
   onEmailModeChange = (mode) => {
-    this.setState({ emailCreateMode: mode});
+    this.setState({ emailCreateMode: mode });
   }
 
   onInAppModeChange = (mode) => {
-    this.setState({ inAppCreateMode: mode});
+    this.setState({ inAppCreateMode: mode });
   }
 
   onMobilepushModeChange = (mode) => {
-    this.setState({ mobilePushCreateMode: mode});
+    this.setState({ mobilePushCreateMode: mode });
   }
+
   onWechatTemplateChange = (templateType) => {
-    this.setState( { weChatTemplateType: templateType});
+    this.setState({ weChatTemplateType: templateType });
   }
 
   onWeChatMaptemplateStepChange = (step) => {
-    this.setState({weChatMaptemplateStep: step});
+    this.setState({ weChatMaptemplateStep: step });
   }
 
   onCallTaskSubmit = (data) => {
@@ -206,12 +220,13 @@ export class Creatives extends React.Component {
   onValidationFail = () => {
     this.setState({ isGetFormData: false });
   };
+
   getTemplateData = (templateData) => { //from consumers to creatives
     const { isFullMode, messageDetails = {}, smsRegister } = this.props;
     const { additionalProperties = {} } = messageDetails;
     if (!isFullMode && templateData) { // for component mode
-      const {channel} = templateData;
-      let creativesTemplateData = {type: channel };
+      const { channel } = templateData;
+      let creativesTemplateData = { type: channel };
       switch (channel) {
         case constants.NO_COMMUNICATION: {
           creativesTemplateData = {
@@ -293,7 +308,7 @@ export class Creatives extends React.Component {
                 IOS: templateData.iosContent,
               },
             },
-            definition: {accountId: templateData.accountId, mode: mode.toLowerCase()},
+            definition: { accountId: templateData.accountId, mode: mode.toLowerCase() },
           };
           break;
         }
@@ -310,7 +325,7 @@ export class Creatives extends React.Component {
                 },
               },
             },
-            definition: {accountId: templateData?.accountId, mode: mode?.toLowerCase()},
+            definition: { accountId: templateData?.accountId, mode: mode?.toLowerCase() },
           };
           break;
         }
@@ -336,7 +351,9 @@ export class Creatives extends React.Component {
             const facebookCreativeList = [];
             fBContent.forEach((obj) => {
               const data = cloneDeep(obj);
-              const {subType, linkDescription, imageLink, websiteLink, videoId, videoName, videoUrl} = obj || {};
+              const {
+                subType, linkDescription, imageLink, websiteLink, videoId, videoName, videoUrl,
+              } = obj || {};
               delete data.linkDescription;
               delete data.websiteLink;
               data.linkDesc = linkDescription;
@@ -365,7 +382,7 @@ export class Creatives extends React.Component {
               versions: {
                 base: {
                   content: {
-                    FacebookAd: {...facebookCreativeList},
+                    FacebookAd: { ...facebookCreativeList },
                     pageOrgUnitId: this.props.orgUnitId,
                   },
                 },
@@ -448,7 +465,7 @@ export class Creatives extends React.Component {
             } = {},
           } = templateData;
           const mediaParams = {};
-          const { url = '', previewUrl = '', docParams = {}, footer = '', headerVarMapped = {}, headerTemplate = ''} = whatsappMedia || {};
+          const { url = '', previewUrl = '', docParams = {}, footer = '', headerVarMapped = {}, headerTemplate = '' } = whatsappMedia || {};
           switch (mediaType) {
             case (WHATSAPP_MEDIA_TYPES.IMAGE):
               mediaParams.imageUrl = url;
@@ -597,7 +614,9 @@ export class Creatives extends React.Component {
             emailBase = templateRecords.base;
           }
           const newHtmlContent = await updateImagesInHtml(html_content);
-          templateData = {...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
+          templateData = {
+            ...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : '',
+          };
           delete templateData.html_content;
           delete templateData.subject;
         }
@@ -660,7 +679,9 @@ export class Creatives extends React.Component {
       case constants.WECHAT:
         if (template.value) {
           const { accountId, previewContent, ...messageBody } = template.value;
-          templateData = { channel, accountId, messageBody: JSON.stringify(messageBody), previewContent};
+          templateData = {
+            channel, accountId, messageBody: JSON.stringify(messageBody), previewContent,
+          };
         }
         break;
       case constants.LINE:
@@ -802,13 +823,15 @@ export class Creatives extends React.Component {
       case constants.FACEBOOK: {
         if (template.value) {
           const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
-          const type = FacebookAd[0].type;
-          const {accountId} = this.props.Templates.selectedFacebookAccount || template.value || {};
+          const { type } = FacebookAd[0];
+          const { accountId } = this.props.Templates.selectedFacebookAccount || template.value || {};
           const facebookCreativeList = [];
           const fBContent = Object.values(FacebookAd);
           fBContent.forEach((obj) => {
             const data = cloneDeep(obj);
-            const {subType, linkDesc, imgSrc, webSiteLink, video} = obj;
+            const {
+              subType, linkDesc, imgSrc, webSiteLink, video
+            } = obj;
             delete data.type;
             delete data.linkDesc;
             delete data.webSiteLink;
@@ -845,7 +868,7 @@ export class Creatives extends React.Component {
         break;
       case constants.RCS: {
         if (template.value) {
-          const {name = "", versions = {}, type = ""} = {
+          const { name = "", versions = {}, type = "" } = {
           } = template.value || {};
           const {
             cardContent = [],
@@ -865,7 +888,6 @@ export class Creatives extends React.Component {
             creativeName: name,
             rcsContent,
           };
-
           if (smsFallBackContent.message) {
             templateData.smsFallBackContent = smsFallBackContent;
           }
@@ -888,7 +910,8 @@ export class Creatives extends React.Component {
     }
     return templateData;
   };
-  getSlideBoxContent({mode, templateData, isFullMode}) {
+
+  getSlideBoxContent({ mode, templateData, isFullMode }) {
     let creativesMode = isFullMode ? 'createTemplate' : 'templates';// for library mode templates page is initial mode and for full mode createTemplates
     if (mode === 'create' && isFullMode) {
       creativesMode = 'createTemplate';
@@ -981,7 +1004,7 @@ export class Creatives extends React.Component {
         () => {
           const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
           const channel = templateData.type;
-          const creativesData = this.getCreativesData(channel, template, templateData );// convers data to consumer understandable format
+          const creativesData = this.getCreativesData(channel, template, templateData);// convers data to consumer understandable format
           creativesData.then((data) => {
             this.logGTMEvent(channel, data);
             this.props.getCreativesData(data);// send data to consumer
@@ -990,11 +1013,13 @@ export class Creatives extends React.Component {
       );
     }
   };
+
   setIsLoadingContent = (isLoadingContent) => {
     if (this.state.isLoadingContent !== isLoadingContent) {
-      this.setState({isLoadingContent });
+      this.setState({ isLoadingContent });
     }
   }
+
   resetStep = () => {
     this.setState((prevState) => {
       let newState = {
@@ -1006,6 +1031,7 @@ export class Creatives extends React.Component {
       return newState;
     });
   }
+
   handleCloseSlideBox = () => {
     const { currentChannel = '', slidBoxContent = '' } = this.state;
     const reloadTemplates = currentChannel === constants.WHATSAPP && slidBoxContent === 'editTemplate';
@@ -1018,22 +1044,25 @@ export class Creatives extends React.Component {
       showSlideBox: false,
     }), () => this.props.handleCloseCreatives(reloadTemplates));
   };
+
   saveMessage = () => {
     this.setState({ isGetFormData: true });
   };
+
   discardMessage = () => {
     this.setState({ isDiscardMessage: true });
   }
+
   shouldShowFooter = () => {
-    const {isFullMode } = this.props;
-    const {slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, inAppCreateMode, weChatTemplateType, templateData} = this.state;
+    const { isFullMode } = this.props;
+    const { slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, inAppCreateMode, weChatTemplateType, templateData } = this.state;
     const channel = currentChannel.toUpperCase();
     const currentStep = this.creativesTemplateSteps[templateStep];
     let showFooter = false;
     showFooter = isFullMode && slidBoxContent === "preview";
     const isMobilepush = channel === constants.MOBILE_PUSH;
     const isInApp = channel === constants.INAPP;
-    if (!isFullMode ) {
+    if (!isFullMode) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
       const isCallTask = channel === constants.CALL_TASK;
@@ -1056,24 +1085,24 @@ export class Creatives extends React.Component {
     }
     if (channel === constants.MOBILE_PUSH &&
       ((slidBoxContent === 'createTemplate' && !isEmpty(mobilePushCreateMode))
-      || (slidBoxContent === 'editTemplate' && currentStep === 'modeSelection')) &&
+        || (slidBoxContent === 'editTemplate' && currentStep === 'modeSelection')) &&
       templateNameExists) {
       showFooter = true;
     }
 
     if (channel === constants.WECHAT &&
       ((slidBoxContent === 'createTemplate' && !isEmpty(weChatTemplateType))
-      || (slidBoxContent === 'editTemplate' && currentStep === 'modeSelection'))) {
+        || (slidBoxContent === 'editTemplate' && currentStep === 'modeSelection'))) {
       showFooter = true;
     }
 
     if (showFooter) {
       if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') ||
-       ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
+        ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
         showFooter = showFooter && !this.state.isLoadingContent;
       } else if (slidBoxContent === "editTemplate" &&
-      ([constants.SMS, constants.WECHAT, constants.EMAIL].includes(channel) &&
-      currentStep === 'modeSelection')) {
+        ([constants.SMS, constants.WECHAT, constants.EMAIL].includes(channel) &&
+          currentStep === 'modeSelection')) {
         showFooter = showFooter && !this.state.isLoadingContent;
       }
     }
@@ -1084,8 +1113,11 @@ export class Creatives extends React.Component {
     }
     return showFooter;
   }
+
   shouldShowDoneFooter = () => {
-    const {slidBoxContent, templateStep, currentChannel, templateData} = this.state;
+    const {
+      slidBoxContent, templateStep, currentChannel, templateData,
+    } = this.state;
     const { isFullMode } = this.props;
     const currentStep = this.creativesTemplateSteps[templateStep];
     let showDone = false;
@@ -1100,60 +1132,67 @@ export class Creatives extends React.Component {
 
     return showDone;
   }
-  templateNameComponentHeader = ({formData, onFormDataChange, name}) => (
+
+  templateNameComponentHeader = ({ formData, onFormDataChange, name }) => (
     <CapHeader
       inline
       title={name}
       className="support-video-elements"
-      description={<CapLink
-        title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
-        onClick={() => { this.setState({isEditName: true}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}/>
-    }/>)
-  templateNameComponentInput = ({formData, onFormDataChange, name}) => (<CapInput
+      description={(
+        <CapLink
+          title={<FormattedMessage {...messages.creativesTemplatesEditName} />}
+          onClick={() => { this.setState({ isEditName: true }, () => { this.showTemplateName({ formData, onFormDataChange }); }); }} />
+      )
+      } />
+  )
+
+  templateNameComponentInput = ({ formData, onFormDataChange, name }) => (
+    <CapInput
+      value={name}
+      suffix={<span />}
+      onBlur={() => { this.setState({ isEditName: false }, () => { this.showTemplateName({ formData, onFormDataChange }); }); }}
+      onChange={(ev) => {
+        const { value } = ev.currentTarget;
+        const isEmptyTemplateName = value.trim() ? false : true;
 
-    value={name}
-    suffix={<span/>}
-    onBlur={() => { this.setState({isEditName: false}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}
-    onChange={(ev) => {
-      const value = ev.currentTarget.value;
-      const isEmptyTemplateName = value.trim() ? false : true;
+        const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true };
+        this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
+        onFormDataChange(newFormData);
+      }}
+    />
+  )
 
-      const newFormData = {...formData, 'template-name': value, 'isTemplateNameEdited': true};
-      this.setState({isTemplateNameEmpty: isEmptyTemplateName});
-      onFormDataChange(newFormData);
-    }}
-    />)
-  showTemplateName = ({formData, onFormDataChange}) => { //gets called from email/index after template data is fetched
-    const {slidBoxContent, currentChannel, isEditName} = this.state;
+  showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
+    const { slidBoxContent, currentChannel, isEditName } = this.state;
     const channel = currentChannel.toUpperCase();
     if ([constants.EMAIL, constants.MOBILE_PUSH, constants.INAPP].includes(channel) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
       const name = get(formData, 'template-name');
       if (channel === constants.EMAIL && !name && slidBoxContent === 'createTemplate') {
-        this.setState({isTemplateNameEmpty: true});
+        this.setState({ isTemplateNameEmpty: true });
       }
-      this.templateContainerDetails = {formData, onFormDataChange};
+      this.templateContainerDetails = { formData, onFormDataChange };
       if (name && !isEditName) {
-        this.setState({showTemplateNameComponentEdit: false});
+        this.setState({ showTemplateNameComponentEdit: false });
       } else if (isEditName) {
-        this.setState({showTemplateNameComponentEdit: true});
+        this.setState({ showTemplateNameComponentEdit: true });
       }
     }
   }
 
   showLiquidErrorInFooter = (errorMessages) => {
-    const isError = ( errorMessages?.STANDARD_ERROR_MSG?.length > 0 || errorMessages?.LIQUID_ERROR_MSG?.length > 0);
-    this.setState({isLiquidValidationError: isError, errorMessages});
+    const isError = (errorMessages?.STANDARD_ERROR_MSG?.length > 0 || errorMessages?.LIQUID_ERROR_MSG?.length > 0);
+    this.setState({ isLiquidValidationError: isError, errorMessages });
   };
 
   shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
-    const {slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppCreateMode, weChatTemplateType} = this.state;
+    const { slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode, inAppCreateMode, weChatTemplateType } = this.state;
     let isShowContinueFooter = false;
     const currentStep = this.creativesTemplateSteps[templateStep];
     const channel = currentChannel.toUpperCase();
     if (channel === constants.EMAIL || channel === constants.SMS) {
       if ((emailCreateMode === "upload" && !isEmpty(this.props.EmailLayout)) || emailCreateMode === "editor") {
         let isEmailCreate = slidBoxContent === 'createTemplate';
-        isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || ( emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));
+        isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || (emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));
         isShowContinueFooter = isEmailCreate && emailCreateMode;
       }
     } else if (currentChannel.toUpperCase() === constants.MOBILE_PUSH) {
@@ -1166,24 +1205,27 @@ export class Creatives extends React.Component {
 
     return isShowContinueFooter;
   }
+
   templateNameRenderProp = () => {
-    const {showTemplateNameComponentEdit, currentChannel, slidBoxContent} = this.state;
-    const {templateContainerDetails} = this;
-    const {formData, onFormDataChange} = templateContainerDetails;
+    const { showTemplateNameComponentEdit, currentChannel, slidBoxContent } = this.state;
+    const { templateContainerDetails } = this;
+    const { formData, onFormDataChange } = templateContainerDetails;
     const channel = currentChannel.toUpperCase();
     if ([constants.EMAIL, constants.MOBILE_PUSH, constants.INAPP].includes(channel) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
       const name = get(formData, 'template-name');
-      return showTemplateNameComponentEdit ? this.templateNameComponentInput({formData, onFormDataChange, name}) : this.templateNameComponentHeader({formData, onFormDataChange, name});
+      return showTemplateNameComponentEdit ? this.templateNameComponentInput({ formData, onFormDataChange, name }) : this.templateNameComponentHeader({ formData, onFormDataChange, name });
     }
     return false;
   }
+
   shouldShowHeader = () => {
-    const {currentChannel, slidBoxContent} = this.state;
+    const { currentChannel, slidBoxContent } = this.state;
     if (currentChannel.toUpperCase() === constants.FACEBOOK && slidBoxContent === 'createTemplate') {
       return false;
     }
     return true;
   }
+
   render() {
     const {
       slidBoxContent,
@@ -1229,37 +1271,39 @@ export class Creatives extends React.Component {
       errorMessages?.STANDARD_ERROR_MSG?.length > 0 && errorMessages?.LIQUID_ERROR_MSG?.length > 0
         ? CAP_SPACE_64
         : errorMessages?.LIQUID_ERROR_MSG?.length > 0
-        ? CAP_SPACE_56
-        : errorMessages?.STANDARD_ERROR_MSG?.length > 0
-        ? CAP_SPACE_32
-        : 0;
+          ? CAP_SPACE_56
+          : errorMessages?.STANDARD_ERROR_MSG?.length > 0
+            ? CAP_SPACE_32
+            : 0;
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
       <SlideBoxWrapper slideBoxWrapperMargin={slideBoxWrapperMargin} className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`)}>
         <CapSlideBox
           header={
-            this.shouldShowHeader() && <SlideBoxHeader
-              key="creatives-container-slidebox-header"
-              channel={currentChannel}
-              messages={this.props.messages}
-              slidBoxContent={this.state.slidBoxContent}
-              templateData={templateData}
-              onShowTemplates={this.onShowTemplates}
-              creativesMode={creativesMode}
-              isFullMode={isFullMode}
-              isLoadingContent={isLoadingContent}
-              shouldShowTemplateName={this.templateContainerDetails}
-              templateNameRenderProp={this.templateNameRenderProp}
-              weChatMaptemplateStep={weChatMaptemplateStep}
-              onWeChatMaptemplateStepChange={this.onWeChatMaptemplateStepChange}
-              weChatTemplateType={weChatTemplateType}
-              showPrefix={!isUploading} // not show back button when email template is being uploaded
-              templateStep={this.creativesTemplateSteps[templateStep]}
-              smsRegister={smsRegister}
-              handleClose={this.handleCloseSlideBox}
-              moduleType={this.props.messageDetails?.type}
-            />}
-          content={
+            this.shouldShowHeader() && (
+              <SlideBoxHeader
+                key="creatives-container-slidebox-header"
+                channel={currentChannel}
+                messages={this.props.messages}
+                slidBoxContent={this.state.slidBoxContent}
+                templateData={templateData}
+                onShowTemplates={this.onShowTemplates}
+                creativesMode={creativesMode}
+                isFullMode={isFullMode}
+                isLoadingContent={isLoadingContent}
+                shouldShowTemplateName={this.templateContainerDetails}
+                templateNameRenderProp={this.templateNameRenderProp}
+                weChatMaptemplateStep={weChatMaptemplateStep}
+                onWeChatMaptemplateStepChange={this.onWeChatMaptemplateStepChange}
+                weChatTemplateType={weChatTemplateType}
+                showPrefix={!isUploading} // not show back button when email template is being uploaded
+                templateStep={this.creativesTemplateSteps[templateStep]}
+                smsRegister={smsRegister}
+                handleClose={this.handleCloseSlideBox}
+                moduleType={this.props.messageDetails?.type}
+              />
+            )}
+          content={(
             <SlideBoxContent
               key="creatives-container-slidebox-content"
               onSelectTemplate={this.onSelectTemplate}
@@ -1322,9 +1366,9 @@ export class Creatives extends React.Component {
               creativesMode={creativesMode} // An existing prop that we're using here. Required to ensure correct account details in Edit or Preview in case of Embedded mode.
               hostName={this.props?.hostName || ''}
               eventContextTags={eventContextTags}
-          />
-          }
-          footer={this.shouldShowFooter() &&
+            />
+          )}
+          footer={this.shouldShowFooter() && (
             <SlideBoxFooter
               isFullMode={isFullMode}
               messages={this.props.messages}
@@ -1340,10 +1384,10 @@ export class Creatives extends React.Component {
               shouldShowDoneFooter={this.shouldShowDoneFooter}
               fetchingCmsData={fetchingCmsData}
               isTemplateNameEmpty={isTemplateNameEmpty}
-              isLiquidValidationError ={isLiquidValidationError}
+              isLiquidValidationError={isLiquidValidationError}
               errorMessages={errorMessages}
             />
-          }
+          )}
           handleClose={this.handleCloseSlideBox}
           show={showSlideBox}
           size="size-xl"
@@ -1403,6 +1447,6 @@ function mapDispatchToProps(dispatch) {
 const withConnect = connect(mapStatesToProps, mapDispatchToProps);
 const withReducer = injectReducer({ key: 'creativesContainer', reducer: creativesContainerReducer });
 const withSaga = injectSaga({ key: 'cap', saga: capSagaForFetchSchemaForEntity });
-const withDefaultTempSaga = injectSaga({ key: 'templates', saga: v2TemplateSagaWatchGetDefaultBeeTemplates });
+const withDefaultTempSaga = injectSaga({ key: 'creativesContainer', saga: v2TemplateSagaWatchGetDefaultBeeTemplates });
 
 export default compose(withSaga, withDefaultTempSaga, withReducer, withConnect)(injectIntl(Creatives));