Merge branch 'feature-passwordless-social-login' into W-17458039-handle-error-states

Author: yunakim714

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,4 +1,6 @@
 ## v3.2.0-dev (Oct 29, 2024)
+- Allow cookies for ShopperLogin API [#2190](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2190
+- Fix refresh token TTL warning from firing when override is not provided [#2114](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2114)
 
 - Update CacheUpdateMatrix for mergeBasket mutation [#2138](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2092)
 - Clear auth state if session has been invalidated by a password change [#2092](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2092)

packages/commerce-sdk-react/src/auth/index.test.ts

@@ -7,15 +7,15 @@
 import Auth, {AuthData} from './'
 import {waitFor} from '@testing-library/react'
 import jwt from 'jsonwebtoken'
-import {helpers, ShopperCustomersTypes} from 'commerce-sdk-isomorphic'
+import {helpers, ShopperCustomersTypes, ShopperLogin} from 'commerce-sdk-isomorphic'
 import * as utils from '../utils'
 import {SLAS_SECRET_PLACEHOLDER} from '../constant'
 import {ShopperLoginTypes} from 'commerce-sdk-isomorphic'
 import {
     DEFAULT_SLAS_REFRESH_TOKEN_REGISTERED_TTL,
     DEFAULT_SLAS_REFRESH_TOKEN_GUEST_TTL
 } from './index'
-import {RequireKeys} from '../hooks/types'
+import {ApiClientConfigParams, RequireKeys} from '../hooks/types'
 
 const baseCustomer: RequireKeys<ShopperCustomersTypes.Customer, 'login'> = {
     customerId: 'customerId',
@@ -803,3 +803,87 @@ describe('Auth', () => {
         })
     })
 })
+
+describe('Auth service sends credentials fetch option to the ShopperLogin API', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    test('Adds fetch options with credentials when not defined in config', async () => {
+        const auth = new Auth(config)
+        await auth.loginGuestUser()
+
+        // Ensure the helper method was called
+        expect(helpers.loginGuestUser).toHaveBeenCalled()
+        expect(helpers.loginGuestUser).toHaveBeenCalledTimes(1)
+
+        // Check that the correct parameters were passed to the helper
+        const callArguments = (helpers.loginGuestUser as jest.Mock).mock.calls[0]
+        expect(callArguments).toBeDefined()
+        expect(callArguments.length).toBeGreaterThan(0)
+
+        const shopperLogin: ShopperLogin<ApiClientConfigParams> = callArguments[0]
+        expect(shopperLogin).toBeDefined()
+        expect(shopperLogin.clientConfig).toBeDefined()
+        expect(shopperLogin.clientConfig.fetchOptions).toBeDefined()
+
+        // Ensure fetch options include the expected credentials
+        expect(shopperLogin.clientConfig.fetchOptions.credentials).toBe('same-origin')
+    })
+
+    test('Does not override the credentials in fetch options if already exists', async () => {
+        const configWithFetchOptions = {
+            ...config,
+            fetchOptions: {
+                credentials: 'include'
+            }
+        }
+        const auth = new Auth(configWithFetchOptions)
+        await auth.loginGuestUser()
+
+        // Ensure the helper method was called
+        expect(helpers.loginGuestUser).toHaveBeenCalled()
+        expect(helpers.loginGuestUser).toHaveBeenCalledTimes(1)
+
+        // Check that the correct parameters were passed to the helper
+        const callArguments = (helpers.loginGuestUser as jest.Mock).mock.calls[0]
+        expect(callArguments).toBeDefined()
+        expect(callArguments.length).toBeGreaterThan(0)
+
+        const shopperLogin: ShopperLogin<ApiClientConfigParams> = callArguments[0]
+        expect(shopperLogin).toBeDefined()
+        expect(shopperLogin.clientConfig).toBeDefined()
+        expect(shopperLogin.clientConfig.fetchOptions).toBeDefined()
+
+        // Ensure fetch options include the expected credentials
+        expect(shopperLogin.clientConfig.fetchOptions.credentials).toBe('include')
+    })
+
+    test('Adds credentials to the fetch options if it is missing', async () => {
+        const configWithFetchOptions = {
+            ...config,
+            fetchOptions: {
+                cache: 'no-cache'
+            }
+        }
+        const auth = new Auth(configWithFetchOptions)
+        await auth.loginGuestUser()
+
+        // Ensure the helper method was called
+        expect(helpers.loginGuestUser).toHaveBeenCalled()
+        expect(helpers.loginGuestUser).toHaveBeenCalledTimes(1)
+
+        // Check that the correct parameters were passed to the helper
+        const callArguments = (helpers.loginGuestUser as jest.Mock).mock.calls[0]
+        expect(callArguments).toBeDefined()
+        expect(callArguments.length).toBeGreaterThan(0)
+
+        const shopperLogin: ShopperLogin<ApiClientConfigParams> = callArguments[0]
+        expect(shopperLogin).toBeDefined()
+        expect(shopperLogin.clientConfig).toBeDefined()
+        expect(shopperLogin.clientConfig.fetchOptions).toBeDefined()
+
+        // Ensure fetch options include the expected credentials
+        expect(shopperLogin.clientConfig.fetchOptions.credentials).toBe('same-origin')
+    })
+})

