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

package/src/recurringactivity/components/ActivityList.tsx

@@ -1,141 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Button from '@mui/material/Button'
-import Divider from '@mui/material/Divider'
-import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
-import ListSubheader from '@mui/material/ListSubheader'
-import Stack from '@mui/material/Stack'
-import { SxProps } from '@mui/material/styles'
-
-import { Text } from '@kyper/mui'
-
-import { type Activity, DATE_FORMATS_INTL, formatDate, useGlobalCopyStore } from '../../common'
-import ActivityRow from './ActivityRow'
-
-interface ActivityListProps {
-  activities: Activity[]
-  isMini?: boolean
-  onResetClick?: () => void
-  onActivityClick?: (activity: Activity) => void
-  sx?: SxProps
-  title?: string
-}
-
-interface GroupedActivity {
-  activities: Activity[]
-  id: string
-  expectedDate: Date
-}
-
-const groupActivitiesByDate = (activities: Activity[]): GroupedActivity[] => {
-  return activities.reduce((groupedActivities: GroupedActivity[], activity) => {
-    const dateString = activity.expectedDate.toISOString().split('T')[0]
-    const existingGroup = groupedActivities.find(
-      (group) => group.expectedDate.toString() === activity.expectedDate.toString(),
-    )
-
-    if (existingGroup) {
-      existingGroup.activities.push(activity)
-    } else {
-      groupedActivities.push({
-        expectedDate: activity.expectedDate,
-        id: `date-${dateString}`,
-        activities: [activity],
-      })
-    }
-
-    return groupedActivities
-  }, [])
-}
-
-const ActivityList: React.FC<ActivityListProps> = ({
-  activities,
-  isMini = false,
-  onResetClick,
-  onActivityClick,
-  sx = {},
-  title,
-}) => {
-  const { recurring: recurringCopy } = useGlobalCopyStore()
-  const groupedActivities = groupActivitiesByDate(activities)
-
-  return (
-    <Stack gap={8} mt={4} sx={sx}>
-      {title && (
-        <Stack alignItems="top" direction="row" justifyContent="space-between" px={24}>
-          <Text bold={true} variant="Body">
-            {title}
-          </Text>
-          {onResetClick && (
-            <Button onClick={onResetClick} sx={{ mt: -12 }} variant="text">
-              {recurringCopy.reset}
-            </Button>
-          )}
-        </Stack>
-      )}
-
-      {activities.length === 0 ? (
-        <Text fontStyle="italic" py={24} sx={{ textAlign: 'center' }}>
-          {recurringCopy.no_activities}
-        </Text>
-      ) : (
-        <List>
-          {isMini
-            ? activities.map((item, index) => (
-                <>
-                  <ActivityRow
-                    activity={item}
-                    isMini={isMini}
-                    key={item.expectedDate.toString() + index}
-                    onActivityClick={onActivityClick}
-                  />
-                  <Divider sx={{ mx: 24 }} />
-                </>
-              ))
-            : groupedActivities.map((day) => {
-                return (
-                  <>
-                    <ListItem key={day.id}>
-                      <List
-                        subheader={
-                          <ListSubheader sx={{ bgcolor: 'background.paper', ml: 8, pb: 4, pt: 12 }}>
-                            <Text bold={true} variant="XSmall">
-                              {formatDate(
-                                day.activities[0].occurredOnDate || day.activities[0].expectedDate,
-                                DATE_FORMATS_INTL.DAY_OF_WEEK_MONTH_DAY,
-                              )}
-                            </Text>
-                          </ListSubheader>
-                        }
-                        sx={{ width: '100%' }}
-                      >
-                        {day.activities.map((activity: Activity, i: number) => {
-                          return (
-                            <>
-                              <ActivityRow
-                                activity={activity}
-                                isMini={isMini}
-                                key={activity.expectedDate.toString() + i}
-                                onActivityClick={onActivityClick}
-                              />
-                              {i !== day.activities.length - 1 && (
-                                <Divider sx={{ ml: 64, mr: 24 }} />
-                              )}
-                            </>
-                          )
-                        })}
-                      </List>
-                    </ListItem>
-                    <Divider sx={{ mx: 24 }} />
-                  </>
-                )
-              })}
-        </List>
-      )}
-    </Stack>
-  )
-}
-
-export default observer(ActivityList)

