@capillarytech/creatives-library 7.10.59 → 7.10.61

package/v2Containers/Templates/messages.js

@@ -94,6 +94,10 @@ export default defineMessages({
     id: `${scope}.editButton`,
     defaultMessage: "Edit",
   },
+  "whatsappOverview": {
+    id: `${scope}.whatsappOverview`,
+    defaultMessage: "Overview",
+  },
   "duplicateButton": {
     id: `${scope}.duplicateButton`,
     defaultMessage: "Duplicate",
@@ -130,6 +134,10 @@ export default defineMessages({
     id: `${scope}.noAccountsPresentLine`,
     defaultMessage: "Line accounts are not setup for your brand",
   },
+  "noAccountsPresentWhatsapp": {
+    id: `${scope}.noAccountsPresentWhatsapp`,
+    defaultMessage: "Whatsapp accounts are not setup for your brand",
+  },
   "noTemplatesMessage": {
     id: `${scope}.noTemplatesMessage`,
     defaultMessage: "No templates available",
@@ -212,7 +220,11 @@ export default defineMessages({
   },
   "templateDeleteConfirm": {
     id: `${scope}.templateDeleteConfirm`,
-    defaultMessage: `Are you sure you want to delete this template?`,
+    defaultMessage: `Are you sure you wish to delete this template?`,
+  },
+  "areYouSureText": {
+    id: `${scope}.areYouSureText`,
+    defaultMessage: `Confirm delete template`,
   },
   "cancelText": {
     id: `${scope}.cancelText`,
@@ -220,7 +232,7 @@ export default defineMessages({
   },
   "yesText": {
     id: `${scope}.yesText`,
-    defaultMessage: `Yes`,
+    defaultMessage: `Yes, delete`,
   },
   "templateSelection": {
     id: `${scope}.templateSelection`,
@@ -262,6 +274,10 @@ export default defineMessages({
     id: `${scope}.createNewActionButton`,
     defaultMessage: `Create new`,
   },
+  "createNewTemplateLink": {
+    id: `${scope}.createNewTemplateLink`,
+    defaultMessage: `Create new template`,
+  },
   "creativeTemplates": {
     id: `${scope}.creativeTemplates`,
     defaultMessage: `Creative templates`,
@@ -306,6 +322,10 @@ export default defineMessages({
     id: `${scope}.newEmailTemplate`,
     defaultMessage: 'New email {template}',
   },
+  "newWhatsappTemplate": {
+    id: `${scope}.newWhatsappTemplate`,
+    defaultMessage: 'Add new Whatsapp {template}',
+  },
   "newNotificationTemplate": {
     id: `${scope}.newNotificationTemplate`,
     defaultMessage: 'New notification {template}',
@@ -318,6 +338,30 @@ export default defineMessages({
     id: `${scope}.emailTitleIllustartion`,
     defaultMessage: 'Create an email {template}',
   },
+  "whatsappTitleIllustration": {
+    id: `${scope}.whatsappTitleIllustration`,
+    defaultMessage: 'Add a new Whatsapp creative {template}',
+  },
+  "whatsappDescIllustration": {
+    id: `${scope}.whatsappDescIllustration`,
+    defaultMessage: 'These templates can be reused when creating a\nnew message content.',
+  },
+  "noFilteredWhatsappTemplatesTitle": {
+    id: `${scope}.noFilteredWhatsappTemplatesTitle`,
+    defaultMessage: 'Sorry, we couldn’t find any matches',
+  },
+  "noFilteredWhatsappTemplatesDesc": {
+    id: `${scope}.noFilteredWhatsappTemplatesDesc`,
+    defaultMessage: 'Please try searching with another term or apply different filter',
+  },
+  "noApprovedWhatsappTemplatesTitle": {
+    id: `${scope}.noFilteredWhatsappTemplatesDesc`,
+    defaultMessage: 'Sorry, we couldn’t find any approved templates',
+  },
+  "noApprovedWhatsappTemplatesDesc": {
+    id: `${scope}.noFilteredWhatsappTemplatesDesc`,
+    defaultMessage: 'Please try creating a new template, once it is approved by Whatsapp it will be available here',
+  },
   "smsTitleIllustartion": {
     id: `${scope}.smsTitleIllustartion`,
     defaultMessage: 'Create an SMS {template}',
@@ -346,6 +390,10 @@ export default defineMessages({
     id: `${scope}.lineAccount`,
     defaultMessage: 'Line account',
   },
+  "whatsappAccount": {
+    id: `${scope}.whatsappAccount`,
+    defaultMessage: 'Whatsapp account',
+  },
   "all": {
     id: `${scope}.all`,
     defaultMessage: 'All',
@@ -390,4 +438,20 @@ export default defineMessages({
     id: `${scope}.uploadTemplate`,
     defaultMessage: 'Upload template',
   },
+  "clearAll": {
+    id: `${scope}.clearAll`,
+    defaultMessage: 'Clear all',
+  },
+  "whatsappMaxTemplates": {
+    id: `${scope}.whatsappMaxTemplates`,
+    defaultMessage: 'WhatsApp allows {maxCount} approved templates. To accommodate new approved templates either delete the existing one or reach out to Capillary POC to increase the limit.',
+  },
+  "status": {
+    id: `${scope}.status`,
+    defaultMessage: 'Status',
+  },
+  "category": {
+    id: `${scope}.category`,
+    defaultMessage: 'Category',
+  },
 });

package/v2Containers/Templates/reducer.js

@@ -82,9 +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.account));
     case types.SET_FACEBOOK_ACCOUNT:
       return state.set('selectedFacebookAccount', fromJS(action.faceBookAccount));
     case types.RESET_ACCOUNT:

package/v2Containers/TemplatesV2/index.js

@@ -23,6 +23,7 @@ import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Facebook from '../Facebook';
 import Viber from '../Viber';
+import Whatsapp from '../Whatsapp';
 import Line from '../Line/Container';
 import FTP from '../FTP';
 import Gallery from '../Assets/Gallery';
@@ -30,6 +31,7 @@ import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
 import { CREATIVES_UI_VIEW, LOYALTY} from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
+import { getObjFromQueryParams } from '../../utils/v2common';
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -49,6 +51,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       isFullMode,
       onChannelChange,
       showDisabledFBInfo,
+      enableNewChannels = [],
     } = props;
 
     const defaultPanes = {
@@ -60,6 +63,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       line: {content: <></>, tab: intl.formatMessage(messages.line), key: 'line'},
       viber: {content: <></>, tab: intl.formatMessage(messages.viber), key: 'viber'},
       facebook: {content: <div></div>, tab: intl.formatMessage(messages.facebook), key: 'facebook'},
+      whatsapp: { content: <></>, tab: intl.formatMessage(messages.whatsapp), key: 'whatsapp' },
     };
     let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
@@ -77,6 +81,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         filteredPanes.push({content: <></>, tab: intl.formatMessage(messages.FTP), key: 'ftp'});
         defaultChannel = 'FTP';
       }
+      if (!enableNewChannels.includes('WHATSAPP')) {
+        filteredPanes.splice(7, 1);
+      }
     }
 
 
@@ -118,6 +125,16 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       onChannelChange(defaultChannel);
     }
   }
+
+  componentDidMount() {
+    const queryItems = getObjFromQueryParams(location.search);
+
+    if(queryItems.channel === 'whatsapp') {
+      console.log("reached whatsapp content");
+      this.channelChange('whatsapp');
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
       const panes = this.setChannelContent(nextProps.channel, this.state.panes);

package/v2Containers/TemplatesV2/messages.js

@@ -54,6 +54,10 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.viber',
     defaultMessage: 'Viber',
   },
+  whatsapp: {
+    id: 'creatives.containersV2.TemplatesV2.whatsapp',
+    defaultMessage: 'WhatsApp',
+  },
   gallery: {
     id: 'creatives.containersV2.TemplatesV2.gallery',
     defaultMessage: 'Gallery',

package/v2Containers/Whatsapp/index.js

@@ -29,7 +29,11 @@ import {
   CAP_WHITE,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { makeSelectWhatsapp, makeSelectAccount } from './selectors';
-import { isLoadingMetaEntities } from '../Cap/selectors';
+import {
+  isLoadingMetaEntities,
+  makeSelectMetaEntities,
+  setInjectedTags,
+} from '../Cap/selectors';
 import * as WhatsappActions from './actions';
 import './index.scss';
 import {
@@ -47,11 +51,10 @@ import {
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
-import globalMessages from '../Cap/messages'
+import globalMessages from '../Cap/messages';
 import withCreatives from '../../hoc/withCreatives';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import TagList from '../TagList';
-import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
 import { validateTags } from '../../utils/tagValidations';
 
 let varMap = {};
@@ -76,7 +79,7 @@ export const Whatsapp = (props) => {
     metaEntities,
     injectedTags,
     loadingTags,
-    getFormData
+    getFormData,
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -130,9 +133,8 @@ export const Whatsapp = (props) => {
         configs = {},
         name = '',
       } = accountObj;
-      const { accessToken = '' } = configs;
       setAccountId(sourceAccountIdentifier);
-      setAccessToken(accessToken);
+      setAccessToken(configs.accessToken || '');
       setAccountName(name);
     }
   }, [accountData.selectedWhatsappAccount]);
@@ -266,7 +268,7 @@ export const Whatsapp = (props) => {
     }
   }, [metaEntities, isEditFlow]);
 
-    //performs tag validation
+  //performs tag validation
   useEffect(() => {
     if (
       !isFullMode &&
@@ -494,11 +496,13 @@ export const Whatsapp = (props) => {
             languages: [
               {
                 language: 'en',
-                content: 
-                  isEditFlow 
-                  ? `${updatedSmsEditor.join('')} ${formatMessage(messages.templateMessageUnsubscribeText)}`
+                content: isEditFlow
+                  ? `${updatedSmsEditor.join('')} ${formatMessage(
+                      messages.templateMessageUnsubscribeText,
+                    )}`
                   : `$'${templateMessage}\nClick {{${
-                    addedVarCount + 1 }}} to unsubscribe'`,
+                      addedVarCount + 1
+                    }}} to unsubscribe'`,
               },
             ],
             mediaType: 'TEXT',
@@ -555,7 +559,7 @@ export const Whatsapp = (props) => {
       validity: true,
       type: 'WHATSAPP',
     });
-  }
+  };
 
   const isDisableDone = () => {
     //if template name is not entered
@@ -884,22 +888,20 @@ export const Whatsapp = (props) => {
       <TemplatePreview
         channel={WHATSAPP}
         content={{ templateMsg }}
-        whatsappContentLen={isEditFlow ? updatedSmsEditor.join('').length : templateMessage.length}
+        whatsappContentLen={
+          isEditFlow ? updatedSmsEditor.join('').length : templateMessage.length
+        }
         whatsappAccountName={accountName}
       />
     );
   };
 
-  const isEditDoneDisabled = () => {
-    return isTagValidationError || Object.values(varMap).some( (inputValue) => {
-      if (inputValue === '') {
-        return true;
-      }
-    });
-  }
+  const isEditDoneDisabled = () =>
+    isTagValidationError ||
+    Object.values(varMap).some((inputValue) => inputValue === '');
   return (
     <CapSpin spinning={spin}>
-      <CapRow className='cap-whatsapp-creatives'>
+      <CapRow className="cap-whatsapp-creatives">
         <CapColumn span={14}>
           {isEditFlow ? editModeContent : createModeContent}
           <div className="whatsapp-scroll-div" />

package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap

@@ -9072,7 +9072,7 @@ exports[`Creatives Whatsapp test/> Cancel Btn 1`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"
@@ -18241,7 +18241,7 @@ exports[`Creatives Whatsapp test/> should render create mode 1`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"
@@ -24989,7 +24989,7 @@ T&C
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               />
             </Whatsapp__WhatsappFooter>
           </div>
@@ -32441,7 +32441,7 @@ T&C
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               />
             </Whatsapp__WhatsappFooter>
           </div>
@@ -40697,7 +40697,7 @@ T&C
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               />
             </Whatsapp__WhatsappFooter>
           </div>
@@ -50011,7 +50011,7 @@ T&C
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               />
             </Whatsapp__WhatsappFooter>
           </div>
@@ -59333,7 +59333,7 @@ exports[`Creatives Whatsapp test/> template category change 1`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"
@@ -68733,7 +68733,7 @@ exports[`Creatives Whatsapp test/> template message 1`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"
@@ -78392,7 +78392,7 @@ exports[`Creatives Whatsapp test/> template message 2`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"
@@ -88306,7 +88306,7 @@ exports[`Creatives Whatsapp test/> template message 3`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"
@@ -98481,7 +98481,7 @@ exports[`Creatives Whatsapp test/> template message 4`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"
@@ -108917,7 +108917,7 @@ exports[`Creatives Whatsapp test/> template message 5`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"
@@ -119614,7 +119614,7 @@ exports[`Creatives Whatsapp test/> template message 6`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"
@@ -129010,7 +129010,7 @@ exports[`Creatives Whatsapp test/> template name change 1`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"
@@ -138664,7 +138664,7 @@ exports[`Creatives Whatsapp test/> template name change 2`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"
@@ -148579,7 +148579,7 @@ exports[`Creatives Whatsapp test/> template name change 3`] = `
             </CapRow>
             <Whatsapp__WhatsappFooter>
               <div
-                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 jTxhHk"
+                className="Whatsapp__WhatsappFooter-sc-1ceifzy-0 fCfwuz"
               >
                 <CapButton
                   className="whatsapp-create-btn"