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

package/src/debts/components/SnowballCard.tsx

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

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

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

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

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

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

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

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