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

package/src/transactions/components/shared/transactiontable/cells/PayeeCell.tsx

@@ -0,0 +1,21 @@
+import Stack from '@mui/material/Stack'
+
+import { GridCellParams } from '@mui/x-data-grid'
+
+import { MerchantLogo, Text } from '@kyper/mui'
+
+const PayeeCell = (params: GridCellParams) => {
+  return (
+    <Stack alignItems="center" direction="row" gap={8}>
+      <MerchantLogo
+        categoryGuid={params.row.top_level_category_guid || ''}
+        merchantGuid={params.row.merchant_guid || ''}
+      />
+      <Text tabIndex={params.tabIndex} variant="Small">
+        {params.row.payee}
+      </Text>
+    </Stack>
+  )
+}
+
+export default PayeeCell

package/src/transactions/components/shared/transactiontable/cells/index.ts

@@ -0,0 +1,7 @@
+export { default as AccountCell } from './AccountCell'
+export { default as AmountCell } from './AmountCell'
+export { default as CategoryCell } from './CategoryCell'
+export { default as DateCell } from './DateCell'
+export { default as FlagCell } from './FlagCell'
+export { default as HeaderCell } from './HeaderCell'
+export { default as PayeeCell } from './PayeeCell'

package/src/transactions/components/splitmanager/SplitManager.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import CancelIcon from '@mui/icons-material/Cancel'
+import Stack from '@mui/material/Stack'
+
+import { Text, useTokens } from '@kyper/mui'
+
+import { buildDynamicCopy, formatCurrency } from '../../../common'
+import type { Transaction } from '../../../common'
+
+import SplitRow from './SplitRow'
+
+import { useEvent, useGlobalCopyStore } from '../../../common'
+import { ON_CLICK_EVENTS } from '../../constants/OnClickEvents'
+
+interface SplitManagerProps {
+  onAddSplit: () => void
+  onCategoryChanged: (index: number, categoryGuid: string) => void
+  onDeleteSplit: (index: number) => void
+  onUpdateAmount: (index: number, amount: number) => void
+  splits: Transaction[]
+  transaction: Transaction
+}
+
+const SplitManager: React.FC<SplitManagerProps> = ({
+  onAddSplit,
+  onCategoryChanged,
+  onDeleteSplit,
+  onUpdateAmount,
+  splits,
+  transaction,
+}) => {
+  const tokens = useTokens()
+
+  const { transactions: copy } = useGlobalCopyStore()
+  const { onEvent } = useEvent()
+
+  const [error, setError] = React.useState('')
+
+  React.useEffect(() => {
+    setError(splits.length <= 1 ? copy.split_transaction_errors_min_splits : '')
+    setError(
+      splits[0].amount < 0
+        ? (buildDynamicCopy(
+            copy.split_transaction_errors_totals_must_equal_amount,
+            formatCurrency(transaction.amount, '0,0.00'),
+          ) as string)
+        : '',
+    )
+  }, [splits])
+
+  return (
+    <Box className="mx-txn-split-manager">
+      {splits.map((split, index) => (
+        <SplitRow
+          index={index}
+          key={index}
+          onCategoryChanged={onCategoryChanged}
+          onDeleteRow={onDeleteSplit}
+          onUpdateAmount={onUpdateAmount}
+          split={split}
+        />
+      ))}
+      {error && (
+        <Stack
+          color="error.main"
+          direction="row"
+          gap={tokens.Spacing.XSmall}
+          p={tokens.Spacing.Medium}
+        >
+          <CancelIcon sx={{ fontSize: tokens.FontSize.Body }} />
+          <Text variant="Small">{error}</Text>
+        </Stack>
+      )}
+      <Box p={tokens.Spacing.Medium}>
+        <Button
+          aria-label={copy.split_transaction_add_split_btn}
+          onClick={() => {
+            onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_SPLIT_ADD_CLICK)
+            onAddSplit()
+          }}
+        >
+          {copy.split_transaction_add_split_btn}
+        </Button>
+      </Box>
+    </Box>
+  )
+}
+
+export default observer(SplitManager)

