@mx-cartographer/experiences 4.0.13 → 4.0.14-alpha.JB1

package/src/goals/stores/GoalStore.ts

@@ -0,0 +1,47 @@
+import { makeAutoObservable, runInAction } from 'mobx'
+
+import { GoalApi } from '../api/GoalApi'
+
+import { type Goal, GlobalStore, TrackType } from '../../common'
+
+export class GoalStore {
+  api = new GoalApi('/', '')
+  globalStore: GlobalStore
+  goals: Goal[] = []
+  selectedGoal: Goal | undefined = undefined
+
+  constructor(globalStore: GlobalStore) {
+    this.globalStore = globalStore
+    makeAutoObservable(this)
+  }
+
+  initialize = async (endpoint: string, token: string) => {
+    this.api = new GoalApi(endpoint, token)
+  }
+
+  get debtGoals() {
+    return this.goals.filter((goal) => goal.track_type === TrackType.DEBT_TRACK)
+  }
+
+  get retirementGoals() {
+    return this.goals.filter((goal) => goal.track_type === TrackType.RETIREMENT_TRACK)
+  }
+
+  get savingsGoals() {
+    return this.goals.filter((goal) => goal.track_type === TrackType.SAVINGS_TRACK)
+  }
+
+  loadGoals = async () => {
+    try {
+      const goals = await this.api.getGoals()
+
+      runInAction(() => {
+        this.goals = goals
+      })
+    } catch (error) {
+      console.error(`Error occured while getting goals: ${error}`)
+    }
+  }
+
+  setSelectedGoal = (goal: Goal | undefined) => (this.selectedGoal = goal)
+}

package/src/goals/util/GoalsUtil.ts

@@ -0,0 +1,61 @@
+import { fromUnixTime } from 'date-fns/fromUnixTime'
+
+import {
+  type Goal,
+  type GoalsCopy,
+  buildDynamicCopy,
+  DATE_FORMATS_INTL,
+  formatDate,
+  formatPercentage,
+  TrackType,
+} from '../../common'
+
+export interface GoalStatusData {
+  backgroundColor: string
+  color: string
+  percentage: number
+  percentageText: string
+  projectedText: string
+}
+
+export function getGoalStatusData(copy: GoalsCopy, goal: Goal): GoalStatusData {
+  let percentage = goal.current_amount / goal.amount
+  if (percentage > 1) percentage = 1
+
+  let backgroundColor = 'chart.chart1'
+  let color = 'common.black'
+  if (goal.track_type === TrackType.DEBT_TRACK) {
+    color = 'common.white'
+    backgroundColor = 'chart.chart5'
+  } else if (goal.track_type === TrackType.RETIREMENT_TRACK) {
+    backgroundColor = 'chart.chart6'
+  }
+
+  const percentageStyle = {
+    style: 'percent',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  } as Intl.NumberFormatOptions
+
+  const completionDate = goal.projected_to_complete_at
+    ? fromUnixTime(goal.projected_to_complete_at)
+    : new Date()
+
+  const percentageText = buildDynamicCopy(
+    copy.goal_percentage,
+    formatPercentage(percentage, percentageStyle),
+  ) as string
+
+  const projectedText = buildDynamicCopy(
+    copy.goal_projection,
+    formatDate(completionDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),
+  ) as string
+
+  return {
+    backgroundColor,
+    color,
+    percentage,
+    percentageText,
+    projectedText,
+  }
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+export * from './accounts'
+export * from './budgets'
+export * from './cashflow'
+export * from './categories'
+export * from './common'
+export * from './dashboard'
+export * from './debts'
+export * from './goals'
+export * from './insights'
+export * from './merchants'
+export * from './microinsights'
+export * from './networth'
+export * from './notifications'
+export * from './recurringactivity'
+export * from './spending'
+export * from './transactions'
+export * from './trends'

package/src/insights/README.md

@@ -0,0 +1,16 @@
+# Structure
+The beat directory structure should follow a similar structure as the pulse repo. This will help developers find files in both repos. The main directory for each insight should be the name of the beat. The beat should include a beat.js and index.js and shared directory for smaller components including the beatBody.js. 
+
+## Code
+Even though the pulse repo is in javascript the experience repo is written in typescript. Please follow the coding patterns of this repo and not pulse. Make sure that the components are using the typescript paradigm. Meaning use interfaces and do not use prop types like we use in pulse.
+
+### Styling
+We want to try and use mui and kyper/mui components as much as possible. Please follow the styling patterns found in this repo. ie. use the sx property as much as possible. Also make sure you wrap the beats or exportable components with the theme provider component. Also make sure all text is wrapped in the Text component from kyper-mui or the styles will be overrode by Pulse.
+
+#### Passing Props
+Prop drilling should be used in the insights. Experiences use mobx and Pulse uses Rx.js/redux as it's state management system. So we are only creating the ui components in this repo. The logic layer will be handled in the existing Pulse Repo. 
+
+##### Copy Store
+Once we move the hardcoded copy out of pulse, we will start using the copy store. Until then we'll need to pass the copy in as props. Do not move the the language json files to this repo. 
+
+Note: Once the insights section is in active development we will need to add an index.ts file to the directory. See micro insights for clarification.

package/src/insights/contexts/ToastContext.tsx

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react'
+
+interface ToastState {
+  isOpen: boolean
+  message: string
+  severity: 'success' | 'error'
+}
+
+interface ToastContextProps {
+  toastState: ToastState
+  showToast: (msg?: string, severityType?: 'success' | 'error') => void
+  hideToast: () => void
+  setMessage: (msg: string) => void
+}
+
+const ToastContext = createContext<ToastContextProps | undefined>(undefined)
+
+const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [toastState, setToastState] = useState<ToastState>({
+    isOpen: false,
+    message: '',
+    severity: 'success',
+  })
+
+  const showToast = (msg?: string, severityType?: 'success' | 'error') => {
+    setToastState({
+      isOpen: true,
+      message: msg ?? toastState.message,
+      severity: severityType ?? toastState.severity,
+    })
+  }
+
+  const hideToast = () => {
+    setToastState({
+      ...toastState,
+      isOpen: false,
+    })
+  }
+
+  const setMessage = (msg: string) => {
+    setToastState((prevState) => ({
+      ...prevState,
+      message: msg,
+    }))
+  }
+
+  return (
+    <ToastContext.Provider value={{ toastState, showToast, hideToast, setMessage }}>
+      {children}
+    </ToastContext.Provider>
+  )
+}
+
+const useToast = (): ToastContextProps => {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider')
+  }
+  return context
+}
+
+export { ToastProvider, useToast }

