@capillarytech/creatives-library 7.10.59 → 7.10.61

package/config/app.js

@@ -17,6 +17,7 @@ const config = {
   },
   development: {
     api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    //api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

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/index.js

@@ -87,6 +87,10 @@ import SmsTraiCreate from './v2Containers/SmsTrai/Create';
 import SmsTraiCreateReducer from './v2Containers/SmsTrai/Create/reducer';
 import SmsTraiCreateSaga from './v2Containers/SmsTrai/Create/sagas';
 
+import Whatsapp from './v2Containers/Whatsapp';
+import whatsappReducer from './v2Containers/Whatsapp/reducer';
+import whatsappSaga from './v2Containers/Whatsapp/sagas';
+
 export {default as Ebill} from './v2Containers/Ebill';
 export {default as EbillReducer} from './v2Containers/Ebill/reducer';
 export {default as EbillSaga} from './v2Containers/Ebill/sagas';
@@ -111,6 +115,7 @@ const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
 const ViberContainer = {Viber, viberReducer, viberSaga};
 const FacebookPreviewContainer = { FacebookPreview, facebookPreviewReducer, facebookPreviewSaga };
 const SmsTraiContainer = {SmsTraiCreate, SmsTraiCreateReducer, SmsTraiCreateSaga};
+const WhatsappContainer = { Whatsapp, whatsappReducer, whatsappSaga };
 
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 const FTPContainer = {FTP, FTPReducer, FTPSagas};
@@ -157,4 +162,5 @@ export { CapContainer,
   ViberContainer,
   FacebookPreviewContainer,
   SmsTraiContainer,
+  WhatsappContainer,
 };

package/package.json

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

package/routes.js

@@ -660,6 +660,8 @@ export default function createRoutes(store) {
           import('v2Containers/CapFacebookPreview/reducer'),
           import('v2Containers/SmsTrai/Create/sagas'),
           import('v2Containers/SmsTrai/Create/reducer'),
+          import('v2Containers/Whatsapp/sagas'),
+          import('v2Containers/Whatsapp/reducer'),
         ]);
 
         const renderRoute = loadModule(cb);
@@ -683,6 +685,7 @@ export default function createRoutes(store) {
           viberSagas, viberReducer,
           capFacebookPreviewSagas, capFacebookPreviewReducer,
           smsTraiSagas, smsTraiReducer,
+          whatsappSagas, whatsappReducer,
         ]) => {
           injectReducer('templates', reducer.default);
           injectReducer('cap', capReducer.default);
@@ -702,6 +705,7 @@ export default function createRoutes(store) {
           injectReducer('viber', viberReducer.default);
           injectReducer('facebookPreview', capFacebookPreviewReducer.default);
           injectReducer('smsTrai', smsTraiReducer.default);
+          injectReducer('whatsapp', whatsappReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
           injectSagas(capSagas.default);
@@ -720,6 +724,7 @@ export default function createRoutes(store) {
           injectSagas(viberSagas.default);
           injectSagas(capFacebookPreviewSagas.default);
           injectSagas(smsTraiSagas.default);
+          injectSagas(whatsappSagas.default);
           renderRoute(component);
         });
         importModules.catch(errorLoading);

package/services/api.js

@@ -460,4 +460,9 @@ export const createBulkSMSTemplate = ({templates}) => {
 export const checkBulkDuplicates = (data) => {
   const url = `${API_ENDPOINT}/templates/bulk/sms/checkDuplicates`;
   return request(url, getAPICallObject('POST', data));
-};
+};
+
+export const createWhatsappTemplate = ({ payload }) => {
+  const url = `${API_ENDPOINT}/templates/WHATSAPP`;
+  return request(url, getAPICallObject('POST', payload));
+};

package/utils/v2common.js

@@ -0,0 +1,13 @@
+export const getObjFromQueryParams = (searchString) => {
+    const params = new URLSearchParams(searchString);
+    const obj = {};
+    // iterate over all keys
+    for (const key of params.keys()) {
+        if (params.getAll(key).length > 1) {
+            obj[key] = params.getAll(key);
+        } else {
+            obj[key] = params.get(key);
+        }
+    }
+    return obj;
+}

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,4 +414,11 @@
   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,13 +10,17 @@ 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';
-import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
+import {
+  WECHAT,
+  WHATSAPP,
+} 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');
@@ -28,9 +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 } 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 WhatsappStatusContainer from '../WhatsappStatusContainer';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -132,7 +147,18 @@ 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 } = this.props;
+    const { 
+      channel,
+      showTestAndPreviewIcon,
+      module,
+      viberBrandName,
+      viberAccountName,
+      whatsappAccountName,
+      whatsappContentLen,
+      intl,
+      templateData,
+    } = this.props;
+    const { formatMessage } = intl;
     const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
     let smsDetails = {};
     // let smsText = '';
