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

package/src/cashflow/components/CashflowHeading.tsx

@@ -1,172 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-import { isAfter } from 'date-fns/isAfter'
-import { isBefore } from 'date-fns/isBefore'
-import { isToday } from 'date-fns/isToday'
-
-import Button from '@mui/material/Button'
-import Divider from '@mui/material/Divider'
-import Stack from '@mui/material/Stack'
-
-import { Icon, Text } from '@kyper/mui'
-
-import {
-  Activity,
-  Drawer,
-  InformationTooltip,
-  useGlobalCopyStore,
-  useGlobalUiStore,
-  useRecurringActivityStore,
-  useUserStore,
-  useWidgetContainerProvider,
-} from '../../common'
-
-import { ManageIncome } from '../../recurringactivity'
-
-import CashflowAmountHeading from './CashflowAmountHeading'
-import { useCashflowUiStore } from '../context/hooks'
-
-// This filter only includes activities that have an account guid that matches an account guid
-// in the given list of accountGuids and is within the given date range
-const activityAccountFilter =
-  (accountGuids: string[], dateRange: { start: Date; end: Date }) => (a: Activity) =>
-    a.accountGuid &&
-    accountGuids.includes(a.accountGuid) &&
-    (isToday(a.expectedDate) || isAfter(a.expectedDate, dateRange.start)) &&
-    isBefore(a.expectedDate, dateRange.end)
-
-const CashflowHeading: React.FC = () => {
-  const [isOpen, setIsOpen] = React.useState(false)
-
-  const { availableWidth } = useWidgetContainerProvider()
-  const { cashflow: customCopy } = useGlobalCopyStore()
-
-  const { upcomingExpenses, upcomingIncome } = useRecurringActivityStore()
-  const { selectedAccountGuids } = useGlobalUiStore()
-  const { dateRange, selectedCashAccounts } = useCashflowUiStore()
-  const { userProfile } = useUserStore()
-
-  const filteredExpenses = React.useMemo(
-    () => upcomingExpenses.filter(activityAccountFilter(selectedAccountGuids, dateRange)),
-    [dateRange, selectedAccountGuids, upcomingExpenses],
-  )
-
-  const filteredIncome = React.useMemo(
-    () => upcomingIncome.filter(activityAccountFilter(selectedAccountGuids, dateRange)),
-    [dateRange, selectedAccountGuids, upcomingIncome],
-  )
-
-  const cashBalance = React.useMemo(
-    () => selectedCashAccounts.reduce((total, account) => total + (account?.balance || 0), 0),
-    [selectedCashAccounts],
-  )
-
-  const totalUpcomingExpenses = filteredExpenses.reduce((acc, curr) => acc + curr.amount, 0)
-  const totalUpcomingIncome = filteredIncome.reduce((acc, curr) => acc + curr.amount, 0)
-  const availableToSpend = cashBalance - totalUpcomingExpenses + totalUpcomingIncome
-
-  const hasCompletedCashflowOnboarding =
-    upcomingIncome.length > 0 && userProfile?.has_completed_cash_flow_onboarding
-  const isSmallContainer = availableWidth < 725
-
-  return (
-    <Stack flexDirection="row" gap={24} justifyContent="center" my={isSmallContainer ? 24 : 42}>
-      {isSmallContainer ? (
-        <Stack border="1px solid" borderColor="border.light" borderRadius={1} mx={16} width="100%">
-          <CashflowAmountHeading
-            amount={cashBalance}
-            isMobile={true}
-            label={customCopy.cash_and_bank}
-          />
-
-          <Divider />
-
-          {hasCompletedCashflowOnboarding ? (
-            <CashflowAmountHeading
-              amount={totalUpcomingIncome}
-              isMobile={true}
-              label={customCopy.to_be_received}
-              symbol="+"
-            />
-          ) : (
-            <Button
-              onClick={() => setIsOpen(true)}
-              startIcon={<Icon name="add" />}
-              sx={{ fontSize: 13 }}
-            >
-              {customCopy.add_income}
-            </Button>
-          )}
-
-          <Divider />
-
-          <CashflowAmountHeading
-            amount={totalUpcomingExpenses}
-            isMobile={true}
-            label={customCopy.to_be_paid_out}
-            symbol="-"
-          />
-
-          <Divider />
-          <CashflowAmountHeading
-            amount={availableToSpend}
-            isMobile={true}
-            isTotal={true}
-            label={customCopy.remaining_cash}
-            tooltip={
-              <InformationTooltip
-                body={customCopy.remaining_income_tooltip_body}
-                title={customCopy.remaining_income_tooltip_title}
-              />
-            }
-          />
-        </Stack>
-      ) : (
-        <>
-          <CashflowAmountHeading amount={cashBalance} label={customCopy.cash_and_bank} />
-          {hasCompletedCashflowOnboarding ? (
-            <>
-              <Text sx={{ fontSize: 25, lineHeight: 1 }}>+</Text>
-              <CashflowAmountHeading
-                amount={totalUpcomingIncome}
-                label={customCopy.to_be_received}
-              />
-            </>
-          ) : (
-            <Button
-              onClick={() => setIsOpen(true)}
-              startIcon={<Icon name="add" />}
-              sx={{ fontSize: 13 }}
-            >
-              {customCopy.add_income}
-            </Button>
-          )}
-          <Text sx={{ fontSize: 25, lineHeight: 1 }}>-</Text>
-          <CashflowAmountHeading amount={totalUpcomingExpenses} label={customCopy.to_be_paid_out} />
-          <Text sx={{ fontSize: 25, lineHeight: 1 }}>=</Text>
-          <CashflowAmountHeading
-            amount={availableToSpend}
-            label={customCopy.remaining_cash}
-            tooltip={
-              <InformationTooltip
-                body={customCopy.remaining_income_tooltip_body}
-                title={customCopy.remaining_income_tooltip_title}
-              />
-            }
-          />
-        </>
-      )}
-      <Drawer
-        ariaLabelClose={customCopy.close_manage_income_aria}
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        shouldShowHeaderBorders={false}
-        title={customCopy.manage_income}
-      >
-        <ManageIncome />
-      </Drawer>
-    </Stack>
-  )
-}
-
-export default observer(CashflowHeading)