package/src/insights/index.ts

@@ -0,0 +1,5 @@
+export type { DisabledBeatTemplate } from './settings/hiddeninsights/types'
+export type { ManageAccountsStore } from './settings/manageaccounts/types/index'
+export { ManageAccountsDrawer } from './settings/manageaccounts/components/ManageAccountsDrawer'
+export { HiddenInsightsDrawerWrapper as HiddenInsightsDrawer } from './settings/hiddeninsights/components/HiddenInsightsDrawerWrapper'
+export { default as SettingsDrawer } from './settings/SettingsDrawer'

package/src/insights/settings/SettingsDrawer.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+
+import { Drawer } from '../../common/components'
+
+import type { SettingsMenuContent } from './hiddeninsights/types'
+
+//TODO get content from content store instead of as a prop from pulse
+interface Props {
+  children?: React.ReactNode
+  content: SettingsMenuContent
+  isOpen: boolean
+  onClose: () => void
+}
+
+const SettingsDrawer: React.FC<Props> = ({
+  children,
+  content,
+  isOpen = false,
+  onClose = () => {},
+}) => {
+  return (
+    <Drawer
+      ariaLabelClose={content.close}
+      isOpen={isOpen}
+      onClose={onClose}
+      shouldShowHeaderBorders={false}
+      title={content.settings}
+    >
+      <List>
+        <Divider />
+        {children}
+      </List>
+    </Drawer>
+  )
+}
+
+export default SettingsDrawer

package/src/insights/settings/__tests__/SettingsDrawer.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { ThemeProvider } from '@mui/material/styles'
+
+import { createMXTheme } from '@kyper/mui'
+
+import { render, screen } from '@testing-library/react'
+import { describe, vi } from 'vitest'
+
+import '@testing-library/jest-dom'
+
+import SettingsDrawer from '../SettingsDrawer'
+import { ToastProvider } from '../../contexts/ToastContext'
+import { GlobalDataProvider, GlobalStore } from '../../../common'
+import globalCopy from '../../../../mock/data/GlobalCopy.json'
+
+const globalStore = new GlobalStore()
+
+const renderSettingsDrawer = (isOpen, useDarkMode) => {
+  globalStore.initialize('/', '').finally()
+
+  return render(
+    <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+      <ThemeProvider theme={createMXTheme(useDarkMode ? 'dark' : 'light')}>
+        <ToastProvider>
+          <SettingsDrawer
+            content={globalCopy.experiences.insights_feed.settings_menu}
+            isOpen={isOpen}
+            onClose={vi.fn()}
+            useDarkMode={useDarkMode}
+          />
+        </ToastProvider>
+      </ThemeProvider>
+    </GlobalDataProvider>,
+  )
+}
+
+describe('SettingsDrawer', () => {
+  it('renders correctly when open', () => {
+    renderSettingsDrawer(true, false)
+
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+  })
+
+  it('does not render when closed', () => {
+    renderSettingsDrawer(false, false)
+
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument()
+  })
+})

