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

package/src/cashflow/components/SummaryTab.tsx

@@ -0,0 +1,247 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import Stack from '@mui/material/Stack'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'
+
+import { InstitutionLogo, Text } from '@kyper/mui'
+
+import {
+  type Account,
+  DATE_FORMATS_INTL,
+  formatCurrency,
+  formatDate,
+  InformationTooltip,
+  useGlobalCopyStore,
+  useRecurringActivityStore,
+  useWidgetContainerProvider,
+} from '../../common'
+import { useCashflowUiStore } from '../context/hooks'
+import { CurrencyText } from '../../common/components/CurrencyText'
+import RemainingCash from './RemainingCash'
+
+const SummaryTab = () => {
+  const { availableWidth } = useWidgetContainerProvider()
+  const theme = useTheme()
+  const { cashflow: customCopy } = useGlobalCopyStore()
+  const { upcomingExpenses, upcomingIncome } = useRecurringActivityStore()
+  const { dateRange, selectedCashAccounts } = useCashflowUiStore()
+
+  const columns: GridColDef[] = [
+    {
+      field: 'account',
+      flex: 1.5,
+      headerName: customCopy.accounts,
+      renderCell: ({ value: { name, nickname, institution_guid, account_number } }) => {
+        const accountName = nickname || name
+
+        return (
+          <Stack alignItems="center" flexDirection="row" gap={12}>
+            <InstitutionLogo
+              alt={customCopy.institution_logo}
+              institutionGuid={institution_guid || ''}
+              size={16}
+            />
+            {`${accountName} ${account_number ? `*${account_number}` : ''}`}
+          </Stack>
+        )
+      },
+    },
+    {
+      field: 'balance',
+      flex: 1,
+      headerName: customCopy.balance,
+      type: 'number',
+      renderCell: (params) => formatCurrency(params.value, '0,0.00'),
+    },
+    {
+      field: 'income',
+      flex: 1,
+      headerName: customCopy.projected_income,
+      type: 'number',
+      renderCell: (params) => `+${formatCurrency(params.value, '0,0.00')}`,
+    },
+    {
+      field: 'expenses',
+      flex: 1.1,
+      headerName: customCopy.projected_expenses,
+      type: 'number',
+      renderCell: (params) => `-${formatCurrency(params.value, '0,0.00')}`,
+    },
+    {
+      field: 'remaining',
+      flex: 1,
+      headerName: customCopy.remaining,
+      type: 'number',
+      renderCell: (params) => {
+        const total = params.row.balance + params.row.income - params.row.expenses
+
+        return (
+          <Text
+            color={Math.sign(total) === -1 ? theme.palette.error.main : theme.palette.text.primary}
+            variant="Small"
+          >
+            {formatCurrency(total, '0,0.00')}
+          </Text>
+        )
+      },
+    },
+  ]
+
+  const rows = React.useMemo(() => {
+    return selectedCashAccounts.map((account: Account) => {
+      const totalprojectedExpenses = upcomingExpenses
+        .filter((a) => a.accountGuid === account.guid)
+        .reduce((acc, curr) => acc + curr.amount, 0)
+
+      const totalProjectedIncome = upcomingIncome
+        .filter((a) => a.accountGuid === account.guid)
+        .reduce((acc, curr) => acc + curr.amount, 0)
+
+      const remaining = (account.balance || 0) + totalProjectedIncome - totalprojectedExpenses
+
+      return {
+        account,
+        balance: account.balance || 0,
+        id: account.guid,
+        income: totalProjectedIncome,
+        expenses: totalprojectedExpenses,
+        remaining,
+      }
+    })
+  }, [selectedCashAccounts, upcomingExpenses, upcomingIncome])
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+      }}
+    >
+      <Stack
+        direction={availableWidth < 540 ? 'column' : 'row'}
+        justifyContent="space-between"
+        mb={12}
+      >
+        <Stack alignItems="center" direction="row" gap={8}>
+          <Text
+            bold={true}
+            sx={{
+              fontSize: 15,
+              whiteSpace: 'normal',
+            }}
+          >
+            {customCopy.cash_inflow_and_outflow}
+          </Text>
+          <InformationTooltip
+            body={customCopy.table_tooltip_body}
+            title={customCopy.table_tooltip_title}
+          />
+        </Stack>
+        <Text bold={true} sx={{ fontSize: 15, whiteSpace: 'normal' }}>
+          {formatDate(dateRange.start, DATE_FORMATS_INTL.FULL_MONTH_DAY)} -{' '}
+          {formatDate(dateRange.end, DATE_FORMATS_INTL.FULL_MONTH_DAY)}
+        </Text>
+      </Stack>
+      {availableWidth > 650 ? (
+        <DataGridPro
+          autoHeight={true}
+          columnHeaderHeight={48}
+          columns={columns}
+          density="standard"
+          disableColumnMenu={true}
+          disableRowSelectionOnClick={true}
+          hideFooter={true}
+          rowHeight={48}
+          rows={rows}
+          sx={{
+            border: '1px solid',
+            borderColor: 'border.light',
+            borderRadius: 1,
+          }}
+        />
+      ) : (
+        rows.map((row) => {
+          const { name, nickname, institution_guid, account_number } = row.account
+          const accountName = nickname || name
+
+          return (
+            <List
+              key={row.id}
+              sx={{
+                border: '1px solid',
+                borderColor: 'border.light',
+                borderRadius: 1,
+                marginBottom: 24,
+              }}
+            >
+              <ListItem sx={{ minHeight: 'auto' }}>
+                <Stack width="100%">
+                  <Stack
+                    alignItems="center"
+                    flexDirection="row"
+                    justifyContent="space-between"
+                    px={16}
+                    py={12}
+                  >
+                    <Stack alignItems="center" flexDirection="row" gap={8}>
+                      <InstitutionLogo
+                        alt={customCopy.institution_logo}
+                        institutionGuid={institution_guid || ''}
+                        size={16}
+                      />
+                      <Text variant="Small">{`${accountName} ${account_number ? `*${account_number}` : ''}`}</Text>
+                    </Stack>
+                    <CurrencyText amount={row.balance} bold={true} variant="Small" />
+                  </Stack>
+                  <Divider sx={{ width: '100%' }} />
+                  <Stack
+                    alignItems="center"
+                    flexDirection="row"
+                    justifyContent="space-between"
+                    px={16}
+                    py={12}
+                  >
+                    <Text variant="Small">{customCopy.projected_income}</Text>
+                    <CurrencyText amount={row.income} bold={true} symbol="+" variant="Small" />
+                  </Stack>
+                  <Divider sx={{ width: '100%' }} />
+                  <Stack
+                    alignItems="center"
+                    flexDirection="row"
+                    justifyContent="space-between"
+                    px={16}
+                    py={12}
+                  >
+                    <Text variant="Small">{customCopy.projected_expenses}</Text>
+                    <CurrencyText amount={row.expenses} bold={true} symbol="-" variant="Small" />
+                  </Stack>
+                  <Divider sx={{ width: '100%' }} />
+                  <Stack
+                    alignItems="center"
+                    bgcolor="background.default"
+                    flexDirection="row"
+                    gap={8}
+                    justifyContent="space-between"
+                    px={16}
+                    py={12}
+                    sx={{ borderBottomLeftRadius: '4px', borderBottomRightRadius: '4px' }}
+                  >
+                    <RemainingCash remaining={row.remaining} />
+                  </Stack>
+                </Stack>
+              </ListItem>
+            </List>
+          )
+        })
+      )}
+    </Box>
+  )
+}
+
+export default observer(SummaryTab)

