@salesforce/retail-react-app 1.0.0 → 1.1.0-dev.1

package/app/components/shared/ui/useBreakpoint/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useBreakpoint} from '@chakra-ui/react'

package/app/components/shared/ui/useBreakpointValue/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useBreakpointValue} from '@chakra-ui/react'

package/app/components/shared/ui/useDisclosure/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useDisclosure} from '@chakra-ui/react'

package/app/components/shared/ui/useMediaQuery/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useMediaQuery} from '@chakra-ui/react'

package/app/components/shared/ui/useMultiStyleConfig/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useMultiStyleConfig} from '@chakra-ui/react'

package/app/components/shared/ui/useNumberInput/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useNumberInput} from '@chakra-ui/react'

package/app/components/shared/ui/useRadio/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useRadio} from '@chakra-ui/react'

package/app/components/shared/ui/useRadioGroup/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useRadioGroup} from '@chakra-ui/react'

package/app/components/shared/ui/useStyleConfig/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useStyleConfig} from '@chakra-ui/react'

package/app/components/shared/ui/useStyles/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useStyles} from '@chakra-ui/react'

package/app/components/shared/ui/useTheme/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useTheme} from '@chakra-ui/react'

package/app/components/shared/ui/useToast/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {useToast} from '@chakra-ui/react'

package/app/components/shared/util/SkipNavContent/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {SkipNavContent} from '@chakra-ui/react'

package/app/components/shared/util/SkipNavLink/index.jsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {SkipNavLink} from '@chakra-ui/react'

package/app/components/shared/util/index.jsx

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+export {SkipNavContent} from './SkipNavContent'
+export {SkipNavLink} from './SkipNavLink/'

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

