Merge branch 'develop' into feature/template-extensibility-algo-refactor

* develop: (34 commits) [Phased Launch] Call Session bridge after login (#1220) [v3] Add multi-site suffix to auth token keys (#1208) Footer: fix hydration error with the locale dropdown (#1210) remove unused peerDependency @chakra-ui/system (#1212) @W-12582733: Expose env vars endpoint for E2E smoke tests (#1207) Upgrade to React 18 (#1166) Remove v3 branch name related actions (#1206) add test to reach test coverage threshold remove commerce-api folder Feature: Extract einstein RefArch-specific values to constant (#1200) Bump version number to 2.7.1 and update changelogs (#1197) store usid in cookies (#1193) make sure static files are copied on dev environment (#1196) [WIP] PWA Kit 2.7.1 release (#1181) [V2] Internal lib build typescript dev dependency (#1194) [V2] Re-generate lock files and fix hook lib tests (#1186) Add additional properties to ShopperLogin test types (#1185) Revert 2.7.0 branch to prep for 2.7.1 changes (#1182) #1174 Replace invalid value for wrap property (#1179) Add a redirect to login page after user signs out from checkout page (#1172) ... # Conflicts: # package-lock.json # packages/commerce-sdk-react/CHANGELOG.md # packages/commerce-sdk-react/package-lock.json # packages/internal-lib-build/package-lock.json # packages/pwa-kit-create-app/package-lock.json # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-dev/package.json # packages/pwa-kit-react-sdk/package-lock.json # packages/pwa-kit-runtime/package-lock.json # packages/template-mrt-reference-app/package-lock.json # packages/template-retail-react-app/app/components/confirmation-modal/index.test.js # packages/template-retail-react-app/app/components/footer/index.jsx # packages/template-retail-react-app/app/components/header/index.jsx # packages/template-retail-react-app/app/components/list-menu/index.test.js # packages/template-retail-react-app/app/components/product-scroller/index.test.js # packages/template-retail-react-app/app/components/product-view-modal/index.test.js # packages/template-retail-react-app/app/components/search/index.test.js # packages/template-retail-react-app/app/hoc/with-registration/index.test.js # packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.js # packages/template-retail-react-app/app/hooks/use-auth-modal.test.js # packages/template-retail-react-app/app/hooks/use-currency.test.js # packages/template-retail-react-app/app/hooks/use-multi-site.test.js # packages/template-retail-react-app/app/hooks/use-navigation.test.js # packages/template-retail-react-app/app/pages/account/addresses.test.js # packages/template-retail-react-app/app/pages/account/index.jsx # packages/template-retail-react-app/app/pages/account/wishlist/partials/wishlist-primary-action.test.js # packages/template-retail-react-app/app/pages/cart/index.test.js # packages/template-retail-react-app/app/pages/cart/partials/cart-secondary-button-group.test.js # packages/template-retail-react-app/app/pages/checkout/index.test.js # packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx # packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js # packages/template-retail-react-app/app/pages/home/index.test.js # packages/template-retail-react-app/app/pages/product-list/partials/empty-results.jsx # packages/template-retail-react-app/app/pages/product-list/partials/page-header.jsx # packages/template-retail-react-app/app/pages/registration/index.test.jsx # packages/template-retail-react-app/app/utils/site-utils.js # packages/template-retail-react-app/package-lock.json # packages/template-typescript-minimal/package-lock.json # packages/test-commerce-sdk-react/package-lock.json
SalesforceCommerceCloud · May 23, 2023 · 23c195a · 23c195a
2 parents e1b5bfd + e178ed2
commit 23c195a
Show file tree

Hide file tree

Showing 152 changed files with 1,692 additions and 1,366 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -19,30 +19,28 @@ on:
       - develop
       # TODO: Should we run on all pushes to release branches, or should we run on GitHub releases?
       - 'release-*'
-      - 'v3'
   schedule:
     # Run every day at 12pm (PST) - cron uses UTC times
     - cron: '0 8 * * *'
 env:
   IS_NOT_FORK: ${{ github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository }}
   DEVELOP: ${{ (github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository) && (github.head_ref || github.ref_name) == 'develop' }}
   RELEASE: ${{ (github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository) && startsWith(github.head_ref || github.ref_name, 'release-') }}
-  V3: ${{ (github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository) && (github.head_ref || github.ref_name) == 'v3' }}
 
 jobs:
   pwa-kit:
     strategy:
       fail-fast: false
       matrix:
         node: [16, 18]
-        npm: [7, 8, 9]
+        npm: [8, 9]
     runs-on: ubuntu-latest
     env:
       # The "default" npm is the one that ships with a given version of node.
       # For more: https://nodejs.org/en/download/releases/
       # (We also use this env var for making sure a step runs once for the current node version)
       IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 9) }}
