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

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

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

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

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

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

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

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