@capillarytech/creatives-library 8.0.26 → 8.0.27

package/v2Containers/SmsTrai/Edit/tests/index.test.js

@@ -1,27 +1,16 @@
 import React from 'react';
+import { createBrowserHistory } from 'history';
 import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
 import { initialReducer } from '../../../../initialReducer';
 import { Provider } from 'react-redux';
 import { mountWithIntl } from '../../../../../app/helpers/intl-enzym-test-helpers';
 import { SmsTraiEdit } from '../index';
 import { mockData } from './mockData';
-import history from '../../../../utils/history';
 
-
-
-
-
-jest.mock('../../../TagList/index.js', () => ({
-  __esModule: true,
-  default: (props) => (
-    <div className="tag-mock" {...props}>
-      TagList
-    </div>
-  ),
-}));
 let store;
+let browserHistory = createBrowserHistory();
 beforeAll(() => {
-  store = configureStore({}, initialReducer, history);
+  store = configureStore({}, initialReducer, browserHistory);
 });
 
 describe('Creatives SmsTraiEdit test/>', () => {

package/v2Containers/TagList/tests/TagList.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import "@testing-library/jest-dom";
+import { createBrowserHistory } from 'history';
 import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
 import { initialReducer } from '../../../initialReducer';
 import { injectIntl } from "react-intl";
@@ -8,12 +9,12 @@ import { TagList } from '../index';
 import { TagListData, eventContextTags } from './mockdata';
 import { Provider } from 'react-redux';
 import { screen, render } from '../../../utils/test-utils';
-import history from '../../../utils/history';
 const { getByText } = screen;
 
 
 const initializeTagList = (props) => {
-  const store = configureStore({}, initialReducer, history);
+  const browserHistory = createBrowserHistory();
+  const store = configureStore({}, initialReducer, browserHistory);
   const Component = injectIntl(TagList);
 
   const propsObj = {

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

@@ -193,7 +193,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
           <div
             className="action-container"
           >
-            <_Class
+            <_class
               className="search-text"
               disabled={false}
               labelPosition="top"
@@ -426,7 +426,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
           <div
             className="action-container"
           >
-            <_Class
+            <_class
               className="search-text"
               disabled={false}
               labelPosition="top"
@@ -785,7 +785,7 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
           <div
             className="action-container"
           >
-            <_Class
+            <_class
               className="search-text"
               disabled={false}
               labelPosition="top"
@@ -1033,7 +1033,9 @@ Click {{unsubscribe}} to unsubscribe
                           <React.Fragment />
                         </React.Fragment>,
                         "extra": Array [
-                          <React.Fragment>
+                          <CapTooltip
+                            title=""
+                          >
                             <CapIcon
                               className="view-whatsapp"
                               onClick={[Function]}
@@ -1044,7 +1046,7 @@ Click {{unsubscribe}} to unsubscribe
                               }
                               type="eye"
                             />
-                          </React.Fragment>,
+                          </CapTooltip>,
                           <CapDropdown
                             overlay={
                               <CapMenu>
@@ -1240,7 +1242,7 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
           <div
             className="action-container"
           >
-            <_Class
+            <_class
               className="search-text"
               disabled={false}
               labelPosition="top"
@@ -1470,7 +1472,9 @@ Click {{unsubscribe}} to unsubscribe
                           <React.Fragment />
                         </React.Fragment>,
                         "extra": Array [
-                          <React.Fragment>
+                          <CapTooltip
+                            title=""
+                          >
                             <CapIcon
                               className="view-whatsapp"
                               onClick={[Function]}
@@ -1481,7 +1485,7 @@ Click {{unsubscribe}} to unsubscribe
                               }
                               type="eye"
                             />
-                          </React.Fragment>,
+                          </CapTooltip>,
                           <CapDropdown
                             overlay={
                               <CapMenu>
@@ -1677,7 +1681,7 @@ exports[`Test Templates container Test max templates warning 1`] = `
           <div
             className="action-container"
           >
-            <_Class
+            <_class
               className="search-text"
               disabled={false}
               labelPosition="top"
@@ -1907,7 +1911,9 @@ Click {{unsubscribe}} to unsubscribe
                           <React.Fragment />
                         </React.Fragment>,
                         "extra": Array [
-                          <React.Fragment>
+                          <CapTooltip
+                            title=""
+                          >
                             <CapIcon
                               className="view-whatsapp"
                               onClick={[Function]}
@@ -1918,7 +1924,7 @@ Click {{unsubscribe}} to unsubscribe
                               }
                               type="eye"
                             />
-                          </React.Fragment>,
+                          </CapTooltip>,
                           <CapDropdown
                             overlay={
                               <CapMenu>
@@ -2114,7 +2120,7 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
           <div
             className="action-container"
           >
-            <_Class
+            <_class
               className="search-text"
               disabled={false}
               labelPosition="top"
@@ -2373,7 +2379,7 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
           <div
             className="action-container"
           >
-            <_Class
+            <_class
               className="search-text"
               disabled={false}
               labelPosition="top"
@@ -2606,7 +2612,7 @@ exports[`Test Templates container Test removing single filter 1`] = `
           <div
             className="action-container"
           >
-            <_Class
+            <_class
               className="search-text"
               disabled={false}
               labelPosition="top"

package/v2Containers/TemplatesV2/index.js

@@ -11,9 +11,7 @@ import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
-import {
-  CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon, CapTooltip,
-} from '@capillarytech/cap-ui-library';
+import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon, CapTooltip } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
 import Helmet from 'react-helmet';
@@ -33,12 +31,10 @@ 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, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCALE_HIDE_FEATURE, ZALO, INAPP,
-} from '../App/constants';
+import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCALE_HIDE_FEATURE, ZALO, INAPP } from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
 import { getObjFromQueryParams } from '../../utils/v2common';
-import { makeSelectAuthenticated, selectCurrentOrgDetails } from "../Cap/selectors";
+import { makeSelectAuthenticated, selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
 import injectSaga from '../../utils/injectSaga';
 import injectReducer from '../../utils/injectReducer';
 
@@ -124,15 +120,13 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         // eslint-disable-next-line no-param-reassign
         pane.disabled = true;
         if (pane.key === 'facebook' && showDisabledFBInfo) {
-          pane.tab = (
-            <CapTooltip
-              title={
-                intl.formatMessage(messages.facebookDisableinfo)
-              }
-            >
-              {intl.formatMessage(messages.facebook)}
-            </CapTooltip>
-          );
+          pane.tab = (<CapTooltip
+            title={
+            intl.formatMessage(messages.facebookDisableinfo)
+          }
+        >
+            {intl.formatMessage(messages.facebook)}
+          </CapTooltip>);
         }
       }
       return pane;
@@ -185,18 +179,16 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       this.setState({selectedChannel: nextProps.channel, panes });
     }
   }
-
-  getTemplateDataForGrid = ({
-    templates, handlers, filterContent, channel, isLoading, loadingTip,
-  }) => {
+  getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
     const cardDataList = templates.map((template) => {
-      const templateData = {
-        key: `${currentChannel}-card-${template.name}`,
-        title: <span title={template.name}>{template.name}</span>,
-        extra: [<CapIcon type="eye" onClick={() => { if (this.props.isFullMode) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }} />],
-        hoverOption: <CapButton onClick={(e) => handlers.handleEditClick(e, template._id)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.edit : messages.select)}</CapButton>,
-      };
+      const templateData =
+        {
+          key: `${currentChannel}-card-${template.name}`,
+          title: <span title={template.name} >{template.name}</span>,
+          extra: [<CapIcon type="eye" onClick={() => { if (this.props.isFullMode) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }} />],
+          hoverOption: <CapButton onClick={(e) => handlers.handleEditClick(e, template._id)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.edit : messages.select)}</CapButton>,
+        };
       if (currentChannel === "SMS") {
         templateData.content = template.versions.base['sms-editor'];
       } else if (currentChannel === "EMAIL") {
@@ -204,21 +196,17 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       }
       return templateData;
     });
