Merge branch 'develop' into spike/upgradeability

* develop: Support Node 16 (#965) [W-12450361] Introduce short-circuit method for bypassing auth in Commerce Provider by passing in a fetchedToken (#1010) remove jest-silent-reporter (#1009) Clean up Page Designer Code (#1004) [Shopper Experience] `ImageWithText` component (#991) Feature: Page Designer Carousel Component (#977) [Feature] Page Designer Layout Components WIP (#993) remove updatePw from not implemented list (#996) Back-port Shopper Experience Base Components into Retail Template (#992) # Conflicts: # packages/commerce-sdk-react/package-lock.json # packages/commerce-sdk-react/package.json # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-dev/src/configs/webpack/config.js # packages/template-retail-react-app/package-lock.json
SalesforceCommerceCloud · Feb 28, 2023 · f323101 · f323101
2 parents b9fe4e2 + b743269
commit f323101
Show file tree

Hide file tree

Showing 83 changed files with 1,849 additions and 401 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -30,14 +30,17 @@ jobs:
   pwa-kit:
     strategy:
       matrix:
-        node: [14]
+        node: [14, 16]
         npm: [6, 7, 8]
+        exclude:
+          - node: 16
+            npm: 6
     runs-on: ubuntu-latest
     env:
-      # The "default" npm is the one that ships with a given version of node
-      # node v14 uses npm@6, latest node v16 uses npm@8
+      # The "default" npm is the one that ships with a given version of node.
       # For more: https://nodejs.org/en/download/releases/
-      IS_DEFAULT_NPM: ${{ matrix.npm == 6 }}
+      IS_DEFAULT_NPM: ${{ matrix.node == 14 && matrix.npm == 6 || matrix.node == 16 && matrix.npm == 8 }}
+      IS_LATEST_NPM: ${{ matrix.node == 16 && matrix.npm == 8 }}
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -68,28 +71,28 @@ jobs:
         uses: "./.github/actions/smoke_tests"
 
       - name: Create MRT credentials file
-        if: env.IS_NOT_FORK == 'true' && env.IS_DEFAULT_NPM == 'true' && env.DEVELOP == 'true'
+        if: env.IS_NOT_FORK == 'true' && env.IS_LATEST_NPM == 'true' && env.DEVELOP == 'true'
         uses: "./.github/actions/create_mrt"
         with:
           mobify_user: ${{ secrets.MOBIFY_CLIENT_USER }}
           mobify_api_key: ${{ secrets.MOBIFY_CLIENT_API_KEY }}
 
       - name: Push Bundle to MRT (Development)
-        if: env.IS_NOT_FORK == 'true' && env.IS_DEFAULT_NPM == 'true' && env.DEVELOP == 'true'
+        if: env.IS_NOT_FORK == 'true' && env.IS_LATEST_NPM == 'true' && env.DEVELOP == 'true'
         uses: "./.github/actions/push_to_mrt"
         with:
           CWD: "./packages/template-retail-react-app"
           TARGET: staging
 
       - name: Push Bundle to MRT (Production)
-        if: env.IS_NOT_FORK == 'true' && env.IS_DEFAULT_NPM == 'true' && env.RELEASE == 'true'
+        if: env.IS_NOT_FORK == 'true' && env.IS_LATEST_NPM == 'true' && env.RELEASE == 'true'
         uses: "./.github/actions/push_to_mrt"
         with:
           CWD: "./packages/template-retail-react-app"
           TARGET: production
 
       - name: Push Bundle to MRT (Commerce SDK React)
-        if: env.IS_NOT_FORK == 'true' && env.IS_DEFAULT_NPM == 'true' && env.DEVELOPMENT == 'true'
+        if: env.IS_NOT_FORK == 'true' && env.IS_LATEST_NPM == 'true' && env.DEVELOPMENT == 'true'
         uses: "./.github/actions/push_to_mrt"
         with:
           CWD: "./packages/test-commerce-sdk-react"
@@ -100,7 +103,7 @@ jobs:
         uses: "./.github/actions/check_clean"
 
       - name: Publish to NPM
-        if: env.IS_NOT_FORK == 'true' && env.IS_DEFAULT_NPM == 'true' && env.RELEASE == 'true'
+        if: env.IS_NOT_FORK == 'true' && env.IS_LATEST_NPM == 'true' && env.RELEASE == 'true'
         uses: "./.github/actions/publish_to_npm"
         with:
           NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
@@ -118,11 +121,16 @@ jobs:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
   pwa-kit-windows:
     strategy:
-        # TODO: We don't *need* a matrix with single values,
-        # but is it worth keeping for supporting multiple versions in the future?
-        matrix:
-          node: [14]
-          npm: [6]
+      matrix:
+        node: [14, 16]
+        npm: [6, 7, 8]
+        exclude:
+          - node: 16
+            npm: 6
+    env:
+      # The "default" npm is the one that ships with a given version of node.
+      # For more: https://nodejs.org/en/download/releases/
+      IS_DEFAULT_NPM: ${{ matrix.node == 14 && matrix.npm == 6 || matrix.node == 16 && matrix.npm == 8 }}
     runs-on: windows-latest
     steps:
         - name: Checkout
@@ -134,6 +142,11 @@ jobs:
             node-version: ${{ matrix.node }}
             cache: npm
 
+        - name: Update NPM version
+          if: env.IS_DEFAULT_NPM == 'false'
+          run: |-
+            npm install -g npm@${{ matrix.npm }}
+
         - name: Setup Windows Machine
           uses: "./.github/actions/setup_windows"
 
@@ -157,7 +170,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Setup Ubuntu Machine
         uses: "./.github/actions/setup_ubuntu"
@@ -247,7 +260,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Setup Windows Machine
         uses: "./.github/actions/setup_windows"

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "pwa-kit",
   "version": "2.8.0-dev.0",
   "engines": {
-    "node": "^14.0.0",
+    "node": "^14.0.0 || ^16.0.0",
     "npm": "^6.14.4 || ^7.0.0 || ^8.0.0"
   },
   "devDependencies": {

diff --git a/packages/commerce-sdk-react/jest.config.js b/packages/commerce-sdk-react/jest.config.js
@@ -19,10 +19,5 @@ module.exports = {
             statements: 0
         }
     },
-    collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
-
-    // this reporter hides console.error when tests succeed
-    // this prevent expected errors from polluting jest logs
-    // https://github.com/rickhanlonii/jest-silent-reporter
-    reporters: [['jest-silent-reporter', {useDots: true, showPaths: true}]]
+    collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}']
 }
