@salesforce/retail-react-app 9.0.0-preview.0 → 9.0.0-preview.2

package/CHANGELOG.md

@@ -1,5 +1,8 @@
+## v9.0.0-preview.1 (Feb 09, 2026)
+- [Bugfix] 1CC Bug Fixes [#3638](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3638)
+
 ## v9.0.0-preview.0 (Feb 06, 2026)
-- [Feature] One Click Checkout [#3552](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3552)
+- [Feature] One Click Checkout (in Developer Preview) [#3552](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3552)
 - [Feature] Add `fuzzyPathMatching` to reduce computational overhead of route generation at time of application load [#3530](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3530)
 - [Bugfix] Fix Passwordless Login landingPath, Reset Password landingPath, and Social Login redirectUri value in config not being used [#3560](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3560)
 - [Feature] PWA Integration with OMS

package/app/components/otp-auth/index.test.js

@@ -254,7 +254,6 @@ describe('OtpAuth', () => {
             })
             const mockVerify = jest.fn().mockReturnValue(verifyingPromise)
 
-            const user = userEvent.setup()
             renderWithProviders(
                 <OtpAuth
                     isOpen={true}

package/app/components/passwordless-login/index.jsx

@@ -20,7 +20,7 @@ const PasswordlessLogin = ({
     handlePasswordlessLoginClick,
     isSocialEnabled = false,
     idps = [],
-    setLoginType = noop
+    setLoginType: _setLoginType = noop
 }) => {
     const [showPasswordView, setShowPasswordView] = useState(false)
 

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

@@ -31,7 +31,9 @@ import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import {
     useCheckout,
-    CheckoutProvider
+    CheckoutProvider,
+    getCheckoutGuestChoiceFromStorage,
+    setCheckoutGuestChoiceInStorage
 } from '@salesforce/retail-react-app/app/pages/checkout-one-click/util/checkout-context'
 import ContactInfo from '@salesforce/retail-react-app/app/pages/checkout-one-click/partials/one-click-contact-info'
 import PickupAddress from '@salesforce/retail-react-app/app/pages/checkout-one-click/partials/one-click-pickup-address'
@@ -55,16 +57,17 @@ import {
     getPaymentInstrumentCardType,
     getMaskCreditCardNumber
 } from '@salesforce/retail-react-app/app/utils/cc-utils'
-import {nanoid} from 'nanoid'
 
 const CheckoutOneClick = () => {
     const {formatMessage} = useIntl()
     const navigate = useNavigation()
-    const {step, STEPS, contactPhone} = useCheckout()
+    const {step, STEPS} = useCheckout()
     const showToast = useToast()
     const [isLoading, setIsLoading] = useState(false)
     const [enableUserRegistration, setEnableUserRegistration] = useState(false)
-    const [registeredUserChoseGuest, setRegisteredUserChoseGuest] = useState(false)
+    const [registeredUserChoseGuest, setRegisteredUserChoseGuest] = useState(
+        getCheckoutGuestChoiceFromStorage
+    )
     const [shouldSavePaymentMethod, setShouldSavePaymentMethod] = useState(false)
     const [isOtpLoading, setIsOtpLoading] = useState(false)
     const [isPlacingOrder, setIsPlacingOrder] = useState(false)
@@ -119,8 +122,6 @@ const CheckoutOneClick = () => {
         ShopperBasketsMutations.UpdateBillingAddressForBasket
     )
     const {mutateAsync: createOrder} = useShopperOrdersMutation(ShopperOrdersMutations.CreateOrder)
-    const createCustomerAddress = useShopperCustomersMutation('createCustomerAddress')
-    const updateCustomer = useShopperCustomersMutation('updateCustomer')
 
     const handleSavePreferenceChange = (shouldSave) => {
         setShouldSavePaymentMethod(shouldSave)
@@ -382,87 +383,9 @@ const CheckoutOneClick = () => {
                         fullCardDetails
                     )
                 }
-
-                // For newly registered guests only, persist shipping address when billing same as shipping
-                // Skip saving pickup/store addresses - only save delivery addresses
-                // For multi-shipment orders, save all delivery addresses with the first one as default
-                if (
-                    enableUserRegistration &&
-                    currentCustomer?.isRegistered &&
-                    !registeredUserChoseGuest
-                ) {
-                    try {
-                        const customerId = order.customerInfo?.customerId
-                        if (!customerId) return
-
-                        // Get all delivery shipments (not pickup) from the order
-                        // This handles both single delivery and multi-shipment orders
-                        // For BOPIS orders, pickup shipments are filtered out
-                        const deliveryShipments =
-                            order?.shipments?.filter(
-                                (shipment) =>
-                                    !isPickupShipment(shipment) && shipment.shippingAddress
-                            ) || []
-
-                        if (deliveryShipments.length > 0) {
-                            // Save all delivery addresses, with the first one as preferred
-                            for (let i = 0; i < deliveryShipments.length; i++) {
-                                const shipment = deliveryShipments[i]
-                                const shipping = shipment.shippingAddress
-                                if (!shipping) continue
-
-                                // Whitelist fields and strip non-customer fields (e.g., id, _type)
-                                const {
-                                    address1,
-                                    address2,
-                                    city,
-                                    countryCode,
-                                    firstName,
-                                    lastName,
-                                    phone,
-                                    postalCode,
-                                    stateCode
-                                } = shipping || {}
-
-                                await createCustomerAddress.mutateAsync({
-                                    parameters: {customerId},
-                                    body: {
-                                        addressId: nanoid(),
-                                        preferred: i === 0, // First address is preferred
-                                        address1,
-                                        address2,
-                                        city,
-                                        countryCode,
-                                        firstName,
-                                        lastName,
-                                        phone,
-                                        postalCode,
-                                        stateCode
-                                    }
-                                })
-                            }
-                        }
-
-                        // Persist phone number as phoneHome for newly registered guest shoppers
-                        const phoneHome = basket?.billingAddress?.phone || contactPhone
-                        if (phoneHome) {
-                            await updateCustomer.mutateAsync({
-                                parameters: {customerId},
-                                body: {phoneHome}
-                            })
-                        }
-                    } catch (_e) {
-                        // Only surface error if shopper opted to register/save details; otherwise fail silently
-                        showError(
-                            formatMessage({
-                                id: 'checkout.error.cannot_save_address',
-                                defaultMessage: 'Could not save shipping address.'
-                            })
-                        )
-                    }
-                }
             }
 
+            setCheckoutGuestChoiceInStorage(false)
             navigate(`/checkout/confirmation/${order.orderNo}`)
         } catch (error) {
             const message = formatMessage({

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

@@ -751,11 +751,6 @@ describe('Checkout One Click', () => {
             })
         ).toBeInTheDocument()
 
-        // Billing address should default to the shipping address
-
-        // Should display billing address that matches shipping address
-        expect(step3Content.getByText('123 Main St')).toBeInTheDocument()
-
         // Edit billing address
         // Toggle to edit billing address (not via same-as-shipping label in this flow)
         // Click the checkbox by role if present; otherwise skip
@@ -1208,10 +1203,6 @@ describe('Checkout One Click', () => {
             })
         ).toBeInTheDocument()
 
-        // Verify billing address is displayed (it shows John Smith from the mock)
-        expect(step3Content.getByText('John Smith')).toBeInTheDocument()
-        expect(step3Content.getByText('123 Main St')).toBeInTheDocument()
-
         // Verify UserRegistration component is hidden for registered customers
         expect(screen.queryByTestId('sf-user-registration-content')).not.toBeInTheDocument()
 
@@ -2650,7 +2641,7 @@ describe('Checkout One Click', () => {
 
         // Click "Edit Payment Info" button
         const editPaymentButton = screen.getByRole('button', {
-            name: /toggle_card.action.editPaymentInfo|Edit Payment Info/i
+            name: /toggle_card.action.changePaymentInfo|Change/i
         })
         await user.click(editPaymentButton)
 

package/app/pages/checkout-one-click/partials/one-click-contact-info.jsx

@@ -26,7 +26,10 @@ import {
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useForm} from 'react-hook-form'
 import {FormattedMessage, useIntl} from 'react-intl'
-import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout-one-click/util/checkout-context'
+import {
+    useCheckout,
+    setCheckoutGuestChoiceInStorage
+} from '@salesforce/retail-react-app/app/pages/checkout-one-click/util/checkout-context'
 import useLoginFields from '@salesforce/retail-react-app/app/components/forms/useLoginFields'
 import {
     ToggleCard,
@@ -110,7 +113,7 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
     const [isCheckingEmail, setIsCheckingEmail] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [isBlurChecking, setIsBlurChecking] = useState(false)
-    const [, setRegisteredUserChoseGuest] = useState(false)
+    const [registeredUserChoseGuest, setRegisteredUserChoseGuest] = useState(false)
     const [emailError, setEmailError] = useState('')
 
     // Auto-focus the email field when the component mounts
@@ -242,11 +245,19 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
                 lastEmailSentRef.current = normalizedEmail
                 return {isRegistered: true}
             } catch (error) {
-                const message = formatMessage(getAuthorizePasswordlessErrorMessage(error.message))
-                setError(message)
-                // Keep continue button visible if email is valid (for unregistered users)
-                if (isValidEmail(email)) {
+                // 404 = email not registered (guest); treat as guest and continue
+                const isGuestNotFound = String(error?.message || '').includes('404')
+                if (isGuestNotFound && isValidEmail(email)) {
+                    setError('')
                     setShowContinueButton(true)
+                } else {
+                    const message = formatMessage(
+                        getAuthorizePasswordlessErrorMessage(error.message)
+                    )
+                    setError(message)
+                    if (isValidEmail(email)) {
+                        setShowContinueButton(true)
+                    }
                 }
                 // Update the last email sent ref even on error to prevent retrying immediately
                 lastEmailSentRef.current = normalizedEmail
@@ -270,37 +281,11 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
     }
 
     // Handle checkout as guest from OTP modal
-    const handleCheckoutAsGuest = async () => {
-        try {
-            const email = form.getValues('email')
-            const phone = form.getValues('phone')
-            // Update basket with guest email
-            await updateCustomerForBasket.mutateAsync({
-                parameters: {basketId: basket.basketId},
-                body: {email: email}
-            })
-
-            // Save phone number to basket billing address for guest shoppers
-            if (phone) {
-                await updateBillingAddressForBasket.mutateAsync({
-                    parameters: {basketId: basket.basketId},
-                    body: {
-                        ...basket?.billingAddress,
-                        phone: phone
-                    }
-                })
-            }
-
-            // Set the flag that "Checkout as Guest" was clicked
-            setRegisteredUserChoseGuest(true)
-            if (onRegisteredUserChoseGuest) {
-                onRegisteredUserChoseGuest(true)
-            }
-
-            // Proceed to next step (shipping address)
-            goToNextStep()
-        } catch (error) {
-            setError(error.message)
+    const handleCheckoutAsGuest = () => {
+        setRegisteredUserChoseGuest(true)
+        setCheckoutGuestChoiceInStorage(true)
+        if (onRegisteredUserChoseGuest) {
+            onRegisteredUserChoseGuest(true)
         }
     }
 
@@ -359,6 +344,7 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
 
             // Reset guest checkout flag since user is now logged in
             setRegisteredUserChoseGuest(false)
+            setCheckoutGuestChoiceInStorage(false)
             if (onRegisteredUserChoseGuest) {
                 onRegisteredUserChoseGuest(false)
             }
@@ -470,7 +456,7 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
                 return
             }
 
-            if (!result.isRegistered) {
+            if (!result.isRegistered || registeredUserChoseGuest) {
                 // Guest shoppers must provide phone number before proceeding
                 const phone = (formData.phone || '').trim()
                 if (!phone) {
@@ -534,6 +520,9 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
         }
     }
 
+    const customerEmail = customer?.email || form.getValues('email')
+    const customerPhone = customer?.phoneHome || form.getValues('phone')
+
     return (
         <>
             <ToggleCard
@@ -557,8 +546,8 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
                               id: 'checkout_contact_info.action.sign_out'
                           })
                         : formatMessage({
-                              defaultMessage: 'Edit',
-                              id: 'checkout_contact_info.action.edit'
+                              defaultMessage: 'Change',
+                              id: 'checkout_contact_info.action.change'
                           })
                 }
             >
@@ -688,18 +677,14 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
                     </Container>
                 </ToggleCardEdit>
 
-                {(customer?.email || form.getValues('email')) && (
+                {customerEmail ? (
                     <ToggleCardSummary>
                         <Stack spacing={1}>
-                            <Text>{customer?.email || form.getValues('email')}</Text>
-                            {(customer?.phoneHome || form.getValues('phone')) && (
-                                <Text fontSize="sm" color="gray.600">
-                                    {customer?.phoneHome || form.getValues('phone')}
-                                </Text>
-                            )}
+                            <Text>{customerEmail}</Text>
+                            {customerPhone && <Text>{customerPhone}</Text>}
                         </Stack>
                     </ToggleCardSummary>
-                )}
+                ) : null}
             </ToggleCard>
 
             {/* Sign Out Confirmation Dialog */}

package/app/pages/checkout-one-click/partials/one-click-contact-info.test.js

@@ -7,6 +7,7 @@
 import React from 'react'
 import {screen, waitFor, fireEvent, act} from '@testing-library/react'
 import ContactInfo from '@salesforce/retail-react-app/app/pages/checkout-one-click/partials/one-click-contact-info'
+import {setCheckoutGuestChoiceInStorage} from '@salesforce/retail-react-app/app/pages/checkout-one-click/util/checkout-context'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import {rest} from 'msw'
 import {AuthHelpers, useCustomerType} from '@salesforce/commerce-sdk-react'
@@ -79,6 +80,7 @@ jest.mock('@salesforce/retail-react-app/app/hooks/use-current-customer', () => (
 const mockSetContactPhone = jest.fn()
 const mockGoToNextStep = jest.fn()
 jest.mock('@salesforce/retail-react-app/app/pages/checkout-one-click/util/checkout-context', () => {
+    const setCheckoutGuestChoiceInStorage = jest.fn()
     return {
         useCheckout: jest.fn().mockReturnValue({
             customer: null,
@@ -91,7 +93,8 @@ jest.mock('@salesforce/retail-react-app/app/pages/checkout-one-click/util/checko
             goToStep: null,
             goToNextStep: mockGoToNextStep,
             setContactPhone: mockSetContactPhone
-        })
+        }),
+        setCheckoutGuestChoiceInStorage
     }
 })
 
@@ -110,13 +113,17 @@ jest.mock('@salesforce/retail-react-app/app/hooks/use-multi-site', () => ({
 // Mock OtpAuth to expose a verify trigger
 jest.mock('@salesforce/retail-react-app/app/components/otp-auth', () => {
     // eslint-disable-next-line react/prop-types
-    return function MockOtpAuth({isOpen, handleOtpVerification, onCheckoutAsGuest}) {
+    return function MockOtpAuth({isOpen, handleOtpVerification, onCheckoutAsGuest, onClose}) {
+        const handleGuestClick = () => {
+            onCheckoutAsGuest?.()
+            onClose?.()
+        }
         return isOpen ? (
             <div>
                 <div>Confirm it&apos;s you</div>
                 <p>To log in to your account, enter the code sent to your email.</p>
                 <div>
-                    <button type="button" onClick={onCheckoutAsGuest}>
+                    <button type="button" onClick={handleGuestClick}>
                         Checkout as a guest
                     </button>
                     <button type="button">Resend Code</button>
@@ -289,7 +296,8 @@ describe('ContactInfo Component', () => {
                         goToStep: jest.fn(),
                         goToNextStep: jest.fn(),
                         setContactPhone: jest.fn()
-                    })
+                    }),
+                    setCheckoutGuestChoiceInStorage: jest.fn()
                 }
             }
         )
@@ -606,11 +614,10 @@ describe('ContactInfo Component', () => {
         expect(screen.getByText(/Resend Code/i)).toBeInTheDocument()
     })
 
-    test('shows error message when updateCustomerForBasket fails', async () => {
-        // Mock OTP authorization to succeed so modal opens
+    test('clicking "Checkout as a guest" does not update basket or advance step', async () => {
+        // "Checkout as Guest" only closes the modal and sets registeredUserChoseGuest state;
+        // basket is updated when the user later submits the form with phone and clicks Continue.
         mockAuthHelperFunctions[AuthHelpers.AuthorizePasswordless].mutateAsync.mockResolvedValue({})
-        // Mock update to fail when choosing guest
-        mockUpdateCustomerForBasket.mutateAsync.mockRejectedValue(new Error('API Error'))
 
         const {user} = renderWithProviders(<ContactInfo />)
         const emailInput = screen.getByLabelText('Email')
@@ -625,22 +632,17 @@ describe('ContactInfo Component', () => {
         await user.click(submitButton)
         await screen.findByTestId('otp-verify')
 
-        // Click "Checkout as a guest" which triggers updateCustomerForBasket and should set error
+        // Click "Checkout as a guest" — should not call basket mutations or goToNextStep
         await user.click(screen.getByText(/Checkout as a guest/i))
 
         await waitFor(() => {
-            expect(mockUpdateCustomerForBasket.mutateAsync).toHaveBeenCalled()
-        })
-        // Error alert should be rendered; component maps errors via getPasswordlessErrorMessage to generic message
-        await waitFor(() => {
-            const alerts = screen.queryAllByRole('alert')
-            const hasError = alerts.some(
-                (n) =>
-                    n.textContent?.includes('Something went wrong') ||
-                    n.textContent?.includes('API Error')
-            )
-            expect(hasError).toBe(true)
+            expect(mockUpdateCustomerForBasket.mutateAsync).not.toHaveBeenCalled()
+            expect(mockGoToNextStep).not.toHaveBeenCalled()
         })
+        // Modal closes; user stays on Contact Info (Continue button visible again)
+        expect(
+            screen.getByRole('button', {name: /continue to shipping address/i})
+        ).toBeInTheDocument()
     })
 
     test('does not proceed to next step when OTP modal is already open on form submission', async () => {
@@ -747,37 +749,41 @@ describe('ContactInfo Component', () => {
         expect(phoneInput.value).toBe('(555) 123-4567')
     })
 
-    test('saves phone number to billing address when guest checks out via "Checkout as Guest" button', async () => {
-        // Mock successful OTP authorization to open modal
+    test('notifies parent when guest chooses "Checkout as Guest" and stays on Contact Info', async () => {
+        // Open OTP modal (registered email), click "Checkout as a guest" — modal closes,
+        // parent is notified via onRegisteredUserChoseGuest(true), user stays on Contact Info.
         mockAuthHelperFunctions[AuthHelpers.AuthorizePasswordless].mutateAsync.mockResolvedValue({})
-        mockUpdateCustomerForBasket.mutateAsync.mockResolvedValue({})
-        mockUpdateBillingAddressForBasket.mutateAsync.mockResolvedValue({})
 
-        const {user} = renderWithProviders(<ContactInfo />)
+        const onRegisteredUserChoseGuestSpy = jest.fn()
+        const {user} = renderWithProviders(
+            <ContactInfo onRegisteredUserChoseGuest={onRegisteredUserChoseGuestSpy} />
+        )
 
         const emailInput = screen.getByLabelText('Email')
-        const phoneInput = screen.getByLabelText('Phone')
-
-        // Enter phone first - use fireEvent to ensure value is set
-        fireEvent.change(phoneInput, {target: {value: '(727) 555-1234'}})
 
-        // Enter email and wait for OTP modal to open
+        // Enter email and open OTP modal (blur triggers registered-user check)
         await user.type(emailInput, validEmail)
         fireEvent.change(emailInput, {target: {value: validEmail}})
         fireEvent.blur(emailInput)
 
-        // Wait for OTP modal to open
         await screen.findByTestId('otp-verify')
 
-        // Click "Checkout as a guest" button
+        // Click "Checkout as a guest" — modal closes; parent is notified; no basket update
         await user.click(screen.getByText(/Checkout as a guest/i))
 
+        expect(onRegisteredUserChoseGuestSpy).toHaveBeenCalledWith(true)
+        expect(setCheckoutGuestChoiceInStorage).toHaveBeenCalledWith(true)
+        expect(mockUpdateCustomerForBasket.mutateAsync).not.toHaveBeenCalled()
+        expect(mockGoToNextStep).not.toHaveBeenCalled()
+
+        // Modal closes; user stays on Contact Info (Continue button visible for entering phone)
         await waitFor(() => {
-            expect(mockUpdateBillingAddressForBasket.mutateAsync).toHaveBeenCalled()
-            const callArgs = mockUpdateBillingAddressForBasket.mutateAsync.mock.calls[0]?.[0]
-            expect(callArgs?.parameters).toMatchObject({basketId: 'test-basket-id'})
-            expect(callArgs?.body?.phone).toMatch(/727/)
+            expect(screen.queryByText("Confirm it's you")).not.toBeInTheDocument()
         })
+        expect(
+            screen.getByRole('button', {name: /continue to shipping address/i})
+        ).toBeInTheDocument()
+        expect(screen.getByLabelText('Phone')).toBeInTheDocument()
     })
 
     test('uses phone from billing address when persisting to customer profile after OTP verification', async () => {
@@ -836,5 +842,8 @@ describe('ContactInfo Component', () => {
                 body: {phoneHome: billingPhone}
             })
         })
+
+        // Guest choice storage should be cleared when user signs in via OTP
+        expect(setCheckoutGuestChoiceInStorage).toHaveBeenCalledWith(false)
     })
 })

package/app/pages/checkout-one-click/partials/one-click-payment.jsx

@@ -441,8 +441,8 @@ const Payment = ({
                 disabled={appliedPayment == null}
                 onEdit={handleEditPayment}
                 editLabel={formatMessage({
-                    defaultMessage: 'Edit Payment Info',
-                    id: 'toggle_card.action.editPaymentInfo'
+                    defaultMessage: 'Change',
+                    id: 'toggle_card.action.changePaymentInfo'
                 })}
             >
                 <ToggleCardEdit>
@@ -528,27 +528,28 @@ const Payment = ({
                                         isBillingAddress
                                     />
                                 )}
-                                {(isGuest || showRegistrationNotice) && (
-                                    <UserRegistration
-                                        enableUserRegistration={enableUserRegistration}
-                                        setEnableUserRegistration={onUserRegistrationToggle}
-                                        onLoadingChange={onOtpLoadingChange}
-                                        isGuestCheckout={registeredUserChoseGuest}
-                                        isDisabled={
-                                            !(
-                                                appliedPayment ||
-                                                paymentMethodForm.formState.isValid ||
-                                                (isPickupOnly &&
-                                                    billingAddressForm.formState.isValid)
-                                            ) ||
-                                            (!effectiveBillingSameAsShipping &&
-                                                !billingAddressForm.formState.isValid)
-                                        }
-                                        onSavePreferenceChange={onSavePreferenceChange}
-                                        onRegistered={handleRegistrationSuccess}
-                                        showNotice={showRegistrationNotice}
-                                    />
-                                )}
+                                {(isGuest || showRegistrationNotice) &&
+                                    !registeredUserChoseGuest && (
+                                        <UserRegistration
+                                            enableUserRegistration={enableUserRegistration}
+                                            setEnableUserRegistration={onUserRegistrationToggle}
+                                            onLoadingChange={onOtpLoadingChange}
+                                            isGuestCheckout={registeredUserChoseGuest}
+                                            isDisabled={
+                                                !(
+                                                    appliedPayment ||
+                                                    paymentMethodForm.formState.isValid ||
+                                                    (isPickupOnly &&
+                                                        billingAddressForm.formState.isValid)
+                                                ) ||
+                                                (!effectiveBillingSameAsShipping &&
+                                                    !billingAddressForm.formState.isValid)
+                                            }
+                                            onSavePreferenceChange={onSavePreferenceChange}
+                                            onRegistered={handleRegistrationSuccess}
+                                            showNotice={showRegistrationNotice}
+                                        />
+                                    )}
                             </Stack>
                         </>
                     ) : null}
@@ -579,8 +580,7 @@ const Payment = ({
 
                         <Divider borderColor="gray.100" />
 
-                        {(selectedBillingAddress ||
-                            (effectiveBillingSameAsShipping && selectedShippingAddress)) && (
+                        {selectedBillingAddress && !effectiveBillingSameAsShipping && (
                             <Stack spacing={2}>
                                 <Heading as="h3" fontSize="md">
                                     <FormattedMessage
@@ -588,13 +588,11 @@ const Payment = ({
                                         id="checkout_payment.heading.billing_address"
                                     />
                                 </Heading>
-                                <AddressDisplay
-                                    address={selectedBillingAddress || selectedShippingAddress}
-                                />
+                                <AddressDisplay address={selectedBillingAddress} />
                             </Stack>
                         )}
 
-                        {(isGuest || showRegistrationNotice) && (
+                        {(isGuest || showRegistrationNotice) && !registeredUserChoseGuest && (
                             <UserRegistration
                                 enableUserRegistration={enableUserRegistration}
                                 setEnableUserRegistration={setEnableUserRegistration}

package/app/pages/checkout-one-click/partials/one-click-payment.test.js

@@ -1310,7 +1310,7 @@ describe('Payment Component', () => {
             // Click Edit Payment Info to enter edit mode
             const summary = screen.getAllByTestId('toggle-card-summary').pop()
             const editButton = within(summary).getByRole('button', {
-                name: /toggle_card.action.editPaymentInfo|Edit Payment Info/i
+                name: /toggle_card.action.changePaymentInfo|Change/i
             })
             await user.click(editButton)
 

package/app/pages/checkout-one-click/partials/one-click-shipping-options.jsx

@@ -109,13 +109,12 @@ export default function ShippingOptions() {
             const defaultMethodId = shippingMethods?.defaultShippingMethodId
             return methods.find((m) => m.id === defaultMethodId) || methods[0]
         },
+        // Skip auto-apply when a valid method is already selected.
+        // When the shopper clicked "Change" to edit shippingoptions, stay on the edit view.
         shouldSkip: () => {
             if (selectedShippingMethod?.id && !isPickupMethod(selectedShippingMethod)) {
                 const stillValid = deliveryMethods.some((m) => m.id === selectedShippingMethod.id)
-                if (stillValid) {
-                    goToNextStep()
-                    return true
-                }
+                if (stillValid) return true
             }
             return false
         },
@@ -160,8 +159,11 @@ export default function ShippingOptions() {
         )
     }, [step, customer, selectedShippingMethod, shippingMethods, STEPS.SHIPPING_OPTIONS])
 
-    // Use calculated loading state or auto-select loading state
-    const effectiveIsLoading = Boolean(isAutoSelectLoading) || Boolean(shouldShowInitialLoading)
+    // Use calculated loading state or auto-select loading state only for single-shipment.
+    // For multi-shipment, each ShipmentMethods fetches its own methods
+    const effectiveIsLoading = hasMultipleDeliveryShipments
+        ? false
+        : Boolean(isAutoSelectLoading) || Boolean(shouldShowInitialLoading)
 
     const form = useForm({
         shouldUnregister: false,
@@ -264,8 +266,8 @@ export default function ShippingOptions() {
             }
             onEdit={() => goToStep(STEPS.SHIPPING_OPTIONS)}
             editLabel={formatMessage({
-                defaultMessage: 'Edit Shipping Options',
-                id: 'toggle_card.action.editShippingOptions'
+                defaultMessage: 'Change',
+                id: 'toggle_card.action.changeShippingOptions'
             })}
         >
             <ToggleCardEdit>

package/app/pages/checkout-one-click/partials/one-click-shipping-options.test.js

@@ -5,7 +5,7 @@
  * 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 {screen, waitFor} from '@testing-library/react'
+import {screen, waitFor, within} from '@testing-library/react'
 import ShippingOptions from '@salesforce/retail-react-app/app/pages/checkout-one-click/partials/one-click-shipping-options'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 
@@ -341,7 +341,7 @@ describe('ShippingOptions Component', () => {
     })
 
     describe('for registered users with auto-selection', () => {
-        test('skips shipping method update when existing method is still valid', async () => {
+        test('skips shipping method update when existing method is still valid and stays on edit view', async () => {
             jest.resetModules()
 
             jest.doMock('@salesforce/retail-react-app/app/hooks/use-current-customer', () => ({
@@ -376,10 +376,14 @@ describe('ShippingOptions Component', () => {
             localRenderWithProviders(<module.default />)
 
             await waitFor(() => {
-                expect(mockGoToNextStep).toHaveBeenCalled()
+                expect(mockUpdateShippingMethod.mutateAsync).not.toHaveBeenCalled()
             })
 
-            expect(mockUpdateShippingMethod.mutateAsync).not.toHaveBeenCalled()
+            // Does not auto-advance so user can change option or click Continue (fixes "Change" flicker)
+            expect(mockGoToNextStep).not.toHaveBeenCalled()
+            expect(
+                screen.getAllByRole('button', {name: /continue to payment/i}).length
+            ).toBeGreaterThan(0)
         })
 
         test('auto-selects default method when existing method is no longer valid', async () => {
@@ -798,6 +802,93 @@ describe('ShippingOptions Component', () => {
             expect(screen.getByText('Continue to Payment')).toBeInTheDocument()
         })
 
+        test('multi-shipment edit view shows shipping options for each shipment', async () => {
+            jest.resetModules()
+
+            jest.doMock(
+                '@salesforce/retail-react-app/app/pages/checkout-one-click/util/checkout-context',
+                () => ({
+                    useCheckout: jest.fn().mockReturnValue({
+                        step: 3,
+                        STEPS: {
+                            CONTACT_INFO: 0,
+                            PICKUP_ADDRESS: 1,
+                            SHIPPING_ADDRESS: 2,
+                            SHIPPING_OPTIONS: 3,
+                            PAYMENT: 4
+                        },
+                        goToStep: mockGoToStep,
+                        goToNextStep: mockGoToNextStep
+                    })
+                })
+            )
+            jest.doMock('@salesforce/retail-react-app/app/hooks/use-current-customer', () => ({
+                useCurrentCustomer: () => ({
+                    data: {customerId: 'test-customer-id', isRegistered: true}
+                })
+            }))
+            jest.doMock('@salesforce/retail-react-app/app/hooks/use-current-basket', () => ({
+                useCurrentBasket: () => ({
+                    data: {
+                        basketId: 'test-basket-id',
+                        shipments: [
+                            {
+                                shipmentId: 'ship1',
+                                shippingAddress: {
+                                    firstName: 'Oscar',
+                                    lastName: 'Robertson',
+                                    address1: '333 South St',
+                                    city: 'West Lafayette',
+                                    stateCode: 'IN',
+                                    postalCode: '98103'
+                                },
+                                shippingMethod: {id: 'std', name: 'Standard'}
+                            },
+                            {
+                                shipmentId: 'ship2',
+                                shippingAddress: {
+                                    firstName: 'Lee',
+                                    lastName: 'Robertson',
+                                    address1: '158 South St',
+                                    city: 'West Lafayette',
+                                    stateCode: 'IN',
+                                    postalCode: '98103'
+                                },
+                                shippingMethod: {id: 'std2', name: 'Standard 2'}
+                            }
+                        ],
+                        shippingItems: [
+                            {shipmentId: 'ship1', price: 0},
+                            {shipmentId: 'ship2', price: 0}
+                        ]
+                    },
+                    derivedData: {hasBasket: true, totalItems: 2, totalShippingCost: 0}
+                })
+            }))
+
+            const sdk = await import('@salesforce/commerce-sdk-react')
+            sdk.useShippingMethodsForShipment.mockImplementation(({parameters}) => {
+                if (parameters.shipmentId === 'ship1') return {data: multiShipMethods1}
+                if (parameters.shipmentId === 'ship2') return {data: multiShipMethods2}
+                return {data: multiShipMethods1}
+            })
+
+            const {renderWithProviders: localRenderWithProviders} = await import(
+                '@salesforce/retail-react-app/app/utils/test-utils'
+            )
+            const module = await import(
+                '@salesforce/retail-react-app/app/pages/checkout-one-click/partials/one-click-shipping-options'
+            )
+
+            localRenderWithProviders(<module.default />)
+
+            const cards = screen.getAllByTestId('sf-toggle-card-step-2')
+            expect(cards.length).toBeGreaterThan(0)
+            expect(within(cards[0]).queryByTestId('loading')).toBeNull()
+            expect(screen.getAllByText('Shipment 1:').length).toBeGreaterThan(0)
+            expect(screen.getAllByText('Shipment 2:').length).toBeGreaterThan(0)
+        })
+
         test('auto-selects default method when no method is set on shipment', async () => {
             jest.resetModules()
 

package/app/pages/checkout-one-click/partials/one-click-user-registration.jsx

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React, {useRef, useState, useEffect} from 'react'
-import {FormattedMessage} from 'react-intl'
+import {FormattedMessage, useIntl} from 'react-intl'
 import PropTypes from 'prop-types'
 import {
     Box,
@@ -23,7 +23,12 @@ import {
 import OtpAuth from '@salesforce/retail-react-app/app/components/otp-auth'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import {useCustomerType, useAuthHelper, AuthHelpers} from '@salesforce/commerce-sdk-react'
+import {useShopperCustomersMutation} from '@salesforce/commerce-sdk-react'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout-one-click/util/checkout-context'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import {isPickupShipment} from '@salesforce/retail-react-app/app/utils/shipment-utils'
+import {nanoid} from 'nanoid'
 
 export default function UserRegistration({
     enableUserRegistration,
@@ -36,15 +41,28 @@ export default function UserRegistration({
     onLoadingChange
 }) {
     const {data: basket} = useCurrentBasket()
+    const {contactPhone} = useCheckout()
     const {isGuest} = useCustomerType()
     const authorizePasswordlessLogin = useAuthHelper(AuthHelpers.AuthorizePasswordless)
     const loginPasswordless = useAuthHelper(AuthHelpers.LoginPasswordlessUser)
     const {locale} = useMultiSite()
+    const {formatMessage} = useIntl()
+    const showToast = useToast()
+    const createCustomerAddress = useShopperCustomersMutation('createCustomerAddress')
+    const updateCustomer = useShopperCustomersMutation('updateCustomer')
+
     const {isOpen: isOtpOpen, onOpen: onOtpOpen, onClose: onOtpClose} = useDisclosure()
     const otpSentRef = useRef(false)
     const [registrationSucceeded, setRegistrationSucceeded] = useState(false)
     const [isLoadingOtp, setIsLoadingOtp] = useState(false)
 
+    const showError = (message) => {
+        showToast({
+            title: message,
+            status: 'error'
+        })
+    }
+
     const handleOtpClose = () => {
         otpSentRef.current = false
         onOtpClose()
@@ -92,13 +110,79 @@ export default function UserRegistration({
         }
     }, [isOtpOpen, isLoadingOtp, onLoadingChange])
 
+    const saveAddressesAndPhoneToProfile = async (customerId) => {
+        if (!basket || !customerId) return
+        const deliveryShipments =
+            basket.shipments?.filter(
+                (shipment) => !isPickupShipment(shipment) && shipment.shippingAddress
+            ) || []
+        try {
+            if (deliveryShipments.length > 0) {
+                for (let i = 0; i < deliveryShipments.length; i++) {
+                    const shipment = deliveryShipments[i]
+                    const shipping = shipment.shippingAddress
+                    if (!shipping) continue
+
+                    const {
+                        address1,
+                        address2,
+                        city,
+                        countryCode,
+                        firstName,
+                        lastName,
+                        phone,
+                        postalCode,
+                        stateCode
+                    } = shipping || {}
+
+                    await createCustomerAddress.mutateAsync({
+                        parameters: {customerId},
+                        body: {
+                            addressId: nanoid(),
+                            preferred: i === 0,
+                            address1,
+                            address2,
+                            city,
+                            countryCode,
+                            firstName,
+                            lastName,
+                            phone,
+                            postalCode,
+                            stateCode
+                        }
+                    })
+                }
+            }
+
+            const phoneHome = basket.billingAddress?.phone || contactPhone
+            if (phoneHome) {
+                await updateCustomer.mutateAsync({
+                    parameters: {customerId},
+                    body: {phoneHome}
+                })
+            }
+        } catch (_e) {
+            showError(
+                formatMessage({
+                    id: 'checkout.error.cannot_save_address',
+                    defaultMessage: 'Could not save shipping address.'
+                })
+            )
+        }
+    }
+
     const handleOtpVerification = async (otpCode) => {
         try {
-            await loginPasswordless.mutateAsync({
+            const token = await loginPasswordless.mutateAsync({
                 pwdlessLoginToken: otpCode,
                 register_customer: true
             })
 
+            const customerId = token?.customer_id || token?.customerId
+            if (customerId && basket) {
+                await saveAddressesAndPhoneToProfile(customerId)
+            }
+
             if (onRegistered) {
                 await onRegistered(basket?.basketId)
             }

package/app/pages/checkout-one-click/partials/one-click-user-registration.test.js

@@ -15,6 +15,13 @@ import useAuthContext from '@salesforce/commerce-sdk-react/hooks/useAuthContext'
 
 jest.mock('@salesforce/retail-react-app/app/hooks/use-current-basket')
 
+jest.mock(
+    '@salesforce/retail-react-app/app/pages/checkout-one-click/util/checkout-context',
+    () => ({
+        useCheckout: () => ({contactPhone: ''})
+    })
+)
+
 const {AuthHelpers} = jest.requireActual('@salesforce/commerce-sdk-react')
 
 const TEST_MESSAGES = {
@@ -29,12 +36,23 @@ const mockAuthHelperFunctions = {
     [AuthHelpers.LoginPasswordlessUser]: {mutateAsync: jest.fn()}
 }
 
+const mockCreateCustomerAddress = {mutateAsync: jest.fn().mockResolvedValue({})}
+const mockUpdateCustomer = {mutateAsync: jest.fn().mockResolvedValue({})}
+const mockCreateCustomerPaymentInstrument = {mutateAsync: jest.fn().mockResolvedValue({})}
+
 jest.mock('@salesforce/commerce-sdk-react', () => {
     const original = jest.requireActual('@salesforce/commerce-sdk-react')
     return {
         ...original,
         useCustomerType: jest.fn(),
-        useAuthHelper: jest.fn((helper) => mockAuthHelperFunctions[helper])
+        useAuthHelper: jest.fn((helper) => mockAuthHelperFunctions[helper]),
+        useShopperCustomersMutation: jest.fn((mutationType) => {
+            if (mutationType === 'createCustomerAddress') return mockCreateCustomerAddress
+            if (mutationType === 'updateCustomer') return mockUpdateCustomer
+            if (mutationType === 'createCustomerPaymentInstrument')
+                return mockCreateCustomerPaymentInstrument
+            return {mutateAsync: jest.fn()}
+        })
     }
 })
 jest.mock('@salesforce/commerce-sdk-react/hooks/useAuthContext', () =>

package/app/pages/checkout-one-click/util/checkout-context.js

@@ -10,6 +10,26 @@ import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import {isPickupShipment} from '@salesforce/retail-react-app/app/utils/shipment-utils'
+import {
+    getSessionJSONItem,
+    setSessionJSONItem,
+    clearSessionJSONItem
+} from '@salesforce/retail-react-app/app/utils/utils'
+
+/** SessionStorage key for "checkout as guest" choice so it persists when shopper navigates away and returns */
+export const CHECKOUT_GUEST_CHOICE_STORAGE_KEY = 'sf_checkout_one_click_guest_choice'
+
+export const getCheckoutGuestChoiceFromStorage = () => {
+    return getSessionJSONItem(CHECKOUT_GUEST_CHOICE_STORAGE_KEY) === true
+}
+
+export const setCheckoutGuestChoiceInStorage = (value) => {
+    if (value) {
+        setSessionJSONItem(CHECKOUT_GUEST_CHOICE_STORAGE_KEY, true)
+    } else {
+        clearSessionJSONItem(CHECKOUT_GUEST_CHOICE_STORAGE_KEY)
+    }
+}
 
 const CheckoutContext = React.createContext()
 

package/app/static/translations/compiled/en-GB.json

@@ -1249,10 +1249,10 @@
       "value": " with your confirmation number and receipt shortly."
     }
   ],
-  "checkout_contact_info.action.edit": [
+  "checkout_contact_info.action.change": [
     {
       "type": 0,
-      "value": "Edit"
+      "value": "Change"
     }
   ],
   "checkout_contact_info.action.sign_out": [
@@ -4681,6 +4681,18 @@
       "value": "Change"
     }
   ],
+  "toggle_card.action.changePaymentInfo": [
+    {
+      "type": 0,
+      "value": "Change"
+    }
+  ],
+  "toggle_card.action.changeShippingOptions": [
+    {
+      "type": 0,
+      "value": "Change"
+    }
+  ],
   "toggle_card.action.edit": [
     {
       "type": 0,

package/app/static/translations/compiled/en-US.json

@@ -1249,10 +1249,10 @@
       "value": " with your confirmation number and receipt shortly."
     }
   ],
-  "checkout_contact_info.action.edit": [
+  "checkout_contact_info.action.change": [
     {
       "type": 0,
-      "value": "Edit"
+      "value": "Change"
     }
   ],
   "checkout_contact_info.action.sign_out": [
@@ -4681,6 +4681,18 @@
       "value": "Change"
     }
   ],
+  "toggle_card.action.changePaymentInfo": [
+    {
+      "type": 0,
+      "value": "Change"
+    }
+  ],
+  "toggle_card.action.changeShippingOptions": [
+    {
+      "type": 0,
+      "value": "Change"
+    }
+  ],
   "toggle_card.action.edit": [
     {
       "type": 0,

package/app/static/translations/compiled/en-XA.json

@@ -2473,14 +2473,14 @@
       "value": "]"
     }
   ],
-  "checkout_contact_info.action.edit": [
+  "checkout_contact_info.action.change": [
     {
       "type": 0,
       "value": "["
     },
     {
       "type": 0,
-      "value": "Ḗḓīŧ"
+      "value": "Ƈħȧȧƞɠḗḗ"
     },
     {
       "type": 0,
@@ -9841,6 +9841,34 @@
       "value": "]"
     }
   ],
+  "toggle_card.action.changePaymentInfo": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƈħȧȧƞɠḗḗ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "toggle_card.action.changeShippingOptions": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƈħȧȧƞɠḗḗ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "toggle_card.action.edit": [
     {
       "type": 0,

package/config/default.js

@@ -74,6 +74,9 @@ module.exports = {
             appSourceId: '7ae070a6-f4ec-4def-a383-d9cacc3f20a1',
             tenantId: 'g82wgnrvm-ywk9dggrrw8mtggy.pc-rnd'
         },
+        // Note: this feature is in Developer Preview at this time. To use One Click Checkout,
+        // enable the oneClickCheckout flag and configure private SLAS client. For more details, please
+        // check https://github.com/SalesforceCommerceCloud/pwa-kit/releases/tag/v3.16.0
         oneClickCheckout: {
             enabled: false
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "9.0.0-preview.0",
+  "version": "9.0.0-preview.2",
   "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.0.0-preview.0",
-    "@salesforce/pwa-kit-dev": "3.16.0-preview.0",
-    "@salesforce/pwa-kit-react-sdk": "3.16.0-preview.0",
-    "@salesforce/pwa-kit-runtime": "3.16.0-preview.0",
+    "@salesforce/commerce-sdk-react": "5.0.0-preview.2",
+    "@salesforce/pwa-kit-dev": "3.16.0-preview.2",
+    "@salesforce/pwa-kit-react-sdk": "3.16.0-preview.2",
+    "@salesforce/pwa-kit-runtime": "3.16.0-preview.2",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.29.1",
     "@testing-library/dom": "^9.0.1",
@@ -108,5 +108,5 @@
       "maxSize": "366 kB"
     }
   ],
-  "gitHead": "f14c1e991a7657031ac73de7c8a4445e6a66a33d"
+  "gitHead": "70ef0ffc94a2538cbf735883eb6061d410980438"
 }

package/translations/en-GB.json

@@ -460,8 +460,8 @@
   "checkout_confirmation.message.will_email_shortly": {
     "defaultMessage": "We will send an email to <b>{email}</b> with your confirmation number and receipt shortly."
   },
-  "checkout_contact_info.action.edit": {
-    "defaultMessage": "Edit"
+  "checkout_contact_info.action.change": {
+    "defaultMessage": "Change"
   },
   "checkout_contact_info.action.sign_out": {
     "defaultMessage": "Sign Out"
@@ -1949,6 +1949,12 @@
   "toggle_card.action.change": {
     "defaultMessage": "Change"
   },
+  "toggle_card.action.changePaymentInfo": {
+    "defaultMessage": "Change"
+  },
+  "toggle_card.action.changeShippingOptions": {
+    "defaultMessage": "Change"
+  },
   "toggle_card.action.edit": {
     "defaultMessage": "Edit"
   },

package/translations/en-US.json

@@ -460,8 +460,8 @@
   "checkout_confirmation.message.will_email_shortly": {
     "defaultMessage": "We will send an email to <b>{email}</b> with your confirmation number and receipt shortly."
   },
-  "checkout_contact_info.action.edit": {
-    "defaultMessage": "Edit"
+  "checkout_contact_info.action.change": {
+    "defaultMessage": "Change"
   },
   "checkout_contact_info.action.sign_out": {
     "defaultMessage": "Sign Out"
@@ -1949,6 +1949,12 @@
   "toggle_card.action.change": {
     "defaultMessage": "Change"
   },
+  "toggle_card.action.changePaymentInfo": {
+    "defaultMessage": "Change"
+  },
+  "toggle_card.action.changeShippingOptions": {
+    "defaultMessage": "Change"
+  },
   "toggle_card.action.edit": {
     "defaultMessage": "Edit"
   },