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

package/src/budgets/BubbleBudgetsWidget.tsx

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

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

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

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

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

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

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

package/src/budgets/components/AddBudgets.tsx

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

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

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

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