package/src/cashflow/components/CashflowWidgetContent.tsx

@@ -1,225 +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 Divider from '@mui/material/Divider'
-import Stack from '@mui/material/Stack'
-import useTheme from '@mui/material/styles/useTheme'
-
-import { Icon, P, Text } from '@kyper/mui'
-
-import {
-  buildDynamicCopy,
-  InformationTooltip,
-  useAccountStore,
-  useGlobalCopyStore,
-  useGlobalUiStore,
-  useRecurringActivityStore,
-  useUserStore,
-  useWidgetContainerProvider,
-} from '../../common'
-
-import { useCashflowUiStore } from '../context/hooks'
-import { CurrencyText } from '../../common/components/CurrencyText'
-import RemainingCash from './RemainingCash'
-
-interface CashflowWidgetContentProps {
-  onAddIncomeClick?: () => void
-}
-
-const CashflowWidgetContent: React.FC<CashflowWidgetContentProps> = ({ onAddIncomeClick }) => {
-  const theme = useTheme()
-  const { availableWidth } = useWidgetContainerProvider()
-
-  const { cashAccounts, cashBalance } = useAccountStore()
-  const { selectedAccountGuids } = useGlobalUiStore()
-  const { cashflow: customCopy } = useGlobalCopyStore()
-  const { userProfile } = useUserStore()
-  const {
-    daysUntilNextIncome,
-    expensesTilNextIncome,
-    selectedCashAccounts,
-    setNextIncome,
-    setSelectedCashAccounts,
-    setUpcomingExpenses,
-  } = useCashflowUiStore()
-  const { nextIncomeActivity, upcomingExpenses } = useRecurringActivityStore()
-
-  React.useEffect(() => {
-    setSelectedCashAccounts(
-      cashAccounts.filter((account) => selectedAccountGuids.includes(account.guid)),
-    )
-  }, [cashAccounts, selectedAccountGuids])
-
-  React.useEffect(() => {
-    if (nextIncomeActivity) {
-      setNextIncome(nextIncomeActivity)
-    }
-    setUpcomingExpenses(upcomingExpenses)
-  }, [nextIncomeActivity, upcomingExpenses])
-
-  const filteredCashBalance = React.useMemo(
-    () =>
-      cashAccounts
-        .filter((account) => selectedAccountGuids.includes(account.guid))
-        .reduce((total, account) => total + (account?.balance || 0), 0),
-    [selectedAccountGuids, upcomingExpenses],
-  )
-
-  const filteredExpenseTotal = React.useMemo(
-    () =>
-      expensesTilNextIncome
-        .filter((expense) => selectedAccountGuids.includes(expense.accountGuid || ''))
-        .reduce((acc, curr) => acc + curr.amount, 0),
-    [selectedAccountGuids, expensesTilNextIncome],
-  )
-
-  const availableToSpend = React.useMemo(
-    () => filteredCashBalance - filteredExpenseTotal,
-    [filteredCashBalance, filteredExpenseTotal],
-  )
-
-  const hasCompletedCashflowOnboarding =
-    userProfile?.has_completed_cash_flow_onboarding && !!onAddIncomeClick
-
-  return (
-    <Box className="mx-cashflow" pl={16} pr={16} pt={16}>
-      {availableWidth > 610 ? (
-        <Stack
-          border={`1px solid ${theme.palette.border.light}`}
-          borderRadius={1}
-          direction="row"
-          justifyContent="space-between"
-          px={24}
-        >
-          <Stack pb={14} pt={12}>
-            <CurrencyText amount={filteredCashBalance} variant="H2" />
-            <P variant="XSmall" whiteSpace="nowrap">
-              {
-                buildDynamicCopy(
-                  customCopy.total_cash_accounts,
-                  selectedCashAccounts.length,
-                ) as string
-              }
-            </P>
-          </Stack>
-
-          <Stack pt={18}>
-            <Icon name="remove" />
-          </Stack>
-
-          <Stack pb={14} pt={12}>
-            <CurrencyText amount={filteredExpenseTotal} variant="H2" />
-            <P variant="XSmall" whiteSpace="nowrap">
-              {buildDynamicCopy(customCopy.expenses_due, expensesTilNextIncome.length) as string}
-            </P>
-          </Stack>
-
-          <Stack pt={18}>
-            <Icon name="equals" />
-          </Stack>
-
-          <Stack pb={14} pr={24} pt={12}>
-            <CurrencyText amount={availableToSpend} variant="H2" />
-            <Stack alignItems="center" direction="row" gap={8}>
-              <P variant="XSmall" whiteSpace="nowrap">
-                {customCopy.available_to_spend}
-              </P>
-              <InformationTooltip body={customCopy.tooltip_body} title={customCopy.tooltip_title} />
-            </Stack>
-          </Stack>
-
-          <Stack borderLeft={`1px solid ${theme.palette.border.light}`} pb={12} pl={24} pt={12}>
-            {!hasCompletedCashflowOnboarding ? (
-              <Button
-                onClick={onAddIncomeClick}
-                startIcon={<Icon name="add" />}
-                sx={{ fontSize: 13, lineHeight: 'initial' }}
-              >
-                {customCopy.add_income}
-              </Button>
-            ) : (
-              <>
-                <Text variant="H2">
-                  {buildDynamicCopy(customCopy.days, daysUntilNextIncome) as string}
-                </Text>
-                <P variant="XSmall" whiteSpace="nowrap">
-                  {customCopy.next_paycheck}
-                </P>
-              </>
-            )}
-          </Stack>
-        </Stack>
-      ) : (
-        <Stack border={`1px solid ${theme.palette.border.light}`} borderRadius={1}>
-          <Stack direction="row" justifyContent="space-between" p={16}>
-            <Text variant="Small">
-              {
-                buildDynamicCopy(
-                  customCopy.total_cash_accounts,
-                  selectedCashAccounts.length,
-                ) as string
-              }
-            </Text>
-            <CurrencyText amount={cashBalance} bold={true} variant="XSmall" />
-          </Stack>
-
-          <Divider />
-
-          <Stack direction="row" justifyContent="space-between" p={16}>
-            <Text variant="Small">
-              {buildDynamicCopy(customCopy.expenses_due, expensesTilNextIncome.length) as string}
-            </Text>
-            <CurrencyText amount={filteredExpenseTotal} bold={true} symbol="-" variant="XSmall" />
-          </Stack>
-
-          <Divider />
-
-          <Stack
-            alignItems="center"
-            bgcolor="background.default"
-            direction="row"
-            gap={8}
-            height={48}
-            justifyContent="space-between"
-            px={16}
-            sx={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}
-          >
-            <RemainingCash remaining={availableToSpend} />
-          </Stack>
-          <Divider />
-
-          {!hasCompletedCashflowOnboarding ? (
-            <Stack
-              alignItems="center"
-              direction="row"
-              justifyContent="space-between"
-              pl={16}
-              pr={2}
-              py={2}
-            >
-              <Text variant="Small">{customCopy.next_paycheck}</Text>
-              <Button
-                onClick={onAddIncomeClick}
-                startIcon={<Icon name="add" />}
-                sx={{ fontSize: 13 }}
-              >
-                {customCopy.add_income}
-              </Button>
-            </Stack>
-          ) : (
-            <Stack direction="row" justifyContent="space-between" p={16}>
-              <Text variant="Small">{customCopy.next_paycheck}</Text>
-              <Text bold={true} variant="XSmall">
-                {buildDynamicCopy(customCopy.days, daysUntilNextIncome) as string}
-              </Text>
-            </Stack>
-          )}
-        </Stack>
-      )}
-    </Box>
-  )
-}
-
-export default observer(CashflowWidgetContent)

