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

package/src/common/constants/DateFormats.ts

@@ -0,0 +1,122 @@
+import { intlFormat } from 'date-fns/intlFormat'
+import { getLocale } from '../utils'
+
+export const ORDINAL_DATE_FORMAT = 'do'
+export const ORDINAL_MONTH_DAY_YEAR_FORMAT = 'MMM do, yyyy'
+
+// Documentation on the options for formatting int'l dates
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+export const DATE_FORMATS_INTL = {
+  TIME_STAMP_HOUR_MINUTE: {
+    hour: 'numeric',
+    minute: 'numeric',
+  },
+  DAY: {
+    day: 'numeric',
+  },
+  DAY_OF_WEEK: {
+    weekday: 'long',
+  },
+  DAY_OF_WEEK_MONTH_DAY: {
+    day: 'numeric',
+    month: 'long',
+    weekday: 'long',
+  },
+  FULL_MONTH_DAY: {
+    day: 'numeric',
+    month: 'long',
+  },
+  MONTH: {
+    month: 'short',
+  },
+  MONTH_DAY: {
+    day: 'numeric',
+    month: 'short',
+  },
+  MONTH_LONG: {
+    month: 'long',
+  },
+  MONTH_SHORT: {
+    month: 'short',
+  },
+  MONTH_SHORT_YEAR: {
+    month: 'short',
+    year: 'numeric',
+  },
+  MONTH_YEAR: {
+    month: 'long',
+    year: 'numeric',
+  },
+  YEAR_MONTH_DAY: {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  },
+  MONTH_DAY_YEAR: {
+    month: 'short',
+    day: '2-digit',
+    year: 'numeric',
+  },
+  MED_MONTH_SHORT_DAY_FULL_YEAR: {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  },
+}
+
+export interface Day {
+  day: string
+}
+
+export interface DayOfWeek {
+  weekday: string
+}
+
+export interface DayOfWeekMonthDay {
+  day: string
+  month: string
+  weekday: string
+}
+
+export interface MonthDay {
+  day: string
+  month: string
+}
+
+export interface MonthLong {
+  month: string
+}
+
+export interface MonthShort {
+  month: string
+}
+
+export interface MonthYear {
+  month: string
+  year: string
+}
+
+export interface TimeStamp {
+  hour: string
+  minute: string
+}
+
+export interface YearMonthDay {
+  day: string
+  month: string
+  year: string
+}
+
+export const formatDate = (
+  date: string | Date,
+  dFormat:
+    | Day
+    | DayOfWeek
+    | DayOfWeekMonthDay
+    | MonthDay
+    | MonthLong
+    | MonthShort
+    | MonthYear
+    | TimeStamp
+    | YearMonthDay,
+) => intlFormat(new Date(date), Object.assign(dFormat), { locale: getLocale() })

package/src/common/constants/Donut.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_DONUT_SIZE = 48
+export const DEFAULT_STROKE_WIDTH = 4

package/src/common/constants/Numbers.ts

@@ -0,0 +1,6 @@
+export const MAX_MONEY_INPUT = 99999999.99
+
+export enum CurrencyCodes {
+  CAD = 'CAD',
+  USD = 'USD',
+}

package/src/common/constants/ScheduledPayment.ts

@@ -0,0 +1,21 @@
+export enum RecurrenceTypes {
+  Unknown = 0,
+  EveryWeek = 1,
+  EveryOtherWeek = 2,
+  EveryMonth = 3,
+  EveryOtherMonth = 4,
+  EveryQuarter = 5,
+  EveryOtherQuarter = 6,
+  EveryYear = 7,
+}
+
+export const RECURRENCE_COPY = [
+  { id: RecurrenceTypes.Unknown, copy: 'frequency_unknown' },
+  { id: RecurrenceTypes.EveryWeek, copy: 'frequency_every_week' },
+  { id: RecurrenceTypes.EveryOtherWeek, copy: 'frequency_every_other_week' },
+  { id: RecurrenceTypes.EveryMonth, copy: 'frequency_every_month' },
+  { id: RecurrenceTypes.EveryOtherMonth, copy: 'frequency_every_other_month' },
+  { id: RecurrenceTypes.EveryQuarter, copy: 'frequency_every_quarter' },
+  { id: RecurrenceTypes.EveryOtherQuarter, copy: 'frequency_every_other_quarter' },
+  { id: RecurrenceTypes.EveryYear, copy: 'frequency_every_year' },
+]

