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

package/src/budgets/BubbleBudgetsWidget.tsx

@@ -1,154 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-import { isAfter } from 'date-fns/isAfter'
-import { startOfMonth } from 'date-fns/startOfMonth'
-
-import Alert from '@mui/material/Alert'
-import Stack from '@mui/material/Stack'
-import Snackbar from '@mui/material/Snackbar'
-import useTheme from '@mui/material/styles/useTheme'
-import { DateRange } from '@mui/x-date-pickers-pro'
-
-import {
-  ANALYTICS_EVENTS,
-  Drawer,
-  Loader,
-  useAccountStore,
-  useBudgetsStore,
-  useCategoryStore,
-  useEvent,
-  useGlobalCopyStore,
-  useGlobalUiStore,
-  useRecurringActivityStore,
-  useScreenSize,
-  WidgetContainer,
-  WidgetProps,
-} from '../common'
-
-import { BubbleBudgets } from './components/BubbleBudgets'
-import { BudgetList } from './components/BudgetList'
-import { Overview } from './components/Overview'
-import { AddBudgets } from './components/AddBudgets'
-import { BudgetDetailsDrawer } from './components/BudgetDetailsDrawer'
-
-const BUDGET_LIST_WIDTH = 480
-
-export const BubbleBudgetsWidget: React.FC<WidgetProps> = observer(({ onBackClick, sx }) => {
-  const theme = useTheme()
-
-  const { onEvent } = useEvent()
-  const { accounts } = useAccountStore()
-  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()
-  const { isInitialized, selectedAccounts, setDisplayedDate, setSelectedAccounts } =
-    useGlobalUiStore()
-  const { alert, dateRange, loadBudgets, setDateRange, setAlert, setTheme } = useBudgetsStore()
-  const { loadCashflowSequences } = useRecurringActivityStore()
-  const { isDesktop, isTablet } = useScreenSize()
-  const { reloadCategoryTotals } = useCategoryStore()
-
-  const [isDataLoaded, setIsDataLoaded] = React.useState(false)
-  const [isAddOpen, setIsAddOpen] = React.useState(false)
-
-  React.useEffect(() => {
-    setTheme(theme)
-    setSelectedAccounts(accounts)
-    setDisplayedDate(dateRange.start, dateRange.end)
-    onEvent(ANALYTICS_EVENTS.BUDGETS_VIEW)
-  }, [])
-
-  React.useEffect(() => {
-    if (isInitialized) {
-      reloadCategoryTotals(selectedAccounts, dateRange.start, dateRange.end).finally()
-      if (!isDataLoaded) {
-        loadCashflowSequences().finally()
-        loadBudgets().finally(() => setIsDataLoaded(true))
-      }
-    }
-  }, [isInitialized, selectedAccounts, dateRange])
-
-  const onMonthChanged = (dateRange: DateRange<Date>) => {
-    setDateRange({ start: dateRange[0] || new Date(), end: dateRange[1] || new Date() })
-  }
-
-  const handleAccountFilterClick = () => {
-    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_FILTER)
-  }
-
-  const handleAddClick = () => {
-    setIsAddOpen(true)
-    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_ADD)
-  }
-
-  const handleBudgetsRecalculated = () => {
-    setIsAddOpen(false)
-  }
-
-  const shouldDisableNext = isAfter(dateRange.end, startOfMonth(new Date()))
-
-  if (!isInitialized || !isDataLoaded) {
-    return <Loader />
-  }
-
-  return (
-    <WidgetContainer
-      accountOptions={accounts}
-      actions={[
-        {
-          iconName: 'add',
-          label: copy.add_title,
-          onClick: handleAddClick,
-        },
-      ]}
-      calendarActions={{ onRangeChanged: onMonthChanged, shouldDisableNext }}
-      onAccountsFilterClick={handleAccountFilterClick}
-      onBackClick={onBackClick}
-      sx={sx}
-      title={copy.budgets_title}
-    >
-      {(!isInitialized || !isDataLoaded) && <Loader />}
-      {isInitialized && isDataLoaded && (
-        <Stack direction={isDesktop || isTablet ? 'row' : 'column'} height="100%" width="100%">
-          <Stack height={isDesktop || isTablet ? 'calc(100dvh - 150px)' : 450}>
-            <BubbleBudgets
-              height={isDesktop || isTablet ? 800 : 450}
-              isDraggable={true}
-              shouldShowZeroState={false}
-              unavailableWidth={isDesktop || isTablet ? BUDGET_LIST_WIDTH : 0}
-            />
-          </Stack>
-          <Stack
-            gap={24}
-            height="100%"
-            sx={{ mr: 24 }}
-            width={isDesktop || isTablet ? BUDGET_LIST_WIDTH : '100%'}
-          >
-            <Overview />
-            <BudgetList />
-          </Stack>
-        </Stack>
-      )}
-
-      <BudgetDetailsDrawer />
-
-      <Drawer
-        ariaLabelClose={commonCopy.close_aria}
-        isOpen={isAddOpen}
-        onClose={() => setIsAddOpen(false)}
-        title={copy.add_new_title}
-      >
-        <AddBudgets onRecalculateBudgets={handleBudgetsRecalculated} />
-      </Drawer>
-
-      <Snackbar
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        autoHideDuration={3500}
-        onClose={() => setAlert('')}
-        open={Boolean(alert)}
-      >
-        <Alert onClose={() => setAlert('')} severity="success" variant="filled">
-          {alert}
-        </Alert>
-      </Snackbar>
-    </WidgetContainer>
-  )
-})

