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

package/src/debts/components/SnowballCard.tsx

@@ -0,0 +1,70 @@
+import React, { MouseEventHandler } from 'react'
+import { observer } from 'mobx-react-lite'
+import { Card, Stack, useTheme } from '@mui/material'
+import { Text } from '@kyper/mui'
+
+import { useDebtStore, useScreenSize } from '../../common'
+import { getPayoffProjection } from '../utils/SnowballCard'
+
+const copy = {
+  date_description: 'Debt-free by',
+  amount_description: 'total savings by snowballing minimum payments',
+  duration_description: 'debt-free acceleration',
+  drawer_cta: 'What is Snowballing?',
+}
+
+const SnowballCard = ({ onClickCta, sx }: { onClickCta: MouseEventHandler; sx?: any }) => {
+  const theme = useTheme()
+  const { isMobile } = useScreenSize()
+  const { debts } = useDebtStore()
+
+  const { payoffDate, payoffSavings, payoffDuration } = React.useMemo(() => {
+    return getPayoffProjection(debts)
+  }, [debts])
+
+  return (
+    <Card sx={{ width: isMobile ? '100%' : '186px', minWidth: '186px', ...sx }}>
+      <Stack sx={{ gap: '12px', p: '16px' }}>
+        <Stack
+          flexDirection={isMobile ? 'row' : 'column'}
+          gap={isMobile ? '4px' : '0'}
+          sx={{
+            borderBottom: '1px solid',
+            borderBottomColor: theme.palette.grey[300],
+            pb: '8px',
+          }}
+        >
+          <Text variant="XSmall">{copy.date_description}</Text>
+          <Text bold={true} color={theme.palette.primary.main} variant="Small">
+            {payoffDate}
+          </Text>
+        </Stack>
+        <Stack flexDirection={isMobile ? 'row' : 'column'} gap={isMobile ? '4px' : '0'}>
+          <Text bold={true} variant="Small">
+            {payoffSavings}
+          </Text>
+          <Text sx={{ whiteSpace: 'normal' }} variant="XSmall">
+            {copy.amount_description}
+          </Text>
+        </Stack>
+        <Stack flexDirection={isMobile ? 'row' : 'column'} gap={isMobile ? '4px' : '0'}>
+          <Text bold={true} variant="Small">
+            {payoffDuration}
+          </Text>
+          <Text variant="XSmall">{copy.duration_description}</Text>
+        </Stack>
+        <Text
+          bold={true}
+          color={theme.palette.primary.main}
+          onClick={onClickCta}
+          sx={{ cursor: 'pointer' }}
+          variant="Small"
+        >
+          {copy.drawer_cta}
+        </Text>
+      </Stack>
+    </Card>
+  )
+}
+
+export default observer(SnowballCard)

package/src/debts/components/SnowballDrawer.tsx

