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

package/src/notifications/constants/NotificationConstants.ts

@@ -0,0 +1,104 @@
+import { ApiEndpoints } from '../../common'
+
+export enum NotificationType {
+  BudgetExceeded = 1,
+  BudgetOffTarget = 2,
+  DebtPaymentReminder = 3,
+  GuideMeStepComplete = 4, //deprecated: unused
+  GuideMeOffTarget = 5, //deprecated: unused
+  AccountBalanceLow = 6,
+  AccountDepositLarge = 7,
+  TransactionExpenseLarge = 8,
+  TransactionFeeCharge = 9,
+  SystemNotification = 10, //deprecated: unused
+  ApiNotification = 11,
+  UserSummary = 12,
+  Offer = 13,
+  PasswordResetToken = 14,
+  PasswordChanged = 15,
+  EmailVerification = 16,
+  EmailVerified = 17,
+  WelcomeNewUser = 18,
+  DeviceCreated = 19,
+  DeviceDeleted = 20,
+  SmsVerification = 21,
+  AccountNearingZero = 22,
+  InternationalTransaction = 23,
+  GoalProgress = 25,
+  DuplicatePayment = 29,
+}
+
+export const NOTIFICATION_DETAILS = {
+  [NotificationType.BudgetExceeded]: {
+    type: 'Exceeded Budget',
+    icon: 'attention',
+  },
+  [NotificationType.BudgetOffTarget]: {
+    type: 'Projected to Exceed Budget',
+    icon: 'attention',
+  },
+  [NotificationType.DebtPaymentReminder]: {
+    type: 'Payment Reminder',
+    icon: 'calendar-plus',
+  },
+  [NotificationType.AccountBalanceLow]: {
+    type: 'Low Account Balance',
+    icon: 'attention',
+  },
+  [NotificationType.AccountDepositLarge]: {
+    type: 'Large Deposit',
+    icon: 'cash',
+  },
+  [NotificationType.TransactionExpenseLarge]: {
+    type: 'Large Expense/Withdrawal',
+    icon: 'attention',
+  },
+  [NotificationType.TransactionFeeCharge]: {
+    type: 'Fee Charged',
+    icon: 'attention',
+  },
+  [NotificationType.ApiNotification]: {
+    type: 'API Notification',
+    icon: 'info',
+  },
+  [NotificationType.UserSummary]: {
+    type: 'Weekly Summary',
+    icon: 'info',
+  },
+  [NotificationType.Offer]: {
+    type: 'Special Message',
+    icon: '',
+  },
+  [NotificationType.InternationalTransaction]: {
+    type: 'International Transaction',
+    icon: 'attention',
+  },
+}
+
+export const NOTIFICATION_ICON = {
+  1: 'check-skinny',
+  2: 'credit-card',
+  3: 'savings',
+  4: 'debts',
+  5: 'money-banknote',
+}
+
+export const getNotificationDetailRoute = (notificationType: number) => {
+  switch (notificationType) {
+    case NotificationType.BudgetExceeded:
+    case NotificationType.BudgetOffTarget:
+      return ApiEndpoints.BUDGETS
+    case NotificationType.DebtPaymentReminder:
+    case NotificationType.AccountBalanceLow:
+    case NotificationType.AccountDepositLarge:
+    case NotificationType.AccountNearingZero:
+      return ApiEndpoints.ACCOUNTS
+    case NotificationType.TransactionExpenseLarge:
+    case NotificationType.TransactionFeeCharge:
+    case NotificationType.InternationalTransaction:
+    case NotificationType.DuplicatePayment:
+      return ApiEndpoints.TRANSACTIONS
+    default:
+      return null
+  }
+}

package/src/notifications/index.ts

@@ -0,0 +1,3 @@
+export { getNotificationDetailRoute } from './constants/NotificationConstants'
+export { NotificationStore } from './stores/NotificationStore'
+export { default as NotificationList } from './components/NotificationList'

package/src/notifications/stores/NotificationStore.ts

