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

package/src/networth/utils/NetWorthUtils.ts

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

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

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

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

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

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

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