Investec Platform Plugins

Appearance

Left nav builder ​

@investec/plugins-left-nav-builder turns menu and client context into the shell's left-navigation list.

Package ​

Warning: This package must be installed only by the platform team into the Investec Online shell application. Never add it as a direct dependency of a consumer/feature application. Consumers use this plugin's behaviour through the Invsy SDK, or by contributing a bounded, governed change to this plugin's own source (see Plugin change governance).

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

The platform owns installation of released plugin versions. A consuming team normally contributes shared navigation logic in this repository and then asks the platform team to adopt the published version.

What it owns ​

  • left-nav config for private-client, business-banking, and ix
  • environment-aware menu templates
  • state subjects for menu config, auth context, client type, and derived nav lists
  • duplicate handling for menu items that should open a routing modal

Public contract ​

The main package-root exports include:

  • leftNavBuilder
  • getLoggedInMenuState()
  • getLoggedInMenuStateByClientType()
  • buildMenuSpecificLeftNavMenuList()
  • left-nav types such as ILeftNavMenuItem

Integration pattern ​

The standard flow is:

  1. set leftNavBuilder.activeEnvironment
  2. push authResponse
  3. push clientType
  4. push the menu state from Menu builder
  5. call getLoggedInMenuState() or read the cached list through getLoggedInMenuStateByClientType()
ts
import { getLoggedInMenuState, leftNavBuilder } from '@investec/plugins-left-nav-builder';

leftNavBuilder.activeEnvironment = 'staging';
leftNavBuilder.authResponse.next(authResponse);
leftNavBuilder.clientType.next('private-client');
leftNavBuilder.currentMenuState.next(menuConfig);

const leftNavState = getLoggedInMenuState();

Behaviour by client type ​

Private client ​

Maps menu items from the aggregated menu config. Duplicate labels such as "Portfolio" or "Trade" can be merged into a routing modal when the configuration includes routing metadata.

Business banking ​

Matches configured nav labels against businessBankingLeftNavData.featureModules.

IX ​

Matches configured nav IDs against ixLeftNavData.menuList.

Extension hooks ​

The state object also exposes:

  • addGenericMenuList
  • addMenuSpecifcList
  • businessBankingLeftNavData
  • ixLeftNavData
  • leftNavMenuList
  • clearState

Use these when the shell needs to inject additional lists or cache client-type specific left-nav output.

How consumers extend it ​

This package is intentionally extended through its state object.

Common consumer patterns are:

  • inject business-banking or IX lists through the dedicated subjects;
  • use addGenericMenuList to layer additional client-type menu items into the cached left-nav state;
  • subscribe to the built output and persist an app-specific copy with active state or UI metadata.

Change the package when the shared base templates, duplicate-routing behaviour, or client-type model itself needs to change.

ts
import { getLoggedInMenuStateByClientType, leftNavBuilder, type ILeftNavMenuListObject } from '@investec/plugins-left-nav-builder';

const extraPrivateClientLinks: ILeftNavMenuListObject = {
  clientType: 'private-client',
  menuList: [
    {
      id: 9001,
      priorityOrder: 2000,
      label: 'My feature tools',
      icon: 'finance-tools',
      url: '/usrroot-wpaas/my-feature-tools',
      active: false,
    },
  ],
};

leftNavBuilder.addGenericMenuList.next(extraPrivateClientLinks);

const cachedMenuItems = getLoggedInMenuStateByClientType();

Extend the shared plugin ​

Use the configuration file for the affected client type:

  • configs/private-client.ts;
  • configs/business-banking.ts;
  • configs/intermediaries.ts;
  • configs/ix.ts.

Add or update builder logic in left-nav-builder.ts only when the existing configuration and subjects cannot represent the shared requirement. Keep IDs, priority values, labels, route ownership, duplicate handling, and environment variants consistent.

A bounded navigation configuration addition can be implemented directly after the route and icon are approved. Contact the Web Platform team before adding a new client type, changing duplicate-routing behaviour, changing state lifecycle, or altering platform-wide navigation ownership.

Consumer notes ​

  • The plugin depends on the consumer setting clientType correctly before building.
  • The private-client flow expects a menu config that already came from Menu builder.
  • clearState.next() resets the cached menu config, auth state, client type, and built lists.