@@ -0,0 +1,62 @@
+import { makeAutoObservable, observable, runInAction } from 'mobx'
+
+import { NotificationApi, type Notification } from '../../common'
+
+function filterRecentNotifications(notifications: Notification[]): Notification[] {
+  const SEVEN_DAYS_IN_SECONDS = 7 * 24 * 60 * 60
+  const currentTime = Math.floor(Date.now() / 1000)
+
+  return notifications.filter((notification: Notification) => {
+    const deliveredAt = notification.delivered_at
+    return currentTime - deliveredAt <= SEVEN_DAYS_IN_SECONDS
+  })
+}
+
+export class NotificationStore {
+  api = new NotificationApi('/', '')
+  isLoading: boolean = true
+  notifications: Notification[] = []
+  recentNotifications: Notification[] = []
+
+  constructor() {
+    makeAutoObservable(this, { notifications: observable })
+  }
+
+  initialize = async (endpoint: string, token: string) => {
+    this.api = new NotificationApi(endpoint, token)
+    await this.loadNotifications()
+  }
+
+  get newNotifications(): Notification[] {
+    return this.recentNotifications.filter((n) => !n.has_been_viewed)
+  }
+
+  loadNotifications = async () => {
+    try {
+      this.isLoading = true
+      const data = await this.api.getNotifications()
+
+      runInAction(() => {
+        this.notifications = data
+        this.recentNotifications = filterRecentNotifications(data)
+        this.isLoading = false
+      })
+    } catch (error) {
+      console.error(`Error occurred while loading notifications: ${error}`)
+    }
+  }
+
+  markAllAsViewed = async () => {
+    // Optimistically update the UI
+    this.notifications.forEach((n) => (n.has_been_viewed = true))
+    // Update on the server
+    // (NOTE: The notifications/mark_all_as_viewed endpoint is broken, but still returns 202)
+    await this.api.markAllAsViewed()
+    await this.loadNotifications()
+  }
+
+  updateNotification = async (notification: Notification) => {
+    notification.has_been_viewed = true
+    await this.api.updateNotification(notification)
+  }
+}

package/src/notifications/utils/NotificationUtils.ts

@@ -0,0 +1,21 @@
+import { fromUnixTime, isSameDay } from 'date-fns'
+
+import { Notification } from '../../common'
+
+export const sortByDate = (a: Notification, b: Notification) => {
+  return b.delivered_at - a.delivered_at
+}
+
+export const shouldShowDate = (index: number, notifications: Notification[]) => {
+  const currentDate = fromUnixTime(notifications[index].delivered_at)
+  const previousDate = fromUnixTime(notifications[index - 1]?.delivered_at)
+
+  return !isSameDay(currentDate, previousDate)
+}
+
+export const hasInsetBorder = (index: number, notifications: Notification[]) => {
+  const currentDate = fromUnixTime(notifications[index].delivered_at)
+  const nextDate = fromUnixTime(notifications[index + 1]?.delivered_at)
+
+  return isSameDay(currentDate, nextDate)
+}

package/src/recurringactivity/RecurringActivityMiniWidget.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { endOfToday } from 'date-fns/endOfToday'
+import { startOfToday } from 'date-fns/startOfToday'
+import { subDays } from 'date-fns/subDays'
+
+import {
+  MiniWidgetContainer,
+  MiniWidgetProps,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+  useTransactionStore,
+} from '../common'
+
+import MiniWidgetContent from './components/MiniWidgetContent'
+
+const RecurringActivityMiniWidget: React.FC<MiniWidgetProps> = ({ onPrimaryCtaClick, sx }) => {
+  const { recurring: recurringCopy } = useGlobalCopyStore()
+  const { isInitialized, selectedAccountGuids } = useGlobalUiStore()
+  const { setFilter } = useTransactionStore()
+
+  React.useEffect(() => {
+    if (isInitialized) {
+      setFilter({
+        dateRange: { start: subDays(startOfToday(), 90), end: endOfToday() },
+        accounts: selectedAccountGuids,
+      })
+    }
+  }, [isInitialized, selectedAccountGuids])
+
+  return (
+    <MiniWidgetContainer
+      className="mx-exp-upcoming-activity-miniwidget"
+      onPrimaryCtaClick={onPrimaryCtaClick}
+      primaryCtaLabel={recurringCopy.primary_cta}
+      subTitle={recurringCopy.sub_title}
+      sx={sx}
+      title={recurringCopy.mini_title}
+    >
+      <MiniWidgetContent />
+    </MiniWidgetContainer>
+  )
+}
+
+export default observer(RecurringActivityMiniWidget)