package/src/cashflow/components/DetailsExpenseHeader.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Divider from '@mui/material/Divider'
-import ListSubheader from '@mui/material/ListSubheader'
-
-import { Text } from '@kyper/mui'
-
-import { formatCurrency, useGlobalCopyStore } from '../../common'
-
-import { ExpenseType } from './DetailsExpenseRow'
-
-interface DetailsExpenseHeaderProps {
-  total: number
-  type: ExpenseType
-}
-
-const DetailsExpenseHeader: React.FC<DetailsExpenseHeaderProps> = ({ total, type }) => {
-  const { cashflow: customCopy } = useGlobalCopyStore()
-
-  return (
-    <>
-      <ListSubheader
-        sx={{
-          alignItems: 'center',
-          backgroundColor: 'background.highlight',
-          display: 'flex',
-          justifyContent: 'space-between',
-          pb: 4,
-          pt: 12,
-          px: 24,
-        }}
-      >
-        <Text bold={true} sx={{ fontSize: 12 }}>
-          {type === ExpenseType.EXPENSE ? customCopy.expenses : customCopy.income}
-        </Text>
-        <Text bold={true} sx={{ fontSize: 13 }}>
-          {type === ExpenseType.EXPENSE ? '-' : '+'}
-          {formatCurrency(total, '0,0.00')}
-        </Text>
-      </ListSubheader>
-      <Divider />
-    </>
-  )
-}
-
-export default observer(DetailsExpenseHeader)

