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

package/src/recurringactivity/components/actions/FrequencyAction.tsx

@@ -0,0 +1,130 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+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 ListItemText from '@mui/material/ListItemText'
+
+import { Icon } from '@kyper/mui'
+
+import {
+  type Activity,
+  ActivityType,
+  DataRow,
+  Drawer,
+  RecurrenceTypes,
+  useEvent,
+  useGlobalCopyStore,
+  useRecurringActivityStore,
+} from '../../../common'
+
+import { updateExpense, updateIncome } from '../../util/updateActivity'
+
+interface FrequencyActionProps {
+  activity: Activity
+}
+
+const FrequencyAction: React.FC<FrequencyActionProps> = ({ activity }) => {
+  const { recurring: recurringCopy } = useGlobalCopyStore()
+  const { cashflowSequences, scheduledPayments, updateCashflowSequence, updateScheduledPayment } =
+    useRecurringActivityStore()
+
+  const { onEvent } = useEvent()
+  const [isOpen, setIsOpen] = React.useState(false)
+  const isIncome = activity.activityType === ActivityType.Income
+
+  const frequencies = [
+    { id: RecurrenceTypes.EveryWeek, label: recurringCopy.frequency_every_week },
+    { id: RecurrenceTypes.EveryOtherWeek, label: recurringCopy.frequency_every_other_week },
+    { id: RecurrenceTypes.EveryMonth, label: recurringCopy.frequency_every_month },
+    { id: RecurrenceTypes.EveryOtherMonth, label: recurringCopy.frequency_every_other_month },
+    { id: RecurrenceTypes.EveryQuarter, label: recurringCopy.frequency_every_quarter },
+    { id: RecurrenceTypes.EveryOtherQuarter, label: recurringCopy.frequency_every_other_quarter },
+    { id: RecurrenceTypes.EveryYear, label: recurringCopy.frequency_every_year },
+  ]
+
+  const handleOnClick = async (recurrenceType: RecurrenceTypes) => {
+    const updatedActivity = { ...activity, recurrenceType }
+
+    if (activity.activityType === ActivityType.Expense) {
+      const payment = scheduledPayments.find((sp) => sp.guid === activity.scheduledPaymentGuid)
+
+      if (payment) {
+        // update scheduled payment
+        await updateScheduledPayment(updateExpense(updatedActivity, payment))
+      }
+    } else {
+      const sequence = cashflowSequences.find((cs) => cs.guid === activity.sequenceGuid)
+
+      if (sequence) {
+        // update cashflow sequence
+        await updateCashflowSequence(updateIncome(updatedActivity, sequence))
+      }
+    }
+
+    setIsOpen(false)
+  }
+
+  const handleOpen = () => {
+    setIsOpen(true)
+    onEvent(
+      isIncome
+        ? 'recurring_transactions_widget_income_details_click_payment_schedule'
+        : 'recurring_transactions_widget_expense_details_click_payment_schedule',
+      {
+        transaction_guid: activity.transactionGuid,
+      },
+    )
+  }
+
+  const frequency = frequencies.find((f) => f.id === activity.recurrenceType)
+
+  return (
+    <>
+      <DataRow
+        iconName="sync"
+        label={recurringCopy.activity_schedule}
+        onClick={handleOpen}
+        value={frequency?.label || ''}
+      />
+      <Drawer
+        ariaLabelClose={recurringCopy.close_drawer_aria}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title={recurringCopy.frequency_title}
+      >
+        <List>
+          {frequencies
+            .filter(
+              (f) =>
+                // Filter out every other month and every other quarter when income since cashflow
+                // sequence doesn't support them
+                activity.activityType === ActivityType.Expense ||
+                (f.id !== RecurrenceTypes.EveryOtherMonth &&
+                  f.id !== RecurrenceTypes.EveryOtherQuarter),
+            )
+            .map((frequency) => (
+              <React.Fragment key={frequency.id}>
+                <ListItem disableGutters={true} disablePadding={true} key={frequency.id}>
+                  <ListItemButton onClick={() => handleOnClick(frequency.id)}>
+                    <ListItemText
+                      primary={frequency.label}
+                      primaryTypographyProps={{ fontWeight: 400 }}
+                    />
+                    {activity.recurrenceType === frequency.id && (
+                      <Icon color="primary" fill={true} name="check_circle" size={24} />
+                    )}
+                  </ListItemButton>
+                </ListItem>
+                <Divider />
+              </React.Fragment>
+            ))}
+        </List>
+      </Drawer>
+    </>
+  )
+}
+
+export default observer(FrequencyAction)