package/src/budgets/__tests__/BubbleBudgetsWidget.test.tsx

@@ -1,40 +0,0 @@
-import { act } from 'react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-
-import { createMXTheme } from '@kyper/mui'
-
-import { GlobalDataProvider, GlobalStore } from '../../common'
-import { ThemeProvider } from '@mui/material/styles'
-import '@testing-library/jest-dom'
-
-import { BubbleBudgetsWidget } from '../BubbleBudgetsWidget'
-
-vi.mock('../api/BudgetsApi')
-
-describe('Testing Bubble Budgets Widget', () => {
-  let globalStore: GlobalStore
-
-  beforeEach(() => {
-    globalStore = new GlobalStore()
-    globalStore.initialize('/', '').finally()
-  })
-
-  it('renders successfully', async () => {
-    await act(async () =>
-      render(
-        <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
-          <ThemeProvider theme={createMXTheme('light')}>
-            <BubbleBudgetsWidget onBackClick={() => {}} />
-          </ThemeProvider>
-        </GlobalDataProvider>,
-      ),
-    )
-
-    const budgets = globalStore.budgetsStore.detailedBudgets
-
-    expect(screen.queryByText('Budgets')).toBeInTheDocument()
-    expect(budgets).toHaveLength(13)
-    expect(screen.queryAllByText(budgets[0].category.name)[0]).toBeInTheDocument()
-  })
-})

package/src/budgets/__tests__/BudgetList.test.tsx

@@ -1,38 +0,0 @@
-import { act } from 'react'
-
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-
-import { createMXTheme } from '@kyper/mui'
-
-import { GlobalDataProvider, GlobalStore } from '../../common'
-import { ThemeProvider } from '@mui/material/styles'
-import { BudgetList } from '../components/BudgetList'
-
-vi.mock('../api/BudgetsApi')
-
-describe('Testing Budgets List', () => {
-  let globalStore: GlobalStore
-  const theme = createMXTheme('light')
-
-  beforeEach(() => {
-    globalStore = new GlobalStore()
-    globalStore.initialize('/', '').finally()
-  })
-
-  it('renders successfully', async () => {
-    await act(async () =>
-      render(
-        <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
-          <ThemeProvider theme={theme}>
-            <BudgetList />
-          </ThemeProvider>
-        </GlobalDataProvider>,
-      ),
-    )
-
-    expect(screen.queryByText('Budget Categories')).toBeInTheDocument()
-  })
-})

package/src/budgets/__tests__/BudgetsStore.test.tsx

@@ -1,48 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { createMXTheme } from '@kyper/mui'
-
-import { GlobalStore } from '../../common'
-
-vi.mock('../api/BudgetsApi')
-
-describe('Testing the BudgetsStore', () => {
-  let globalStore: GlobalStore
-  let consoleErrorSpy: any
-  const theme = createMXTheme('light')
-
-  beforeEach(() => {
-    globalStore = new GlobalStore()
-    globalStore.budgetsStore.setTheme(theme)
-    consoleErrorSpy = vi.spyOn(console, 'error')
-  })
-
-  describe('initialize()', () => {
-    it('should initialize BudgetsStore', async () => {
-      await globalStore.initialize('/', '')
-      expect(globalStore.budgetsStore.budgets).toHaveLength(0)
-    })
-  })
-
-  describe('getBudgets()', () => {
-    it('successfully loads budgets getBudgets', async () => {
-      const { budgetsStore } = globalStore
-
-      await globalStore.initialize('/', '')
-
-      expect(budgetsStore.budgets).toHaveLength(0)
-
-      await globalStore.budgetsStore.loadBudgets()
-
-      expect(globalStore.budgetsStore.budgets).toHaveLength(16)
-    })
-
-    it.fails('and logs error to console', async () => {
-      expect(globalStore.budgetsStore.budgets).toHaveLength(0)
-
-      await globalStore.budgetsStore.loadBudgets()
-      expect(globalStore.budgetsStore.budgets).toHaveLength(0)
-      expect(consoleErrorSpy).toHaveBeenCalledOnce()
-    })
-  })
-})