-    return (
-      <div>
-        {filterContent}
-        <CapSpin spinning={isLoading} tip={loadingTip}>
-          <div className="pagination-container">
-            <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
-          </div>
-        </CapSpin>
+    return (<div>
+      {filterContent}
+      <CapSpin spinning={isLoading} tip={loadingTip}>
+        <div className="pagination-container">
+          <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
+        </div>
+      </CapSpin>
 
-      </div>
-    );
+    </div>);
   }
-
-  getGalleryComponent = (location) => <Gallery location={location} isFullMode={this.props.isFullMode} />
-
+  getGalleryComponent = (location) => <Gallery location={location} isFullMode={this.props.isFullMode}/>
   getCallTaskComponent = () => (
     <CallTask
       onCreateNew={this.props.createNew}
@@ -228,13 +216,11 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   );
 
   getFacebookComponent = () => {
-    const {
-      messageDetails, cap, onFacebookSubmit,
+    const { messageDetails, cap, onFacebookSubmit,
       messageStrategy,
       showDisabledFBInfo,
       orgUnitId,
-      onSelectTemplate,
-    } = this.props;
+      onSelectTemplate } = this.props;
     return (
       <Facebook
         {...this.props}
@@ -248,21 +234,18 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       />
     );
   }
-
   getViberComponent =() => (
     <Viber
       {...this.props}
       isCreateFlow
-    >
-    </Viber>
+    ></Viber>
   )