package/src/recurringactivity/components/actions/PaymentDateAction.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { startOfToday } from 'date-fns/startOfToday'
+
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+
+import {
+  type Activity,
+  ActivityType,
+  DATE_FORMATS_INTL,
+  DataRow,
+  Drawer,
+  formatDate,
+  useEvent,
+  useGlobalCopyStore,
+  useRecurringActivityStore,
+} from '../../../common'
+
+import { updateExpense, updateIncome } from '../../util/updateActivity'
+
+interface PaymentDateActionProps {
+  activity: Activity
+}
+
+const PaymentDateAction: React.FC<PaymentDateActionProps> = ({ activity }) => {
+  const { recurring: recurringCopy } = useGlobalCopyStore()
+  const { cashflowSequences, scheduledPayments, updateCashflowSequence, updateScheduledPayment } =
+    useRecurringActivityStore()
+
+  const { onEvent } = useEvent()
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [selected, setSelected] = React.useState(activity.expectedDate)
+  const isIncome = activity.activityType === ActivityType.Income
+
+  const handleOpen = () => {
+    setSelected(activity.expectedDate)
+    setIsOpen(true)
+    onEvent(
+      isIncome
+        ? 'recurring_transactions_widget_income_details_click_next_payment_due'
+        : 'recurring_transactions_widget_expense_details_click_next_payment_due',
+      {
+        transaction_guid: activity.transactionGuid,
+      },
+    )
+  }
+
+  const handleSave = async () => {
+    const updatedActivity = { ...activity, expectedDate: selected }
+
+    if (activity.activityType === ActivityType.Expense) {
+      const payment = scheduledPayments.find((sp) => sp.guid === activity.scheduledPaymentGuid)
+
+      if (payment) {
+        // update scheduled payment
+        await updateScheduledPayment(updateExpense(updatedActivity, payment))
+      }
+    } else {
+      const sequence = cashflowSequences.find((cs) => cs.guid === activity.sequenceGuid)
+
+      if (sequence) {
+        // update cashflow sequence
+        await updateCashflowSequence(updateIncome(updatedActivity, sequence))
+      }
+    }
+
+    setIsOpen(false)
+  }
+
+  return (
+    <>
+      <DataRow
+        iconName="calendar_month"
+        label={recurringCopy.activity_payment_date}
+        onClick={handleOpen}
+        value={formatDate(activity.expectedDate, DATE_FORMATS_INTL.MONTH_DAY_YEAR)}
+      />
+      <Drawer
+        ariaLabelClose={recurringCopy.close_drawer_aria}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onPrimaryAction={handleSave}
+        title={recurringCopy.activity_payment_date}
+      >
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <DateCalendar
+            minDate={startOfToday()}
+            onChange={(date) => setSelected(date)}
+            value={selected}
+          />
+        </LocalizationProvider>
+      </Drawer>
+    </>
+  )
+}
+
+export default observer(PaymentDateAction)

