@capillarytech/creatives-library 7.10.40 → 7.10.41

package/package.json

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

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -371,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}
@@ -690,14 +691,20 @@ function SlideBoxContent(props) {
       {isCreateWhatsapp && (<Whatsapp
         isFullMode={isFullMode}
         onCreateComplete={onCreateComplete}
-        handleClose={handleClose}
+        handleClose={handleClose}/>
+      )}
+
+      {isEditWhatsapp && (<Whatsapp
+        isFullMode={isFullMode}
         templateData={templateData}
+        params={{
+          id: templateData._id,
+        }}
         location={{
-          pathname: `/whatsapp`,
+          pathname: `/whatsapp/edit`,
           query,
           search: '',
-        }}
-        selectedWeChatAccount={selectedWeChatAccount} />
+        }}/>
       )}
 
     </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,18 +28,23 @@ function getChannelLabel(channel = '') {
     wechat: 'Wechat',
     no_communication: 'NO_COMMUNICATION',
     ftp: 'FTP',
-    whatsapp: 'WhatsApp Template',
+    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">
@@ -58,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/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/Templates/index.js

@@ -43,7 +43,7 @@ import * as emailActions from '../Email/actions';
 import * as lineActions from '../Line/Container/actions';
 import * as viberActions from '../Viber/actions';
 import * as facebookActions from '../Facebook/actions';
-
+import * as whatsappActions from '../Whatsapp/actions';
 import CardGrid from '../../v2Components/CardGrid';
 import config from '../../config/app';
 import './_templates.scss';
@@ -439,6 +439,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           this.props.viberActions.clearCreateResponse();
         } else if (this.state.channel.toLowerCase() === FACEBOOK_CHANNEL) {
           this.props.facebookActions.clearCreateResponse();
+        }else if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
+          this.props.whatsappActions.clearCreateResponse();
         }
       }
     }
@@ -489,7 +491,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         paramsDefault.wecrmId = nextProps.Templates.weCrmAccounts[0].configs.wecrm_app_id;
         paramsDefault.wecrmToken = nextProps.Templates.weCrmAccounts[0].configs.wecrm_token;
         paramsDefault.originalId = nextProps.Templates.weCrmAccounts[0].sourceAccountIdentifier;
-        nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
+        if (WHATSAPP_LOWERCASE === this.state.channel.toLowerCase()) {
+          nextProps.actions.setChannelAccount(
+            WHATSAPP,
+            nextProps.Templates.weCrmAccounts[0],
+          );
+        } else {
+          nextProps.actions.setWeChatAccount(
+            nextProps.Templates.weCrmAccounts[0],
+          );
+        }
       }
       this.setState({defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: nextProps.Templates.weCrmAccounts[0].name });
       this.getAllTemplates({params: paramsDefault}, true);
@@ -577,6 +588,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           creativesParams._id = pathname.split('/')[3];
           creativesParams.modeType = pathname.split('/')[4];
           creativesParams.account = pathname.split('/')[5];
+          if(this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE){
+            const whatsappSelectedTemplateData = this.selectTemplate(creativesParams._id) || {};
+            creativesParams.whatsappTemplateName = get(whatsappSelectedTemplateData, `name`, '');
+            creativesParams.whatsappTemplateCategory = get(whatsappSelectedTemplateData, `versions.base.content.whatsapp.category`, '');
+          }
         }
         creativesParams.type = this.state.channel.toUpperCase();
       }
@@ -944,7 +960,24 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </div>
           }
 
