@capillarytech/creatives-library 7.10.65 → 7.10.67

package/v2Containers/Templates/tests/index.test.js

@@ -1,10 +1,125 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
+import React from 'react';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 
-// import { Templates } from '../index';
+import { Templates } from '../index';
+import mockdata from '../../mockdata';
 
-describe('<Templates />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
+const { Templates: TemplatesProp, getCreativesParamsOutput } = mockdata;
+
+jest.mock("../../CreativesContainer", () => ({
+  __esModule: true,
+  default: (props) => <div className="creatives-container-mock" {...props}>CreativesContainer</div>,
+}));
+
+
+describe('Test Templates container', () => {
+  const getWeCrmAccounts = jest.fn();
+  const setChannelAccount = jest.fn();
+  const getAllTemplates = jest.fn();
+  let renderedComponent;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderFunction = (isFullMode) => {
+    renderedComponent = shallowWithIntl(
+      <Templates
+        route={{
+          name: 'whatsapp',
+        }}
+        Templates={TemplatesProp}
+        actions={{
+          getWeCrmAccounts,
+          setChannelAccount,
+          getAllTemplates,
+        }}
+        location={{
+          pathname: "/whatsapp",
+          query: {},
+          search: '',
+        }}
+        EmailCreate={{
+          duplicateTemplateInProgress: false,
+        }}
+        isFullMode={isFullMode}
+      />
+    );
+  };
+
+  it('Should render correct component for whatsapp channel', () => {
+    renderFunction();
+    expect(renderedComponent).toMatchSnapshot();
+
+    expect(getWeCrmAccounts).toHaveBeenCalledTimes(1);
+    expect(getWeCrmAccounts).toHaveBeenCalledWith('Whatsapp');
+  });
+
+
+  it('Should render temlates when whatsapp templates are passed', () => {
+    renderFunction();
+    renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+
+  it('Should render illustration when no templates are passed', () => {
+    renderFunction();
+    renderedComponent.setProps({TemplatesList: []});
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render temlates when whatsapp templates are passed in full mode', () => {
+    renderFunction(true);
+    renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
+    renderedComponent.setState({selectedWhatsappStatus: 'approved'});
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Test getCreatives params in edit mode', () => {
+    renderFunction();
+    renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
+    renderedComponent.setState({routeParams: { pathname: '/edit'}});
+    expect(renderedComponent.instance().getCreativesParams()).toEqual(getCreativesParamsOutput);
+  });
+
+  const getFilterContainer = () => {
+    const FilterContainer = () =>
+      renderedComponent.find(".selected-whatsapp-filters").props().children;
+    return shallowWithIntl(<FilterContainer />);
+  };
+  it('Test removing single filter', () => {
+    renderFunction();
+    renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
+    renderedComponent.setState({selectedWhatsappStatus: 'approved'});
+    //remove status filter
+    
+    getFilterContainer().find('CapTag').props().onClose();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+
+  it('Test removing all whatsapp filters', () => {
+    renderFunction();
+    renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
+    renderedComponent.setState({selectedWhatsappStatus: 'approved'});
+    renderedComponent.setState({selectedWhatsappCategory: 'ALERT_UPDATE'});
+    expect(renderedComponent).toMatchSnapshot();
+
+    //remove all filters
+    getFilterContainer().find('CapLink').props().onClick();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Test max templates exceeded', () => {
+    renderFunction(true);
+    renderedComponent.setProps({TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 260 }]});
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Test max templates warning', () => {
+    renderFunction(true);
+    renderedComponent.setProps({TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 248 }]});
+    expect(renderedComponent).toMatchSnapshot();
   });
 });

package/v2Containers/TemplatesV2/index.js

@@ -23,13 +23,12 @@ 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';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
-import { CREATIVES_UI_VIEW, LOYALTY} from '../App/constants';
+import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP } from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
 import { getObjFromQueryParams } from '../../utils/v2common';
 
@@ -37,6 +36,8 @@ const {CapCustomCardList} = CapCustomCard;
 
 const StyledCapTab = withStyles(CapTab, CapTabStyle);
 
+const WHATSAPP_LOWERCASE = WHATSAPP.toLowerCase();
+
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -63,7 +64,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' },
+      whatsapp: { content: <></>, tab: intl.formatMessage(messages.whatsapp), key: WHATSAPP_LOWERCASE },
     };
     let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
@@ -81,7 +82,7 @@ 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')) {
+      if (!enableNewChannels.includes(WHATSAPP)) {
         filteredPanes.splice(7, 1);
       }
     }