package/src/transactions/components/splitmanager/SplitRow.tsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Grid from '@mui/material/Grid'
+import IconButton from '@mui/material/IconButton'
+import Stack from '@mui/material/Stack'
+
+import CancelIcon from '@mui/icons-material/Cancel'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
+
+import { CategoryIcon, Text, useTokens } from '@kyper/mui'
+
+import { CategorySelectorDrawer } from '../../../categories'
+
+import { CurrencyInput, formatCurrency, useGlobalCopyStore } from '../../../common'
+
+import type { Transaction } from '../../../common'
+
+import { useEvent } from '../../../common'
+import { ON_CLICK_EVENTS } from '../../constants/OnClickEvents'
+
+interface SplitRowProps {
+  index: number
+  onCategoryChanged: (index: number, categoryGuid: string) => void
+  onDeleteRow: (index: number) => void
+  onUpdateAmount: (index: number, amount: number) => void
+  split: Transaction
+}
+
+const SplitRow: React.FC<SplitRowProps> = ({
+  index,
+  onDeleteRow,
+  onCategoryChanged,
+  onUpdateAmount,
+  split,
+}) => {
+  const tokens = useTokens()
+
+  const { onEvent } = useEvent()
+  const { transactions: copy } = useGlobalCopyStore()
+
+  const [amount, setAmount] = React.useState(`${split.amount}`)
+  const [categorySelectorOpen, setCategorySelectorOpen] = React.useState(false)
+
+  const isTopRow = index === 0
+
+  const handleChangeAmount = (value: string) => {
+    if (!isNaN(Number(value))) {
+      setAmount(value)
+      onUpdateAmount(index, Number(value))
+    }
+  }
+
+  return (
+    <Box
+      bgcolor="background.paper"
+      className="mx-txn-split-manager-row"
+      pb={tokens.Spacing.Tiny}
+      px={tokens.Spacing.XSmall}
+    >
+      <Grid alignItems={isTopRow ? 'center' : 'start'} container={true}>
+        <Grid item={true} xs={7}>
+          <Stack alignItems="start">
+            <Button
+              endIcon={<ChevronRightIcon />}
+              onClick={() => setCategorySelectorOpen(true)}
+              startIcon={<CategoryIcon categoryGuid={split.top_level_category_guid} />}
+              sx={{ px: tokens.Spacing.Small, py: tokens.Spacing.XSmall }}
+            >
+              {split.category}
+            </Button>
+            <Box>
+              {!split.category_guid && (
+                <Stack
+                  color="error.main"
+                  direction="row"
+                  gap={tokens.Spacing.XSmall}
+                  p={tokens.Spacing.Small}
+                >
+                  <CancelIcon sx={{ fontSize: tokens.FontSize.Body }} />
+                  <Text variant="Small">{copy.split_transaction_errors_select_category}</Text>
+                </Stack>
+              )}
+            </Box>
+          </Stack>
+        </Grid>
+        <Grid item={true} xs={5}>
+          {isTopRow ? (
+            <div className="mx-txn-split-manager-row-top-container">
+              <Text>{formatCurrency(split.amount, '0,0.00')}</Text>
+            </div>
+          ) : (
+            <Stack alignItems="start">
+              <Stack alignItems="start" direction="row" gap={tokens.Spacing.XSmall}>
+                <CurrencyInput
+                  amount={amount}
+                  aria-label={copy.split_transaction_edit_split_amount}
+                  name="split-amount-input"
+                  setAmount={handleChangeAmount}
+                  sx={{
+                    '.MuiOutlinedInput-input': { p: tokens.Spacing.Small },
+                  }}
+                />
+                <IconButton
+                  aria-label={copy.split_transaction_delete_split_btn}
+                  color="secondary"
+                  onClick={() => {
+                    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_SPLIT_DELETE_CLICK)
+                    onDeleteRow(index)
+                  }}
+                  sx={{ w: 44, h: 44 }}
+                >
+                  <DeleteOutlinedIcon />
+                </IconButton>
+              </Stack>
+              {!amount && (
+                <Stack
+                  color="error.main"
+                  direction="row"
+                  gap={tokens.Spacing.XSmall}
+                  py={tokens.Spacing.Small}
+                >
+                  <CancelIcon sx={{ fontSize: tokens.FontSize.Body }} />
+                  <Text variant="Small">{copy.split_transaction_errors_enter_an_amount}</Text>
+                </Stack>
+              )}
+            </Stack>
+          )}
+        </Grid>
+      </Grid>
+
+      <CategorySelectorDrawer
+        initialSelected={split.category_guid}
+        onClose={() => setCategorySelectorOpen(false)}
+        onSelect={(guid: string) => {
+          onCategoryChanged(index, guid)
+          setCategorySelectorOpen(false)
+        }}
+        showDrawer={categorySelectorOpen}
+        title={copy.actions_select_a_category}
+      />
+    </Box>
+  )
+}
+
+export default observer(SplitRow)