package/src/budgets/__tests__/Overview.test.tsx

@@ -1,38 +0,0 @@
-import { act } from 'react'
-
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-
-import { createMXTheme } from '@kyper/mui'
-
-import { GlobalDataProvider, GlobalStore } from '../../common'
-import { ThemeProvider } from '@mui/material/styles'
-import { Overview } from '../components/Overview'
-
-vi.mock('../api/BudgetsApi')
-
-describe('Testing Budgets Overview', () => {
-  let globalStore: GlobalStore
-  const theme = createMXTheme('light')
-
-  beforeEach(() => {
-    globalStore = new GlobalStore()
-    globalStore.initialize('/', '').finally()
-  })
-
-  it('renders successfully', async () => {
-    await act(async () =>
-      render(
-        <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
-          <ThemeProvider theme={theme}>
-            <Overview />
-          </ThemeProvider>
-        </GlobalDataProvider>,
-      ),
-    )
-
-    expect(screen.queryByText('Overview')).toBeInTheDocument()
-  })
-})

package/src/budgets/api/BudgetsApi.ts

@@ -1,43 +0,0 @@
-import { ApiEndpoints, type Budget, Category, Fetch } from '../../common'
-
-export class BudgetsApi {
-  fetchInstance: Fetch
-
-  constructor(endpoint: string, token: string) {
-    this.fetchInstance = new Fetch(endpoint, token)
-  }
-
-  addBudget = async (category: Category, amount: number, parentGuid: string | null = null) => {
-    return this.fetchInstance
-      .post(ApiEndpoints.BUDGETS, {
-        amount,
-        category_guid: category.guid,
-        category_name: category.name,
-        parent_guid: parentGuid,
-      })
-      .then((data) => data.budget)
-      .catch((error) => error)
-  }
-
-  deleteBudget = async (guid: string) => {
-    return this.fetchInstance.delete(`${ApiEndpoints.BUDGETS}/${guid}`).then((data) => data)
-  }
-
-  generateBudgets = async () => {
-    return this.fetchInstance.post(`${ApiEndpoints.BUDGETS}/generate`).then((data) => data)
-  }
-
-  getBudgets = async () => {
-    return this.fetchInstance
-      .get(ApiEndpoints.BUDGETS)
-      .then((data) => data.budgets)
-      .catch((error) => error)
-  }
-
-  updateBudget = async (budget: Budget) => {
-    return this.fetchInstance
-      .put(`${ApiEndpoints.BUDGETS}/${budget.guid}`, budget)
-      .then((data) => data.budget)
-      .catch((error) => error)
-  }
-}

package/src/budgets/api/__mocks__/BudgetsApi.ts

@@ -1,7 +0,0 @@
-import budgets from '../../../../mock/data/Budgets.json'
-
-export class BudgetsApi {
-  getBudgets() {
-    return budgets
-  }
-}

package/src/budgets/components/AddBudgets.tsx

@@ -1,50 +0,0 @@
-import { observer } from 'mobx-react-lite'
-
-import Box from '@mui/material/Box'
-import List from '@mui/material/List'
-import Stack from '@mui/material/Stack'
-
-import {
-  buildDynamicCopy,
-  type DetailedCategory,
-  useBudgetsStore,
-  useGlobalCopyStore,
-} from '../../common'
-
-import { Header } from './addbudget/Header'
-import { RecalculateBudgets } from './addbudget/RecalculateBudgets'
-import { UnbudgetedRow } from './addbudget/UnbudgetedRow'
-
-interface AddBudgetsProps {
-  onRecalculateBudgets?: () => void
-}
-
-export const AddBudgets = observer(({ onRecalculateBudgets }: AddBudgetsProps) => {
-  const { budgets: copy } = useGlobalCopyStore()
-  const { addBudget, setAlert, unbudgetedCategories } = useBudgetsStore()
-
-  const handleOnAddBudget = async (category: DetailedCategory, amount: number) => {
-    await addBudget(category, amount)
-    setAlert(buildDynamicCopy(copy.alert_budget_created, category.name) as string)
-  }
-
-  return (
-    <Stack>
-      <Header />
-
-      <Box bgcolor="background.paper">
-        <List>
-          {unbudgetedCategories.map((category) => (
-            <UnbudgetedRow
-              category={category}
-              key={category.guid}
-              onAddBudget={handleOnAddBudget}
-            />
-          ))}
-        </List>
-      </Box>
-
-      <RecalculateBudgets onRecalculateBudgets={onRecalculateBudgets} />
-    </Stack>
-  )
-})