package/src/insights/settings/components/PulseSubheaderRow.tsx

@@ -0,0 +1,34 @@
+import React, { PropsWithChildren } from 'react'
+
+import Box from '@mui/material/Box'
+
+import { Text } from '@kyper/mui'
+
+interface SubheaderRowProps {
+  bgcolor?: string
+}
+
+//TODO use subheaderRow from common once pulse has CSSbaseline from MUI
+const SubheaderRow: React.FC<PropsWithChildren<SubheaderRowProps>> = ({
+  bgcolor = 'background.default',
+  children,
+}) => (
+  <Box
+    alignItems="flex-end"
+    boxSizing="border-box"
+    display="flex"
+    height={32}
+    pb={4}
+    pl={24}
+    pr={24}
+    pt={4}
+    sx={{ bgcolor }}
+    width="100%"
+  >
+    <Text bold={true} boxSizing="border-box" component="div" variant="XSmall" width="100%">
+      {children}
+    </Text>
+  </Box>
+)
+
+export default SubheaderRow

package/src/insights/settings/components/SettingsItem.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import Divider from '@mui/material/Divider'
+import useTheme from '@mui/material/styles/useTheme'
+import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined'
+
+import { Text } from '@kyper/mui'
+
+interface SettingsItemProps {
+  Icon: React.ElementType
+  label: string
+  onClick: () => void
+  itemCount?: number
+}
+
+const SettingsItem: React.FC<SettingsItemProps> = ({ Icon, label, onClick, itemCount }) => {
+  const theme = useTheme()
+
+  return (
+    <>
+      <ListItem sx={{ backgroundColor: 'background.paper' }}>
+        <ListItemButton onClick={onClick}>
+          <Icon sx={{ fontSize: 22, marginRight: '16px' }} />
+          <ListItemText
+            primary={label}
+            primaryTypographyProps={{
+              fontSize: theme.typography.Body.fontSize,
+            }}
+            sx={{
+              marginRight: 16,
+            }}
+          />
+          {itemCount !== undefined && (
+            <Text
+              sx={{
+                marginRight: 24,
+                color: theme.palette.text.secondary,
+                fontWeight: theme.typography.fontWeightBold,
+                fontSize: theme.typography.Small.fontSize,
+              }}
+            >
+              {itemCount}
+            </Text>
+          )}
+          <ChevronRightOutlinedIcon sx={{ fontSize: 22 }} />
+        </ListItemButton>
+      </ListItem>
+      <Divider />
+    </>
+  )
+}
+
+export default SettingsItem

package/src/insights/settings/components/Toast.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
+import { CheckCircleRounded } from '@mui/icons-material'
+import { SxProps, Theme } from '@mui/system'
+import Grow, { GrowProps } from '@mui/material/Grow'
+
+import { Text } from '@kyper/mui'
+//TODO update component for all uses according to this story
+// https://mxcom.atlassian.net/browse/MEW-488, move into kyper-mui, and re-consume from there
+export function GrowTransition(props: GrowProps) {
+  return <Grow {...props} />
+}
+
+interface ToastProps {
+  open: boolean
+  handleClose: () => void
+  message: string
+  autoHideDuration?: number
+  severity?: 'success' | 'error' | 'warning' | 'info'
+  icon?: React.ReactNode
+  snackbarSx?: SxProps<Theme>
+}
+
+const Toast: React.FC<ToastProps> = ({
+  open,
+  handleClose,
+  message,
+  autoHideDuration = 3000,
+  severity = 'success',
+  icon = <CheckCircleRounded fontSize="inherit" />,
+  snackbarSx,
+}) => {
+  return (
+    <Snackbar
+      TransitionComponent={GrowTransition}
+      autoHideDuration={autoHideDuration}
+      onClose={handleClose}
+      open={open}
+      sx={{
+        width: '100%',
+        px: 24,
+        ...snackbarSx,
+      }}
+    >
+      <Alert
+        icon={icon}
+        onClose={handleClose}
+        severity={severity}
+        sx={{
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          height: 56,
+          backgroundColor: (theme) => theme.palette[severity].darker,
+          //TODO can be removed once pulse has CSSbaseline from MUI and component is moved to kyper
+          boxSizing: 'border-box',
+        }}
+        variant="filled"
+      >
+        <Text sx={{ lineHeight: '20px' }} truncate={false}>
+          {message}
+        </Text>
+      </Alert>
+    </Snackbar>
+  )
+}
+
+export default Toast