package/src/transactions/components/splitmanager/index.ts

@@ -0,0 +1 @@
+export { default as SplitManager } from './SplitManager'

package/src/transactions/components/tagmanager/Header.tsx

@@ -0,0 +1,100 @@
+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 { P, Text, TextField } from '@kyper/mui'
+
+import { Dialog, useGlobalCopyStore } from '../../../common'
+
+import { useEvent, useTransactionStore } from '../../../common'
+import { ON_CLICK_EVENTS } from '../../constants/OnClickEvents'
+
+const Header = () => {
+  const theme = useTheme()
+
+  const { onEvent } = useEvent()
+  const { addTag } = useTransactionStore()
+  const { transactions: copy } = useGlobalCopyStore()
+
+  const [isAdding, setIsAdding] = React.useState(false)
+  const [tagName, setTagName] = React.useState('')
+  const [tagNameError, setTagNameError] = React.useState('')
+
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    if (isAdding) {
+      inputRef?.current?.focus()
+    }
+  }, [isAdding])
+
+  const handleAdding = () => {
+    onEvent(
+      isAdding
+        ? ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_ADD_CANCEL_CLICK
+        : ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_ADD_CLICK,
+    )
+    if (!isAdding) {
+      setTagName('')
+    }
+    setIsAdding(!isAdding)
+  }
+
+  const handleAddTag = async () => {
+    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_ADDED)
+    await addTag(tagName)
+    setIsAdding(false)
+  }
+
+  React.useEffect(() => {
+    setTagNameError(tagName.length > 40 ? copy.tags_error_name_must_be_40_chars : '')
+  }, [tagName])
+
+  return (
+    <Box className="mx-txn-tag-manager-header">
+      <Stack
+        alignItems="center"
+        bgcolor={theme.palette.background.default}
+        direction="row"
+        justifyContent="space-between"
+        px={24}
+        py={16}
+      >
+        <Text bold={true}>{copy.tags_your_tags}</Text>
+        <Button
+          aria-expanded={isAdding}
+          aria-label={copy.tags_add_tag_btn_aria}
+          onClick={handleAdding}
+        >
+          {copy.tags_add_tag_btn}
+        </Button>
+      </Stack>
+
+      <Dialog
+        copy={{ title: copy.tags_add_tag_btn }}
+        isOpen={isAdding}
+        onClose={() => setIsAdding(false)}
+        onPrimaryAction={handleAddTag}
+        onSecondaryAction={() => setIsAdding(false)}
+      >
+        <TextField
+          aria-label={copy.tags_placeholder}
+          name="add-tag"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTagName(e.target.value)}
+          placeholder={copy.tags_placeholder}
+          sx={{ width: '100%' }}
+          value={tagName}
+        />
+        <P id="add-tag-error" sx={{ color: 'error.main' }} variant="ParagraphSmall">
+          {tagNameError}
+        </P>
+      </Dialog>
+    </Box>
+  )
+}
+
+export default observer(Header)