package/src/cashflow/components/onboarding/StepOne.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Stack from '@mui/material/Stack'
+
+import { H1, H2, Icon, P } from '@kyper/mui'
+import useTheme from '@mui/material/styles/useTheme'
+import { useCashflowStore, useGlobalCopyStore } from '../../../common'
+
+interface StepOneProps {
+  handleNextStep: () => void
+}
+
+const StepOne: React.FC<StepOneProps> = ({ handleNextStep }) => {
+  const { completeOnboarding } = useCashflowStore()
+  const { cashflow: customCopy } = useGlobalCopyStore()
+
+  const theme = useTheme()
+
+  return (
+    <Stack>
+      <H1 pb={12}>{customCopy.welcome_title}</H1>
+      <H2
+        color={theme.palette.action.active}
+        pb={8}
+        sx={{ wordBreak: 'break-word', whiteSpace: 'initial' }}
+        variant="H3"
+      >
+        {customCopy.welcome_sub_title}
+      </H2>
+      <P pb={32}>{customCopy.welcome_description}</P>
+      <Stack direction="column" mb={32} spacing={32}>
+        <P sx={{ display: 'flex', alignItems: 'center', fontSize: 18 }}>
+          <Box
+            bgcolor={theme.palette.primary.lighter}
+            borderRadius={1}
+            component="span"
+            height={44}
+            mr={24}
+            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
+            width={44}
+          >
+            <Icon color="primary" name="currency_exchange" />
+          </Box>
+          {customCopy.bullet_one}
+        </P>
+        <P sx={{ display: 'flex', alignItems: 'center', fontSize: 18 }}>
+          <Box
+            bgcolor={theme.palette.primary.lighter}
+            borderRadius={1}
+            component="span"
+            height={44}
+            mr={24}
+            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
+            width={44}
+          >
+            <Icon color="primary" name="cardiology" />
+          </Box>
+          {customCopy.bullet_two}
+        </P>
+        <P sx={{ display: 'flex', alignItems: 'center', fontSize: 18 }}>
+          <Box
+            bgcolor={theme.palette.primary.lighter}
+            borderRadius={1}
+            component="span"
+            height={44}
+            mr={24}
+            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
+            width={44}
+          >
+            <Icon color="primary" name="flare" />
+          </Box>
+          {customCopy.bullet_three}
+        </P>
+      </Stack>
+      <Stack direction="row" spacing={16}>
+        <Button onClick={handleNextStep} variant="contained">
+          {customCopy.get_started_button}
+        </Button>
+        <Button onClick={completeOnboarding} variant="outlined">
+          {customCopy.skip_button}
+        </Button>
+      </Stack>
+    </Stack>
+  )
+}
+
+export default observer(StepOne)

