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

package/src/microinsights/stores/AppStore.ts

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

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

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

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

package/src/microinsights/utils/DataSeries.ts

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

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

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

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

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

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