package/src/recurringactivity/components/ActivityRow.tsx

@@ -1,161 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import ListItem from '@mui/material/ListItem'
-import ListItemAvatar from '@mui/material/ListItemAvatar'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemText from '@mui/material/ListItemText'
-import Stack from '@mui/material/Stack'
-
-import { Icon, InstitutionLogo, MerchantLogo, Text } from '@kyper/mui'
-
-import {
-  type Activity,
-  ActivityStatus,
-  ActivityType,
-  Drawer,
-  formatCurrency,
-  useGlobalCopyStore,
-} from '../../common'
-
-import ActivityDetails from './ActivityDetails'
-import { IncomeBadge, MissedBadge, PaidBadge, UpcomingExpenseBadge } from './ActivityBadges'
-import { getRecurrence } from '../util/getRecurrence'
-import { getStatus } from '../util/getStatus'
-
-const getStatusIcon = (activity: Activity): React.ReactNode => {
-  if (activity.activityType === ActivityType.Income) {
-    return <IncomeBadge />
-  }
-
-  switch (activity.activityStatus) {
-    case ActivityStatus.Missed:
-      return <MissedBadge />
-    case ActivityStatus.Paid:
-      return <PaidBadge />
-    default:
-      return <UpcomingExpenseBadge />
-  }
-}
-
-interface ActivityRowProps {
-  activity: Activity
-  isMini?: boolean
-  onActivityClick?: (activity: Activity) => void
-  showOrdinal?: boolean
-}
-
-const ActivityRow: React.FC<ActivityRowProps> = ({
-  activity,
-  isMini = false,
-  onActivityClick = () => {},
-  showOrdinal = false,
-}) => {
-  const { recurring: recurringCopy } = useGlobalCopyStore()
-
-  // Use a guid rather than a boolean to force the drawer to close properly
-  const [openGuid, setOpenGuid] = React.useState('')
-
-  const isCredit = activity.activityType === ActivityType.Income
-  const isPaid = activity.activityStatus === ActivityStatus.Paid
-  const isMissed = activity.activityStatus === ActivityStatus.Missed
-  const isUpcoming = activity.activityStatus === ActivityStatus.Upcoming
-
-  let status = recurringCopy.paid?.toLowerCase()
-  if (isMissed) {
-    status = recurringCopy.missed?.toLowerCase()
-  } else if (isUpcoming) {
-    status = showOrdinal
-      ? getRecurrence({
-          copy: recurringCopy,
-          date: activity.expectedDate,
-          type: activity.recurrenceType,
-        })
-      : getRecurrence({ copy: recurringCopy, date: null, type: activity.recurrenceType })
-  }
-
-  const onItemClick = () => {
-    setOpenGuid(activity.sequenceGuid || activity.scheduledPaymentGuid || '')
-    onActivityClick(activity)
-  }
-
-  return (
-    <ListItem disableGutters={true} disablePadding={true}>
-      <ListItemButton onClick={onItemClick}>
-        <ListItemAvatar>
-          <MerchantLogo
-            categoryGuid={activity.categoryGuid || ''}
-            merchantGuid={activity.merchantGuid || ''}
-          />
-        </ListItemAvatar>
-        <ListItemText>
-          <Stack direction="row" sx={{ textOverflow: 'ellipsis', textWrap: 'nowrap' }}>
-            <Stack direction="column" maxWidth="60%">
-              <Text bold={true} variant="Body">
-                {activity.name}
-              </Text>
-              <Stack alignItems="center" direction="row" gap={6}>
-                {isMini ? (
-                  <Stack direction="row" gap={4}>
-                    {getStatusIcon(activity)}
-                    <Text variant="XSmall">{getStatus(activity, recurringCopy)}</Text>
-                  </Stack>
-                ) : (
-                  <>
-                    {activity.institutionGuid && (
-                      <InstitutionLogo
-                        alt={activity.institution || ''}
-                        institutionGuid={activity.institutionGuid}
-                        size={12}
-                      />
-                    )}
-                    <Text variant="XSmall">{activity.institution}</Text>
-                  </>
-                )}
-              </Stack>
-            </Stack>
-
-            <Stack
-              alignItems="center"
-              direction="row"
-              flexGrow={1}
-              gap={8}
-              justifyContent="flex-end"
-            >
-              <Stack alignItems="flex-end">
-                <Text bold={true} color={isCredit ? 'success.main' : 'text.primary'} variant="Body">
-                  {isCredit ? '+' : ''}
-                  {formatCurrency(activity.amount, '0,0.00')}
-                </Text>
-                {!isMini && (
-                  <Stack alignItems="center" direction="row" gap={6} textTransform="uppercase">
-                    {isPaid && <Icon color="success" fill={true} name="check_circle" size={12} />}
-                    {isMissed && <Icon color="error" fill={true} name="cancel" size={12} />}
-                    <Text bold={true} color="secondary.light" variant="XSmall">
-                      {status}
-                    </Text>
-                  </Stack>
-                )}
-              </Stack>
-            </Stack>
-          </Stack>
-        </ListItemText>
-      </ListItemButton>
-
-      <Drawer
-        ariaLabelClose={recurringCopy.close_drawer_aria}
-        isOpen={openGuid === activity.sequenceGuid || openGuid === activity.scheduledPaymentGuid}
-        onClose={() => setOpenGuid('')}
-        title={
-          activity.activityType !== ActivityType.Income
-            ? recurringCopy.expense_details
-            : recurringCopy.income_details
-        }
-      >
-        <ActivityDetails activity={activity} onDeleted={() => setOpenGuid('')} />
-      </Drawer>
-    </ListItem>
-  )
-}
-
-export default observer(ActivityRow)

