refactor(manualaccountmenu): changing manual account menu to use MUI …

package.json

@@ -52,7 +52,7 @@
     "@kyper/utilityrow": "^2.1.0",
     "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
-    "@mxenabled/mxui": "^1.6.0",
+    "@mxenabled/mxui": "^1.7.0",
     "@reduxjs/toolkit": "^2.2.7",
     "@types/node": "^22.1.0",
     "bowser": "^2.11.0",

src/ConnectedTokenProvider.tsx

@@ -21,6 +21,8 @@ declare module '@mui/material/styles' {
   }
 }
 
+export const muiListItemButtonPadding = 12
+
 const connectThemeOverrides = (palette: Theme['palette']) => ({
   components: {
     MuiTypography: {
@@ -144,6 +146,15 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
         },
       },
     },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          paddingLeft: muiListItemButtonPadding,
+          paddingRight: muiListItemButtonPadding,
+        },
+      },
+    },
   },
   // TODO: Remove this custom spacing scale once we are on MXUI v2.
   spacing: (factor: number) => `${factor * 8}px`,
@@ -195,10 +206,11 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode =>
       tokenOverrides={kyperTokenOverrides}
     >
       <ThemeProvider theme={combinedTheme}>
-        {/* This block can be deleted once we are on MXUI v2. */}
         <GlobalStyles
           styles={{
             ':root': {
+              '--muiListItemButtonPadding': `${muiListItemButtonPadding}px`,
+              // These can be deleted once we are on MXUI v2.
               '--mui-palette-primary-main': combinedTheme.palette.primary.main,
               '--mui-palette-primary-light': combinedTheme.palette.primary.light,
               '--mui-palette-primary-dark': combinedTheme.palette.primary.dark,

src/shared/MuiList/FlushListContainer.module.css

@@ -0,0 +1,4 @@
+.container {
+  margin-left: calc(var(--muiListItemButtonPadding) * -1);
+  margin-right: calc(var(--muiListItemButtonPadding) * -1);
+}

src/shared/MuiList/FlushListContainer.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { render, screen } from 'src/utilities/testingLibrary'
+import { FlushListContainer } from 'src/shared/MuiList/FlushListContainer'
+
+describe('<FlushListContainer />', () => {
+  it('renders its children', () => {
+    const childContent = 'Child content'
+
+    render(
+      <FlushListContainer>
+        <div>{childContent}</div>
+      </FlushListContainer>,
+    )
+
+    expect(screen.getByText(childContent)).toBeInTheDocument()
+  })
+})

src/shared/MuiList/FlushListContainer.tsx

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react'
+
+import styles from 'src/shared/MuiList/FlushListContainer.module.css'
+
+export const FlushListContainer = ({ children }: { children: ReactNode }) => (
+  <div className={styles.container}>{children}</div>
+)

src/views/manualAccount/ManualAccountMenu.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { screen, render } from 'src/utilities/testingLibrary'
+
+import { ManualAccountConnect } from 'src/views/manualAccount/ManualAccountConnect'
+
+describe('manualAccountMenu', () => {
+  it.each([
+    'Checking',
+    'Savings',
+    'Loan',
+    'Credit Card',
+    'Investment',
+    'Line of Credit',
+    'Mortgage',
+    'Property',
+    'Cash',
+    'Insurance',
+    'Prepaid',
+    'Other',
+  ])('shows the %s form when the %s menu button is clicked', async (formType) => {
+    const { user } = render(<ManualAccountConnect />)
+
+    await user.click(await screen.findByRole('button', { name: formType }))
+
+    expect(await screen.findByTestId('manual-account-form-header')).toHaveTextContent(formType)
+  })
+})

src/views/manualAccount/ManualAccountMenu.tsx

@@ -0,0 +1,127 @@
+import React, { Fragment, useEffect } from 'react'
+import { __ } from 'src/utilities/Intl'
+import { Icon, Text } from '@mxenabled/mxui'
+import {
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material'
+
+import { SlideDown } from 'src/components/SlideDown'
+
+import { getDelay } from 'src/utilities/getDelay'
+import { focusElement } from 'src/utilities/Accessibility'
+import { AccountTypeNames, AccountTypes } from 'src/views/manualAccount/constants'
+import { StyledAccountTypeIcon } from 'src/components/StyledAccountTypeIcon'
+import { Stack } from '@mui/material'
+import { FlushListContainer } from 'src/shared/MuiList/FlushListContainer'
+
+interface ManualAccountMenuProps {
+  availableAccountTypes?: number[]
+  handleAccountTypeSelect: (accountType: number) => void
+}
+
+export const ManualAccountMenu = React.forwardRef<HTMLDivElement, ManualAccountMenuProps>(
+  (props, ref) => {
+    const getNextDelay = getDelay()
+
+    const typeList =
+      props.availableAccountTypes?.length !== 0
+        ? props.availableAccountTypes
+        : [
+            AccountTypes.CHECKING,
+            AccountTypes.SAVINGS,
+            AccountTypes.LOAN,
+            AccountTypes.CREDIT_CARD,
+            AccountTypes.INVESTMENT,
+            AccountTypes.LINE_OF_CREDIT,
+            AccountTypes.MORTGAGE,
+            AccountTypes.PROPERTY,
+            AccountTypes.CASH,
+            AccountTypes.INSURANCE,
+            AccountTypes.PREPAID,
+            AccountTypes.UNKNOWN,
+          ]
+
+    const iconSize = 24
+
+    const getIcon: { [key: number]: React.ReactElement } = {
+      [AccountTypes.CHECKING]: <Icon color="secondary" name="checkbook" size={iconSize} />,
+      [AccountTypes.SAVINGS]: <Icon color="secondary" name="savings" size={iconSize} />,
+      [AccountTypes.LOAN]: <Icon color="secondary" name="contract" size={iconSize} />,
+      [AccountTypes.CREDIT_CARD]: <Icon color="secondary" name="credit_card" size={iconSize} />,
+      [AccountTypes.INVESTMENT]: <Icon color="secondary" name="bid_landscape" size={iconSize} />,
+      [AccountTypes.LINE_OF_CREDIT]: <Icon color="secondary" name="description" size={iconSize} />,
+      [AccountTypes.MORTGAGE]: <Icon color="secondary" name="home" size={iconSize} />,
+      [AccountTypes.PROPERTY]: <Icon color="secondary" name="holiday_village" size={iconSize} />,
+      [AccountTypes.CASH]: <Icon color="secondary" name="local_atm" size={iconSize} />,
+      [AccountTypes.INSURANCE]: <Icon color="secondary" name="diagnosis" size={iconSize} />,
+      [AccountTypes.PREPAID]: <Icon color="secondary" name="credit_card" size={iconSize} />,
+      [AccountTypes.UNKNOWN]: <Icon color="secondary" name="grid_view" size={iconSize} />,
+    }
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        focusElement(document.querySelector('[data-test="back-button"]:first-of-type'))
+      }, 300)
+
+      return () => clearTimeout(timer)
+    }, [])
+
+    return (
+      <div data-test="manual-account-menu-container" ref={ref}>
+        <SlideDown delay={getNextDelay()}>
+          <Stack spacing={3}>
+            <StyledAccountTypeIcon icon="accounts" iconSize={40} size={64} />
+            <Stack spacing={1} useFlexGap={true}>
+              <Text
+                component="h2"
+                data-test="add-account-manually-header"
+                truncate={false}
+                variant="H2"
+              >
+                {__('Add account manually')}
+              </Text>
+              <Text
+                component="p"
+                data-test="add-manual-account-paragraph"
+                truncate={false}
+                variant="Paragraph"
+              >
+                {__("Track accounts, assets, and other things that don't have a live connection.")}
+              </Text>
+              <FlushListContainer>
+                <List dense={true}>
+                  {typeList?.map((account_type) => (
+                    <Fragment key={account_type}>
+                      <ListItem disableGutters={true}>
+                        <ListItemButton
+                          aria-label={AccountTypeNames[account_type]()}
+                          data-test={`${AccountTypeNames[account_type]().replace(/\s+/g, '-')}-button`}
+                          onClick={() => props.handleAccountTypeSelect(account_type)}
+                        >
+                          <ListItemAvatar>{getIcon[account_type]}</ListItemAvatar>
+                          <ListItemText disableTypography={true}>
+                            <Text variant="body1">{AccountTypeNames[account_type]()}</Text>
+                          </ListItemText>
+                          <ListItemIcon>
+                            <Icon name="chevron_right" size={iconSize} />
+                          </ListItemIcon>
+                        </ListItemButton>
+                      </ListItem>
+                    </Fragment>
+                  ))}
+                </List>
+              </FlushListContainer>
+            </Stack>
+          </Stack>
+        </SlideDown>
+      </div>
+    )
+  },
+)
+
+ManualAccountMenu.displayName = 'ManualAccountMenu'