packages/commerce-sdk-react/src/auth/index.ts

@@ -244,7 +244,13 @@ class Auth {
                 siteId: config.siteId
             },
             throwOnBadResponse: true,
-            fetchOptions: config.fetchOptions
+            // We need to set credentials to 'same-origin' to allow cookies to be set.
+            // This is required as SLAS calls return a dwsid cookie for hybrid sites.
+            // The dwsid value is then passed to the SCAPI as a header maintain the server affinity.
+            fetchOptions: {
+                credentials: 'same-origin',
+                ...config.fetchOptions
+            }
         })
         this.shopperCustomersClient = new ShopperCustomers({
             proxy: config.proxy,
@@ -542,14 +548,16 @@ class Auth {
         responseValue: number | undefined,
         defaultValue: number
     ): number {
-        let value = overrideValue
-
-        if (typeof value !== 'number' || value <= 0 || value > defaultValue) {
+        // Check if overrideValue is valid
+        // if not, log warning and fall back to responseValue or defaultValue
+        const isOverrideValid =
+            typeof overrideValue === 'number' && overrideValue > 0 && overrideValue <= defaultValue
+        if (!isOverrideValid && overrideValue !== undefined) {
             this.logWarning(SLAS_REFRESH_TOKEN_COOKIE_TTL_OVERRIDE_MSG)
-            value = responseValue || defaultValue
         }
 
-        return value
+        // Return the first valid value: overrideValue (if valid), responseValue, or defaultValue
+        return isOverrideValid ? overrideValue : responseValue || defaultValue
     }
 
     /**

packages/pwa-kit-react-sdk/CHANGELOG.md

@@ -1,4 +1,6 @@
 ## v3.9.0-dev (Oct 29, 2024)
+- Fix the performance logging util to not round duration. [#2199](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2199)
+- Add RedirectWithStatus component, allowing finer grained control of rediriects and their status code [#2173](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2173)
 
 ## v3.8.0 (Oct 28, 2024)
 - [Server Affinity] - Attach dwsid to SCAPI request headers [#2090](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2090)

packages/pwa-kit-react-sdk/src/ssr/server/react-rendering.js

@@ -239,7 +239,7 @@ export const render = async (req, res, next) => {
     }
 
     if (redirectUrl) {
-        res.redirect(302, redirectUrl)
+        res.redirect(routerContext.status || 302, redirectUrl)
     } else {
         res.status(status).send(html)
     }

packages/pwa-kit-react-sdk/src/ssr/server/react-rendering.test.js

@@ -58,6 +58,7 @@ jest.mock('../universal/routes', () => {
     const React = require('react')
     const PropTypes = require('prop-types')
     const errors = require('../universal/errors')
+    const RedirectWithStatus = require('../universal/components/redirect-with-status').default
     const {Redirect} = require('react-router-dom')
     const {Helmet} = require('react-helmet')
     const {useQuery} = require('@tanstack/react-query')
@@ -183,6 +184,16 @@ jest.mock('../universal/routes', () => {
         }
     }
 
+    class RedirectWithStatusPage extends React.Component {
+        static getProps() {
+            return Promise.resolve()
+        }
+
+        render() {
+            return <RedirectWithStatus to="/elsewhere/" status={301} />
+        }
+    }
+
     class HelmetPage extends React.Component {
         static getProps() {
             return Promise.resolve()
@@ -305,6 +316,10 @@ jest.mock('../universal/routes', () => {
                 path: '/redirect/',
                 component: RedirectPage
             },
+            {
+                path: '/redirectWithStatus/',
+                component: RedirectWithStatusPage
+            },
             {
                 path: '/init-sets-status/',
                 component: InitSetsStatusPage
@@ -538,6 +553,13 @@ describe('The Node SSR Environment', () => {
                 expect(res.statusCode).toBe(302)
             }
         },
+        {
+            description: `can redirect with HTTP 301 status`,
+            req: {url: '/redirectWithStatus/'},
+            assertions: (res) => {
+                expect(res.statusCode).toBe(301)
+            }
+        },
         {
             description: `500 on unknown errors in getProps`,
             req: {url: '/unknown-error/'},

packages/pwa-kit-react-sdk/src/ssr/universal/components/redirect-with-status/index.jsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2024, 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 React from 'react'
+import {Redirect, withRouter} from 'react-router-dom'
+import PropTypes from 'prop-types'
+
+/**
+ * The `RedirectWithStatus` component is used to specify a different status code when redirecting via
+ * the Redirect component.
+ * The default redirect behavior when this component is not used is to set a 302 status.
+ *
+ * @param {number} status - The HTTP status code. Defaults to 302 if not specified
+ * @param {object} staticContext - The router context
+ * @param {string} to - The redirect's target path
+ */
+const RedirectWithStatus = ({status = 302, staticContext, ...props}) => {
+    // Handle server-side rendering
+    if (staticContext) {
+        staticContext.status = status
+    }
+
+    return <Redirect {...props} />
+}
+
+RedirectWithStatus.propTypes = {
+    status: PropTypes.number,
+    staticContext: PropTypes.object,
+    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+}
+
+export default withRouter(RedirectWithStatus)

packages/pwa-kit-react-sdk/src/ssr/universal/components/redirect-with-status/index.test.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2024, salesforce.com, 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 React from 'react'
+import {render} from '@testing-library/react'
+import {Router, StaticRouter, Route} from 'react-router-dom'
+import {createMemoryHistory} from 'history'
+import RedirectWithStatus from './index'
+
+describe('RedirectWithStatus', () => {
+    test('Redirects if no status or context is provided', () => {
+        const targetUrl = '/target'
+        const history = createMemoryHistory()
+        history.push('/redirect')
+        render(
+            <Router history={history}>
+                <Route path="/redirect">
+                    <RedirectWithStatus to={targetUrl} />
+                </Route>
+            </Router>
+        )
+        expect(history.location.pathname).toBe(targetUrl)
+    })
+    test('Redirect renders with correct status', async () => {
+        const context = {}
+        const status = 303
+        const targetUrl = '/target'
+
+        render(
+            <StaticRouter location="/redirect" context={context}>
+                <Route path="/redirect">
+                    <RedirectWithStatus status={status} to={targetUrl} />
+                </Route>
+            </StaticRouter>
+        )
+
+        expect(context.status).toBe(status)
+        expect(context.url).toBe(targetUrl)
+    })
+})

packages/pwa-kit-react-sdk/src/utils/performance.js

@@ -53,7 +53,7 @@ export default class PerformanceTimer {
     buildServerTimingHeader() {
         const header = this.metrics
             .map((metric) => {
-                return `${metric.name};dur=${metric.duration}`
+                return `${metric.name};dur=${metric.duration.toFixed(2)}`
             })
             .join(', ')
 
@@ -117,7 +117,7 @@ export default class PerformanceTimer {
             if (startMark) {
                 const measurement = {
                     name,
-                    duration: (timestamp - startMark.timestamp).toFixed(2),
+                    duration: timestamp - startMark.timestamp,
                     detail: options.detail
                 }
                 this.metrics.push(measurement)

packages/template-retail-react-app/CHANGELOG.md

@@ -1,7 +1,10 @@
 ## v5.1.0-dev (TBD)
 
+- [BUG] Fixed GET /shopper-context API calls being made without the usid [#2206](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2206)
+- Update test data references to 2024, and unify to 01/2040 [#2196](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2197)
+- Fixed failing checkout tests [#2195](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2195)
 - [BUG] Fixed "getCheckboxProps is not a function" when rendering checkout page in generated app.[#2140](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2140)
-- Replace transfer basket call with merge basket on checkout [#2138])(https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2138)
+- Replace transfer basket call with merge basket on checkout [#2138](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2138)
 
 ### Accessibility Improvements
 - [a11y] Fix LinkList component to follow a11y practise [#2098])(https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2098)