@capillarytech/creatives-library 7.17.113 → 7.17.114

package/package.json

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

package/reducers.js

@@ -21,6 +21,7 @@ import emailReducer from 'containers/Email/reducer';
 import ebillReducer from 'containers/Ebill/reducer';
 import ftpReducer from 'v2Containers/FTP/reducer';
 import galleryReducer from './v2Containers/Assets/Gallery/reducer';
+import CapCollapsibleLeftNavigationReducer from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer';
 /*
  * routeReducer
  *
@@ -68,6 +69,7 @@ export default function createReducer(asyncReducers) {
     facebookPreview: CapFacebookPreviewReducer,
     FTP: ftpReducer,
     gallery: galleryReducer,
+    navigationConfig: CapCollapsibleLeftNavigationReducer,
     ...asyncReducers,
   });
 }

package/routes.js

@@ -13,7 +13,6 @@ import * as emailSagas from 'containers/Email/sagas';
 import * as templateSagas from 'containers/Templates/sagas';
 import * as lineSagas from 'containers/Line/Create/sagas';
 import * as languageSaga from './v2Containers/LanguageProvider/sagas';
-
 import pathConfig from './config/path';
 
 import {updateCharCount} from './utils/smsCharCountV2';
@@ -38,6 +37,7 @@ export default function createRoutes(store) {
   const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars
   injectSagas(rootSaga.default);
   injectSagas(languageSaga.default);
+
   return [
     {
       path: '/',
@@ -669,6 +669,8 @@ export default function createRoutes(store) {
           import('v2Containers/InApp/reducer'),
           import('v2Containers/Rcs/sagas'),
           import('v2Containers/Rcs/reducer'),
+          import('@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/saga'),
+          import('@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer'),
         ]);
 
         const renderRoute = loadModule(cb);
@@ -696,6 +698,7 @@ export default function createRoutes(store) {
           zaloSagas, zaloReducer,
           inAppSagas, inAppReducer,
           rcsSagas, rcsReducer,
+          navigationSaga, navigationReducer,
         ]) => {
           injectReducer('templates', reducer.default);
           injectReducer('cap', capReducer.default);
@@ -719,6 +722,7 @@ export default function createRoutes(store) {
           injectReducer('zalo', zaloReducer.default);
           injectReducer('inapp', inAppReducer.default);
           injectReducer('rcs', rcsReducer.default);
+          injectReducer('navigationBar', navigationReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
           injectSagas(capSagas.default);
@@ -741,6 +745,7 @@ export default function createRoutes(store) {
           injectSagas(zaloSagas.default);
           injectSagas(inAppSagas.default);
           injectSagas(rcsSagas.default);
+          injectSagas(navigationSaga.default);
           renderRoute(component);
         });
         importModules.catch(errorLoading);

package/services/api.js

@@ -525,3 +525,8 @@ export const getSupportVideosConfig = () => {
   const url = `${ARYA_ENDPOINT}/support_videos/?product=Creatives`;
   return request(url, getAPICallObject('GET'));
 };
+
+export const getNavigationConfigApi = async () => {
+  const url = `${ARYA_ENDPOINT}/navigations`;
+  return await request(url, getAPICallObject('GET'));
+};

package/services/tests/api.test.js

@@ -5,6 +5,7 @@ import {
   createWhatsappTemplate,
   getMetaTags,
   getSupportVideosConfig,
+  getNavigationConfigApi,
 } from '../api';
 import { mockData } from './mockData';
 const sampleFile = require('../../assets/line.png');
@@ -77,3 +78,8 @@ describe('getSupportVideosConfig -- Test with valid responses', () => {
   it('Should return correct response', () =>
     expect(getSupportVideosConfig()).toEqual(Promise.resolve()));
 });
+
+describe('getNavigationConfigApi -- Test with valid responses', () => {
+  it('Should return correct response', () =>
+    expect(getNavigationConfigApi()).toEqual(Promise.resolve()));
+});

package/styles/containers/layout/_layoutPage.scss

@@ -83,6 +83,14 @@
     color: #333333;
 }
 
+.contet-width-collapse {
+  margin-left: 17rem;
+}
+
+.content-width-expanded {
+  margin-left: 4.475rem;
+}
+
 .breadcrumbs{
     color: $blue-cloud-burst-54;
     margin: 16px 10px 12px 10px;
@@ -166,3 +174,9 @@
 html {
   font-size: 16px !important;
 }
+
+.cap-collapsible-new-nav, .l1-enabled-popover-container {
+  .l2-quick-links-icon {
+    margin-top: 0.5rem;
+  }
+}

package/v2Components/NavigationBar/constants.js

@@ -0,0 +1 @@
+export const EMBEDDED = 'embedded';

package/v2Components/NavigationBar/index.js

@@ -7,26 +7,22 @@
 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 messages from './messages';
 import { LOYALTY } from '../../v2Containers/App/constants';
 import {
   HELP_URL,
   LOYALTY_HELP_URL,
   ENABLE_AI_SUGGESTIONS,
+  ENABLE_NEW_LEFT_NAVIGATION,
+  DEFAULT_MODULE,
 } 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;
@@ -104,56 +100,6 @@ export class NavigationBar extends React.Component {
     }
   };
 
-  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;
     const ICONS = [
@@ -183,10 +129,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 +136,60 @@ 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;
-      }
-    });
-  };
-
   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 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 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={intl.formatMessage(messages.selectedProductDefault)}
+        skipStateForStorage
+        selectOrganization={intl.formatMessage(messages.selectOrganization)}
+        isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
+        history={history}
+        publicPath={configPath.publicPath}
+        getNavigationConfigApi={Api.getNavigationConfigApi}
+        showDocumentationBot={showDocumentationBot}
+        setLeftNavbarExpandedProp={handleLeftNavBarExpanded}
+        headerOverideCss={headerOverideCss}
+        >
+        <div data-testid="cap-wrapper">
+          <CapWrapper isEmbedded={type === EMBEDDED}>
+            <ComponentWrapper>
+              {React.Children.toArray(this.props.children)}
+            </ComponentWrapper>
+          </CapWrapper>
+        </div>
+      </CapNavigation>
     );
   }
 }
@@ -255,10 +202,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,8 @@ 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',
+  },
 });

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

@@ -37,7 +37,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 +45,7 @@ describe('NavigationBar', () => {
     const updatedProps = cloneDeep(props);
     delete updatedProps.userData.currentOrgDetails.accessibleFeatures;
     renderComponent(updatedProps);
-    const ariaBotIcon = screen.queryByLabelText('aria bot icon');
+    const ariaBotIcon = screen.queryByLabelText('open-aira');
     expect(ariaBotIcon).toBeNull();
   });
 });

package/v2Containers/Cap/constants.js

@@ -40,6 +40,7 @@ export const ORG_CHANGED = 'ORG_CHANGED';
 
 export const ENABLE_AI_SUGGESTIONS = 'ENABLE_AI_SUGGESTIONS';
 export const ERROR_IN_FETCHING_TAGS = 'Error in fetching tags';
+export const ENABLE_NEW_LEFT_NAVIGATION = 'ENABLE_NEW_LEFT_NAVIGATION';
 
 export const GET_SUPPORT_VIDEOS_CONFIG_REQUEST =
   'cap/GET_SUPPORT_VIDEOS_CONFIG_REQUEST';
@@ -54,3 +55,4 @@ export const FAILURE = 'FAILURE';
 
 export const ENABLE_PRODUCT_SUPPORT_VIDEOS = 'ENABLE_PRODUCT_SUPPORT_VIDEOS';
 export const DEFAULT = 'default';
+export const DEFAULT_MODULE = 'creatives';

package/v2Containers/Cap/index.js

@@ -31,6 +31,7 @@ import {
   REQUEST,
   DEFAULT,
   ENABLE_PRODUCT_SUPPORT_VIDEOS,
+  ENABLE_NEW_LEFT_NAVIGATION,
 } from './constants';
 import './_cap.scss';
 const gtm = window.dataLayer || [];
@@ -55,6 +56,17 @@ const CapWrapper = styled.div`
 `;
 GA.initialize({ accessKey: GTM_TRACKING_ID, trackUIError: true, trackLoadPerformance: 'creatives' });
 
+const MainWrapper = styled.div`
+  position: relative;
+  min-height: calc(100vh - 5.29rem);
+  top: ${(props) => (props.isLatestLeftNavigationEnabled ? '1.72rem' : '5.29rem')};
+`;
+
+const ContentWrapper = styled.div`
+  && {
+    margin-left: ${(props) => (props.isLatestLeftNavigationEnabled ? (props.leftNavbarExpanded ? '17rem' : '4.475rem') : 0)};
+  }
+`;
 
 export class Cap extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
@@ -68,6 +80,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       showRefreshModal: false,
       showOrgChangeModal: false,
       localStorageOrgInfo: { oldValue: null, newValue: null },
+      leftNavbarExpanded: false,
     };
     this.changeOrg = this.changeOrg.bind(this);
     this.logout = this.logout.bind(this);
@@ -458,6 +471,10 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     return wrapperComponent;
   }
 
+  handleLeftNavBarExpanded = (leftNavbarExpandedProp) => {
+    this.setState({leftNavbarExpanded: leftNavbarExpandedProp})
+  }
+
   render() {
     const { Global, location } = this.props;
     const { topbarMenuData, isLoggedIn, currentOrgDetails = {}, getUserDataStatus, getUserDataCode } = Global;
@@ -465,7 +482,9 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
     const { isCreativesAccessible, showOrgChangeModal, showRefreshModal } = this.state;
-
+    const isLatestLeftNavigationEnabled = currentOrgDetails?.accessibleFeatures?.includes(
+      ENABLE_NEW_LEFT_NAVIGATION,
+    );
     return (
       <CapWrapper>
         { this.props.loader.localeLoading || this.props.Global.fetching_userdata ?
@@ -501,13 +520,19 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                   topbarMenuData={topbarMenuDataOptions}
                   location={location}
                   campaignOrgV2Status={currentOrgDetails.org_campaign_v2_status}
+                  handleLeftNavBarExpanded={this.handleLeftNavBarExpanded}
+                  leftNavbarExpandedProp={this.state.leftNavbarExpanded}
                 />) : ''}
-              <div className="main" style={{minHeight: 'calc(100vh - 74px', position: 'relative', top: '74px'}}>
+              <MainWrapper isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled} className="main">
 
-                <div className="main-content">
+                <ContentWrapper
+                  className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
+                  isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
+                  leftNavbarExpanded={this.state.leftNavbarExpanded}
+                >
                   {React.Children.toArray(this.props.children)}
-                </div>
-              </div>
+                </ContentWrapper>
+              </MainWrapper>
             </div>
             {(toastMessages && toastMessages.length > 0) &&
           toastMessages.map((message) => {