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

package/src/cashflow/components/CashflowHeading.tsx

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

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

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

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

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

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

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