@capillarytech/creatives-library 3.2.4 → 3.3.0

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>
+      </>
     );
   }
 

package/v2Containers/TemplatesV2/index.js

@@ -5,18 +5,16 @@
  */
 
 import PropTypes from 'prop-types';
-
 import React from 'react';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import styled from 'styled-components';
 import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import Helmet from 'react-helmet';
 
-import {CAP_SPACE_24, CAP_SPACE_16} from '@capillarytech/cap-ui-library/styled/variables';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from '../Templates/selectors';
 import messages from './messages';
@@ -24,33 +22,17 @@ import * as actions from './actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Gallery from '../Assets/Gallery';
-import './_templatesV2.scss';
+import withStyles from '../../hoc/withStyles';
+import styles, { CapTabStyle } from './TemplatesV2.style';
 
 const {CapCustomCardList} = CapCustomCard;
 
-const ComponentWrapper = styled.div`
-${(props) => props.isFullMode ? `
-max-width: 1140px;
-margin: 0 auto;
-width: 100%;
-padding: ${CAP_SPACE_24} 0;
-.ant-tabs-content{
-  margin-top: ${CAP_SPACE_16}
-}
-  ` : `.cap-tab-v2 {
-    height: calc(100vh - 118px);
-  } `}
-  
- 
-`;
-const MarginTop = styled.div`
-  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
-}
-`;
+const StyledCapTab = withStyles(CapTab, CapTabStyle);
+
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
-    const defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
+    let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
     const defaultPanes = {
       sms: {content: <div></div>, tab: props.intl.formatMessage(messages.sms), key: 'sms'},
       email: {content: <div></div>, tab: props.intl.formatMessage(messages.email), key: 'email'},
@@ -59,8 +41,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       mPush: {content: <div></div>, tab: props.intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
     };
     const channelsToHide = this.props.channelsToHide || [];
-
-    const filteredPanes = Object.keys(defaultPanes)
+    const channelsToDisable = this.props.channelsToDisable || [];
+    let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
         obj.push(defaultPanes[key]);
         return obj;
@@ -72,11 +54,31 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.callTask), key: 'call_task'});
     }
 
+    filteredPanes = filteredPanes.map( (pane) => {
+      if (channelsToDisable.includes(pane.key)) {
+        pane.disabled = true;
+      }
+    return pane;
+    });
+
+    const channel = ['sms', 'email', 'mobilepush', 'call_task'];
+    if (!isEmpty(channelsToDisable)) {
+      channel.some((ch) => {
+        if (!channelsToDisable.includes(ch)) {
+          defaultChannel = ch;
+          return true;
+        }
+        return false;
+      });
+    }
+
     const panes = this.setChannelContent(defaultChannel, filteredPanes);
+
     this.state = {
       selectedChannel: defaultChannel,
       panes,
     };
+    !props.isFullMode && this.props.onChannelChange(defaultChannel);
   }
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
@@ -147,21 +149,20 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     }
   }
 