diff --git a/packages/commerce-sdk-react/package.json b/packages/commerce-sdk-react/package.json
@@ -5,7 +5,7 @@
   "author": "cc-pwa-kit@salesforce.com",
   "license": "See license in LICENSE",
   "engines": {
-    "node": "^14.0.0",
+    "node": "^14.0.0 || ^16.0.0",
     "npm": "^6.14.4 || ^7.0.0 || ^8.0.0"
   },
   "files": [
@@ -60,8 +60,7 @@
     "@types/react-dom": "^17.0.2",
     "@types/react-helmet": "^6.1.6",
     "cross-env": "^5.2.0",
-    "internal-lib-build": "^2.8.0-dev.0",
-    "jest-silent-reporter": "^0.5.0",
+    "internal-lib-build": "^2.7.0-dev",
     "jsonwebtoken": "^8.5.1",
     "nock": "^13.2.9",
     "react": "^17.0.2",

diff --git a/packages/commerce-sdk-react/src/auth/index.test.ts b/packages/commerce-sdk-react/src/auth/index.test.ts
@@ -182,6 +182,13 @@ describe('Auth', () => {
 
         expect(auth.ready()).resolves.toEqual(result)
     })
+    test('ready - use `fetchedToken` and short circuit network request', async () => {
+        const auth = new Auth({...config, fetchedToken: 'fake-token'})
+        jest.spyOn(auth, 'queueRequest')
+        await auth.ready().then(() => {
+            expect(auth.queueRequest).not.toHaveBeenCalled()
+        })
+    })
     test('ready - use refresh token when access token is expired', async () => {
         const auth = new Auth(config)
 

diff --git a/packages/commerce-sdk-react/src/auth/index.ts b/packages/commerce-sdk-react/src/auth/index.ts
@@ -22,6 +22,7 @@ interface AuthConfig extends ApiClientConfigParams {
     redirectURI: string
     proxy: string
     fetchOptions?: ShopperLoginTypes.FetchOptions
+    fetchedToken?: string
 }
 
 interface JWTHeaders {
@@ -143,6 +144,7 @@ class Auth {
     private pendingToken: Promise<ShopperLoginTypes.TokenResponse> | undefined
     private REFRESH_TOKEN_EXPIRATION_DAYS = 90
     private stores: Record<StorageType, BaseStorage>
+    private fetchedToken: string
 
     constructor(config: AuthConfig) {
         this.client = new ShopperLogin({
@@ -188,6 +190,8 @@ class Auth {
               }
 
         this.redirectURI = config.redirectURI
+
+        this.fetchedToken = config.fetchedToken || ''
     }
 
     get(name: AuthDataKeys) {
@@ -294,21 +298,22 @@ class Auth {
      * 3. PKCE flow
      */
     async ready() {
+        if (this.fetchedToken && this.fetchedToken !== '') {
+            this.pendingToken = Promise.resolve({...this.data, access_token: this.fetchedToken})
+            return this.pendingToken
+        }
         if (this.pendingToken) {
             return this.pendingToken
         }
-
         const accessToken = this.get('access_token')
 
         if (accessToken && !this.isTokenExpired(accessToken)) {
             this.pendingToken = Promise.resolve(this.data)
             return this.pendingToken
         }
-
         const refreshTokenRegistered = this.get('refresh_token_registered')
         const refreshTokenGuest = this.get('refresh_token_guest')
         const refreshToken = refreshTokenRegistered || refreshTokenGuest
-
         if (refreshToken) {
             try {
                 return this.queueRequest(

diff --git a/packages/commerce-sdk-react/src/hooks/ShopperCustomers/mutation.ts b/packages/commerce-sdk-react/src/hooks/ShopperCustomers/mutation.ts
@@ -452,7 +452,6 @@ export const SHOPPER_CUSTOMERS_NOT_IMPLEMENTED = [
     'invalidateCustomerAuth',
     'registerExternalProfile',
     'resetPassword',
-    'updateCustomerPassword',
     'updateCustomerProductList'
 ]
 

diff --git a/packages/commerce-sdk-react/src/provider.test.tsx b/packages/commerce-sdk-react/src/provider.test.tsx
@@ -45,4 +45,13 @@ describe('provider', () => {
         const authInstance = (Auth as jest.Mock).mock.instances[0]
         expect(authInstance.ready).toHaveBeenCalledTimes(1)
     })
+
+    test('Auth, if initialized with `fetchedToken` short circuits auth.ready()', () => {
+        renderWithProviders(<h1>I can render with no problem!</h1>)
+        expect(screen.getByText('I can render with no problem!')).toBeInTheDocument()
+        expect(Auth).toHaveBeenCalledTimes(1)
+        const authInstance = (Auth as jest.Mock).mock.instances[0]
+        expect(authInstance.ready).toHaveBeenCalledTimes(1)
+        expect(authInstance.queueRequest).toHaveBeenCalledTimes(0)
+    })
 })
diff --git a/packages/commerce-sdk-react/src/provider.tsx b/packages/commerce-sdk-react/src/provider.tsx
@@ -31,6 +31,7 @@ export interface CommerceApiProviderProps extends ApiClientConfigParams {
     redirectURI: string
     fetchOptions?: ShopperBasketsTypes.FetchOptions
     headers?: Record<string, string>
+    fetchedToken?: string
 }
 
 /**
@@ -66,7 +67,8 @@ const CommerceApiProvider = (props: CommerceApiProviderProps): ReactElement => {
         siteId,
         shortCode,
         locale,
-        currency
+        currency,
+        fetchedToken
     } = props
 
     const config = {
@@ -113,9 +115,19 @@ const CommerceApiProvider = (props: CommerceApiProviderProps): ReactElement => {
             siteId,
             proxy,
             redirectURI,
-            fetchOptions
+            fetchOptions,
+            fetchedToken
         })
-    }, [clientId, organizationId, shortCode, siteId, proxy, redirectURI, fetchOptions])
+    }, [
+        clientId,
+        organizationId,
+        shortCode,
+        siteId,
+        proxy,
+        redirectURI,
+        fetchOptions,
+        fetchedToken
+    ])
 
     useEffect(() => {
         auth.ready()

diff --git a/packages/commerce-sdk-react/src/test-utils.tsx b/packages/commerce-sdk-react/src/test-utils.tsx
@@ -25,7 +25,8 @@ export const DEFAULT_TEST_CONFIG = {
     shortCode: '12345678',
     siteId: 'RefArchGlobal',
     locale: 'en-US',
-    currency: 'USD'
+    currency: 'USD',
+    fetchedToken: 'test-token'
 }
 
 export const createQueryClient = () => {

diff --git a/packages/internal-lib-build/configs/babel.config.js b/packages/internal-lib-build/configs/babel.config.js
@@ -10,7 +10,7 @@ const config = {
             require('@babel/preset-env'),
             {
                 targets: {
-                    node: 14
+                    node: 16
                 }
             }
         ],

diff --git a/packages/internal-lib-build/package.json b/packages/internal-lib-build/package.json
@@ -2,7 +2,7 @@
   "name": "internal-lib-build",
   "version": "2.8.0-dev.0",
   "engines": {
-    "node": "^14.0.0",
+    "node": "^14.0.0 || ^16.0.0",
     "npm": "^6.14.4 || ^7.0.0 || ^8.0.0"
   },
   "private": true,

diff --git a/packages/pwa-kit-create-app/README.md b/packages/pwa-kit-create-app/README.md
@@ -4,7 +4,7 @@ A tool for generating PWA Kit projects based on project templates, such as the [
 
 ## Requirements
 
--   Node 14
+-   Node 14.17.0 or later
 -   npm 6.14.4 or later
 
 ## Quick Start

diff --git a/packages/pwa-kit-create-app/assets/pwa/default.js b/packages/pwa-kit-create-app/assets/pwa/default.js
@@ -65,7 +65,7 @@ module.exports = {
     ],
     // Additional parameters that configure Express app behavior.
     ssrParameters: {
-        ssrFunctionNodeVersion: '14.x',
+        ssrFunctionNodeVersion: '16.x',
         proxyConfigs: [
             {
                 host: '${commerceApi.shortCode}.api.commercecloud.salesforce.com',

diff --git a/packages/pwa-kit-create-app/package.json b/packages/pwa-kit-create-app/package.json
@@ -27,7 +27,7 @@
     "local-npm": "node packages/pwa-kit-create-app/scripts/create-mobify-app-dev.js --outputDir local-npm"
   },
   "engines": {
-    "node": "^14.0.0",
+    "node": "^14.0.0 || ^16.0.0",
     "npm": "^6.14.4 || ^7.0.0 || ^8.0.0"
   },
   "dependencies": {

diff --git a/packages/pwa-kit-create-app/scripts/create-mobify-app-dev.js b/packages/pwa-kit-create-app/scripts/create-mobify-app-dev.js
@@ -45,6 +45,7 @@ const p = require('path')
 const sh = require('shelljs')
 const fs = require('fs')
 const cp = require('child_process')
+const semver = require('semver')
 
 sh.set('-e')
 
@@ -147,7 +148,12 @@ const runGenerator = () => {
     // Shelljs can't run interactive programs, so we have to switch to child_process.
     // See https://github.com/shelljs/shelljs/wiki/FAQ#running-interactive-programs-with-exec
 
-    cp.execSync(`npx pwa-kit-create-app ${process.argv.slice(2).join(' ')}`, {
+    const extension = process.platform === 'win32' ? '.cmd' : ''
+    const npm = `npm${extension}`
+    const foundNpm = cp.spawnSync(npm, ['-v']).stdout.toString().trim()
+    const flags = semver.satisfies(foundNpm, '>=7') ? '-y' : ''
+
+    cp.execSync(`npx ${flags} pwa-kit-create-app@latest ${process.argv.slice(2).join(' ')}`, {
         stdio: 'inherit'
     })
 }

diff --git a/packages/pwa-kit-dev/CHANGELOG.md b/packages/pwa-kit-dev/CHANGELOG.md
@@ -4,6 +4,8 @@
 ## v2.8.0-dev (Feb 15, 2023)
 ## v2.8.0-dev (Feb 15, 2023)
 ## v2.7.0-dev (Jan 25, 2023)
+- Add explicit `ws` dependency [#865](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/865)
+
 ## v2.6.0 (Jan 25, 2023)
 - Upgrade prettier to v2 [#926](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/926)
 - Security package updates

diff --git a/packages/pwa-kit-dev/README.md b/packages/pwa-kit-dev/README.md
@@ -4,7 +4,7 @@ A command-line tool to develop, build, and deploy PWA Kit projects.
 
 ## Requirements
 
--   Node 14
+-   Node 14.17.0 or later
 -   npm 6.14.4 or later
 
 To see all the available commands, run:

diff --git a/packages/pwa-kit-dev/package.json b/packages/pwa-kit-dev/package.json
@@ -104,7 +104,8 @@
     "webpack-dev-middleware": "^5.2.2",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-hot-server-middleware": "^0.6.1",
-    "webpack-notifier": "^1.12.0"
+    "webpack-notifier": "^1.12.0",
+    "ws": "^8.12.0"
   },
   "devDependencies": {
     "@loadable/component": "^5.15.0",
@@ -117,7 +118,7 @@
     "@loadable/component": "^5.15.0"
   },
   "engines": {
-    "node": "^14.0.0",
+    "node": "^14.0.0 || ^16.0.0",
     "npm": "^6.14.4 || ^7.0.0 || ^8.0.0"
   },
   "publishConfig": {