@salesforce/retail-react-app 7.0.0-preview.0 → 7.0.0

package/app/components/island/README.md

@@ -2,7 +2,7 @@
 
 Inspired by [Astro’s islands architecture](https://docs.astro.build/en/concepts/islands/), this component is intended to give developers explicit and fine-granular control over the hydration behavior of their experiences.
 
-> **ℹ️ Important:** The aspect of **inspiration** is crucial to emphasize. This component merely attempts to **mimic** some of the islands architecture’s behaviors. It needs to be understood as a single tool in a larger toolbox, which is intended to eventually help address very specific performance problems in connection with server-rendered components and their subsequent hydration on the client. So this is neither a silver bullet nor a construct that is guaranteed to work for every use case.
+> **ℹ️ Important:** The aspect of **inspiration** is crucial to emphasize. This component merely attempts to **mimic** some of the islands architecture’s behaviors. It needs to be understood as a single tool in a larger toolbox, which is intended to eventually help address very specific performance problems in connection with server-rendered components and their subsequent hydration on the client. So this is neither a silver bullet nor a construct that is guaranteed to work for every use case. Use it wisely and carefully.
 
 # 🧟️ Hydration’s Curse
 
@@ -26,17 +26,17 @@ Ultimately, the goal is to reduce the load on the browser’s main thread, which
 
 ## React’s Selective Hydration ≠ Partial Hydration
 
-React 18, with [Suspense](https://react.dev/reference/react/Suspense), laid the foundation to officially support concepts such as [selective hydration](https://github.com/reactwg/react-18/discussions/37). However, while the Islands Architecture concept treats partial and selective hydration as interchangeable terms, React’s understanding of selective hydration differs in key aspects.
+React 18, with [`Suspense`](https://react.dev/reference/react/Suspense), laid the foundation to officially support concepts such as [selective hydration](https://github.com/reactwg/react-18/discussions/37). However, while the Islands Architecture concept treats partial and selective hydration as interchangeable terms, React’s understanding of selective hydration differs in key aspects.
 
-Suspense _delays the **rendering** of certain components altogether_ and instead enables the display of specified fallback content while the actual content is loading.
+`Suspense` _delays the **rendering** of certain components altogether_ and instead enables the display of specified fallback content while the actual content is loading.
 
-When using Suspense, certain contents are therefore not rendered on the server at all, but instead asynchronously on the client at a later time only — with all the associated implications for accessibility and SEO. Depending on the runtime used, the boundaries can be fluid as to when the asynchronous loading of the actual/final content begins — whether already on the server or only on the client — but the outcome remains the same: **Suspense enables asynchronous rendering, not asynchronous hydration.**
+When using `Suspense`, certain contents are therefore not rendered on the server at all, but instead asynchronously on the client at a later time only — with all the associated implications for accessibility and SEO. Depending on the runtime used, the boundaries can be fluid as to when the asynchronous loading of the actual/final content begins — whether already on the server or only on the client — but the outcome remains the same: **`Suspense` enables asynchronous rendering, not asynchronous hydration.**
 
-In addition to Suspense, [Server Components](https://react.dev/reference/rsc/server-components) are now another official concept in React for addressing the all-or-nothing problem with hydration. However, as the name suggests, Server Components are components that are rendered exclusively on the server and therefore don’t receive any downstream client-side hydration.
+In addition to `Suspense`, [React Server Components](https://react.dev/reference/rsc/server-components) (RSC) are now another powerful official concept in React for addressing the all-or-nothing problem with hydration. Server Components are components that are rendered exclusively on the server and therefore don’t receive any downstream client-side hydration. In fact, when using RSCs, only the JavaScript that is absolutely necessary to restore application state and interactivity is sent to the client. If used sensibly, RSCs in combination with client components - defined via the `use client` directive - enable a very granular control over the sections of an application requiring hydration. However, it’s then still not possible to actively influence the timing of when the hydration of specific sections should occur.
 
 ## `<Island/>` Component
 
-Unlike Suspense, the `<Island/>` component explicitly **encourages the synchronous rendering of HTML on the server** as much as possible. And instead of delaying the rendering of certain contents, it allows the **explicit delay of the hydration process itself**.
+Unlike `Suspense`, the `<Island/>` component explicitly **encourages the synchronous rendering of HTML on the server** as much as possible. And instead of delaying the rendering of certain contents, it allows the **explicit delay of the hydration process itself**.
 
 This delay can be achieved using various `hydrateOn` strategies:
 
@@ -45,7 +45,11 @@ This delay can be achieved using various `hydrateOn` strategies:
 3. `hydrateOn={'visible'}`: Useful for lower-priority UI elements that don’t need to be immediately interactive. Hydration occurs once the component has [entered the user’s viewport](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver). As a result, such an element doesn’t get hydrated at all if the user never sees it.
 4. `hydrateOn={'off'}`: Useful for non-interactive UI elements or lower-priority UI elements to completely suppress the hydration for. On the surface, this behavior overlaps in certain ways with Server Components. However, there are fundamental differences. While server components don’t contribute any JavaScript to what’s delivered to the client, islands are client-oriented constructs, and thus the JavaScript for a non-hydrated section is still fully transmitted. After all, `hydrateOn` can be dynamically updated at any time in case of using a binding property instead of a hard-coded value. An initial value of `off` therefore opens up the possibilities for completely custom hydration triggers. Furthermore, if Server Components aren’t supported by the runtime used, `hydrateOn={'off'}` offers a simple way to at least reduce the hydration overhead for certain non-interactive areas.
 
-> ❗ Ultimately, the approaches of Suspense, Server Components and the `<Island/>` component aren’t mutually exclusive; on the contrary, they can perfectly complement each other.
+> **🔀️ Important:** Partial hydration support is put behind a feature toggle that can be turned on by setting the constant `PARTIAL_HYDRATION_ENABLED` to `true` (see `@salesforce/retail-react-app/app/constants`).
+
+> **ℹ️️ Note:** `<Island/>` components only influence the hydration behavior of server-rendered content. Once an application bootstrapped on the client and returned to SPA mode, any subsequent client-side rendering is not impacted by the `<Island/>` components anymore.
+
+> **❗ Important:** Ultimately, the approaches of `Suspense`, Server Components and the `<Island/>` component aren’t mutually exclusive; on the contrary, they can perfectly complement each other.
 
 ## `<Island/>` Nesting
 
@@ -61,8 +65,9 @@ Therefore, a frequently used approach is to present the user with server-generat
 
 If not checked or not even considered during development, this behavior can lead to occasionally subtle issues:
 
-1. Certain configurations can simply miss to make specific sections interactive in time — or at all. In such cases, end users may become frustrated when faced with seemingly interactive content that doesn’t respond to interactions or otherwise behaves unexpectedly.
-2. An `<Island/>` may wrap sections that render different content on the server than on the client. Depending on the timing of hydration or the placement of the `<Island/>` within the user’s initial viewport, such content mismatches can cause unexpected layout shifts.
-3. Managing focus states, keyboard navigation, and screen reader announcements across the boundary between static and interactive content requires careful coordination.
+1. An `<Island/>` might contain unhydrated content that is relevant for side effects or tasks such as metrics tracking. In its unhydrated static state, certain event or beacon submissions may therefore not occur. _Please test the correct functionality of all conditionally/partially hydrated areas carefully._
+2. Certain configurations can simply miss to make specific sections interactive in time — or at all. In such cases, end users may become frustrated when faced with seemingly interactive content that doesn’t respond to interactions or otherwise behaves unexpectedly.
+3. An `<Island/>` may wrap sections that render different content on the server than on the client. Depending on the timing of hydration or the placement of the `<Island/>` within the user’s initial viewport, such content mismatches can cause unexpected layout shifts.
+4. Managing focus states, keyboard navigation, and screen reader announcements across the boundary between static and interactive content requires careful coordination.
 
 These challenges aren’t insurmountable, but they require careful architectural planning and testing to address effectively.

package/app/components/island/index.jsx

@@ -4,7 +4,8 @@
  * 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
  */
-/*global globalThis*/
+/* eslint-disable react-hooks/rules-of-hooks */
+/* global globalThis */
 import React, {
     Children,
     createContext,
@@ -17,6 +18,7 @@ import React, {
 } from 'react'
 import PropTypes from 'prop-types'
 import {isServer} from '@salesforce/retail-react-app/app/components/island/utils'
+import {PARTIAL_HYDRATION_ENABLED} from '@salesforce/retail-react-app/app/constants'
 
 const IslandContext = createContext(null)
 
@@ -40,7 +42,9 @@ function findChildren(children, componentType) {
 
 /**
  * This component is intended to give developers explicit and fine-granular control over the
- * hydration behavior of their experiences.
+ * hydration behavior of their experiences. The influence of the `<Island/>` components on the
+ * hydration behavior can be activated or deactivated using the {@link PARTIAL_HYDRATION_ENABLED}
+ * constant.
  * @param {Object} props
  * @param {ReactNode} [props.children] The child tree
  * @param {('load' | 'idle' | 'visible' | 'off')} [props.hydrateOn='load'] The island's hydration strategy
@@ -79,7 +83,12 @@ function findChildren(children, componentType) {
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver}
  */
 function Island(props) {
-    const {children, hydrateOn = 'load', options, clientOnly = false} = props
+    const {children} = props
+    if (!PARTIAL_HYDRATION_ENABLED) {
+        return <>{children}</>
+    }
+
+    const {hydrateOn = 'load', options, clientOnly = false} = props
     const ssr = isServer()
     const [hydrated, setHydrated] = useState(ssr) // Ensure SSR immediately returns the generated HTML
     const context = useIslandContext()
@@ -90,7 +99,6 @@ function Island(props) {
     }
 
     if (!ssr) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         useLayoutEffect(() => {
             if (
                 !hydrated &&
@@ -105,7 +113,6 @@ function Island(props) {
             }
         })
 
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => {
             if (
                 hydrated ||

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

@@ -4,11 +4,13 @@
  * 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
  */
+/* eslint-disable no-import-assign */
 import React from 'react'
 import {act, render, screen} from '@testing-library/react'
 import {renderToString} from 'react-dom/server'
 import Island from '@salesforce/retail-react-app/app/components/island'
 import {isServer} from '@salesforce/retail-react-app/app/components/island/utils'
+import * as constants from '@salesforce/retail-react-app/app/constants'
 
 jest.mock('@salesforce/retail-react-app/app/components/island/utils', () => ({
     ...jest.requireActual('@salesforce/retail-react-app/app/components/island/utils'),
@@ -44,8 +46,15 @@ function renderServerComponent(component) {
 }
 
 describe('Island Component', () => {
+    let originalFlagValue
+
+    beforeAll(() => (originalFlagValue = constants.PARTIAL_HYDRATION_ENABLED))
+
+    afterAll(() => Reflect.set(constants, 'PARTIAL_HYDRATION_ENABLED', originalFlagValue))
+
     beforeEach(() => {
         jest.clearAllMocks()
+        Reflect.set(constants, 'PARTIAL_HYDRATION_ENABLED', true)
         global.requestIdleCallback = mockRequestIdleCallback
         global.cancelIdleCallback = mockCancelIdleCallback
         global.IntersectionObserver = mockIntersectionObserver
@@ -61,6 +70,19 @@ describe('Island Component', () => {
             isServer.mockReturnValue(true)
         })
 
+        test('should not render an island at all if constant "PARTIAL_HYDRATION_ENABLED" is false', () => {
+            Reflect.set(constants, 'PARTIAL_HYDRATION_ENABLED', false)
+
+            const {container} = render(
+                <Island>
+                    <div data-testid="server-content">Server Content</div>
+                </Island>
+            )
+            expect(screen.getByTestId('server-content')).toBeInTheDocument()
+            expect(screen.getByText('Server Content')).toBeInTheDocument()
+            expect(screen.getByTestId('server-content')).toBe(container.firstElementChild)
+        })
+
         test('should render children immediately', () => {
             const {container} = render(
                 <Island>
@@ -98,6 +120,19 @@ describe('Island Component', () => {
     })
 
     describe('Client-Side Rendering (CSR)', () => {
+        test('should not render an island at all if constant "PARTIAL_HYDRATION_ENABLED" is false', () => {
+            Reflect.set(constants, 'PARTIAL_HYDRATION_ENABLED', false)
+
+            const {container} = render(
+                <Island>
+                    <div data-testid="server-content">Server Content</div>
+                </Island>
+            )
+            expect(screen.getByTestId('server-content')).toBeInTheDocument()
+            expect(screen.getByText('Server Content')).toBeInTheDocument()
+            expect(screen.getByTestId('server-content')).toBe(container.firstElementChild)
+        })
+
         test('should hydrate immediately if no SSR content exists', () => {
             const {container} = renderServerComponent(<Island hydrateOn={'visible'}></Island>)
 

package/app/components/passwordless-login/index.jsx

@@ -12,20 +12,19 @@ import {Button, Divider, Stack, Text} from '@salesforce/retail-react-app/app/com
 import LoginFields from '@salesforce/retail-react-app/app/components/forms/login-fields'
 import StandardLogin from '@salesforce/retail-react-app/app/components/standard-login'
 import SocialLogin from '@salesforce/retail-react-app/app/components/social-login'
-import {LOGIN_TYPES} from '@salesforce/retail-react-app/app/constants'
 
+const noop = () => {}
 const PasswordlessLogin = ({
     form,
     handleForgotPasswordClick,
     handlePasswordlessLoginClick,
     isSocialEnabled = false,
     idps = [],
-    setLoginType
+    setLoginType = noop
 }) => {
     const [showPasswordView, setShowPasswordView] = useState(false)
 
     const handlePasswordButton = async (e) => {
-        setLoginType(LOGIN_TYPES.PASSWORD)
         const isValid = await form.trigger()
         // Manually trigger the browser native form validations
         const domForm = e.target.closest('form')
@@ -48,8 +47,8 @@ const PasswordlessLogin = ({
                     />
                     <Button
                         type="submit"
-                        onClick={() => {
-                            handlePasswordlessLoginClick()
+                        onClick={(e) => {
+                            handlePasswordlessLoginClick(e)
                             form.clearErrors('global')
                         }}
                         isLoading={form.formState.isSubmitting}

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

@@ -31,8 +31,7 @@ describe('PasswordlessLogin component', () => {
     })
 
     test('renders password input after "Password" button is clicked', async () => {
-        const mockSetLoginType = jest.fn()
-        const {user} = renderWithProviders(<WrapperComponent setLoginType={mockSetLoginType} />)
+        const {user} = renderWithProviders(<WrapperComponent />)
 
         await user.type(screen.getByLabelText('Email'), 'myemail@test.com')
         await user.click(screen.getByRole('button', {name: 'Password'}))
@@ -42,8 +41,7 @@ describe('PasswordlessLogin component', () => {
     })
 
     test('stays on page when email field has form validation errors after the "Password" button is clicked', async () => {
-        const mockSetLoginType = jest.fn()
-        const {user} = renderWithProviders(<WrapperComponent setLoginType={mockSetLoginType} />)
+        const {user} = renderWithProviders(<WrapperComponent />)
 
         await user.type(screen.getByLabelText('Email'), 'badEmail')
         await user.click(screen.getByRole('button', {name: 'Password'}))

package/app/components/product-tile/index.jsx

@@ -78,7 +78,7 @@ export const Skeleton = () => {
 
 /**
  * The ProductTile is a simple visual representation of a
- * product object. It will show it's default image, name and price.
+ * product object. It will show its default image, name and price.
  * It also supports favourite products, controlled by a heart icon.
  */
 const ProductTile = (props) => {

package/app/components/product-view-modal/bundle.jsx

@@ -30,7 +30,14 @@ import {useIntl} from 'react-intl'
 /**
  * A Modal that contains Product View for product bundle
  */
-const BundleProductViewModal = ({product: bundle, isOpen, onClose, updateCart, ...props}) => {
+const BundleProductViewModal = ({
+    product: bundle,
+    isOpen,
+    onClose,
+    updateCart,
+    showDeliveryOptions,
+    ...props
+}) => {
     const productViewModalData = useProductViewModal(bundle)
     const {variationParams} = useDerivedProduct(bundle)
     const childProductRefs = useRef({})
@@ -100,6 +107,7 @@ const BundleProductViewModal = ({product: bundle, isOpen, onClose, updateCart, .
                                 <ProductView
                                     showFullLink={false}
                                     showImageGallery={trueIfMobile}
+                                    showDeliveryOptions={showDeliveryOptions}
                                     product={productViewModalData.product}
                                     isLoading={productViewModalData.isFetching}
                                     updateCart={(product, quantity) =>
@@ -136,6 +144,7 @@ const BundleProductViewModal = ({product: bundle, isOpen, onClose, updateCart, .
                                                 }
                                             }}
                                             showImageGallery={false}
+                                            showDeliveryOptions={false}
                                             isProductPartOfBundle={true}
                                             showFullLink={false}
                                             product={product}
@@ -169,7 +178,8 @@ BundleProductViewModal.propTypes = {
     onClose: PropTypes.func.isRequired,
     product: PropTypes.object,
     isLoading: PropTypes.bool,
-    updateCart: PropTypes.func
+    updateCart: PropTypes.func,
+    showDeliveryOptions: PropTypes.bool
 }
 
 export default BundleProductViewModal

package/app/components/social-login/index.jsx

@@ -99,6 +99,7 @@ const SocialLogin = ({form, idps = []}) => {
                         return (
                             config && (
                                 <Button
+                                    key={name}
                                     onClick={() => {
                                         onSocialLoginClick(name)
                                     }}

package/app/components/standard-login/index.jsx

@@ -55,7 +55,10 @@ const StandardLogin = ({
                 )}
                 {hideEmail && (
                     <Button
-                        onClick={() => setShowPasswordView(false)}
+                        onClick={() => {
+                            form.resetField('password')
+                            setShowPasswordView(false)
+                        }}
                         borderColor="gray.500"
                         color="blue.600"
                         variant="outline"

package/app/constants.js

@@ -256,3 +256,6 @@ export const PASSWORDLESS_ERROR_MESSAGES = [
 export const INVALID_TOKEN_ERROR = /invalid token/i
 
 export const USER_NOT_FOUND_ERROR = /user not found/i
+
+// Constant to enable partial hydration capabilities, i.e. `<Island/>` components
+export const PARTIAL_HYDRATION_ENABLED = false

package/app/hooks/use-auth-modal.js

@@ -35,7 +35,6 @@ import {
     API_ERROR_MESSAGE,
     CREATE_ACCOUNT_FIRST_ERROR_MESSAGE,
     FEATURE_UNAVAILABLE_ERROR_MESSAGE,
-    LOGIN_TYPES,
     PASSWORDLESS_ERROR_MESSAGES,
     USER_NOT_FOUND_ERROR
 } from '@salesforce/retail-react-app/app/constants'
@@ -88,8 +87,6 @@ export const AuthModal = ({
     const register = useAuthHelper(AuthHelpers.Register)
     const appOrigin = useAppOrigin()
 
-    const [loginType, setLoginType] = useState(LOGIN_TYPES.PASSWORD)
-    const [passwordlessLoginEmail, setPasswordlessLoginEmail] = useState(initialEmail)
     const {getPasswordResetToken} = usePasswordReset()
     const authorizePasswordlessLogin = useAuthHelper(AuthHelpers.AuthorizePasswordless)
     const passwordlessConfigCallback = getConfig().app.login?.passwordless?.callbackURI
@@ -103,66 +100,67 @@ export const AuthModal = ({
     )
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
 
-    const submitForm = async (data) => {
+    const handlePasswordlessLogin = async (email) => {
+        try {
+            const redirectPath = window.location.pathname + (window.location.search || '')
+            await authorizePasswordlessLogin.mutateAsync({
+                userid: email,
+                callbackURI: `${callbackURL}?redirectUrl=${redirectPath}`
+            })
+            setCurrentView(EMAIL_VIEW)
+        } catch (error) {
+            const message = USER_NOT_FOUND_ERROR.test(error.message)
+                ? formatMessage(CREATE_ACCOUNT_FIRST_ERROR_MESSAGE)
+                : PASSWORDLESS_ERROR_MESSAGES.some((msg) => msg.test(error.message))
+                ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)
+                : formatMessage(API_ERROR_MESSAGE)
+            form.setError('global', {type: 'manual', message})
+        }
+    }
+
+    const submitForm = async (data, isPasswordless = false) => {
         form.clearErrors()
 
         const onLoginSuccess = () => {
             navigate('/account')
         }
 
-        const handlePasswordlessLogin = async (email) => {
-            try {
-                const redirectPath = window.location.pathname + window.location.search
-                await authorizePasswordlessLogin.mutateAsync({
-                    userid: email,
-                    callbackURI: `${callbackURL}?redirectUrl=${redirectPath}`
-                })
-                setCurrentView(EMAIL_VIEW)
-            } catch (error) {
-                const message = USER_NOT_FOUND_ERROR.test(error.message)
-                    ? formatMessage(CREATE_ACCOUNT_FIRST_ERROR_MESSAGE)
-                    : PASSWORDLESS_ERROR_MESSAGES.some((msg) => msg.test(error.message))
-                    ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)
-                    : formatMessage(API_ERROR_MESSAGE)
-                form.setError('global', {type: 'manual', message})
-            }
-        }
-
         return {
             login: async (data) => {
-                if (loginType === LOGIN_TYPES.PASSWORD) {
-                    try {
-                        await login.mutateAsync({
-                            username: data.email,
-                            password: data.password
+                if (isPasswordless) {
+                    const email = data.email
+                    await handlePasswordlessLogin(email)
+                    return
+                }
+
+                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
+                            }
                         })
-                        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})
                     }
-                } else if (loginType === LOGIN_TYPES.PASSWORDLESS) {
-                    setPasswordlessLoginEmail(data.email)
-                    await handlePasswordlessLogin(data.email)
+                } catch (error) {
+                    const message = /Unauthorized/i.test(error.message)
+                        ? formatMessage(LOGIN_ERROR)
+                        : formatMessage(API_ERROR_MESSAGE)
+                    form.setError('global', {type: 'manual', message})
                 }
             },
             register: async (data) => {
@@ -198,7 +196,8 @@ export const AuthModal = ({
                 }
             },
             email: async () => {
-                await handlePasswordlessLogin(passwordlessLoginEmail)
+                const email = form.getValues().email || initialEmail
+                await handlePasswordlessLogin(email)
             }
         }[currentView](data)
     }
@@ -206,7 +205,6 @@ export const AuthModal = ({
     // Reset form and local state when opening the modal
     useEffect(() => {
         if (isOpen) {
-            setLoginType(LOGIN_TYPES.PASSWORD)
             setCurrentView(initialView)
             form.reset()
         }
@@ -223,15 +221,14 @@ export const AuthModal = ({
         fieldsRef?.[initialField]?.ref.focus()
     }, [form.control?.fieldsRef?.current])
 
-    // Clear form state when changing views
     useEffect(() => {
-        form.reset()
+        // we don't want to reset the form on email view
+        // because we want to pass the email to PasswordlessEmailConfirmation
+        if (currentView !== EMAIL_VIEW) {
+            form.reset()
+        }
     }, [currentView])
 
-    useEffect(() => {
-        setPasswordlessLoginEmail(initialEmail)
-    }, [initialEmail])
-
     useEffect(() => {
         // Lets determine if the user has either logged in, or registed.
         const loggingIn = currentView === LOGIN_VIEW
@@ -302,16 +299,20 @@ export const AuthModal = ({
                     {!form.formState.isSubmitSuccessful && currentView === LOGIN_VIEW && (
                         <LoginForm
                             form={form}
-                            submitForm={submitForm}
+                            submitForm={(data) => {
+                                const shouldUsePasswordless =
+                                    isPasswordlessEnabled && !data.password
+                                return submitForm(data, shouldUsePasswordless)
+                            }}
                             clickCreateAccount={() => setCurrentView(REGISTER_VIEW)}
-                            handlePasswordlessLoginClick={() =>
-                                setLoginType(LOGIN_TYPES.PASSWORDLESS)
-                            }
+                            //TODO: potentially remove this prop in the next major release since
+                            // we don't need to use this props anymore
+                            handlePasswordlessLoginClick={noop}
                             handleForgotPasswordClick={() => setCurrentView(PASSWORD_VIEW)}
                             isPasswordlessEnabled={isPasswordlessEnabled}
                             isSocialEnabled={isSocialEnabled}
                             idps={idps}
-                            setLoginType={setLoginType}
+                            setLoginType={noop}
                         />
                     )}
                     {!form.formState.isSubmitSuccessful && currentView === REGISTER_VIEW && (
@@ -332,7 +333,7 @@ export const AuthModal = ({
                         <PasswordlessEmailConfirmation
                             form={form}
                             submitForm={submitForm}
-                            email={passwordlessLoginEmail}
+                            email={form.getValues().email || initialEmail}
                         />
                     )}
                 </ModalBody>