package/src/common/constants/Sizes.ts

@@ -0,0 +1,7 @@
+export const enum Sizes {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+}
+
+export const TOUCH_TARGET = 44

package/src/common/constants/SpendingPlan.ts

@@ -0,0 +1,17 @@
+export const LOADING_STATUS = {
+  ERROR: 'ERROR',
+  LOADING: 'LOADING',
+  SUCCESS: 'SUCCESS',
+}
+
+export enum PlanTypes {
+  SpendingPlan = 0,
+  Budgets = 1,
+}
+
+export enum IterationItemTypes {
+  RecurringExpense = 0,
+  PlannedExpense = 1,
+  Other = 2,
+  Income = 3,
+}

package/src/common/constants/Table.ts

@@ -0,0 +1,13 @@
+export const TABLE_CONST = {
+  ASC: 'ASC',
+  DESC: 'DESC',
+  DIRECTION: {
+    ASC: 'ascending',
+    DESC: 'descending',
+  },
+  ALIGN: {
+    center: 'center',
+    left: 'flex-start',
+    right: 'flex-end',
+  },
+}

package/src/common/constants/index.ts

@@ -0,0 +1,21 @@
+export { ApiEndpoints } from './ApiEndpoints'
+export { ANALYTICS_EVENTS } from './Analytics'
+export {
+  DATE_FORMATS_INTL,
+  formatDate,
+  ORDINAL_DATE_FORMAT,
+  ORDINAL_MONTH_DAY_YEAR_FORMAT,
+} from './DateFormats'
+export { INCOME_ACCOUNT_TYPES, PAYMENT_ACCOUNT_TYPES, SPENDING_ACCOUNT_TYPES } from './Account'
+export {
+  CategoryColors,
+  CategoryGuids,
+  CategoryGuidToName,
+  CategoryIcon,
+  PaymentCategories,
+} from './Category'
+export { CurrencyCodes } from './Numbers'
+export { RecurrenceTypes, RECURRENCE_COPY } from './ScheduledPayment'
+export { IterationItemTypes, LOADING_STATUS, PlanTypes } from './SpendingPlan'
+export { DEFAULT_DONUT_SIZE, DEFAULT_STROKE_WIDTH } from './Donut'
+export { Sizes, TOUCH_TARGET } from './Sizes'

package/src/common/context/GlobalDataProvider.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { GlobalStore } from '..'
+
+export interface GlobalStoreContextTypes {
+  children: React.ReactNode
+  onEvent: (event: string, props?: object) => void
+  onPageView: (pageViewEvent: string) => void
+  globalStore: GlobalStore
+}
+export const GlobalDataContext = React.createContext<GlobalStoreContextTypes | null>(null)
+
+export const GlobalDataProvider: React.FC<React.PropsWithChildren<GlobalStoreContextTypes>> = ({
+  children,
+  globalStore,
+  onEvent,
+  onPageView,
+}) => {
+  return (
+    <GlobalDataContext.Provider
+      value={{
+        globalStore,
+        onEvent,
+        onPageView,
+        children,
+      }}
+    >
+      {children}
+    </GlobalDataContext.Provider>
+  )
+}

