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

package/src/transactions/components/shared/TransactionList.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+import Box from '@mui/material/Box'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+
+import { ANALYTICS_EVENTS, Loader, useEvent } from '../../../common'
+
+import { useTransactionsUiStore } from '../../context/hooks'
+import { useTransactionStore } from '../../../common'
+
+import SubheaderRow from '../../../common/components/SubheaderRow'
+import TransactionRow from './transactionlist/TransactionRow'
+import ZeroState from './transactionlist/ZeroState'
+
+import { hasInsetBorder, shouldShowDate } from '../../utils/Transactions'
+import { fromUnixToDayOfWeekAndDate } from '../../../common/utils/DateUtil'
+
+const ROW_HEIGHT = 65
+const DATE_ROW_HEIGHT = 34
+
+export interface TransactionListProps {
+  bgcolor?: string
+  height?: number | string
+  loader?: JSX.Element
+  onClick?: (guid: string) => void
+  showInsights?: boolean
+  showLoader?: boolean
+  width?: number | string
+  zeroState?: JSX.Element
+}
+
+const TransactionList: React.FC<TransactionListProps> = ({
+  bgcolor,
+  height = 'calc(100dvh - 36px)',
+  loader = <Loader label="Loading" size={40} />,
+  onClick,
+  showInsights = false,
+  showLoader = false,
+  width = '100%',
+  zeroState = <ZeroState />,
+}) => {
+  const { isLoading, sortedTransactions: transactions } = useTransactionStore()
+
+  const { setShowInsights, toggleSplit } = useTransactionsUiStore()
+  const { onEvent } = useEvent()
+
+  const handleClick = (guid: string) => {
+    const transaction = transactions.find((t) => t.guid === guid)
+
+    if (transaction?.has_been_split) {
+      toggleSplit(transaction.guid)
+      return
+    }
+
+    onEvent(ANALYTICS_EVENTS.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
+      account_guid: transaction?.account_guid,
+      transaction_guid: guid,
+    })
+    onClick?.(guid)
+  }
+
+  const parentRef = React.useRef<HTMLDivElement>(null)
+  const rowVirtualizer = useVirtualizer({
+    count: transactions.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (i) => ROW_HEIGHT + (shouldShowDate(i, transactions) ? DATE_ROW_HEIGHT : 0),
+    overscan: 5,
+  })
+
+  React.useEffect(() => rowVirtualizer.measure(), [transactions])
+  React.useEffect(() => setShowInsights(showInsights), [showInsights])
+
+  return (
+    <List>
+      <Box height={height} overflow="auto" ref={parentRef} width={width}>
+        <Box
+          height={
+            // set the height to auto when there are no transactions so the zero state isn't set to 0
+            rowVirtualizer.getVirtualItems().length === 0 ? 'auto' : rowVirtualizer.getTotalSize()
+          }
+          position="relative"
+          width="100%"
+        >
+          {(isLoading || showLoader) && loader}
+          {!isLoading && !showLoader && rowVirtualizer.getVirtualItems().length === 0 && zeroState}
+          {!isLoading &&
+            !showLoader &&
+            rowVirtualizer.getVirtualItems().length > 0 &&
+            rowVirtualizer.getVirtualItems().map((row) => {
+              const transaction = transactions[row.index]
+              const showDate = shouldShowDate(row.index, transactions)
+              const isInset = hasInsetBorder(row.index, transactions)
+              const rowHeight = ROW_HEIGHT + (showDate ? DATE_ROW_HEIGHT : 0)
+
+              return (
+                <Box
+                  key={transaction.guid}
+                  sx={{
+                    height: rowHeight,
+                    position: 'absolute',
+                    transform: `translateY(${row.start}px)`,
+                    width: '100%',
+                  }}
+                >
+                  {showDate && (
+                    <SubheaderRow bgcolor={bgcolor}>
+                      {fromUnixToDayOfWeekAndDate(transaction.date)}
+                    </SubheaderRow>
+                  )}
+                  <TransactionRow onClick={handleClick} transaction={transaction} />
+                  <Divider sx={{ ml: isInset ? 24 : 0 }} />
+                </Box>
+              )
+            })}
+        </Box>
+      </Box>
+    </List>
+  )
+}
+
+export default observer(TransactionList)

