@salesforce/retail-react-app 6.0.0-preview.0 → 6.0.0-preview.1

package/CHANGELOG.md

@@ -1,8 +1,10 @@
 ## v6.0.0
 - DNT Consent Banner: [#2203](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2203)
+- Support Node 22 [#2218](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2218)
+- Implemented opt-in Social & Passwordless Login features and fixed the Reset Password flow which now leverages SLAS APIs [#2079] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2079)
 - Allow store to be selectable in StoreLocator [#2187](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2187)
 - Replace transfer basket call with merge basket on checkout [#2138](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2138)
-- Support Node 22 [#2218](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2218)
+- PDP / PLP: Add page meta data tags that have been defined in BM [#2232](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2232)
 
 ### Bug Fixes
 - [BUG] Fixed GET /shopper-context API calls being made without the usid [#2206](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2206)

package/app/assets/svg/apple.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="Apple.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="11.949153"
+     inkscape:cy="12"
+     inkscape:window-width="1312"
+     inkscape:window-height="449"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg1" />
+  <g
+     clip-path="url(#clip0_37937_16105)"
+     id="g1">
+    <path
+       d="M19.762 8.818C19.646 8.908 17.598 10.062 17.598 12.628C17.598 15.596 20.204 16.646 20.282 16.672C20.27 16.736 19.868 18.11 18.908 19.51C18.052 20.742 17.158 21.972 15.798 21.972C14.438 21.972 14.088 21.182 12.518 21.182C10.988 21.182 10.444 21.998 9.2 21.998C7.956 21.998 7.088 20.858 6.09 19.458C4.934 17.814 4 15.26 4 12.836C4 8.948 6.528 6.886 9.016 6.886C10.338 6.886 11.44 7.754 12.27 7.754C13.06 7.754 14.292 6.834 15.796 6.834C16.366 6.834 18.414 6.886 19.762 8.818ZM15.082 5.188C15.704 4.45 16.144 3.426 16.144 2.402C16.144 2.26 16.132 2.116 16.106 2C15.094 2.038 13.89 2.674 13.164 3.516C12.594 4.164 12.062 5.188 12.062 6.226C12.062 6.382 12.088 6.538 12.1 6.588C12.164 6.6 12.268 6.614 12.372 6.614C13.28 6.614 14.422 6.006 15.082 5.188Z"
+       fill="#181818"
+       id="path1" />
+  </g>
+  <defs
+     id="defs1">
+    <clipPath
+       id="clip0_37937_16105">
+      <rect
+         width="16.28"
+         height="20"
+         fill="white"
+         transform="translate(4 2)"
+         id="rect1" />
+    </clipPath>
+  </defs>
+</svg>

package/app/assets/svg/google.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="28"
+   height="28"
+   viewBox="0 0 28 28"
+   fill="none"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="web_light_sq_na.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview5"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="5.9"
+     inkscape:cx="15.677966"
+     inkscape:cy="15.59322"
+     inkscape:window-width="1552"
+     inkscape:window-height="551"
+     inkscape:window-x="109"
+     inkscape:window-y="1375"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg5" />
+  <g
+     clip-path="url(#clip0_710_6223)"
+     id="g4"
+     transform="translate(-5.7627118,-5.9322035)">
+    <path
+       d="m 29.6,20.2273 c 0,-0.7091 -0.0636,-1.3909 -0.1818,-2.0455 H 20 V 22.05 h 5.3818 c -0.2318,1.25 -0.9363,2.3091 -1.9954,3.0182 v 2.5091 h 3.2318 C 28.5091,25.8364 29.6,23.2727 29.6,20.2273 Z"
+       fill="#4285f4"
+       id="path1" />
+    <path
+       d="m 20,30 c 2.7,0 4.9636,-0.8955 6.6181,-2.4227 l -3.2318,-2.5091 c -0.8954,0.6 -2.0409,0.9545 -3.3863,0.9545 -2.6046,0 -4.8091,-1.7591 -5.5955,-4.1227 h -3.3409 v 2.5909 C 12.7091,27.7591 16.0909,30 20,30 Z"
+       fill="#34a853"
+       id="path2" />
+    <path
+       d="m 14.4045,21.9 c -0.2,-0.6 -0.3136,-1.2409 -0.3136,-1.9 0,-0.6591 0.1136,-1.3 0.3136,-1.9 V 15.5091 H 11.0636 C 10.3864,16.8591 10,18.3864 10,20 c 0,1.6136 0.3864,3.1409 1.0636,4.4909 z"
+       fill="#fbbc04"
+       id="path3" />
+    <path
+       d="m 20,13.9773 c 1.4681,0 2.7863,0.5045 3.8227,1.4954 l 2.8682,-2.8682 C 24.9591,10.9909 22.6954,10 20,10 c -3.9091,0 -7.2909,2.2409 -8.9364,5.5091 L 14.4045,18.1 C 15.1909,15.7364 17.3954,13.9773 20,13.9773 Z"
+       fill="#e94235"
+       id="path4" />
+  </g>
+  <defs
+     id="defs5">
+    <clipPath
+       id="clip0_710_6223">
+      <rect
+         width="20"
+         height="20"
+         fill="#ffffff"
+         transform="translate(10,10)"
+         id="rect5"
+         x="0"
+         y="0" />
+    </clipPath>
+  </defs>
+</svg>

package/app/components/_app-config/index.jsx

@@ -51,8 +51,11 @@ const AppConfig = ({children, locals = {}}) => {
     }
 
     const commerceApiConfig = locals.appConfig.commerceAPI
+
     const appOrigin = useAppOrigin()
 
+    const passwordlessCallback = locals.appConfig.login?.passwordless?.callbackURI
+
     return (
         <CommerceApiProvider
             shortCode={commerceApiConfig.parameters.shortCode}
@@ -62,6 +65,7 @@ const AppConfig = ({children, locals = {}}) => {
             locale={locals.locale?.id}
             currency={locals.locale?.preferredCurrency}
             redirectURI={`${appOrigin}/callback`}
+            passwordlessLoginCallbackURI={passwordlessCallback}
             proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
             headers={headers}
             defaultDnt={DEFAULT_DNT_STATE}

package/app/components/email-confirmation/index.jsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2024, 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 spacing={6}>
+                <Stack justify="center" align="center" spacing={6} role="alert">
+                    <BrandLogo width="60px" height="auto" aria-hidden={true} />
+                    <Text align="center" fontSize="xl" fontWeight="semibold">
+                        <FormattedMessage
+                            defaultMessage="Check Your Email"
+                            id="auth_modal.check_email.title.check_your_email"
+                        />
+                    </Text>
+                    <Stack spacing={10}>
+                        <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>
+                        <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>
+                    </Stack>
+                </Stack>
+                <Button type="submit">
+                    <FormattedMessage
+                        defaultMessage="Resend Link"
+                        id="auth_modal.check_email.button.resend_link"
+                    />
+                </Button>
+            </Stack>
+        </form>
+    )
+}
+
+PasswordlessEmailConfirmation.propTypes = {
+    form: PropTypes.object,
+    submitForm: PropTypes.func,
+    email: PropTypes.string
+}
+
+export default PasswordlessEmailConfirmation

package/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()
+})

package/app/components/forms/login-fields.jsx

@@ -6,26 +6,53 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Stack} from '@salesforce/retail-react-app/app/components/shared/ui'
-import useLoginFields from '@salesforce/retail-react-app/app/components/forms/useLoginFields'
+import {FormattedMessage} from 'react-intl'
+import {Stack, Box, Button} from '@salesforce/retail-react-app/app/components/shared/ui'
 import Field from '@salesforce/retail-react-app/app/components/field'
+import useLoginFields from '@salesforce/retail-react-app/app/components/forms/useLoginFields'
 
-const LoginFields = ({form, prefix = ''}) => {
+const LoginFields = ({
+    form,
+    handleForgotPasswordClick,
+    prefix = '',
+    hideEmail = false,
+    hidePassword = false
+}) => {
     const fields = useLoginFields({form, prefix})
     return (
         <Stack spacing={5}>
-            <Field {...fields.email} />
-            <Field {...fields.password} />
+            {!hideEmail && <Field {...fields.email} />}
+            {!hidePassword && (
+                <Stack>
+                    <Field {...fields.password} />
+                    {handleForgotPasswordClick && (
+                        <Box>
+                            <Button variant="link" size="sm" onClick={handleForgotPasswordClick}>
+                                <FormattedMessage
+                                    defaultMessage="Forgot password?"
+                                    id="login_form.link.forgot_password"
+                                />
+                            </Button>
+                        </Box>
+                    )}
+                </Stack>
+            )}
         </Stack>
     )
 }
 
 LoginFields.propTypes = {
+    handleForgotPasswordClick: PropTypes.func,
+
     /** Object returned from `useForm` */
     form: PropTypes.object.isRequired,
 
     /** Optional prefix for field names */
-    prefix: PropTypes.string
+    prefix: PropTypes.string,
+
+    /** Optional configurations */
+    hideEmail: PropTypes.bool,
+    hidePassword: PropTypes.bool
 }
 
 export default LoginFields

package/app/components/forms/login-fields.test.js

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2024, 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 {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {useForm} from 'react-hook-form'
+import LoginFields from '@salesforce/retail-react-app/app/components/forms/login-fields'
+import {screen} from '@testing-library/react'
+
+const WrapperComponent = ({...props}) => {
+    const form = useForm()
+    return <LoginFields form={form} handleForgotPasswordClick={() => {}} {...props} />
+}
+
+describe('LoginFields component', () => {
+    test('renders both email and password fields by default', () => {
+        renderWithProviders(<WrapperComponent />)
+
+        const emailInput = screen.getByLabelText('Email')
+        expect(emailInput).toBeInTheDocument()
+        expect(emailInput).toHaveAttribute('type', 'email')
+
+        const passwordInput = screen.getByLabelText('Password')
+        expect(passwordInput).toBeInTheDocument()
+        expect(passwordInput).toHaveAttribute('type', 'password')
+        expect(screen.getByRole('button', {name: 'Forgot password?'})).toBeInTheDocument()
+    })
+
+    test('renders properly when hideEmail is true', () => {
+        renderWithProviders(<WrapperComponent hideEmail={true} />)
+
+        expect(screen.queryByText('Email')).not.toBeInTheDocument()
+        expect(screen.queryByRole('textbox', {name: 'Email'})).not.toBeInTheDocument()
+
+        const passwordInput = screen.getByLabelText('Password')
+        expect(passwordInput).toBeInTheDocument()
+        expect(passwordInput).toHaveAttribute('type', 'password')
+        expect(screen.getByRole('button', {name: 'Forgot password?'})).toBeInTheDocument()
+    })
+
+    test('renders properly when hidePassword is true', () => {
+        renderWithProviders(<WrapperComponent hidePassword={true} />)
+
+        const emailInput = screen.getByLabelText('Email')
+        expect(emailInput).toBeInTheDocument()
+        expect(emailInput).toHaveAttribute('type', 'email')
+
+        expect(screen.queryByText('Password')).not.toBeInTheDocument()
+        expect(screen.queryByRole('textbox', {name: 'password'})).not.toBeInTheDocument()
+        expect(screen.queryByRole('button', {name: 'Forgot password?'})).not.toBeInTheDocument()
+    })
+
+    test('hides "Forgot Password?" button when handleForgotPasswordClick is undefined', () => {
+        renderWithProviders(<WrapperComponent handleForgotPasswordClick={undefined} />)
+
+        const passwordInput = screen.getByLabelText('Password')
+        expect(passwordInput).toBeInTheDocument()
+        expect(passwordInput).toHaveAttribute('type', 'password')
+        expect(screen.queryByRole('button', {name: 'Forgot password?'})).not.toBeInTheDocument()
+    })
+})

package/app/components/forms/profile-fields.jsx

@@ -6,15 +6,21 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
+import {defineMessage, useIntl} from 'react-intl'
 import {SimpleGrid, Stack} from '@salesforce/retail-react-app/app/components/shared/ui'
 import useProfileFields from '@salesforce/retail-react-app/app/components/forms/useProfileFields'
 import Field from '@salesforce/retail-react-app/app/components/field'
 
 const ProfileFields = ({form, prefix = ''}) => {
     const fields = useProfileFields({form, prefix})
+    const intl = useIntl()
+    const formTitleAriaLabel = defineMessage({
+        defaultMessage: 'Profile Form',
+        id: 'profile_fields.label.profile_form'
+    })
 
     return (
-        <Stack spacing={5}>
+        <Stack spacing={5} aria-label={intl.formatMessage(formTitleAriaLabel)}>
             <SimpleGrid columns={[1, 1, 1, 2]} spacing={5}>
                 <Field {...fields.firstName} />
                 <Field {...fields.lastName} />

package/app/components/icons/index.jsx

@@ -14,8 +14,9 @@ import {Icon, useTheme} from '@salesforce/retail-react-app/app/components/shared
 // during SSR.
 // NOTE: Another solution would be to use `require-context.macro` package to accomplish
 // importing icon svg's.
-import '@salesforce/retail-react-app/app/assets/svg/alert.svg'
 import '@salesforce/retail-react-app/app/assets/svg/account.svg'
+import '@salesforce/retail-react-app/app/assets/svg/alert.svg'
+import '@salesforce/retail-react-app/app/assets/svg/apple.svg'
 import '@salesforce/retail-react-app/app/assets/svg/basket.svg'
 import '@salesforce/retail-react-app/app/assets/svg/check.svg'
 import '@salesforce/retail-react-app/app/assets/svg/check-circle.svg'
@@ -37,6 +38,7 @@ import '@salesforce/retail-react-app/app/assets/svg/flag-it.svg'
 import '@salesforce/retail-react-app/app/assets/svg/flag-cn.svg'
 import '@salesforce/retail-react-app/app/assets/svg/flag-jp.svg'
 import '@salesforce/retail-react-app/app/assets/svg/github-logo.svg'
+import '@salesforce/retail-react-app/app/assets/svg/google.svg'
 import '@salesforce/retail-react-app/app/assets/svg/hamburger.svg'
 import '@salesforce/retail-react-app/app/assets/svg/info.svg'
 import '@salesforce/retail-react-app/app/assets/svg/social-facebook.svg'
@@ -137,9 +139,10 @@ export const icon = (name, passProps, localizationAttributes) => {
 // Export Chakra icon components that use our SVG sprite symbol internally
 // For non-square SVGs, we can use the symbol data from the import to set the
 // proper viewBox attribute on the Icon wrapper.
-export const AmexIcon = icon('cc-amex', {viewBox: AmexSymbol.viewBox})
-export const AlertIcon = icon('alert')
 export const AccountIcon = icon('account')
+export const AlertIcon = icon('alert')
+export const AmexIcon = icon('cc-amex', {viewBox: AmexSymbol.viewBox})
+export const AppleIcon = icon('apple')
 export const BrandLogo = icon('brand-logo', {viewBox: BrandLogoSymbol.viewBox})
 export const BasketIcon = icon('basket')
 export const CheckIcon = icon('check')
@@ -163,6 +166,7 @@ export const FlagITIcon = icon('flag-it')
 export const FlagCNIcon = icon('flag-cn')
 export const FlagJPIcon = icon('flag-jp')
 export const GithubLogo = icon('github-logo')
+export const GoogleIcon = icon('google')
 export const HamburgerIcon = icon('hamburger')
 export const HeartIcon = icon('heart')
 export const HeartSolidIcon = icon('heart-solid')

package/app/components/login/index.jsx

@@ -8,18 +8,23 @@
 import React, {Fragment} from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
-import {
-    Alert,
-    Box,
-    Button,
-    Stack,
-    Text
-} from '@salesforce/retail-react-app/app/components/shared/ui'
+import {Alert, Button, Stack, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {AlertIcon, BrandLogo} from '@salesforce/retail-react-app/app/components/icons'
-import LoginFields from '@salesforce/retail-react-app/app/components/forms/login-fields'
+import StandardLogin from '@salesforce/retail-react-app/app/components/standard-login'
+import PasswordlessLogin from '@salesforce/retail-react-app/app/components/passwordless-login'
 import {noop} from '@salesforce/retail-react-app/app/utils/utils'
 
-const LoginForm = ({submitForm, clickForgotPassword = noop, clickCreateAccount = noop, form}) => {
+const LoginForm = ({
+    submitForm,
+    handleForgotPasswordClick,
+    handlePasswordlessLoginClick,
+    clickCreateAccount = noop,
+    form,
+    isPasswordlessEnabled = false,
+    isSocialEnabled = false,
+    idps = [],
+    setLoginType
+}) => {
     return (
         <Fragment>
             <Stack justify="center" align="center" spacing={8} marginBottom={8}>
@@ -36,55 +41,46 @@ const LoginForm = ({submitForm, clickForgotPassword = noop, clickCreateAccount =
                 onSubmit={form.handleSubmit(submitForm)}
                 data-testid="sf-auth-modal-form"
             >
-                <Stack spacing={8} paddingLeft={4} paddingRight={4}>
-                    {form.formState.errors?.global && (
-                        <Alert status="error">
-                            <AlertIcon color="red.500" boxSize={4} />
-                            <Text fontSize="sm" ml={3}>
-                                {form.formState.errors.global.message}
-                            </Text>
-                        </Alert>
+                {form.formState.errors?.global && (
+                    <Alert status="error" marginBottom={8}>
+                        <AlertIcon color="red.500" boxSize={4} />
+                        <Text fontSize="sm" ml={3}>
+                            {form.formState.errors.global.message}
+                        </Text>
+                    </Alert>
+                )}
+                <Stack spacing={6}>
+                    {isPasswordlessEnabled ? (
+                        <PasswordlessLogin
+                            form={form}
+                            handleForgotPasswordClick={handleForgotPasswordClick}
+                            handlePasswordlessLoginClick={handlePasswordlessLoginClick}
+                            isSocialEnabled={isSocialEnabled}
+                            idps={idps}
+                            setLoginType={setLoginType}
+                        />
+                    ) : (
+                        <StandardLogin
+                            form={form}
+                            handleForgotPasswordClick={handleForgotPasswordClick}
+                            isSocialEnabled={isSocialEnabled}
+                            idps={idps}
+                        />
                     )}
-                    <Stack>
-                        <LoginFields form={form} />
 
-                        <Box>
-                            <Button variant="link" size="sm" onClick={clickForgotPassword}>
-                                <FormattedMessage
-                                    defaultMessage="Forgot password?"
-                                    id="login_form.link.forgot_password"
-                                />
-                            </Button>
-                        </Box>
-                    </Stack>
-                    <Stack spacing={6}>
-                        <Button
-                            type="submit"
-                            onClick={() => {
-                                form.clearErrors('global')
-                            }}
-                            isLoading={form.formState.isSubmitting}
-                        >
+                    <Stack direction="row" spacing={1} justify="center">
+                        <Text fontSize="sm">
+                            <FormattedMessage
+                                defaultMessage="Don't have an account?"
+                                id="login_form.message.dont_have_account"
+                            />
+                        </Text>
+                        <Button variant="link" size="sm" onClick={clickCreateAccount}>
                             <FormattedMessage
-                                defaultMessage="Sign In"
-                                id="login_form.button.sign_in"
+                                defaultMessage="Create account"
+                                id="login_form.action.create_account"
                             />
                         </Button>
-
-                        <Stack direction="row" spacing={1} justify="center">
-                            <Text fontSize="sm">
-                                <FormattedMessage
-                                    defaultMessage="Don't have an account?"
-                                    id="login_form.message.dont_have_account"
-                                />
-                            </Text>
-                            <Button variant="link" size="sm" onClick={clickCreateAccount}>
-                                <FormattedMessage
-                                    defaultMessage="Create account"
-                                    id="login_form.action.create_account"
-                                />
-                            </Button>
-                        </Stack>
                     </Stack>
                 </Stack>
             </form>
@@ -94,9 +90,14 @@ const LoginForm = ({submitForm, clickForgotPassword = noop, clickCreateAccount =
 
 LoginForm.propTypes = {
     submitForm: PropTypes.func,
-    clickForgotPassword: PropTypes.func,
+    handleForgotPasswordClick: PropTypes.func,
     clickCreateAccount: PropTypes.func,
-    form: PropTypes.object
+    handlePasswordlessLoginClick: PropTypes.func,
+    form: PropTypes.object,
+    isPasswordlessEnabled: PropTypes.bool,
+    isSocialEnabled: PropTypes.bool,
+    idps: PropTypes.arrayOf(PropTypes.string),
+    setLoginType: PropTypes.func
 }
 
 export default LoginForm

package/app/components/login/index.test.js

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2024, 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 {screen} from '@testing-library/react'
+import LoginForm from '@salesforce/retail-react-app/app/components/login/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {useForm} from 'react-hook-form'
+
+const WrapperComponent = ({...props}) => {
+    const form = useForm()
+    return <LoginForm form={form} {...props} />
+}
+
+describe('LoginForm', () => {
+    describe('isPasswordlessEnabled is enabled', () => {
+        test('renders passwordless login form', () => {
+            renderWithProviders(<WrapperComponent isPasswordlessEnabled={true} />)
+
+            expect(screen.getByText(/Welcome Back/)).toBeInTheDocument()
+            expect(screen.getByLabelText('Email')).toBeInTheDocument()
+            expect(screen.queryByLabelText('Password')).not.toBeInTheDocument()
+            expect(screen.getByRole('button', {name: 'Continue Securely'})).toBeInTheDocument()
+            expect(screen.getByText(/Or Login With/)).toBeInTheDocument()
+            expect(screen.getByRole('button', {name: 'Password'})).toBeInTheDocument()
+            expect(screen.getByText(/Don't have an account/)).toBeInTheDocument()
+            expect(screen.getByRole('button', {name: 'Create account'})).toBeInTheDocument()
+        })
+
+        test('renders form errors when "Continue Securely" button is clicked', async () => {
+            const mockPasswordlessLoginClick = jest.fn()
+            const {user} = renderWithProviders(
+                <WrapperComponent
+                    isPasswordlessEnabled={true}
+                    handlePasswordlessLoginClick={mockPasswordlessLoginClick}
+                />
+            )
+
+            await user.click(screen.getByRole('button', {name: 'Continue Securely'}))
+            expect(screen.getByText(/Please enter your email address./)).toBeInTheDocument()
+        })
+
+        test('renders form errors when "Password" button is clicked', async () => {
+            const mockSetLoginType = jest.fn()
+            const {user} = renderWithProviders(
+                <WrapperComponent isPasswordlessEnabled={true} setLoginType={mockSetLoginType} />
+            )
+
+            await user.click(screen.getByRole('button', {name: 'Password'}))
+            expect(screen.getByText(/Please enter your email address./)).toBeInTheDocument()
+        })
+    })
+
+    describe('passwordless is disabled', () => {
+        test('renders standard login form', () => {
+            renderWithProviders(<WrapperComponent />)
+
+            expect(screen.getByText(/Welcome Back/)).toBeInTheDocument()
+            expect(screen.getByLabelText('Email')).toBeInTheDocument()
+            expect(screen.getByLabelText('Password')).toBeInTheDocument()
+            expect(screen.getByRole('button', {name: 'Sign In'})).toBeInTheDocument()
+            expect(screen.getByText(/Don't have an account/)).toBeInTheDocument()
+            expect(screen.getByRole('button', {name: 'Create account'})).toBeInTheDocument()
+        })
+
+        test('renders form errors when "Sign In" button is clicked', async () => {
+            const {user} = renderWithProviders(<WrapperComponent />)
+
+            await user.click(screen.getByRole('button', {name: 'Sign In'}))
+            expect(screen.getByText(/Please enter your email address./)).toBeInTheDocument()
+        })
+    })
+})