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

packages/template-retail-react-app/app/hooks/use-navigation.js

@@ -1,12 +1,13 @@
 /*
- * 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
  */
 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]

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(<WrappedConfirmation />)
 
     const createAccountButton = await screen.findByRole('button', {name: /create account/i})

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
+}

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('')
+    })
+})