package/src/recurringactivity/RecurringActivityWidget.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { endOfToday } from 'date-fns/endOfToday'
+import { startOfToday } from 'date-fns/startOfToday'
+import { subDays } from 'date-fns/subDays'
+
+import Stack from '@mui/material/Stack'
+import Skeleton from '@mui/material/Skeleton'
+
+import {
+  ANALYTICS_EVENTS,
+  Drawer,
+  useAccountStore,
+  useEvent,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+  useRecurringActivityStore,
+  useTransactionStore,
+  WidgetContainer,
+  WidgetProps,
+} from '../common'
+
+import ActivitySettings from './components/shared/ActivitySettings'
+import RecurringActivity from './components/RecurringActivity'
+
+const RecurringActivityWidget: React.FC<WidgetProps> = ({ onBackClick, sx = {} }) => {
+  const { accounts } = useAccountStore()
+  const { recurring: recurringCopy } = useGlobalCopyStore()
+  const { isInitialized, selectedAccountGuids, setSelectedAccounts } = useGlobalUiStore()
+  const { setFilter } = useTransactionStore()
+  const { isLoading } = useRecurringActivityStore()
+  const { onEvent } = useEvent()
+
+  React.useEffect(() => {
+    setSelectedAccounts(accounts)
+  }, [accounts])
+
+  React.useEffect(() => {
+    if (isInitialized) {
+      setFilter({
+        dateRange: { start: subDays(startOfToday(), 90), end: endOfToday() },
+        accounts: selectedAccountGuids,
+      })
+    }
+  }, [isInitialized, selectedAccountGuids])
+
+  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false)
+
+  return (
+    <WidgetContainer
+      accountOptions={accounts}
+      actions={[
+        {
+          label: recurringCopy.settings,
+          iconName: 'settings',
+          onClick: () => {
+            setIsSettingsOpen(true)
+            onEvent(ANALYTICS_EVENTS.RECURRING_ACTIVITY_CLICK_SETTINGS)
+          },
+        },
+      ]}
+      onAccountsFilterClick={() => onEvent(ANALYTICS_EVENTS.RECURRING_ACTIVITY_CLICK_FILTER)}
+      onBackClick={onBackClick}
+      sx={sx}
+      title={recurringCopy.title}
+    >
+      {isInitialized || !isLoading ? (
+        <RecurringActivity />
+      ) : (
+        <Stack direction="column" p={48} spacing={24}>
+          <Skeleton height={100} variant="rounded" width="100%" />
+          <Skeleton height={100} variant="rounded" width="100%" />
+          <Skeleton height={600} variant="rounded" width="100%" />
+        </Stack>
+      )}
+      <Drawer
+        ariaLabelClose={recurringCopy.close_drawer_aria}
+        isOpen={isSettingsOpen}
+        onClose={() => setIsSettingsOpen(false)}
+        shouldShowHeaderBorders={false}
+        title={recurringCopy.settings}
+      >
+        <ActivitySettings />
+      </Drawer>
+    </WidgetContainer>
+  )
+}
+
+export default observer(RecurringActivityWidget)

package/src/recurringactivity/__tests__/BuildActivities.test.ts

@@ -0,0 +1,30 @@
+import { buildActivities } from '../util/buildActivities'
+import { RecurringActivityTestData } from '../../../mock/unittestdata/RecurringActivityTestData'
+import {
+  Account,
+  ActivityStatus,
+  CashflowEvent,
+  CashflowSequence,
+  ScheduledPayment,
+  Transaction,
+} from '../../common'
+
+describe('Testing the buildActivities util', () => {
+  it('should build a list of activities given required data', () => {
+    const activities = buildActivities(
+      RecurringActivityTestData.accounts as Account[],
+      RecurringActivityTestData.events as CashflowEvent[],
+      RecurringActivityTestData.payments as ScheduledPayment[],
+      RecurringActivityTestData.projected as CashflowEvent[],
+      RecurringActivityTestData.sequences as CashflowSequence[],
+      RecurringActivityTestData.transactions as Transaction[],
+    )
+
+    const paid = activities.filter((a) => a.activityStatus === ActivityStatus.Paid)
+    const upcoming = activities.filter((a) => a.activityStatus === ActivityStatus.Upcoming)
+
+    expect(activities.length).toBe(3)
+    expect(paid.length).toBe(1)
+    expect(upcoming.length).toBe(2)
+  })
+})

