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

package/src/networth/utils/NetWorthUtils.ts

@@ -1,177 +0,0 @@
-import { format } from 'date-fns/format'
-import { fromUnixTime } from 'date-fns/fromUnixTime'
-import { startOfMonth } from 'date-fns/startOfMonth'
-import { subMonths } from 'date-fns/subMonths'
-
-import type { Account, Member, MonthlyAccountBalance } from '../../common/types'
-import { AccountTypeName, AccountIcon, AccountIconVariants } from '../../common/types'
-import { isAccountLiability } from '../../accounts/utils'
-import { FinancialAccount, AccountGroup, NetWorth } from '../types/NetWorth'
-
-const MAX_NUMBER_MONTHS = 13
-
-export const filterAccounts = (accounts: Account[], members: Member[]) => {
-  return accounts.filter((account) => {
-    const { is_closed, is_deleted, is_hidden, is_manual } = account
-
-    if (is_closed || is_deleted || is_hidden) return false
-    if (is_manual || !account.guid) return true
-
-    return members.some((member) => {
-      return accounts.some((account) => {
-        return member.guid === account.member_guid
-      })
-    })
-  })
-}
-
-export const flattenBalances = (balances: any, balance: any) => {
-  return [...balances, ...balance]
-}
-
-export const getLatestNetWorthData = (chartData: NetWorth[]) => {
-  if (chartData && chartData.length > 0) {
-    return chartData[chartData.length - 1]
-  } else return undefined
-}
-
-export const sortByYearMonthAscending = (a: MonthlyAccountBalance, b: MonthlyAccountBalance) =>
-  a.year_month - b.year_month
-
-const buildDateTicks = () => {
-  return Array.from({ length: MAX_NUMBER_MONTHS }, (_, count) => {
-    return Math.floor(startOfMonth(subMonths(new Date(), count)).getTime() / 1000)
-  }).sort()
-}
-
-export const buildChartData = (
-  accounts: Account[],
-  monthlyAccountBalances: MonthlyAccountBalance[],
-  numberOfMonths: number,
-) => {
-  if (!accounts.length || !monthlyAccountBalances.length) return []
-  const dateTicks = buildDateTicks()
-  return dateTicks
-    .reduceRight((result: any, x) => {
-      const balances = monthlyAccountBalances.filter(
-        ({ year_month }) => year_month === parseInt(format(fromUnixTime(x), 'yyyyMM')),
-      )
-      const accountsWithBalances = accounts.map((account) => {
-        const balance = balances.find((balance) => balance.account_guid === account.guid)
-
-        const zeroBalance = {
-          change: 0,
-          guid: account.guid,
-          name: account.name,
-          type: account.account_type,
-          balance: 0,
-        }
-
-        if (!balance && result.length === 0 && !account.balance) return zeroBalance
-
-        // The servers return the monthly account balances in Utah time. Frontend starts all the date calculations
-        // in UTC. We get into overlaps for a few hours depending on the timezone with no monthly account balances
-        // for all accounts.
-        if (!balance && result.length === 0) {
-          return {
-            ...zeroBalance,
-            value: isAccountLiability(account) ? -(account.balance ?? 0) : (account.balance ?? 0),
-          }
-        }
-
-        if (!balance) {
-          const lastBalance = result[0].accounts.find((acc: Account) => acc.guid === account.guid)
-
-          return lastBalance ? lastBalance : zeroBalance
-        }
-
-        return {
-          change: balance.transaction_total,
-          guid: account.guid,
-          name: account.name,
-          type: account.account_type,
-          value: balance.balance,
-        }
-      })
-
-      const { y, change } = accountsWithBalances.reduce(
-        (acc, current) => {
-          return {
-            y: acc.y + (current.value || 0),
-            change: acc.change + (current.change || 0),
-          }
-        },
-        { y: 0, change: 0 },
-      )
-
-      return [
-        {
-          accounts: accountsWithBalances,
-          x,
-          y,
-          change,
-        },
-        ...result,
-      ]
-    }, [])
-    .slice(MAX_NUMBER_MONTHS - numberOfMonths)
-}
-
-export const buildGainsLosses = (selectedData?: NetWorth) => {
-  const gains: { accountName: string; gain: number }[] = []
-  const losses: { accountName: string; loss: number }[] = []
-  let totalGains = 0
-  let totalLosses = 0
-
-  selectedData?.accounts.forEach((account) => {
-    if (account.change > 0) {
-      gains.push({ accountName: account.name, gain: account.change })
-      totalGains += account.change
-    }
-    if (account.change < 0) {
-      losses.push({ accountName: account.name, loss: account.change })
-      totalLosses += account.change
-    }
-  })
-
-  return { netWorth: selectedData, gains, losses, totalGains, totalLosses }
-}
-
-export const buildAssetsLiabilities = (accounts: Account[]) => {
-  const assets: FinancialAccount[] = []
-  const liabilities: FinancialAccount[] = []
-  let totalAssets = 0
-  let totalLiabilities = 0
-
-  accounts.forEach((account) => {
-    if (isAccountLiability(account)) {
-      const balance = account.balance ?? 0
-      liabilities.push({ accountName: account.name, accountType: account.account_type, balance })
-      totalLiabilities += balance
-    } else {
-      const balance = account.balance ?? 0
-      assets.push({ accountName: account.name, accountType: account.account_type, balance })
-      totalAssets += balance
-    }
-  })
-
-  return { assets, liabilities, totalAssets, totalLiabilities }
-}
-// groups accounts by account type
-// returns array of account groups, each with an icon, name, and the grouped accounts
-export const groupAccounts = (accounts: FinancialAccount[]): AccountGroup[] => {
-  const groupedAccounts = accounts.reduce<{ [key: number]: FinancialAccount[] }>((acc, account) => {
-    const accountType = account.accountType
-    if (!acc[accountType]) {
-      acc[accountType] = []
-    }
-    acc[accountType].push(account)
-    return acc
-  }, {})
-
-  return Object.entries(groupedAccounts).map(([accountType, accounts]) => ({
-    icon: AccountIconVariants[+accountType] || AccountIcon[+accountType],
-    name: AccountTypeName[+accountType],
-    accounts,
-  }))
-}