-  setChannelContent = (selectedChannel, argsPanes) => {
-    const panes = argsPanes.map((p) => {
-      const pane = p;
+  setChannelContent = (selectedChannel, argsPanes) => (
+    argsPanes.map((pane) => {
+      let content = null;
       if (pane.key === selectedChannel) {
-        let channel = selectedChannel;
-        if (channel === "mpush") {
-          channel = "mobilepush";
-        }
-        pane.content = this.getTemplatesComponent(channel);
-        return pane;
+        const channel = selectedChannel === "mpush" ? "mobilepush" : selectedChannel;
+        content = this.getTemplatesComponent(channel);
       }
-      return {...pane, content: <div></div>};
-    });
-    return panes;
-  }
+      return {
+        ...pane,
+        content,
+      };
+    })
+  );
+
   channelChange = (selectedChannel) => {
     const panes = this.setChannelContent(selectedChannel, this.state.panes);
     this.setState({panes, selectedChannel}, () => { if (!this.props.isFullMode) this.props.onChannelChange(selectedChannel); });
@@ -172,28 +173,25 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     return this.props.Templates.loadingTemplates;
   }
   render() {
-    const {isFullMode} = this.props;
+    const { isFullMode, className } = this.props;
     return (
-      <div className={`creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
+      <div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
         {isFullMode && <Helmet
           title={this.props.intl.formatMessage(messages.creatives)}
           meta={[
             { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
           ]}
         />}
-        <ComponentWrapper isFullMode={isFullMode}>
-
+        <div className="component-wrapper">
           {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
-          <MarginTop isFullMode={isFullMode}>
-            <CapTab
-              panes={this.state.panes}
-              onChange={this.channelChange}
-              activeKey={this.state.selectedChannel}
-              defaultActiveKey={this.state.selectedChannel}/>
-          </MarginTop>
-
-
-        </ComponentWrapper>
+          <StyledCapTab
+            panes={this.state.panes}
+            onChange={this.channelChange}
+            activeKey={this.state.selectedChannel}
+            defaultActiveKey={this.state.selectedChannel}
+            isFullMode={isFullMode}
+          />
+        </div>
       </div>
 
     );
@@ -213,6 +211,8 @@ TemplatesV2.propTypes = {
   intl: intlShape,
   onChannelChange: PropTypes.func,
   channelsToHide: PropTypes.array,
+  className: PropTypes.string.isRequired,
+  channelsToDisable: PropTypes.array,
 };
 
 TemplatesV2.defaultProps = {
@@ -230,4 +230,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(TemplatesV2)));
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(TemplatesV2, styles))));

package/v2Containers/WeChat/MapTemplates/index.js

@@ -426,7 +426,6 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
 
   getFormData(formData) {
     let { editTemplateData} = this.state;
-    const { formData: stateFormData } = this.state;
     const selectedWeChatAccount = (!isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.WeChat.selectedWeChatAccount);
     if (isEmpty(editTemplateData)) {
       editTemplateData = formData;

package/v2Containers/WeChat/MapTemplates/messages.js

@@ -60,7 +60,7 @@ export default defineMessages({
   },
   "wechatEditSuccess": {
     id: 'creatives.containersV2.WeChat.wechatEditSuccess',
-    defaultMessage: "WeChat template unmapped successfully",
+    defaultMessage: "WeChat template edited successfully",
   },
   "wechatCreateSuccess": {
     id: 'creatives.containersV2.WeChat.wechatCreateSuccess',

package/v2Containers/WeChat/RichmediaTemplates/Create/_createRichmedia.scss

@@ -59,6 +59,16 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
   }
+
+  .existing-template-title-card {
+    padding: 12px;
+    background-color: white;
+    height: 44px;
+    width: 244px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
   .custom-image {
     position: relative;
     .name-container {

package/v2Containers/WeChat/RichmediaTemplates/Create/actions.js

@@ -10,6 +10,15 @@ export function defaultAction() {
     type: types.DEFAULT_ACTION,
   };
 }
+
+export function getAllTemplates(channel, queryParams) {
+  return {
+    type: types.GET_ALL_TEMPLATES_REQUEST,
+    channel,
+    queryParams,
+  };
+}
+
 export function uploadAsset(file, assetType, fileParams, mode, wechatParams, contentId, uploadId) {
   return {
     type: types.UPLOAD_ASSET_REQUEST,

package/v2Containers/WeChat/RichmediaTemplates/Create/constants.js

@@ -13,3 +13,6 @@ export const SAVE_TEMPLATE_REQUEST = 'app/v2Containers/Wechat/RichmediaTemplates
 export const SAVE_TEMPLATE_SUCCESS = 'app/v2Containers/Wechat/RichmediaTemplates/Create/SAVE_TEMPLATE_SUCCESS';
 export const SAVE_TEMPLATE_FAILURE = 'app/v2Containers/Wechat/RichmediaTemplates/Create/SAVE_TEMPLATE_FAILURE';
 export const CLEAR_CONTENT_ASSET = 'app/v2Containers/Wechat/RichmediaTemplates/Create/CLEAR_CONTENT_ASSET';
+export const GET_ALL_TEMPLATES_REQUEST = 'app/v2Containers/Wechat/RichmediaTemplates/Create/GET_ALL_TEMPLATES_REQUEST';
+export const GET_ALL_TEMPLATES_SUCCESS = 'app/v2Containers/Wechat/RichmediaTemplates/Create/GET_ALL_TEMPLATES_SUCCESS';
+export const GET_ALL_TEMPLATES_FAILURE = 'app/v2Containers/Wechat/RichmediaTemplates/Create/GET_ALL_TEMPLATES_FAILURE';

package/v2Containers/WeChat/RichmediaTemplates/Create/index.js

@@ -17,7 +17,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import forEach from 'lodash/forEach';
 import isEqual from 'lodash/isEqual';
 import get from 'lodash/get';
-import { CapRow, CapColumn, CapButton, CapCard, CapSpin, CapInput, CapHeading, CapDivider, CapIcon, CapLink, CapLabel, CapNotification } from '@capillarytech/cap-ui-library';
+import { CapRow, CapColumn, CapButton, CapCard, CapSpin, CapInput, CapHeading, CapDivider, CapIcon, CapLink, CapLabel, CapNotification, CapSlideBox } from '@capillarytech/cap-ui-library';
 import makeSelectCreate, {makeSelectTemplates, getAssetDetails, getContentAssetDetails} from './selectors';
 import * as actions from './actions';
 import richmediaschema from './richmediaschema';
@@ -26,6 +26,8 @@ import messages from './messages';
 import FormBuilder from '../../../../v2Components/FormBuilder';
 import WechatRichmediaTemplatePreview from '../../../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import noImage from '../../../../assets/noImage.png';
+import Pagination from '../../../../v2Components/Pagination';
+import { CAP_SPACE_08, CAP_SPACE_12, CAP_SPACE_20, CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -102,6 +104,13 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         type: 'confirm',
         id: 'template-back-confirm-modal',
       },
+      showExistingTemplates: false,
+      existingTemplatesPageNo: 1,
+      existingTemplatesPageLimit: 25,
+      sortBy: 'Most Recent',
+      searchText: '',
+      pagination: true,
+      scrollDebounce: true,
     };
     this.onFormDataChange = this.onFormDataChange.bind(this);
     this.cancelHandler = this.cancelHandler.bind(this);
@@ -836,6 +845,126 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     });
     return true;
   }
+
+  onChooseExistingTemplate = (template, e) => {
+    e.stopPropagation();
+    const content = get(template, 'versions.base.mediaList[0]', {});
+    let postCommentsValue = 'No one';
+    const templateData = cloneDeep(this.state.templateData);
+
+    if (content.only_fans_can_comment && content.need_open_comment) {
+      postCommentsValue = 'Only followers';
+    } else if (content.need_open_comment) {
+      postCommentsValue = 'Anyone';
+    }
+
+    templateData[this.state.currentContentId] = {
+      formData: {
+        'title-value': content.title,
+        'author-value': content.author,
+        'cover-abstract-value': content.digest,
+        'content-value': content.content,
+        'source-link-value': content.content_source_url,
+        'post-comments-value': postCommentsValue,
+        'show-cover-pic-value': content.show_cover_pic,
+      },
+      imageUrl: content.image_url,
+      mediaId: content.thumb_media_id,
+    };
+    this.setState({ templateData });
+    this.onCloseExistingTemplatesSlideBox();
+  }
+
+  getExistingTemplates = () => {
+    const { searchText, sortBy, existingTemplatesPageNo, existingTemplatesPageLimit } = this.state;
+    const { selectedWeChatAccount } = this.props.Templates;
+
+    this.setState({showExistingTemplates: true});
+    const queryParams = {
+      name: searchText || '',
+      sortBy: sortBy,
+      wecrmId: selectedWeChatAccount.configs.wecrm_app_id,
+      wecrmToken: selectedWeChatAccount.configs.wecrm_token,
+      originalId: selectedWeChatAccount.sourceAccountIdentifier,
+      page: existingTemplatesPageNo,
+      perPage: existingTemplatesPageLimit,
+    };
+    this.props.actions.getAllTemplates('wechat', queryParams);
+  }
+
+  searchTemplate = (data) => {
+    this.setState({searchText: data}, () => {
+      this.getExistingTemplates();
+    });
+  }
+
+  onPaginationChange = () => {
+    if (this.props.Create.pagination && this.state.scrollDebounce) {
+      this.setState((prevState) => ({
+        existingTemplatesPageNo: prevState.existingTemplatesPageNo + 1,
+        scrollDebounce: false,
+      }),
+      () => {
+        this.getExistingTemplates();
+        setTimeout(() => {
+          this.setState({ scrollDebounce: true })
+        }, 500);
+      });
+    }
+  }
+
+  existingTemplatesContent = () => {
+    const { getAllTemplatesInProgress, templates = [] } = this.props.Create;
+    return (
+      <CapSpin style={{textAlign: "center"}} spinning={getAllTemplatesInProgress}>
+        <CapInput.Search
+          className="search-text"
+          style={{ width: '100%', marginBottom: CAP_SPACE_16 }}
+          placeholder={this.props.intl.formatMessage(messages.searchText)}
+          value={this.state.searchText}
+          onChange={(e) => this.searchTemplate(e.target.value)}
+          onClear={() => this.searchTemplate('')}
+        />
+        <Pagination style={{ height: 'calc(100vh - 150px)', overflowY: 'auto' }} onPageChange={templates.length && this.onPaginationChange}>
+          { templates.map((template) => (
+              <CapCard
+                key={template._id}
+                bordered={false}
+                bodyStyle={{
+                  padding: 0,
+                  borderRadius: '4px',
+                  width: '276px',
+                  border: '16px solid #f4f5f7',
+                }}
+                onClick={(e) => this.onChooseExistingTemplate(template, e)}
+                style={{ paddingBottom: CAP_SPACE_12 }}
+              >
+                <div>
+                  <div className="custom-image">
+                    <img alt="" width="244px" height="136px" src={template.versions.base.mediaList[0].image_url} />
+                  </div>
+                  <div className="existing-template-title-card">
+                    <CapHeading type="h5" className="overflow-wrap-fields">{template.name || "Title"}</CapHeading>
+                  </div>
+                </div>
+              </CapCard>
+            ))
+          }
+        </Pagination>
+      </CapSpin>
+    );
+  }
+
+  onCloseExistingTemplatesSlideBox = () => {
+    this.setState({
+      showExistingTemplates: false,
+      existingTemplatesPageNo: 1,
+      existingTemplatesPageLimit: 25,
+      searchText: '',
+      pagination: true,
+    });
+  }
+
   updateContentData = () => {
     this.state.editorInstanse.insertHtml(`<img src='${this.props.ContentImageData.metaInfo.wechatUrl}' alt='Capillary Image'>`);
     this.props.actions.clearContentImageStore();
@@ -845,8 +974,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const addRichMediaMenu = (
       <>
         <div style={{width: '292px'}}><CapDivider /></div>
-        <CapHeading type="h5" style={{marginBottom: '8px'}}>Add rich media content</CapHeading>
-        <CapButton type="dashed" onClick={this.menuOnClickEvent} prefix={<CapIcon size="s" type="add-media" />} style={{backgroundColor: 'white'}}>New media</CapButton>
+        <CapHeading type="h5" style={{marginBottom: '8px'}}>{this.props.intl.formatMessage(messages.addRichMediaContent)}</CapHeading>
+        <CapButton type="dashed" onClick={this.getExistingTemplates} prefix={<CapIcon size="s" type="media" />} style={{backgroundColor: 'white', width: '142px', marginRight: CAP_SPACE_08, paddingLeft: CAP_SPACE_12}}>{this.props.intl.formatMessage(messages.existingMedia)}</CapButton>
+        <CapButton type="dashed" onClick={this.menuOnClickEvent} prefix={<CapIcon size="s" type="add-media" />} style={{backgroundColor: 'white'}}>{this.props.intl.formatMessage(messages.newMedia)}</CapButton>
       </>
     );
     return addRichMediaMenu;
@@ -902,6 +1032,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const schema = this.returnCurrentSchema();
     const formData = this.returnCurrentFormData();
     const { isIframe } = this.state;
+    const { intl } = this.props;
     this.updateImageData();
     if (this.props.ContentImageData && this.props.ContentImageData.metaInfo && this.props.ContentImageData.metaInfo.wechatUrl) {
       this.updateContentData();
@@ -927,7 +1058,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 </CapColumn>
                 <CapColumn span={15}>
                   { !isIframe && <CapInput
-                    label="Name of the template"
+                    label={this.props.intl.formatMessage(messages.nameOfTemplate)}
                     value={this.state.templateName}
                     onChange={this.templateNameHandler}
                     size="large"
@@ -956,6 +1087,17 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
               </CapRow>
             </div>
           </div>
+          <CapSlideBox
+            header={(
+              <CapHeading type="h3">
+                {intl.formatMessage(messages.existingMediaHeader)}
+              </CapHeading>
+            )}
+            content={this.existingTemplatesContent()}
+            show={this.state.showExistingTemplates}
+            handleClose={this.onCloseExistingTemplatesSlideBox}
+            size="size-s"
+          />
         </CapSpin>
       </div>
     );