@@ -129,9 +130,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   componentDidMount() {
     const queryItems = getObjFromQueryParams(location.search);
 
-    if(queryItems.channel === 'whatsapp') {
-      console.log("reached whatsapp content");
-      this.channelChange('whatsapp');
+    if (queryItems.channel === WHATSAPP_LOWERCASE) {
+      this.channelChange(WHATSAPP_LOWERCASE);
     }
   }
 

package/v2Containers/Whatsapp/constants.js

@@ -122,4 +122,10 @@ export const EMBEDDED = 'embedded';
 export const DEFAULT = 'default';
 export const FULL = 'full';
 export const ALL = 'all';
-export const LIBRARY = 'library';
+export const LIBRARY = 'library';
+
+export const WHATSAPP_MEDIA_TYPES = {
+  TEXT: 'TEXT',
+  IMAGE: 'IMAGE',
+  VIDEO: 'VIDEO',
+};

package/v2Containers/Whatsapp/index.js

@@ -48,6 +48,7 @@ import {
   FULL,
   ALL,
   LIBRARY,
+  WHATSAPP_MEDIA_TYPES,
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -353,11 +354,11 @@ export const Whatsapp = (props) => {
 
   const mediaRadioOptions = [
     {
-      value: 'text',
+      value: WHATSAPP_MEDIA_TYPES.TEXT,
       label: formatMessage(messages.mediaTextMessage),
     },
     {
-      value: 'image',
+      value: WHATSAPP_MEDIA_TYPES.IMAGE,
       label: (
         <CapTooltip title={formatMessage(messages.disabledMediaTooltip)}>
           {formatMessage(messages.mediaImage)}
@@ -366,7 +367,7 @@ export const Whatsapp = (props) => {
       disabled: true,
     },
     {
-      value: 'video',
+      value: WHATSAPP_MEDIA_TYPES.VIDEO,
       label: (
         <CapTooltip title={formatMessage(messages.disabledMediaTooltip)}>
           {formatMessage(messages.mediaVideo)}
@@ -488,6 +489,19 @@ export const Whatsapp = (props) => {
     return errorMessage;
   };
 
+  const getPayloadContent = () => (
+    (isEditFlow && !isFullMode)
+    ? `${updatedSmsEditor.join('')} ${formatMessage(
+        messages.templateMessageUnsubscribeText,
+      )}`
+    : `${templateMessage}\n${formatMessage(
+        messages.modifiedUnsubscribeText,
+      {
+        value: `{{${addedVarCount + 1}}}`,
+      },
+      )}`
+  );
+
   const createPayload = () => ({
     name: templateName,
     versions: {
@@ -498,21 +512,12 @@ export const Whatsapp = (props) => {
             languages: [
               {
                 language: 'en',
-                content: isEditFlow
-                  ? `${updatedSmsEditor.join('')} ${formatMessage(
-                      messages.templateMessageUnsubscribeText,
-                    )}`
-                  : `${templateMessage}\n${formatMessage(
-                      messages.modifiedUnsubscribeText,
-                      {
-                        value: `{{${addedVarCount + 1}}}`,
-                      },
-                    )}`,
+                content: getPayloadContent(),
               },
             ],
-            mediaType: 'TEXT',
-            varMapped: varMap,
-            templateEditor: tempMsgArray.join(''),
+            mediaType: WHATSAPP_MEDIA_TYPES.TEXT,
+            varMapped: !isFullMode ? varMap : {},
+            templateEditor: !isFullMode && tempMsgArray.join(''),
             accountId,
             accessToken,
             accountName,
@@ -562,7 +567,7 @@ export const Whatsapp = (props) => {
       value: createPayload(),
       _id: params?.id,
       validity: true,
-      type: 'WHATSAPP',
+      type: WHATSAPP,
     });
   };
 
@@ -825,7 +830,7 @@ export const Whatsapp = (props) => {
     const { unsupportedTags = [] } = tagValidationResponse;
     let tagError = '';
     if (unsupportedTags.length > 0) {
-      tagError = formatMessage(messages.unsupportedTagsValidationError, {
+      tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
         unsupportedTags,
       });
     }

package/v2Containers/Whatsapp/messages.js

@@ -1,19 +1,11 @@
 import { defineMessages } from 'react-intl';
 const prefix = `creatives.containersV2.Whatsapp`;
 export default defineMessages({
-  templateNameLabel: {
-    id: `${prefix}.templateNameLabel`,
-    defaultMessage: 'Template name',
-  },
   templateNameDesc: {
     id: `${prefix}.templateNameDesc`,
     defaultMessage:
       'Must be a unique name and can only contain lowercase alphanumeric characters and underscores.',
   },
-  templateNamePlaceholder: {
-    id: `${prefix}.templateNamePlaceholder`,
-    defaultMessage: 'Enter template name',
-  },
   templateNameTooltip: {
     id: `${prefix}.templateNameTooltip`,
     defaultMessage: `Tip : Use a name that helps WhatsApp's reviewer understand the purpose of your message, for example "order_delivery" rather than "template_1"`,