package/src/recurringactivity/__tests__/BuildNewActivity.test.ts

@@ -0,0 +1,59 @@
+import { RecurringActivityTestData } from '../../../mock/unittestdata/RecurringActivityTestData'
+import {
+  buildNewCashflowEvent,
+  buildNewCashflowSequence,
+  buildNewScheduledPayment,
+} from '../util/buildNewActivity'
+import { RecurrenceTypes, Transaction } from '../../common'
+import { addMonths } from 'date-fns/addMonths'
+import { fromUnixTime } from 'date-fns/fromUnixTime'
+
+describe('Testing the build new activity util', () => {
+  it('should create a new cashflow sequence', () => {
+    const transaction = RecurringActivityTestData.transactions.find(
+      (t) => t.guid === 'TRN-003',
+    ) as Transaction
+
+    expect(transaction).toBeDefined()
+
+    if (!transaction) return
+
+    const nextDate = addMonths(fromUnixTime(transaction.date), 1)
+    const sequence = buildNewCashflowSequence(transaction, RecurrenceTypes.EveryMonth, nextDate)
+
+    expect(sequence).toBeDefined()
+    expect(sequence.repeat_interval).toBeNull()
+    expect(sequence.repeat_day).toBe(`${nextDate.getDate()}`)
+  })
+
+  it('should create a new cashflow event', () => {
+    const transaction = RecurringActivityTestData.transactions.find(
+      (t) => t.guid === 'TRN-003',
+    ) as Transaction
+    expect(transaction).toBeDefined()
+
+    if (!transaction) return
+
+    const nextDate = addMonths(fromUnixTime(transaction.date), 1)
+    const sequence = buildNewCashflowSequence(transaction, RecurrenceTypes.EveryMonth, nextDate)
+    expect(sequence).toBeDefined()
+
+    const event = buildNewCashflowEvent(sequence, transaction)
+    expect(event).toBeDefined()
+  })
+
+  it('should create a new scheduled payment', () => {
+    const transaction = RecurringActivityTestData.transactions.find(
+      (t) => t.guid === 'TRN-004',
+    ) as Transaction
+    expect(transaction).toBeDefined()
+
+    if (!transaction) return
+
+    const nextDate = addMonths(fromUnixTime(transaction.date), 1)
+    const payment = buildNewScheduledPayment(transaction, RecurrenceTypes.EveryMonth, nextDate)
+
+    expect(payment).toBeDefined()
+    expect(payment.recurrence_day).toBe(nextDate.getDate())
+  })
+})

package/src/recurringactivity/__tests__/RecurringActivityWidget.test.tsx

