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

package/src/cashflow/components/SummaryTab.tsx

@@ -1,247 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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)