package/src/cashflow/components/DetailsExpenseRow.tsx

@@ -1,46 +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 Stack from '@mui/material/Stack'
-
-import { Text } from '@kyper/mui'
-
-import { type Activity, DATE_FORMATS_INTL, formatDate } from '../../common'
-import { CurrencyText } from '../../common/components/CurrencyText'
-
-export enum ExpenseType {
-  EXPENSE = 'expense',
-  INCOME = 'income',
-}
-
-interface DetailsExpenseRowType {
-  activity: Activity
-}
-
-const DetailsExpenseRow: React.FC<DetailsExpenseRowType> = ({ activity }) => {
-  return (
-    <>
-      <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 16, px: 24, py: 12 }}>
-        <Stack alignItems="center" height={32} width={32}>
-          <Text bold={true} sx={{ fontSize: 11 }}>
-            {formatDate(activity.expectedDate, DATE_FORMATS_INTL.MONTH)}
-          </Text>
-          <Text bold={true} sx={{ fontSize: 11 }}>
-            {formatDate(activity.expectedDate, DATE_FORMATS_INTL.DAY)}
-          </Text>
-        </Stack>
-        <Text sx={{ flexGrow: 1, fontSize: 13 }}>{activity.name}</Text>
-        <CurrencyText
-          amount={activity.amount}
-          bold={true}
-          sx={{ textAlign: 'right', fontSize: 13 }}
-        />
-      </ListItem>
-      <Divider />
-    </>
-  )
-}
-
-export default observer(DetailsExpenseRow)

