@capillarytech/creatives-library 7.10.39 → 7.10.41

package/v2Components/TemplatePreview/index.js

@@ -14,13 +14,17 @@ import {CapColumn, CapRow, CapHeading, CapIcon, CapButton, CapImage} from '@capi
 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';
 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');
@@ -28,9 +32,10 @@ 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_G08, CAP_G06, CAP_G15, CAP_PURPLE01, CAP_G16, CAP_SPACE_08 } 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';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -132,7 +137,8 @@ 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, intl, templateData } = this.props;
+    const { formatMessage } = intl;
     const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
     let smsDetails = {};
     // let smsText = '';
@@ -187,6 +193,13 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       'background-color': CAP_G15,
       'width': '81%',
     };
+    const whatsappSectionStyle = {
+      "padding": '3.5px 0 0',
+      'border-radius': '6px',
+      'background-color': CAP_G15,
+      'width': '88%',
+      'left': '10%',
+    };
     const getVideoContent = ({
       video,
       actionUrl,
@@ -271,6 +284,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 && channel.toLowerCase() === WHATSAPP.toLowerCase() ? (
+            <>
+              {getWhatsappStatusContainer(templateData)}
+              <CapHeading type="h3" style={{ marginTop: '12px' }}>
+                <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 && (
@@ -638,6 +662,36 @@ 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>
+                  </div>
+                </div>
+              </div>
+            ) : ('')
+            }
             {channel && channel.toLowerCase() === FACEBOOK && (
               <div style={{position: 'absolute', left: '80%'}} id="facebook-preview">
                 <CapFacebookPreview

package/v2Components/TemplatePreview/messages.js

@@ -22,10 +22,18 @@ 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)",
+  },
   smsFormatType: {
     id: 'creatives.componentsV2.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',

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

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

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,
@@ -172,7 +174,7 @@ 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;
   let isEditSms = false;
@@ -185,6 +187,7 @@ function SlideBoxContent(props) {
   let isEditMPush = false;
   let isEditFacebook = false;
   let isEditFTP = false;
+  let isEditWhatsapp = false;
   const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
@@ -194,7 +197,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 +325,11 @@ function SlideBoxContent(props) {
         };
         return fbContent;
       }
+      case constants.WHATSAPP: {
+        return {
+          templateMsg: getWhatsappContent(templateDataObject),
+        };
+      }
       default:
         return get(templateDataObject, `versions.base.content`);
     }
@@ -362,6 +371,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 +688,25 @@ function SlideBoxContent(props) {
         templateData={templateData}
         createNew/> }
 
+      {isCreateWhatsapp && (<Whatsapp
+        isFullMode={isFullMode}
+        onCreateComplete={onCreateComplete}
+        handleClose={handleClose}/>
+      )}
+
+      {isEditWhatsapp && (<Whatsapp
+        isFullMode={isFullMode}
+        templateData={templateData}
+        params={{
+          id: templateData._id,
+        }}
+        location={{
+          pathname: `/whatsapp/edit`,
+          query,
+          search: '',
+        }}/>
+      )}
+
     </CreativesWrapper>
   );
 }

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -5,9 +5,18 @@ import { CapHeader, CapIcons, CapLabel, CapSteps } from '@capillarytech/cap-ui-l
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import messages from './messages';
+import whatsppMsg from '../Whatsapp/messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { NO_COMMUNICATION, FTP } 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;
 `;
@@ -19,17 +28,23 @@ function getChannelLabel(channel = '') {
     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';
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   const showCreateTraiSMSHeader = isTraiDlt && channel.toLowerCase() === "sms";
+  const isWhatsappEdit = channel.toLowerCase() === 'whatsapp' && slidBoxContent === 'editTemplate';
+  const whatsappOverview = isWhatsappEdit && isFullMode;
 
   return (
     <div key="creatives-container-slidebox-header-content">
@@ -57,7 +72,20 @@ function SlideBoxHeader(props) {
         )}
       {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
       <CapHeader
-        title={<FormattedMessage {...messages.editMessageContent} values={{channel: getChannelLabel(channel)}}/>}
+        title={<FormattedMessage {...(whatsappOverview ? messages.whatsappOverview : messages.editMessageContent)} values={{channel: getChannelLabel(channel)}}/>}
+          description={
+            isWhatsappEdit && (
+              <>
+                {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.templateNameLabel} />)}
+                {renderWhatsappData("label2", templateData?.whatsappTemplateName)}
+                {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
+                {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.templateCategoryLabel} />)}
+                {renderWhatsappData("label2", formatString(templateData?.whatsappTemplateCategory))}
+                {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";

package/v2Containers/CreativesContainer/messages.js

@@ -306,4 +306,8 @@ export default defineMessages({
     id: `${scope}.UploadSMStemplates`,
     defaultMessage: `Upload SMS templates`,
   },
+  "whatsappOverview": {
+    id: `${scope}.whatsappOverview`,
+    defaultMessage: `WhatsApp template overview`,
+  },
 });

package/v2Containers/Email/index.js

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

package/v2Containers/Line/Container/index.js

@@ -83,7 +83,7 @@ export const LineContainer = ({
 
     const onAccountSelect = (account) => {
         const { value } = account.target;
-        templateActions.setLineAccount(Templates.weCrmAccounts.find((item) => item.name === value));
+        templateActions.setChannelAccount(LINE, Templates.weCrmAccounts.find((item) => item.name === value));
         updateSelectedAccount(value);
         updateAccountSelectFlow(false);
         createNew();

package/v2Containers/Templates/_templates.scss

@@ -499,3 +499,46 @@
     box-shadow: none;
   }
 }
+
+.whatsapp-filters {
+  display: flex;
+  width: 100%;
+  padding-left: 8px;
+  padding-bottom: 16px;
+  .cap-select-filter-v2 {
+    margin: 0 8px;
+  }
+}
+
+.selected-whatsapp-filters {
+  margin-top: -16px;
+
+  .cap-tag-v2{
+    font-size: 12px;
+    color: $CAP_G04;
+  }
+
+  .ant-anchor-link-title {
+    font-size: 12px;
+  }
+}
+
+.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;
+}

package/v2Containers/Templates/actions.js

@@ -5,9 +5,9 @@
  */
 
 import * as types from './constants';
+import { LINE, WHATSAPP } from '../CreativesContainer/constants';
 
 export function getAllTemplates(channel, queryParams) {
-  // 
   return {
     type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
   };
@@ -26,7 +26,6 @@ export function resetAccount() {
 }
 
 export function deleteTemplate(channel, id) {
-  
   return {
     type: types.DELETE_TEMPLATE_REQUEST, channel, id,
   };
@@ -51,18 +50,29 @@ export function getAccountsSettings() {
 }
 
 export function setWeChatAccount(weChatAccount) {
-  
   return {
     type: types.SET_WECHAT_ACCOUNT,
     weChatAccount,
   };
 }
 
-export function setLineAccount(lineAccount) {
-  return {
-    type: types.SET_LINE_ACCOUNT,
-    lineAccount,
-  };
+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 {};
+  }
 }
 
 export function setViberAccount(viberAccount) {
@@ -114,7 +124,6 @@ export function setBEETemplate(template) {
   };
 }
 export function getTemplateDetails(id, channel) {
-  
   return {
     type: types.GET_TEMPLATE_DETAILS_REQUEST,
     id,
@@ -129,7 +138,6 @@ export function resetTemplateData() {
 }
 
 export function resetUploadData() {
-  
   return {
     type: types.RESET_UPLOAD_DATA,
   };

package/v2Containers/Templates/constants.js

@@ -45,7 +45,7 @@ export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPL
 export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";
 export const SET_VIBER_ACCOUNT = "app/v2Containers/Templates/SET_VIBER_ACCOUNT";
 export const SET_FACEBOOK_ACCOUNT = "app/v2Containers/Templates/SET_FACEBOOK_ACCOUNT";
-
+export const SET_WHATSAPP_ACCOUNT = "app/v2Containers/Templates/SET_WHATSAPP_ACCOUNT";
 
 export const GET_DEAFULT_BEE_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_REQUEST';
 export const GET_DEAFULT_BEE_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_SUCCESS';
@@ -57,3 +57,5 @@ export const GET_ORG_LEVEL_CAMPAIGN_SETTINGS_SUCCESS =
   'app/v2Containers/Templates/GET_ORG_LEVEL_CAMPAIGN_SETTINGS_SUCCESS';
 export const GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE =
   'app/v2Containers/Templates/GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE';
+
+export const MAX_WHATSAPP_TEMPLATES = 250;