@W-20540715 MERGE 1CC TO DEVELOP

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,3 +1,6 @@
+## v4.5.0-dev (Jan 19, 2026)
+- Upgrade to commerce-sdk-isomorphic v4.2.0 and introduce Payment Instrument SCAPI integration [#3552](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3552)
+
 ## v4.4.0-dev (Dec 17, 2025)
 - [Bugfix]Ensure code_verifier can be optional in resetPassword call [#3567](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3567)
 - [Improvement] Strengthening typescript types on custom endpoint options and fetchOptions types [#3589](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3589)

packages/commerce-sdk-react/package.json

@@ -40,7 +40,7 @@
     "version": "node ./scripts/version.js"
   },
   "dependencies": {
-    "commerce-sdk-isomorphic": "4.2.0",
+    "commerce-sdk-isomorphic": "5.0.0-preview.1",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^4.0.0"
   },

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

@@ -7,20 +7,15 @@
 import Auth, {AuthData} from './'
 import {waitFor} from '@testing-library/react'
 import jwt from 'jsonwebtoken'
-import {
-    helpers,
-    ShopperCustomersTypes,
-    ShopperCustomers,
-    ShopperLogin
-} from 'commerce-sdk-isomorphic'
+import {helpers, ShopperCustomersTypes, ShopperCustomers} 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 {ApiClientConfigParams, RequireKeys} from '../hooks/types'
+import {RequireKeys} from '../hooks/types'
 
 const baseCustomer: RequireKeys<ShopperCustomersTypes.Customer, 'login'> = {
     customerId: 'customerId',
@@ -70,7 +65,8 @@ jest.mock('commerce-sdk-isomorphic', () => {
                 fetchOptions: {
                     credentials: config?.fetchOptions?.credentials || 'same-origin'
                 }
-            }
+            },
+            authorizePasswordlessCustomer: jest.fn().mockResolvedValue({})
         }))
     }
 })