package/src/recurringactivity/components/ActivityStatus.tsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import Stack from '@mui/material/Stack'
-import useTheme from '@mui/material/styles/useTheme'
-
-import { Icon, Text } from '@kyper/mui'
-
-import { formatCurrency, StatusBar, useGlobalCopyStore } from '../../common'
-
-interface ActivityStatusProps {
-  title: string
-  expected: number
-  paid: number
-  missed?: number
-  total: number
-  onNewClick?: () => void
-}
-
-const ActivityStatus: React.FC<ActivityStatusProps> = ({
-  title,
-  expected,
-  paid,
-  missed,
-  total,
-  onNewClick,
-}) => {
-  const { recurring: recurringCopy } = useGlobalCopyStore()
-  const theme = useTheme()
-
-  const data = React.useMemo(() => {
-    const activity = [{ color: theme.palette.success.main, percentage: `${paid / expected}` }]
-    if (missed) {
-      activity.push({ color: theme.palette.error.main, percentage: `${missed / expected}` })
-    }
-    return activity
-  }, [paid, expected, missed])
-
-  return (
-    <Box px={24}>
-      <Stack direction="row" justifyContent="space-between">
-        <Box>
-          <Text bold={true} variant="Body">
-            {`${total} ${title}`}
-          </Text>
-          <Stack direction="row" gap={2} mb={8}>
-            <Text bold={true} variant="XSmall">
-              {formatCurrency(paid, '0,0.00')}
-            </Text>
-            <Text variant="XSmall">{recurringCopy.paid?.toLowerCase()}</Text>
-
-            {missed !== undefined && (
-              <>
-                <Text variant="XSmall">/</Text>
-                <Text bold={true} variant="XSmall">
-                  {formatCurrency(missed, '0,0.00')}
-                </Text>
-                <Text variant="XSmall">{recurringCopy.missed?.toLowerCase()}</Text>
-              </>
-            )}
-
-            <Text variant="XSmall">/</Text>
-            <Text bold={true} variant="XSmall">
-              {formatCurrency(expected, '0,0.00')}
-            </Text>
-            <Text variant="XSmall">{recurringCopy.expected}</Text>
-          </Stack>
-        </Box>
-        {onNewClick && (
-          <Button onClick={onNewClick} startIcon={<Icon name="add" />} variant="text">
-            {recurringCopy.add_new}
-          </Button>
-        )}
-      </Stack>
-      <StatusBar data={data} />
-    </Box>
-  )
-}
-
-export default observer(ActivityStatus)

