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

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

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

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

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

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

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

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

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

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

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

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

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

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

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