package/src/common/context/WidgetContainerProvider.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+export interface WidgetContainerContextTypes {
+  children: React.ReactNode
+  availableHeight: number
+  availableWidth: number
+}
+export const WidgetContainerContext = React.createContext<WidgetContainerContextTypes | null>(null)
+
+export const WidgetContainerProvider: React.FC<
+  React.PropsWithChildren<WidgetContainerContextTypes>
+> = ({ children, availableHeight, availableWidth }) => {
+  return (
+    <WidgetContainerContext.Provider
+      value={{
+        availableHeight,
+        availableWidth,
+        children,
+      }}
+    >
+      {children}
+    </WidgetContainerContext.Provider>
+  )
+}

package/src/common/context/__mocks__/GlobalDataProvider.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { ThemeProvider } from '@mui/material'
+
+import { createMXTheme } from '@kyper/mui'
+
+import { GlobalDataProvider } from '../index'
+import { GlobalStore } from '../../stores/GlobalStore'
+
+interface DataProviderProps {
+  globalStore: GlobalStore
+}
+
+const DataProvider: React.FC<React.PropsWithChildren<DataProviderProps>> = ({
+  children,
+  globalStore,
+}) => {
+  return (
+    <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+      <ThemeProvider theme={createMXTheme('light')}>{children}</ThemeProvider>
+    </GlobalDataProvider>
+  )
+}
+
+export default DataProvider

package/src/common/context/hooks.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { GlobalDataContext } from './GlobalDataProvider'
+import { WidgetContainerContext } from './WidgetContainerProvider'
+
+export const useGlobalDataContext = (providerName = 'useGlobalStore') => {
+  const context = React.useContext(GlobalDataContext)
+
+  if (!context) {
+    throw new Error(`${providerName}() must be used within the GlobalDataContext`)
+  }
+
+  return context
+}
+
+export const useAccountStore = () =>
+  useGlobalDataContext('useAccountStore').globalStore.accountStore
+export const useBudgetsStore = () =>
+  useGlobalDataContext('useBudgetsStore').globalStore.budgetsStore
+export const useCashflowStore = () =>
+  useGlobalDataContext('useCashflowStore').globalStore.cashflowStore
+export const useCategoryStore = () =>
+  useGlobalDataContext('useCategoryStore').globalStore.categoryStore
+export const useConnectStore = () =>
+  useGlobalDataContext('useConnectStore').globalStore.connectStore
+export const useDebtStore = () => useGlobalDataContext('useDebtsStore').globalStore.debtsStore
+export const useGlobalStore = () => useGlobalDataContext('useGlobalStore').globalStore
+export const useGlobalUiStore = () =>
+  useGlobalDataContext('useGlobalUiStore').globalStore.globalUiStore
+export const useGlobalCopyStore = () =>
+  useGlobalDataContext('globalCopyStore').globalStore.copyStore.copy
+export const useGoalStore = () => useGlobalDataContext('useGoalStore').globalStore.goalStore
+export const useMerchantStore = () =>
+  useGlobalDataContext('useMerchantStore').globalStore.merchantStore
+export const useNetWorthStore = () =>
+  useGlobalDataContext('useNetWorthStore').globalStore.netWorthStore
+export const useNotificationStore = () =>
+  useGlobalDataContext('useNotificationStore').globalStore.notificationStore
+export const useRecurringActivityStore = () =>
+  useGlobalDataContext('useRecurringActivityStore').globalStore.recurringActivityStore
+export const useTransactionStore = () =>
+  useGlobalDataContext('useTransactionStore').globalStore.transactionStore
+export const useUserStore = () => useGlobalDataContext('useUserStore').globalStore.userStore
+
+export const useEvent = () => ({ onEvent: useGlobalDataContext().onEvent })
+export const usePageView = () => ({ onPageView: useGlobalDataContext().onPageView })
+
+export const useWidgetContainerContext = (providerName = 'useWidgetContainerContext') => {
+  const context = React.useContext(WidgetContainerContext)
+
+  if (!context) {
+    throw new Error(`${providerName}() must be used within the WidgetContainerContext`)
+  }
+
+  return context
+}
+
+export const useWidgetContainerProvider = () => useWidgetContainerContext()

package/src/common/context/index.ts