package/src/cashflow/components/onboarding/StepTwo.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { H1, P } from '@kyper/mui'
+import { useGlobalCopyStore } from '../../../common'
+
+import stepTwoLoadingUrl from '../../images/loading-animation.gif'
+
+const StepTwo: React.FC = () => {
+  const { cashflow: customCopy } = useGlobalCopyStore()
+
+  return (
+    <React.Fragment>
+      <div>
+        <img alt="Loading" src={stepTwoLoadingUrl} />
+      </div>
+      <H1 pb={12}>{customCopy.loading_title}</H1>
+      <P>{customCopy.loading_description}</P>
+    </React.Fragment>
+  )
+}
+
+export default observer(StepTwo)

package/src/cashflow/context/hooks.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { GlobalDataContext, useCashflowStore } from '../../common'
+
+export const useCashflowUiStore = () => {
+  const context = React.useContext(GlobalDataContext)
+
+  if (!context) {
+    throw new Error('useCashflowUiStore() must be used within the GlobalDataContext')
+  }
+
+  return useCashflowStore().uiStore
+}

package/src/cashflow/index.ts

@@ -0,0 +1,5 @@
+export { default as CashflowMiniWidget } from './CashflowMiniWidget'
+export { default as CashflowWidget } from './CashflowWidget'
+export { default as CashflowOnboarding } from './CashflowOnboarding'
+export { CashflowApi } from './api/CashflowApi'
+export { CashflowStore } from './stores/CashflowStore'

package/src/cashflow/stores/CashflowStore.ts

