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

package/src/microinsights/stores/AppStore.ts

@@ -0,0 +1,34 @@
+import { makeAutoObservable, runInAction } from 'mobx'
+
+import { analyticsSession } from '../../common'
+
+import { CopyStore } from './CopyStore'
+import { InsightsMicroWidgetStore } from './InsightsMicroWidgetStore'
+
+import type { AnalyticSession } from '../analytics'
+
+export class AppStore {
+  copyStore
+  endpoint = '/'
+  insightsMicroWidgetStore
+  session: AnalyticSession | null = null
+  token = ''
+
+  isInitialized = false
+
+  constructor() {
+    this.copyStore = new CopyStore()
+    this.insightsMicroWidgetStore = new InsightsMicroWidgetStore()
+    makeAutoObservable(this)
+  }
+
+  initialize = async (endpoint: string, token: string, logOutUser: () => void) => {
+    await this.copyStore.initialize(endpoint, token)
+    await this.insightsMicroWidgetStore.initialize(endpoint, token, logOutUser)
+    this.session = await analyticsSession(endpoint, token, '1.0.0', 'Micro Insights Carousel')
+
+    runInAction(() => {
+      this.isInitialized = true
+    })
+  }
+}

package/src/microinsights/stores/CopyStore.ts

@@ -0,0 +1,38 @@
+import { makeAutoObservable, runInAction } from 'mobx'
+import { GlobalCopyApi, type MicroInsightsCopy } from '../../common'
+
+export class CopyStore {
+  copyApi: GlobalCopyApi = new GlobalCopyApi('/', '')
+  copyObject: MicroInsightsCopy = {} as MicroInsightsCopy
+  namespace = 'experiences'
+  translationKey = 'micro_insights'
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  initialize = async (endpoint: string, token: string) => {
+    this.copyApi = new GlobalCopyApi(endpoint, token)
+    await this.loadCopy()
+  }
+
+  loadCopy = async () => {
+    const copy = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey)
+
+    runInAction(() => {
+      this.copyObject = copy[this.translationKey]
+    })
+  }
+
+  get cardsCopy(): any {
+    return this.copyObject.cards
+  }
+
+  get carouselCopy(): any {
+    return this.copyObject.carousel
+  }
+
+  get zeroStateCopy(): any {
+    return this.copyObject.zero_state
+  }
+}

package/src/microinsights/stores/InsightsMicroWidgetStore.ts

@@ -0,0 +1,61 @@
+import { type AnalyticSession, onAnalyticEvent, onAnalyticPageView } from '../analytics'
+import { BeatApi } from '../../common/api/BeatApi'
+import type { Beat } from '../../common'
+import { makeAutoObservable } from 'mobx'
+
+export interface ErrPromise<TSuccess, TError = unknown> {
+  then<TResult1 = TSuccess, TResult2 = never>(
+    onfulfilled?: ((value: TSuccess) => TResult1 | PromiseLike<TResult1>) | undefined | null,
+    onrejected?: ((reason: TError) => TResult2 | PromiseLike<TResult2>) | undefined | null,
+  ): Promise<TResult1 | TResult2>
+  catch<TResult = never>(
+    onrejected?: ((reason: TError) => TResult | PromiseLike<TResult>) | undefined | null,
+  ): Promise<TSuccess | TResult>
+}
+
+export class InsightsMicroWidgetStore {
+  onAnalyticEvent: (
+    event: string,
+    session: AnalyticSession,
+  ) => ErrPromise<string, AnalyticSession> = onAnalyticEvent
+  onAnalyticPageView: (
+    event: string,
+    session: AnalyticSession,
+  ) => ErrPromise<string, AnalyticSession> = onAnalyticPageView
+
+  beatApi = new BeatApi('/', '')
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  initialize = async (endpoint: string, token: string, logOutUser: () => void) => {
+    this.onAnalyticEvent = (event: string, session: AnalyticSession): any => {
+      onAnalyticEvent(event, session)
+        .then((res) => res)
+        .catch((err) => {
+          if (err.status === 401) {
+            logOutUser()
+          }
+          throw err
+        })
+    }
+
+    this.onAnalyticPageView = (page: string, session: AnalyticSession): any => {
+      onAnalyticPageView(page, session)
+        .then((res) => res)
+        .catch((err) => {
+          if (err.status === 401) {
+            logOutUser()
+          }
+          throw err
+        })
+    }
+
+    this.beatApi = new BeatApi(endpoint, token)
+  }
+
+  updateBeat = async (beat: Beat) => {
+    this.beatApi.updateBeat(beat)
+  }
+}