package/src/networth/utils/__tests__/NetWorthUtils.test.ts

@@ -1,198 +0,0 @@
-import { describe, it, expect } from 'vitest'
-
-import {
-  buildAssetsLiabilities,
-  buildChartData,
-  buildGainsLosses,
-  filterAccounts,
-} from '../NetWorthUtils'
-import { NetWorthTestData } from '../../../../mock/unittestdata/NetWorthTestData'
-
-describe('filterAccounts', () => {
-  const accounts = NetWorthTestData.accounts as any
-  const members = NetWorthTestData.members as any
-  const result = filterAccounts(accounts, members)
-
-  it('should filter out closed, deleted, or hidden accounts', () => {
-    expect(result).not.toContainEqual(expect.objectContaining({ guid: 'ACT009' })) //closed
-    expect(result).not.toContainEqual(expect.objectContaining({ guid: 'ACT010' })) //deleted
-    expect(result).not.toContainEqual(expect.objectContaining({ guid: 'ACT011' })) //hidden
-  })
-
-  it('should include manual accounts and accounts without a guid', () => {
-    expect(result).toContainEqual(expect.objectContaining({ guid: 'ACT-008' })) //manual
-    expect(result).toContainEqual(expect.objectContaining({ guid: '' })) //no guid
-  })
-
-  it("should include accounts that match a member's guid", () => {
-    expect(result).toContainEqual(expect.objectContaining({ guid: 'ACT-001' }))
-    expect(result).toContainEqual(expect.objectContaining({ guid: 'ACT-002' }))
-    expect(result).toContainEqual(expect.objectContaining({ guid: 'ACT-003' }))
-    expect(result).toContainEqual(expect.objectContaining({ guid: 'ACT-004' }))
-    expect(result).toContainEqual(expect.objectContaining({ guid: 'ACT-005' }))
-    expect(result).toContainEqual(expect.objectContaining({ guid: 'ACT-006' }))
-  })
-})
-
-describe('buildChartData', () => {
-  let accounts: any
-  let monthlyAccountBalances: any
-  let numberOfMonths: number
-
-  it('should return an empty array if accounts or monthlyAccountBalances is empty', () => {
-    accounts = []
-    monthlyAccountBalances = []
-
-    const result = buildChartData(accounts, monthlyAccountBalances, numberOfMonths)
-    expect(result).toEqual([])
-  })
-
-  it('should return chart data for the given accounts and monthlyAccountBalances', () => {
-    const accounts = NetWorthTestData.accounts as any
-    const monthlyAccountBalances = NetWorthTestData.balances as any
-    const numberOfMonths = 6
-
-    const result = buildChartData(accounts, monthlyAccountBalances, numberOfMonths)
-    expect(result).toHaveLength(6)
-  })
-})
-
-describe('buildGainsLosses', () => {
-  it('should return gains and losses for selectedData', async () => {
-    const selectedData = NetWorthTestData.selectedData as any
-    const result = await buildGainsLosses(selectedData)
-
-    expect(result).toEqual({
-      netWorth: {
-        accounts: [
-          {
-            change: 1000,
-            guid: 'ACT-001',
-            name: 'Gringotts Checking',
-            type: 1,
-            value: 5000,
-          },
-          {
-            balance: 0,
-            change: 0,
-            guid: 'ACT-011',
-            name: 'Manual account',
-            type: 1,
-            value: 12,
-          },
-          {
-            balance: 0,
-            change: 300,
-            guid: 'ACT-002',
-            name: 'Other Checking',
-            type: 1,
-            value: 20,
-          },
-          {
-            balance: 0,
-            change: 0,
-            guid: 'ACT-008',
-            name: 'Emergency Savings 1',
-            type: 2,
-            value: 827.09,
-          },
-          {
-            balance: 0,
-            change: 0,
-            guid: 'ACT-004',
-            name: 'Health Savings',
-            type: 2,
-            value: 500,
-          },
-          {
-            balance: 0,
-            change: 0,
-            guid: 'ACT-003',
-            name: 'Rainy Day Savings',
-            type: 2,
-            value: 200,
-          },
-          {
-            balance: 0,
-            change: 0,
-            guid: 'ACT-006',
-            name: 'Credit Card',
-            type: 4,
-            value: -650,
-          },
-          {
-            balance: 0,
-            change: 0,
-            guid: 'ACT-007',
-            name: 'Credit Card 2',
-            type: 4,
-            value: -650,
-          },
-          {
-            balance: 0,
-            change: -1200,
-            guid: 'ACT-005',
-            name: 'Investments',
-            type: 5,
-            value: 2000,
-          },
-          {
-            balance: 0,
-            change: 0,
-            guid: 'ACT-010',
-            name: 'Loan Number:',
-            type: 7,
-            value: -102001.34,
-          },
-          {
-            balance: 0,
-            change: 0,
-            guid: 'ACT-009',
-            name: 'Hope Diamond',
-            type: 8,
-            value: 300000,
-          },
-        ],
-        change: 1000,
-        x: 1727762400,
-        y: 205257.75,
-      },
-      gains: [
-        { accountName: 'Gringotts Checking', gain: 1000 },
-        { accountName: 'Other Checking', gain: 300 },
-      ],
-      losses: [{ accountName: 'Investments', loss: -1200 }],
-      totalGains: 1300,
-      totalLosses: -1200,
-    })
-  })
-})
-
-describe('buildAssetsLiabilities', () => {
-  const accounts = NetWorthTestData.accounts as any
-
-  it('should return accounts of type ASSET', async () => {
-    const result = await buildAssetsLiabilities(accounts)
-    expect(result.assets).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({ accountName: 'Gringotts Checking', balance: 5134.83 }),
-      ]),
-    )
-  })
-
-  it('should return accounts of type LIABILITY', async () => {
-    const result = await buildAssetsLiabilities(accounts)
-    expect(result.liabilities).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({ accountName: 'Credit Card', balance: 650 }),
-      ]),
-    )
-  })
-
-  it('should return the sum of the balances for assets and liabilities', async () => {
-    const result = await buildAssetsLiabilities(accounts)
-
-    expect(result.totalAssets).toEqual(9043.92)
-    expect(result.totalLiabilities).toEqual(103301.34)
-  })
-})