-      # The current recommended version for Managed Runtime: 
+      # The current recommended version for Managed Runtime:
       # https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/upgrade-node-version.html
       IS_MRT_NODE: ${{ matrix.node == 16 && matrix.npm == 8 }}
     steps:
@@ -74,7 +72,7 @@ jobs:
         uses: "./.github/actions/smoke_tests"
 
       - name: Create MRT credentials file
-        if: env.IS_NOT_FORK == 'true' && env.IS_MRT_NODE == 'true' && ( env.DEVELOP == 'true' || env.RELEASE == 'true' || env.V3 == 'true' )
+        if: env.IS_NOT_FORK == 'true' && env.IS_MRT_NODE == 'true' && ( env.DEVELOP == 'true' || env.RELEASE == 'true' )
         uses: "./.github/actions/create_mrt"
         with:
           mobify_user: ${{ secrets.MOBIFY_CLIENT_USER }}
@@ -86,13 +84,6 @@ jobs:
         with:
           CWD: "./packages/template-retail-react-app"
           TARGET: staging
-
-      - name: Push Bundle to MRT (v3)
-        if: env.IS_NOT_FORK == 'true' && env.IS_MRT_NODE == 'true' && env.V3 == 'true'
-        uses: "./.github/actions/push_to_mrt"
-        with:
-          CWD: "./packages/template-retail-react-app"
-          TARGET: staging-v3
 
       - name: Push Bundle to MRT (Production)
         if: env.IS_NOT_FORK == 'true' && env.IS_MRT_NODE == 'true' && env.RELEASE == 'true'
@@ -134,13 +125,13 @@ jobs:
       fail-fast: false
       matrix:
         node: [16, 18]
-        npm: [7, 8, 9]
+        npm: [8, 9]
     env:
       # The "default" npm is the one that ships with a given version of node.
       # For more: https://nodejs.org/en/download/releases/
       # (We also use this env var for making sure a step runs once for the current node version)
       IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 9) }}
-      # The current recommended version for Managed Runtime: 
+      # The current recommended version for Managed Runtime:
       # https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/upgrade-node-version.html
       IS_MRT_NODE: ${{ matrix.node == 16 && matrix.npm == 8 }}
     runs-on: windows-latest

diff --git a/.gitignore b/.gitignore
@@ -9,4 +9,5 @@ packages/*/out
 packages/*/docs/www
 lerna-debug.log
 .idea/
-.vscode/
+.vscode/
+*.orig
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.8.0-dev",
+  "version": "3.0.0-dev",
   "packages": [
     "packages/*"
   ]

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pwa-kit",
-  "version": "2.8.0-dev",
+  "version": "3.0.0-dev",
   "scripts": {
     "bump-version": "node ./scripts/bump-version.js",
     "format": "lerna run --stream format",
@@ -21,7 +21,7 @@
     "shelljs": "^0.8.5"
   },
   "engines": {
-    "node": "^16.0.0 || ^18.0.0",
-    "npm": "^7.0.0 || ^8.0.0 || ^9.0.0"
+    "node": "^16.11.0 || ^18.0.0",
+    "npm": "^8.0.0 || ^9.0.0"
   }
 }
