@capillarytech/creatives-library 7.17.113 → 7.17.114-alpha.0

package/containers/App/constants.js

@@ -16,6 +16,7 @@ export const BADGES_UI_ENABLED = 'BADGES_UI_ENABLED';
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 export const ENABLE_WECHAT = 'ENABLE_WECHAT';
 export const ENABLE_CUSTOMER_BARCODE_TAG = "ENABLE_CUSTOMER_BARCODE_TAG";
+export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = "EMAIL_UNSUBSCRIBE_TAG_MANDATORY";
 
 export const CARD_RELATED_TAGS = [
   'card_series',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.113",
+  "version": "7.17.114-alpha.0",
   "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,17 @@
     color: #333333;
 }
 
+.contet-width-collapse {
+  margin-left: 17.438rem;
+  .component-wrapper {
+    max-width: 70.063rem;
+  }
+}
+
+.content-width-expanded {
+  margin-left: 8.375rem;
+}
+
 .breadcrumbs{
     color: $blue-cloud-burst-54;
     margin: 16px 10px 12px 10px;
@@ -166,3 +177,9 @@
 html {
   font-size: 16px !important;
 }
+
+.cap-collapsible-new-nav, .l1-enabled-popover-container {
+  .l2-quick-links-icon {
+    margin-top: 0.5rem;
+  }
+}

package/utils/common.js

@@ -18,6 +18,7 @@ import {
   ENABLE_CUSTOMER_BARCODE_TAG,
   BADGES_UI_ENABLED,
   BADGES_ENROLL,
+  EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
   BADGES_ISSUE,
   ENABLE_WECHAT,
 } from '../containers/App/constants';
@@ -112,6 +113,10 @@ export const hasCustomerBarcodeFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_CUSTOMER_BARCODE_TAG,
 );
 
+export const hasRemoveEmailUnsubscribeTag = Auth.hasFeatureAccess.bind(
+  null,
+  EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
+);
 //filtering tags based on scope
 export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
     (tag) => !tagsToFilter?.includes(tag?.definition?.value)

package/v2Components/FormBuilder/index.js

@@ -55,6 +55,7 @@ import { AI_SUGGESTION_API_URL, CONTENT_RECOMMENDATION_BOT } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF} from '../../containers/App/constants';
+import { hasRemoveEmailUnsubscribeTag } from '../../utils/common';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -989,6 +990,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 if (tagValidationResponse.isBraceError){
                   errorString += this.props.intl.formatMessage(globalMessages.unbalanacedCurlyBraces);
                 }
+                if (tagValidationResponse.isContentEmpty) {
+                  errorString += this.props.intl.formatMessage(messages.emailBodyEmptyError);
+                }
               }
             }
           }
@@ -1127,6 +1131,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     response.missingTags = [];
     response.unsupportedTags = [];
     response.isBraceError = false;
+    response.isContentEmpty = false;
+    const contentForValidation = isEmail ? convert(content) : content ;
     if(tags && tags.length) {
       _.forEach(tags, (tag) => {
         _.forEach(tag.definition.supportedModules, (module) => {
@@ -1144,6 +1150,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       let matchImg = regexImgSrc.exec(content);
       const regexCustomerBarcode = /{{customer_barcode}}(?![^<]*>)/g;
       let matchCustomerBarcode = regexCustomerBarcode.exec(content);
+      // \S matches anything other than a space, a tab, a newline, or a carriage return.
+      const validString= /\S/.test(contentForValidation);
+      if (hasRemoveEmailUnsubscribeTag() && isEmail) {
+        const missingTagIndex = response.missingTags.indexOf("unsubscribe");
+        if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
+          response.missingTags.splice(missingTagIndex, 1);
+          if (validString) {
+            response.valid = true;
+          } else {
+            response.isContentEmpty = true;
+          }
+        }
+      }
       while (match !== null ) {
         const tagValue = match[0].substring(this.indexOfEnd(match[0], '{{'), match[0].indexOf('}}'));
         match = regex.exec(content);
@@ -1177,7 +1196,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       }
     }
-    const contentForValidation = isEmail ? convert(content) : content ;
     if(!validateIfTagClosed(contentForValidation)){
       response.isBraceError = true;
       response.valid = false;

package/v2Components/FormBuilder/messages.js

@@ -86,4 +86,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.imageReUpload',
     defaultMessage: 'Re upload',
   },
+  emailBodyEmptyError: {
+    id: 'creatives.componentsV2.FormBuilder.emailBodyEmptyError',
+    defaultMessage: 'Email body cannot be empty',
+  },
 });

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,11 @@
+export const CapLeftNavigationCss = {
+  'padding-right': '1.28rem',
+  "width": '71.25rem',
+  'margin-left': '14.9rem',
+};
+
+export const CapLeftNavigatioOpenCss = {
+  'padding-left': '0',
+  "width": '70.063rem',
+  'margin-left': '18.5rem',
+};

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,11 @@ 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')};
+`;
 
 export class Cap extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
@@ -68,6 +74,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 +465,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 +476,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 +514,15 @@ 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">
+                <div className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}>
                   {React.Children.toArray(this.props.children)}
                 </div>
-              </div>
+              </MainWrapper>
             </div>
             {(toastMessages && toastMessages.length > 0) &&
           toastMessages.map((message) => {

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -11,7 +11,6 @@ export default css`
   .component-wrapper {
     ${(props) => props.isFullMode ? `
       max-width: 1140px;
-      margin: 0 auto;
       width: 100%;
       padding: ${CAP_SPACE_24} 0;
       .ant-tabs-content{