package/src/transactions/components/shared/TransactionTable.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Paper from '@mui/material/Paper'
+import { DataGridPro, GridCellParams, GridColDef } from '@mui/x-data-grid-pro'
+
+import { useGlobalCopyStore, useTransactionStore } from '../../../common'
+
+import {
+  AccountCell,
+  AmountCell,
+  CategoryCell,
+  DateCell,
+  FlagCell,
+  HeaderCell,
+  PayeeCell,
+} from './transactiontable/cells'
+
+interface TransactionTableProps {
+  height?: number | string
+  onCategoryClick?: (guid: string) => void
+  onRowClick?: (guid: string) => void
+}
+
+const TransactionTable: React.FC<TransactionTableProps> = ({
+  height = '100dvh',
+  onCategoryClick,
+  onRowClick,
+}) => {
+  const { isLoading, sortedTransactions } = useTransactionStore()
+  const { transactions: copy } = useGlobalCopyStore()
+
+  const columns: GridColDef[] = [
+    {
+      field: 'flag',
+      headerName: '',
+      minWidth: 32,
+      width: 32,
+      sortable: false,
+      renderCell: (params) => <FlagCell {...params} />,
+      renderHeader: () => <span aria-label={copy.transaction_status} role="presentation" />,
+    },
+    {
+      field: 'date',
+      headerName: copy.date_title,
+      width: 103,
+      renderHeader: HeaderCell,
+      renderCell: DateCell,
+      sortingOrder: ['desc', 'asc'],
+    },
+    {
+      cellClassName: 'vertical-align-center',
+      field: 'payee',
+      headerName: copy.payee_title,
+      flex: 0.33,
+      renderHeader: HeaderCell,
+      renderCell: PayeeCell,
+      sortingOrder: ['asc', 'desc'],
+    },
+    {
+      field: 'category',
+      headerName: copy.category_title,
+      flex: 0.25,
+      renderHeader: HeaderCell,
+      renderCell: (params) => <CategoryCell {...params} />,
+      sortingOrder: ['asc', 'desc'],
+    },
+    {
+      field: 'account',
+      headerName: copy.account_title,
+      flex: 0.33,
+      renderHeader: HeaderCell,
+      renderCell: AccountCell,
+      sortingOrder: ['asc', 'desc'],
+    },
+    {
+      field: 'amount',
+      headerName: copy.amount_title,
+      flex: 0.25,
+      renderHeader: HeaderCell,
+      renderCell: AmountCell,
+      align: 'right',
+      headerAlign: 'right',
+      sortingOrder: ['asc', 'desc'],
+    },
+  ]
+
+  const rows = React.useMemo(
+    () =>
+      sortedTransactions.map((transaction) => ({
+        id: transaction.guid,
+        isHovering: false,
+        ...transaction,
+      })),
+    [sortedTransactions],
+  )
+
+  const handleCellClick = (params: GridCellParams) => {
+    if (params.field === 'category') {
+      onCategoryClick?.(params.row.guid)
+    } else {
+      onRowClick?.(params.row.guid)
+    }
+  }
+
+  return (
+    <Paper sx={{ height: height, px: 24, width: '100%', boxShadow: 'none' }}>
+      <DataGridPro
+        columns={columns}
+        disableColumnFilter={true}
+        disableColumnMenu={true}
+        hideFooter={true}
+        initialState={{ sorting: { sortModel: [{ field: 'date', sort: 'desc' }] } }}
+        loading={isLoading}
+        onCellClick={handleCellClick}
+        rows={rows}
+        slotProps={{ baseIconButton: { color: 'secondary', sx: { ml: 8 } } }}
+      />
+    </Paper>
+  )
+}
+
+export default observer(TransactionTable)

package/src/transactions/components/shared/transactiondetails/Description.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import FormGroup from '@mui/material/FormGroup'
+import IconButton from '@mui/material/IconButton'
+import Stack from '@mui/material/Stack'
+import TextField from '@mui/material/TextField'
+
+import { Icon, Text } from '@kyper/mui'
+
+import type { Transaction } from '../../../../common'
+
+import {
+  ANALYTICS_EVENTS,
+  useEvent,
+  useGlobalCopyStore,
+  useTransactionStore,
+} from '../../../../common'
+import { ON_CLICK_EVENTS } from '../../../constants/OnClickEvents'
+
+interface DescriptionProps {
+  transaction: Transaction
+}
+
+const Description: React.FC<DescriptionProps> = ({ transaction }) => {
+  const { updateTransaction } = useTransactionStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+  const { onEvent } = useEvent()
+
+  const [isEditing, setIsEditing] = React.useState(false)
+  const [description, setDescription] = React.useState('')
+
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    if (isEditing) {
+      setDescription(transaction.description)
+      inputRef?.current?.focus()
+    }
+  }, [isEditing])
+
+  const handleSave = async () => {
+    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_DESCRIPTION, {
+      transaction_guid: transaction.guid,
+    })
+    await updateTransaction({ ...transaction, description })
+    setIsEditing(false)
+  }
+
+  return (
+    <Box className="mx-txn-transaction-description">
+      {isEditing ? (
+        <FormGroup row={true}>
+          <TextField
+            aria-label={copy.description_add_a_subcategory}
+            name="add-subcategory"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDescription(e.target.value)}
+            ref={inputRef}
+            sx={{
+              backgroundColor: 'background.paper',
+              '.MuiOutlinedInput-root': { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
+              '.MuiOutlinedInput-input': { p: 11 },
+              width: 250,
+            }}
+            value={description}
+          />
+          <Button
+            disabled={!description}
+            onClick={handleSave}
+            sx={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
+            variant="outlined"
+          >
+            {commonCopy.save_button}
+          </Button>
+        </FormGroup>
+      ) : (
+        <Stack alignItems="center" direction="row" gap={4}>
+          <Text bold={true}>{transaction.description}</Text>
+          <IconButton
+            aria-label={copy.description_edit_transaction_name}
+            onClick={() => {
+              setIsEditing(true)
+              onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DESCRIPTION_EDIT_CLICK)
+            }}
+            sx={{ color: 'action.active' }}
+          >
+            <Icon name="create" size={22} />
+          </IconButton>
+        </Stack>
+      )}
+    </Box>
+  )
+}
+
+export default observer(Description)