package/src/transactions/components/tagmanager/SearchBox.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import HighlightOffIcon from '@mui/icons-material/HighlightOff'
+import SearchIcon from '@mui/icons-material/Search'
+
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+import InputAdornment from '@mui/material/InputAdornment'
+
+import { TextField, useTokens } from '@kyper/mui'
+
+import { useGlobalCopyStore } from '../../../common'
+
+interface SearchBoxProps {
+  onSearchValueChanged: (value: string) => void
+  searchValue: string
+}
+
+const SearchBox: React.FC<SearchBoxProps> = ({ onSearchValueChanged, searchValue }) => {
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+  const tokens = useTokens()
+
+  const cancelButton = (
+    <IconButton
+      aria-label={copy.tags_cancel_search || 'Search'}
+      onClick={() => onSearchValueChanged('')}
+    >
+      <HighlightOffIcon />
+    </IconButton>
+  )
+
+  return (
+    <Box className="mx-txn-tag-manager-search" px={tokens.Spacing.Large} py={tokens.Spacing.Medium}>
+      <TextField
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon color="disabled" />
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position="end" sx={{ padding: 0 }}>
+              {searchValue ? cancelButton : null}
+            </InputAdornment>
+          ),
+        }}
+        aria-label={commonCopy.search_aria}
+        name="search"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchValueChanged(e.target.value)}
+        placeholder={commonCopy.search_placeholder}
+        // TODO: Theme needs to have the background color defaulted to paper for TextField
+        sx={{ bgcolor: 'background.paper', width: '100%' }}
+        value={searchValue}
+      />
+    </Box>
+  )
+}
+
+export default observer(SearchBox)

package/src/transactions/components/tagmanager/TagManager.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import Paper from '@mui/material/Paper'
+
+import { useTransactionStore } from '../../../common'
+
+import Header from './Header'
+import SearchBox from './SearchBox'
+import TagRow from './TagRow'
+
+interface TagManagerProps {
+  selectedTags: string[]
+  onTagChecked: (guid: string) => void
+}
+
+const TagManager: React.FC<TagManagerProps> = ({ selectedTags, onTagChecked }) => {
+  const { tags } = useTransactionStore()
+
+  const [searchValue, setSearchValue] = React.useState('')
+
+  const filteredTags = tags.filter((tag) =>
+    tag.name.toLowerCase().includes(searchValue.toLowerCase()),
+  )
+
+  return (
+    <div className="mx-txn-tag-manager">
+      <SearchBox
+        onSearchValueChanged={(value) => setSearchValue(value)}
+        searchValue={searchValue}
+      />
+
+      <Header />
+
+      <Paper sx={{ boxShadow: 'none' }}>
+        <List>
+          {filteredTags.map((tag) => (
+            <React.Fragment key={tag.guid}>
+              <TagRow onTagChecked={onTagChecked} selectedTags={selectedTags} tag={tag} />
+              <Divider sx={{ ml: 24 }} />
+            </React.Fragment>
+          ))}
+        </List>
+      </Paper>
+    </div>
+  )
+}
+
+export default observer(TagManager)

package/src/transactions/components/tagmanager/TagRow.tsx

