From 3b0cd7c9e76f55ff24b1c6fe464ef51dc6d8c0f7 Mon Sep 17 00:00:00 2001 From: Stephen Daly Date: Wed, 13 Jan 2021 18:54:03 +0000 Subject: [PATCH] PP-7583 Fix nav builder Fix the nav builder so that highlighting the current page in both the top navigation bar and the side settings navigation is highlighted: - when the URL contains the `/account/ACCOUNT_EXTERNAL_ID/` prefix. - for pages it didn't previously work for because they weren't included in the list of paths to match on. --- app/utils/display-converter.js | 13 +++++----- app/utils/nav-builder.js | 46 +++++++++++++++++++++------------- 2 files changed, 34 insertions(+), 25 deletions(-) diff --git a/app/utils/display-converter.js b/app/utils/display-converter.js index 5d39d5a181..9700cb1e4b 100644 --- a/app/utils/display-converter.js +++ b/app/utils/display-converter.js @@ -83,10 +83,8 @@ const getAccount = account => { module.exports = function (req, data, template) { const convertedData = _.clone(data) - const user = req.user - const account = req.account - const originalUrl = req.originalUrl || '' - const permissions = getPermissions(user, req.service) + const { user, account, service, url: relativeUrl } = req + const permissions = getPermissions(user, service) const paymentMethod = _.get(account, 'paymentMethod', 'card') convertedData.paymentMethod = paymentMethod convertedData.permissions = permissions @@ -99,10 +97,11 @@ module.exports = function (req, data, template) { convertedData.isSandbox = _.get(convertedData, 'currentGatewayAccount.payment_provider') === 'sandbox' convertedData.isDigitalWalletSupported = _.get(convertedData, 'currentGatewayAccount.payment_provider') === 'worldpay' const paymentProvider = _.get(convertedData, 'currentGatewayAccount.payment_provider') - convertedData.currentService = _.get(req, 'service') + convertedData.currentService = service + const currentPath = (relativeUrl && url.parse(relativeUrl).pathname.replace(/([a-z])\/$/g, '$1')) || '' // remove query params and trailing slash if (permissions) { - convertedData.serviceNavigationItems = serviceNavigationItems(url.parse(originalUrl).pathname, permissions, paymentMethod) - convertedData.adminNavigationItems = adminNavigationItems(originalUrl, permissions, paymentMethod, paymentProvider, account) + convertedData.serviceNavigationItems = serviceNavigationItems(currentPath, permissions, paymentMethod) + convertedData.adminNavigationItems = adminNavigationItems(currentPath, permissions, paymentMethod, paymentProvider, account) } convertedData._features = {} if (req.user && req.user.features) { diff --git a/app/utils/nav-builder.js b/app/utils/nav-builder.js index 19f1f16d2e..b402910b61 100644 --- a/app/utils/nav-builder.js +++ b/app/utils/nav-builder.js @@ -6,13 +6,28 @@ const formatAccountPathsFor = require('./format-account-paths-for') const pathLookup = require('./path-lookup') const formatPSPname = require('./format-PSP-name') -const serviceNavigationItems = (originalUrl, permissions, type) => { +const mainSettingsPaths = [ + paths.settings, + paths.digitalWallet, + paths.toggle3ds, + paths.account.toggleBillingAddress, + paths.emailNotifications, + paths.toggleMotoMaskCardNumberAndSecurityCode +] + +const yourPspPaths = [ + paths.yourPsp, + paths.credentials, + paths.notificationCredentials +] + +const serviceNavigationItems = (currentPath, permissions, type) => { const navigationItems = [] navigationItems.push({ id: 'navigation-menu-home', name: 'Dashboard', url: paths.dashboard.index, - current: originalUrl === paths.dashboard.index, + current: currentPath === paths.dashboard.index, permissions: true }) if (type === 'card') { @@ -20,14 +35,14 @@ const serviceNavigationItems = (originalUrl, permissions, type) => { id: 'navigation-menu-transactions', name: 'Transactions', url: paths.transactions.index, - current: pathLookup(originalUrl, paths.transactions.index), + current: pathLookup(currentPath, paths.transactions.index), permissions: permissions.transactions_read }) navigationItems.push({ id: 'navigation-menu-payment-links', name: 'Payment links', url: paths.paymentLinks.start, - current: pathLookup(originalUrl, paths.paymentLinks.start), + current: pathLookup(currentPath, paths.paymentLinks.start), permissions: permissions.tokens_create }) } @@ -35,13 +50,10 @@ const serviceNavigationItems = (originalUrl, permissions, type) => { id: 'navigation-menu-settings', name: 'Settings', url: type === 'card' ? paths.settings.index : paths.apiKeys.index, - current: originalUrl !== '/' ? pathLookup(originalUrl.replace(/([a-z])\/$/g, '$1'), [ - paths.settings.index, - paths.yourPsp, - paths.notificationCredentials, - paths.toggle3ds, + current: currentPath !== '/' ? pathLookup(currentPath, [ + ...mainSettingsPaths, + ...yourPspPaths, paths.apiKeys, - paths.emailNotifications, paths.paymentTypes ]) : false, permissions: _.some([ @@ -56,36 +68,34 @@ const serviceNavigationItems = (originalUrl, permissions, type) => { return navigationItems } -const adminNavigationItems = (originalUrl, permissions, type, paymentProvider, account = {}) => { - const paymentTypesPath = formatAccountPathsFor(paths.paymentTypes.index, account.external_id) - +const adminNavigationItems = (currentPath, permissions, type, paymentProvider, account = {}) => { return [ { id: 'navigation-menu-settings-home', name: 'Settings', url: paths.settings.index, - current: pathLookup(originalUrl, paths.settings.index), + current: pathLookup(currentPath, mainSettingsPaths), permissions: type === 'card' }, { id: 'navigation-menu-api-keys', name: 'API keys', url: paths.apiKeys.index, - current: pathLookup(originalUrl, paths.apiKeys.index), + current: pathLookup(currentPath, paths.apiKeys.index), permissions: permissions.tokens_update }, { id: 'navigation-menu-your-psp', name: `Your PSP - ${formatPSPname(paymentProvider)}`, url: paths.yourPsp.index, - current: pathLookup(originalUrl, paths.yourPsp.index), + current: pathLookup(currentPath, yourPspPaths), permissions: permissions.gateway_credentials_update && type === 'card' && (paymentProvider !== 'stripe') && (paymentProvider !== 'sandbox') }, { id: 'navigation-menu-payment-types', name: 'Card types', - url: paymentTypesPath, - current: pathLookup(originalUrl, paymentTypesPath) || pathLookup(originalUrl, paths.digitalWallet.summary), + url: formatAccountPathsFor(paths.paymentTypes.index, account.external_id), + current: pathLookup(currentPath, paths.paymentTypes.index), permissions: permissions.payment_types_read && type === 'card' } ]