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

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

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

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

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

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

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

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

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