Experience manager

Overview

The experience manager plugin is the servie the WPaaS platform uses to decide where a client should go pre- and post-login based on the clients' context.

npm install --save @investec/plugins-experience-manager

Environments

Configure the plugin environments. The plugin will use the correct environment based on which build the platform is using. Ensure that you cater for all environments.

export const environment = {
  production:{
    activeEnv: 'prod',
    destinationUrls:{
      ixDestination: 'https://ix.secure.investec.com',
      ifaUkDestination: '/io-uk-wpaas/wealth-uk/ifa',
      sociusDestination: 'https://ifastg.secure.investec.com/investec/en-gb/site/index'
    }
  },
  beta: {
    activeEnv: 'beta',
    destinationUrls: {
      ixDestination: 'https://ix.secure.investec.com',
      ifaUkDestination: '/io-uk-wpaas/wealth-uk/ifa',
      sociusDestination: 'https://ifastg.secure.investec.com/investec/en-gb/site/index'
    }
  },
  staging:{
    activeEnv: 'staging',
    destinationUrls: {
      ixDestination: 'https://ix-uat.secure.investec.com/',
      ifaUkDestination: '/io-uk-wpaas/wealth-uk/ifa',
      sociusDestination: 'https://ifastg.secure.investec.com/investec/en-gb/site/index'
    }
  },
  test:{
    activeEnv: 'test',
    destinationUrls: {
      ixDestination: 'https://ix-uat.secure.investec.com/',
      ifaUkDestination: '/io-uk-wpaas/wealth-uk/ifa',
      sociusDestination: 'https://ifastg.secure.investec.com/investec/en-gb/site/index'
    }
  }
}

Implementation Guide

The plugin exports 3 main functions and an object to set the environment. The following code shows how to export an object that sets the environment.

export const experienceManager = { activeEnvironment : 'staging'}

Pre-login function

The pre-login function is used to determine where the client should go before they log in. The function returns a URL string.

export function determineJourneyPreLogin(): string {
  const queryString = new URLSearchParams(window.location.search).get('ZGVzdGluYXRpb24');
  if (queryString !== null) {
    return `/usrroot-wpaas/login/form?ZGVzdGluYXRpb24=${queryString}`;
  } else {
    return `/usrroot-wpaas/login/form`;
  }
}

Post-login function

The post-login function is used to determine where the client should go after they log in. The function returns a URL string.

export function determineJourneyAfterLogin(authRes:IAuthResponse): Promise<string> {
  return new Promise((resolve) => {
      getDestinationBasedOnCurrentContext(authRes).then((destination) => {
        if (destination !== '/usrroot-wpaas/types') {
          resolve(filterSecondaryDestinations(authRes, destination));
        } else {
          resolve(destination);
        }
      });
  });
}

The function will check if the client needs to be directed to the decision maker page usrroot-wpaas/types AKA "tinder page". Additionally, it will check if the user falls into specific params in the secondary destinations filter function. This is where feature teams will most likely make updates.

export function filterSecondaryDestinations(
  context: IAuthResponse,
  currentDestination: string
) {
  const destinationURLS = environment[experienceManager.activeEnvironment as keyof typeof environment].destinationUrls;

  for (let i = 0; i < context.ProfileList.length; i++) {
    if ((context.ProfileList[i].KeyName.includes('TMOB') && context.ProfileList[i].KeyName.includes('ADMIN') && context.PrivateBankMU)) {
      return '/usrroot-wpaas/types';
    }
    if (context.ProfileList[i].KeyName.includes('corp_') || context.ProfileList[i].KeyName.includes('CorpHub')) {
      return '/usrroot-wpaas/types';
    }
  }

  if (context.IsMasqueradedAsClient && context.CanMasquerade) {
    return decisionFlagsDestinations.PersonalBanking;
  } else if (!context.IsMasqueradedAsClient && context.CanMasquerade) {
    return '/usrroot-wpaas/types';
  } else if (context.CorporateAndInvestmentBankingUK) {
    let destinations = [destinationURLS.ixDestination];
    if (context.ProfileList.length > 0) {
      const tempDestinations = context.ProfileList.filter(profile => profile.KeyName === 'UK Investment Banking Portal' || profile.KeyName === 'AFG' || profile.KeyName === 'IXCORP')
      if(tempDestinations.length > 0){
        destinations = []
        tempDestinations.forEach(profile => {
          destinations.push(profile.ActiveUrl);
        })
      }
    }

    if (context.PrivateBank) {
      destinations.push('/usrroot-wpaas/types')
    }

    if (destinations.length > 1) {
      return '/usrroot-wpaas/types'
    } else {
      return destinations[0]
    }
  } else if (
    context.Client.Types.DefaultType === 'PrivateClient' &&
    context.CibUkIntermediaryBanking
  ) {
    return destinationURLS.sociusDestination;
  } else if (
    context.Client.Types.DefaultType === 'Intermediary' &&
    context.WealthAndInvestmentUK
  ) {
    return destinationURLS.ifaUkDestination;
  } else if (
    context.Client.Types.DefaultType === 'Intermediary' &&
    context.WealthAndInvestmentGU
  ) {
    return '/io-uk-wpaas/wealth-ci/ifa';
  } else if (
    context.Client.Types.PrivateClient === false &&
    context.Client.Types.Corporate === false &&
    context.Client.Types.Youth === false &&
    context.Client.Types.Intermediary === false &&
    context.Life === true
  ) {
    return '/life-sa-wpaas/';
  } else if (
    context.ProfileList.find(x => x.KeyName.includes('TMOB_CCM_SU'))
  ) {
    return '/mu-su-wpaas/';
  } else if(
    context.ProfileList.find(x => x.KeyName.includes('MAU_Onboarding'))
  ){
    return '/mu-onboarding-wpaas/'
  } else if (
    context.PrivateBankMU && !(context.PrivateBankZA || context.PrivateBankUK || context.PrivateBankCI)
  ) {
    return '/io-wpaas/accounts-overview';
  } else {
    return currentDestination;
  }
}

Decode destination function

The decode destination function is used to decode the destination URL. The function returns a URL string. The following code is used to decode the destination URL.

export function decodeDestination(destination: string) {
  let querystring = new URLSearchParams(destination.includes('ZGVzdGluYXRpb24') ? destination.substring(destination.indexOf('?') + 1) : window.location.search).get('ZGVzdGluYXRpb24');
  if (querystring !== '' && querystring !== null) {
    const decodedDestination = atob(querystring);
    if (dotcomHostNames.includes(decodedDestination.substring(0, decodedDestination.indexOf('/')))) {
      destination = '/aem-content/' + decodedDestination
    } else {
      destination = decodedDestination
    }
  }
  return destination
}