@@ -0,0 +1,26 @@
+import { makeAutoObservable } from 'mobx'
+
+import { GlobalStore, type UserProfile } from '../../common'
+
+import { UiStore } from './UiStore'
+
+export class CashflowStore {
+  globalStore: GlobalStore
+  uiStore: UiStore
+
+  constructor(globalStore: GlobalStore) {
+    this.globalStore = globalStore
+    this.uiStore = new UiStore()
+
+    makeAutoObservable(this)
+  }
+
+  completeOnboarding = async () => {
+    const updatedUserProfile = {
+      ...this.globalStore.userStore.userProfile,
+      has_completed_cash_flow_onboarding: true,
+    } as UserProfile
+
+    await this.globalStore.userStore.updateUserProfile(updatedUserProfile)
+  }
+}

package/src/cashflow/stores/UiStore.ts

@@ -0,0 +1,48 @@
+import { makeAutoObservable } from 'mobx'
+import { addDays } from 'date-fns/addDays'
+import { differenceInDays } from 'date-fns/differenceInDays'
+import { endOfMonth } from 'date-fns/endOfMonth'
+import { isBefore } from 'date-fns/isBefore'
+import { startOfToday } from 'date-fns/startOfToday'
+
+import { type Account, type Activity } from '../../common'
+
+export class UiStore {
+  // Cashflow is hard-coded to display 30 days starting from today
+  dateRange = { start: startOfToday(), end: addDays(startOfToday(), 30) }
+  isDirty = false
+
+  nextIncome: Activity | undefined = undefined
+  upcomingExpenses: Activity[] = []
+
+  selectedCashAccounts: Account[] = []
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  // Returns the number of days until the next income activity or 0 if there is no income activity
+  get daysUntilNextIncome() {
+    return this.nextIncome
+      ? Math.abs(differenceInDays(startOfToday(), this.nextIncome.expectedDate))
+      : 0
+  }
+
+  // Returns the expenses (Activities) until the  next income activity or the end of the month
+  // if there is no income activity
+  get expensesTilNextIncome() {
+    return this.upcomingExpenses.filter((a) =>
+      isBefore(a.expectedDate, this.nextIncome?.expectedDate || endOfMonth(new Date())),
+    )
+  }
+
+  setNextIncome = (nextIncome: Activity) => {
+    this.nextIncome = nextIncome
+  }
+
+  setUpcomingExpenses = (expenses: Activity[]) => {
+    this.upcomingExpenses = expenses
+  }
+
+  setSelectedCashAccounts = (accounts: Account[]) => (this.selectedCashAccounts = accounts)
+}

package/src/cashflow/stores/__tests__/CashflowStore.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, vi } from 'vitest'
+
+vi.mock('../../api/CashflowApi')
+
+describe('Testing the CashflowStore', () => {
+  it('should initialize api calls', async () => {
+    // todo
+    // const globalStore = new GlobalStore()
+    // const copyStore = new LocalizedContentStore(CopyNamespace.Cashflow)
+    // expect(globalStore.cashflowStore.cashflowProjectedEvents).toEqual([])
+    // await globalStore.cashflowStore.initialize('/', '')
+    // expect(copyStore.initialize.call).toHaveLength(1)
+    // const seqEvents = globalStore.cashflowStore.createSequenceEvent(cashflowEvents, cashflowSequences)
+    // expect(globalStore.cashflowStore.cashflowProjectedEvents).toEqual(seqEvents)
+  })
+})

package/src/cashflow/util/Filters.ts

@@ -0,0 +1,15 @@
+import type { Account, Activity } from '../../common'
+import { isAfter } from 'date-fns/isAfter'
+import { isBefore } from 'date-fns/isBefore'
+import { isToday } from 'date-fns/isToday'
+
+/**
+ * Returns activities that match the given account and date range
+ * @param account The account
+ * @param dateRange The date range
+ */
+export const activityFilter =
+  (account: Account, dateRange: { start: Date; end: Date }) => (a: Activity) =>
+    a.accountGuid === account.guid &&
+    (isToday(a.expectedDate) || isAfter(a.expectedDate, dateRange.start)) &&
+    isBefore(a.expectedDate, dateRange.end)