@@ -0,0 +1,145 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
+import EditIcon from '@mui/icons-material/Edit'
+
+import Checkbox from '@mui/material/Checkbox'
+import IconButton from '@mui/material/IconButton'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Stack from '@mui/material/Stack'
+
+import { P, Text, TextField } from '@kyper/mui'
+
+import { Dialog, useGlobalCopyStore } from '../../../common'
+
+import type { Tag } from '../../../common'
+
+import { useEvent, useTransactionStore } from '../../../common'
+import { ON_CLICK_EVENTS } from '../../constants/OnClickEvents'
+
+interface TagRowProps {
+  tag: Tag
+  selectedTags: string[]
+  onTagChecked: (guid: string) => void
+}
+
+const TagRow: React.FC<TagRowProps> = ({ onTagChecked, selectedTags, tag }) => {
+  const { onEvent } = useEvent()
+  const { removeTag, updateTag } = useTransactionStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+
+  const [editOpen, setEditOpen] = React.useState(false)
+  const [deleteOpen, setDeleteOpen] = React.useState(false)
+
+  const [tagName, setTagName] = React.useState('')
+  const [tagNameError, setTagNameError] = React.useState('')
+
+  const handleSaveTag = async () => {
+    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_EDIT_SAVED)
+    if (tag) {
+      await updateTag({ ...tag, name: tagName })
+    }
+    setEditOpen(false)
+  }
+
+  const handleDeleteTag = async () => {
+    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_DELETED)
+    await removeTag(tag.guid)
+    setDeleteOpen(false)
+  }
+
+  React.useEffect(() => {
+    setTagNameError(tagName.length > 40 ? copy.tags_error_name_must_be_40_chars : '')
+  }, [tagName])
+
+  const handleEditClick = () => {
+    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_EDIT_CLICK)
+    setTagName(tag.name)
+    setEditOpen(true)
+  }
+
+  const handleDeleteClick = () => {
+    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_DELETE_CLICK)
+    setDeleteOpen(true)
+  }
+
+  return (
+    <ListItem
+      className="mx-txn-transaction-manager-row"
+      disableGutters={true}
+      disablePadding={true}
+      secondaryAction={
+        !tag.is_default_tag && (
+          <Stack direction="row">
+            <IconButton
+              aria-label={`Edit ${tag.name} tag`}
+              color="secondary"
+              onClick={handleEditClick}
+            >
+              <EditIcon color="secondary" />
+            </IconButton>
+            <IconButton
+              aria-label={`Delete ${tag.name} tag`}
+              color="secondary"
+              onClick={handleDeleteClick}
+            >
+              <DeleteOutlinedIcon color="secondary" />
+            </IconButton>
+          </Stack>
+        )
+      }
+    >
+      <ListItemButton
+        aria-checked={selectedTags.includes(tag.guid)}
+        onClick={() => onTagChecked(tag.guid)}
+        role="checkbox"
+      >
+        <ListItemIcon sx={{ ml: 0 }}>
+          <Checkbox checked={selectedTags.includes(tag.guid)} edge="start" tabIndex={-1} />
+        </ListItemIcon>
+        <ListItemText>{tag.name}</ListItemText>
+      </ListItemButton>
+
+      <Dialog
+        copy={{ title: 'Update tag name' }} // TODO: Need copy
+        isOpen={editOpen}
+        onClose={() => setEditOpen(false)}
+        onPrimaryAction={handleSaveTag}
+        onSecondaryAction={() => setEditOpen(false)}
+      >
+        <TextField
+          aria-describedby={tagNameError ? 'update-tag-error' : undefined}
+          aria-label={copy.tags_update_the_tag_name}
+          name="update-tag"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTagName(e.target.value)}
+          placeholder="Tag name" // TODO: Need copy
+          sx={{ width: '100%' }}
+          value={tagName}
+        />
+        <P id="update-tag-error" sx={{ color: 'error.main' }} variant="ParagraphSmall">
+          {tagNameError}
+        </P>
+      </Dialog>
+
+      <Dialog
+        copy={{ title: copy.tags_delete_title }}
+        isOpen={deleteOpen}
+        onClose={() => setDeleteOpen(false)}
+        onPrimaryAction={handleDeleteTag}
+        onSecondaryAction={() =>
+          onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_DELETE_CANCEL_CLICK)
+        }
+        primaryText={commonCopy.delete_button}
+        secondaryText={commonCopy.cancel_button}
+      >
+        <Text truncate={false}>{copy.tags_deleting_this_tag_will_remove_it}</Text>
+      </Dialog>
+    </ListItem>
+  )
+}
+
+export default observer(TagRow)

package/src/transactions/components/tagmanager/index.ts

@@ -0,0 +1 @@
+export { default as TagManager } from './TagManager'

package/src/transactions/components/transactionwidget/AddAccountModal.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { Text } from '@kyper/mui'
+import { Dialog, useGlobalCopyStore } from '../../../common'
+import { DialogProps } from '../../../common/components/dialog/Dialog'
+
+const AddAccountModal: React.FC<DialogProps> = ({ copy, isOpen, onClose, onPrimaryAction }) => {
+  const { common: commonCopy, transactions: modalCopy } = useGlobalCopyStore()
+  return (
+    <Dialog
+      copy={{
+        title: copy.title,
+      }}
+      isOpen={isOpen}
+      onClose={onClose}
+      onPrimaryAction={onPrimaryAction}
+      primaryText={modalCopy.add_manual_account}
+      secondaryText={commonCopy.cancel_button}
+    >
+      <Text component="p" sx={{ marginBottom: '20px' }} truncate={false}>
+        {modalCopy.add_account_modal_message}
+      </Text>
+      <Text component="p" truncate={false}>
+        {modalCopy.add_account_modal_cta}
+      </Text>
+    </Dialog>
+  )
+}
+
+export default observer(AddAccountModal)