package/src/transactions/components/shared/transactiondetails/FlagTransaction.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import FlagOutlinedIcon from '@mui/icons-material/FlagOutlined'
+import ToggleButton from '@mui/material/ToggleButton'
+import useTheme from '@mui/material/styles/useTheme'
+
+import type { Transaction } from '../../../../common'
+
+import {
+  ANALYTICS_EVENTS,
+  useEvent,
+  useGlobalCopyStore,
+  useTransactionStore,
+} from '../../../../common'
+
+interface FlagTransactionProps {
+  transaction: Transaction
+}
+
+const FlagTransaction: React.FC<FlagTransactionProps> = ({ transaction }) => {
+  const { updateTransaction } = useTransactionStore()
+  const { transactions: copy } = useGlobalCopyStore()
+  const { onEvent } = useEvent()
+  const theme = useTheme()
+
+  const handleFlagTransaction = async () => {
+    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_FLAG, { transaction_guid: transaction.guid })
+    await updateTransaction({ ...transaction, is_flagged: !transaction.is_flagged })
+  }
+
+  return (
+    <div className="mx-txn-transaction-flag">
+      <ToggleButton
+        aria-label={copy.flag_btn_aria}
+        aria-pressed={transaction.is_flagged}
+        color="warning"
+        onClick={handleFlagTransaction}
+        selected={transaction.is_flagged}
+        sx={{
+          borderRadius: 6,
+          color: theme.palette.secondary.main,
+          '&.Mui-selected': {
+            color: theme.palette.common.white,
+            backgroundColor: theme.palette.warning.dark,
+            ':hover': {
+              color: theme.palette.common.white,
+              backgroundColor: theme.palette.warning.main,
+            },
+          },
+          ':hover': {
+            color: theme.palette.warning.contrastText,
+            backgroundColor: theme.palette.warning.light,
+          },
+        }}
+        value="flagged"
+      >
+        <FlagOutlinedIcon color="inherit" />
+      </ToggleButton>
+    </div>
+  )
+}
+export default observer(FlagTransaction)

package/src/transactions/components/shared/transactiondetails/ManualTransactionDetails.tsx