package/src/microinsights/types/BeatUIComponent.ts

@@ -0,0 +1,5 @@
+import type { Beat } from '../../common'
+
+export interface BeatUIComponent {
+  beat: Beat
+}

package/src/microinsights/utils/DataSeries.ts

@@ -0,0 +1,20 @@
+import { DataSeries } from '../../common'
+
+export const buildDataSeries = (data: DataSeries | undefined) => {
+  if (!data) {
+    return []
+  }
+
+  if (data.data) {
+    return data.data.map((d) => {
+      const item: any = {}
+
+      data.names?.map((name, index) => {
+        item[name] = d[index]
+      })
+      return item
+    })
+  } else {
+    return []
+  }
+}

package/src/networth/NetWorthWidget.tsx

@@ -0,0 +1,171 @@
+import { differenceInMonths } from 'date-fns'
+import { observer } from 'mobx-react-lite'
+import React from 'react'
+
+import Stack from '@mui/material/Stack'
+
+import type { DateRange } from '@mui/x-date-pickers-pro'
+
+import {
+  ANALYTICS_EVENTS,
+  Drawer,
+  Loader,
+  useAccountStore,
+  useEvent,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+  useNetWorthStore,
+  useScreenSize,
+  WidgetContainer,
+  WidgetProps,
+} from '../common'
+
+import AssetsLiabilitiesDetail from './components/AssetsLiabilitiesDetail'
+import GainsLossesDetail from './components/GainsLossesDetail'
+import NetWorthChart from './components/NetWorthChart'
+import NetWorthList from './components/NetWorthList'
+import NetWorthSummary from './components/NetWorthSummary'
+import { NetWorthProps } from './types/NetWorth'
+
+export const NetWorthWidget: React.FC<WidgetProps> = observer(({ onBackClick }) => {
+  const { isInitialized, selectedAccounts, setSelectedAccounts } = useGlobalUiStore()
+  const { net_worth: copy } = useGlobalCopyStore()
+  const { accounts } = useAccountStore()
+  const {
+    assetsLiabilities,
+    gainsLosses,
+    hoveredData,
+    loadChartData,
+    loadNetWorthData,
+    netWorthChartData,
+    selectedData,
+    setHoveredData,
+    setSelectedData,
+  } = useNetWorthStore()
+  const { isMobile } = useScreenSize()
+  const { onEvent } = useEvent()
+
+  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)
+  const [timeframe, setTimeFrame] = React.useState(6) // default timeframe is 6 months
+  const [isGlDrawerOpen, setIsGlDrawerOpen] = React.useState(false)
+  const [isAlDrawerOpen, setIsAlDrawerOpen] = React.useState(false)
+
+  const initalizeWidget = async () => {
+    await loadNetWorthData(selectedAccounts)
+    await loadChartData(timeframe)
+    setIsWidgetInitialized(true)
+  }
+
+  React.useEffect(() => {
+    onEvent(ANALYTICS_EVENTS.NET_WORTH_VIEW)
+    setSelectedAccounts(accounts)
+  }, [])
+
+  React.useEffect(() => {
+    if (isInitialized) {
+      initalizeWidget()
+    }
+  }, [isInitialized, selectedAccounts])
+
+  React.useEffect(() => {
+    onEvent(ANALYTICS_EVENTS.NET_WORTH_WIDGET_CLICK_TIMEFRAME, { time_period: timeframe + 'M' })
+    loadChartData(timeframe)
+  }, [timeframe])
+
+  const handleDataClick = (
+    event: React.MouseEvent<SVGPathElement | HTMLDivElement, MouseEvent>,
+    dataIndex: number,
+  ) => {
+    setSelectedData(dataIndex)
+    if (event.currentTarget instanceof HTMLDivElement) {
+      setIsGlDrawerOpen(true)
+    }
+  }
+
+  const handleMouseEnter = (dataIndex: number) => {
+    setHoveredData(dataIndex)
+  }
+
+  const handleMouseLeave = () => {
+    setHoveredData(null)
+  }
+
+  const handleViewAssetsLiabilitiesClick = () => {
+    onEvent(ANALYTICS_EVENTS.NET_WORTH_WIDGET_CLICK_ASSETS_LIABILITIES)
+    setIsAlDrawerOpen(true)
+  }
+
+  const handleRangeChanged = async (range: DateRange<Date>) => {
+    const startDate = range[0]
+    const endDate = range[1]
+
+    if (startDate && endDate) {
+      setTimeFrame(differenceInMonths(endDate, startDate))
+    }
+  }
+
+  const netWorthProps: NetWorthProps = {
+    chartData: netWorthChartData,
+    hoveredData: hoveredData,
+    onButtonClick: handleViewAssetsLiabilitiesClick,
+    onDataClick: handleDataClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    selectedData: selectedData,
+  }
+
+  if (!isWidgetInitialized) {
+    return <Loader />
+  }
+
+  return (
+    <WidgetContainer
+      accountOptions={accounts}
+      calendarActions={{
+        onRangeChanged: handleRangeChanged,
+      }}
+      dateRangeVariant={isMobile ? 'timeframetabs' : 'timeframebuttons'}
+      onAccountsFilterClick={() => onEvent(ANALYTICS_EVENTS.NET_WORTH_WIDGET_CLICK_FILTER)}
+      onBackClick={onBackClick}
+      showDividerAboveDateSelector={false}
+      sx={{ p: isMobile ? 0 : 48 }}
+      title={copy.net_worth}
+    >
+      {isWidgetInitialized && (
+        <>
+          {selectedData && (
+            <NetWorthSummary hoveredData={hoveredData} selectedData={selectedData} />
+          )}
+          <Stack
+            alignItems={isMobile ? 'center' : 'flex-start'}
+            direction={isMobile ? 'column' : 'row'}
+            spacing={isMobile ? 0 : 48}
+          >
+            <NetWorthChart {...netWorthProps} />
+            <NetWorthList {...netWorthProps} />
+          </Stack>
+          <Drawer
+            ariaLabelClose={'Close'}
+            isOpen={isGlDrawerOpen}
+            onClose={() => setIsGlDrawerOpen(false)}
+            shouldShowHeaderBorders={false}
+            shouldShowHeaderShadow={true}
+            title={copy.gains_and_losses}
+          >
+            {gainsLosses && <GainsLossesDetail {...gainsLosses} />}
+          </Drawer>
+          <Drawer
+            ariaLabelClose={'Close'}
+            isOpen={isAlDrawerOpen}
+            onClose={() => setIsAlDrawerOpen(false)}
+            shouldShowHeaderBorders={false}
+            shouldShowHeaderShadow={true}
+            title={copy.assets_and_liabilities}
+          >
+            {assetsLiabilities && <AssetsLiabilitiesDetail {...assetsLiabilities} />}
+          </Drawer>
+        </>
+      )}
+    </WidgetContainer>
+  )
+})