package/src/recurringactivity/components/MiniWidgetContent.tsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Divider from '@mui/material/Divider'
-import Stack from '@mui/material/Stack'
-
-import {
-  buildDynamicCopy,
-  DATE_FORMATS_INTL,
-  formatDate,
-  MiniWidgetProps,
-  useGlobalCopyStore,
-  useGlobalUiStore,
-  useRecurringActivityStore,
-  useWidgetContainerProvider,
-} from '../../common'
-
-import ActivityCalendar from './activitycalendar/ActivityCalendar'
-import ActivityList from './ActivityList'
-
-const MiniWidgetContent: React.FC<MiniWidgetProps> = () => {
-  const { recurring: recurringCopy } = useGlobalCopyStore()
-  const { selectedAccountGuids } = useGlobalUiStore()
-  const { selectedDay, selectedDayActivities, setSelectedDay, upcomingActivities } =
-    useRecurringActivityStore()
-
-  const filteredUpcomingActivities = React.useMemo(
-    () =>
-      upcomingActivities.filter((activity) =>
-        selectedAccountGuids.includes(activity.accountGuid || ''),
-      ),
-    [selectedAccountGuids, upcomingActivities],
-  )
-
-  const { availableWidth } = useWidgetContainerProvider()
-
-  const isSmall = availableWidth < 750
-
-  return (
-    <Stack flexDirection={isSmall ? 'column' : 'row'} width="100%">
-      <ActivityCalendar />
-      {!isSmall && <Divider flexItem={true} orientation="vertical" sx={{ my: 16, ml: 16 }} />}
-      <ActivityList
-        activities={selectedDayActivities || filteredUpcomingActivities.slice(0, 4)}
-        isMini={true}
-        onResetClick={selectedDay ? () => setSelectedDay(selectedDay) : undefined}
-        sx={{ width: isSmall ? '100%' : 'calc(100% - 336px)', mt: 12 }}
-        title={
-          selectedDay
-            ? (buildDynamicCopy(
-                recurringCopy.day_transactions,
-                formatDate(selectedDay, DATE_FORMATS_INTL.MONTH_DAY),
-              ) as string)
-            : recurringCopy.upcoming_activity
-        }
-      />
-    </Stack>
-  )
-}
-
-export default observer(MiniWidgetContent)

package/src/recurringactivity/components/RecurringActivity.tsx