package/src/budgets/components/BubbleBudgets.tsx

@@ -1,73 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Box from '@mui/material/Box'
-import Stack from '@mui/material/Stack'
-
-import {
-  type DetailedBudget,
-  ANALYTICS_EVENTS,
-  useBudgetsStore,
-  useEvent,
-  useGlobalUiStore,
-  useWidgetContainerProvider,
-  useCategoryStore,
-  Loader,
-  useScreenSize,
-} from '../../common'
-
-import BubbleChart from './BubbleChart'
-import ZeroState from './ZeroState'
-
-interface BubbleBudgetsProps {
-  height: number
-  isDraggable?: boolean
-  shouldShowZeroState: boolean
-  unavailableWidth?: number
-}
-
-export const BubbleBudgets: React.FC<BubbleBudgetsProps> = observer(
-  ({ height, isDraggable = false, shouldShowZeroState, unavailableWidth = 24 }) => {
-    const { onEvent } = useEvent()
-    const { setSelectedBudget } = useBudgetsStore()
-    const { isLoadingCategoryTotals } = useCategoryStore()
-    const { isInitialized } = useGlobalUiStore()
-    const { availableWidth } = useWidgetContainerProvider()
-    const { isMobile } = useScreenSize()
-
-    const width = React.useMemo(() => {
-      return availableWidth - unavailableWidth
-    }, [availableWidth])
-
-    const handleBubbleClick = (budget: DetailedBudget) => {
-      setSelectedBudget(budget)
-      onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_BUDGET_CATEGORY, {
-        budget_category: budget.category.name,
-        click_type: 'bubble',
-      })
-    }
-
-    if (isLoadingCategoryTotals) {
-      return (
-        <Stack alignItems="center" height={height} justifyContent="center" width={Math.abs(width)}>
-          <Loader />
-        </Stack>
-      )
-    }
-
-    return (
-      <Box ml={shouldShowZeroState || isMobile ? 0 : 24}>
-        {shouldShowZeroState || !isInitialized ? (
-          <ZeroState />
-        ) : (
-          <BubbleChart
-            height={height}
-            isDraggable={isDraggable}
-            onClick={handleBubbleClick}
-            width={width}
-          />
-        )}
-      </Box>
-    )
-  },
-)

package/src/budgets/components/BubbleChart.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-import { SimulationNodeDatum } from 'd3-force'
-
-import { DetailedBudget, useBudgetsStore } from '../../common'
-
-import { enableDrag, resize, simulate, SimulationType } from '../utils/BubblesSVG'
-import { Bubble } from './bubblechart/Bubble'
-
-export interface BubbleData extends DetailedBudget, SimulationNodeDatum {
-  radius: number
-}
-
-interface BubbleChartProps {
-  height: number
-  width: number
-  isDraggable?: boolean
-  onClick?: (budget: DetailedBudget) => void
-}
-
-let simulation: SimulationType
-
-const BubbleChart: React.FC<BubbleChartProps> = ({
-  height,
-  width,
-  isDraggable = false,
-  onClick = () => {},
-}) => {
-  const { detailedBudgets: budgets } = useBudgetsStore()
-
-  simulation = React.useMemo(() => simulate(budgets), [budgets])
-
-  React.useEffect(() => {
-    resize(simulation, height, width)
-
-    if (isDraggable) {
-      enableDrag(simulation)
-    }
-  }, [simulation, height, width])
-
-  return (
-    <svg height={height} style={{ overflow: 'visible' }} width={Math.abs(width)}>
-      {simulation.nodes().map((bubble) => (
-        <Bubble bubble={bubble} isDraggable={isDraggable} key={bubble.guid} onClick={onClick} />
-      ))}
-    </svg>
-  )
-}
-
-export default observer(BubbleChart)