diff --git a/packages/commerce-sdk-react/CHANGELOG.md b/packages/commerce-sdk-react/CHANGELOG.md
@@ -1,16 +1,31 @@
-## v2.8.0-dev (Mar 03, 2023)
-- Add missing cache invalidation for contexts/customers/login/order [#1073](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1073)
+## v3.0.0-dev (May 12, 2023)
+
+- Upgrade React 18, React DOM 18, @types/react@18, @types/react-dom@v18 Testing library 14 [#1166](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1166)
+
+## v2.7.1 (May 11, 2023)
+
+-   Re-generate lock files and fix hook lib tests [#1186](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1186)
+-   Add additional properties to ShopperLogin test types [#1185](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1185)
+-   Add missing cache invalidation for contexts/customers/login/order [#1073](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1073)
+-   Fix Shopper Baskets Test case [#1082](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1082)
+-   Implement remaining Shopper Baskets cache logic [#1070](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1070)
+-   Decode pre-fetched token and save auth data in storage [#1052](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1052)
+-   Allow query hook parameters to be null. [#1046](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1046)
+-   Implement updateCustomerPassword as no-op. [#1031](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1031)
+
 ## v2.7.0 (Mar 03, 2023)
-- Add Page/Region/Component components for shopper experience/page designer page rendering [#963](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/963)
-- Namespace `Auth` storage keys with site identifier to allow multi-site support [#911](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/911)
-- Add Shopper Experience `usePage` and `usePages` hooks[#958](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/958)
+
+-   Add Page/Region/Component components for shopper experience/page designer page rendering [#963](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/963)
+-   Namespace `Auth` storage keys with site identifier to allow multi-site support [#911](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/911)
+-   Add Shopper Experience `usePage` and `usePages` hooks[#958](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/958)
 
 ## v2.6.0 (Jan 25, 2023)
 
 ## v2.5.0 (Jan 05, 2023)
-- Exclude test files in package file to avoid publishing them [#856](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/856)
-- Pass in 'headers' and 'rawResponse' options to mutation hooks [#845](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/845)
-- Commerce hooks: basket mutations [#834](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/834)
-- Remove overriding of params in mutation hooks [#859](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/859)
+
+-   Exclude test files in package file to avoid publishing them [#856](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/856)
+-   Pass in 'headers' and 'rawResponse' options to mutation hooks [#845](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/845)
+-   Commerce hooks: basket mutations [#834](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/834)
+-   Remove overriding of params in mutation hooks [#859](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/859)
 
 ## v2.4.0 (Dec 01, 2022)
diff --git a/packages/commerce-sdk-react/package.json b/packages/commerce-sdk-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "commerce-sdk-react-preview",
-  "version": "2.8.0-dev",
+  "version": "3.0.0-dev",
   "description": "A library that provides react hooks for fetching data from Commerce Cloud",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/ecom-react-hooks#readme",
   "bugs": {
@@ -47,23 +47,22 @@
   "devDependencies": {
     "@tanstack/react-query": "^4.28.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^14.0.0",
     "@types/js-cookie": "^3.0.3",
     "@types/jsonwebtoken": "^8.5.9",
     "@types/jwt-decode": "^3.1.0",
     "@types/node": "^14.18.40",
-    "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.19",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
     "@types/react-helmet": "^6.1.6",
     "cross-env": "^5.2.1",
-    "internal-lib-build": "2.8.0-dev",
+    "internal-lib-build": "3.0.0-dev",
     "jsonwebtoken": "^8.5.1",
     "nock": "^13.3.0",
     "nodemon": "^2.0.22",
-    "pwa-kit-dev": "2.8.0-dev",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "pwa-kit-dev": "3.0.0-dev",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "semver": "^7.3.8",
     "shelljs": "^0.8.5",
@@ -72,15 +71,15 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^4",
-    "react": "^17",
+    "react": "^18",
     "react-helmet": "6"
   },
   "optionalDependencies": {
     "prop-types": "^15.8.1"
   },
   "engines": {
-    "node": "^16.0.0 || ^18.0.0",
-    "npm": "^7.0.0 || ^8.0.0 || ^9.0.0"
+    "node": "^16.11.0 || ^18.0.0",
+    "npm": "^8.0.0 || ^9.0.0"
   },
   "publishConfig": {
     "directory": "dist"

diff --git a/packages/commerce-sdk-react/src/auth/index.test.ts b/packages/commerce-sdk-react/src/auth/index.test.ts
@@ -67,9 +67,9 @@ describe('Auth', () => {
         expect(auth.get('refresh_token_guest')).toBe(refreshToken)
         expect(auth.get('access_token')).toBe(accessToken)
         // @ts-expect-error private property
-        expect([...auth.stores['cookie'].map.keys()]).toEqual([`siteId_cc-nx-g`])
+        expect([...auth.stores['cookie'].map.keys()]).toEqual([`cc-nx-g_siteId`])
         // @ts-expect-error private property
-        expect([...auth.stores['local'].map.keys()]).toEqual([`siteId_access_token`])
+        expect([...auth.stores['local'].map.keys()]).toEqual([`access_token_siteId`])
     })
     test('set registered refresh token will clear guest refresh token, vise versa', () => {
         const auth = new Auth(config)
@@ -300,7 +300,7 @@ describe('Auth', () => {
         // @ts-expect-error private method
         authA.set('refresh_token_guest', refreshTokenGuest)
         // @ts-expect-error private property
-        expect([...authA.stores['memory'].map.keys()]).toEqual([`siteA_cc-nx-g`])
+        expect([...authA.stores['memory'].map.keys()]).toEqual([`cc-nx-g_siteA`])
 
         // Create a second auth instance and ensure that its memory store has previous
         // guest tokens set from the first store (this emulates a second lambda request.)
@@ -309,7 +309,7 @@ describe('Auth', () => {
         authB.set('refresh_token_guest', refreshTokenGuest)
 
         // @ts-expect-error private property
-        expect([...authB.stores['memory'].map.keys()]).toEqual([`siteA_cc-nx-g`, `siteB_cc-nx-g`])
+        expect([...authB.stores['memory'].map.keys()]).toEqual([`cc-nx-g_siteA`, `cc-nx-g_siteB`])
 
         // Set mock value back to expected.
         // @ts-expect-error read-only property

diff --git a/packages/commerce-sdk-react/src/auth/index.ts b/packages/commerce-sdk-react/src/auth/index.ts
@@ -24,6 +24,7 @@ interface AuthConfig extends ApiClientConfigParams {
     proxy: string
     fetchOptions?: ShopperLoginTypes.FetchOptions
     fetchedToken?: string
+    OCAPISessionsURL?: string
 }
 
 interface JWTHeaders {
@@ -79,7 +80,7 @@ const DATA_MAP: AuthDataMap = {
         key: 'customer_id'
     },
     usid: {
-        storageType: 'local',
+        storageType: 'cookie',
         key: 'usid'
     },
     enc_user_id: {
@@ -138,6 +139,7 @@ class Auth {
     private REFRESH_TOKEN_EXPIRATION_DAYS = 90
     private stores: Record<StorageType, BaseStorage>
     private fetchedToken: string
+    private OCAPISessionsURL: string
 
     constructor(config: AuthConfig) {
         this.client = new ShopperLogin({
@@ -163,9 +165,9 @@ class Auth {
             fetchOptions: config.fetchOptions
         })
 
-        const storageOptions = {keyPrefix: config.siteId}
+        const storageOptions = {keySuffix: config.siteId}
         const serverStorageOptions = {
-            keyPrefix: config.siteId,
+            keySuffix: config.siteId,
             sharedContext: true // This allows use to reused guest authentication tokens accross lambda runs.
         }
 
@@ -185,6 +187,8 @@ class Auth {
         this.redirectURI = config.redirectURI
 
         this.fetchedToken = config.fetchedToken || ''
+
+        this.OCAPISessionsURL = config.OCAPISessionsURL || ''
     }
 
     get(name: AuthDataKeys) {
@@ -272,7 +276,9 @@ class Auth {
             .then(async () => {
                 const token = await fn()
                 this.handleTokenResponse(token, isGuest)
-
+                if (onClient() && this.OCAPISessionsURL) {
+                    void this.createOCAPISession()
+                }
                 // Q: Why don't we just return token? Why re-construct the same object again?
                 // A: because a user could open multiple tabs and the data in memory could be out-dated
                 // We must always grab the data from the storage (cookie/localstorage) directly
@@ -430,6 +436,26 @@ class Auth {
         return this.loginGuestUser()
     }
 
+    /**
+     * Make a post request to the OCAPI /session endpoint to bridge the session.
+     *
+     * The HTTP response contains a set-cookie header which sets the dwsid session cookie.
+     * This cookie is used on SFRA, and it allows shoppers to navigate between SFRA and
+     * this PWA site seamlessly; this is often used to enable hybrid deployment.
+     *
+     * (Note: this method is client side only, b/c MRT doesn't support set-cookie header right now)
+     *
+     * @returns {Promise}
+     */
+    createOCAPISession() {
+        return fetch(this.OCAPISessionsURL, {
+            method: 'POST',
+            headers: {
+                Authorization: this.get('access_token')
+            }
+        })
+    }
+
     /**
      * Decode SLAS JWT and extract information such as customer id, usid, etc.
      *

diff --git a/packages/commerce-sdk-react/src/auth/storage.test.ts b/packages/commerce-sdk-react/src/auth/storage.test.ts
@@ -24,14 +24,13 @@ const testCases = [
     {
         description: 'MemoryStorage works with options',
         storageOptions: {
-            keyPrefix: 'prefix',
-            keyPrefixSeparator: '$'
+            keySuffix: 'suffix'
         },
         validate: (storage: BaseStorage) => {
             storage.set(key, value)
             expect(storage.get(key)).toBe(value)
             // @ts-expect-error private property
-            expect([...storage.map.keys()]).toEqual([`prefix$${key}`])
+            expect([...storage.map.keys()]).toEqual([`${key}_suffix`])
             storage.delete(key)
             expect(storage.get(key)).toBe('')
         }