package/src/networth/__tests__/AssetsLiabilitiesDetail.test.tsx

@@ -0,0 +1,94 @@
+import '@testing-library/jest-dom'
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+
+import { GlobalDataProvider, GlobalStore } from '../../common'
+
+import AssetsLiabilitiesDetail from '../components/AssetsLiabilitiesDetail'
+import { NetWorthTestData } from '../../../mock/unittestdata/NetWorthTestData'
+
+describe('Assets & Liabilities Drawer', () => {
+  let globalStore: GlobalStore
+  const mockAssetsLiabilities = NetWorthTestData.assetsLiabilities
+
+  beforeAll(() => {
+    globalStore = new GlobalStore()
+    globalStore.initialize('/', '').finally()
+  })
+
+  beforeEach(() => {
+    render(
+      <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+        <AssetsLiabilitiesDetail {...mockAssetsLiabilities} />
+      </GlobalDataProvider>,
+    )
+  })
+  describe('Assets & Liabilities Detail', () => {
+    it('for a list of assets, displays the total assets', () => {
+      expect(screen.getByText('Assets')).toBeInTheDocument()
+      expect(screen.getByText('$308,693.92')).toBeInTheDocument()
+    })
+
+    it('for a list of liabilities, displays the total liabilities', () => {
+      expect(screen.getByText('Liabilities')).toBeInTheDocument()
+      expect(screen.getByText('$103,301.34')).toBeInTheDocument()
+    })
+
+    it('for a list of assets, displays a button labeled with asset type', () => {
+      expect(screen.getByText('Checking')).toBeInTheDocument()
+      expect(screen.getByText('Savings')).toBeInTheDocument()
+      expect(screen.getByText('Investment')).toBeInTheDocument()
+      expect(screen.getByText('Property')).toBeInTheDocument()
+    })
+
+    it('for a list of liabilities, displays a button labeled with liability type', () => {
+      expect(screen.getByText('Credit Card')).toBeInTheDocument()
+      expect(screen.getByText('Mortgage')).toBeInTheDocument()
+    })
+
+    it('for an account type, displays an account type icon', () => {
+      expect(screen.getByText('checkbook')).toBeInTheDocument()
+      expect(screen.getByText('bid_landscape')).toBeInTheDocument()
+      expect(screen.getByText('credit_card')).toBeInTheDocument()
+    })
+
+    describe('Assets List', () => {
+      it('for the checking group list, displays checking accounts when open', () => {
+        screen.getByText('Checking').click()
+
+        waitFor(() => expect(screen.getByText('Gringotts Checking')).toBeInTheDocument())
+        waitFor(() => expect(screen.getByText('Other Checking')).toBeInTheDocument())
+        waitFor(() => expect(screen.getByText('Manual account')).toBeInTheDocument())
+      })
+
+      it('for the savings group list, displays savings accounts when open', () => {
+        screen.getByText('Savings').click()
+
+        waitFor(() => expect(screen.getByText('Emergency Savings 1')).toBeInTheDocument())
+        waitFor(() => expect(screen.getByText('Health Savings')).toBeInTheDocument())
+        waitFor(() => expect(screen.getByText('Rainy Day Savings')).toBeInTheDocument())
+      })
+
+      it('for the investment group list, displays investment accounts when open', () => {
+        screen.getByText('Investment').click()
+
+        waitFor(() => expect(screen.getByText('Investments')).toBeInTheDocument())
+      })
+
+      it('for the property group list, displays property accounts when open', () => {
+        screen.getByText('Property').click()
+
+        waitFor(() => expect(screen.getByText('Hope Diamond')).toBeInTheDocument())
+      })
+    })
+
+    describe('Liabilities List', () => {
+      it('for the credit card group list, displays credit card accounts when open', () => {
+        screen.getByText('Credit Card').click()
+
+        waitFor(() => expect(screen.getByText('Credit Card 2')).toBeInTheDocument())
+      })
+    })
+  })
+})