@@ -0,0 +1,384 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { Box, Card, Stack, useTheme } from '@mui/material'
+import { Text } from '@kyper/mui'
+
+import { buildDynamicCopy, Drawer } from '../../common'
+
+const copy = {
+  title: 'Snowball Method',
+  subtitle: 'Benefits of the snowball method',
+  payoff_savings: '$361.71',
+  amount_description: 'Interest Saved',
+  duration_description: 'in in 3 yrs, 0 mo',
+  card_question: 'What is the snowballing method?',
+  card_answer:
+    'The snowball method helps you pay off multiple debts quickly by paying the same combined amount every month. When you’ve paid off the highest-priority debt, take that monthly payment and put it toward your next debt. The monthly total you pay for all the debts remains the same.',
+  card_more: 'Read More',
+  card_less: 'See Less',
+  disclaimer:
+    'This information is for demonstration purposes and does not reflect your actual data.',
+  month_header: 'Month _1{month_number}',
+  payment_header: 'Payment',
+  paid_label: 'Paid Off',
+  total_label: 'Total payment',
+  debt_label: 'Debt _1{label}',
+  rollover_explainer_pt1: 'Put this _1{amount} towards ',
+  rollover_explainer_pt2: ' next month.',
+}
+
+interface SnowballDrawerProps {
+  isOpen: boolean
+  onClose: () => void
+  sx?: any
+}
+
+const SnowballDrawer = ({ isOpen, onClose, sx }: SnowballDrawerProps) => {
+  const theme = useTheme()
+  const [readMore, setReadMore] = React.useState(false)
+
+  return (
+    <Drawer ariaLabelClose={''} isOpen={isOpen} onClose={onClose} sx={{ ...sx }} title={copy.title}>
+      <Stack bgcolor={theme.palette.grey[100]} height="100%">
+        {/* Drawer Header */}
+        <Stack alignItems={'center'} px={24} py={24}>
+          <Stack alignItems={'center'} pb={24}>
+            <Text mb={12} variant="H3">
+              {copy.subtitle}
+            </Text>
+            <Text color={theme.palette.grey[700]} variant="Small">
+              {copy.amount_description}
+            </Text>
+            <Text variant="H1">{copy.payoff_savings}</Text>
+            <Text color={theme.palette.grey[700]} variant="Small">
+              {copy.duration_description}
+            </Text>
+          </Stack>
+          {/* Drawer Info Card */}
+          <Card sx={{ display: 'grid', py: 16, px: 24 }}>
+            <Text mb={4} variant="H3">
+              {copy.card_question}
+            </Text>
+            <Text
+              color={theme.palette.grey[700]}
+              mb={8}
+              sx={{ whiteSpace: readMore ? 'normal' : 'nowrap' }}
+              variant="ParagraphSmall"
+            >
+              {copy.card_answer}
+            </Text>
+            <Text
+              bold={true}
+              color={theme.palette.primary.main}
+              onClick={() => setReadMore(!readMore)}
+              sx={{ cursor: 'pointer' }}
+              variant="Small"
+            >
+              {!readMore ? copy.card_more : copy.card_less}
+            </Text>
+          </Card>
+        </Stack>
+        {/* Drawer Payoff Table */}
+        <Stack>
+          {/* Drawer Disclaimer */}
+          <Text
+            color={theme.palette.grey[700]}
+            px={24}
+            sx={{ textAlign: 'center', whiteSpace: 'normal' }}
+            variant="Small"
+          >
+            {copy.disclaimer}
+          </Text>
+
+          <Stack flexDirection="row" justifyContent="space-between" sx={{ pt: 12, px: 24, pb: 8 }}>
+            <Text bold={true} variant="XSmall">
+              {buildDynamicCopy(copy.month_header, 1) as string}
+            </Text>
+            <Text bold={true} variant="XSmall">
+              {copy.payment_header}
+            </Text>
+          </Stack>
+          <Stack bgcolor={theme.palette.background.paper} mb={24}>
+            <Stack alignItems="center" flexDirection="row" pl={24}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 20,
+                  height: 20,
+                  borderRadius: '50%',
+                  backgroundColor: theme.palette.success.main,
+                  marginRight: 12,
+                }}
+              >
+                <Text color="white" fontWeight={700} variant="Small">
+                  ✓
+                </Text>
+              </Box>
+              <Stack
+                sx={{
+                  borderBottom: `1px solid ${theme.palette.grey[300]}`,
+                  flexDirection: 'row',
+                  flexGrow: 1,
+                  py: 14,
+                  pr: 24,
+                }}
+              >
+                <Stack flexGrow={1}>
+                  <Text variant="Body">{buildDynamicCopy(copy.debt_label, 'A') as string}</Text>
+                  <Text color={theme.palette.grey[700]} variant="XSmall">
+                    {buildDynamicCopy(copy.rollover_explainer_pt1, '$100') as string}
+                    <strong>{buildDynamicCopy(copy.debt_label, 'B') as string}</strong>
+                    {copy.rollover_explainer_pt2}
+                  </Text>
+                </Stack>
+                <Stack>
+                  <Text variant="Body">$100.00</Text>
+                  <Text
+                    bold={true}
+                    color={theme.palette.success.main}
+                    textAlign="end"
+                    variant="Tiny"
+                  >
+                    {copy.paid_label}
+                  </Text>
+                </Stack>
+              </Stack>
+            </Stack>
+            <Stack alignItems="center" flexDirection="row" pl={24}>
+              <Box
+                sx={{
+                  width: 20,
+                  height: 20,
+                  marginRight: 12,
+                  borderRadius: '50%',
+                  border: `3px solid ${theme.palette.grey[700]}`,
+                }}
+              />
+              <Stack
+                sx={{
+                  borderBottom: `1px solid ${theme.palette.grey[300]}`,
+                  flexDirection: 'row',
+                  flexGrow: 1,
+                  py: 14,
+                  pr: 24,
+                }}
+              >
+                <Text flexGrow={1} variant="Body">
+                  {buildDynamicCopy(copy.debt_label, 'B') as string}
+                </Text>
+                <Text variant="Body">$400.00</Text>
+              </Stack>
+            </Stack>
+            <Stack alignItems="center" flexDirection="row" pl={24} py={14}>
+              <Box
+                sx={{
+                  width: 20,
+                  height: 20,
+                  marginRight: 12,
+                  borderRadius: '50%',
+                  border: `3px solid ${theme.palette.grey[700]}`,
+                }}
+              />
+              <Stack flexDirection="row" flexGrow={1} pr={24}>
+                <Text flexGrow={1} variant="Body">
+                  {buildDynamicCopy(copy.debt_label, 'C') as string}
+                </Text>
+                <Text variant="Body">$1,000.00</Text>
+              </Stack>
+            </Stack>
+            <Stack
+              sx={{
+                py: 8,
+                px: 24,
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                borderTop: `1px solid ${theme.palette.grey[300]}`,
+                borderBottom: `1px solid ${theme.palette.grey[300]}`,
+              }}
+            >
+              <Text bold={true} variant="Body">
+                {copy.total_label}
+              </Text>
+              <Text bold={true} variant="Body">
+                $1,500.00
+              </Text>
+            </Stack>
+          </Stack>
+
+          <Stack flexDirection="row" justifyContent="space-between" sx={{ pt: 12, px: 24, pb: 8 }}>
+            <Text bold={true} variant="XSmall">
+              {buildDynamicCopy(copy.month_header, 2) as string}
+            </Text>
+            <Text bold={true} variant="XSmall">
+              {copy.payment_header}
+            </Text>
+          </Stack>
+          <Stack bgcolor={theme.palette.background.paper} mb={24}>
+            <Stack alignItems="center" flexDirection="row" pl={24}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 20,
+                  height: 20,
+                  borderRadius: '50%',
+                  backgroundColor: theme.palette.success.main,
+                  marginRight: 12,
+                }}
+              >
+                <Text color="white" fontWeight={700} variant="Small">
+                  ✓
+                </Text>
+              </Box>
+              <Stack
+                sx={{
+                  borderBottom: `1px solid ${theme.palette.grey[300]}`,
+                  flexDirection: 'row',
+                  flexGrow: 1,
+                  py: 14,
+                  pr: 24,
+                }}
+              >
+                <Stack flexGrow={1}>
+                  <Text variant="Body">{buildDynamicCopy(copy.debt_label, 'B') as string}</Text>
+                  <Text color={theme.palette.grey[700]} variant="XSmall">
+                    {buildDynamicCopy(copy.rollover_explainer_pt1, '$500') as string}
+                    <strong>{buildDynamicCopy(copy.debt_label, 'C') as string}</strong>
+                    {copy.rollover_explainer_pt2}
+                  </Text>
+                </Stack>
+                <Stack>
+                  <Text variant="Body">$500.00</Text>
+                  <Text
+                    bold={true}
+                    color={theme.palette.success.main}
+                    textAlign="end"
+                    variant="Tiny"
+                  >
+                    {copy.paid_label}
+                  </Text>
+                </Stack>
+              </Stack>
+            </Stack>
+            <Stack alignItems="center" flexDirection="row" pl={24}>
+              <Box
+                sx={{
+                  width: 20,
+                  height: 20,
+                  marginRight: 12,
+                  borderRadius: '50%',
+                  border: `3px solid ${theme.palette.grey[700]}`,
+                }}
+              />
+              <Stack
+                sx={{
+                  flexDirection: 'row',
+                  flexGrow: 1,
+                  py: 14,
+                  pr: 24,
+                }}
+              >
+                <Text flexGrow={1} variant="Body">
+                  {buildDynamicCopy(copy.debt_label, 'C') as string}
+                </Text>
+                <Text variant="Body">$1,000.00</Text>
+              </Stack>
+            </Stack>
+            <Stack
+              sx={{
+                py: 8,
+                px: 24,
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                borderTop: `1px solid ${theme.palette.grey[300]}`,
+                borderBottom: `1px solid ${theme.palette.grey[300]}`,
+              }}
+            >
+              <Text bold={true} variant="Body">
+                {copy.total_label}
+              </Text>
+              <Text bold={true} variant="Body">
+                $1,500.00
+              </Text>
+            </Stack>
+          </Stack>
+
+          <Stack flexDirection="row" justifyContent="space-between" sx={{ pt: 12, px: 24, pb: 8 }}>
+            <Text bold={true} variant="XSmall">
+              {buildDynamicCopy(copy.month_header, 3) as string}
+            </Text>
+            <Text bold={true} variant="XSmall">
+              {copy.payment_header}
+            </Text>
+          </Stack>
+          <Stack bgcolor={theme.palette.background.paper} mb={24}>
+            <Stack alignItems="center" flexDirection="row" pl={24}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 20,
+                  height: 20,
+                  borderRadius: '50%',
+                  backgroundColor: theme.palette.success.main,
+                  marginRight: 12,
+                }}
+              >
+                <Text color="white" fontWeight={700} variant="Small">
+                  ✓
+                </Text>
+              </Box>
+              <Stack
+                sx={{
+                  alignItems: 'center',
+                  flexDirection: 'row',
+                  flexGrow: 1,
+                  py: 14,
+                  pr: 24,
+                }}
+              >
+                <Stack flexGrow={1}>
+                  <Text variant="Body">{buildDynamicCopy(copy.debt_label, 'C') as string}</Text>
+                </Stack>
+                <Stack>
+                  <Text variant="Body">$1,500.00</Text>
+                  <Text
+                    bold={true}
+                    color={theme.palette.success.main}
+                    textAlign="end"
+                    variant="Tiny"
+                  >
+                    {copy.paid_label}
+                  </Text>
+                </Stack>
+              </Stack>
+            </Stack>
+            <Stack
+              sx={{
+                py: 8,
+                px: 24,
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                borderTop: `1px solid ${theme.palette.grey[300]}`,
+                borderBottom: `1px solid ${theme.palette.grey[300]}`,
+              }}
+            >
+              <Text bold={true} variant="Body">
+                {copy.total_label}
+              </Text>
+              <Text bold={true} variant="Body">
+                $1,500.00
+              </Text>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Drawer>
+  )
+}
+
+export default observer(SnowballDrawer)

