@capillarytech/creatives-library 7.10.51 → 7.10.52

package/containers/Assets/Gallery/tests/__snapshots__/reducer.test.js.snap

@@ -1,3 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
 exports[`galleryReducer Initial State should match snapshot returns the initial state 1`] = `
 Object {
   "assetList": Array [],

package/containers/Email/index.js

@@ -2733,11 +2733,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     } else {
       this.setState({injectedTags: data.tags});
     }
-    this.props.globalActions.setInjectedTags(data.tags);
+    if (data.tags) {
+      this.props.globalActions.setInjectedTags(data.tags);
+    }
   }
 
   startLoading = (ifEdit) => {
-    
     if (ifEdit) {
       this.setState({loading: true});
     }

package/package.json

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

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -15,7 +15,7 @@
       }
   }
 
-  .msgContainer {
+  .msg-container {
     position: absolute;
     top: 20%;
     left: 23%;
@@ -238,6 +238,21 @@
       }
     }
   }
+
+  .whatsapp-brand-name {
+    position: absolute;
+    top: 11%;
+    left: 38%;
+    color: white;
+    font-size: small;
+  }
+  .whatsapp-message-container{
+    max-height: 292px;
+    margin-left: 28px;
+  }
+  .whatsapp-content{
+    margin: 2px 6px 1px 7px;
+  }
 }
 
 .align-center {
@@ -291,7 +306,7 @@
     }
 
 
-    .msgContainer {
+    .msg-container {
       position: absolute;
       top: 14%;
       left: 29%;
@@ -399,11 +414,4 @@
   span {
     font-size: $FONT_SIZE_VS;
   }
-}
-.whatsapp-brand-name{
-    position: absolute;
-    top: 11%;
-    left: 38%;
-    color: white;
-    font-size: small;
 }

package/v2Components/TemplatePreview/index.js

@@ -10,7 +10,7 @@ import React from 'react';
 import _ from 'lodash';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 // import styled from 'styled-components';
-import {CapColumn, CapRow, CapHeading, CapIcon, CapButton, CapImage} from '@capillarytech/cap-ui-library';
+import { CapColumn, CapRow, CapHeading, CapIcon, CapButton, CapImage, CapLabel } from '@capillarytech/cap-ui-library';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
@@ -20,11 +20,11 @@ import {
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
+import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg'
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const lineMobileAndroid = require('../../assets/line.png');
 const viberMobileAndroid = require('./assets/images/viberMobile.svg');
-const whatsappMobileAndroid = require('./assets/images/whatsapp_mobile_android.svg');
 
 const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
 const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
@@ -32,10 +32,20 @@ const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 
-import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06, CAP_G15, CAP_PURPLE01, CAP_G16, CAP_SPACE_08, CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
+import { 
+  CAP_COLOR_03,
+  CAP_WHITE,
+  FONT_COLOR_01,
+  CAP_G06,
+  CAP_G15,
+  CAP_PURPLE01,
+  CAP_G16,
+  CAP_SPACE_08,
+  CAP_SPACE_16,
+} from '@capillarytech/cap-ui-library/styled/variables';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
-import { getWhatsappStatusContainer } from '../../v2Containers/Whatsapp/utils';
+import WhatsappStatusContainer from '../WhatsappStatusContainer';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -137,7 +147,17 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
 
   render() {
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
-    const { channel, showTestAndPreviewIcon, module, viberBrandName, viberAccountName, whatsappAccountName, whatsappContentLen = 0, intl, templateData } = this.props;
+    const { 
+      channel,
+      showTestAndPreviewIcon,
+      module,
+      viberBrandName,
+      viberAccountName,
+      whatsappAccountName,
+      whatsappContentLen = 0,
+      intl,
+      templateData,
+    } = this.props;
     const { formatMessage } = intl;
     const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
     let smsDetails = {};
@@ -194,7 +214,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       'width': '81%',
     };
     const whatsappSectionStyle = {
-      "padding": '3.5px 0 0',
+      'padding': `4px 0 ${CAP_SPACE_08}`,
       'border-radius': '6px',
       'background-color': CAP_G15,
       'width': '88%',
@@ -284,10 +304,10 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           {smsDetails.optoutUrlPresent && <CapHeading type="h6">
             <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
           </CapHeading>}
-          {channel && channel.toLowerCase() === WHATSAPP.toLowerCase() ? (
+          {channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
             <>
-              {getWhatsappStatusContainer(templateData)}
-              <CapHeading type="h3" style={{ marginTop: '12px' }}>
+              <WhatsappStatusContainer template={templateData} />
+              <CapHeading type="h3" className='margin-t-12'>
                 <FormattedMessage {...messages.whatsappCharactersTotal} values={{charCount: content?.templateMsg?.length}} />
               </CapHeading>
               <CapHeading type="h6">
@@ -332,7 +352,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               <div>
                 <div className="shell-v2 align-center" id="sms-preview">
                   <CapImage className="preview-image sms" src={smsMobileAndroid} alt="Preview is being generated"/>
-                  <div className="msgContainer sms">
+                  <div className="msg-container sms">
                     <div className={"message-pop sms"}>
                       {content && content.length && content.map((msg, index) =>
                         <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
@@ -360,7 +380,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             {channel && channel.toLowerCase() === 'wechat' ?
             ( <div className="shell-v2 align-center" id="sms-preview">
               <CapImage className="preview-image" src={(channel || '').toLowerCase() === 'wechat' ? wechatBodyNew : smsMobileAndroid} alt="Preview is being generated"/>
-              <div className="msgContainer wechat">
+                <div className="msg-container wechat">
                 <div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
                 </div>
               </div>
@@ -420,7 +440,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             <div className="shell-v2 align-center" id="sms-preview">
               <CapImage className="preview-image" src={lineMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               <div
-                className="msgContainer line-preview"
+                    className="msg-container line-preview"
                 style={{
                   maxHeight: 330,
                   overflow: 'scroll',
@@ -588,7 +608,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               <CapImage className="preview-image" src={viberMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               <div style={{ position: 'absolute', top: '12%', left: '36%'}}>{viberBrandName}</div>
               <div
-                className="msgContainer viber-preview"
+                    className="msg-container viber-preview"
                 style={{
                   maxHeight: 292,
                   marginLeft: 28,
@@ -662,47 +682,41 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             </div>
           ) : ''
         }
-            {channel && channel?.toUpperCase() === WHATSAPP ? (
-              <>
-                <div className="shell-v2 align-center" id="sms-preview">
-                  <CapImage
-                    className="preview-image"
-                    src={whatsappMobileAndroid}
-                    alt={formatMessage(messages.previewGenerated)}
-                  />
-                  <div className="whatsapp-brand-name">
-                    {whatsappAccountName || ''}
-                  </div>
-                  <div
-                    className="msgContainer"
-                    style={{
-                      maxHeight: 292,
-                      marginLeft: 28,
-                    }}
-                  >
-                    <div
-                      className="message-pop align-left"
-                      style={whatsappSectionStyle}
-                    >
-                      <p
-                        style={{
-                          color: CAP_G16,
-                          margin: '1.5px 6px 1px 7px',
-                        }}
-                      >
-                        {content?.templateMsg || ''}
-                      </p>
-                      <div style={{ paddingBottom: CAP_SPACE_08 }}></div>
+            {
+              channel && channel?.toUpperCase() === WHATSAPP ? (
+                <>
+                  <div className='shell-v2 align-center'>
+                    <CapImage
+                      className='preview-image'
+                      src={whatsappMobileAndroid}
+                      alt={formatMessage(messages.previewGenerated)}
+                    />
+                    <CapLabel className='whatsapp-brand-name'>
+                      {whatsappAccountName || ''}
+                    </CapLabel>
+                    <div className='msg-container whatsapp-message-container'>
+                      <div className='message-pop align-left' style={whatsappSectionStyle}>
+                        <CapLabel className='whatsapp-content'>
+                          {content?.templateMsg || ''}
+                        </CapLabel>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <CapHeading type="h3" style={{ textAlign: "center", marginTop: CAP_SPACE_16 }}>
-                  <FormattedMessage {...messages.whatsappMessageLength} values={{ length: 36 + whatsappContentLen }} />
-                </CapHeading>
-              </>
-            ) : (
-              ''
-            )}
+                  <CapHeading
+                    type='h3'
+                    style={{ textAlign: 'center' }}
+                    className='margin-t-16'
+                  >
+                    <FormattedMessage
+                      {...messages.whatsappMessageLength}
+                      values={{ length: 36 + whatsappContentLen }}
+                    />
+                  </CapHeading>
+                </>
+              ) : (
+                ''
+              )
+            }
             {channel && channel.toLowerCase() === FACEBOOK && (
               <div style={{position: 'absolute', left: '80%'}} id="facebook-preview">
                 <CapFacebookPreview

package/v2Components/WhatsappStatusContainer/_whatsappStatusContainer.scss

@@ -0,0 +1,13 @@
+.whatsapp-status-container {
+  margin-top: 12px;
+  width: 150%;
+  height: 20px;
+  
+  .cap-colored-tag-v2 {
+    font-weight: normal;
+  }
+
+  .whatsapp-category-tag {
+    margin-left: 8px;
+  }
+}

package/v2Components/WhatsappStatusContainer/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { CapRow, CapStatus, CapColoredTag } from '@capillarytech/cap-ui-library';
+import { WHATSAPP } from '../../v2Containers/CreativesContainer/constants';
+import {
+    CATEGORY as WHATSAPP_CATEGORY,
+    STATUS as WHATSAPP_STATUS,
+} from '../../v2Containers/Whatsapp/constants';
+import { getWhatsappCategory, getWhatsappStatus } from '../../v2Containers/Whatsapp/utils';
+import './_whatsappStatusContainer.scss';
+
+export const WhatsappStatusContainer = (props) => {
+
+    const { template } = props;
+
+    const {
+        versions: {
+          base: {
+            content: {
+                [WHATSAPP.toLowerCase()]: {
+                [WHATSAPP_STATUS]: status,
+                [WHATSAPP_CATEGORY]: category,
+              } = {},
+            } = {},
+          } = {},
+        } = {},
+    } = template;
+
+    const categoryObj = getWhatsappCategory(category) || {};
+    const {
+        label: categoryLabel,
+        tagColor: categoryTagColor,
+        tagTextColor: categoryTextColor,
+    } = categoryObj;
+    return (
+        <CapRow type="flex" align="middle" className="whatsapp-status-container">
+            <CapStatus
+                type={status}
+                text={getWhatsappStatus(status)?.label}
+                labelType="label3"
+            />
+            {
+            categoryLabel ? (
+                <CapColoredTag
+                    tagColor={categoryTagColor}
+                    tagTextColor={categoryTextColor}
+                    tagHeight="20px"
+                    tagFontSize="12px"
+                    className="whatsapp-category-tag"
+                >
+                    {categoryLabel}
+                </CapColoredTag>
+            ) : null
+            }
+        </CapRow>
+    )
+}
+
+export default WhatsappStatusContainer;

package/v2Containers/Assets/Gallery/tests/__snapshots__/reducer.test.js.snap

@@ -1,3 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
 exports[`galleryReducer Initial State should match snapshot returns the initial state 1`] = `
 Object {
   "assetList": Array [],

package/v2Containers/Cap/messages.js

@@ -80,6 +80,14 @@ export default defineMessages({
     id: `creatives.containersV2.promotions`,
     defaultMessage: 'Promotions',
   },
+  "templateNameLabel": {
+    id: `creatives.containersV2.templateNameLabel`,
+    defaultMessage: 'Template name',
+  },
+  "templateNamePlaceholder": {
+    id: `creatives.containersV2.templateNamePlaceholder`,
+    defaultMessage: 'Enter template name',
+  },
 
     //refresh due to org change messages
 

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -173,11 +173,12 @@ function SlideBoxContent(props) {
     });
 
 
-  const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
-  const isCreateFacebook = slidBoxContent === 'createTemplate' && channel === constants.FACEBOOK;
-  const isCreateWhatsapp = slidBoxContent === 'createTemplate' && channel === constants.WHATSAPP;
-  const isCreateMPush = slidBoxContent === 'createTemplate' && channel === constants.MOBILE_PUSH;
-  const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === constants.CALL_TASK;
+  const isCreate = slidBoxContent === 'createTemplate';
+  const isCreateSms = isCreate && channel === constants.SMS;
+  const isCreateFacebook = isCreate && channel === constants.FACEBOOK;
+  const isCreateWhatsapp = isCreate && channel === constants.WHATSAPP;
+  const isCreateMPush = isCreate && channel === constants.MOBILE_PUSH;
+  const isCreateCallTask = isCreate && channel === constants.CALL_TASK;
   let isEditSms = false;
   let isEditEmailWithId = false;
   let isEmailEditWithContent = false;
@@ -189,7 +190,7 @@ function SlideBoxContent(props) {
   let isEditFacebook = false;
   let isEditFTP = false;
   let isEditWhatsapp = false;
-  const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
+  const isEmailCreate = isCreate && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
     isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -7,6 +7,7 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import messages from './messages';
 import whatsppMsg from '../Whatsapp/messages';
+import globalMessages from '../Cap/messages'
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { NO_COMMUNICATION, FTP, WHATSAPP } from '../App/constants';
 import { isTraiDLTEnable } from '../../utils/common';
@@ -84,7 +85,7 @@ function SlideBoxHeader(props) {
           description={
             isWhatsappEdit && (
               <>
-                {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.templateNameLabel} />)}
+                {renderWhatsappData("label1", <FormattedMessage {...globalMessages.templateNameLabel} />)}
                 {renderWhatsappData("label2", whatsappName)}
                 {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
                 {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.templateCategoryLabel} />)}

package/v2Containers/CreativesContainer/index.js

@@ -821,7 +821,24 @@ 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, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor, smsRegister, enableNewChannels} = this.props;
+    const {
+      isFullMode,
+      creativesMode,
+      cap,
+      isUploading,
+      channelsToHide,
+      selectedWeChatAccount,
+      forwardedTags,
+      channelsToDisable,
+      selectedOfferDetails,
+      onTestContentClicked,
+      onPreviewContentClicked,
+      getCreativesData,
+      fetchingCmsData,
+      editor,
+      smsRegister,
+      enableNewChannels,
+    } = 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 (

package/v2Containers/Email/index.js

@@ -2179,7 +2179,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     } else {
       this.setState({injectedTags: data.tags});
     }
-    this.props.globalActions.setInjectedTags(data.tags);
+    if (data.tags) {
+      this.props.globalActions.setInjectedTags(data.tags);
+    }
   }
 
   startLoading = (ifEdit) => {

package/v2Containers/Templates/_templates.scss

@@ -19,6 +19,25 @@
 }
 
 .creatives-templates-list {
+
+  .delete-template-confirm {
+    .ant-modal-footer {
+      padding: $CAP_SPACE_16 $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_24;
+    }
+
+    .ant-modal-header {
+      padding: $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_08 $CAP_SPACE_24;
+    }
+
+    .ant-modal-body {
+      padding: 0 $CAP_SPACE_24;
+    }
+
+    .ant-modal-close-x {
+      padding: $CAP_SPACE_12;
+    }
+  }
+
   .pagination-container {
     .FACEBOOK {
       .ant-card-body {
@@ -524,40 +543,9 @@
   }
 }
 
-.whatsapp-card-title {
-
-  .whatsapp-status-container {
-    margin-top: 12px;
-    width: 150%;
-    height: 20px;
-
-    .cap-colored-tag-v2 {
-      font-weight: normal;
-    }
-  }
-}
-
 .whatsapp-illustration-desc {
   font-size: 14px;
   color: rgba(0, 0, 0, 0.87);
   margin: 8px 0;
   white-space: pre-wrap;
 }
-
-.delete-template-confirm {
-  .ant-modal-footer {
-    padding: $CAP_SPACE_16 $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_24;
-  }
-
-  .ant-modal-header {
-    padding: $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_08 $CAP_SPACE_24;
-  }
-
-  .ant-modal-body {
-    padding: 0 $CAP_SPACE_24;
-  }
-
-  .ant-modal-close-x {
-    padding: $CAP_SPACE_12;
-  }
-}

package/v2Containers/Templates/actions.js

@@ -55,24 +55,18 @@ export function setWeChatAccount(weChatAccount) {
     weChatAccount,
   };
 }
-
 export function setChannelAccount(channel, account) {
-  switch (channel) {
-    case LINE: {
-      return {
-        type: types.SET_LINE_ACCOUNT,
-        account,
-      };
-    }
-    case WHATSAPP: {
-      return {
-        type: types.SET_WHATSAPP_ACCOUNT,
-        account,
-      };
-    }
-    default:
-      return {};
+  const channelTypeMapping = {
+    LINE: types.SET_LINE_ACCOUNT,
+    WHATSAPP: types.SET_WHATSAPP_ACCOUNT,
+  };
+  if (channelTypeMapping[channel]) {
+    return {
+      type: channelTypeMapping[channel],
+      account,
+    };
   }
+  return {};
 }
 
 export function setViberAccount(viberAccount) {

package/v2Containers/Templates/index.js

@@ -22,7 +22,31 @@ import find from 'lodash/find';
 import map from 'lodash/map';
 import { bindActionCreators } from 'redux';
 import { Modal, Form} from 'antd';
-import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapRadioCard, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading, CapNotification, CapIllustration, CapHeader, CapLabel, CapRadio, CapSelectFilter, CapTag, CapTooltip, CapAlert, CapModal } from '@capillarytech/cap-ui-library';
+import {
+  CapMenu,
+  CapDropdown,
+  CapButton,
+  CapInput,
+  CapIcon,
+  CapRadioCard,
+  CapPopover,
+  CapSpin,
+  CapCustomCard,
+  CapRow,
+  CapSlideBox,
+  CapLink,
+  CapHeading,
+  CapNotification,
+  CapIllustration,
+  CapHeader,
+  CapLabel,
+  CapRadio,
+  CapSelectFilter,
+  CapTag,
+  CapTooltip,
+  CapAlert,
+  CapModal,
+} from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -53,6 +77,7 @@ import * as commonUtil from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
+import WhatsappStatusContainer from '../../v2Components/WhatsappStatusContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import {
   CHANNEL_CREATE_TRACK_MAPPING,
@@ -68,7 +93,7 @@ import {
   STATUS as WHATSAPP_STATUS,
   WHATSAPP_STATUSES,
 } from '../Whatsapp/constants';
-import { getWhatsappContent, getWhatsappStatusContainer, getWhatsappStatus, getWhatsappCategory } from '../Whatsapp/utils';
+import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory } from '../Whatsapp/utils';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP } from '../CreativesContainer/constants';
 
 import {CREATIVE} from '../Facebook/constants';
@@ -933,10 +958,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
         case WHATSAPP:
           templateData.title = (
-            <div className="whatsapp-card-title">
-              <span title={template.name} >{template.name}</span>
-              {getWhatsappStatusContainer(template)}
-            </div>
+            <CapRow className="whatsapp-card-title">
+              <CapLabel>{template.name}</CapLabel>
+              <WhatsappStatusContainer template={template} />
+            </CapRow>
           );
 
           templateData.content = getWhatsappContent(template);
@@ -2146,16 +2171,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         formatMessage,
       },
     } = this.props;
-    switch (channel?.toUpperCase()) {
-      case MOBILE_PUSH:
-        return formatMessage(messages.mobilepushAccount);
-      case WECHAT:
-        return formatMessage(messages.wechatAccount);
-      case WHATSAPP:
-        return formatMessage(messages.whatsappAccount);
-      default:
-        return '';
+
+    const channelObj = {
+      [MOBILE_PUSH]: 'mobilepushAccount',
+      [WECHAT]: 'wechatAccount',
+      [WHATSAPP]: 'whatsappAccount',
     }
+    return formatMessage(messages[channelObj[channel?.toUpperCase()]]);
   }
 
   showAccountName = () => {