Investec Platform Plugins

Appearance

Left nav builder ​

Overview ​

The left nav builder plugin controls the left nav component in the WPaaS platform. The main purpose of this function is to build up the menu item list that is passed to the component. Depending on the client type, the left nav can have different menu items for private-client, business-client and intermediary clients.

shell
npm install --save @investec/plugins-left-nav-builder

Environment ​

The plugin exposes an object that sets the environment and other params required for the left nav to function correctly. These variables are set in different places in the platform, located in the io-core service.

ts
export const leftNavBuilder = {
  activeEnvironment: 'staging',
  currentMenuState: new ReplaySubject<IMenuConfig>(1),
  authResponse: new ReplaySubject<IAuthResponse>(1),
  clientType: new ReplaySubject<string>(1),
  businessBankingLeftNavData: new ReplaySubject<IBusinessBankingLeftNavData>(1),
  clearState: new ReplaySubject<void>(1)
};
leftNavBuilder.currentMenuState.subscribe((res) => menuConfig = res);
leftNavBuilder.authResponse.subscribe((res) => authResponse = res);
leftNavBuilder.clientType.subscribe((res) => clientType = res);
leftNavBuilder.businessBankingLeftNavData.subscribe((res) => businessBankingLeftNavData = res);
leftNavBuilder.clearState.subscribe(() => {
  menuConfig = undefined;
  authResponse = undefined;
  clientType = '';
  businessBankingLeftNavData = {
    roles: [],
    featureModules: []
  };
});

Implementation guide ​

The plugin exposes 1 function that is used to build the left nav menu items in the platform. It is dependent on the environment variables being set before it can execute. The plugin can also check for duplicates and based on the config , can use the platform routing modal to direct them to different places.

ts
export function getLoggedInMenuState(): {menuItems:ILeftNavMenuItem[]} {
  if(clientType === 'business-banking' && leftNavBuilder.activeEnvironment !== 'production') {
    let menuList: ILeftNavMenuItem[] = [];
    
    const menuItems = getMenuMapper();
    
    menuList.push(menuItems[0]);

    const validPermissions = new Set<string>();
    businessBankingLeftNavData.roles.forEach(role => {
      validPermissions.add(role.permission);
    });

    menuItems.forEach((menuItem: ILeftNavMenuItem) => {
      for(const module of businessBankingLeftNavData.featureModules) {
        if(menuItem.label === module.moduleName) {
          if(validPermissions.has(module.fbcc)) {
            menuList.push(menuItem);
            break;
          }
        }
      }
    });

    return { menuItems: removeDuplicatesById(menuList) };
  } else if(clientType === 'private-client') {
    let menuList: ILeftNavMenuItem[] = leftNavBuilder.activeEnvironment === 'staging'
      ? []
      : [{
        id: 144,
        priorityOrder: 1000,
        label: 'Manage',
        icon: 'manage-accounts',
        indicator: '',
        url: '/usrroot-wpaas/more'
      }, {
          id: 145,
          priorityOrder: 1001,
          label: 'Tools',
          icon: 'finance-tools',
          indicator: '',
          url: '/usrroot-wpaas/tools'
        }];

    const menu = menuConfig;
    const authRes = authResponse;

    if (authRes?.ClientProfileFlags) {
      if (authRes.ClientProfileFlags.UKExecutiveClientPlatform) {
        menuList = [];
      }
    }

    function mapMenuItem(item: IMenuItem) {
      getMenuMapper().forEach((res:ILeftNavMenuItem) => {
        if (item.Id === res.id) {
          res.url = item.AbsoluteUrl.includes('http')
            ? item.AbsoluteUrl
            : window.location.origin + item.AbsoluteUrl;
          menuList.push(res)
        }
      });
    }

    if (menu?.mainMenu !== undefined) {
      menu.mainMenu.forEach((res:any) => {
        res.Children.forEach((child:any) => {
          mapMenuItem(child);
        });
      });
      menu.mainMenuWithoutChildren.forEach((res:any) => {
        mapMenuItem(res);
      })
    }

    const duplicates: Array<ILeftNavMenuItem[]> = splitDuplicatesByPropertyValue(menuList, 'label')
    if (duplicates.length > 0) {
      duplicates.forEach(duplicate => {
        if (duplicate[0].routing) {
          duplicate[0].routing.showModal = true;
          duplicate[0].routing.routes[0].url = duplicate[0].url;
          for (let i = 1; i < duplicate.length; i++) {
            duplicate[0].routing.routes.push({
              url: duplicate[i].url,
              imgUrl: duplicate[i].routing!.routes[0].imgUrl,
              label: duplicate[i].routing!.routes[0].label,
            })
            menuList.splice(menuList.findIndex(x => x.id === duplicate[i].id), 1)
          }
        }
      })
    }

    return {menuItems: removeDuplicatesById(menuList)};
  } else {
    return {menuItems: []};
  }
}