-
   getLineComponent = () => (
     <Line
       {...this.props}
       isCreateFlow
-    />
-  )
+      />
+    )
 
   getFTPComponent = () => (
     <FTP mode={this.props.FTPMode} {...this.props} />
@@ -293,22 +276,20 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       case 'assets':
         return this.getGalleryComponent(location);
       default:
-        return (
-          <Templates
-            key={channel}
-            location={location}
-            route={{name: channel}}
-            router={this.props.router}
-            isFullMode={this.props.isFullMode}
-            createNew={this.props.createNew}
-            onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
-            renderNewCardGrid={this.getTemplateDataForGrid}
-            handlePeviewTemplate={this.props.handlePeviewTemplate}
-            messageStrategy={this.props.messageStrategy}
-            smsRegister={smsRegister}
-            hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
-          />
-        );
+        return (<Templates
+          key={channel}
+          location={location}
+          route={{name: channel}}
+          router={this.props.router}
+          isFullMode={this.props.isFullMode}
+          createNew={this.props.createNew}
+          onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
+          renderNewCardGrid={this.getTemplateDataForGrid}
+          handlePeviewTemplate={this.props.handlePeviewTemplate}
+          messageStrategy={this.props.messageStrategy}
+          smsRegister={smsRegister}
+          hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
+    />);
     }
   }
 
@@ -330,18 +311,14 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     const panes = this.setChannelContent(selectedChannel, this.state.panes);
     this.setState({panes, selectedChannel}, () => { if (!this.props.isFullMode) this.props.onChannelChange(selectedChannel); });
   }
-
   selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
 
   isLoading() {
     return this.props.Templates.loadingTemplates;
   }
-
   render() {
-    const {
-      isFullMode, className, cap = {}, authData = {},Global={},
-    } = this.props;
-    const { accessiblePermissions = []} = cap.user || authData.user || Global.user || {};
+    const { isFullMode, className, cap = {}, Global = {}} = this.props;
+    const { accessiblePermissions = []} = cap.user || Global.user || {};
     let isCreativeAccessible = true;
     if (!accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
       isCreativeAccessible = false;
@@ -349,16 +326,14 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     return (
       !isCreativeAccessible ? <AccessForbidden /> : (
         <div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`} data-testid="cap-wrapper">
-          {isFullMode && (
-            <Helmet
-              title={this.props.intl.formatMessage(messages.creatives)}
-              meta={[
-                { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
-              ]}
-            />
-          )}
+          {isFullMode && <Helmet
+            title={this.props.intl.formatMessage(messages.creatives)}
+            meta={[
+              { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
+            ]}
+          />}
           <div className="component-wrapper">
-            {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives} />} description={<FormattedMessage {...messages.creativesDesc} />} />}
+            {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
             <StyledCapTab
               panes={this.state.panes}
               onChange={this.channelChange}

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

@@ -4,18 +4,19 @@ import '@testing-library/jest-dom';
 import cloneDeep from 'lodash/cloneDeep';
 import { Provider } from 'react-redux';
 import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
-import history from '../../../utils/history';
+import { createBrowserHistory } from 'history';
 import { initialReducer } from '../../../initialReducer';
 import {
     render,
     screen,
 } from '../../../utils/test-utils';
 import { TemplatesV2 } from '../index';
-import { Templates, authData, currentOrgDetails, } from './mockData';
+import { Templates, authData, currentOrgDetails } from './mockData';
 
 const ComponentToRender = injectIntl(TemplatesV2);
 const renderComponent = (props) => {
-  const store = configureStore({}, initialReducer, history);
+  const browserHistory = createBrowserHistory();
+  const store = configureStore({}, initialReducer, browserHistory);
   return render(
     <Provider store={store}>
       <ComponentToRender {...props} />

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

@@ -3,7 +3,7 @@ import { injectIntl } from 'react-intl';
 import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
 import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
-import history from '../../../utils/history';
+import { createBrowserHistory } from 'history';
 import { initialReducer } from '../../../initialReducer';
 import { Viber } from '../index';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
@@ -22,18 +22,11 @@ const mockActions = {
 const mockGlobalActions = {
   fetchSchemaForEntity: jest.fn(),
 };
-jest.mock('../../../v2Containers/TagList/index.js', () => ({
-  __esModule: true,
-  default: (props) => (
-    <div className="tag-mock" {...props}>
-      TagList
-    </div>
-  ),
-}));
 
 let store;
+let browserHistory = createBrowserHistory();
 beforeAll(() => {
-  store = configureStore({}, initialReducer, history);
+  store = configureStore({}, initialReducer, browserHistory);
 });
 
 const ComponentToRender = injectIntl(Viber);

package/v2Containers/Whatsapp/index.js

@@ -904,7 +904,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             checked={unsubscribeRequired}
             disabled={isDisabled}
             autoFocus={true}
-            data-testid="whatsapp-unsubscribe-checkbox"
           >
             <CapTooltip
               placement="bottom"