package/src/debts/components/debtstable/AccountCell.tsx

@@ -0,0 +1,25 @@
+import { GridCellParams } from '@mui/x-data-grid-pro'
+import { InstitutionLogo, Text } from '@kyper/mui'
+import Stack from '@mui/material/Stack'
+
+import { AccountTypeName, type Account } from '../../../common'
+
+export const AccountCell = (params: GridCellParams) => {
+  const account = params.row.account as Account
+  const accountType = AccountTypeName[account.account_type]
+
+  return (
+    <Stack alignItems="center" flexDirection="row">
+      <InstitutionLogo
+        alt={`${account.institutionName}`}
+        institutionGuid={account.institution_guid || ''}
+      />
+      <Stack ml={12}>
+        <Text variant="Small">{account.name}</Text>
+        <Text variant="XSmall">{accountType}</Text>
+      </Stack>
+    </Stack>
+  )
+}
+
+export default AccountCell

package/src/debts/components/debtstable/PriorityCell.tsx

@@ -0,0 +1,46 @@
+import { GridCellParams } from '@mui/x-data-grid-pro'
+import Box from '@mui/material/Box'
+import { Text } from '@kyper/mui'
+
+const getColors = (priority: any) => {
+  const colors = {
+    text: '#121417',
+    background: '#FFB252',
+  }
+
+  if (priority === '!') {
+    colors.text = '#FFFFFF'
+    colors.background = '#DF320C'
+  }
+
+  if (priority === '✓') {
+    colors.text = '#FFFFFF'
+    colors.background = '#09A57F'
+  }
+
+  return colors
+}
+
+export const PriorityCell = (params: GridCellParams) => {
+  const priority = String(params.formattedValue)
+  const colors = getColors(priority)
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 20, // Adjust the size as needed
+        height: 20,
+        borderRadius: '50%',
+        backgroundColor: colors.background,
+        marginLeft: '10px',
+      }}
+    >
+      <Text color={colors.text} fontWeight={700} variant="Small">
+        {priority}
+      </Text>
+    </Box>
+  )
+}

