@capillarytech/creatives-library 7.10.51 → 7.10.53

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.53",
   "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?.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,15 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.whatsapp-status-container {
+  margin-top: $CAP_SPACE_12;
+  width: 150%;
+  height: 20px;
+  
+  .cap-colored-tag-v2 {
+    font-weight: normal;
+  }
+
+  .whatsapp-category-tag {
+    margin-left: $CAP_SPACE_08;
+  }
+}

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';
@@ -21,24 +22,15 @@ const StyledLabel = styled(CapLabelInline)`
 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',
-    whatsapp: 'WhatsApp template',
-  };
-  return labels[channel.toLowerCase()];
-}
+
 const renderWhatsappData = (type, value) => (
   <StyledLabel type={type}>
     {value}
   </StyledLabel>
 )
 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';
@@ -54,6 +46,20 @@ function SlideBoxHeader(props) {
   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">
       {slidBoxContent === 'templates' && !showTemplateNameHeader && (
@@ -84,7 +90,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/CreativesContainer/messages.js

@@ -310,4 +310,8 @@ export default defineMessages({
     id: `${scope}.whatsappOverview`,
     defaultMessage: `WhatsApp template overview`,
   },
+  "whatsappTemplate": {
+    id: `${scope}.whatsappTemplate`,
+    defaultMessage: `WhatsApp template`,
+  },
 });

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/SmsTrai/Create/constants.js

@@ -1,8 +1,4 @@
-export const DEFAULT_ACTION = 'app/SmsTrai/DEFAULT_ACTION';
-export const STATUS = 'status';
 export const TEMPLATE_NAME = 'template name';
-export const HEADER = 'header';
-export const TEMPLATE_ID = 'template id';
 export const SMS = 'SMS';
 export const MAPPED_SAVED_COLUMN = {
   'TEMPLATE ID': 'template_id',
@@ -22,12 +18,12 @@ export const MAPPED_SAVED_COLUMN = {
   'CONSENT TYPE': 'consent-type',
 };
 export const HEADER_ALIASES = [
-  HEADER,
+  'header',
   'sender id',
   'senders',
   'header id',
   'headers',
-  'linked headers'
+  'linked headers',
 ];
 export const TEMPLATE_ID_ALIASES = [
   'template id',
@@ -76,4 +72,4 @@ export const CHECK_TRAI_SMS_DUPLICATE_TEMPLATE_NAME_FAILURE =
 export const REQUEST = 'REQUEST';
 export const SUCCESS = 'SUCCESS';
 export const FAILURE = 'FAILURE';
-export const DUPLICATE = 'Duplicate';
+export const DUPLICATE = 'Duplicate';