package/src/recurringactivity/components/activitycalendar/ActivityCalendar.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { addMonths } from 'date-fns/addMonths'
+import { endOfMonth } from 'date-fns/endOfMonth'
+import { getWeeksInMonth } from 'date-fns/getWeeksInMonth'
+import { startOfMonth } from 'date-fns/startOfMonth'
+
+import Stack from '@mui/material/Stack'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+
+import {
+  ANALYTICS_EVENTS,
+  TOUCH_TARGET,
+  useEvent,
+  useRecurringActivityStore,
+} from '../../../common'
+import ActivityDay from './ActivityDay'
+import Legend from './Legend'
+
+const HEADER_HEIGHT = 58
+
+const ActivityCalendar = () => {
+  const theme = useTheme()
+  const { onEvent } = useEvent()
+  const { selectedDay } = useRecurringActivityStore()
+  const [calendarHeight, setCalendarHeight] = React.useState(
+    getWeeksInMonth(new Date()) * TOUCH_TARGET + HEADER_HEIGHT,
+  )
+
+  const handleMonthChange = (date: Date) => {
+    setCalendarHeight(getWeeksInMonth(date) * TOUCH_TARGET + HEADER_HEIGHT)
+    onEvent(ANALYTICS_EVENTS.RECURRING_ACTIVITY_CLICK_CALENDAR_RIGHT)
+  }
+
+  const calendar = (
+    <DateCalendar
+      maxDate={endOfMonth(addMonths(new Date(), 1))}
+      minDate={startOfMonth(new Date())}
+      onMonthChange={handleMonthChange}
+      showDaysOutsideCurrentMonth={true}
+      slots={{
+        day: ActivityDay,
+      }}
+      sx={{
+        '& .MuiButtonBase-root.MuiPickersDay-root': {
+          borderRadius: '4px',
+          '&:focus, &:hover': {
+            borderRadius: '4px',
+          },
+        },
+        '& .MuiPickersCalendarHeader-root': {
+          mt: 0,
+          pl: 16,
+          pr: 8,
+        },
+        '& .MuiPickersCalendarHeader-label': {
+          fontSize: theme.typography.Body.fontSize,
+          fontWeight: 600,
+        },
+        '& .MuiDayCalendar-slideTransition': {
+          minHeight: calendarHeight,
+        },
+        '&.MuiDateCalendar-root': {
+          minHeight: calendarHeight + TOUCH_TARGET,
+        },
+        '& .MuiButtonBase-root, .MuiDayCalendar-weekDayLabel': {
+          height: TOUCH_TARGET,
+          width: TOUCH_TARGET,
+          margin: 0,
+        },
+        '& .MuiDayCalendar-weekDayLabel': {
+          fontFamily: theme.typography.H3.fontFamily,
+          fontSize: theme.typography.Small.fontSize,
+        },
+      }}
+      value={selectedDay}
+      views={['day']}
+    />
+  )
+
+  return (
+    <Stack justifyContent="center">
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        {/*NOTE: This seems odd, but because the DateCalendar cannot go from a controlled
+         /*      calendar to an un-controlled calendar, we have to create 2 different instances
+         /*      when there a selectedDay and when selectedDay is undefined */}
+        {selectedDay && calendar}
+        {!selectedDay && calendar}
+
+        <Legend />
+      </LocalizationProvider>
+    </Stack>
+  )
+}
+
+export default observer(ActivityCalendar)

package/src/recurringactivity/components/activitycalendar/ActivityDay.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { isSameDay } from 'date-fns/isSameDay'
+
+import Badge from '@mui/material/Badge'
+import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay'
+
+import {
+  ActivityStatus,
+  ActivityType,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+  useRecurringActivityStore,
+} from '../../../common'
+import { IncomeBadge, MissedBadge, PaidBadge, UpcomingExpenseBadge } from '../ActivityBadges'
+
+const ActivityDay: React.FC<PickersDayProps<Date>> = ({ day, outsideCurrentMonth, ...other }) => {
+  const { recurring: recurringCopy } = useGlobalCopyStore()
+  const { selectedAccountGuids } = useGlobalUiStore()
+  const { activities, setSelectedDay } = useRecurringActivityStore()
+
+  const filteredActivities = React.useMemo(
+    () =>
+      activities.filter((activity) => selectedAccountGuids.includes(activity.accountGuid || '')),
+    [selectedAccountGuids, activities],
+  )
+
+  const dayActivities = filteredActivities.filter((a) =>
+    isSameDay(a.occurredOnDate || a.expectedDate, day),
+  )
+  const hasUpcoming = dayActivities.some(
+    (a) => a.activityType === ActivityType.Expense && a.activityStatus === ActivityStatus.Upcoming,
+  )
+  const hasMissed = dayActivities.some(
+    (a) => a.activityType === ActivityType.Expense && a.activityStatus === ActivityStatus.Missed,
+  )
+  const hasPaid = dayActivities.some(
+    (a) => a.activityType === ActivityType.Expense && a.activityStatus === ActivityStatus.Paid,
+  )
+  const hasIncome = dayActivities.some((a) => a.activityType === ActivityType.Income)
+
+  const totalBadges =
+    (hasUpcoming ? 1 : 0) + (hasMissed ? 1 : 0) + (hasPaid ? 1 : 0) + (hasIncome ? 1 : 0)
+
+  return (
+    <Badge
+      badgeContent={
+        dayActivities.length > 0 && (
+          <>
+            {hasMissed && <MissedBadge isOffset={true} />}
+            {hasPaid && <PaidBadge isOffset={true} />}
+            {hasUpcoming && <UpcomingExpenseBadge isOffset={true} />}
+            {hasIncome && <IncomeBadge isOffset={true} />}
+          </>
+        )
+      }
+      overlap="circular"
+      sx={{
+        '& .MuiBadge-badge': {
+          padding: 0,
+          marginRight: `${(totalBadges - 1) * 6 + 1}px`,
+          flexWrap: 'nowrap',
+        },
+      }}
+    >
+      <PickersDay
+        aria-label={`
+          ${hasPaid && recurringCopy.paid}, 
+          ${hasMissed && recurringCopy.missed}, 
+          ${hasUpcoming && recurringCopy.upcoming}, 
+          ${hasIncome && recurringCopy.income}`}
+        day={day}
+        onClick={() => setSelectedDay(day)}
+        outsideCurrentMonth={outsideCurrentMonth}
+        sx={{
+          '&.MuiPickersDay-root': {
+            ...(outsideCurrentMonth && {
+              color: 'text.disabled',
+            }),
+          },
+        }}
+        {...other}
+      />
+    </Badge>
+  )
+}
+
+export default observer(ActivityDay)

