diff --git a/packages/template-retail-react-app/app/pages/checkout-one-click/index.jsx b/packages/template-retail-react-app/app/pages/checkout-one-click/index.jsx
index 5f7b338393..dde4da0433 100644
--- a/packages/template-retail-react-app/app/pages/checkout-one-click/index.jsx
+++ b/packages/template-retail-react-app/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'
@@ -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)
@@ -463,6 +467,7 @@ const CheckoutOneClick = () => {
}
}
+ setCheckoutGuestChoiceInStorage(false)
navigate(`/checkout/confirmation/${order.orderNo}`)
} catch (error) {
const message = formatMessage({
diff --git a/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-contact-info.jsx b/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-contact-info.jsx
index 92d6113d0d..556dedb2ff 100644
--- a/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-contact-info.jsx
+++ b/packages/template-retail-react-app/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,
@@ -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)
}
@@ -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)
}
diff --git a/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-contact-info.test.js b/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-contact-info.test.js
index 586b0f8ae1..a71eda7f61 100644
--- a/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-contact-info.test.js
+++ b/packages/template-retail-react-app/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
}
})
@@ -293,7 +296,8 @@ describe('ContactInfo Component', () => {
goToStep: jest.fn(),
goToNextStep: jest.fn(),
setContactPhone: jest.fn()
- })
+ }),
+ setCheckoutGuestChoiceInStorage: jest.fn()
}
}
)
@@ -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()
@@ -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)
})
})
diff --git a/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-payment.jsx b/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-payment.jsx
index 790cc5eab4..d196cd228a 100644
--- a/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-payment.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-payment.jsx
@@ -528,27 +528,28 @@ const Payment = ({
isBillingAddress
/>
)}
- {(isGuest || showRegistrationNotice) && (
-
- )}
+ {(isGuest || showRegistrationNotice) &&
+ !registeredUserChoseGuest && (
+
+ )}
>
) : null}
@@ -594,7 +595,7 @@ const Payment = ({
)}
- {(isGuest || showRegistrationNotice) && (
+ {(isGuest || showRegistrationNotice) && !registeredUserChoseGuest && (
{
+ 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()