@W-17271709 Passwordless Login in Checkout

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

@@ -52,7 +52,8 @@ const SocialLogin = ({form, idps}) => {
     const redirectURI = buildRedirectURI(appOrigin, redirectPath)
 
     const isIdpValid = (name) => {
-        return name in IDP_CONFIG && IDP_CONFIG[name.toLowerCase()]
+        const formattedName = name.toLowerCase()
+        return formattedName in IDP_CONFIG && IDP_CONFIG[formattedName]
     }
 
     useEffect(() => {

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

@@ -38,10 +38,10 @@ import {usePasswordReset} from '@salesforce/retail-react-app/app/hooks/use-passw
 import {isServer} from '@salesforce/retail-react-app/app/utils/utils'
 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'
+export const LOGIN_VIEW = 'login'
+export const REGISTER_VIEW = 'register'
+export const PASSWORD_VIEW = 'password'
+export const EMAIL_VIEW = 'email'
 
 const LOGIN_ERROR = defineMessage({
     defaultMessage: "Something's not right with your email or password. Try again.",
@@ -50,6 +50,7 @@ const LOGIN_ERROR = defineMessage({
 
 export const AuthModal = ({
     initialView = LOGIN_VIEW,
+    initialEmail = '',
     onLoginSuccess = noop,
     onRegistrationSuccess = noop,
     isOpen,
@@ -78,7 +79,7 @@ export const AuthModal = ({
     const register = useAuthHelper(AuthHelpers.Register)
 
     const [loginType, setLoginType] = useState(LOGIN_TYPES.PASSWORD)
-    const [passwordlessLoginEmail, setPasswordlessLoginEmail] = useState('')
+    const [passwordlessLoginEmail, setPasswordlessLoginEmail] = useState(initialEmail)
     const {getPasswordResetToken} = usePasswordReset()
     const authorizePasswordlessLogin = useAuthHelper(AuthHelpers.AuthorizePasswordless)
 
@@ -206,6 +207,10 @@ export const AuthModal = ({
         form.reset()
     }, [currentView])
 
+    useEffect(() => {
+        setPasswordlessLoginEmail(initialEmail);
+    }, [initialEmail])
+
     useEffect(() => {
         // Lets determine if the user has either logged in, or registed.
         const loggingIn = currentView === LOGIN_VIEW
@@ -317,6 +322,7 @@ export const AuthModal = ({
 
 AuthModal.propTypes = {
     initialView: PropTypes.oneOf([LOGIN_VIEW, REGISTER_VIEW, PASSWORD_VIEW, EMAIL_VIEW]),
+    initialEmail: PropTypes.string,
     isOpen: PropTypes.bool.isRequired,
     onOpen: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,

packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx

@@ -32,20 +32,25 @@ import {
 } from '@salesforce/retail-react-app/app/components/toggle-card'
 import Field from '@salesforce/retail-react-app/app/components/field'
 import LoginState from '@salesforce/retail-react-app/app/pages/checkout/partials/login-state'
-import {AuthModal, useAuthModal} from '@salesforce/retail-react-app/app/hooks/use-auth-modal'
+import {
+    AuthModal,
+    EMAIL_VIEW,
+    PASSWORD_VIEW,
+    useAuthModal
+} from '@salesforce/retail-react-app/app/hooks/use-auth-modal'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 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 {AuthHelpers, useAuthHelper, useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
 
 const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, idps = []}) => {
     const {formatMessage} = useIntl()
-    const authModal = useAuthModal('password')
     const navigate = useNavigation()
     const {data: customer} = useCurrentCustomer()
     const {data: basket} = useCurrentBasket()
     const login = useAuthHelper(AuthHelpers.LoginRegisteredUserB2C)
     const logout = useAuthHelper(AuthHelpers.Logout)
+    const authorizePasswordlessLogin = useAuthHelper(AuthHelpers.AuthorizePasswordless)
     const updateCustomerForBasket = useShopperBasketsMutation('updateCustomerForBasket')
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
 
@@ -62,9 +67,20 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
     const [showPasswordField, setShowPasswordField] = useState(false)
     const [signOutConfirmDialogIsOpen, setSignOutConfirmDialogIsOpen] = useState(false)
 
+    const [authModalView, setAuthModalView] = useState(PASSWORD_VIEW)
+    const authModal = useAuthModal(authModalView)
+    const [isPasswordlessLoginClicked, setIsPasswordlessLoginClicked] = useState(false)
+
     const submitForm = async (data) => {
         setError(null)
         try {
+            if (isPasswordlessLoginClicked) {
+                await authorizePasswordlessLogin.mutateAsync({userid: data.email})
+                setAuthModalView(EMAIL_VIEW)
+                authModal.onOpen()
+                setIsPasswordlessLoginClicked(false)
+                return
+            }
             if (!data.password) {
                 await updateCustomerForBasket.mutateAsync({
                     parameters: {basketId: basket.basketId},
@@ -108,6 +124,7 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
     }
 
     const onForgotPasswordClick = () => {
+        setAuthModalView(PASSWORD_VIEW)
         authModal.onOpen()
     }
 
@@ -117,6 +134,10 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
         }
     }, [showPasswordField])
 
+    const onPasswordlessLoginClick = async () => {
+        setIsPasswordlessLoginClicked(true)
+    }
+
     return (
         <ToggleCard
             id="step-0"
@@ -198,12 +219,13 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
                                     idps={idps}
                                     showPasswordField={showPasswordField}
                                     togglePasswordField={togglePasswordField}
+                                    handlePasswordlessLoginClick={onPasswordlessLoginClick}
                                 />
                             </Stack>
                         </Stack>
                     </form>
                 </Container>
-                <AuthModal {...authModal} />
+                <AuthModal {...authModal} initialEmail={form.getValues().email} />
             </ToggleCardEdit>
             <ToggleCardSummary>
                 <Text>{basket?.customerInfo?.email || customer?.email}</Text>

packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js

@@ -5,9 +5,30 @@
  * 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, within} from '@testing-library/react'
+import {screen, waitFor, within} from '@testing-library/react'
 import ContactInfo from '@salesforce/retail-react-app/app/pages/checkout/partials/contact-info'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {rest} from 'msw'
+import {scapiBasketWithItem} from '@salesforce/retail-react-app/app/mocks/mock-data'
+import {AuthHelpers} from '@salesforce/commerce-sdk-react'
+
+const invalidEmail = 'invalidEmail'
+const validEmail = 'test@salesforce.com'
+const password = 'abc123'
+const mockAuthHelperFunctions = {
+    [AuthHelpers.LoginRegisteredUserB2C]: {mutateAsync: jest.fn()},
+    [AuthHelpers.AuthorizePasswordless]: {mutateAsync: jest.fn()}
+}
+
+jest.mock('@salesforce/commerce-sdk-react', () => {
+    const originalModule = jest.requireActual('@salesforce/commerce-sdk-react')
+    return {
+        ...originalModule,
+        useAuthHelper: jest
+            .fn()
+            .mockImplementation((helperType) => mockAuthHelperFunctions[helperType])
+    }
+})
 
 jest.mock('../util/checkout-context', () => {
     return {
@@ -20,36 +41,168 @@ jest.mock('../util/checkout-context', () => {
             login: null,
             STEPS: {CONTACT_INFO: 0},
             goToStep: null,
-            goToNextStep: null
+            goToNextStep: jest.fn()
         })
     }
 })
 
-test('renders component', async () => {
-    const {user} = renderWithProviders(
-        <ContactInfo isPasswordlessEnabled={false} isSocialEnabled={false} />
-    )
+afterEach(() => {
+    jest.resetModules()
+})
+
+describe('passwordless and social disabled', () => {
+    test('renders component', async () => {
+        const {user} = renderWithProviders(
+            <ContactInfo isPasswordlessEnabled={false} isSocialEnabled={false} />
+        )
+
+        // switch to login
+        const trigger = screen.getByText(/Already have an account\? Log in/i)
+        await user.click(trigger)
 
-    // switch to login
-    const trigger = screen.getByText(/Already have an account\? Log in/i)
-    await user.click(trigger)
+        // open forgot password modal
+        const withinCard = within(screen.getByTestId('sf-toggle-card-step-0'))
+        const openModal = withinCard.getByText(/Forgot password\?/i)
+        await user.click(openModal)
 
-    // open forgot password modal
-    const withinCard = within(screen.getByTestId('sf-toggle-card-step-0'))
-    const openModal = withinCard.getByText(/Forgot password\?/i)
-    await user.click(openModal)
+        // check that forgot password modal is open
+        const withinForm = within(screen.getByTestId('sf-auth-modal-form'))
+        expect(withinForm.getByText(/Reset Password/i)).toBeInTheDocument()
+    })
 
-    // check that forgot password modal is open
-    const withinForm = within(screen.getByTestId('sf-auth-modal-form'))
-    expect(withinForm.getByText(/Reset Password/i)).toBeInTheDocument()
+    test('does not allow login if email or password is missing', async () => {
+        const {user} = renderWithProviders(<ContactInfo />)
+
+        // switch to login
+        const trigger = screen.getByText(/Already have an account\? Log in/i)
+        await user.click(trigger)
+
+        // attempt to login
+        const loginButton = screen.getByText('Log In')
+        await user.click(loginButton)
+        expect(screen.getByText('Please enter your email address.')).toBeInTheDocument()
+        expect(screen.getByText('Please enter your password.')).toBeInTheDocument()
+    })
+
+    test('allows login', async () => {
+        const {user} = renderWithProviders(<ContactInfo />)
+
+        // switch to login
+        const trigger = screen.getByText(/Already have an account\? Log in/i)
+        await user.click(trigger)
+
+        // enter email address and password
+        await user.type(screen.getByLabelText('Email'), validEmail)
+        await user.type(screen.getByLabelText('Password'), password)
+
+        const loginButton = screen.getByText('Log In')
+        await user.click(loginButton)
+        expect(
+            mockAuthHelperFunctions[AuthHelpers.LoginRegisteredUserB2C].mutateAsync
+        ).toHaveBeenCalledWith({username: validEmail, password: password})
+    })
 })
 
-test('Shows passwordless login button if enabled', async () => {
-    renderWithProviders(<ContactInfo isPasswordlessEnabled={true} />)
-    expect(screen.getByText('Secure Link')).toBeInTheDocument()
+describe('passwordless enabled', () => {
+    let currentBasket = JSON.parse(JSON.stringify(scapiBasketWithItem))
+    beforeEach(() => {
+        global.server.use(
+            rest.put('*/baskets/:basketId/customer', (req, res, ctx) => {
+                currentBasket.customerInfo.email = validEmail
+                return res(ctx.json(currentBasket))
+            })
+        )
+    })
+
+    test('renders component', async () => {
+        const {getByRole} = renderWithProviders(<ContactInfo isPasswordlessEnabled={true} />)
+        expect(getByRole('button', {name: 'Checkout as Guest'})).toBeInTheDocument()
+        expect(getByRole('button', {name: 'Secure Link'})).toBeInTheDocument()
+        expect(getByRole('button', {name: 'Password'})).toBeInTheDocument()
+    })
+
+    test('does not allow login if email is missing', async () => {
+        const {user} = renderWithProviders(<ContactInfo isPasswordlessEnabled={true} />)
+
+        // Click passwordless login button
+        const passwordlessLoginButton = screen.getByText('Secure Link')
+        await user.click(passwordlessLoginButton)
+        expect(screen.getByText('Please enter your email address.')).toBeInTheDocument()
+
+        // Click password login button
+        const passwordLoginButton = screen.getByText('Password')
+        await user.click(passwordLoginButton)
+        expect(screen.getByText('Please enter your email address.')).toBeInTheDocument()
+    })
+
+    test('does not allow passwordless login if email is invalid', async () => {
+        const {user} = renderWithProviders(<ContactInfo isPasswordlessEnabled={true} />)
+
+        // enter an invalid email address
+        await user.type(screen.getByLabelText('Email'), invalidEmail)
+
+        const passwordlessLoginButton = screen.getByText('Secure Link')
+        await user.click(passwordlessLoginButton)
+        expect(screen.queryByTestId('sf-form-resend-passwordless-email')).not.toBeInTheDocument()
+    })
+
+    test('allows passwordless login', async () => {
+        const {user} = renderWithProviders(<ContactInfo isPasswordlessEnabled={true} />)
+
+        // enter a valid email address
+        await user.type(screen.getByLabelText('Email'), validEmail)
+
+        // initiate passwordless login
+        const passwordlessLoginButton = screen.getByText('Secure Link')
+        // Click the button twice as the isPasswordlessLoginClicked state doesn't change after the first click
+        await user.click(passwordlessLoginButton)
+        await user.click(passwordlessLoginButton)
+        expect(
+            mockAuthHelperFunctions[AuthHelpers.AuthorizePasswordless].mutateAsync
+        ).toHaveBeenCalledWith({userid: validEmail})
+
+        // check that check email modal is open
+        await waitFor(() => {
+            const withinForm = within(screen.getByTestId('sf-form-resend-passwordless-email'))
+            expect(withinForm.getByText(/Check Your Email/i)).toBeInTheDocument()
+            expect(withinForm.getByText(validEmail)).toBeInTheDocument()
+        })
+
+        // resend the email
+        user.click(screen.getByText(/Resend Link/i))
+        expect(
+            mockAuthHelperFunctions[AuthHelpers.AuthorizePasswordless].mutateAsync
+        ).toHaveBeenCalledWith({userid: validEmail})
+    })
+
+    test('allows login using password', async () => {
+        const {user} = renderWithProviders(<ContactInfo isPasswordlessEnabled={true} />)
+
+        // enter a valid email address
+        await user.type(screen.getByLabelText('Email'), validEmail)
+
+        // initiate login using password
+        const passwordButton = screen.getByText('Password')
+        await user.click(passwordButton)
+
+        // enter a password
+        await user.type(screen.getByLabelText('Password'), password)
+
+        const loginButton = screen.getByText('Log In')
+        await user.click(loginButton)
+        expect(
+            mockAuthHelperFunctions[AuthHelpers.LoginRegisteredUserB2C].mutateAsync
+        ).toHaveBeenCalledWith({username: validEmail, password: password})
+    })
 })
 
-test('Shows Google login button if configured', async () => {
-    renderWithProviders(<ContactInfo isSocialEnabled={true} idps={['Google']} />)
-    expect(screen.getByText('Google')).toBeInTheDocument()
+describe('social login enabled', () => {
+    test('renders component', async () => {
+        const {getByRole} = renderWithProviders(
+            <ContactInfo isSocialEnabled={true} idps={['google']} />
+        )
+        expect(getByRole('button', {name: 'Checkout as Guest'})).toBeInTheDocument()
+        expect(getByRole('button', {name: 'Password'})).toBeInTheDocument()
+        expect(getByRole('button', {name: /Google/i})).toBeInTheDocument()
+    })
 })