@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.0

package/v2Components/NavigationBar/index.js

@@ -7,26 +7,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { isEmpty, forEach } from 'lodash';
 import { loadItem } from 'services/localStorageApi';
 import { intlShape, injectIntl } from 'react-intl';
-import { FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
-import TopBar from '../TopBar';
+import { get } from 'lodash';
 import messages from './messages';
 import { LOYALTY } from '../../v2Containers/App/constants';
 import {
   HELP_URL,
   LOYALTY_HELP_URL,
-  ENABLE_AI_SUGGESTIONS,
+  ENABLE_NEW_LEFT_NAVIGATION,
+  DEFAULT_MODULE,
+  AI_DOCUMENTATION_BOT_DISABLED,
 } from '../../v2Containers/Cap/constants';
-const PRODUCT_MASTERS = 'masters';
-const EMBEDDED = 'embedded';
-
-const AppWrapper = styled.div`
-  .navigation-setting-icon {
-    color: ${FONT_COLOR_04};
-  }
-`;
+import CapNavigation from '@capillarytech/cap-ui-library/CapNavigation';
+import configPath from '../../config/path';
+import * as Api from '../../services/api';
+import { CapLeftNavigatioOpenCss, CapLeftNavigationCss } from './style';
+import { EMBEDDED } from './constants';
 
 const CapWrapper = styled.div`
   position: absolute;
@@ -51,7 +48,7 @@ export class NavigationBar extends React.Component {
   }
 
   initializeSelectedProduct = () => {
-    const {location, intl: {formatMessage}} = this.props;
+    const { location, intl: { formatMessage } } = this.props;
     const { pathname } = location;
     const parentModule = pathname.substring(pathname.lastIndexOf('/') + 1);
     switch (parentModule) {
@@ -64,7 +61,7 @@ export class NavigationBar extends React.Component {
             key: 'settings',
             placement: 'bottomRight',
             className: 'navigation-setting-icon',
-            toolTip: formatMessage(messages.noProductSetting),
+            toolTip: formatMessage(messages.loyaltyCreativeSettings),
           },
         };
       default:
@@ -98,73 +95,26 @@ export class NavigationBar extends React.Component {
   };
 
   onHelpIconClick = () => {
-    const {helpUrl} = this.state;
+    const { helpUrl } = this.state;
     if (helpUrl) {
       window.open(helpUrl, '_blank');
     }
   };
 
-  getProxyOrgList = () => {
-    const { userData } = this.props;
-    const proxyOrgList = [];
-    if (userData && userData.user && userData.user !== '') {
-      const defaultOrgName = userData.user.orgName;
-      const defaultOrgId = userData.user.orgID;
-      proxyOrgList.push({ label: defaultOrgName, value: defaultOrgId, key: defaultOrgId });
-      const orgList = userData.user.proxyOrgList;
-      if (!isEmpty(orgList)) {
-        forEach(orgList, (item) => {
-          const id = item.orgID;
-          const name = item.orgName;
-          if (id !== defaultOrgId) {
-            proxyOrgList.push({ label: name, value: id, key: id });
-          }
-        });
-      }
-    }
-    return proxyOrgList;
-  };
-
-  getProductsList = () => {
-    const { formatMessage } = this.props.intl;
-    const { currentOrgDetails } = this.props.userData;
-    const productsList = [];
-    if (!isEmpty(currentOrgDetails)) {
-      forEach(currentOrgDetails.module_details, (module = {}) => {
-        if ((module.name || '').toLowerCase() !== PRODUCT_MASTERS) {
-          const productName = module.code;
-          const intlProductName = messages[productName];
-          const moduleName = intlProductName ? formatMessage(intlProductName) : (module.name || '').toLowerCase();
-          productsList.push({
-            value: moduleName,
-            url: module.url,
-            key: module.code,
-          });
-        }
-      });
-      //below changes are temporary and should be fixed once we get correct modules list
-      //changing campaigns module name to engage+
-      //adding insights+ to module list
-      productsList.push({
-        value: formatMessage(messages.insights),
-        url: 'analytics/v2/',
-        key: 'analytics/v2/',
-      });
-    }
-    return productsList;
-  };
-
-  getTopbarIcons = (showDocumentationBot = false) => {
-    const {settingsIcon} = this.state;
+  getTopbarIcons = (showDocumentationBot = false, isLatestLeftNavigationEnabled = false) => {
+    const { settingsIcon } = this.state;
     const ICONS = [
       {
         iconType: 'help',
         key: 'help',
         onClickHandler: this.onHelpIconClick,
       },
-      settingsIcon,
     ];
+    if (!isLatestLeftNavigationEnabled) {
+      ICONS.push(settingsIcon);
+    }
     return showDocumentationBot ? ICONS.slice(1) : ICONS; // If showDocumentationBot is true, help icon will be replaced by Aira icon on UI
+
   };
 
   getDropdownMenu = () => {
@@ -183,10 +133,6 @@ export class NavigationBar extends React.Component {
     ];
   };
 
-  handleTopbarMenuChange = (option) => {
-    window.location.pathname = option.link;
-  };
-
   handleOrgChange = (orgId) => {
     const selectedOrg = loadItem('orgID');
     if (selectedOrg !== orgId) {
@@ -194,55 +140,79 @@ export class NavigationBar extends React.Component {
     }
   };
 
-  handleProductChange = (product) => {
-    const { location } = this.props;
-    const { basename } = location;
-    this.setState({ selectedProduct: product.value }, () => {
-      if (product.url !== `${basename}/index`) {
-        window.location.pathname = product.url;
-      }
-    });
-  };
+  productSelection = () => {
+    const { location, intl: { formatMessage } } = this.props;
+    const { pathname } = location;
+    const parentModule = pathname.substring(pathname.lastIndexOf('/') + 1);
+    switch (parentModule) { 
+      case LOYALTY:
+        return formatMessage(messages.loyaltyProgram);
+      default:
+        return formatMessage(messages.selectedProductDefault)
+
+    }
+  }
 
   render() {
     const {
       topbarMenuData,
-      loggedIn,
       type,
       userData,
+      intl,
+      handleLeftNavBarExpanded,
+      leftNavbarExpandedProp,
     } = this.props;
-    const showDocumentationBot = userData?.currentOrgDetails?.accessibleFeatures?.includes(ENABLE_AI_SUGGESTIONS);
-    const productsList = this.getProductsList();
-    const proxyOrgList = this.getProxyOrgList();
-    const selectedOrg = loadItem('orgID');
+
+    const accessibleDocFeatures = get(userData, 'currentOrgDetails.accessibleFeatures', []);
+    const showDocumentationBot = !accessibleDocFeatures.includes(AI_DOCUMENTATION_BOT_DISABLED);
+
     const dropdownMenuProps = this.getDropdownMenu();
-    const topbarIcons = this.getTopbarIcons(showDocumentationBot);
-    const { selectedProduct } = this.state;
-    const customTopBarProps = {};
+    const {
+      currentOrgDetails: {
+        accessibleFeatures = [],
+      } = {},
+    } = userData || {};
+    const isLatestLeftNavigationEnabled = accessibleFeatures?.includes(
+      ENABLE_NEW_LEFT_NAVIGATION,
+    );
+    const topbarIcons = this.getTopbarIcons(showDocumentationBot, isLatestLeftNavigationEnabled);
+    const topbarMenuDataModified = isLatestLeftNavigationEnabled ? [] : topbarMenuData;
+    const headerOverideCss = isLatestLeftNavigationEnabled && (leftNavbarExpandedProp ? CapLeftNavigatioOpenCss : CapLeftNavigationCss);
     return (
-      <AppWrapper>
-        {loggedIn && type !== EMBEDDED &&
-          <TopBar
-            productsList={productsList}
-            selectedProduct={selectedProduct}
-            handleProductChange={this.handleProductChange}
-            proxyOrgList={proxyOrgList}
-            selectedOrg={selectedOrg}
-            handleOrgChange={this.handleOrgChange}
-            topbarMenuData={topbarMenuData}
-            handleTopbarMenuChange={this.handleTopbarMenuChange}
-            dropdownMenuProps={dropdownMenuProps}
-            topbarIcons={topbarIcons}
-            showDocumentationBot={showDocumentationBot}
-            {...customTopBarProps}
-          />
-        }
-        <CapWrapper isEmbedded={type === EMBEDDED}>
-          <ComponentWrapper>
-            {React.Children.toArray(this.props.children)}
-          </ComponentWrapper>
-        </CapWrapper>
-      </AppWrapper>
+      <CapNavigation
+        className="creatives-main-container"
+        showContent
+        userData={userData}
+        loadStorageItem={loadItem}
+        changeOrgEntity={this.handleOrgChange}
+        topbarMenuData={topbarMenuDataModified}
+        topbarSelectedMenuData={[DEFAULT_MODULE]}
+        dropdownMenuProps={dropdownMenuProps}
+        topbarIcons={topbarIcons}
+        sidebarMenuData={[]}
+        sidebarMenuItemsPosition={null}
+        defaultSelectedProduct={this.productSelection()}
+        skipStateForStorage
+        selectOrganization={intl.formatMessage(messages.selectOrganization)}
+        isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
+        history={history}
+        publicPath={configPath.publicPath}
+        getNavigationConfigApi={Api.getNavigationConfigApi}
+        showDocumentationBot={showDocumentationBot}
+        setLeftNavbarExpandedProp={handleLeftNavBarExpanded}
+        headerOverideCss={headerOverideCss}
+        request={Api?.request}
+        getAPICallObject={Api?.getAPICallObject}
+      >
+        <div data-testid="cap-wrapper">
+          <CapWrapper isEmbedded={type === EMBEDDED}>
+            <ComponentWrapper>
+              {React.Children.toArray(this.props.children)}
+            </ComponentWrapper>
+          </CapWrapper>
+        </div>
+      </CapNavigation>
+
     );
   }
 }
@@ -255,10 +225,11 @@ NavigationBar.propTypes = {
   settingsUrl: PropTypes.string,
   children: PropTypes.node,
   orgSettingsUrl: PropTypes.string,
-  loggedIn: PropTypes.bool,
   intl: intlShape.isRequired,
   location: PropTypes.object,
   type: PropTypes.string,
+  handleLeftNavBarExpanded: PropTypes.func,
+  leftNavbarExpandedProp: PropTypes.bool,
 };
 
 export default injectIntl(NavigationBar);

package/v2Components/NavigationBar/messages.js

@@ -62,4 +62,12 @@ export default defineMessages({
     defaultMessage:
       'There are no product settings. Organisation settings are available under profile on the right.',
   },
+  "selectOrganization": {
+    id: `${scope}.selectOrganization`,
+    defaultMessage: 'Select organization',
+  },
+  "loyaltyCreativeSettings": {
+    id: `${scope}.loyaltyCreativeSettings`,
+    defaultMessage: 'There are no settings for creatives within Loyalty+. Channel-related settings are available within organisation settings',
+  }
 });

package/v2Components/NavigationBar/style.js

@@ -0,0 +1,9 @@
+export const CapLeftNavigationCss = {
+  'width': '75.770rem',
+  'margin-left': 'calc((100vw - 70.063rem)/2 + 1.6rem)',
+};
+
+export const CapLeftNavigatioOpenCss = {
+  'width': '71.063rem',
+  'margin-left': 'calc((100vw - 70.063rem)/2 + 8rem)',
+};

package/v2Components/NavigationBar/tests/index.test.js

@@ -7,19 +7,27 @@ import { render, screen } from '../../../utils/test-utils';
 
 import { NavigationBar } from '../index';
 import * as mockdata from './mockData';
-
+import { Provider } from 'react-redux';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import { createBrowserHistory } from 'history';
+import { initialReducer } from '../../../initialReducer';
 const { userData } = mockdata;
 
+let store;
+let browserHistory = createBrowserHistory();
+beforeAll(() => {
+  store = configureStore({}, initialReducer, browserHistory);
+});
 const ComponentToRender = injectIntl(NavigationBar);
-
 const renderComponent = (props) => {
   render(
-    <Router>
-      <ComponentToRender {...props} />
-    </Router>,
+    <Provider store={store}>
+      <Router>
+        <ComponentToRender {...props} />
+      </Router>
+    </Provider>
   );
 };
-
 describe('NavigationBar', () => {
   const props = {
     topbarMenuData: [{}],
@@ -37,7 +45,7 @@ describe('NavigationBar', () => {
 
   it('Show aria documentation bot icon if showDocumentationBot is true', () => {
     renderComponent(props);
-    const ariaBotIcon = screen.getByLabelText('aria bot icon');
+    const ariaBotIcon = screen.getByLabelText('open-aira');
     expect(ariaBotIcon).toBeInTheDocument();
   });
 
@@ -45,7 +53,22 @@ describe('NavigationBar', () => {
     const updatedProps = cloneDeep(props);
     delete updatedProps.userData.currentOrgDetails.accessibleFeatures;
     renderComponent(updatedProps);
-    const ariaBotIcon = screen.queryByLabelText('aria bot icon');
-    expect(ariaBotIcon).toBeNull();
+    const ariaBotIcon = screen.queryByLabelText('open-aira');
+    expect(ariaBotIcon).toBeInTheDocument();
+  });
+  
+  it('Should contains top vertical', () => {
+    const updatedProps = {...props} ;
+    delete updatedProps.userData.currentOrgDetails.accessibleFeatures;
+    renderComponent(updatedProps);
+    const topVaerticalBar = document.querySelector('.cap-top-bar-vertical');
+    expect(topVaerticalBar).toBeInTheDocument();
+  });
+  it('Should have loyalty product selected', () => {
+    const updatedProps = {...props};
+    updatedProps.location.pathname = '/creatives/ui/v2/loyalty';
+    renderComponent(updatedProps);
+    const loyaltyProduct = screen.getByText('Loyalty+');
+    expect(loyaltyProduct).toBeInTheDocument();
   });
 });

package/v2Components/NavigationBar/tests/mockData.js

@@ -34,3 +34,4 @@ export const userData = {
     accessibleFeatures: ['ENABLE_AI_SUGGESTIONS'],
   },
 };
+

package/v2Components/NewCallTask/tests/index.test.js

@@ -2,9 +2,10 @@ import React from "react";
 import { injectIntl } from 'react-intl';
 import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
-import { browserHistory } from 'react-router';
+import { createBrowserHistory } from 'history';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import { initialReducer } from "../../../initialReducer";
 import NewCallTask from '../index';
-import configureStore from '../../../store';
 import mockData from './mockData'
 import {
     render,
@@ -13,7 +14,8 @@ import { Router } from "express";
 const ComponentToRender = injectIntl(NewCallTask);
 
 const renderComponent = (props) => {
-  const store = configureStore({}, browserHistory);
+  let browserHistory = createBrowserHistory();
+  const store = configureStore({}, initialReducer, browserHistory);
   return render(
     <Router>
       <Provider store={store}>

package/v2Components/Pagination/index.js

@@ -13,7 +13,7 @@ class Pagination extends React.Component { // eslint-disable-line react/prefer-s
 
   handleScroll = (e) => {
     const offset = 50;
-    if ((e.target.scrollHeight - e.target.scrollTop) - offset <= e.target.clientHeight) {
+    if ((e.target.scrollHeight - e.target.scrollTop) - offset <= e.target.clientHeight && !this.props.templateInProgress) {
       this.props.onPageChange();
     }
   };
@@ -31,6 +31,7 @@ Pagination.propTypes = {
   children: PropTypes.element,
   onPageChange: PropTypes.func,
   style: PropTypes.object,
+  templateInProgress: PropTypes.bool,
 };
 
 Pagination.defaultProps = {

package/v2Components/RenderRoute/RenderRoute.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+const RenderRoute = ({ Component: ComponentToRender, ...rest }) => (
+  <Route
+    {...rest}
+    render={props => <ComponentToRender {...props} />}
+  />
+);
+
+export default RenderRoute;

package/v2Components/RenderRoute/index.js

@@ -0,0 +1 @@
+export { default } from './RenderRoute';