package/src/recurringactivity/components/activitycalendar/Legend.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Stack from '@mui/material/Stack'
+
+import { Text } from '@kyper/mui'
+import { IncomeBadge, MissedBadge, PaidBadge, UpcomingExpenseBadge } from '../ActivityBadges'
+import { useGlobalCopyStore } from '../../../common'
+
+interface SymbolProps {
+  icon: any
+  label: string
+}
+
+const Symbol: React.FC<SymbolProps> = ({ icon: Icon, label }) => (
+  <Stack alignItems="center" flexDirection="row" sx={{ gap: 6 }}>
+    <Icon />
+    <Text variant="XSmall">{label}</Text>
+  </Stack>
+)
+
+const Legend = () => {
+  const { recurring: recurringCopy } = useGlobalCopyStore()
+
+  return (
+    <Stack
+      alignItems="center"
+      aria-hidden={true}
+      flexDirection="row"
+      gap={16}
+      justifyContent="center"
+      mt={12}
+    >
+      <Symbol icon={UpcomingExpenseBadge} label={recurringCopy.expense} />
+      <Symbol icon={IncomeBadge} label={recurringCopy.income} />
+      <Symbol icon={MissedBadge} label={recurringCopy.missed} />
+      <Symbol icon={PaidBadge} label={recurringCopy.paid} />
+    </Stack>
+  )
+}
+
+export default observer(Legend)

package/src/recurringactivity/components/shared/ActivitySettings.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+
+import ManageExpenses from './activitysettings/ManageExpenses'
+import ManageIncome from './activitysettings/ManageIncome'
+import { useEvent, useGlobalCopyStore } from '../../../common'
+
+const ActivitySettings = () => {
+  const [selectedTab, setSelectedTab] = React.useState(0)
+  const { onEvent } = useEvent()
+  const { recurring: recurringCopy } = useGlobalCopyStore()
+
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setSelectedTab(newValue)
+    onEvent(
+      newValue === 0
+        ? 'recurring_transactions_widget_manage_expenses'
+        : 'recurring_transactions_widget_edit_income',
+    )
+  }
+
+  return (
+    <Box bgcolor="background.default" height="100%">
+      <Tabs
+        onChange={handleTabChange}
+        sx={{ bgcolor: 'background.paper' }}
+        value={selectedTab}
+        variant="fullWidth"
+      >
+        <Tab label={recurringCopy.manage_expenses} />
+        <Tab label={recurringCopy.manage_income} />
+      </Tabs>
+      {selectedTab === 0 && <ManageExpenses />}
+      {selectedTab === 1 && <ManageIncome />}
+    </Box>
+  )
+}
+
+export default observer(ActivitySettings)

package/src/recurringactivity/components/shared/activitysettings/AddActivity.tsx