@@ -1,165 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Box from '@mui/material/Box'
-import Grid from '@mui/material/Unstable_Grid2'
-import Stack from '@mui/material/Stack'
-import Tab from '@mui/material/Tab'
-import Tabs from '@mui/material/Tabs'
-
-import { Text } from '@kyper/mui'
-
-import {
-  Activity,
-  ANALYTICS_EVENTS,
-  buildDynamicCopy,
-  DATE_FORMATS_INTL,
-  formatDate,
-  useEvent,
-  useGlobalCopyStore,
-  useRecurringActivityStore,
-  useScreenSize,
-} from '../../common'
-
-import {
-  dateFilter,
-  expenseFilter,
-  incomeFilter,
-  totalReducer,
-} from '../util/RecurringActivityUtils'
-
-import ActivityCalendar from './activitycalendar/ActivityCalendar'
-import ActivityList from './ActivityList'
-import ActivityStatus from './ActivityStatus'
-
-const RecurringActivity = () => {
-  const { recurring: recurringCopy } = useGlobalCopyStore()
-  const { isMobile, isSmallTablet } = useScreenSize()
-
-  const {
-    activities,
-    missedActivities,
-    paidActivities,
-    selectedDay,
-    selectedDayActivities,
-    setSelectedDay,
-    upcomingActivities,
-  } = useRecurringActivityStore()
-
-  const [selectedTab, setSelectedTab] = React.useState(0)
-  const { onEvent } = useEvent()
-
-  const all = activities.filter(dateFilter)
-  const paid = paidActivities.filter(dateFilter)
-  const missed = missedActivities.filter(dateFilter)
-
-  const expenseExpected = all.filter(expenseFilter).reduce(totalReducer, 0)
-  const expensePaid = paid.filter(expenseFilter).reduce(totalReducer, 0)
-  const expenseMissed = missed.filter(expenseFilter).reduce(totalReducer, 0)
-  const numExpenses = all.filter(expenseFilter).length
-
-  const incomeExpected = all.filter(incomeFilter).reduce(totalReducer, 0)
-  const incomePaid = paid.filter(incomeFilter).reduce(totalReducer, 0)
-  const numIncome = all.filter(incomeFilter).length
-
-  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
-    setSelectedTab(newValue)
-  }
-
-  const onUpcomingActivityClick = (activity: Activity) => {
-    onEvent(ANALYTICS_EVENTS.RECURRING_ACTIVITY_CLICK_UPCOMING, {
-      transaction_guid: activity.transactionGuid,
-    })
-  }
-
-  const onPaidActivityClick = (activity: Activity) => {
-    onEvent(ANALYTICS_EVENTS.RECURRING_ACTIVITY_CLICK_PAID, {
-      transaction_guid: activity.transactionGuid,
-    })
-  }
-
-  return (
-    <Grid container={true} pt={16} px={24} spacing={24}>
-      <Grid md={true} sm={12}>
-        <Stack gap={24}>
-          <ActivityStatus
-            expected={expenseExpected}
-            missed={expenseMissed}
-            //onNewClick={() => {}} // TODO: Replace with function to add new expense
-            paid={expensePaid}
-            title={recurringCopy.expenses}
-            total={numExpenses}
-          />
-          <ActivityStatus
-            expected={incomeExpected}
-            //onNewClick={() => {}} // TODO: Replace with function to add new income
-            paid={incomePaid}
-            title={recurringCopy.deposits}
-            total={numIncome}
-          />
-
-          {!isSmallTablet && !isMobile && (
-            <ActivityList
-              activities={upcomingActivities}
-              onActivityClick={onUpcomingActivityClick}
-              title={recurringCopy.upcoming_activity}
-            />
-          )}
-
-          {(isSmallTablet || isMobile) && (
-            <Box>
-              <Tabs onChange={handleTabChange} value={selectedTab} variant="fullWidth">
-                <Tab
-                  label={
-                    <Text bold={true} sx={{ textTransform: 'none' }} variant="Body">
-                      {recurringCopy.upcoming_activity}
-                    </Text>
-                  }
-                />
-                <Tab
-                  label={
-                    <Text bold={true} sx={{ textTransform: 'none' }} variant="Body">
-                      {recurringCopy.paid_activity}
-                    </Text>
-                  }
-                />
-              </Tabs>
-              {selectedTab === 0 && (
-                <ActivityList
-                  activities={upcomingActivities}
-                  onActivityClick={onUpcomingActivityClick}
-                />
-              )}
-              {selectedTab === 1 && (
-                <ActivityList activities={paid} onActivityClick={onPaidActivityClick} />
-              )}
-            </Box>
-          )}
-        </Stack>
-      </Grid>
-
-      {!isSmallTablet && !isMobile && (
-        <Grid sx={{ minWidth: 450 }} xs="auto">
-          <Stack gap={35}>
-            <ActivityCalendar />
-            <ActivityList
-              activities={selectedDayActivities || paid}
-              onActivityClick={onPaidActivityClick}
-              onResetClick={selectedDay ? () => setSelectedDay(selectedDay) : undefined}
-              title={
-                selectedDay
-                  ? (buildDynamicCopy(
-                      recurringCopy.day_transactions,
-                      formatDate(selectedDay, DATE_FORMATS_INTL.MONTH_DAY),
-                    ) as string)
-                  : recurringCopy.paid_activity
-              }
-            />
-          </Stack>
-        </Grid>
-      )}
-    </Grid>
-  )
-}
-
-export default observer(RecurringActivity)