@capillarytech/creatives-library 3.2.3 → 3.3.0

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -60,6 +60,7 @@ function SlideBoxContent(props) {
       onValidationFail,
       channelsToHide,
       forwardedTags,
+      selectedOfferDetails,
       channelsToDisable,
       weChatTemplateType,
       onWechatTemplateChange,
@@ -176,6 +177,7 @@ function SlideBoxContent(props) {
           getDefaultTags={type}
           templateData={templateData}
           forwardedTags={forwardedTags}
+          selectedOfferDetails={selectedOfferDetails}
         />
       )}
       {
@@ -185,6 +187,7 @@ function SlideBoxContent(props) {
             templateData={templateData}
             onCallTaskSubmit={onCallTaskSubmit}
             forwardedTags={forwardedTags}
+            selectedOfferDetails={selectedOfferDetails}
           />
       }
       {
@@ -193,6 +196,7 @@ function SlideBoxContent(props) {
            mode={'create'}
            onCallTaskSubmit={onCallTaskSubmit}
            forwardedTags={forwardedTags}
+           selectedOfferDetails={selectedOfferDetails}
         />
        }
       {isCreateSms && (
@@ -206,6 +210,7 @@ function SlideBoxContent(props) {
         getDefaultTags={type}
         isFullMode={isFullMode}
         forwardedTags={forwardedTags}
+        selectedOfferDetails={selectedOfferDetails}
       />
         )}
       {isEmailCreate && (
@@ -227,6 +232,7 @@ function SlideBoxContent(props) {
         showTemplateName={showTemplateName}
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
+        selectedOfferDetails={selectedOfferDetails}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -249,6 +255,7 @@ function SlideBoxContent(props) {
         showTemplateName={showTemplateName}
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
+        selectedOfferDetails={selectedOfferDetails}
       />
         )}
       {isEditMPush &&
@@ -268,6 +275,7 @@ function SlideBoxContent(props) {
           getDefaultTags={type}
           onValidationFail={onValidationFail}
           forwardedTags={forwardedTags}
+          selectedOfferDetails={selectedOfferDetails}
         />
         }
       {isCreateMPush &&
@@ -291,7 +299,8 @@ function SlideBoxContent(props) {
         showTemplateName={showTemplateName}
         query={query}
         forwardedTags={forwardedTags}
-        onValidationFail={onValidationFail}/>
+        onValidationFail={onValidationFail}
+        selectedOfferDetails={selectedOfferDetails}/>
         }
     </CreativesWrapper>
   );
@@ -325,6 +334,7 @@ SlideBoxContent.propTypes = {
   onValidationFail: PropTypes.func,
   channelsToHide: PropTypes.array,
   forwardedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
   channelsToDisable: PropTypes.array,
   weChatTemplateType: PropTypes.string,
   onWechatTemplateChange: PropTypes.func,

package/v2Containers/CreativesContainer/index.js

@@ -465,8 +465,9 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
+    /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
       <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`)}>
         <CapSlideBox
@@ -522,6 +523,7 @@ class Creatives extends React.Component {
               onValidationFail={this.onValidationFail}
               channelsToHide={channelsToHide}
               forwardedTags={forwardedTags}
+              selectedOfferDetails={selectedOfferDetails}
               channelsToDisable={channelsToDisable}
               weChatTemplateType={weChatTemplateType}
               onWechatTemplateChange={this.onWechatTemplateChange}
@@ -574,6 +576,7 @@ Creatives.propTypes = {
   EmailLayout: PropTypes.string,
   channelsToHide: PropTypes.array,
   forwardedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
   channelsToDisable: PropTypes.array,
   selectedWeChatAccount: PropTypes.object,
 };

package/v2Containers/Email/index.js

@@ -2559,9 +2559,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // const actionComponents = '';
     const schema = this.state.schema;
     const isLoading = this.isEmailLoading();
-    const previewHeader = (<h3>Email Preview</h3>);
-    const imagePreviewHeader = (<h3>Image Selection</h3>);
+    const previewHeader = (<h3>{this.props.intl.formatMessage(messages.h3emailPreview)}</h3>);
+    const imagePreviewHeader = (<h3>{this.props.intl.formatMessage(messages.h3imageSelection)}</h3>);
     const imagePreviewContent = this.getImagePreviewContent();
+    const { selectedOfferDetails } = this.props;
     if (!this.props.currentOrgDetails || !this.props.currentOrgDetails.basic_details) {
       return (<div>Loading...</div>);
     }
@@ -2617,6 +2618,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   getValidationData={this.saveValidationData}
                   saveForm={this.state.saveForm}
                   stopValidation={this.stopValidation}
+                  selectedOfferDetails={selectedOfferDetails}
               /> : ''}
             </Col>
           </Row>
@@ -2669,6 +2671,7 @@ Email.propTypes = {
   defaultData: PropTypes.object,
   showTemplateName: PropTypes.func,
   onValidationFail: PropTypes.func,
+  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({

package/v2Containers/Email/messages.js

@@ -278,4 +278,12 @@ export default defineMessages({
     id: 'creatives.containersV2.Email.alertMessage',
     defaultMessage: 'Alert',
   },
+  "h3emailPreview": {
+    id: 'creatives.containersV2.Email.h3emailPreview',
+    defaultMessage: 'Email preview',
+  },
+  "h3imageSelection": {
+    id: 'creatives.containersV2.Email.h3imageSelection',
+    defaultMessage: 'Image selection',
+  },
 });

package/v2Containers/EmailWrapper/index.js

@@ -173,6 +173,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       setIsLoadingContent,
       onValidationFail,
       forwardedTags,
+      selectedOfferDetails,
     } = this.props;
     const {
       templateName,
@@ -232,6 +233,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 showTemplateName={showTemplateName}
                 onValidationFail={onValidationFail}
                 forwardedTags={forwardedTags}
+                selectedOfferDetails={selectedOfferDetails}
               />}
               {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor} />}
             </div>
@@ -263,6 +265,7 @@ EmailWrapper.propTypes = {
   showTemplateName: PropTypes.func,
   onValidationFail: PropTypes.func,
   forwardedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/LanguageProvider/constants.js

@@ -4,7 +4,6 @@
  *
  */
 
-export const CHANGE_LOCALE = 'app/LanguageToggle/CHANGE_LOCALE';
 export const DEFAULT_LOCALE = 'en';
 
 export const GET_LOCIZ_MESSAGE_REQUEST =

package/v2Containers/LanguageProvider/index.js

@@ -15,6 +15,7 @@ import zhCN from 'antd/es/locale-provider/zh_CN';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { IntlProvider } from 'react-intl';
+import moment from 'moment';
 import { bindActionCreators } from 'redux';
 import * as actions from './actions';
 import { makeSelectLocale } from './selectors';
@@ -24,6 +25,7 @@ export class LanguageProvider extends React.PureComponent { // eslint-disable-li
   componentDidMount() {
     const user = localStorage.getItem('user');
     let locale = localStorage.getItem('jlocale') || 'en';
+    moment.locale(locale);
     if (user) {
       locale = JSON.parse(user).lang;
     }

package/v2Containers/LanguageProvider/reducer.js

@@ -7,21 +7,15 @@
 import { fromJS } from 'immutable';
 
 import * as types from './constants';
-import {
-  DEFAULT_LOCALE,
-} from '../Cap/constants'; // eslint-disable-line
 
 const initialState = fromJS({
-  locale: DEFAULT_LOCALE,
+  locale: types.DEFAULT_LOCALE,
   messages: {},
   localeLoading: false,
 });
 
 function languageProviderReducer(state = initialState, action) {
   switch (action.type) {
-    case types.CHANGE_LOCALE:
-      return state
-        .set('locale', action.locale);
     case types.GET_LOCIZ_MESSAGE_REQUEST:
       return state.set('localeLoading', true);
     case types.GET_LOCIZ_MESSAGE_SUCCESS:

package/v2Containers/MobilePush/Create/index.js

@@ -978,7 +978,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                       size={"label"}/>
                   </CapColumn>
                   <CapColumn span={6}>
-                    <CapLink title="change" onClick={() => this.addSecondoryCtaIos(true, this.state.formData, {id: "add-sec-cta-ios"})}/>
+                    <CapLink title={this.props.intl.formatMessage(messages.change)} onClick={() => this.addSecondoryCtaIos(true, this.state.formData, {id: "add-sec-cta-ios"})}/>
                   </CapColumn>
                 </CapRow>,
                 primitive: true,
@@ -1705,6 +1705,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 setModalContent={this.setModalContent}
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
+                selectedOfferDetails={this.props.selectedOfferDetails}
               />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&

package/v2Containers/MobilePush/Create/messages.js

@@ -290,4 +290,8 @@ export default defineMessages({
     id: 'creatives.containersV2.MobilePush.Create.here',
     defaultMessage: 'here .',
   },
+  "change": {
+    id: 'creatives.containersV2.MobilePush.Create.change',
+    defaultMessage: 'change',
+  },
 });

package/v2Containers/MobilePush/Edit/index.js

@@ -967,7 +967,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                       size={"label"}/>
                   </CapColumn>
                   <CapColumn span={6}>
-                    <CapLink title="change" onClick={() => this.addSecondoryCtaIos(true, this.state.formData, {id: "add-sec-cta-ios"})}/>
+                    <CapLink title={this.props.intl.formatMessage(messages.change)} onClick={() => this.addSecondoryCtaIos(true, this.state.formData, {id: "add-sec-cta-ios"})}/>
                   </CapColumn>
                 </CapRow>,
                 primitive: true,
@@ -1792,6 +1792,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 setModalContent={this.setModalContent}
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
+                selectedOfferDetails={this.props.selectedOfferDetails}
               />}
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&

package/v2Containers/MobilePush/Edit/messages.js

@@ -282,4 +282,8 @@ export default defineMessages({
     id: 'creatives.containersV2.MobilePush.Edit.pleaseInput',
     defaultMessage: "Please input",
   },
+  "change": {
+    id: 'creatives.containersV2.MobilePush.Edit.change',
+    defaultMessage: "change",
+  },
 });

package/v2Containers/Sms/Create/index.js

@@ -176,7 +176,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const unicodeEnabled = _.get(this.state, `formData[0]['unicode-validity']`);
     const smsDetails = updateCharCount(content || "", unicodeEnabled || false);
     if (this.smsCount.current) {
-      this.smsCount.current.innerText = `${smsDetails.parts}SMS (${smsDetails.chars_used} characters)`;
+      this.smsCount.current.innerText = `${smsDetails.parts}${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`;
     }
   }
 
@@ -970,6 +970,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 router={this.props.router}
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
+                selectedOfferDetails={this.props.selectedOfferDetails}
               />
             </CapColumn>
           </CapRow>
@@ -995,6 +996,7 @@ Create.propTypes = {
   isFullMode: PropTypes.bool,
   getFormSubscriptionData: PropTypes.func,
   isLoadingMetaEntities: PropTypes.bool,
+  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Sms/Create/messages.js

@@ -110,4 +110,20 @@ export default defineMessages({
     id: 'creatives.containersV2.Create.templateNotValid',
     defaultMessage: 'Template data is not valid',
   },
+  "Creative name": {
+    id: 'creatives.containersV2.Create.creativeName',
+    defaultMessage: 'Creative name',
+  },
+  "Add label": {
+    id: 'creatives.containersV2.Create.addLabel',
+    defaultMessage: 'Add label',
+  },
+  "sms": {
+    id: 'creatives.containersV2.Create.sms',
+    defaultMessage: 'SMS',
+  },
+  "characters" : {
+    id: 'creatives.containersV2.Create.characters',
+    defaultMessage: 'characters',
+  },
 });

package/v2Containers/Sms/Edit/index.js

@@ -194,7 +194,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const unicodeEnabled = _.get(this.state, `formData[0]['unicode-validity']`);
     const smsDetails = updateCharCount(content || "", unicodeEnabled || false);
     if (this.smsCount.current) {
-      this.smsCount.current.innerText = `${smsDetails.parts}SMS (${smsDetails.chars_used} characters)`;
+      this.smsCount.current.innerText = `${smsDetails.parts}${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`;
     }
   }
 
@@ -966,6 +966,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 router={this.props.router}
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
+                selectedOfferDetails={this.props.selectedOfferDetails}
               />
             </CapColumn>
           </CapRow>
@@ -994,6 +995,7 @@ Edit.propTypes = {
   setIsLoadingContent: PropTypes.func,
   // route: PropTypes.object,
   injectedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Sms/Edit/messages.js

@@ -102,4 +102,20 @@ export default defineMessages({
     id: 'creatives.containersV2.Edit.templateMarkedSuccessfully',
     defaultMessage: "Template Marked as Final Successfully",
   },
+  "Creative name": {
+    id: 'creatives.containersV2.Edit.creativeName',
+    defaultMessage: 'Creative name',
+  },
+  "Add label": {
+    id: 'creatives.containersV2.Edit.addLabel',
+    defaultMessage: 'Add label',
+  },
+  "sms": {
+    id: 'creatives.containersV2.Edit.sms',
+    defaultMessage: 'SMS',
+  },
+  "characters" : {
+    id: 'creatives.containersV2.Edit.characters',
+    defaultMessage: 'characters',
+  },
 });

package/v2Containers/TagList/index.js

@@ -31,6 +31,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     this.populateTags = this.populateTags.bind(this);
     this.populateTagForChildren = this.populateTagForChildren.bind(this);
     this.transformInjectedTags = this.transformInjectedTags.bind(this);
+    this.transformCouponTags = this.transformCouponTags.bind(this);
   }
 
   componentDidMount() {
@@ -138,6 +139,44 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     return tagsObject[tagValue];
   }
 
+  transformCouponTags(offerDetails, allTags) {
+    const couponTags = {};
+    const couponTagsKeys = Object.keys(_.get(allTags, 'coupon.subtags', []));
+    const withCouponId = (obj, id) => {
+      const tempObj = {};
+      if (obj.subtags) {
+        tempObj.subtags = _.mapValues(obj.subtags, (tag) => ({
+          ...withCouponId(tag, id),
+        }));
+      }
+      return {
+        ...obj,
+        ...tempObj,
+        couponSeriesId: id,
+      };
+    };
+    offerDetails.forEach((offer) => {
+      const { id, couponName } = offer;
+      const couponSubTags = {};
+      couponTagsKeys.forEach((couponTagKey) => {
+        const couponSubTagsObj = withCouponId(allTags.coupon.subtags[couponTagKey], id);
+        couponSubTags[couponTagKey] = couponSubTagsObj;
+      });
+      const key = couponName || id;
+      couponTags[key] = {
+        'tag-header': true,
+        'name': couponName || id,
+        'desc': couponName || id,
+        'couponSeriesId': id,
+        'subtags': couponSubTags,
+        'resolved': true,
+        'couponTags': true,
+      };
+    });
+    // eslint-disable-next-line no-param-reassign
+    allTags.coupon.subtags = couponTags;
+  }
+
   transformInjectedTags(tags) {
     _.forEach(tags, (tag) => {
       const temp = tag;
@@ -189,6 +228,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       tags = this.populateTags(this.props.tags);
       console.log('populating tags', tags);
     }
+    if (this.props.selectedOfferDetails && !_.isEmpty(this.props.selectedOfferDetails) && (tags && tags.coupon)) {
+      this.transformCouponTags(this.props.selectedOfferDetails, tags);
+    }
     tags = _.merge( {}, tags, injectedTags);
     console.log('merged tags', tags);
     return (
@@ -220,6 +262,7 @@ TagList.propTypes = {
   moduleFilterEnabled: PropTypes.bool,
   className: PropTypes.string,
   userLocale: PropTypes.string,
+  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Templates/_templates.scss

@@ -1,4 +1,6 @@
-  .ant-tabs-content{
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.ant-tabs-content{
     margin-top: 16px;
     .ant-tabs-tabpane-active{
       padding: unset;
@@ -16,6 +18,12 @@
   }
 }
 
+.ant-radio-group.#{cap-radioCard-v2} {
+  .ant-radio-button-wrapper {
+    border: 1px solid $CAP_G07;
+  }
+}
+
 .card-title {
   line-height: 24px;
   font-size: 14px;

package/v2Containers/Templates/index.js

@@ -54,6 +54,7 @@ import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE } from '../CreativesContai
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
+import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 
 
 const {CapCustomCardList} = CapCustomCard;
@@ -67,6 +68,7 @@ const InlineDiv = styled.div`
   }
 `;
 const ACCOUNT_SELECTION_MODE = "accountSelectionMode";
+const ACCOUNT_CHANGE_MODE = 'accountChangeMode';
 const TEMPLATES_MODE = "templatesMode";
 const WECHAT_FILTERS = {
   ALL: 'all',
@@ -1525,6 +1527,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   renderAccountSelection = () => {
     const accountOptions = [];
+    const { selectedAccount } = this.state;
     let { channel = '' } = this.state;
     channel = channel.toUpperCase();
     const { Templates: templates = {}, location = {} } = this.props;
@@ -1570,7 +1573,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     return (<CapSpin spinning={fetchingWeCrmAccounts}>
       {isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...messages.noAccountsPresentWeChat} /> :
-      <div style={{overflowX: "auto"}}>
+      <div style={{ overflowX: "auto", paddingBottom: CAP_SPACE_16 }}>
         <CapHeader
           title={isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}
           description={this.props.intl.formatMessage(messages.chooseAccount)}
@@ -1584,7 +1587,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           cardHeight="48px"
           cardWidth="276px"
           size="small"
-                      />
+          defaultValue={selectedAccount}
+          selected={selectedAccount}
+        />
       </div>
        }
     </CapSpin>);
@@ -1594,18 +1599,23 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.setState({activeMode: ACCOUNT_SELECTION_MODE});
   }
 
+  setAccountChangeMode = () => {
+    this.setState({activeMode: ACCOUNT_CHANGE_MODE});
+  }
+
   setTemplatesMode = () => {
     this.setState({activeMode: TEMPLATES_MODE});
   }
 
   showAccountName = () => {
-    const { selectedAccount, channel } = this.state;
+    const { activeMode, selectedAccount, channel } = this.state;
     const { Templates: templates = {}} = this.props;
     const { weCrmAccounts = []} = templates;
     const isMobilePushChannel = channel === MOBILE_PUSH;
-    return (<CapHeader
+    return (activeMode !== ACCOUNT_CHANGE_MODE &&
+    <CapHeader
       title={<CapHeading type="h4">{isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}</CapHeading>}
-      description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountSelectionMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
+      description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountChangeMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
       size="regular"
   />);
   }
@@ -1691,63 +1701,66 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     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);
     return (
-      <div className={`creatives-templates-list ${this.props.isFullMode ? 'full-mode' : 'library-mode'}`}>
-        <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
+      <>
+        {activeMode === ACCOUNT_CHANGE_MODE && this.renderAccountSelection()}
+        <div className={`creatives-templates-list ${this.props.isFullMode ? 'full-mode' : 'library-mode'}`}>
+          <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
 
 
-        <CapRow>
-          <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
-            {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
-          </Pagination>
-          {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
+          <CapRow>
+            <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
+              {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
+            </Pagination>
+            {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
               <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
             </div>}
-        </CapRow>
-
-
-        <CapRow>
-          {!isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
-          <CreativesContainer
-            key={creativesParams.mode}
-            messageDetails={{type: "default"}}
-            creativesMode={creativesParams.mode}
-            messages={messages}
-            isFullMode={isFullMode}
-            templateData={creativesParams}
-            getCreativesData={() => { this.onCreateComplete(true); }}
-            channel={route.name.toUpperCase()}
-            handleCloseCreatives={this.onCreateComplete}
-            selectedWeChatAccount={get(this.props, 'Templates.selectedWeChatAccount', {})}
+          </CapRow>
+
+
+          <CapRow>
+            {!isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
+            <CreativesContainer
+              key={creativesParams.mode}
+              messageDetails={{type: "default"}}
+              creativesMode={creativesParams.mode}
+              messages={messages}
+              isFullMode={isFullMode}
+              templateData={creativesParams}
+              getCreativesData={() => { this.onCreateComplete(true); }}
+              channel={route.name.toUpperCase()}
+              handleCloseCreatives={this.onCreateComplete}
+              selectedWeChatAccount={get(this.props, 'Templates.selectedWeChatAccount', {})}
             />
           }
-        </CapRow>
-        <CapRow>
-
-          {(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && htmlPreviewContent && <EmailPreview
-            header={previewHeader}
-            content={htmlPreviewContent}
-            show={this.state.showHtmlPreview}
-            device={this.state.device}
-            handleClose={this.toggleEmailPreview}
-            changePreviewDevice={this.changePreviewDevice}
-            versions={get(this.state, 'previewTemplate.versions', {})}
-            lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
-            updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
+          </CapRow>
+          <CapRow>
+
+            {(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && htmlPreviewContent && <EmailPreview
+              header={previewHeader}
+              content={htmlPreviewContent}
+              show={this.state.showHtmlPreview}
+              device={this.state.device}
+              handleClose={this.toggleEmailPreview}
+              changePreviewDevice={this.changePreviewDevice}
+              versions={get(this.state, 'previewTemplate.versions', {})}
+              lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
+              updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
           />}
-          <CapSlideBox
-            header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
-            width={60}
-            content={cmsTemplateSelectionContent}
-            show={this.state.showEdmEmailTemplates}
-            handleClose={this.toggleEdmEmailTemplateSelection}
-            loadingText={"Loading EDM Templates"}
-            isLoading={this.props.Templates.getCmsTemplatesInProgress}
+            <CapSlideBox
+              header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
+              width={60}
+              content={cmsTemplateSelectionContent}
+              show={this.state.showEdmEmailTemplates}
+              handleClose={this.toggleEdmEmailTemplateSelection}
+              loadingText={"Loading EDM Templates"}
+              isLoading={this.props.Templates.getCmsTemplatesInProgress}
             />
-          {this.renderDeleteConfirmationModal()}
-        </CapRow>
+            {this.renderDeleteConfirmationModal()}
+          </CapRow>
 
-      </div>
+        </div>
+      </>
     );
   }