Configure client type left nav ​

The following code snippet shows how to configure the left nav items for the different client types. It uses the menu config object that is build by the menu builder plugin. Thus, your menu items must be part of the menu config object.

ts
import { ILeftNavMenu } from '../types/left-nav.interface';

export const privateClientLeftNavConfig:ILeftNavMenu = {
  test:[
    {
      id:2,
      priorityOrder: 1,
      label: 'Overview',
      icon: 'nav-overview',
      indicator: '',
      url:''
    },
    {
      id:1,
      priorityOrder: 1,
      label: 'Overview',
      icon: 'nav-overview',
      indicator: '',
      url:''
    },
    {
      id:15,
      priorityOrder: 2,
      label: 'Transact',
      icon: 'nav-transact',
      indicator: '',
      url:''
    },
    {
      id:94,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'South Africa',
          imgUrl:'https://images.investec.com/online/cape.jpg',
          url:''
        }]
      }
    },
    {
      id:124,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'United Kingdom',
          imgUrl:'https://images.investec.com/online/london-street.jpg',
          url:''
        }]
      }
    },
    {
      id:201,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'Switzerland',
          imgUrl:'https://images.investec.com/online/zurich-switzerland.jpg',
          url:''
        }]
      }
    },
    {
      id:28,
      priorityOrder: 4,
      label: 'Trade',
      icon: 'nav-trade',
      indicator:'',
      url:'',
      routing:{
        showModal: false,
        title:'Trading platform',
        description:'Select the platform you would like to trade on',
        routes:[{
          label:'South Africa trading',
          imgUrl:'https://images.investec.com/online/cape.jpg',
          url:''
        }]
      }
    },
    {
      id:122,
      priorityOrder: 4,
      label: 'Trade',
      icon: 'nav-trade',
      url:'',
      indicator: '',
      routing: {
        showModal: false,
        title:'Trading platform',
        description:'Select the platform you would like to trade on',
        routes:[{
          label:'Mauritius forex trading',
          imgUrl:'https://images.investec.com/online/coast.jpg',
          url:''
        }]
      }
    },
    {
      id:144,
      priorityOrder: 1000,
      label: 'Manage',
      icon: 'manage-accounts',
      indicator: '',
      url:'/usrroot-wpaas/more',
    },
    {
      id:145,
      priorityOrder: 1001,
      label: 'Tools',
      icon: 'finance-tools',
      indicator: '',
      url:'/usrroot-wpaas/tools',
    },
    {
      id:161,
      priorityOrder: 1002,
      label: 'Lifestyle',
      icon: 'travel-and-entertainment-holiday',
      indicator: '',
      url:'/usrroot-wpaas/lifestyle',
    },
    {
      id: 146,
      priorityOrder: 1002,
      label: 'For you',
      indicator: 'profile.Nav_For_you_Indicator',
      icon: 'profile-hex-for-you',
      url: ''
    },
  ],
  staging:[
    {
      id:2,
      priorityOrder: 1,
      label: 'Overview',
      icon: 'nav-overview',
      indicator: '',
      url:''
    },
    {
      id:1,
      priorityOrder: 1,
      label: 'Overview',
      icon: 'nav-overview',
      indicator: '',
      url:''
    },
    {
      id:15,
      priorityOrder: 2,
      label: 'Transact',
      icon: 'nav-transact',
      indicator: '',
      url:''
    },
    {
      id:94,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'South Africa',
          imgUrl:'https://images.investec.com/online/cape.jpg',
          url:''
        }]
      }
    },
    {
      id:124,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'United Kingdom',
          imgUrl:'https://images.investec.com/online/london-street.jpg',
          url:''
        }]
      }
    },
    {
      id:201,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'Switzerland',
          imgUrl:'https://images.investec.com/online/zurich-switzerland.jpg',
          url:''
        }]
      }
    },
    {
      id:28,
      priorityOrder: 4,
      label: 'Trade',
      icon: 'nav-trade',
      indicator:'',
      url:'',
      routing:{
        showModal: false,
        title:'Trading platform',
        description:'Select the platform you would like to trade on',
        routes:[{
          label:'South Africa trading',
          imgUrl:'https://images.investec.com/online/cape.jpg',
          url:''
        }]
      }
    },
    {
      id:122,
      priorityOrder: 4,
      label: 'Trade',
      icon: 'nav-trade',
      url:'',
      indicator: '',
      routing: {
        showModal: false,
        title:'Trading platform',
        description:'Select the platform you would like to trade on',
        routes:[{
          label:'Mauritius forex trading',
          imgUrl:'https://images.investec.com/online/coast.jpg',
          url:''
        }]
      }
    },
    {
      id:144,
      priorityOrder: 1000,
      label: 'Manage',
      icon: 'manage-accounts',
      indicator: '',
      url:'/usrroot-wpaas/more',
    },
    {
      id:145,
      priorityOrder: 1001,
      label: 'Tools',
      icon: 'finance-tools',
      indicator: '',
      url:'/usrroot-wpaas/tools',
    },
    {
      id:161,
      priorityOrder: 1002,
      label: 'Lifestyle',
      icon: 'travel-and-entertainment-holiday',
      indicator: '',
      url:'/usrroot-wpaas/lifestyle',
    },
    {
      id: 146,
      priorityOrder: 1002,
      label: 'For you',
      indicator: 'profile.Nav_For_you_Indicator',
      icon: 'profile-hex-for-you',
      url: ''
    },
  ],
  beta:[
    {
      id:2,
      priorityOrder: 1,
      label: 'Overview',
      icon: 'nav-overview',
      indicator: '',
      url:''
    },
    {
      id:1,
      priorityOrder: 1,
      label: 'Overview',
      icon: 'nav-overview',
      indicator: '',
      url:''
    },
    {
      id:15,
      priorityOrder: 2,
      label: 'Transact',
      icon: 'nav-transact',
      indicator: '',
      url:''
    },
    {
      id:94,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'South Africa',
          imgUrl:'https://images.investec.com/online/cape.jpg',
          url:''
        }]
      }
    },
    {
      id:124,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'United Kingdom',
          imgUrl:'https://images.investec.com/online/london-street.jpg',
          url:''
        }]
      }
    },
    {
      id:201,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'Switzerland',
          imgUrl:'https://images.investec.com/online/zurich-switzerland.jpg',
          url:''
        }]
      }
    },
    {
      id:28,
      priorityOrder: 4,
      label: 'Trade',
      icon: 'nav-trade',
      indicator:'',
      url:'',
      routing:{
        showModal: false,
        title:'Trading platform',
        description:'Select the platform you would like to trade on',
        routes:[{
          label:'South Africa trading',
          imgUrl:'https://images.investec.com/online/cape.jpg',
          url:''
        }]
      }
    },
    {
      id:122,
      priorityOrder: 4,
      label: 'Trade',
      icon: 'nav-trade',
      url:'',
      indicator: '',
      routing: {
        showModal: false,
        title:'Trading platform',
        description:'Select the platform you would like to trade on',
        routes:[{
          label:'Mauritius forex trading',
          imgUrl:'https://images.investec.com/online/coast.jpg',
          url:''
        }]
      }
    },
    {
      id:144,
      priorityOrder: 1000,
      label: 'Manage',
      icon: 'manage-accounts',
      indicator: '',
      url:'/usrroot-wpaas/more',
    },
    {
      id:145,
      priorityOrder: 1001,
      label: 'Tools',
      icon: 'finance-tools',
      indicator: '',
      url:'/usrroot-wpaas/tools',
    },
    {
      id:161,
      priorityOrder: 1002,
      label: 'Lifestyle',
      icon: 'travel-and-entertainment-holiday',
      indicator: '',
      url:'/usrroot-wpaas/lifestyle',
    },
    {
      id: 146,
      priorityOrder: 1002,
      label: 'For you',
      indicator: 'profile.Nav_For_you_Indicator',
      icon: 'profile-hex-for-you',
      url: ''
    },
  ],
  production:[
    {
      id:2,
      priorityOrder: 1,
      label: 'Overview',
      icon: 'nav-overview',
      indicator: '',
      url:''
    },
    {
      id:1,
      priorityOrder: 1,
      label: 'Overview',
      icon: 'nav-overview',
      indicator: '',
      url:''
    },
    {
      id:15,
      priorityOrder: 2,
      label: 'Transact',
      icon: 'nav-transact',
      indicator: '',
      url:''
    },
    {
      id:94,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'South Africa',
          imgUrl:'https://images.investec.com/online/cape.jpg',
          url:''
        }]
      }
    },
    {
      id:124,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'United Kingdom',
          imgUrl:'https://images.investec.com/online/london-street.jpg',
          url:''
        }]
      }
    },
    {
      id:201,
      priorityOrder: 3,
      label: 'Portfolio',
      icon: 'nav-invest',
      indicator: '',
      url:'',
      routing:{
        showModal: false,
        title:'Manage your investment portfolios',
        description:'Select a portfolio to get started',
        routes:[{
          label:'Switzerland',
          imgUrl:'https://images.investec.com/online/zurich-switzerland.jpg',
          url:''
        }]
      }
    },
    {
      id:28,
      priorityOrder: 4,
      label: 'Trade',
      icon: 'nav-trade',
      indicator:'',
      url:'',
      routing:{
        showModal: false,
        title:'Trading platform',
        description:'Select the platform you would like to trade on',
        routes:[{
          label:'South Africa trading',
          imgUrl:'https://images.investec.com/online/cape.jpg',
          url:''
        }]
      }
    },
    {
      id:122,
      priorityOrder: 4,
      label: 'Trade',
      icon: 'nav-trade',
      url:'',
      indicator: '',
      routing: {
        showModal: false,
        title:'Trading platform',
        description:'Select the platform you would like to trade on',
        routes:[{
          label:'Mauritius forex trading',
          imgUrl:'https://images.investec.com/online/coast.jpg',
          url:''
        }]
      }
    },
    {
      id:144,
      priorityOrder: 1000,
      label: 'Manage',
      icon: 'manage-accounts',
      indicator: '',
      url:'/usrroot-wpaas/more',
    },
    {
      id:145,
      priorityOrder: 1001,
      label: 'Tools',
      icon: 'finance-tools',
      indicator: '',
      url:'/usrroot-wpaas/tools',
    },
    {
      id:161,
      priorityOrder: 1002,
      label: 'Lifestyle',
      icon: 'travel-and-entertainment-holiday',
      indicator: '',
      url:'/usrroot-wpaas/lifestyle',
    },
    {
      id: 146,
      priorityOrder: 1002,
      label: 'For you',
      indicator: 'profile.Nav_For_you_Indicator',
      icon: 'profile-hex-for-you',
      url: ''
    },
  ]
}