package/src/debts/index.ts

@@ -0,0 +1,4 @@
+export { default as DebtsWidget } from './DebtsWidget'
+export { DebtsChart } from './components/DebtsChart'
+export { DebtsTable } from './components/DebtsTable'
+export { DebtsStore } from './store/DebtsStore'

package/src/debts/store/DebtsStore.ts

@@ -0,0 +1,20 @@
+import { makeAutoObservable } from 'mobx'
+
+import { type GlobalStore, type Debt } from '../../common'
+import { loadDebts } from '../utils/DebtStore'
+
+export class DebtsStore {
+  globalStore: GlobalStore
+
+  constructor(globalStore: GlobalStore) {
+    this.globalStore = globalStore
+    makeAutoObservable(this)
+  }
+
+  get debts(): Debt[] {
+    const { accounts } = this.globalStore.accountStore
+    const { debtGoals } = this.globalStore.goalStore
+
+    return loadDebts(accounts, debtGoals)
+  }
+}

package/src/debts/utils/DebtStore.ts

@@ -0,0 +1,75 @@
+import { fromUnixTime, getDate, startOfMonth } from 'date-fns'
+import { AccountType, type Account, type Debt, type Goal } from '../../common'
+
+function loadDebts(accounts: Account[], goals: Goal[]): Debt[] {
+  const goalDebts = goals
+    .map((goal) => {
+      const account = accounts.find((acc) => acc.guid === goal.account_guid)
+      return account ? createDebt(account, goal) : null
+    })
+    .filter((debt) => debt !== null)
+
+  const liabilityDebts = accounts
+    .filter((acc) => !goalDebts.some((debt) => debt?.account.guid === acc.guid))
+    .map((account) => createDebt(account))
+
+  const debts = [...goalDebts, ...liabilityDebts].filter((debt) => {
+    if (!debt?.account) return false
+    // Exclude checking line of credit accounts with positive balance
+    if (debt.account.account_type === AccountType.CHECKING_LINE_OF_CREDIT) {
+      return Number(debt.account.balance) < 0
+    }
+    return true
+  })
+
+  return debts
+}
+
+function createDebt(account: Account, goal?: Goal): Debt {
+  // Get payment day of month; default to 1st
+  const paymentDay = goal?.payment_due_at ? getDate(fromUnixTime(goal.payment_due_at)) : 1
+  const paymentDate = startOfMonth(new Date()).setDate(paymentDay)
+
+  return {
+    account,
+    goal,
+    guid: goal?.guid,
+    name: goal?.name ?? 'Unknown',
+    position: goal?.position,
+    balance: goal?.current_amount ?? 0,
+    interest_rate: goal?.interest_rate ?? 0,
+    monthly_payment: goal?.monthly_payment ?? 0,
+    current_amount: goal?.current_amount ?? 0,
+    payment_due_date: paymentDate,
+    projected_payoff_date: goal?.projected_to_complete_at,
+    is_excluded: account.is_excluded_from_debts,
+    is_paid_off: Boolean(goal?.completed_at),
+    is_impossible: goal ? isImpossible(goal) : undefined,
+  }
+}
+
+function isImpossible(goal: Goal) {
+  const { current_amount, interest_rate, monthly_payment } = goal
+  if (!interest_rate || !monthly_payment) return true
+
+  const MONTHS = 12
+  const INTEREST_TO_DECIMAL = 100
+  const MAX_MONTHLY_PAYMENTS = 1200 // 1 payment / month * 12 months * 100 years
+
+  const monthlyInterestRate = interest_rate / (MONTHS * INTEREST_TO_DECIMAL)
+  let numberOfMonthlyPayments
+
+  // Calculates the total number of monthly payments needed
+  // Source https://brownmath.com/bsci/loan.htm#Eq3
+  if (monthlyInterestRate !== 0) {
+    numberOfMonthlyPayments =
+      -Math.log(1 - (monthlyInterestRate * current_amount) / monthly_payment) /
+      Math.log(1 + monthlyInterestRate)
+  } else {
+    numberOfMonthlyPayments = current_amount / monthly_payment
+  }
+
+  return !Number.isFinite(numberOfMonthlyPayments) || numberOfMonthlyPayments > MAX_MONTHLY_PAYMENTS
+}
+
+export { createDebt, isImpossible, loadDebts }

package/src/debts/utils/DebtsWidget.ts

@@ -0,0 +1,32 @@
+import { type Debt } from '../../common'
+
+const transformDebtsChartData = (debts: Debt[]) => {
+  return debts
+    .filter((d) => d.balance > 0)
+    .map((debt) => {
+      // Generate example payoff data based on monthly payments
+      const monthlyPayment = debt.monthly_payment
+      const initialBalance = debt.current_amount
+      const payoffData = []
+
+      if (monthlyPayment > 0) {
+        let remainingBalance = initialBalance
+        const date = new Date()
+
+        while (remainingBalance > 0) {
+          payoffData.push({ x: new Date(date), y: remainingBalance })
+          remainingBalance -= monthlyPayment
+          date.setMonth(date.getMonth() + 1)
+        }
+        payoffData.push({ x: new Date(date), y: 0 }) // Ensure final data point is zero
+      }
+
+      return {
+        guid: debt.guid,
+        name: debt.name,
+        dataset: payoffData,
+      }
+    })
+}
+
+export { transformDebtsChartData }