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()