package/src/cashflow/components/DetailsFooter.tsx

@@ -1,28 +0,0 @@
-import ListItem from '@mui/material/ListItem'
-
-import RemainingCash from './RemainingCash'
-
-interface DetailsFooterProps {
-  remaining: number
-}
-
-const DetailsFooter: React.FC<DetailsFooterProps> = ({ remaining }) => {
-  return (
-    <ListItem
-      sx={{
-        alignItems: 'center',
-        backgroundColor: 'background.highlight',
-        display: 'flex',
-        gap: 12,
-        padding: '12px 24px',
-        borderBottomLeftRadius: '3px',
-        borderBottomRightRadius: '3px',
-        minHeight: 'auto',
-      }}
-    >
-      <RemainingCash remaining={remaining} />
-    </ListItem>
-  )
-}
-
-export default DetailsFooter

package/src/cashflow/components/DetailsTab.tsx

@@ -1,128 +0,0 @@
-import { observer } from 'mobx-react-lite'
-import { getUnixTime } from 'date-fns/getUnixTime'
-
-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 { Text } from '@kyper/mui'
-
-import AccountListItem from '../../accounts/components/AccountListItem'
-import DetailsFooter from './DetailsFooter'
-import DetailsExpenseRow, { ExpenseType } from './DetailsExpenseRow'
-import DetailsExpenseHeader from './DetailsExpenseHeader'
-
-import {
-  Account,
-  Activity,
-  DATE_FORMATS_INTL,
-  formatDate,
-  useGlobalCopyStore,
-  useRecurringActivityStore,
-  useWidgetContainerProvider,
-} from '../../common'
-import { useCashflowUiStore } from '../context/hooks'
-import { activityFilter } from '../util/Filters'
-
-const DetailsTab = () => {
-  const { availableWidth } = useWidgetContainerProvider()
-  const { cashflow: customCopy } = useGlobalCopyStore()
-  const { upcomingExpenses, upcomingIncome } = useRecurringActivityStore()
-  const { dateRange, selectedCashAccounts } = useCashflowUiStore()
-
-  return (
-    <Stack>
-      <Stack direction={availableWidth < 400 ? 'column' : 'row'} justifyContent="space-between">
-        <Text bold={true} sx={{ fontSize: 15, mb: 12, whiteSpace: 'normal' }}>
-          {customCopy.accounts_breakdown}
-        </Text>
-        <Text bold={true} sx={{ fontSize: 15, mb: 12, whiteSpace: 'normal' }}>
-          {formatDate(dateRange.start, DATE_FORMATS_INTL.FULL_MONTH_DAY)} -{' '}
-          {formatDate(dateRange.end, DATE_FORMATS_INTL.FULL_MONTH_DAY)}
-        </Text>
-      </Stack>
-
-      <Stack>
-        {selectedCashAccounts.map((account: Account) => {
-          const upcomingIncomeByAccount = upcomingIncome
-            .filter(activityFilter(account, dateRange))
-            .sort((a, b) => getUnixTime(a.expectedDate) - getUnixTime(b.expectedDate))
-
-          const projectedExpensesByAccount = upcomingExpenses.filter(
-            activityFilter(account, dateRange),
-          )
-
-          const incomeTotal = upcomingIncomeByAccount.reduce(
-            (acc: number, curr: Activity) => acc + curr.amount,
-            0,
-          )
-          const expenseTotal = projectedExpensesByAccount.reduce(
-            (acc, curr) => acc + curr.amount,
-            0,
-          )
-
-          return (
-            <List
-              key={account.guid}
-              sx={{
-                border: '1px solid',
-                borderColor: 'border.light',
-                mb: 24,
-                borderRadius: 1,
-              }}
-            >
-              <AccountListItem
-                account={account}
-                listItemProps={{
-                  disableGutters: false,
-                  disablePadding: false,
-                  sx: { borderTopRadius: 1, pr: 24 },
-                }}
-              />
-              <Divider />
-              {/* Income */}
-              {upcomingIncomeByAccount.length > 0 && (
-                <ListItem>
-                  <List
-                    subheader={
-                      <DetailsExpenseHeader total={incomeTotal} type={ExpenseType.INCOME} />
-                    }
-                    sx={{ width: '100%' }}
-                  >
-                    {upcomingIncomeByAccount.map((a) => (
-                      <DetailsExpenseRow activity={a} key={a.sequenceGuid} />
-                    ))}
-                  </List>
-                </ListItem>
-              )}
-              {/* Expenses */}
-              {projectedExpensesByAccount.length > 0 && (
-                <ListItem>
-                  <List
-                    subheader={
-                      <DetailsExpenseHeader total={expenseTotal} type={ExpenseType.EXPENSE} />
-                    }
-                    sx={{ width: '100%' }}
-                  >
-                    {projectedExpensesByAccount.map((a) => (
-                      <DetailsExpenseRow activity={a} key={a.scheduledPaymentGuid} />
-                    ))}
-                  </List>
-                </ListItem>
-              )}
-              {/* Bottom row total */}
-              <DetailsFooter
-                remaining={
-                  (account.available_balance || account.balance || 0) + incomeTotal - expenseTotal
-                }
-              />
-            </List>
-          )
-        })}
-      </Stack>
-    </Stack>
-  )
-}
-
-export default observer(DetailsTab)

