From 6b9d4369b1460023de233e8b60b31feda38ebf55 Mon Sep 17 00:00:00 2001 From: Sandra Golden Date: Sat, 25 Mar 2023 07:36:45 -0700 Subject: [PATCH] remove site alias and locale from location.state.directedFrom path (#1065) * remove site alias and locale from location.state.directedFrom path * moving call to removeSiteLocaleFromPath into use-navigation hook * fixing failing test, added tests for removeSiteLocaleFromPath * per code review, skipping failed test instead of using mocking --- .../app/hooks/use-navigation.js | 5 ++-- .../app/pages/checkout/confirmation.test.js | 6 ++++- .../app/utils/url.js | 26 +++++++++++++++++++ .../app/utils/url.test.js | 25 +++++++++++++++++- 4 files changed, 58 insertions(+), 4 deletions(-) diff --git a/packages/template-retail-react-app/app/hooks/use-navigation.js b/packages/template-retail-react-app/app/hooks/use-navigation.js index 81eaab6f09..5f6d81ad50 100644 --- a/packages/template-retail-react-app/app/hooks/use-navigation.js +++ b/packages/template-retail-react-app/app/hooks/use-navigation.js @@ -1,5 +1,5 @@ /* - * Copyright (c) 2021, salesforce.com, inc. + * Copyright (c) 2023, Salesforce, Inc. * All rights reserved. * SPDX-License-Identifier: BSD-3-Clause * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause @@ -7,6 +7,7 @@ import {useCallback} from 'react' import {useHistory} from 'react-router' import useMultiSite from './use-multi-site' +import {removeSiteLocaleFromPath} from '../utils/url' /** * A convenience hook for programmatic navigation uses history's `push` or `replace`. The proper locale @@ -26,7 +27,7 @@ const useNavigation = () => { * @param {...any} args - additional args passed to `.push` or `.replace` */ (path, action = 'push', ...args) => { - const updatedHref = buildUrl(path) + const updatedHref = buildUrl(removeSiteLocaleFromPath(path)) history[action](path === '/' ? '/' : updatedHref, ...args) }, [localeShortCode, site] diff --git a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js index 18659b423b..1603defa4e 100644 --- a/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js +++ b/packages/template-retail-react-app/app/pages/checkout/confirmation.test.js @@ -237,7 +237,11 @@ test('Create Account form - renders error message', async () => { expect(alert).toBeInTheDocument() }) -test('Create Account form - successful submission results in redirect to the Account page', async () => { +// TODO: this test is currently breaking due to the addition of "removeSiteLocaleFromPath" in the use-navigation hook (issue #1064) +// The chain goes: +// removeSiteLocaleFromPath -> getParamsFromPath -> absoluteUrl -> getAppOrigin +// which breaks in getAppOrigin with TypeError: Cannot read properties of null (reading '_location') +test.skip('Create Account form - successful submission results in redirect to the Account page', async () => { renderWithProviders() const createAccountButton = await screen.findByRole('button', {name: /create account/i}) diff --git a/packages/template-retail-react-app/app/utils/url.js b/packages/template-retail-react-app/app/utils/url.js index cac05523d2..a2db20d9c9 100644 --- a/packages/template-retail-react-app/app/utils/url.js +++ b/packages/template-retail-react-app/app/utils/url.js @@ -259,3 +259,29 @@ export const removeQueryParamsFromPath = (path, keys) => { return `${pathname}${paramStr && '?'}${paramStr}` } + +/* + * Remove site alias and locale from a given url, to be used for "navigate" urls + * + * @param {string} pathName - The part of url to have site alias and locale removed from + * @returns {string} - the path after site alias and locale have been removed + * @example + * import {removeSiteLocaleFromPath} from /path/to/util/url + * + * removeSiteLocaleFromPath(/RefArch/en-US/account/wishlist) + * // returns '/account/wishlist' + */ +export const removeSiteLocaleFromPath = (pathName = '') => { + let {siteRef, localeRef} = getParamsFromPath(pathName) + + // remove the site alias from the current pathName + if (siteRef) { + pathName = pathName.replace(new RegExp(`/${siteRef}`, 'g'), '') + } + // remove the locale from the current pathName + if (localeRef) { + pathName = pathName.replace(new RegExp(`/${localeRef}`, 'g'), '') + } + + return pathName +} diff --git a/packages/template-retail-react-app/app/utils/url.test.js b/packages/template-retail-react-app/app/utils/url.test.js index 91d1647c3d..73f30b67e0 100644 --- a/packages/template-retail-react-app/app/utils/url.test.js +++ b/packages/template-retail-react-app/app/utils/url.test.js @@ -14,7 +14,8 @@ import { rebuildPathWithParams, removeQueryParamsFromPath, absoluteUrl, - createUrlTemplate + createUrlTemplate, + removeSiteLocaleFromPath } from './url' import {getUrlConfig} from './utils' import mockConfig from '../../config/mocks/default' @@ -389,3 +390,25 @@ describe('absoluteUrl', function () { expect(url).toEqual('https://www.example.com/uk/en/women/dresses') }) }) + +describe('removeSiteLocaleFromPath', function () { + test('return path without site alias and locale', () => { + const pathName = removeSiteLocaleFromPath('/uk/en-GB/account/wishlist') + expect(pathName).toEqual('/account/wishlist') + }) + + test('return path without site alias if they appear multiple times', () => { + const pathName = removeSiteLocaleFromPath('/uk/en-GB/uk/en-GB/account/wishlist') + expect(pathName).toEqual('/account/wishlist') + }) + + test('return expected path name when no locale or site alias appear', () => { + const pathName = removeSiteLocaleFromPath('/account/wishlist') + expect(pathName).toEqual('/account/wishlist') + }) + + test('return empty string when no path name is passed', () => { + const pathName = removeSiteLocaleFromPath() + expect(pathName).toEqual('') + }) +})