Skip to content

@W-21111863 Hide user registration for returning shoppers who chose to… #3634

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
syadupathi-sf merged 1 commit into from
Feb 4, 2026
Merged

@W-21111863 Hide user registration for returning shoppers who chose to… #3634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions packages/template-retail-react-app/app/pages/checkout-one-click/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -64,7 +66,9 @@ const CheckoutOneClick = () => {
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)
Expand Down Expand Up @@ -463,6 +467,7 @@ const CheckoutOneClick = () => {
}
}

setCheckoutGuestChoiceInStorage(false)
navigate(`/checkout/confirmation/${order.orderNo}`)
} catch (error) {
const message = formatMessage({
Expand Down
7 changes: 6 additions & 1 deletion ...emplate-retail-react-app/app/pages/checkout-one-click/partials/one-click-contact-info.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -281,6 +284,7 @@ const ContactInfo = ({isSocialEnabled = false, idps = [], onRegisteredUserChoseG
// Handle checkout as guest from OTP modal
const handleCheckoutAsGuest = () => {
setRegisteredUserChoseGuest(true)
setCheckoutGuestChoiceInStorage(true)
if (onRegisteredUserChoseGuest) {
onRegisteredUserChoseGuest(true)
}
Expand Down Expand Up @@ -341,6 +345,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)
}
Expand Down
12 changes: 10 additions & 2 deletions ...ate-retail-react-app/app/pages/checkout-one-click/partials/one-click-contact-info.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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,
Expand All @@ -91,7 +93,8 @@ jest.mock('@salesforce/retail-react-app/app/pages/checkout-one-click/util/checko
goToStep: null,
goToNextStep: mockGoToNextStep,
setContactPhone: mockSetContactPhone
})
}),
setCheckoutGuestChoiceInStorage
}
})

Expand Down Expand Up @@ -293,7 +296,8 @@ describe('ContactInfo Component', () => {
goToStep: jest.fn(),
goToNextStep: jest.fn(),
setContactPhone: jest.fn()
})
}),
setCheckoutGuestChoiceInStorage: jest.fn()
}
}
)
Expand Down Expand Up @@ -789,6 +793,7 @@ describe('ContactInfo Component', () => {
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()

Expand Down Expand Up @@ -858,5 +863,8 @@ describe('ContactInfo Component', () => {
body: {phoneHome: billingPhone}
})
})

// Guest choice storage should be cleared when user signs in via OTP
expect(setCheckoutGuestChoiceInStorage).toHaveBeenCalledWith(false)
})
})
45 changes: 23 additions & 22 deletions ...ges/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-payment.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -594,7 +595,7 @@ const Payment = ({
</Stack>
)}

{(isGuest || showRegistrationNotice) && (
{(isGuest || showRegistrationNotice) && !registeredUserChoseGuest && (
<UserRegistration
enableUserRegistration={enableUserRegistration}
setEnableUserRegistration={setEnableUserRegistration}
Expand Down
20 changes: 20 additions & 0 deletions packages/template-retail-react-app/app/pages/checkout-one-click/util/checkout-context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand Down
Loading