@@ -187,6 +213,13 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       'background-color': CAP_G15,
       'width': '81%',
     };
+    const whatsappSectionStyle = {
+      'padding': `4px 0 ${CAP_SPACE_08}`,
+      'border-radius': '6px',
+      'background-color': CAP_G15,
+      'width': '88%',
+      'left': '10%',
+    };
     const getVideoContent = ({
       video,
       actionUrl,
@@ -259,6 +292,9 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       </div>
     );
 
+    const whatsappUpdatedAccountName = whatsappAccountName || _.get(templateData, 'versions.base.content.whatsapp.accountName', '');
+    const whatsappUpdatedLen = whatsappContentLen !== undefined ? 36 + whatsappContentLen : content?.templateMsg?.length;
+
     return (
       <CapRow>
         {this.props.showCount && (channel && channel.toLowerCase() !== FACEBOOK) && <CapColumn span={16}>
@@ -271,6 +307,17 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           {smsDetails.optoutUrlPresent && <CapHeading type="h6">
             <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
           </CapHeading>}
+          {channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
+            <>
+              <WhatsappStatusContainer template={templateData} />
+              <CapHeading type="h3" className='margin-t-12'>
+                <FormattedMessage {...messages.whatsappCharactersTotal} values={{charCount: content?.templateMsg?.length}} />
+              </CapHeading>
+              <CapHeading type="h6">
+                <FormattedMessage {...messages.whatsappUnsubscribeLength} />
+              </CapHeading>
+            </>
+          ) : null}
         </CapColumn>}
         <CapColumn span={this.props.showCount ? 8 : 24}>
           {showTestAndPreview && (
@@ -308,7 +355,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'}}>
@@ -336,7 +383,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>
@@ -396,7 +443,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',
@@ -564,7 +611,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,
@@ -638,6 +685,41 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             </div>
           ) : ''
         }
+            {
+              channel?.toUpperCase() === WHATSAPP ? (
+                <>
+                  <div className='shell-v2 align-center'>
+                    <CapImage
+                      className='preview-image'
+                      src={whatsappMobileAndroid}
+                      alt={formatMessage(messages.previewGenerated)}
+                    />
+                    <CapLabel className='whatsapp-brand-name'>
+                      {whatsappUpdatedAccountName || ''}
+                    </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>
+                  <CapHeading
+                    type='h3'
+                    style={{ textAlign: 'center' }}
+                    className='margin-t-16'
+                  >
+                    <FormattedMessage
+                      {...messages.whatsappMessageLength}
+                      values={{ length: whatsappUpdatedLen }}
+                    />
+                  </CapHeading>
+                </>
+              ) : (
+                ''
+              )
+            }
             {channel && channel.toLowerCase() === FACEBOOK && (
               <div style={{position: 'absolute', left: '80%'}} id="facebook-preview">
                 <CapFacebookPreview

package/v2Components/TemplatePreview/messages.js

@@ -22,10 +22,22 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.charactersTotal',
     defaultMessage: "{smsCount} SMS ({charCount} characters)",
   },
+  whatsappCharactersTotal: {
+    id: 'creatives.componentsV2.TemplatePreview.whatsappCharactersTotal',
+    defaultMessage: "{charCount} characters",
+  },
   optoutCharactersTotal: {
     id: 'app.components.TemplatePreview.optoutCharactersTotal',
     defaultMessage: "Includes optout tag ({optoutUrlLength} characters)",
   },
+  whatsappUnsubscribeLength: {
+    id: 'app.components.TemplatePreview.whatsappUnsubscribeLength',
+    defaultMessage: "Includes 36 characters of (Click {{unsubscribe}} to unsubscribe)",
+  },
+  whatsappMessageLength: {
+    id: 'app.components.TemplatePreview.whatsappMessageLength',
+    defaultMessage: "1 Message ({length} characters)",
+  },
   smsFormatType: {
     id: 'creatives.componentsV2.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',

package/v2Containers/App/constants.js

@@ -47,6 +47,7 @@ export const PREVIEW = 'preview';
 
 export const VIBER = 'viber';
 export const FACEBOOK = 'facebook';
+export const WHATSAPP = 'whatsapp';
 
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';
@@ -107,4 +108,6 @@ export const FB_AD_CALL_TO_ACTION = {
 export const CREATIVES = 'creatives';
 export const LOYALTY = 'loyalty';
 
-export const FAILURE = 'FAILURE';
+export const FAILURE = 'FAILURE';
+export const DATE_DISPLAY_FORMAT = 'D MMM YYYY';
+export const TIME_DISPLAY_FORMAT = 'hh:mm A';

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
 
@@ -149,6 +157,9 @@ export default defineMessages({
     id: `creatives.containersV2.watchMore`,
     defaultMessage: 'Watch More',
   },
-
+  "done": {
+    id: `creatives.containersV2.done`,
+    defaultMessage: 'Done',
+  },
 });
 

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -21,6 +21,8 @@ import * as constants from './constants';
 import LineContainer from '../Line/Container';
 import FTP from '../FTP';
 import Viber from '../Viber';
+import Whatsapp from '../Whatsapp';
+import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 const CreativesWrapper = styled.div`
   .ant-popover,
@@ -143,6 +145,7 @@ function SlideBoxContent(props) {
       showDisabledFBInfo,
       orgUnitId,
       smsRegister,
+      enableNewChannels,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -170,11 +173,12 @@ function SlideBoxContent(props) {
     });
 
 
-  const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
-  const isCreateFacebook = slidBoxContent === 'createTemplate' && channel === constants.FACEBOOK;
-
-  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;
@@ -185,7 +189,8 @@ function SlideBoxContent(props) {
   let isEditMPush = false;
   let isEditFacebook = false;
   let isEditFTP = false;
-  const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
+  let isEditWhatsapp = false;
+  const isEmailCreate = isCreate && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
     isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
@@ -194,7 +199,8 @@ function SlideBoxContent(props) {
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
     isEditFacebook = slidBoxContent === 'editTemplate' && channel === constants.FACEBOOK;
-    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER || channel === constants.FACEBOOK);
+    isEditWhatsapp = slidBoxContent === 'editTemplate' && channel === constants.WHATSAPP;
+    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER || channel === constants.FACEBOOK || channel === constants.WHATSAPP);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
     isEditFTP = slidBoxContent === 'editTemplate' && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
@@ -321,6 +327,11 @@ function SlideBoxContent(props) {
         };
         return fbContent;
       }
+      case constants.WHATSAPP: {
+        return {
+          templateMsg: getWhatsappContent(templateDataObject),
+        };
+      }
       default:
         return get(templateDataObject, `versions.base.content`);
     }
@@ -355,6 +366,7 @@ function SlideBoxContent(props) {
         showDisabledFBInfo={showDisabledFBInfo}
         orgUnitId={orgUnitId}
         smsRegister={smsRegister}
+        enableNewChannels={enableNewChannels}
         />
       )}
       {isPreview && (
@@ -362,6 +374,7 @@ function SlideBoxContent(props) {
         content={getChannelPreviewContent(templateData)}
         viberBrandName={selectedAccount || ""}
         viberAccountName={(selectedAccount || "")[0]}
+        whatsappAccountName={selectedAccount}
         unicodeEnabled={get(templateData, `versions.base['unicode-validity']`)}
         channel={(templateData.type || '').toLowerCase()}
         charCounterEnabled={channel === constants.SMS}
@@ -678,6 +691,28 @@ function SlideBoxContent(props) {
         templateData={templateData}
         createNew/> }
 
+      {isCreateWhatsapp && (<Whatsapp
+        isFullMode={isFullMode}
+        onCreateComplete={onCreateComplete}
+        handleClose={handleClose}/>
+      )}
+
+      {isEditWhatsapp && (<Whatsapp
+        isFullMode={isFullMode}
+        templateData={templateData}
+        getFormData={getFormData}
+        getDefaultTags={type}
+        forwardedTags={forwardedTags}
+        params={{
+          id: templateData._id,
+        }}
+        location={{
+          pathname: `/whatsapp/edit`,
+          query,
+          search: '',
+        }}/>
+      )}
+
     </CreativesWrapper>
   );
 }

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -1,35 +1,63 @@
 import React from 'react';
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
+import get from 'lodash/get';
 import { CapHeader, CapIcons, CapLabel, CapSteps } from '@capillarytech/cap-ui-library';
 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 } from '../App/constants';
+import { NO_COMMUNICATION, FTP, WHATSAPP } from '../App/constants';
 import { isTraiDLTEnable } from '../../utils/common';
+import { formatString } from '../../utils/Formatter';
+import {
+  CAP_SPACE_12,
+} from '@capillarytech/cap-ui-library/styled/variables';
+const { CapLabelInline } = CapLabel;
+const StyledLabel = styled(CapLabelInline)`
+  margin-right: ${CAP_SPACE_12};
+`;
 const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
-function getChannelLabel(channel = '') {
-  const labels = {
-    sms: 'SMS',
-    email: 'Email',
-    mobilepush: 'Push notification',
-    wechat: 'Wechat',
-    no_communication: 'NO_COMMUNICATION',
-    ftp: 'FTP',
-  };
-  return labels[channel.toLowerCase()];
-}
+const renderWhatsappData = (type, value) => (
+  <StyledLabel type={type}>
+    {value}
+  </StyledLabel>
+)
+function SlideBoxHeader(props) {
 
 
-function SlideBoxHeader(props) {
   const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp, weChatTemplateType, onWeChatMaptemplateStepChange, weChatMaptemplateStep, templateStep, smsRegister } = props;
   const showTemplateNameHeader = isFullMode && shouldShowTemplateName;
   const mapTemplateCreate = !showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   const showCreateTraiSMSHeader = isTraiDlt && channel.toLowerCase() === "sms";
+  const isWhatsappEdit = channel.toLowerCase() === WHATSAPP && slidBoxContent === 'editTemplate';
+  const whatsappOverview = isWhatsappEdit && isFullMode;
+  const headerMessage = whatsappOverview ? messages.whatsappOverview : messages.editMessageContent;
+  const {
+    whatsappTemplateName,
+    whatsappTemplateCategory,
+  } = templateData || {};
+  const whatsappName = whatsappTemplateName || templateData?.name;
+  const whatsappCategory = whatsappTemplateCategory || get(templateData, `versions.base.content.whatsapp.category`, '');
+
+
+  const getChannelLabel = (currentChannel = '') => {
+    const labels = {
+      sms: 'SMS',
+      email: 'Email',
+      mobilepush: 'Push notification',
+      wechat: 'Wechat',
+      no_communication: 'NO_COMMUNICATION',
+      ftp: 'FTP',
+      whatsapp: <FormattedMessage {...messages.whatsappTemplate} />,
+    };
+    return labels[currentChannel.toLowerCase()];
+  };
 
   return (
     <div key="creatives-container-slidebox-header-content">
@@ -57,7 +85,20 @@ function SlideBoxHeader(props) {
         )}
       {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
       <CapHeader
-        title={<FormattedMessage {...messages.editMessageContent} values={{channel: getChannelLabel(channel)}}/>}
+        title={<FormattedMessage {...headerMessage} values={{channel: getChannelLabel(channel)}}/>}
+          description={
+            isWhatsappEdit && (
+              <>
+                {renderWhatsappData("label1", <FormattedMessage {...globalMessages.templateNameLabel} />)}
+                {renderWhatsappData("label2", whatsappName)}
+                {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
+                {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.templateCategoryLabel} />)}
+                {renderWhatsappData("label2", formatString(whatsappCategory))}
+                {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
+                {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.languageLabel} />)}
+                {renderWhatsappData("label2", <FormattedMessage {...whatsppMsg.templateLanguageEnglish} />)}
+              </>)
+          }
         prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
           <PrefixWrapper>
             <CapIcons.backIcon onClick={onShowTemplates} />

package/v2Containers/CreativesContainer/constants.js

@@ -16,6 +16,7 @@ export const FACEBOOK = "FACEBOOK";
 export const FTP = "FTP";
 export const NO_COMMUNICATION = "NO_COMMUNICATION";
 export const VIBER = "VIBER";
+export const WHATSAPP = "WHATSAPP";
 
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";