@@ -0,0 +1,148 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Divider from '@mui/material/Divider'
+import MenuItem from '@mui/material/MenuItem'
+import RadioGroup from '@mui/material/RadioGroup'
+import Stack from '@mui/material/Stack'
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+import { TextField } from '@kyper/mui'
+
+import {
+  CurrencyInput,
+  SelectionBox,
+  TransactionType,
+  formatCurrency,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+} from '../../../../common'
+
+import { useTransactionsUiStore } from '../../../context/hooks'
+
+import { CategoryAction, DateAction, MemoAction, TagsAction } from './actions'
+
+type ManualAccount = {
+  label: string
+  value: string
+}
+const ManualTransactionDetails = () => {
+  const { selectedAccounts } = useGlobalUiStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+  const { manualTransaction, setIsAmountValid, updateManualTransaction } = useTransactionsUiStore()
+
+  const [amount, setAmount] = React.useState('')
+  const [payee, setPayee] = React.useState('')
+
+  const manualAccounts = React.useMemo(
+    () => selectedAccounts.filter((account) => account.is_manual),
+    [selectedAccounts],
+  ).map((account) => {
+    return {
+      label: `${account.name} | ${formatCurrency(account.balance, '0,0.00')}`,
+      value: account.guid,
+    } as ManualAccount
+  })
+
+  const currencyCopy = {
+    error_amount_is_invalid: commonCopy.currency_input.error_amount_is_invalid,
+    error_amount_must_be_equal_to: commonCopy.currency_input.error_amount_must_be_equal_to,
+    error_amount_must_be_less_than_or_equal_to:
+      commonCopy.currency_input.error_amount_must_be_less_than_or_equal_to,
+    enter_amount: commonCopy.currency_input.enter_amount,
+  }
+
+  const handleAmountChanged = (amount: string) => {
+    setAmount(amount)
+    updateManualTransaction({ ...manualTransaction, amount: Number(amount) })
+  }
+
+  const handleTransactionTypeChanged = (_event: React.ChangeEvent<HTMLElement>, value: string) => {
+    updateManualTransaction({ ...manualTransaction, transaction_type: Number(value) })
+  }
+
+  const handlePayeeChanged = (payee: string) => {
+    setPayee(payee)
+    updateManualTransaction({ ...manualTransaction, payee, description: payee })
+  }
+
+  const handleAccountChanged = (guid: string) => {
+    updateManualTransaction({ ...manualTransaction, account_guid: guid })
+  }
+
+  return (
+    <Box className="mx-txn-manual-transaction-details">
+      <Stack gap={40} mx={24} my={32}>
+        <Stack
+          direction="row"
+          sx={{ flexDirection: { xs: 'column', sm: 'row' }, gap: { xs: 40, sm: 8 } }}
+        >
+          <CurrencyInput
+            allowDecimals={true}
+            amount={amount}
+            ariaLabel={copy.amount_title}
+            copy={currencyCopy}
+            label={copy.amount_title}
+            setAmount={handleAmountChanged}
+            setHasValidInput={setIsAmountValid}
+            sx={{ bgcolor: 'background.paper' }}
+          />
+          <RadioGroup name="TransactionType" onChange={handleTransactionTypeChanged} row={true}>
+            <Stack alignItems="center" direction="row">
+              <SelectionBox
+                checked={manualTransaction.transaction_type === TransactionType.CREDIT}
+                label={copy.manual_transaction_credit_button_label}
+                sx={{ ml: { xs: 0, sm: 8 } }}
+                tooltip={copy.manual_transaction_credit_button_tooltip}
+                value={TransactionType.CREDIT}
+              />
+              <SelectionBox
+                checked={manualTransaction.transaction_type === TransactionType.DEBIT}
+                label={copy.manual_transaction_debit_button_label}
+                tooltip={copy.manual_transaction_debit_button_tooltip}
+                value={TransactionType.DEBIT}
+              />
+            </Stack>
+          </RadioGroup>
+        </Stack>
+
+        <TextField
+          label={copy.payee_title}
+          name="payee"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handlePayeeChanged(e.target.value)}
+          sx={{ bgcolor: 'background.paper' }}
+          value={payee}
+        />
+
+        <TextField
+          InputLabelProps={{ shrink: true }}
+          SelectProps={{ defaultValue: -1, IconComponent: ExpandMoreIcon }}
+          label={copy.manual_transaction_select_an_account}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            handleAccountChanged(e.target.value)
+          }
+          placeholder={copy.manual_transaction_select}
+          select={true}
+          sx={{ bgcolor: 'background.paper' }}
+        >
+          {manualAccounts.map((account) => (
+            <MenuItem key={account.value} value={account.value}>
+              {account.label}
+            </MenuItem>
+          ))}
+        </TextField>
+      </Stack>
+      <Divider light={true} />
+      <Box bgcolor="background.paper">
+        <CategoryAction transaction={manualTransaction} />
+        <DateAction transaction={manualTransaction} />
+        <MemoAction transaction={manualTransaction} />
+        <TagsAction transaction={manualTransaction} />
+      </Box>
+    </Box>
+  )
+}
+
+export default observer(ManualTransactionDetails)

package/src/transactions/components/shared/transactiondetails/TransactionAmountHeader.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import Stack from '@mui/material/Stack'
+
+import { H1, MerchantLogo, Text } from '@kyper/mui'
+
+import { formatCurrency } from '../../../../common'
+
+import type { Transaction } from '../../../../common'
+
+interface TransactionAmountHeaderProps {
+  transaction: Transaction
+}
+
+const TransactionAmountHeader: React.FC<TransactionAmountHeaderProps> = ({ transaction }) => {
+  const { amount, description, isIncome, merchant_guid, payee, top_level_category_guid } =
+    transaction
+
+  return (
+    <Stack className="mx-txn-amount-header" direction="row" gap={12} px={16} py={24}>
+      <MerchantLogo
+        categoryGuid={top_level_category_guid || ''}
+        merchantGuid={merchant_guid || ''}
+        size={64}
+      />
+      <Stack overflow="hidden'">
+        <Text bold={true} mb={4} truncate={true} variant="Body">
+          {description || payee}
+        </Text>
+        <H1 color={isIncome ? 'success.main' : 'text.primary'} truncate={true}>
+          {isIncome ? '+' : ''}
+          {formatCurrency(amount, '0,0.00')}
+        </H1>
+      </Stack>
+    </Stack>
+  )
+}
+
+export default TransactionAmountHeader