package/src/insights/settings/hiddeninsights/__tests__/HiddenInsightsDrawer.test.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+
+import { ThemeProvider } from '@mui/material/styles'
+
+import { createMXTheme } from '@kyper/mui'
+
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, vi } from 'vitest'
+
+import '@testing-library/jest-dom'
+
+import { GlobalDataProvider, GlobalStore } from '../../../../common'
+import globalCopy from '../../../../../mock/data/GlobalCopy.json'
+import { HiddenInsightsDrawer } from '../components/HiddenInsightsDrawer'
+import { ToastProvider } from '../../../contexts/ToastContext'
+import disabledBeatTemplates from '../../../../../mock/data/DisabledBeatTemplates.json'
+
+const globalStore = new GlobalStore()
+
+const renderCategoryDrawer = (props) => {
+  globalStore.initialize('/', '').finally()
+
+  return render(
+    <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+      <ThemeProvider theme={createMXTheme(props.useDarkMode ? 'dark' : 'light')}>
+        <ToastProvider>
+          <HiddenInsightsDrawer {...props} />
+        </ToastProvider>
+      </ThemeProvider>
+    </GlobalDataProvider>,
+  )
+}
+
+describe('HiddenInsightsDrawer', () => {
+  const baseProps = {
+    content: globalCopy.experiences.insights_feed.settings_menu,
+    disabledBeatTemplatesStore: {
+      items: disabledBeatTemplates,
+      update: vi.fn(),
+      isUpdateLoading: false,
+      isUpdateError: false,
+    },
+  }
+
+  it('renders correctly when open', () => {
+    renderCategoryDrawer({ ...baseProps })
+
+    fireEvent.click(screen.getByText('Manage hidden insights'))
+
+    const allTitles = screen.getAllByText('Manage hidden insights')
+    expect(allTitles[1]).toBeInTheDocument()
+  })
+
+  it('does not render when closed', () => {
+    renderCategoryDrawer({ ...baseProps })
+
+    expect(screen.queryByText('Show all hidden insights')).not.toBeInTheDocument()
+  })
+
+  it('shows empty state when there are no disabled beat templates', () => {
+    renderCategoryDrawer({
+      ...baseProps,
+      disabledBeatTemplatesStore: {
+        ...baseProps.disabledBeatTemplatesStore,
+        items: [],
+      },
+    })
+
+    fireEvent.click(screen.getByText('Manage hidden insights'))
+    expect(
+      screen.getByText("There're no insights you chose to hide permanently."),
+    ).toBeInTheDocument()
+  })
+
+  it('renders disabled beat templates correctly', () => {
+    renderCategoryDrawer({ ...baseProps, disabledBeatTemplates })
+
+    fireEvent.click(screen.getByText('Manage hidden insights'))
+    disabledBeatTemplates.forEach((template) => {
+      expect(screen.getByText(template.categories[0].category)).toBeInTheDocument()
+    })
+  })
+
+  it('calls handleEnableBeatTemplates when unhide all insights button is clicked', () => {
+    renderCategoryDrawer({
+      ...baseProps,
+    })
+
+    fireEvent.click(screen.getByText('Manage hidden insights'))
+    fireEvent.click(screen.getByText('Show all hidden insights'))
+
+    expect(baseProps.disabledBeatTemplatesStore.update).toHaveBeenCalledWith(
+      disabledBeatTemplates.map((template) => template.name),
+    )
+  })
+
+  it('opens sub-category drawer on category click', () => {
+    renderCategoryDrawer({
+      ...baseProps,
+    })
+
+    fireEvent.click(screen.getByText('Manage hidden insights'))
+    const subcategory = disabledBeatTemplates[0].categories[0].subcategory
+
+    fireEvent.click(screen.getByText(subcategory, { selector: 'span' }))
+    expect(screen.getByRole('heading', { level: 2, name: subcategory })).toBeInTheDocument()
+  })
+})