package/src/categories/components/CategoryList.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import List from '@mui/material/List'
+import Paper from '@mui/material/Paper'
+
+import { buildDynamicCopy, useCategoryStore, useGlobalCopyStore } from '../../common'
+import type { Category } from '../../common/types'
+
+import { useCategoryUiStore } from '../context/hooks'
+import CategoryRow from './CategoryRow'
+
+interface NestedCategory {
+  category: Category
+  children: Category[]
+}
+
+const CategoryList: React.FC = () => {
+  const { categories } = useCategoryStore()
+  const { searchValue } = useCategoryUiStore()
+  const { categories: copy } = useGlobalCopyStore()
+
+  const buildNestedCategories = (categories: Category[], filter = ''): NestedCategory[] => {
+    return categories.reduce((acc, currCategory) => {
+      if (currCategory.parent_guid === null) {
+        const categoriesWithParent = [
+          {
+            ...currCategory,
+            name: buildDynamicCopy(copy.all_parent_category, currCategory.name) as string,
+            parent_guid: currCategory.guid,
+          },
+          ...categories,
+        ]
+        const children = categoriesWithParent.filter(
+          (category) =>
+            category.parent_guid === currCategory.guid &&
+            category.name.toLowerCase().includes(filter.toLowerCase()),
+        )
+
+        if (currCategory.name.toLowerCase().includes(filter.toLowerCase()) || children.length > 0) {
+          return [...acc, { category: { ...currCategory }, children }]
+        }
+      }
+      return acc
+    }, [] as NestedCategory[])
+  }
+
+  const nestedCategories = buildNestedCategories(categories, searchValue)
+
+  return (
+    <Paper className="mx-cat-category-list" sx={{ boxShadow: 'none' }}>
+      <List>
+        {nestedCategories.map((nested: NestedCategory) => (
+          <CategoryRow
+            category={nested.category}
+            key={nested.category.guid}
+            subCategories={nested.children}
+          />
+        ))}
+      </List>
+    </Paper>
+  )
+}
+
+export default observer(CategoryList)

package/src/categories/components/CategoryRow.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Divider from '@mui/material/Divider'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+import { CategoryIcon } from '@kyper/mui'
+
+import { useEvent } from '../../common'
+import type { Category } from '../../common'
+
+import { useCategoryUiStore } from '../context/hooks'
+import { ON_CLICK_EVENTS } from '../constants/OnClickEvents'
+import SubcategoryList from './SubcategoryList'
+
+interface CategoryRowProps {
+  category: Category
+  subCategories: Category[]
+}
+
+const CategoryRow: React.FC<CategoryRowProps> = ({ category, subCategories }) => {
+  const { expandedGuid, searchValue, setExpandedGuid } = useCategoryUiStore()
+  const { onEvent } = useEvent()
+  const isExpanded = category.guid === expandedGuid
+
+  const handleExpanderClick = () => {
+    const guid = category.guid !== expandedGuid ? category.guid : null
+    setExpandedGuid(guid)
+    onEvent(guid ? ON_CLICK_EVENTS.ON_CATEGORY_EXPANDED : ON_CLICK_EVENTS.ON_CATEGORY_COLLAPSED)
+  }
+
+  return (
+    <React.Fragment>
+      <ListItem disableGutters={true} disablePadding={true}>
+        <ListItemButton
+          aria-controls={`subcategories-${category.guid}`}
+          aria-expanded={category.guid === expandedGuid}
+          aria-label={category.name}
+          id={`category-${category.guid}`}
+          key={category.guid}
+          onClick={handleExpanderClick}
+        >
+          <ListItemAvatar>
+            <CategoryIcon categoryGuid={category.guid} />
+          </ListItemAvatar>
+          <ListItemText
+            primary={category.name}
+            primaryTypographyProps={{ fontWeight: 'normal', variant: 'Body' }}
+          />
+          <ListItemIcon>
+            {isExpanded || searchValue ? <ExpandMoreIcon /> : <ChevronRightIcon />}
+          </ListItemIcon>
+        </ListItemButton>
+      </ListItem>
+      <Divider sx={{ ml: 58 }} />
+      <SubcategoryList categories={subCategories} parentCategory={category} />
+    </React.Fragment>
+  )
+}
+
+export default observer(CategoryRow)