package/src/notifications/__tests__/NotificationList.test.tsx

@@ -1,67 +0,0 @@
-import React from 'react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { ThemeProvider } from '@mui/material/styles'
-import { createMXTheme } from '@kyper/mui'
-
-import NotificationList from '../components/NotificationList'
-import GlobalDataProvider from '../../common/context/__mocks__/GlobalDataProvider'
-import { GlobalStore } from '../../common'
-
-import { NotificationTestData as notificationData } from '../../../mock/unittestdata/NotificationTestData'
-
-const globalStore = new GlobalStore()
-const mockNotifications = notificationData.notifications.map((n) => n.notification)
-const mockNotificationStore = {
-  isLoading: false,
-  markAllAsViewed: vi.fn().mockResolvedValue(null),
-  recentNotifications: mockNotifications,
-}
-
-vi.mock('../../common', async (importOriginal) => ({
-  ...((await importOriginal()) as any),
-  useNotificationStore: () => mockNotificationStore,
-}))
-
-// Needed to trigger re-rerendering after mutating the store
-const renderComponent = () => {
-  return render(
-    <GlobalDataProvider globalStore={globalStore}>
-      <ThemeProvider theme={createMXTheme('light')}>
-        <NotificationList />
-      </ThemeProvider>
-    </GlobalDataProvider>,
-  )
-}
-
-describe('NotificationList', () => {
-  beforeAll(() => {
-    if (!globalStore.isInitialized) {
-      globalStore.initialize('/', 'sessionToken')
-    }
-  })
-
-  beforeEach(() => {
-    // Re-initialize mock notifications before each test
-    mockNotificationStore.notifications = mockNotifications
-    renderComponent()
-  })
-
-  it('should display the NotificationList component', () => {
-    expect(screen.queryByText(mockNotifications[0].content)).toBeTruthy()
-    expect(screen.queryByText(mockNotifications[1].content)).toBeTruthy()
-  })
-
-  it('should show a new dot for previously unviewed notifications', () => {
-    // Check for new dot in the unviewed notification
-    const newDots = screen.getAllByTestId('new-message-dot')
-    expect(mockNotifications.length).toBe(3)
-    expect(newDots.length).toBe(2)
-  })
-
-  it('should display zero state when there are no notifications', () => {
-    mockNotificationStore.recentNotifications = []
-    renderComponent()
-    expect(screen.queryByText('No notifications to display')).toBeTruthy()
-  })
-})

