@W-16795956 - Implement "Check Email" page (#2110)

Implement a Check Your Email page that will be used in the passwordless login flow

---------

Signed-off-by: Yuna Kim <84923642+yunakim714@users.noreply.github.com>

packages/template-retail-react-app/app/components/email-confirmation/index.jsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * 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 from 'react'
+import PropTypes from 'prop-types'
+import {FormattedMessage} from 'react-intl'
+import {Button, Stack, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
+import {BrandLogo} from '@salesforce/retail-react-app/app/components/icons'
+
+const PasswordlessEmailConfirmation = ({form, submitForm, email = ''}) => {
+    return (
+        <form
+            onSubmit={form.handleSubmit(submitForm)}
+            data-testid="sf-form-resend-passwordless-email"
+        >
+            <Stack justify="center" align="center" spacing={6}>
+                <BrandLogo width="60px" height="auto" />
+                <Text align="center" fontSize="xl" fontWeight="semibold">
+                    <FormattedMessage
+                        defaultMessage="Check Your Email"
+                        id="auth_modal.check_email.title.check_your_email"
+                    />
+                </Text>
+                <Text align="center" fontSize="md">
+                    <FormattedMessage
+                        defaultMessage="We just sent a login link to <b>{email}</b>"
+                        id="auth_modal.check_email.description.just_sent"
+                        values={{
+                            email: email,
+                            b: (chunks) => <b>{chunks}</b>
+                        }}
+                    />
+                </Text>
+                <Stack spacing={6} pt={4}>
+                    <Text align="center" fontSize="sm">
+                        <FormattedMessage
+                            defaultMessage="The link may take a few minutes to arrive, check your spam folder if you're having trouble finding it"
+                            id="auth_modal.check_email.description.check_spam_folder"
+                        />
+                    </Text>
+
+                    <Button type="submit">
+                        <FormattedMessage
+                            defaultMessage="Resend Link"
+                            id="auth_modal.check_email.button.resend_link"
+                        />
+                    </Button>
+                </Stack>
+            </Stack>
+        </form>
+    )
+}
+
+PasswordlessEmailConfirmation.propTypes = {
+    form: PropTypes.object,
+    submitForm: PropTypes.func,
+    email: PropTypes.string
+}
+
+export default PasswordlessEmailConfirmation

packages/template-retail-react-app/app/components/email-confirmation/index.test.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * 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 from 'react'
+import {screen} from '@testing-library/react'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import PasswordlessEmailConfirmation from '@salesforce/retail-react-app/app/components/email-confirmation/index'
+import {useForm} from 'react-hook-form'
+
+const WrapperComponent = ({...props}) => {
+    const form = useForm()
+    return <PasswordlessEmailConfirmation form={form} {...props} />
+}
+
+test('renders PasswordlessEmailConfirmation component with passed email', () => {
+    const email = 'test@salesforce.com'
+    renderWithProviders(<WrapperComponent email={email} />)
+    expect(screen.getByText(email)).toBeInTheDocument()
+})

packages/template-retail-react-app/app/components/login/index.jsx

@@ -17,6 +17,7 @@ import {noop} from '@salesforce/retail-react-app/app/utils/utils'
 const LoginForm = ({
     submitForm,
     handleForgotPasswordClick,
+    handlePasswordlessLoginClick,
     clickCreateAccount = noop,
     form,
     isPasswordlessEnabled = false,
@@ -52,6 +53,7 @@ const LoginForm = ({
                         <PasswordlessLogin
                             form={form}
                             handleForgotPasswordClick={handleForgotPasswordClick}
+                            handlePasswordlessLoginClick={handlePasswordlessLoginClick}
                             isSocialEnabled={isSocialEnabled}
                             idps={idps}
                         />
@@ -88,6 +90,7 @@ LoginForm.propTypes = {
     submitForm: PropTypes.func,
     handleForgotPasswordClick: PropTypes.func,
     clickCreateAccount: PropTypes.func,
+    handlePasswordlessLoginClick: PropTypes.func,
     form: PropTypes.object,
     isPasswordlessEnabled: PropTypes.bool,
     isSocialEnabled: PropTypes.bool,

packages/template-retail-react-app/app/components/passwordless-login/index.jsx

@@ -10,12 +10,13 @@ import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
 import {Button, Divider, Stack, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 import LoginFields from '@salesforce/retail-react-app/app/components/forms/login-fields'
-import StandardLogin from '../standard-login/index'
+import StandardLogin from '@salesforce/retail-react-app/app/components/standard-login'
 import SocialLogin from '@salesforce/retail-react-app/app/components/social-login'
 
 const PasswordlessLogin = ({
     form,
     handleForgotPasswordClick,
+    handlePasswordlessLoginClick,
     isSocialEnabled = false,
     idps = []
 }) => {
@@ -44,9 +45,7 @@ const PasswordlessLogin = ({
                     />
                     <Button
                         type="submit"
-                        onClick={() => {
-                            form.clearErrors('global')
-                        }}
+                        onClick={handlePasswordlessLoginClick}
                         isLoading={form.formState.isSubmitting}
                     >
                         <FormattedMessage
@@ -93,6 +92,7 @@ const PasswordlessLogin = ({
 PasswordlessLogin.propTypes = {
     form: PropTypes.object,
     handleForgotPasswordClick: PropTypes.func,
+    handlePasswordlessLoginClick: PropTypes.func,
     isSocialEnabled: PropTypes.bool,
     idps: PropTypes.arrayOf[PropTypes.string]
 }

packages/template-retail-react-app/app/components/standard-login/index.jsx

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
 import {Button, Divider, Stack, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 import LoginFields from '@salesforce/retail-react-app/app/components/forms/login-fields'
-import SocialLogin from '../social-login/index'
+import SocialLogin from '@salesforce/retail-react-app/app/components/social-login'
 
 const StandardLogin = ({
     form,

packages/template-retail-react-app/app/hooks/use-auth-modal.js

@@ -35,6 +35,7 @@ import {BrandLogo} from '@salesforce/retail-react-app/app/components/icons'
 import LoginForm from '@salesforce/retail-react-app/app/components/login'
 import ResetPasswordForm from '@salesforce/retail-react-app/app/components/reset-password'
 import RegisterForm from '@salesforce/retail-react-app/app/components/register'
+import PasswordlessEmailConfirmation from '@salesforce/retail-react-app/app/components/email-confirmation/index'
 import {noop} from '@salesforce/retail-react-app/app/utils/utils'
 import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
@@ -44,6 +45,7 @@ import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 const LOGIN_VIEW = 'login'
 const REGISTER_VIEW = 'register'
 const PASSWORD_VIEW = 'password'
+const EMAIL_VIEW = 'email'
 
 const LOGIN_ERROR = defineMessage({
     defaultMessage: "Something's not right with your email or password. Try again.",
@@ -79,6 +81,8 @@ export const AuthModal = ({
     const toast = useToast()
     const login = useAuthHelper(AuthHelpers.LoginRegisteredUserB2C)
     const register = useAuthHelper(AuthHelpers.Register)
+    const [passwordlessLoginEmail, setPasswordlessLoginEmail] = useState('')
+    const [loginType, setLoginType] = useState('password')
 
     const getResetPasswordToken = useShopperCustomersMutation(
         ShopperCustomersMutations.GetResetPasswordToken
@@ -99,34 +103,42 @@ export const AuthModal = ({
 
         return {
             login: async (data) => {
-                try {
-                    await login.mutateAsync({
-                        username: data.email,
-                        password: data.password
-                    })
-                    const hasBasketItem = baskets?.baskets?.[0]?.productItems?.length > 0
-                    // we only want to merge basket when the user is logged in as a recurring user
-                    // only recurring users trigger the login mutation, new user triggers register mutation
-                    // this logic needs to stay in this block because this is the only place that tells if a user is a recurring user
-                    // if you change logic here, also change it in login page
-                    const shouldMergeBasket = hasBasketItem && prevAuthType === 'guest'
-                    if (shouldMergeBasket) {
-                        mergeBasket.mutate({
-                            headers: {
-                                // This is not required since the request has no body
-                                // but CommerceAPI throws a '419 - Unsupported Media Type' error if this header is removed.
-                                'Content-Type': 'application/json'
-                            },
-                            parameters: {
-                                createDestinationBasket: true
-                            }
+                if (loginType === 'password') {
+                    try {
+                        await login.mutateAsync({
+                            username: data.email,
+                            password: data.password
                         })
+                        const hasBasketItem = baskets?.baskets?.[0]?.productItems?.length > 0
+                        // we only want to merge basket when the user is logged in as a recurring user
+                        // only recurring users trigger the login mutation, new user triggers register mutation
+                        // this logic needs to stay in this block because this is the only place that tells if a user is a recurring user
+                        // if you change logic here, also change it in login page
+                        const shouldMergeBasket = hasBasketItem && prevAuthType === 'guest'
+                        if (shouldMergeBasket) {
+                            mergeBasket.mutate({
+                                headers: {
+                                    // This is not required since the request has no body
+                                    // but CommerceAPI throws a '419 - Unsupported Media Type' error if this header is removed.
+                                    'Content-Type': 'application/json'
+                                },
+                                parameters: {
+                                    createDestinationBasket: true
+                                }
+                            })
+                        }
+                    } catch (error) {
+                        const message = /Unauthorized/i.test(error.message)
+                            ? formatMessage(LOGIN_ERROR)
+                            : formatMessage(API_ERROR_MESSAGE)
+                        form.setError('global', {type: 'manual', message})
                     }
-                } catch (error) {
-                    const message = /Unauthorized/i.test(error.message)
-                        ? formatMessage(LOGIN_ERROR)
-                        : formatMessage(API_ERROR_MESSAGE)
-                    form.setError('global', {type: 'manual', message})
+                } else if (loginType === 'passwordless') {
+                    setCurrentView(EMAIL_VIEW)
+                    setPasswordlessLoginEmail(data.email)
+                    // Handle passwordless login logic here
+                } else if (loginType === 'social') {
+                    // Handle social login logic here
                 }
             },
             register: async (data) => {
@@ -162,6 +174,9 @@ export const AuthModal = ({
                         message: formatMessage(API_ERROR_MESSAGE)
                     })
                 }
+            },
+            email: async (data) => {
+                // Handle resend passwordless email logic here
             }
         }[currentView](data)
     }
@@ -239,6 +254,7 @@ export const AuthModal = ({
     const onBackToSignInClick = () =>
         initialView === PASSWORD_VIEW ? onClose() : setCurrentView(LOGIN_VIEW)
 
+    // TODO: Remove this to a separate component when fixing password reset flow
     const PasswordResetSuccess = () => (
         <Stack justify="center" align="center" spacing={6}>
             <BrandLogo width="60px" height="auto" />
@@ -270,6 +286,7 @@ export const AuthModal = ({
             </Stack>
         </Stack>
     )
+
     return (
         <Modal
             size="sm"
@@ -294,6 +311,7 @@ export const AuthModal = ({
                             form={form}
                             submitForm={submitForm}
                             clickCreateAccount={() => setCurrentView(REGISTER_VIEW)}
+                            handlePasswordlessLoginClick={() => setLoginType('passwordless')}
                             handleForgotPasswordClick={() => setCurrentView(PASSWORD_VIEW)}
                             isPasswordlessEnabled={isPasswordlessEnabled}
                             isSocialEnabled={isSocialEnabled}
@@ -317,14 +335,21 @@ export const AuthModal = ({
                     {form.formState.isSubmitSuccessful && currentView === PASSWORD_VIEW && (
                         <PasswordResetSuccess />
                     )}
+                    {form.formState.isSubmitSuccessful && currentView === EMAIL_VIEW && (
+                        <PasswordlessEmailConfirmation
+                            form={form}
+                            submitForm={submitForm}
+                            email={passwordlessLoginEmail}
+                        />
+                    )}
                 </ModalBody>
             </ModalContent>
         </Modal>
     )
 }
 
 AuthModal.propTypes = {
-    initialView: PropTypes.oneOf([LOGIN_VIEW, REGISTER_VIEW, PASSWORD_VIEW]),
+    initialView: PropTypes.oneOf([LOGIN_VIEW, REGISTER_VIEW, PASSWORD_VIEW, EMAIL_VIEW]),
     isOpen: PropTypes.bool.isRequired,
     onOpen: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
@@ -337,7 +362,7 @@ AuthModal.propTypes = {
 
 /**
  *
- * @param {('register'|'login'|'password')} initialView - the initial view for the modal
+ * @param {('register'|'login'|'password'|'email')} initialView - the initial view for the modal
  * @returns {Object} - Object props to be spread on to the AuthModal component
  */
 export const useAuthModal = (initialView = LOGIN_VIEW) => {

packages/template-retail-react-app/app/hooks/use-auth-modal.test.js

@@ -121,6 +121,20 @@ test('Renders login modal by default', async () => {
     })
 })
 
+test('Renders check email modal on email mode', async () => {
+    const user = userEvent.setup()
+
+    renderWithProviders(<MockedComponent initialView="email" />)
+
+    // open the modal
+    const trigger = screen.getByText(/open modal/i)
+    await user.click(trigger)
+
+    await waitFor(() => {
+        expect(screen.getByText(/check your email/i)).toBeInTheDocument()
+    })
+})
+
 // TODO: Fix flaky/broken test
 // eslint-disable-next-line jest/no-disabled-tests
 test.skip('Renders error when given incorrect log in credentials', async () => {