package/src/budgets/components/BudgetDetailsDrawer.tsx

@@ -1,134 +0,0 @@
-import React from 'react'
-
-import { observer } from 'mobx-react-lite'
-
-import { Text } from '@kyper/mui'
-
-import {
-  type Budget,
-  type Transaction,
-  buildDynamicCopy,
-  Dialog,
-  Drawer,
-  useBudgetsStore,
-  useGlobalCopyStore,
-  useGlobalUiStore,
-  useTransactionStore,
-} from '../../common'
-
-import { BudgetDetails } from './budgetdetails/BudgetDetails'
-import { BudgetAmount } from './shared/BudgetAmount'
-
-export const BudgetDetailsDrawer = observer(() => {
-  const { selectedAccountGuids } = useGlobalUiStore()
-  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()
-  const {
-    dateRange,
-    deleteBudget,
-    selectedBudget,
-    selectedSubBudget,
-    setAlert,
-    setSelectedBudget,
-    updateBudget,
-  } = useBudgetsStore()
-  const { setFilter } = useTransactionStore()
-
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [isEditOpen, setIsEditOpen] = React.useState(false)
-  const [isDeleteOpen, setIsDeleteOpen] = React.useState(false)
-  const [amount, setAmount] = React.useState(``)
-
-  React.useEffect(() => {
-    if (selectedBudget && !selectedSubBudget) {
-      setAmount(`${selectedBudget.amount}`)
-      setIsOpen(true)
-      setFilter({
-        accounts: selectedAccountGuids,
-        dateRange: dateRange,
-        custom: (t: Transaction) =>
-          t.category_guid === selectedBudget.category_guid ||
-          t.top_level_category_guid === selectedBudget.category_guid,
-      })
-    }
-  }, [selectedBudget])
-
-  const handleUpdateBudget = async () => {
-    if (selectedBudget) {
-      await updateBudget({
-        ...selectedBudget,
-        amount: Number(amount),
-        percentage: (selectedBudget.category.totalAmount / Number(amount)) * 100,
-      } as Budget)
-
-      setAlert(buildDynamicCopy(copy.alert_budget_updated, selectedBudget.category.name) as string)
-    }
-  }
-
-  const handleDeleteBudget = async () => {
-    if (selectedBudget) {
-      await deleteBudget(selectedBudget.guid)
-      setAlert(buildDynamicCopy(copy.alert_budget_deleted, selectedBudget.category.name) as string)
-    }
-    setIsDeleteOpen(false)
-    handleClose()
-  }
-
-  const handleClose = () => {
-    setIsOpen(false)
-    // Wait for the close animation before set the selected budget
-    setTimeout(() => {
-      setSelectedBudget(undefined)
-    }, 250)
-  }
-
-  if (!selectedBudget) {
-    return undefined
-  }
-
-  return (
-    <React.Fragment>
-      <Drawer
-        ariaLabelClose={commonCopy.close_aria}
-        isOpen={isOpen}
-        onClose={handleClose}
-        onPrimaryAction={() => setIsEditOpen(true)}
-        onSecondaryAction={() => setIsDeleteOpen(true)}
-        primaryText={copy.details_edit_button}
-        secondaryColor="error"
-        secondaryText={copy.details_delete_button}
-        title={copy.details_title}
-      >
-        <BudgetDetails budget={selectedBudget} />
-      </Drawer>
-
-      <Dialog
-        copy={{ close_aria: commonCopy.close_aria, title: copy.details_edit_title }}
-        disablePrimaryButton={Number(amount) <= 0}
-        isOpen={isEditOpen}
-        onClose={() => setIsEditOpen(false)}
-        onPrimaryAction={handleUpdateBudget}
-        primaryText={copy.edit_save_button}
-      >
-        <BudgetAmount
-          amount={amount}
-          categoryName={selectedBudget.category.name}
-          onAmountChanged={setAmount}
-        />
-      </Dialog>
-
-      <Dialog
-        copy={{ close_aria: commonCopy.close_aria, title: copy.delete_title }}
-        isOpen={isDeleteOpen}
-        onClose={() => setIsDeleteOpen(false)}
-        onPrimaryAction={handleDeleteBudget}
-        primaryColor="error"
-        primaryText={copy.details_delete_button}
-        secondaryColor="secondary"
-      >
-        <Text variant="Paragraph">
-          {buildDynamicCopy(copy.delete_description, selectedBudget.category.name) as string}
-        </Text>
-      </Dialog>
-    </React.Fragment>
-  )
-})