package/src/notifications/components/DateRow.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import Box from '@mui/material/Box'
-import { Text } from '@kyper/mui'
-
-import { fromUnixToDayOfWeekAndDate } from '../../common/utils/DateUtil'
-
-interface DateRowProps {
-  date: number
-}
-
-const DateRow: React.FC<DateRowProps> = ({ date }) => {
-  return (
-    <Box sx={{ display: 'flex', justifyContent: 'center', mt: 12, py: 8 }}>
-      <Text bold={true} variant="Small">
-        {fromUnixToDayOfWeekAndDate(date)}
-      </Text>
-    </Box>
-  )
-}
-
-export default DateRow

package/src/notifications/components/NotificationBadge.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { InstitutionLogo, CategoryIcon } from '@kyper/mui'
-
-import { useAccountStore, useBudgetsStore, useGlobalCopyStore } from '../../common'
-import { type Notification } from '../../common/types'
-
-interface NotificationBadgeProps {
-  notification: Notification
-}
-
-const NotificationBadge: React.FC<NotificationBadgeProps> = ({ notification }) => {
-  const { accounts } = useAccountStore()
-  const { budgets } = useBudgetsStore()
-  const { accounts: accountsCopy } = useGlobalCopyStore()
-
-  const account = accounts.find((account) => account.guid === notification.entity_guid)
-  const budget = budgets.find((budget) => budget.guid === notification.entity_guid)
-  const isGoal = notification.entity_guid.includes('GOL')
-
-  const styles = {
-    badge: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: 4,
-      marginRight: 12,
-    },
-  }
-
-  if (account || isGoal) {
-    return (
-      <div style={styles.badge}>
-        <InstitutionLogo
-          alt={account?.institutionName || accountsCopy.institution_logo_alt}
-          institutionGuid={account?.institution_guid ?? ''}
-          size={33}
-        />
-      </div>
-    )
-  } else {
-    return (
-      <div style={styles.badge}>
-        <CategoryIcon categoryGuid={budget?.category_guid} size={36} />
-      </div>
-    )
-  }
-}
-
-export default observer(NotificationBadge)

