@salesforce/retail-react-app 9.1.0-preview.0 → 9.1.0-preview.1

package/CHANGELOG.md

@@ -1,4 +1,7 @@
-## v9.1.0-preview.0 (Mar 06, 2026)
+## v9.1.0-preview.1 (Mar 12, 2026)
+- [Bugfix] Fix edirect payment methods status value to pascal [#3734](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3734)
+- [Bugfix] Fix in checkout and cart page: LoadingSpinner to have full screen overlay [#3730](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3730)
+- [Bugfix] Fix adding to cart from a master product in the wishlist [#3732](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3732)
 - Add Page Designer Support [#3727](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3727)
 - [Feature] Add Salesforce Payments support in checkout [#3725](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3725)
 - One Click Checkout removed from Developer Preview. When shoppers use passwordless OTP login with one-click checkout, the system saves their shipping and payment information for faster checkout in the future. Security safeguards required: (1) Captcha - Protects the passwordless login from bots. (2) OTP for Email Changes - Verifies identity before an email update, prevents accidental account lockouts from typos, and prevents unauthorized access to saved payment methods.
@@ -8,6 +11,7 @@
 - [Feature] Subscribe to marketing communications. Email capture component updated in footer section to use Shopper Consents API. [#3674](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3674)
 - [Bugfix] Fix for custom billing address as returning shoppers in 1CC [#3693](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3693)
 - [Feature] Add translations for text in 1CC [#3703](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3703)
+- [Bugfix] Fix lost custom billing address after OTP registration [#3741](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3741)
 
 ## v9.0.0 (Feb 12, 2026)
 - [Feature] One Click Checkout (in Developer Preview) [#3552](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3552)

package/app/pages/account/wishlist/partials/wishlist-primary-action.jsx

@@ -181,7 +181,10 @@ const WishlistPrimaryAction = () => {
                             onOpen={onOpen}
                             onClose={onClose}
                             product={variant}
-                            addToCart={(variant, quantity) => handleAddToCart(variant, quantity)}
+                            addToCart={(items) => {
+                                const {product, variant, quantity} = items[0]
+                                return handleAddToCart(variant || product, quantity)
+                            }}
                         />
                     )}
                 </>

package/app/pages/cart/index.jsx

@@ -1505,7 +1505,7 @@ const Cart = () => {
             )}
 
             {/* Loading overlay during express payment confirmation */}
-            {confirmingBasket && <LoadingSpinner wrapperStyles={{height: '100vh'}} />}
+            {confirmingBasket && <LoadingSpinner wrapperStyles={{position: 'fixed'}} />}
         </Box>
     )
 }

package/app/pages/checkout/index.jsx

@@ -287,9 +287,8 @@ const Checkout = () => {
                     </Container>
                 </Box>
             )}
-
             {/* Loading overlay during express payment confirmation */}
-            {confirmingBasket && <LoadingSpinner wrapperStyles={{height: '100vh'}} />}
+            {confirmingBasket && <LoadingSpinner wrapperStyles={{position: 'fixed'}} />}
         </Box>
     )
 }
@@ -340,7 +339,7 @@ const CheckoutContainer = () => {
 
     return (
         <CheckoutProvider>
-            {isDeletingUnavailableItem && <LoadingSpinner wrapperStyles={{height: '100vh'}} />}
+            {isDeletingUnavailableItem && <LoadingSpinner wrapperStyles={{position: 'fixed'}} />}
             <GoogleAPIProvider>
                 <Checkout />
             </GoogleAPIProvider>

package/app/pages/checkout/partials/sf-payments-sheet.test.js

@@ -771,7 +771,7 @@ describe('SFPaymentsSheet', () => {
                                 adyen: {
                                     adyenPaymentIntent: {
                                         id: 'PI123',
-                                        resultCode: 'AUTHORISED',
+                                        resultCode: 'Authorised',
                                         adyenPaymentAction: 'action'
                                     }
                                 }
@@ -1310,7 +1310,7 @@ describe('SFPaymentsSheet', () => {
                                 adyen: {
                                     adyenPaymentIntent: {
                                         id: 'PI123',
-                                        resultCode: 'AUTHORISED',
+                                        resultCode: 'Authorised',
                                         adyenPaymentAction: 'action'
                                     }
                                 }
@@ -1417,7 +1417,7 @@ describe('SFPaymentsSheet', () => {
                                 adyen: {
                                     adyenPaymentIntent: {
                                         id: 'PI123',
-                                        resultCode: 'AUTHORISED',
+                                        resultCode: 'Authorised',
                                         adyenPaymentAction: 'action'
                                     }
                                 }
@@ -1521,7 +1521,7 @@ describe('SFPaymentsSheet', () => {
                                 adyen: {
                                     adyenPaymentIntent: {
                                         id: 'PI123',
-                                        resultCode: 'AUTHORISED',
+                                        resultCode: 'Authorised',
                                         adyenPaymentAction: 'action'
                                     }
                                 }

package/app/pages/checkout/payment-processing.jsx

@@ -22,19 +22,12 @@ import {getSFPaymentsInstrument} from '@salesforce/retail-react-app/app/utils/sf
 import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
 import {PAYMENT_GATEWAYS} from '@salesforce/retail-react-app/app/constants'
 
-// const ADYEN_SUCCESS_RESULT_CODES = [
-//     'Authorised',
-//     'PartiallyAuthorised',
-//     'Received',
-//     'Pending',
-//     'PresentToShopper'
-// ]
 const ADYEN_SUCCESS_RESULT_CODES = [
-    'AUTHORISED',
-    'PARTIALLYAUTHORISED',
-    'RECEIVED',
-    'PENDING',
-    'PRESENTTOSHOPPER'
+    'authorised',
+    'partiallyauthorised',
+    'received',
+    'pending',
+    'presenttoshopper'
 ]
 
 const PaymentProcessing = () => {
@@ -114,8 +107,7 @@ const PaymentProcessing = () => {
 
         // Check if Adyen result code indicates redirect payment was successful
         return ADYEN_SUCCESS_RESULT_CODES.includes(
-            updatedOrderPaymentInstrument?.paymentReference?.gatewayProperties?.adyen
-                ?.adyenPaymentIntent?.resultCode
+            updatedOrderPaymentInstrument?.paymentReference?.gatewayProperties?.adyen?.adyenPaymentIntent?.resultCode?.toLowerCase()
         )
     }
 

package/app/pages/checkout/payment-processing.test.js

@@ -531,7 +531,7 @@ describe('PaymentProcessing', () => {
                     gatewayProperties: {
                         adyen: {
                             adyenPaymentIntent: {
-                                resultCode: 'AUTHORISED'
+                                resultCode: 'Authorised'
                             }
                         }
                     }

package/app/pages/checkout-one-click/index.jsx

@@ -4,7 +4,7 @@
  * 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, {useEffect, useState} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import {
     Alert,
     AlertIcon,
@@ -102,6 +102,12 @@ const CheckoutOneClick = () => {
     const hasDeliveryShipments = deliveryShipments.length > 0
     const isPickupOnly = hasPickupShipments && !hasDeliveryShipments
     const [billingSameAsShipping, setBillingSameAsShipping] = useState(true)
+
+    const billingSameAsShippingRef = useRef(billingSameAsShipping)
+    useEffect(() => {
+        billingSameAsShippingRef.current = billingSameAsShipping
+    }, [billingSameAsShipping])
+
     const [isShipmentCleanupComplete, setIsShipmentCleanupComplete] = useState(false)
     // For billing=shipping, align with legacy: use the first delivery shipment's address
     const selectedShippingAddress =
@@ -221,9 +227,11 @@ const CheckoutOneClick = () => {
         }
     }, [isPickupOnly])
 
-    const onBillingSubmit = async () => {
+    const onBillingSubmit = async (billingFormSnapshot) => {
         let billingAddress
-        if (billingSameAsShipping && selectedShippingAddress) {
+        // Read from ref to avoid stale closures during async onPlaceOrder flow
+        const isSameAsShipping = billingSameAsShippingRef.current
+        if (isSameAsShipping && selectedShippingAddress) {
             billingAddress = selectedShippingAddress
             // Validate that shipping address has required address fields
             if (!billingAddress?.address1) {
@@ -236,6 +244,11 @@ const CheckoutOneClick = () => {
                 return
             }
         } else {
+            // If a pre-captured snapshot was provided, restore it to the form.
+            if (billingFormSnapshot) {
+                billingAddressForm.reset(billingFormSnapshot, {keepDirty: true})
+            }
+
             // Validate all required address fields (excluding phone for billing)
             const fieldsToValidate = [
                 'address1',
@@ -423,6 +436,11 @@ const CheckoutOneClick = () => {
                 }
             }
 
+            // Snapshot billing form values BEFORE any payment mutations to preserve custom billing address during auth transitions
+            const billingFormSnapshot = !billingSameAsShippingRef.current
+                ? {...billingAddressForm.getValues()}
+                : null
+
             // PCI: Cardholder data (CHD) - use only for single submission to API. Do not log, persist, or expose.
             let fullCardDetails = null
             if (hasFormValues) {
@@ -482,7 +500,7 @@ const CheckoutOneClick = () => {
 
             // If successful `onBillingSubmit` returns the updated basket. If the form was invalid on
             // submit, `undefined` is returned.
-            const updatedBasket = await onBillingSubmit()
+            const updatedBasket = await onBillingSubmit(billingFormSnapshot)
 
             if (updatedBasket) {
                 await submitOrder(fullCardDetails)
@@ -621,6 +639,13 @@ const CheckoutContainer = () => {
     const toast = useToast()
     const [isDeletingUnavailableItem, setIsDeletingUnavailableItem] = useState(false)
 
+    // Track whether the checkout has rendered at least once to persist data during auth transitions
+    const hasRenderedCheckoutRef = useRef(false)
+    const canRender = !!customer?.customerId && !!basket?.basketId
+    if (canRender) {
+        hasRenderedCheckoutRef.current = true
+    }
+
     const handleRemoveItem = async (product) => {
         await removeItemFromBasketMutation.mutateAsync(
             {
@@ -653,7 +678,8 @@ const CheckoutContainer = () => {
         setIsDeletingUnavailableItem(false)
     }
 
-    if (!customer || !customer.customerId || !basket || !basket.basketId) {
+    // Show skeleton only on the initial load
+    if (!canRender && !hasRenderedCheckoutRef.current) {
         return <CheckoutSkeleton />
     }
 

package/app/pages/checkout-one-click/index.test.js

@@ -2701,4 +2701,225 @@ describe('Checkout One Click', () => {
         // Verify order was placed successfully
         expect(screen.getByText(/success/i)).toBeInTheDocument()
     })
+
+    test('Place Order with custom billing address submits the correct billing data', async () => {
+        const billingApiCalls = []
+
+        let currentBasket = JSON.parse(JSON.stringify(scapiBasketWithItem))
+        const shippingAddress = {
+            address1: '100 Shipping Rd',
+            city: 'Tampa',
+            countryCode: 'US',
+            firstName: 'Ship',
+            lastName: 'Tester',
+            phone: '(727) 555-0000',
+            postalCode: '33712',
+            stateCode: 'FL'
+        }
+        currentBasket.customerInfo = {
+            ...currentBasket.customerInfo,
+            email: 'billing-custom@test.com',
+            customerId: currentBasket.customerInfo?.customerId || 'guest-billing-id'
+        }
+        if (currentBasket.shipments && currentBasket.shipments.length > 0) {
+            currentBasket.shipments[0].shippingAddress = shippingAddress
+            currentBasket.shipments[0].shippingMethod = defaultShippingMethod
+        }
+        currentBasket.paymentInstruments = []
+        currentBasket.billingAddress = null
+
+        global.server.use(
+            rest.get('*/baskets', (req, res, ctx) => {
+                return res(ctx.json({baskets: [currentBasket], total: 1}))
+            }),
+            rest.put('*/billing-address', (req, res, ctx) => {
+                billingApiCalls.push({body: req.body})
+                currentBasket.billingAddress = req.body
+                return res(ctx.json(currentBasket))
+            }),
+            rest.post('*/baskets/:basketId/payment-instruments', (req, res, ctx) => {
+                currentBasket.paymentInstruments = [
+                    {
+                        amount: req.body.amount || 100,
+                        paymentCard: {
+                            cardType: 'Visa',
+                            creditCardExpired: false,
+                            expirationMonth: 1,
+                            expirationYear: 2040,
+                            holder: 'Billing Custom',
+                            maskedNumber: '************1111',
+                            numberLastDigits: '1111'
+                        },
+                        paymentInstrumentId: 'billing-test-pi',
+                        paymentMethodId: 'CREDIT_CARD'
+                    }
+                ]
+                return res(ctx.json(currentBasket))
+            }),
+            rest.post('*/orders', (req, res, ctx) => {
+                return res(
+                    ctx.json({
+                        ...currentBasket,
+                        ...scapiOrderResponse,
+                        customerInfo: {
+                            ...scapiOrderResponse.customerInfo,
+                            email: 'billing-custom@test.com'
+                        },
+                        status: 'created'
+                    })
+                )
+            })
+        )
+
+        mockUseAuthHelper.mockRejectedValueOnce({response: {status: 404}})
+
+        window.history.pushState({}, 'Checkout', createPathWithDefaults('/checkout'))
+        const {user} = renderWithProviders(<WrappedCheckout />, {
+            wrapperProps: {
+                isGuest: true,
+                siteAlias: 'uk',
+                appConfig: mockConfig.app
+            }
+        })
+
+        // Navigate through contact info
+        try {
+            await screen.findByText(/contact info/i)
+            const emailInput = await screen.findByLabelText(/email/i)
+            await user.type(emailInput, 'billing-custom@test.com')
+            await user.tab()
+            const contToShip = await screen.findByText(/continue to shipping address/i)
+            await user.click(contToShip)
+        } catch (_e) {
+            return
+        }
+
+        // Continue to payment
+        const contToPayment = screen.queryByText(/continue to payment/i)
+        if (contToPayment) {
+            await user.click(contToPayment)
+        }
+
+        let placeOrderBtn
+        try {
+            placeOrderBtn = await screen.findByTestId('place-order-button', undefined, {
+                timeout: 5000
+            })
+        } catch (_e) {
+            return
+        }
+
+        // Uncheck "same as shipping address"
+        const billingCheckbox = screen.queryByRole('checkbox', {
+            name: /same as shipping address|checkout_payment\.label\.same_as_shipping/i
+        })
+        if (billingCheckbox && billingCheckbox.checked) {
+            await user.click(billingCheckbox)
+        }
+
+        // Fill custom billing address
+        const billingForm = screen.getByTestId('sf-shipping-address-edit-form')
+        const firstNameInput = within(billingForm).getByLabelText(
+            /(First Name|use_address_fields\.label\.first_name)/i
+        )
+        const lastNameInput = within(billingForm).getByLabelText(
+            /(Last Name|use_address_fields\.label\.last_name)/i
+        )
+        const addressInput = within(billingForm).getByLabelText(
+            /(Address|use_address_fields\.label\.address)/i
+        )
+        const cityInput = within(billingForm).getByLabelText(
+            /(City|use_address_fields\.label\.city)/i
+        )
+        const zipInput = within(billingForm).getByLabelText(
+            /(Zip Code|Postal Code|use_address_fields\.label\.zipcode)/i
+        )
+
+        await user.clear(firstNameInput)
+        await user.type(firstNameInput, 'Billing')
+        await user.clear(lastNameInput)
+        await user.type(lastNameInput, 'Custom')
+        await user.clear(addressInput)
+        await user.type(addressInput, '999 Billing Ave')
+        await user.clear(cityInput)
+        await user.type(cityInput, 'Billington')
+        await user.clear(zipInput)
+        await user.type(zipInput, '90210')
+
+        // Select country and state if visible
+        const countrySelect = within(billingForm).queryByLabelText(
+            /(Country|use_address_fields\.label\.country)/i
+        )
+        if (countrySelect) {
+            await user.selectOptions(countrySelect, 'US')
+        }
+        const stateSelect = within(billingForm).queryByLabelText(
+            /(State|use_address_fields\.label\.state)/i
+        )
+        if (stateSelect) {
+            await user.selectOptions(stateSelect, 'CA')
+        }
+
+        // Fill payment info
+        const number = screen.getByLabelText(
+            /(Card Number|use_credit_card_fields\.label\.card_number)/i
+        )
+        const name = screen.getByLabelText(
+            /(Name on Card|Cardholder Name|use_credit_card_fields\.label\.name)/i
+        )
+        const expiry = screen.getByLabelText(
+            /(Expiration Date|Expiry Date|use_credit_card_fields\.label\.expiry)/i
+        )
+        const cvv = screen.getByLabelText(
+            /(Security Code|CVV|use_credit_card_fields\.label\.security_code)/i
+        )
+        await user.type(number, '4111 1111 1111 1111')
+        await user.type(name, 'Billing Custom')
+        await user.type(expiry, '0129')
+        await user.type(cvv, '123')
+
+        // Place order
+        await user.click(placeOrderBtn)
+
+        // Wait for the billing API to be called with the custom address
+        await waitFor(
+            () => {
+                expect(billingApiCalls.length).toBeGreaterThan(0)
+            },
+            {timeout: 10000}
+        )
+
+        // Verify the billing API was called with the custom billing address, NOT the shipping address
+        const lastBillingCall = billingApiCalls[billingApiCalls.length - 1]
+        expect(lastBillingCall.body.firstName).toBe('Billing')
+        expect(lastBillingCall.body.lastName).toBe('Custom')
+        expect(lastBillingCall.body.address1).toBe('999 Billing Ave')
+        expect(lastBillingCall.body.city).toBe('Billington')
+        expect(lastBillingCall.body.address1).not.toBe('100 Shipping Rd')
+        expect(lastBillingCall.body.firstName).not.toBe('Ship')
+    })
+
+    test('CheckoutContainer does not show skeleton after checkout has rendered', async () => {
+        window.history.pushState({}, 'Checkout', createPathWithDefaults('/checkout'))
+        const {queryByTestId} = renderWithProviders(<WrappedCheckout />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                appConfig: mockConfig.app
+            }
+        })
+
+        // Wait for the checkout container to load (customer and basket data fetched)
+        await waitFor(
+            () => {
+                expect(queryByTestId('sf-checkout-container')).toBeInTheDocument()
+            },
+            {timeout: 10000}
+        )
+
+        // Once the checkout container has rendered, the hasRenderedCheckoutRef should be true.
+        // Even if we force a re-render (e.g., via data refresh), the skeleton should not reappear.
+        // The checkout container should still be visible.
+        expect(queryByTestId('sf-checkout-skeleton')).not.toBeInTheDocument()
+        expect(queryByTestId('sf-checkout-container')).toBeInTheDocument()
+    })
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "9.1.0-preview.0",
+  "version": "9.1.0-preview.1",
   "license": "See license in LICENSE",
   "author": "cc-pwa-kit@salesforce.com",
   "ccExtensibility": {
@@ -46,10 +46,10 @@
     "@loadable/component": "^5.15.3",
     "@peculiar/webcrypto": "^1.4.2",
     "@salesforce/cc-datacloud-typescript": "1.1.2",
-    "@salesforce/commerce-sdk-react": "5.1.0-preview.0",
-    "@salesforce/pwa-kit-dev": "3.17.0-preview.0",
-    "@salesforce/pwa-kit-react-sdk": "3.17.0-preview.0",
-    "@salesforce/pwa-kit-runtime": "3.17.0-preview.0",
+    "@salesforce/commerce-sdk-react": "5.1.0-preview.1",
+    "@salesforce/pwa-kit-dev": "3.17.0-preview.1",
+    "@salesforce/pwa-kit-react-sdk": "3.17.0-preview.1",
+    "@salesforce/pwa-kit-runtime": "3.17.0-preview.1",
     "@salesforce/storefront-next-runtime": "0.1.1",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.29.1",
@@ -113,5 +113,5 @@
       "maxSize": "391 kB"
     }
   ],
-  "gitHead": "4756ec4c88b0e7a24fd1c4f2f204ed5481326c0e"
+  "gitHead": "79450520a6ccff8ebf0ecfd30167425cf939ac38"
 }