package/src/cashflow/components/RemainingCash.tsx

@@ -1,44 +0,0 @@
-import { observer } from 'mobx-react-lite'
-
-import Box from '@mui/material/Box'
-
-import { Text } from '@kyper/mui'
-import { useGlobalCopyStore } from '../../common'
-import { CurrencyText } from '../../common/components/CurrencyText'
-
-interface RemainingCashProps {
-  remaining: number
-}
-
-const RemainingCash: React.FC<RemainingCashProps> = ({ remaining }) => {
-  const { cashflow: customCopy } = useGlobalCopyStore()
-
-  const getRemainingCashColor = () => {
-    if (remaining < 0) {
-      return 'error.main'
-    }
-    if (remaining > 0) {
-      return 'success.main'
-    }
-    return 'warning.main'
-  }
-
-  return (
-    <>
-      <Box
-        sx={{
-          borderRadius: '1px',
-          backgroundColor: getRemainingCashColor(),
-          height: 6,
-          width: 6,
-        }}
-      />
-      <Text bold={true} sx={{ flexGrow: 1, fontSize: 12 }}>
-        {customCopy.remaining_cash}
-      </Text>
-      <CurrencyText amount={remaining} bold={true} sx={{ fontSize: 12 }} />
-    </>
-  )
-}
-
-export default observer(RemainingCash)