package/src/notifications/components/NotificationCard.tsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import { Card, useTheme } from '@mui/material'
-import { Text } from '@kyper/mui'
-
-import { type Notification } from '../../common/types'
-import { useNotificationStore } from '../../common'
-import NotificationBadge from './NotificationBadge'
-
-interface NotificationCardProps {
-  notification: Notification
-  onClick: (notification: Notification) => void
-}
-
-const NotificationCard: React.FC<NotificationCardProps> = ({ notification, onClick }) => {
-  const { updateNotification } = useNotificationStore()
-  const theme = useTheme()
-
-  const styles = {
-    card: {
-      alignItems: 'center',
-      borderRadius: 2,
-      cursor: 'pointer',
-      display: 'flex',
-      marginBottom: 12,
-      paddingX: 24,
-      paddingY: 12,
-      '&:focus': {
-        backgroundColor: theme.palette.background.default,
-      },
-      '&:hover': {
-        backgroundColor: theme.palette.background.default,
-      },
-    },
-    dot: {
-      backgroundColor: theme.palette.primary.main,
-      borderRadius: '100%',
-      flex: '0 0 auto',
-      marginLeft: -8,
-      marginRight: 8,
-      height: 8,
-      width: 8,
-    },
-  }
-
-  const handleOnClick = () => {
-    onClick(notification)
-    updateNotification({ ...notification, has_been_viewed: true }).finally()
-  }
-
-  return (
-    <Card onClick={handleOnClick} sx={styles.card}>
-      {!notification.has_been_viewed ? (
-        <div data-testid="new-message-dot" style={styles.dot} />
-      ) : null}
-      <NotificationBadge notification={notification} />
-      <Text bold={!notification.has_been_viewed} truncate={false} variant={'Small'}>
-        {notification.content}
-      </Text>
-    </Card>
-  )
-}
-
-export default NotificationCard

package/src/notifications/components/NotificationList.tsx

@@ -1,65 +0,0 @@
-import React, { useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { Box, Divider, List } from '@mui/material'
-import { Text } from '@kyper/mui'
-
-import { shouldShowDate } from '../utils/NotificationUtils'
-import { type Notification } from '../../common/types'
-
-import { Loader, useGlobalCopyStore, useNotificationStore } from '../../common'
-import NotificationCard from './NotificationCard'
-import DateRow from './DateRow'
-
-export interface NotificationListProps {
-  onClick?: (notification: Notification) => void
-}
-
-const NotificationList: React.FC<NotificationListProps> = ({ onClick }) => {
-  const { isLoading, recentNotifications, markAllAsViewed } = useNotificationStore()
-  const { notifications: notificationsCopy } = useGlobalCopyStore()
-
-  const handleClick = (notification: Notification) => {
-    onClick?.(notification)
-  }
-
-  useEffect(() => {
-    return () => {
-      markAllAsViewed().finally()
-    }
-  }, [])
-
-  return (
-    <List sx={{ p: 16 }}>
-      {isLoading && <Loader label={notificationsCopy?.loading} size={40} />}
-      {!isLoading && recentNotifications.length === 0 && (
-        <Box sx={{ p: 16 }}>
-          <Text fontStyle="italic" sx={{ textAlign: 'center' }}>
-            {notificationsCopy.no_notifications}
-          </Text>
-        </Box>
-      )}
-      {!isLoading &&
-        recentNotifications
-          .slice()
-          .sort((a, b) => b.delivered_at - a.delivered_at)
-          .map((notification, index) => {
-            const showDate = shouldShowDate(index, recentNotifications)
-
-            return (
-              <Box key={notification.guid} sx={{ mb: 12 }}>
-                {showDate && (
-                  <Box sx={{ mb: 12 }}>
-                    <DateRow date={notification.delivered_at} />
-                    <Divider />
-                  </Box>
-                )}
-                <NotificationCard notification={notification} onClick={handleClick} />
-              </Box>
-            )
-          })}
-    </List>
-  )
-}
-
-export default observer(NotificationList)