@@ -0,0 +1,22 @@
+export {
+  useAccountStore,
+  useBudgetsStore,
+  useCashflowStore,
+  useCategoryStore,
+  useDebtStore,
+  useEvent,
+  useGlobalStore,
+  useGlobalUiStore,
+  useGlobalCopyStore,
+  useGoalStore,
+  useMerchantStore,
+  useNetWorthStore,
+  useNotificationStore,
+  usePageView,
+  useRecurringActivityStore,
+  useTransactionStore,
+  useUserStore,
+  useWidgetContainerProvider,
+} from './hooks'
+export { GlobalDataContext, GlobalDataProvider } from './GlobalDataProvider'
+export { WidgetContainerContext, WidgetContainerProvider } from './WidgetContainerProvider'

package/src/common/hooks/__tests__/useDimensions.test.tsx

@@ -0,0 +1,190 @@
+import { act } from 'react'
+import { renderHook } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { useDimensions } from '../useDimensions'
+
+describe('useDimensions', () => {
+  let resizeObserverMock: {
+    observe: ReturnType<typeof vi.fn>
+    disconnect: ReturnType<typeof vi.fn>
+    unobserve: ReturnType<typeof vi.fn>
+  }
+  let resizeObserverCallback: ResizeObserverCallback
+
+  beforeEach(() => {
+    resizeObserverMock = {
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+      unobserve: vi.fn(),
+    }
+
+    vi.stubGlobal(
+      'ResizeObserver',
+      vi.fn((callback: ResizeObserverCallback) => {
+        resizeObserverCallback = callback
+        return resizeObserverMock
+      }),
+    )
+
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('should initialize with default dimensions', () => {
+    const { result } = renderHook(() => useDimensions())
+    const [, dimensions] = result.current
+
+    expect(dimensions).toEqual({ width: 0, height: 0 })
+  })
+
+  it('should create a ResizeObserver when ref is set', () => {
+    const { result } = renderHook(() => useDimensions())
+    const [ref] = result.current
+
+    const mockElement = document.createElement('div')
+    act(() => {
+      ref(mockElement)
+    })
+
+    expect(vi.mocked(ResizeObserver)).toHaveBeenCalledTimes(1)
+    expect(resizeObserverMock.observe).toHaveBeenCalledWith(mockElement)
+  })
+
+  it('should update dimensions after debounce delay', async () => {
+    const { result } = renderHook(() => useDimensions(50))
+    const [ref] = result.current
+
+    const mockElement = document.createElement('div')
+    act(() => {
+      ref(mockElement)
+    })
+
+    act(() => {
+      resizeObserverCallback(
+        [
+          {
+            target: mockElement,
+            borderBoxSize: [{ inlineSize: 100, blockSize: 200 }],
+            contentBoxSize: [],
+            contentRect: {} as DOMRectReadOnly,
+            devicePixelContentBoxSize: [],
+          },
+        ],
+        resizeObserverMock as ResizeObserver,
+      )
+    })
+
+    await act(async () => {
+      vi.advanceTimersByTime(50)
+    })
+
+    const [, dimensions] = result.current
+    expect(dimensions).toEqual({ width: 100, height: 200 })
+  })
+
+  it('should update dimensions only when size changes', async () => {
+    const { result } = renderHook(() => useDimensions(50))
+    const [ref] = result.current
+
+    const mockElement = document.createElement('div')
+    act(() => {
+      ref(mockElement)
+    })
+
+    // Initial size
+    act(() => {
+      resizeObserverCallback(
+        [
+          {
+            target: mockElement,
+            borderBoxSize: [{ inlineSize: 100, blockSize: 200 }],
+            contentBoxSize: [],
+            contentRect: {} as DOMRectReadOnly,
+            devicePixelContentBoxSize: [],
+          },
+        ],
+        global.resizeObserverMock as unknown as ResizeObserver,
+      )
+    })
+
+    await act(async () => {
+      vi.advanceTimersByTime(50)
+    })
+
+    const [, initialDimensions] = result.current
+    expect(initialDimensions).toEqual({ width: 100, height: 200 })
+
+    // Change size
+    act(() => {
+      resizeObserverCallback(
+        [
+          {
+            target: mockElement,
+            borderBoxSize: [{ inlineSize: 150, blockSize: 250 }],
+            contentBoxSize: [],
+            contentRect: {} as DOMRectReadOnly,
+            devicePixelContentBoxSize: [],
+          },
+        ],
+        global.resizeObserverMock as unknown as ResizeObserver,
+      )
+    })
+
+    await act(async () => {
+      vi.advanceTimersByTime(50)
+    })
+
+    const [, updatedDimensions] = result.current
+    expect(updatedDimensions).toEqual({ width: 150, height: 250 })
+  })
+
+  it('should disconnect observer when component unmounts', () => {
+    const { result, unmount } = renderHook(() => useDimensions())
+    const [ref] = result.current
+
+    const mockElement = document.createElement('div')
+    act(() => {
+      ref(mockElement)
+    })
+
+    unmount()
+
+    expect(resizeObserverMock.disconnect).toHaveBeenCalledTimes(1)
+  })
+
+  it('should handle null ref', () => {
+    const { result } = renderHook(() => useDimensions())
+    const [ref] = result.current
+
+    act(() => {
+      ref(null)
+    })
+
+    expect(global.ResizeObserver).not.toHaveBeenCalled()
+  })
+
+  it('should disconnect previous observer when ref changes', () => {
+    const { result } = renderHook(() => useDimensions())
+    const [ref] = result.current
+
+    const mockElement1 = document.createElement('div')
+    const mockElement2 = document.createElement('div')
+
+    act(() => {
+      ref(mockElement1)
+    })
+
+    expect(resizeObserverMock.observe).toHaveBeenCalledWith(mockElement1)
+
+    act(() => {
+      ref(mockElement2)
+    })
+
+    expect(resizeObserverMock.disconnect).toHaveBeenCalledTimes(1)
+    expect(resizeObserverMock.observe).toHaveBeenCalledWith(mockElement2)
+  })
+})

package/src/common/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useCombineEvents, useCombinePageviews } from './useCombineEvents'
+export { useScreenSize } from './useScreenSize'
+export { usePrevious } from './usePrevious'

package/src/common/hooks/useCombineEvents.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import { AnalyticEventFunction, AnalyticPageviewFunction } from '../types'
+
+export const useCombineEvents = (events: AnalyticEventFunction[], store: any) => {
+  const { session } = store
+
+  const storeEvents = Object.values(store).reduce((acc: AnalyticEventFunction[], curr: any) => {
+    if (session && curr?.onAnalyticEvent && typeof curr?.onAnalyticEvent === 'function') {
+      return [...acc, curr.onAnalyticEvent]
+    }
+
+    return acc
+  }, [])
+  const eventFunctions = [...events, ...storeEvents]
+
+  return React.useMemo(() => {
+    return (event: string) => {
+      eventFunctions.forEach((e) => {
+        if (!session) {
+          e(event)
+        } else {
+          e(event, session)
+        }
+      })
+    }
+  }, [events, session])
+}
+
+export const useCombinePageviews = (pages: AnalyticPageviewFunction[], store: any) => {
+  const { session } = store
+
+  const storeEvents = Object.values(store).reduce((acc: AnalyticPageviewFunction[], curr: any) => {
+    if (session && curr?.onAnalyticPageView && typeof curr?.onAnalyticPageView === 'function') {
+      return [...acc, curr.onAnalyticPageView]
+    }
+
+    return acc
+  }, [])
+  const eventFunctions = [...pages, ...storeEvents]
+
+  return React.useMemo(() => {
+    return (event: string) => {
+      eventFunctions.forEach((e) => {
+        if (!session) {
+          e(event)
+        } else {
+          e(event, session)
+        }
+      })
+    }
+  }, [pages, session])
+}