package/src/networth/__tests__/NetWorthChart.test.tsx

@@ -0,0 +1,31 @@
+import '@testing-library/jest-dom'
+import React from 'react'
+
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { WidgetContainerProvider } from '../../common/'
+
+import NetWorthChart from '../components/NetWorthChart'
+import ChartData from '../../../mock/data/networth/ChartData'
+import { getLatestNetWorthData } from '../utils/NetWorthUtils'
+
+describe('Testing NetWorthChart', () => {
+  it('renders successfully', async () => {
+    const mockData = ChartData as any
+    const mockSelectedData = getLatestNetWorthData(mockData)
+
+    render(
+      <WidgetContainerProvider availableHeight={500} availableWidth={800}>
+        <NetWorthChart chartData={mockData} selectedData={mockSelectedData} />
+      </WidgetContainerProvider>,
+    )
+
+    const items = screen.getAllByText('$201k')
+    expect(items).toBeDefined()
+
+    expect(screen.getByText('May')).toBeInTheDocument()
+    expect(screen.getByText('Jul')).toBeInTheDocument()
+    expect(screen.getAllByText('Sep')[0]).toBeInTheDocument()
+  })
+})

package/src/networth/__tests__/NetWorthList.test.tsx

@@ -0,0 +1,33 @@
+import '@testing-library/jest-dom'
+import React from 'react'
+
+import { describe, expect, it } from 'vitest'
+
+import { render, screen } from '@testing-library/react'
+
+import { GlobalDataProvider, GlobalStore } from '../../common'
+
+import NetWorthList from '../components/NetWorthList'
+
+import ChartData from '../../../mock/data/networth/ChartData'
+
+describe('Testing NetWorthList', () => {
+  let globalStore: GlobalStore
+  beforeEach(() => {
+    globalStore = new GlobalStore()
+    globalStore.initialize('/', '').finally()
+  })
+  it('renders successfully', async () => {
+    const mockData = ChartData as any
+
+    render(
+      <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+        <NetWorthList chartData={mockData} />
+      </GlobalDataProvider>,
+    )
+    expect(screen.getByText('Monthly Totals')).toBeInTheDocument()
+    expect(screen.getByText('October 2024')).toBeInTheDocument()
+    expect(screen.getByText('May 2024')).toBeInTheDocument()
+    expect(screen.getByText('$201,257.75')).toBeInTheDocument()
+  })
+})

package/src/networth/components/AssetsLiabilitiesDetail.tsx