@@ -923,29 +919,36 @@ describe('Auth', () => {
 
     test('authorizePasswordless calls isomorphic authorizePasswordless', async () => {
         const auth = new Auth(config)
+        const slasClient = (auth as any).client
         await auth.authorizePasswordless({
             callbackURI: 'callbackURI',
             userid: 'userid',
             mode: 'callback'
         })
-        expect(helpers.authorizePasswordless).toHaveBeenCalled()
-        const functionArg = (helpers.authorizePasswordless as jest.Mock).mock.calls[0][0]
+        expect(slasClient.authorizePasswordlessCustomer).toHaveBeenCalled()
+        const functionArg = (slasClient.authorizePasswordlessCustomer as jest.Mock).mock.calls[0][0]
         expect(functionArg).toMatchObject({
-            parameters: {
-                callbackURI: 'callbackURI',
-                userid: 'userid',
-                mode: 'callback'
+            body: {
+                user_id: 'userid',
+                mode: 'callback',
+                channel_id: 'siteId',
+                callback_uri: 'callbackURI'
             }
         })
     })
 
     test('authorizePasswordless sets mode to sms as configured', async () => {
         const auth = new Auth(configPasswordlessSms)
+        const slasClient = (auth as any).client
         await auth.authorizePasswordless({userid: 'userid'})
-        expect(helpers.authorizePasswordless).toHaveBeenCalled()
-        const functionArg = (helpers.authorizePasswordless as jest.Mock).mock.calls[0][0]
+        expect(slasClient.authorizePasswordlessCustomer).toHaveBeenCalled()
+        const functionArg = (slasClient.authorizePasswordlessCustomer as jest.Mock).mock.calls[0][0]
         expect(functionArg).toMatchObject({
-            parameters: {userid: 'userid', mode: 'sms'}
+            body: {
+                user_id: 'userid',
+                mode: 'sms',
+                channel_id: 'siteId'
+            }
         })
     })
 

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

@@ -21,7 +21,6 @@ import {
     isOriginTrusted,
     onClient,
     getDefaultCookieAttributes,
-    isAbsoluteUrl,
     stringToBase64,
     extractCustomParameters
 } from '../utils'
@@ -96,10 +95,20 @@ type AuthorizePasswordlessParams = {
     callbackURI?: string
     userid: string
     mode?: string
+    locale?: string
+    /** When true, SLAS will register the customer as part of the passwordless flow */
+    register_customer?: boolean | string
+    /** Optional registration details forwarded to SLAS when register_customer=true */
+    first_name?: string
+    last_name?: string
+    email?: string
+    phone_number?: string
 }
 
 type GetPasswordLessAccessTokenParams = {
     pwdlessLoginToken: string
+    /** When true, SLAS will register the customer if not already registered */
+    register_customer?: boolean | string
 }
 
 /**
@@ -125,6 +134,8 @@ type AuthDataKeys =
     | typeof DWSID_COOKIE_NAME
     | 'code_verifier'
     | 'uido'
+    | 'idp_refresh_token'
+    | 'dnt'
 
 type AuthDataMap = Record<
     AuthDataKeys,
@@ -1268,26 +1279,55 @@ class Auth {
      * A wrapper method for commerce-sdk-isomorphic helper: authorizePasswordless.
      */
     async authorizePasswordless(parameters: AuthorizePasswordlessParams) {
+        const slasClient = this.client
         const usid = this.get('usid')
         const callbackURI = parameters.callbackURI || this.passwordlessLoginCallbackURI
-        const finalMode = callbackURI ? 'callback' : parameters.mode || 'sms'
+        const finalMode = parameters.mode || (callbackURI ? 'callback' : 'sms')
 
-        const res = await helpers.authorizePasswordless({
-            slasClient: this.client,
-            credentials: {
-                clientSecret: this.clientSecret
+        const options = {
+            headers: {
+                Authorization: ''
             },
             parameters: {
-                ...(callbackURI && {callbackURI: callbackURI}),
+                ...(parameters.register_customer !== undefined && {
+                    register_customer:
+                        typeof parameters.register_customer === 'boolean'
+                            ? String(parameters.register_customer)
+                            : parameters.register_customer
+                })
+            },
+            body: {
+                user_id: parameters.userid,
+                mode: finalMode,
+                locale: parameters.locale,
+                // Include usid and site as required by SLAS
                 ...(usid && {usid}),
-                userid: parameters.userid,
-                mode: finalMode
+                channel_id: slasClient.clientConfig.parameters.siteId,
+                ...(finalMode === 'callback' && callbackURI && {callback_uri: callbackURI}),
+                ...(parameters.last_name && {last_name: parameters.last_name}),
+                ...(parameters.email && {email: parameters.email}),
+                ...(parameters.first_name && {first_name: parameters.first_name}),
+                ...(parameters.phone_number && {phone_number: parameters.phone_number})
             }
-        })
-        if (res && res.status !== 200) {
-            const errorData = await res.json()
-            throw new Error(`${res.status} ${String(errorData.message)}`)
+        } as {
+            headers?: {[key: string]: string}
+            parameters?: Record<string, string>
+            body: ShopperLoginTypes.authorizePasswordlessCustomerBodyType &
+                helpers.CustomRequestBody
+        }
+
+        // Use Basic auth header when using private client
+        if (this.clientSecret) {
+            options.headers = options.headers || {}
+            options.headers.Authorization = `Basic ${stringToBase64(
+                `${slasClient.clientConfig.parameters.clientId}:${this.clientSecret}`
+            )}`
+        } else {
+            // If not using private client, avoid sending Authorization header
+            delete options.headers
         }
+
+        const res = await slasClient.authorizePasswordlessCustomer(options)
         return res
     }
 
@@ -1297,14 +1337,22 @@ class Auth {
     async getPasswordLessAccessToken(parameters: GetPasswordLessAccessTokenParams) {
         const pwdlessLoginToken = parameters.pwdlessLoginToken || ''
         const dntPref = this.getDnt({includeDefaults: true})
+        const usid = this.get('usid')
         const token = await helpers.getPasswordLessAccessToken({
             slasClient: this.client,
             credentials: {
                 clientSecret: this.clientSecret
             },
             parameters: {
                 pwdlessLoginToken,
-                dnt: dntPref !== undefined ? String(dntPref) : undefined
+                dnt: dntPref !== undefined ? String(dntPref) : undefined,
+                ...(usid && {usid}),
+                ...(parameters.register_customer !== undefined && {
+                    register_customer:
+                        typeof parameters.register_customer === 'boolean'
+                            ? String(parameters.register_customer)
+                            : parameters.register_customer
+                })
             }
         })
         const isGuest = false

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

@@ -67,6 +67,36 @@ export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
             ]
         }
     },
+    updateCustomerPaymentInstrument(customerId, {parameters}, response) {
+        const newParams = {...parameters}
+        return {
+            update: [
+                {
+                    queryKey: getCustomerPaymentInstrument.queryKey(newParams)
+                },
+                {
+                    queryKey: getCustomer.queryKey(newParams),
+                    updater: createUpdateFunction((customer: Customer) => {
+                        if (!customer.paymentInstruments) return customer
+                        const idx = customer.paymentInstruments.findIndex(
+                            ({paymentInstrumentId}) =>
+                                paymentInstrumentId === parameters.paymentInstrumentId
+                        )
+                        if (idx >= 0) {
+                            customer.paymentInstruments[idx] = response as any
+                            // If this instrument is now default, unset others
+                            if ((response as any)?.default) {
+                                customer.paymentInstruments = customer.paymentInstruments.map(
+                                    (pi, i) => (i === idx ? pi : {...pi, default: false})
+                                ) as any
+                            }
+                        }
+                        return customer
+                    })
+                }
+            ]
+        }
+    },
     createCustomerPaymentInstrument(customerId, {parameters}, response) {
         const newParams = {...parameters, paymentInstrumentId: response.paymentInstrumentId}
         return {

packages/commerce-sdk-react/src/hooks/ShopperCustomers/index.test.ts

@@ -18,6 +18,7 @@ describe('Shopper Customers hooks', () => {
         // or add it to the `expected` array with a comment explaining "TODO" or "never" (and why).
         expect(unimplemented).toEqual([
             'getExternalProfile', // TODO: Implement when the endpoint exits closed beta
+            'getPublicProductListItems', // TODO: Implement when the endpoint exits closed beta
             'registerExternalProfile' // TODO: Implement when the endpoint exits closed beta
         ])
     })

packages/commerce-sdk-react/src/hooks/ShopperCustomers/mutation.test.ts

@@ -54,7 +54,8 @@ const basePaymentInstrument: ShopperCustomersTypes.CustomerPaymentInstrument = {
     paymentBankAccount: {},
     paymentCard: {cardType: 'fake'},
     paymentInstrumentId: 'paymentInstrumentId',
-    paymentMethodId: 'paymentMethodId'
+    paymentMethodId: 'paymentMethodId',
+    default: false
 }
 const baseCustomer: RequireKeys<
     ShopperCustomersTypes.Customer,
@@ -176,6 +177,50 @@ describe('ShopperCustomers mutations', () => {
             expect(result.current.mutation.data).toBeUndefined()
             assertRemoveQuery(result.current.query)
         })
+        test('`updateCustomerPaymentInstrument` updates cache on success', async () => {
+            // 0. Setup
+            const customer = baseCustomer
+            const oldData = basePaymentInstrument
+            const newData: ShopperCustomersTypes.CustomerPaymentInstrument = {
+                ...basePaymentInstrument,
+                default: true
+            }
+            const options = createOptions<'updateCustomerPaymentInstrument'>({
+                // Only updating default flag for this test
+                default: true as any
+            })
+
+            mockQueryEndpoint(customersEndpoint, customer) // getCustomer
+            mockQueryEndpoint(customersEndpoint, oldData) // getCustomerPaymentInstrument
+            mockMutationEndpoints(customersEndpoint, newData) // this mutation
+            mockQueryEndpoint(customersEndpoint, {test: 'this should not get used'}) // getCustomer refetch
+            mockQueryEndpoint(customersEndpoint, {test: 'this should not get used'}) // getCustomerPaymentInstrument refetch
+
+            const {result} = renderHookWithProviders(() => ({
+                customer: queries.useCustomer(queryOptions),
+                mutation: useShopperCustomersMutation('updateCustomerPaymentInstrument'),
+                query: queries.useCustomerPaymentInstrument(queryOptions)
+            }))
+
+            // 1. Populate cache with initial data
+            await waitAndExpectSuccess(() => result.current.customer)
+            await waitAndExpectSuccess(() => result.current.query)
+            expect(result.current.customer.data).toEqual(customer)
+            expect(result.current.query.data).toEqual(oldData)
+
+            // 2. Do update mutation
+            act(() => result.current.mutation.mutate(options))
+            await waitAndExpectSuccess(() => result.current.mutation)
+            expect(result.current.mutation.data).toEqual(newData)
+            // query updated
+            assertUpdateQuery(result.current.query, newData)
+            // customer cache updated (instrument replaced)
+            const expectedCustomer = {
+                ...customer,
+                paymentInstruments: [newData]
+            }
+            assertUpdateQuery(result.current.customer, expectedCustomer as any)
+        })
         test('`removeCustomerAddress` updates cache on success', async () => {
             // 0. Setup
             const customer = baseCustomer

packages/commerce-sdk-react/src/hooks/ShopperCustomers/mutation.ts

@@ -73,6 +73,11 @@ export const ShopperCustomersMutations = {
      * @returns A TanStack Query mutation hook for interacting with the Shopper Customers `createCustomerPaymentInstrument` endpoint.
      */
     CreateCustomerPaymentInstrument: 'createCustomerPaymentInstrument',
+    /**
+     * Updates a customer's payment instrument.
+     * @returns A TanStack Query mutation hook for interacting with the Shopper Customers `updateCustomerPaymentInstrument` endpoint.
+     */
+    UpdateCustomerPaymentInstrument: 'updateCustomerPaymentInstrument',
     /**
      * Deletes a customer's payment instrument.
      * @returns A TanStack Query mutation hook for interacting with the Shopper Customers `deleteCustomerPaymentInstrument` endpoint.