W-18672755 - W-18397045 - Chakra UI order history and order detail (#2730)

* Order history and order detail

Author: alexvuong

jest.config.js

@@ -59,11 +59,13 @@ module.exports = {
         // createTestGlob('pages/registration'), // TODO: enable after Account page has been migrated
         '<rootDir>/src/pages/checkout/partials/contact-info.test.js',
         '<rootDir>/src/pages/checkout/partials/login-state.test.js',
+        '<rootDir>/src/pages/account/orders.test.js',
         '<rootDir>/src/utils/responsive-image.test.js',
         '<rootDir>/src/hooks/use-toast.test.js',
         '<rootDir>/src/pages/product-detail/metadata.test.js',
         '<rootDir>/src/pages/product-list/metadata.test.js',
-        '<rootDir>/src/hooks/use-toast.test.js'
+        '<rootDir>/src/hooks/use-toast.test.js',
+        '<rootDir>/src/hooks/use-dnt-notification.test.js'
         // '<rootDir>/src/hooks/use-auth-modal.test.js' // TODO: enable after Account page has been migrated
     ],
     moduleNameMapper: {

src/components/field/index.jsx

@@ -60,6 +60,8 @@ const Field = ({
                 const _inputProps =
                     typeof inputProps === 'function' ? inputProps({value, onChange}) : inputProps
 
+                const {endElement, ...restOfInputProps} = _inputProps || {}
+
                 return (
                     <ChakraField.Root id={name} invalid={!!error}>
                         {!['checkbox', 'radio', 'hidden'].includes(type) &&
@@ -77,7 +79,7 @@ const Field = ({
                                             <PasswordIcon color="gray.500" boxSize={6} />
                                         </IconButton>
                                     ) : (
-                                        _inputProps?.endElement
+                                        endElement
                                     )
                                 }
                             >
@@ -92,7 +94,7 @@ const Field = ({
                                         type={inputType}
                                         placeholder={placeholder}
                                         autoComplete={autoComplete}
-                                        {..._inputProps}
+                                        {...restOfInputProps}
                                     />
                                     {children}
                                 </>

src/components/header/index.jsx

@@ -102,9 +102,8 @@ test('renders Header with event handlers', async () => {
     })
     const menu = screen.getByLabelText('Menu')
     const logo = screen.getByLabelText('Logo')
-    const account = screen.getByLabelText(/Open account menu/i)
+    const account = screen.getByLabelText(/My Account/i)
     const cart = screen.getByLabelText(/My cart, number of items: 2/)
-
     await act(async () => {
         fireEvent.click(menu)
     })
@@ -121,13 +120,7 @@ test('renders Header with event handlers', async () => {
     expect(onMyCartClick).toHaveBeenCalledTimes(1)
 
     await act(async () => {
-        fireEvent.mouseEnter(account)
-    })
-    // The onClick handler is on the AccountIcon inside the button,
-    // so we need to find and click that
-    const accountIcon = account.querySelector('svg[aria-label="account"]')
-    await act(async () => {
-        fireEvent.click(accountIcon)
+        fireEvent.click(account)
     })
     expect(onMyAccountClick).toHaveBeenCalledTimes(1)
 })
@@ -174,34 +167,18 @@ test('renders cart badge when basket is loaded', async () => {
 test('route to account page when an authenticated users click on account icon', async () => {
     const history = createMemoryHistory()
     history.push = jest.fn()
-    renderWithProviders(<MockedComponent history={history} />)
+    const {user} = renderWithProviders(<MockedComponent history={history} />)
 
     await waitFor(() => {
         // Look for account button
-        const accountTrigger = screen.getByLabelText(/Open account menu/)
+        const accountTrigger = screen.getByLabelText(/My account/)
         expect(accountTrigger).toBeInTheDocument()
     })
 
-    const accountButton = screen.getByLabelText(/Open account menu/)
-
-    await act(async () => {
-        // Use mouseEnter to open the popover, then click on the AccountIcon inside
-        fireEvent.mouseEnter(accountButton)
-    })
-
-    // The onClick handler is on the AccountIcon inside the button,
-    // so we need to find and click that
-    const accountIcon = accountButton.querySelector('svg[aria-label="account"]')
-    await act(async () => {
-        fireEvent.click(accountIcon)
-    })
-    await waitFor(() => {
-        expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account'))
-    })
+    const accountButton = screen.getByLabelText(/My account/)
 
-    // Test keyDown on the AccountIcon
     await act(async () => {
-        fireEvent.keyDown(accountIcon, {key: 'Enter', code: 'Enter'})
+        await user.click(accountButton)
     })
     await waitFor(() => {
         expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account'))
@@ -228,41 +205,3 @@ test('route to wishlist page when an authenticated users click on wishlist icon'
         expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account/wishlist'))
     })
 })
-
-test('shows dropdown menu when an authenticated users hover on the account icon', async () => {
-    global.server.use(
-        rest.post('*/customers/action/login', (req, res, ctx) => {
-            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
-        })
-    )
-    const history = createMemoryHistory()
-    history.push = jest.fn()
-
-    await act(async () => {
-        renderWithProviders(<MockedComponent history={history} />)
-    })
-
-    await waitFor(() => {
-        // Look for account button
-        const accountTrigger = screen.getByLabelText(/Open account menu/i)
-        expect(accountTrigger).toBeInTheDocument()
-    })
-
-    const accountButton = screen.getByLabelText(/Open account menu/i)
-
-    // Use mouseEnter to open the popover/dropdown
-    await act(async () => {
-        fireEvent.mouseEnter(accountButton)
-    })
-
-    // Now check that the dropdown menu items are visible
-    await waitFor(() => {
-        expect(screen.getByText(/account details/i)).toBeInTheDocument()
-        expect(screen.getByText(/addresses/i)).toBeInTheDocument()
-        expect(screen.getByText(/wishlist/i)).toBeInTheDocument()
-        expect(screen.getByText(/order history/i)).toBeInTheDocument()
-        const logOutIcon = screen.getByLabelText('signout')
-        expect(logOutIcon).toBeInTheDocument()
-        expect(logOutIcon).toHaveAttribute('aria-hidden', 'true')
-    })
-})

src/components/header/index.test.js

@@ -57,8 +57,8 @@ const CartItems = ({basket}) => {
                     </Box>
                     <Accordion.ItemIndicator />
                 </Accordion.ItemTrigger>
-                <Accordion.ItemContent px={0} py={4}>
-                    <Stack gap={5} align="flex-start" separator={<Separator />}>
+                <Accordion.ItemContent px="0" py="4">
+                    <Stack gap="5" alignItems="flex-start" separator={<Separator w="full" />}>
                         {basket.productItems?.map((product, idx) => {
                             const variant = {
                                 ...product,
@@ -72,8 +72,8 @@ const CartItems = ({basket}) => {
                                     variant={variant}
                                 >
                                     <Flex width="full" alignItems="flex-start">
-                                        <CartItemVariantImage width="80px" mr={2} />
-                                        <Stack width="full" gap={1} marginTop="-3px">
+                                        <CartItemVariantImage width="80px" mr="2" />
+                                        <Stack width="full" gap="1" marginTop="-3px">
                                             <CartItemVariantName />
                                             <CartItemVariantAttributes includeQuantity />
                                             <CartItemVariantPrice
@@ -86,11 +86,13 @@ const CartItems = ({basket}) => {
                             )
                         })}
 
-                        <Button as={Link} to="/cart" variant="link-blue" width="full">
-                            <FormattedMessage
-                                defaultMessage="Edit cart"
-                                id="order_summary.cart_items.link.edit_cart"
-                            />
+                        <Button asChild to="/cart" variant="link-blue" width="full">
+                            <Link>
+                                <FormattedMessage
+                                    defaultMessage="Edit cart"
+                                    id="order_summary.cart_items.link.edit_cart"
+                                />
+                            </Link>
                         </Button>
                     </Stack>
                 </Accordion.ItemContent>
@@ -119,17 +121,15 @@ const OrderSummary = ({
     const hasShippingPromos = shippingItem?.priceAdjustments?.length > 0
 
     return (
-        <Stack data-testid="sf-order-summary" gap={5}>
-            <Heading fontSize={fontSize} pt={1} id="order-summary-heading">
+        <Stack data-testid="sf-order-summary" gap="5">
+            <Heading fontSize={fontSize} pt="1" id="order-summary-heading">
                 <FormattedMessage
                     defaultMessage="Order Summary"
                     id="order_summary.heading.order_summary"
                 />
             </Heading>
-
-            <Stack gap={4} align="flex-start" role="region" aria-labelledby="order-summary-heading">
+            <Stack gap="4" align="flex-start" role="region" aria-labelledby="order-summary-heading">
                 {showCartItems && <CartItems basket={basket} />}
-
                 <Stack w="full">
                     <Flex justifyContent="space-between" aria-live="polite" aria-atomic="true">
                         <Text fontWeight="bold" fontSize={fontSize}>
@@ -246,10 +246,9 @@ const OrderSummary = ({
                         <PromoCode {...promoCodeProps} />
                     </Box>
                 ) : (
-                    <Separator />
+                    <Separator w="full" />
                 )}
-
-                <Stack gap={4} w="full">
+                <Stack gap="4" w="full">
                     <Flex
                         w="full"
                         justifyContent="space-between"
@@ -282,7 +281,7 @@ const OrderSummary = ({
 
                     {basket.couponItems?.length > 0 && (
                         <Stack
-                            p={4}
+                            p="4"
                             border="1px solid"
                             borderColor="gray.100"
                             borderRadius="base"
@@ -305,7 +304,7 @@ const OrderSummary = ({
                                             <Button
                                                 variant="link-red"
                                                 size="sm"
-                                                colorPallete="red"
+                                                colorPalete="red"
                                                 onClick={() => removePromoCode(item.couponItemId)}
                                             >
                                                 <FormattedMessage

src/components/order-summary/index.jsx

@@ -20,7 +20,7 @@ const Section = ({title, subtitle, actions, maxWidth, children, ...props}) => {
         <Box as="section" paddingBottom="16" {...props}>
             <Stack gap={6} as={Container} maxW={sectionMaxWidth} textAlign="center">
                 {title && (
-                    <Heading as="h2" fontSize={40} textAlign="center" fontWeight="bold">
+                    <Heading as="h2" fontSize={40} textAlign="center">
                         {title}
                     </Heading>
                 )}

src/components/section/index.jsx

@@ -26,6 +26,8 @@ import {
     Flex,
     Heading,
     Spinner,
+
+    //hooks
     useDisclosure,
     useSlotRecipe,
     useToken
@@ -55,7 +57,7 @@ import {useExtensionConfig, useCurrentCustomer, useCurrentBasket} from '../../ho
 import {watchOnlineStatus, flatten} from '../../utils/utils'
 import useActiveData from '../../hooks/use-active-data'
 import useMultiSite from '../../hooks/use-multi-site'
-// import {DntNotification, useDntNotification} from '../../hooks/use-dnt-notification'
+import {DntNotification, useDntNotification} from '../../hooks/use-dnt-notification'
 
 import {UserConfig} from '../../types/config'
 
@@ -118,13 +120,17 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
         const history = useHistory()
         const location = useLocation()
         const authModal = useAuthModal()
-        // const dntNotification = useDntNotification()
+        const dntNotification = useDntNotification()
         const {site, locale, buildUrl} = useMultiSite()
         const [isOnline, setIsOnline] = useState<boolean>(true)
 
         // https://www.chakra-ui.com/docs/theming/overview#tokens-1
         const [themeColor] = useToken('colors.blue', '600')
-        const {open, onOpen, onClose} = useDisclosure()
+        const {
+            open: isDrawerMenuOpen,
+            onOpen: onDrawerMenuOpen,
+            onClose: onDrawerMenuClose
+        } = useDisclosure()
 
         // Used to conditionally render header/footer for checkout page
         const isCheckout = /\/checkout$/.test(location?.pathname)
@@ -179,7 +185,7 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
         useEffect(() => {
             // Lets automatically close the mobile navigation when the
             // location path is changed.
-            onClose()
+            onDrawerMenuClose()
         }, [location])
 
         const onLogoClick = () => {
@@ -191,15 +197,15 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
             history.push(path)
 
             // Close the drawer.
-            onClose()
+            onDrawerMenuClose()
         }
 
         const onCartClick = () => {
             const path = buildUrl('/cart', site.id, locale.id)
             history.push(path)
 
             // Close the drawer.
-            onClose()
+            onDrawerMenuClose()
         }
 
         const onAccountClick = () => {
@@ -283,7 +289,7 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
                             <>
                                 <AboveHeader />
                                 <Header
-                                    onMenuClick={onOpen}
+                                    onMenuClick={onDrawerMenuOpen}
                                     onLogoClick={onLogoClick}
                                     onMyCartClick={onCartClick}
                                     onMyAccountClick={onAccountClick}
@@ -292,8 +298,8 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
                                     {/* TODO: mobile menu */}
                                     <HideOnDesktop>
                                         <DrawerMenu
-                                            isOpen={open}
-                                            onClose={onClose}
+                                            isOpen={isDrawerMenuOpen}
+                                            onClose={onDrawerMenuClose}
                                             onLogoClick={onLogoClick}
                                             root={categories?.[CAT_MENU_DEFAULT_ROOT_CATEGORY]}
                                             itemsKey="categories"
@@ -343,7 +349,7 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
 
                         {!isCheckout ? <Footer /> : <CheckoutFooter />}
                         <AuthModal {...(authModal as any)} />
-                        {/*<DntNotification {...dntNotification} />*/}
+                        <DntNotification {...dntNotification} />
                     </AddToCartModalProvider>
                 </Box>
                 {(config.activeDataEnabled as boolean) && (