@@ -15,7 +15,7 @@ import {
 
     // Hooks
     useMultiStyleConfig
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Icons
 import {

package/app/components/swatch-group/index.jsx

@@ -7,7 +7,12 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Flex, Box, HStack, useStyleConfig} from '@chakra-ui/react'
+import {
+    Flex,
+    Box,
+    HStack,
+    useStyleConfig
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {noop} from '@salesforce/retail-react-app/app/utils/utils'
 
 /**

package/app/components/swatch-group/index.test.js

@@ -8,7 +8,7 @@ import React from 'react'
 import {screen, render, fireEvent, waitFor} from '@testing-library/react'
 import {Router, useHistory, useLocation} from 'react-router-dom'
 import SwatchGroup from '@salesforce/retail-react-app/app/components/swatch-group/index'
-import {Box} from '@chakra-ui/react'
+import {Box} from '@salesforce/retail-react-app/app/components/shared/ui'
 import Swatch from '@salesforce/retail-react-app/app/components/swatch-group/swatch'
 import {createMemoryHistory} from 'history'
 

package/app/components/swatch-group/swatch.jsx

@@ -7,7 +7,12 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Button, Box, Center, useMultiStyleConfig} from '@chakra-ui/react'
+import {
+    Button,
+    Box,
+    Center,
+    useMultiStyleConfig
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Link as RouteLink} from 'react-router-dom'
 
 /**

package/app/components/toggle-card/index.jsx

@@ -7,7 +7,13 @@
 import React, {useContext, createContext} from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
-import {Box, Button, Flex, Heading, Stack} from '@chakra-ui/react'
+import {
+    Box,
+    Button,
+    Flex,
+    Heading,
+    Stack
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
 
 const ToggleCardContext = createContext()

package/app/components/with-registration/index.test.js

@@ -5,7 +5,7 @@
  * 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 {Button} from '@chakra-ui/react'
+import {Button} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {screen, waitFor} from '@testing-library/react'
 import withRegistration from '@salesforce/retail-react-app/app/components/with-registration/index'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'

package/app/hooks/use-add-to-cart-modal.js

@@ -23,7 +23,7 @@ import {
     ModalOverlay,
     Stack,
     useBreakpointValue
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import Link from '@salesforce/retail-react-app/app/components/link'
 import RecommendedProducts from '@salesforce/retail-react-app/app/components/recommended-products'

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

@@ -19,7 +19,7 @@ import {
     Text,
     useDisclosure,
     useToast
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {
     AuthHelpers,
     useAuthHelper,

package/app/hooks/use-current-basket.js

@@ -4,8 +4,7 @@
  * 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 {useCustomerBaskets} from '@salesforce/commerce-sdk-react'
-import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import {useCustomerId, useCustomerBaskets} from '@salesforce/commerce-sdk-react'
 import {isServer} from '@salesforce/retail-react-app/app/utils/utils'
 
 /**
@@ -14,8 +13,7 @@ import {isServer} from '@salesforce/retail-react-app/app/utils/utils'
  * @param shouldFetchProductDetail - boolean to indicate if the baskets should fetch product details based on basket items
  */
 export const useCurrentBasket = ({id = ''} = {}) => {
-    const {data: customer} = useCurrentCustomer()
-    const {customerId} = customer
+    const customerId = useCustomerId()
     const {data: basketsData, ...restOfQuery} = useCustomerBaskets(
         {parameters: {customerId}},
         {
@@ -23,9 +21,8 @@ export const useCurrentBasket = ({id = ''} = {}) => {
         }
     )
 
-    // if id is not defined, by default use the first basket in the list
     const currentBasket =
-        basketsData?.baskets?.find((basket) => basket.basketId === id) || basketsData?.baskets?.[0]
+        basketsData?.baskets?.find((basket) => basket?.basketId === id) || basketsData?.baskets?.[0]
 
     return {
         ...restOfQuery,

package/app/hooks/use-toast.js

@@ -12,7 +12,7 @@ import {
     CloseButton,
     Spacer,
     useToast as useChakraToast
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 /**
  * Display a toast message on the screen.

package/app/hooks/use-toast.test.js

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
-import {Button} from '@chakra-ui/react'
+import {Button} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import {screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'

package/app/page-designer/README.md

@@ -34,7 +34,7 @@ Create a new file called `app/pages/page-viewer/index.jsx`, and add the followin
 
 import React from 'react'
 import {useParams} from 'react-router-dom'
-import {Box} from '@chakra-ui/react'
+import {Box} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {usePage} from '@salesforce/commerce-sdk-react'
 import {Page} from '@salesforce/commerce-sdk-react/components'
 import {ImageTile, ImageWithText} from '../../page-designer/assets'
@@ -64,7 +64,7 @@ const PAGEDESIGNER_TO_COMPONENT = {
 
 const PageViewer = () => {
     const {pageId} = useParams()
-    const {data: page, error}= usePage({parameters: {pageId}})
+    const {data: page, error} = usePage({parameters: {pageId}})
 
     if (error) {
         let ErrorClass = error.response?.status === 404 ? HTTPNotFound : HTTPError

package/app/page-designer/assets/image-tile/index.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box, Image} from '@chakra-ui/react'
+import {Box, Image} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 /**
  * Simple ImageTile component that can be used inside any Layout component.

package/app/page-designer/assets/image-with-text/index.jsx

@@ -6,7 +6,12 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box, Image, Link as ChakraLink, Text} from '@chakra-ui/react'
+import {
+    Box,
+    Image,
+    Link as ChakraLink,
+    Text
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import Link from '@salesforce/retail-react-app/app/components/link'
 import {isAbsoluteURL} from '@salesforce/retail-react-app/app/page-designer/utils'
 

package/app/page-designer/layouts/carousel/index.jsx

@@ -14,7 +14,7 @@ import {
     Stack,
     useBreakpoint,
     useBreakpointValue
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Component, regionPropType} from '@salesforce/commerce-sdk-react/components'
 import {ChevronLeftIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
 import {useEffect} from 'react'

package/app/page-designer/layouts/mobileGrid1r1c/index.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {SimpleGrid} from '@chakra-ui/react'
+import {SimpleGrid} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
 
 /**

package/app/page-designer/layouts/mobileGrid2r1c/index.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {SimpleGrid} from '@chakra-ui/react'
+import {SimpleGrid} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
 
 /**

package/app/page-designer/layouts/mobileGrid2r2c/index.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {SimpleGrid} from '@chakra-ui/react'
+import {SimpleGrid} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
 
 /**

package/app/page-designer/layouts/mobileGrid2r3c/index.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {SimpleGrid} from '@chakra-ui/react'
+import {SimpleGrid} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
 
 /**

package/app/page-designer/layouts/mobileGrid3r1c/index.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {SimpleGrid} from '@chakra-ui/react'
+import {SimpleGrid} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
 
 /**

package/app/page-designer/layouts/mobileGrid3r2c/index.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {SimpleGrid} from '@chakra-ui/react'
+import {SimpleGrid} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
 
 /**

package/app/pages/account/addresses.jsx

@@ -21,7 +21,7 @@ import {
     Skeleton,
     Stack,
     Text
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import FormActionButtons from '@salesforce/retail-react-app/app/components/forms/form-action-buttons'
 import {useForm} from 'react-hook-form'
 import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'

package/app/pages/account/index.jsx

@@ -22,7 +22,7 @@ import {
     Stack,
     Text,
     Divider
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import Seo from '@salesforce/retail-react-app/app/components/seo'
 import Link from '@salesforce/retail-react-app/app/components/link'
 import {

package/app/pages/account/order-detail.jsx

@@ -20,7 +20,7 @@ import {
     Grid,
     SimpleGrid,
     Skeleton
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {getCreditCardIcon} from '@salesforce/retail-react-app/app/utils/cc-utils'
 import {useOrder, useProducts} from '@salesforce/commerce-sdk-react'
 import Link from '@salesforce/retail-react-app/app/components/link'

package/app/pages/account/order-history.jsx

@@ -21,7 +21,7 @@ import {
     AspectRatio,
     Img,
     Skeleton
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import {useCustomerOrders, useProducts} from '@salesforce/commerce-sdk-react'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'

package/app/pages/account/profile.jsx

@@ -17,7 +17,7 @@ import {
     Stack,
     Text,
     useToast
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useForm} from 'react-hook-form'
 import {AlertIcon} from '@salesforce/retail-react-app/app/components/icons'
 import {

package/app/pages/account/wishlist/index.jsx

@@ -7,7 +7,7 @@
 import React, {useState} from 'react'
 import {Stack, Heading} from '@chakra-ui/layout'
 import {FormattedMessage, useIntl} from 'react-intl'
-import {Box, Flex, Skeleton} from '@chakra-ui/react'
+import {Box, Flex, Skeleton} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useProducts, useShopperCustomersMutation} from '@salesforce/commerce-sdk-react'
 
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'

package/app/pages/account/wishlist/partials/wishlist-primary-action.jsx

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React, {useState} from 'react'
-import {Button, useDisclosure} from '@chakra-ui/react'
+import {Button, useDisclosure} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
 import {FormattedMessage, useIntl} from 'react-intl'
 import {useItemVariant} from '@salesforce/retail-react-app/app/components/item-variant'

package/app/pages/account/wishlist/partials/wishlist-secondary-button-group.jsx

@@ -6,7 +6,11 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Button, ButtonGroup, useDisclosure} from '@chakra-ui/react'
+import {
+    Button,
+    ButtonGroup,
+    useDisclosure
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useIntl, defineMessage, FormattedMessage} from 'react-intl'
 import {useShopperCustomersMutation} from '@salesforce/commerce-sdk-react'
 

package/app/pages/cart/index.jsx

@@ -8,7 +8,15 @@ import React, {useState} from 'react'
 import {FormattedMessage, useIntl} from 'react-intl'
 
 // Chakra Components
-import {Box, Stack, Grid, GridItem, Container, useDisclosure, Button} from '@chakra-ui/react'
+import {
+    Box,
+    Stack,
+    Grid,
+    GridItem,
+    Container,
+    useDisclosure,
+    Button
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Project Components
 import CartCta from '@salesforce/retail-react-app/app/pages/cart/partials/cart-cta'

package/app/pages/cart/partials/cart-cta.jsx

@@ -6,7 +6,7 @@
  */
 import React, {Fragment} from 'react'
 import {FormattedMessage} from 'react-intl'
-import {Flex, Button} from '@chakra-ui/react'
+import {Flex, Button} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {
     AmexIcon,
     DiscoverIcon,

package/app/pages/cart/partials/cart-secondary-button-group.jsx

@@ -15,7 +15,7 @@ import {
     Flex,
     Stack,
     useDisclosure
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {defineMessage, FormattedMessage} from 'react-intl'
 import {useItemVariant} from '@salesforce/retail-react-app/app/components/item-variant'
 import ConfirmationModal from '@salesforce/retail-react-app/app/components/confirmation-modal/index'

package/app/pages/cart/partials/cart-skeleton.jsx

@@ -15,7 +15,7 @@ import {
     Text,
     Heading,
     Box
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {FormattedMessage} from 'react-intl'
 
 const CartItemSkeleton = () => {

package/app/pages/cart/partials/cart-title.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 import {FormattedMessage} from 'react-intl'
-import {Text} from '@chakra-ui/react'
+import {Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 
 const CartTitle = () => {

package/app/pages/cart/partials/empty-cart.jsx

@@ -7,7 +7,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
-import {Box, Button, Stack, Center, Text} from '@chakra-ui/react'
+import {
+    Box,
+    Button,
+    Stack,
+    Center,
+    Text
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {AccountIcon, BasketIcon} from '@salesforce/retail-react-app/app/components/icons'
 import Link from '@salesforce/retail-react-app/app/components/link'
 

package/app/pages/checkout/confirmation.jsx

@@ -19,7 +19,7 @@ import {
     Alert,
     AlertIcon,
     Divider
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useForm} from 'react-hook-form'
 import {useParams} from 'react-router-dom'
 import {useOrder, useProducts, useAuthHelper, AuthHelpers} from '@salesforce/commerce-sdk-react'

package/app/pages/checkout/index.jsx

@@ -6,7 +6,16 @@
  */
 import React, {useEffect, useState} from 'react'
 import {FormattedMessage, useIntl} from 'react-intl'
-import {Alert, AlertIcon, Box, Button, Container, Grid, GridItem, Stack} from '@chakra-ui/react'
+import {
+    Alert,
+    AlertIcon,
+    Box,
+    Button,
+    Container,
+    Grid,
+    GridItem,
+    Stack
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import {
     CheckoutProvider,

package/app/pages/checkout/index.test.js

@@ -299,6 +299,16 @@ test('Can proceed through checkout steps as guest', async () => {
     await user.click(screen.getByText(/2 items in cart/i))
     expect(await screen.findByText(/Long Sleeve Crew Neck/i)).toBeInTheDocument()
 
+    // Verify password field is reset if customer toggles login form
+    const loginToggleButton = screen.getByText(/Already have an account\? Log in/i)
+    await user.click(loginToggleButton)
+    // Provide customer email and submit
+    const passwordInput = document.querySelector('input[type="password"]')
+    await user.type(passwordInput, 'Password1!')
+
+    const checkoutAsGuestButton = screen.getByText(/Checkout as guest/i)
+    await user.click(checkoutAsGuestButton)
+
     // Provide customer email and submit
     const emailInput = screen.getByLabelText(/email/i)
     const submitBtn = screen.getByText(/checkout as guest/i)