@@ -0,0 +1,146 @@
+import { observer } from 'mobx-react-lite'
+import React from 'react'
+
+import Box from '@mui/material/Box'
+import Collapse from '@mui/material/Collapse'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import ListSubheader from '@mui/material/ListSubheader'
+import Stack from '@mui/material/Stack'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { Icon, Text } from '@kyper/mui'
+
+import { CurrencyText, useGlobalCopyStore } from '../../common/'
+import NetWorthChange from './NetWorthChange'
+import { AccountGroup, AssetsLiabilities } from '../types/NetWorth'
+import { groupAccounts } from '../utils/NetWorthUtils'
+
+const Group: React.FC<AccountGroup> = ({ accounts, name, icon }) => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <ListItem sx={(theme) => ({ backgroundColor: theme.palette.background.paper })}>
+        <ListItemButton onClick={() => setIsOpen(!isOpen)}>
+          {icon && (
+            <ListItemIcon>
+              <Icon name={icon} size={24} sx={{ mr: 12 }} />
+            </ListItemIcon>
+          )}
+          <ListItemText
+            primary={
+              <Text sx={{ fontWeight: 700 }} variant="Body">
+                {name}
+              </Text>
+            }
+          />
+          <ListItemIcon>
+            {isOpen ? <Icon name="expand_less" size={24} /> : <Icon name="expand_more" size={24} />}
+          </ListItemIcon>
+        </ListItemButton>
+      </ListItem>
+      <Divider />
+      <Collapse in={isOpen} timeout="auto" unmountOnExit={true}>
+        {accounts.map((account, index) => (
+          <List key={account.accountName}>
+            <ListItem sx={() => ({ py: 14 })}>
+              <ListItemText
+                primary={
+                  <Stack direction="row" justifyContent="space-between" sx={{ fontWeight: 400 }}>
+                    <Text variant="Body">{account.accountName}</Text>
+                    <CurrencyText amount={account.balance} variant="Small" />
+                  </Stack>
+                }
+                sx={{ pl: 72, pr: 16 }}
+              />
+            </ListItem>
+            {index < accounts.length - 1 ? <Divider variant="inset" /> : <Divider />}
+          </List>
+        ))}
+      </Collapse>
+    </>
+  )
+}
+
+const ListGroup: React.FC<{
+  groupedAccounts: AccountGroup[]
+}> = ({ groupedAccounts }) => (
+  <>
+    {groupedAccounts.map(({ accounts, icon, name }) => (
+      <Group accounts={accounts} icon={icon} key={name} name={name} />
+    ))}
+  </>
+)
+
+const AssetsLiabilitiesDetail: React.FC<AssetsLiabilities> = ({
+  netWorth,
+  assets,
+  liabilities,
+  totalAssets,
+  totalLiabilities,
+}) => {
+  const { net_worth: copy } = useGlobalCopyStore()
+
+  const theme = useTheme()
+
+  return (
+    <>
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          paddingTop: 24,
+          marginBottom: 8,
+        }}
+      >
+        <Text variant="Body">{copy.current_net_worth}</Text>
+        <CurrencyText amount={netWorth?.y ?? 0} variant="H1" />
+        {netWorth && (
+          <NetWorthChange
+            currencyLabel={copy.this_month}
+            iconSize={20}
+            netWorth={netWorth}
+            theme={theme}
+          />
+        )}
+      </Box>
+      <List>
+        <ListSubheader sx={{ mb: 8, mt: 12, mx: 8 }}>
+          <ListItemText
+            primary={
+              <Stack direction="row" justifyContent="space-between">
+                <Text sx={{ fontWeight: 700 }} variant="XSmall">
+                  {copy.assets}
+                </Text>
+                <CurrencyText amount={totalAssets} sx={{ fontWeight: 400 }} variant="XSmall" />
+              </Stack>
+            }
+          />
+        </ListSubheader>
+        <ListGroup groupedAccounts={groupAccounts(assets)} />
+        <ListSubheader sx={{ mb: 8, mt: 12, mx: 8 }}>
+          <ListItemText
+            primary={
+              <Stack direction="row" justifyContent="space-between">
+                <Text sx={{ fontWeight: 700 }} variant="XSmall">
+                  {copy.liabilities}
+                </Text>
+                <CurrencyText amount={totalLiabilities} sx={{ fontWeight: 400 }} variant="XSmall" />
+              </Stack>
+            }
+          />
+        </ListSubheader>
+        <ListGroup groupedAccounts={groupAccounts(liabilities)} />
+      </List>
+    </>
+  )
+}
+
+export default observer(AssetsLiabilitiesDetail)