@@ -0,0 +1,175 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Divider from '@mui/material/Divider'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import Stack from '@mui/material/Stack'
+
+import { Icon, Text } from '@kyper/mui'
+
+import {
+  type Transaction,
+  Drawer,
+  RecurrenceTypes,
+  useGlobalCopyStore,
+  useRecurringActivityStore,
+  useTransactionStore,
+} from '../../../../common'
+
+import {
+  buildNewCashflowEvent,
+  buildNewCashflowSequence,
+  buildNewScheduledPayment,
+} from '../../../util/buildNewActivity'
+
+import SelectTransaction from './SelectTransaction'
+import AddActivityDetails from './AddActivityDetails'
+import {
+  expenseFilter,
+  expenseFilterSearch,
+  incomeFilter,
+  incomeFilterSearch,
+} from '../../../../transactions/utils/Filters'
+
+interface AddActivityProps {
+  isIncome?: boolean
+  label: string
+  onAddActivity?: () => void
+}
+
+const AddActivity: React.FC<AddActivityProps> = ({
+  isIncome = false,
+  label,
+  onAddActivity = () => null,
+}) => {
+  const { recurring: recurringCopy } = useGlobalCopyStore()
+  const { addCashflowEvent, addCashflowSequence, addScheduledPayment } = useRecurringActivityStore()
+
+  const { filter, setFilter, transactions } = useTransactionStore()
+
+  const [isSelectTransactionOpen, setIsSelectTransactionOpen] = React.useState(false)
+  const [transactionGuid, setTransactionGuid] = React.useState('')
+  const [frequency, setFrequency] = React.useState(RecurrenceTypes.EveryMonth)
+  const [nextDate, setNextDate] = React.useState<Date | null>(null)
+
+  const transaction = React.useMemo(
+    () => transactions.find((t) => t.guid === transactionGuid),
+    [transactionGuid],
+  )
+
+  const handleOpen = () => {
+    setIsSelectTransactionOpen(true)
+
+    if (isIncome) {
+      setFilter({ ...filter, custom: incomeFilter })
+    } else {
+      setFilter({ ...filter, custom: expenseFilter })
+    }
+  }
+
+  const handleAddActivity = async () => {
+    onAddActivity()
+
+    if (!transaction || !nextDate) {
+      closeOnAdd()
+      return
+    }
+
+    if (isIncome) {
+      // Create CashflowSequence & CashflowEvent if Income
+      const sequence = buildNewCashflowSequence(transaction, frequency, nextDate)
+
+      const newSequence = await addCashflowSequence(sequence)
+      if (newSequence) {
+        const event = buildNewCashflowEvent(newSequence, transaction)
+        await addCashflowEvent(event)
+      }
+    } else {
+      // Create ScheduledPayment if Expense
+      const payment = buildNewScheduledPayment(transaction, frequency, nextDate)
+      await addScheduledPayment(payment, transaction)
+    }
+
+    closeOnAdd()
+  }
+
+  const closeOnAdd = () => {
+    setTransactionGuid('')
+    setIsSelectTransactionOpen(false)
+  }
+
+  return (
+    <Box>
+      <ListItem disableGutters={true} disablePadding={true}>
+        <ListItemButton onClick={handleOpen}>
+          <ListItemText>
+            <Stack alignItems="center" direction="row" justifyContent="space-between">
+              <Stack alignItems="center" direction="row" gap={8}>
+                <Icon fill={true} name="add_box" size={24} sx={{ color: 'action.active' }} />
+                <Text bold={true} sx={{ color: 'action.active' }} variant="Body">
+                  {label}
+                </Text>
+              </Stack>
+              <Icon name="chevron_right" size={24} sx={{ color: 'primary.light' }} />
+            </Stack>
+          </ListItemText>
+        </ListItemButton>
+      </ListItem>
+      <Divider />
+
+      <Drawer
+        ariaLabelClose={recurringCopy.close_drawer_aria}
+        isOpen={isSelectTransactionOpen}
+        onClose={() => setIsSelectTransactionOpen(false)}
+        title={label}
+      >
+        <SelectTransaction
+          description={
+            isIncome ? recurringCopy.add_income_description : recurringCopy.add_expense_description
+          }
+          onSearch={(searchValue) => {
+            setFilter({
+              ...filter,
+              custom: (transaction: Transaction) => {
+                if (isIncome) {
+                  return searchValue
+                    ? incomeFilterSearch(transaction, searchValue)
+                    : incomeFilter(transaction)
+                } else {
+                  return searchValue
+                    ? expenseFilterSearch(transaction, searchValue)
+                    : expenseFilter(transaction)
+                }
+              },
+            })
+          }}
+          onSelected={(guid) => setTransactionGuid(guid)}
+        />
+      </Drawer>
+
+      <Drawer
+        ariaLabelClose={recurringCopy.close_drawer_aria}
+        isOpen={Boolean(transactionGuid)}
+        onClose={() => setTransactionGuid('')}
+        onPrimaryAction={handleAddActivity}
+        title={isIncome ? recurringCopy.income_details : recurringCopy.expense_details}
+      >
+        {transaction && (
+          <AddActivityDetails
+            frequency={frequency}
+            isIncome={isIncome}
+            nextDate={nextDate}
+            onFrequencyChange={setFrequency}
+            onNextDateChange={setNextDate}
+            transaction={transaction}
+          />
+        )}
+      </Drawer>
+    </Box>
+  )
+}
+
+export default observer(AddActivity)