@@ -0,0 +1,33 @@
+import { beforeEach } from 'vitest'
+import { act, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { GlobalDataProvider, GlobalStore } from '../../common'
+import { ThemeProvider } from '@mui/material/styles'
+import { createMXTheme } from '@kyper/mui'
+import RecurringActivityWidget from '../RecurringActivityWidget'
+
+const globalStore = new GlobalStore()
+
+describe('Testing the Recurring Activity Widget', () => {
+  beforeEach(() => {
+    globalStore.initialize('/', '').finally()
+  })
+
+  it('should display the recurring activity widget', async () => {
+    await act(async () =>
+      render(
+        <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+          <ThemeProvider theme={createMXTheme('light')}>
+            <RecurringActivityWidget />
+          </ThemeProvider>
+        </GlobalDataProvider>,
+      ),
+    )
+
+    const headings = screen.getAllByRole('heading')
+    expect(headings[0]).toHaveTextContent('Recurring Transactions')
+
+    // screen.debug()
+  })
+})

package/src/recurringactivity/components/ActivityBadges.tsx

@@ -0,0 +1,40 @@
+import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled'
+import MonetizationOnIcon from '@mui/icons-material/MonetizationOn'
+import CancelIcon from '@mui/icons-material/Cancel'
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+
+import IconBacking from '../../common/components/IconBacking'
+
+const iconStyle = {
+  gridRow: 1,
+  gridColumn: 1,
+  zIndex: 2,
+}
+
+const offsetStyle = (isOffset: boolean) => {
+  return isOffset ? { margin: '0 0 -6px -4px' } : undefined
+}
+
+export const UpcomingExpenseBadge = ({ isOffset = false, size = 16 }) => (
+  <IconBacking size={size} sx={{ ...offsetStyle(isOffset) }}>
+    <AccessTimeFilledIcon color="primary" sx={{ fontSize: size, ...iconStyle }} />
+  </IconBacking>
+)
+
+export const IncomeBadge = ({ isOffset = false, size = 16 }) => (
+  <IconBacking size={size} sx={{ ...offsetStyle(isOffset) }}>
+    <MonetizationOnIcon sx={{ color: 'categories.income', fontSize: size, ...iconStyle }} />
+  </IconBacking>
+)
+
+export const MissedBadge = ({ isOffset = false, size = 16 }) => (
+  <IconBacking size={size} sx={{ ...offsetStyle(isOffset) }}>
+    <CancelIcon color="error" sx={{ fontSize: size, ...iconStyle }} />
+  </IconBacking>
+)
+
+export const PaidBadge = ({ isOffset = false, size = 16 }) => (
+  <IconBacking size={size} sx={{ ...offsetStyle(isOffset) }}>
+    <CheckCircleIcon color="success" sx={{ fontSize: size, ...iconStyle }} />
+  </IconBacking>
+)

package/src/recurringactivity/components/ActivityDetails.tsx

@@ -0,0 +1,196 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { endOfMonth } from 'date-fns/endOfMonth'
+import { startOfToday } from 'date-fns/startOfToday'
+import { subDays } from 'date-fns/subDays'
+
+import Button from '@mui/material/Button'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import Stack from '@mui/material/Stack'
+
+import { H1, Icon, MerchantLogo, Text } from '@kyper/mui'
+
+import {
+  type Activity,
+  type Transaction,
+  ActivityType,
+  DataRow,
+  Dialog,
+  formatCurrency,
+  useCategoryStore,
+  useRecurringActivityStore,
+  useTransactionStore,
+  Drawer,
+  useGlobalUiStore,
+  useEvent,
+  useGlobalCopyStore,
+} from '../../common'
+
+import { TransactionDetails, TransactionList } from '../../transactions'
+
+import FrequencyAction from './actions/FrequencyAction'
+import PaymentDateAction from './actions/PaymentDateAction'
+
+interface ActivityDetailsProps {
+  activity: Activity
+  onDeleted: () => void
+}
+
+const ActivityDetails: React.FC<ActivityDetailsProps> = ({ activity, onDeleted }) => {
+  const { recurring: recurringCopy } = useGlobalCopyStore()
+  const { categories } = useCategoryStore()
+  const { deleteCashflowSequence, deleteScheduledPayment, paidActivities } =
+    useRecurringActivityStore()
+  const { filter, setFilter, transactions } = useTransactionStore()
+  const { selectedAccountGuids } = useGlobalUiStore()
+  const { onEvent } = useEvent()
+
+  const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false)
+  const [transactionGuid, setTransactionGuid] = React.useState('')
+
+  const category = categories.find((c) => c.guid === activity.categoryGuid)
+  const isIncome = activity.activityType === ActivityType.Income
+  const transaction = React.useMemo(
+    () => transactions.find((t) => t.guid === transactionGuid),
+    [transactionGuid],
+  )
+
+  React.useEffect(() => {
+    setFilter({
+      accounts: selectedAccountGuids,
+      dateRange: { start: subDays(startOfToday(), 90), end: endOfMonth(startOfToday()) },
+    })
+  }, [])
+
+  React.useEffect(() => {
+    if (isIncome && activity.sequenceGuid) {
+      // Set filter to show related paid income
+      const transactionGuids = paidActivities
+        .filter((pa) => pa.sequenceGuid === activity.sequenceGuid)
+        .map((pa) => pa.transactionGuid)
+      setFilter({
+        ...filter,
+        custom: (t: Transaction) => Boolean(transactionGuids.find((guid) => t.guid === guid)),
+      })
+    } else if (!isIncome && activity.scheduledPaymentGuid) {
+      // Set filter to show related paid expenses
+      setFilter({
+        ...filter,
+        custom: (t: Transaction) => t.scheduled_payment_guid === activity.scheduledPaymentGuid,
+      })
+    }
+  }, [activity])
+
+  const handleDeleteActivity = async () => {
+    if (isIncome && activity.sequenceGuid) {
+      await deleteCashflowSequence(activity.sequenceGuid)
+    } else if (activity.scheduledPaymentGuid) {
+      await deleteScheduledPayment(activity.scheduledPaymentGuid)
+    }
+    onDeleted()
+  }
+
+  const handleDeleteButtonClick = () => {
+    setShowDeleteConfirm(true)
+    onEvent(
+      isIncome
+        ? 'recurring_transactions_widget_income_details_click_delete'
+        : 'recurring_transactions_widget_expense_details_click_delete',
+      {
+        transaction_guid: activity.transactionGuid,
+      },
+    )
+  }
+
+  return (
+    <Stack bgcolor="background.default" direction="column" height="100%">
+      <Stack direction="column" gap={12} m={24}>
+        <MerchantLogo
+          categoryGuid={activity.categoryGuid || ''}
+          merchantGuid={activity.merchantGuid || ''}
+          size={64}
+        />
+        <Text bold={true} variant="Body">
+          {activity.name}
+        </Text>
+        <H1 color={isIncome ? 'success.main' : 'text.primary'}>
+          {isIncome ? '+' : ''}
+          {formatCurrency(activity.amount, '0,0.00')}
+        </H1>
+      </Stack>
+      <List sx={{ bgcolor: 'background.paper' }}>
+        {activity.institution && (
+          <>
+            <DataRow
+              iconName="checkbook"
+              label={recurringCopy.account}
+              value={activity.institution}
+            />
+            <Divider color="secondary" variant="inset" />
+          </>
+        )}
+
+        {category && (
+          <>
+            <DataRow
+              iconName="monetization_on"
+              label={recurringCopy.category}
+              value={category.name}
+            />
+            <Divider color="secondary" variant="inset" />
+          </>
+        )}
+
+        <FrequencyAction activity={activity} />
+        <Divider color="secondary" variant="inset" />
+
+        <PaymentDateAction activity={activity} />
+        <Divider color="secondary" />
+      </List>
+
+      <Button
+        color="error"
+        onClick={handleDeleteButtonClick}
+        startIcon={<Icon name="delete" />}
+        sx={{ mx: 24, my: 16 }}
+        variant="text"
+      >
+        {isIncome ? recurringCopy.delete_income_title : recurringCopy.delete_expense_title}
+      </Button>
+
+      <Text bold={true} sx={{ ml: 24, mt: 16 }} variant="Body">
+        {recurringCopy.paid_transactions}
+      </Text>
+
+      <TransactionList height="30dvh" onClick={setTransactionGuid} />
+
+      <Drawer
+        ariaLabelClose={recurringCopy.close_drawer_aria}
+        isOpen={!!transactionGuid}
+        onClose={() => setTransactionGuid('')}
+        title={recurringCopy.transaction_details_drawer_title}
+      >
+        {transaction && <TransactionDetails transaction={transaction} />}
+      </Drawer>
+
+      <Dialog
+        copy={{
+          title: isIncome ? recurringCopy.delete_income_title : recurringCopy.delete_expense_title,
+          close_aria: recurringCopy.close_drawer_aria,
+        }}
+        isOpen={showDeleteConfirm}
+        onClose={() => setShowDeleteConfirm(false)}
+        onPrimaryAction={handleDeleteActivity}
+      >
+        <Text>
+          {isIncome
+            ? recurringCopy.delete_income_description
+            : recurringCopy.delete_expense_description}
+        </Text>
+      </Dialog>
+    </Stack>
+  )
+}
+
+export default observer(ActivityDetails)