-          { !isEmpty(this.props.Templates.selectedWeChatAccount) && ["mobilepush", WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) && this.state.selectedAccountError ?
+          { !isEmpty(this.props.Templates.selectedWeChatAccount) && ["mobilepush"].includes(this.state.channel.toLowerCase()) && this.state.selectedAccountError ?
+            <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+              <CapHeading type="h6" >
+                {this.props.intl.formatMessage(messages.accountConfigError)}
+                <InlineDiv>
+                  <CapLink title="here" style={{display: 'inline'}} onClick={() => { window.open(config.production.accountConfig`${accountId}`); }}/>
+                </InlineDiv>
+              </CapHeading>
+            </div> : (
+              ["mobilepush"].includes(this.state.channel.toLowerCase()) &&
+              isEmpty(filteredTemplates) &&
+              isEmpty(this.state.searchText) &&
+              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+              </div>
+            )
+          }
+          { !isEmpty(this.props.Templates.selectedWhatsappAccount) && [WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) && this.state.selectedAccountError ?
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
               <CapHeading type="h6" >
                 {this.props.intl.formatMessage(messages.accountConfigError)}
@@ -953,9 +986,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 </InlineDiv>
               </CapHeading>
             </div> : (
-              ["mobilepush", WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) &&
+              [WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) &&
               isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
+              !isLoading &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
                 <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
               </div>
@@ -2493,6 +2527,7 @@ Templates.propTypes = {
   router: PropTypes.object,
   viberActions: PropTypes.object,
   facebookActions: PropTypes.object,
+  whatsappActions: PropTypes.object,
   smsRegister: PropTypes.any,
 };
 
@@ -2521,6 +2556,7 @@ function mapDispatchToProps(dispatch) {
     lineActions: bindActionCreators(lineActions, dispatch),
     viberActions: bindActionCreators(viberActions, dispatch),
     facebookActions: bindActionCreators(facebookActions, dispatch),
+    whatsappActions: bindActionCreators(whatsappActions, dispatch),
   };
 }
 

package/v2Containers/Templates/reducer.js

@@ -82,11 +82,11 @@ function templatesReducer(state = initialState, action) {
       return state
         .set('selectedWeChatAccount', fromJS(action.weChatAccount));
     case types.SET_LINE_ACCOUNT:
-      return state.set('selectedLineAccount', fromJS(action.lineAccount));
+      return state.set('selectedLineAccount', fromJS(action.account));
     case types.SET_VIBER_ACCOUNT:
       return state.set('selectedViberAccount', fromJS(action.viberAccount));
     case types.SET_WHATSAPP_ACCOUNT:
-      return state.set('selectedWhatsappAccount', fromJS(action.whatsappAccount));
+      return state.set('selectedWhatsappAccount', fromJS(action.account));
     case types.SET_FACEBOOK_ACCOUNT:
       return state.set('selectedFacebookAccount', fromJS(action.faceBookAccount));
     case types.RESET_ACCOUNT:

package/v2Containers/Whatsapp/actions.js

@@ -1,17 +1,34 @@
 import {
-  WHATSAPP_TEMPLATE_CREATE_REQUEST,
-  CLEAR_WHATSAPP_TEMPLATE_REQUEST,
+  TEMPLATE_CREATE_REQUEST,
+  CLEAR_CREATE_RESPONSE_REQUEST,
+  GET_TEMPLATE_DETAILS_REQUEST,
+  RESET_EDIT_TEMPLATE,
+  WHATSAPP,
 } from './constants';
 
 export function createWhatsappTemplate(payload, callback) {
   return {
-    type: WHATSAPP_TEMPLATE_CREATE_REQUEST,
+    type: TEMPLATE_CREATE_REQUEST,
     payload,
     callback,
   };
 }
 export function clearCreateResponse() {
   return {
-    type: CLEAR_WHATSAPP_TEMPLATE_REQUEST,
+    type: CLEAR_CREATE_RESPONSE_REQUEST,
+  };
+}
+// FOR EDIT
+export function getTemplateDetails(id, callback) {
+  return {
+    type: GET_TEMPLATE_DETAILS_REQUEST,
+    id,
+    channel: WHATSAPP,
+    callback,
+  };
+}
+export function resetEditTemplate() {
+  return {
+    type: RESET_EDIT_TEMPLATE,
   };
 }

package/v2Containers/Whatsapp/constants.js

@@ -1,20 +1,36 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
-import { CAP_ORANGE, CAP_PURPLE02, CAP_PURPLE03, CAP_ORANGE01, CAP_GREEN01, CAP_GREEN02 } from '@capillarytech/cap-ui-library/styled/variables';
+import {
+  CAP_ORANGE,
+  CAP_PURPLE02,
+  CAP_PURPLE03,
+  CAP_ORANGE01,
+  CAP_GREEN01,
+  CAP_GREEN02,
+} from '@capillarytech/cap-ui-library/styled/variables';
 
 export const UNSUBSCRIBE_TEXT_LENGTH = 36;
 export const TEMPLATE_MESSAGE_MAX_LENGTH = 1024;
 export const WHATSAPP = 'WHATSAPP';
 
-export const WHATSAPP_TEMPLATE_CREATE_REQUEST =
-  'app/v2Containers/Whatsapp/WHATSAPP_TEMPLATE_CREATE_REQUEST';
-export const WHATSAPP_TEMPLATE_CREATE_SUCCESS =
-  'app/v2Containers/Whatsapp/WHATSAPP_TEMPLATE_CREATE_SUCCESS';
-export const WHATSAPP_TEMPLATE_CREATE_FAILURE =
-  'app/v2Containers/Whatsapp/WHATSAPP_TEMPLATE_CREATE_FAILURE';
-export const CLEAR_WHATSAPP_TEMPLATE_REQUEST =
-  'app/v2Containers/Whatsapp/CLEAR_WHATSAPP_TEMPLATE_REQUEST';
+export const TEMPLATE_CREATE_REQUEST =
+  'app/v2Containers/Whatsapp/TEMPLATE_CREATE_REQUEST';
+export const TEMPLATE_CREATE_SUCCESS =
+  'app/v2Containers/Whatsapp/TEMPLATE_CREATE_SUCCESS';
+export const TEMPLATE_CREATE_FAILURE =
+  'app/v2Containers/Whatsapp/TEMPLATE_CREATE_FAILURE';
+export const CLEAR_CREATE_RESPONSE_REQUEST =
+  'app/v2Containers/Whatsapp/CLEAR_CREATE_RESPONSE_REQUEST';
+// FOR EDIT
+export const GET_TEMPLATE_DETAILS_REQUEST =
+  'app/v2Containers/Whatsapp/Edit/GET_TEMPLATE_DETAILS_REQUEST';
+export const GET_TEMPLATE_DETAILS_SUCCESS =
+  'app/v2Containers/Whatsapp/Edit/GET_TEMPLATE_DETAILS_SUCCESS';
+export const GET_TEMPLATE_DETAILS_FAILURE =
+  'app/v2Containers/Whatsapp/Edit/GET_TEMPLATE_DETAILS_FAILURE';
+export const RESET_EDIT_TEMPLATE =
+  'app/v2Containers/Whatsapp/Edit//RESET_EDIT_TEMPLATE';
 
 export const STATUS = 'status';
 export const CATEGORY = 'category';
@@ -41,7 +57,7 @@ export const CATEGORY_OPTIONS = [
     key: 'accountUpdate',
     label: <FormattedMessage {...messages.accountUpdate} />,
     tooltipLabel: <FormattedMessage {...messages[`accountUpdate${tooltip}`]} />,
-    value: WHATSAPP_CATEGORIES.alertUpdate,
+    value: WHATSAPP_CATEGORIES.accountUpdate,
     tagColor: CAP_ORANGE01,
     tagTextColor: CAP_ORANGE,
   },
@@ -49,7 +65,9 @@ export const CATEGORY_OPTIONS = [
     key: 'appointmentUpdate',
     value: WHATSAPP_CATEGORIES.appointmentUpdate,
     label: <FormattedMessage {...messages.appointmentUpdate} />,
-    tooltipLabel: <FormattedMessage {...messages[`appointmentUpdate${tooltip}`]} />,
+    tooltipLabel: (
+      <FormattedMessage {...messages[`appointmentUpdate${tooltip}`]} />
+    ),
     tagColor: CAP_GREEN02,
     tagTextColor: CAP_GREEN01,
   },
@@ -65,7 +83,9 @@ export const CATEGORY_OPTIONS = [
     key: 'reservationUpdate',
     value: WHATSAPP_CATEGORIES.reservationUpdate,
     label: <FormattedMessage {...messages.reservationUpdate} />,
-    tooltipLabel: <FormattedMessage {...messages[`reservationUpdate${tooltip}`]} />,
+    tooltipLabel: (
+      <FormattedMessage {...messages[`reservationUpdate${tooltip}`]} />
+    ),
     tagColor: CAP_ORANGE01,
     tagTextColor: CAP_ORANGE,
   },
@@ -96,3 +116,10 @@ export const STATUS_OPTIONS = [
     label: <FormattedMessage {...messages.rejected} />,
   },
 ];
+
+export const TAG = 'TAG';
+export const EMBEDDED = 'embedded';
+export const DEFAULT = 'default';
+export const FULL = 'full';
+export const ALL = 'all';
+export const LIBRARY = 'library';