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

package/src/transactions/components/shared/transactiondetails/actions/CategoryAction.tsx

@@ -0,0 +1,149 @@
+import React from 'react'
+
+import Avatar from '@mui/material/Avatar'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+
+import { CategoryIcon, CategoryIconVariants, Icon, IconWeight, Text } from '@kyper/mui'
+
+import { CategorySelectorDrawer } from '../../../../../categories'
+
+import {
+  ANALYTICS_EVENTS,
+  buildDynamicCopy,
+  Dialog,
+  useCategoryStore,
+  useGlobalCopyStore,
+} from '../../../../../common'
+
+import type { Transaction } from '../../../../../common'
+
+import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
+import { useTransactionsUiStore } from '../../../../context/hooks'
+import { useEvent, useTransactionStore } from '../../../../../common'
+
+interface CategoryActionProps {
+  transaction: Transaction
+}
+
+const CategoryAction: React.FC<CategoryActionProps> = ({ transaction }) => {
+  const { addOrUpdateTransactionRule, updateTransaction } = useTransactionStore()
+  const { categories } = useCategoryStore()
+  const { onEvent } = useEvent()
+  const { setShouldDisableDrawerScroll, updateManualTransaction } = useTransactionsUiStore()
+  const { transactions: copy } = useGlobalCopyStore()
+
+  const [open, setOpen] = React.useState(false)
+  const [selectedGuid, setSelectedGuid] = React.useState('')
+
+  const handleCategoryChange = async (applyToAll: boolean) => {
+    await updateTransaction({ ...transaction, category_guid: selectedGuid })
+    if (applyToAll) {
+      await addOrUpdateTransactionRule(selectedGuid, transaction)
+    }
+    setSelectedGuid('')
+    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_CATEGORY, {
+      transaction_guid: transaction.guid,
+    })
+  }
+
+  const handleSelected = (guid: string) => {
+    if (transaction.is_manual && !transaction.guid) {
+      const category = categories.find((c) => c.guid === guid)
+      updateManualTransaction({
+        ...transaction,
+        category: category?.name,
+        category_guid: guid,
+        top_level_category_guid: category?.parent_guid || guid,
+      })
+    } else {
+      setSelectedGuid(guid)
+    }
+
+    handleCloseDrawer()
+  }
+
+  const handleCloseDrawer = () => {
+    setOpen(false)
+    setShouldDisableDrawerScroll(false)
+  }
+
+  const category = React.useMemo(
+    () => categories.find((item) => item.guid === selectedGuid),
+    [selectedGuid],
+  )
+
+  return (
+    <React.Fragment>
+      <ListItem disableGutters={true} disablePadding={true}>
+        <ListItemButton
+          onClick={() => {
+            onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_CATEGORY_CLICK)
+            setOpen(true)
+          }}
+        >
+          <ListItemAvatar>
+            <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
+              <CategoryIcon
+                categoryGuid={transaction.top_level_category_guid}
+                size={24}
+                sx={{ color: 'text.primary' }}
+                variant={CategoryIconVariants.Transparent}
+              />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary="Category"
+            primaryTypographyProps={{ variant: 'XSmall' }}
+            secondary={
+              <Text bold={true} variant="Body">
+                {transaction.category ?? copy.actions_select_a_category}
+              </Text>
+            }
+          />
+          <ListItemIcon>
+            <Icon name="chevron_right" weight={IconWeight.Dark} />
+          </ListItemIcon>
+        </ListItemButton>
+      </ListItem>
+
+      <CategorySelectorDrawer
+        initialSelected={transaction.category_guid}
+        onClose={handleCloseDrawer}
+        onSelect={handleSelected}
+        showDrawer={open}
+        title={copy.actions_select_a_category}
+      />
+
+      <Dialog
+        copy={{
+          title: buildDynamicCopy(
+            copy.actions_apply_to_all_transaction_types,
+            transaction.description,
+          ) as string,
+        }}
+        isOpen={Boolean(selectedGuid)}
+        onClose={() => setSelectedGuid('')}
+        onPrimaryAction={() => handleCategoryChange(true)}
+        onSecondaryAction={() => handleCategoryChange(false)}
+        primaryText={copy.actions_apply_to_all}
+        secondaryText={copy.actions_this_time_only}
+      >
+        <Text>
+          {
+            buildDynamicCopy(
+              copy.actions_all_past_and_future,
+              transaction.description,
+              category?.name,
+            ) as string
+          }
+        </Text>
+      </Dialog>
+    </React.Fragment>
+  )
+}
+
+export default CategoryAction

package/src/transactions/components/shared/transactiondetails/actions/DateAction.tsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import { fromUnixTime } from 'date-fns/fromUnixTime'
+import { getUnixTime } from 'date-fns/getUnixTime'
+
+import Avatar from '@mui/material/Avatar'
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+
+import { Icon, IconWeight, Text, useTokens } from '@kyper/mui'
+
+import {
+  ANALYTICS_EVENTS,
+  Calendar,
+  CalendarSelectionTypes,
+  DATE_FORMATS_INTL,
+  Drawer,
+  formatDate,
+  useEvent,
+  useGlobalCopyStore,
+  useTransactionStore,
+} from '../../../../../common'
+
+import type { Transaction } from '../../../../../common'
+
+import { useTransactionsUiStore } from '../../../../context/hooks'
+import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
+
+interface DateActionProps {
+  transaction: Transaction
+}
+
+const DateAction: React.FC<DateActionProps> = ({ transaction }) => {
+  const tokens = useTokens()
+
+  const { onEvent } = useEvent()
+  const { updateTransaction } = useTransactionStore()
+  const { updateManualTransaction } = useTransactionsUiStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+
+  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = React.useState<number>(transaction.date)
+
+  const handleDateSelected = (date: Date) => {
+    setDate(getUnixTime(date))
+  }
+
+  const handleSave = async () => {
+    if (transaction.is_manual && !transaction.guid) {
+      updateManualTransaction({ ...transaction, date })
+      setOpen(false)
+      return
+    }
+
+    await updateTransaction({ ...transaction, date })
+    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_DATE, { transaction_guid: transaction.guid })
+    setOpen(false)
+  }
+
+  return (
+    <Box className="mx-txn-date-action">
+      <ListItem disableGutters={true} disablePadding={true}>
+        <ListItemButton
+          onClick={() => {
+            onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DATE_CLICK)
+            setOpen(true)
+          }}
+        >
+          <ListItemAvatar>
+            <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
+              <Icon name="calendar_month" sx={{ color: 'text.primary' }} weight={IconWeight.Dark} />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary={copy.date_title}
+            primaryTypographyProps={{ variant: 'XSmall' }}
+            secondary={
+              <Text bold={true} variant="Body">
+                {formatDate(fromUnixTime(transaction.date), DATE_FORMATS_INTL.YEAR_MONTH_DAY)}
+              </Text>
+            }
+          />
+          <ListItemIcon>
+            <Icon name="chevron_right" weight={IconWeight.Dark} />
+          </ListItemIcon>
+        </ListItemButton>
+      </ListItem>
+
+      <Drawer
+        ariaLabelClose={commonCopy.close_aria}
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        onPrimaryAction={handleSave}
+        primaryText={commonCopy.save_button}
+        secondaryText={commonCopy.cancel_button}
+        title={copy.date_edit_title}
+      >
+        <Stack alignItems="center" mt={tokens.Spacing.XXLarge}>
+          <Calendar
+            beginDate={fromUnixTime(date)}
+            copy={{
+              nextAria: copy.date_next_aria,
+              prevAria: copy.date_prev_aria,
+              today: commonCopy.date_range_picker.today,
+            }}
+            onDateSelected={handleDateSelected}
+            selectionType={CalendarSelectionTypes.Single}
+          />
+        </Stack>
+      </Drawer>
+    </Box>
+  )
+}
+
+export default DateAction

package/src/transactions/components/shared/transactiondetails/actions/DeleteAction.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
+
+import Avatar from '@mui/material/Avatar'
+import Box from '@mui/material/Box'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+
+import { Text } from '@kyper/mui'
+
+import { Dialog, useEvent, useGlobalCopyStore, useTransactionStore } from '../../../../../common'
+
+import type { Transaction } from '../../../../../common'
+
+import { useTransactionsUiStore } from '../../../../context/hooks'
+import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
+
+interface DeleteActionProps {
+  transaction: Transaction
+}
+
+const DeleteAction: React.FC<DeleteActionProps> = ({ transaction }) => {
+  const { onEvent } = useEvent()
+  const { removeTransaction } = useTransactionStore()
+  const { setShouldDisableDrawerScroll } = useTransactionsUiStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+
+  const [open, setOpen] = React.useState(false)
+  const handleDelete = async () => {
+    await removeTransaction(transaction.guid)
+    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_DELETED)
+  }
+
+  return (
+    <Box className="mx-txn-delete">
+      {transaction && (
+        <ListItem disableGutters={true} disablePadding={true}>
+          <ListItemButton
+            onClick={() => {
+              onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_CLICK)
+              setShouldDisableDrawerScroll(true)
+              setOpen(true)
+            }}
+          >
+            <ListItemAvatar>
+              <Avatar variant="rounded">
+                <DeleteOutlinedIcon color="secondary" fontSize="small" />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={copy.manual_transaction_delete_title}
+              secondary={copy.manual_transaction_delete_subtitle}
+            />
+            <ListItemIcon>
+              <DeleteOutlinedIcon />
+            </ListItemIcon>
+          </ListItemButton>
+        </ListItem>
+      )}
+      <Dialog
+        copy={{ title: copy.manual_transaction_delete_title }}
+        isOpen={open}
+        onClose={() => {
+          setShouldDisableDrawerScroll(false)
+          setOpen(false)
+        }}
+        onPrimaryAction={handleDelete}
+        onSecondaryAction={() => onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_CANCEL)}
+        primaryText={commonCopy.delete_button}
+        secondaryText={commonCopy.cancel_button}
+      >
+        <Text sx={{ whiteSpace: 'normal' }} variant="Paragraph">
+          {copy.manual_transaction_delete_description}
+        </Text>
+      </Dialog>
+    </Box>
+  )
+}
+
+export default observer(DeleteAction)

package/src/transactions/components/shared/transactiondetails/actions/DeleteLogoAction.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Avatar from '@mui/material/Avatar'
+import Box from '@mui/material/Box'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+
+import { Icon, IconWeight, Text } from '@kyper/mui'
+
+import { ANALYTICS_EVENTS, Dialog, useGlobalCopyStore } from '../../../../../common'
+
+import type { Transaction } from '../../../../../common'
+
+import { useTransactionsUiStore } from '../../../../context/hooks'
+import { useEvent, useTransactionStore } from '../../../../../common'
+import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
+
+interface DeleteLogoActionProps {
+  transaction: Transaction
+}
+
+const DeleteLogoAction: React.FC<DeleteLogoActionProps> = ({ transaction }) => {
+  const { onEvent } = useEvent()
+  const { updateTransaction } = useTransactionStore()
+  const { setShouldDisableDrawerScroll } = useTransactionsUiStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+
+  const [open, setOpen] = React.useState(false)
+
+  const handleDeleteLogo = async () => {
+    await updateTransaction({ ...transaction, merchant_guid: '' })
+    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_DELETE_LOGO, {
+      transaction_guid: transaction.guid,
+    })
+  }
+
+  return (
+    <Box className="mx-txn-delete-logo">
+      {transaction && (
+        <ListItem disableGutters={true} disablePadding={true}>
+          <ListItemButton
+            onClick={() => {
+              onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_LOGO_CLICK)
+              setOpen(true)
+            }}
+          >
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
+                <Icon name="delete" sx={{ color: 'text.primary' }} weight={IconWeight.Dark} />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={copy.merchant_logo_title} secondary={copy.merchant_logo_desc} />
+            <ListItemIcon>
+              <Icon name="chevron_right" weight={IconWeight.Dark} />
+            </ListItemIcon>
+          </ListItemButton>
+        </ListItem>
+      )}
+
+      <Dialog
+        copy={{ title: copy.merchant_logo_modal_title }}
+        isOpen={open}
+        onClose={() => {
+          setShouldDisableDrawerScroll(false)
+          setOpen(false)
+        }}
+        onPrimaryAction={handleDeleteLogo}
+        onSecondaryAction={() => onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_LOGO_CANCEL)}
+        primaryText={commonCopy.delete_button}
+        secondaryText={commonCopy.cancel_button}
+        title={copy.merchant_logo_modal_title}
+      >
+        <Text sx={{ whiteSpace: 'normal' }} variant="Paragraph">
+          {copy.merchant_logo_modal_desc}
+        </Text>
+        <Text bold={true} sx={{ whiteSpace: 'normal' }} variant="Paragraph">
+          {` ${copy.merchant_logo_modal_desc_bold}`}
+        </Text>
+      </Dialog>
+    </Box>
+  )
+}
+
+export default observer(DeleteLogoAction)

package/src/transactions/components/shared/transactiondetails/actions/HideAction.tsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Avatar from '@mui/material/Avatar'
+import Box from '@mui/material/Box'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Switch from '@mui/material/Switch'
+
+import { Icon, IconWeight, Text } from '@kyper/mui'
+
+import { Dialog, useEvent, useGlobalCopyStore, useTransactionStore } from '../../../../../common'
+
+import type { Transaction } from '../../../../../common'
+
+import { useTransactionsUiStore } from '../../../../context/hooks'
+import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
+
+interface HideActionProps {
+  transaction: Transaction
+}
+
+const HideAction: React.FC<HideActionProps> = ({ transaction }) => {
+  const { onEvent } = useEvent()
+  const { updateTransaction } = useTransactionStore()
+  const { setShouldDisableDrawerScroll } = useTransactionsUiStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+
+  const [open, setOpen] = React.useState(false)
+
+  const isHidden = transaction.is_hidden
+
+  const toggleHide = async () => {
+    await updateTransaction({ ...transaction, is_hidden: !transaction.is_hidden })
+    onEvent(
+      isHidden ? ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDDEN : ON_CLICK_EVENTS.ON_TRANSACTION_HIDDEN,
+    )
+  }
+
+  return (
+    <Box className="mx-txn-hide-transaction">
+      {transaction && (
+        <ListItem disableGutters={true} disablePadding={true}>
+          <ListItemButton
+            aria-checked={isHidden}
+            onClick={() => {
+              onEvent(
+                isHidden
+                  ? ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDE_CLICK
+                  : ON_CLICK_EVENTS.ON_TRANSACTION_HIDE_CLICK,
+              )
+              onEvent(
+                isHidden
+                  ? 'transaction_details_click_unhide_transaction'
+                  : 'transaction_details_click_hide_transaction',
+                {
+                  transaction_guid: transaction.guid,
+                },
+              )
+              setOpen(true)
+            }}
+            role="switch"
+          >
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
+                {isHidden ? (
+                  <Icon
+                    name="visibilityOff"
+                    sx={{ color: 'text.primary' }}
+                    weight={IconWeight.Dark}
+                  />
+                ) : (
+                  <Icon name="visibility" sx={{ color: 'text.primary' }} weight={IconWeight.Dark} />
+                )}
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={
+                isHidden ? copy.hide_trnx_subtitle_unhide_trnx : copy.hide_trnx_subtitle_hide_trnx
+              }
+              secondary={isHidden ? copy.hide_trnx_desc_unhiding : copy.hide_trnx_desc_hiding}
+            />
+            <ListItemIcon>
+              <Switch
+                checked={isHidden}
+                id="hide-transaction"
+                name="hide-transaction"
+                tabIndex={-1}
+              />
+            </ListItemIcon>
+          </ListItemButton>
+        </ListItem>
+      )}
+
+      <Dialog
+        copy={{
+          title: isHidden ? copy.hide_trnx_subtitle_unhide_trnx : copy.hide_trnx_subtitle_hide_trnx,
+        }}
+        isOpen={open}
+        onClose={() => {
+          setShouldDisableDrawerScroll(false)
+          setOpen(false)
+        }}
+        onPrimaryAction={toggleHide}
+        onSecondaryAction={() =>
+          onEvent(
+            isHidden
+              ? ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDE_CANCEL_CLICK
+              : ON_CLICK_EVENTS.ON_TRANSACTION_HIDE_CANCEL_CLICK,
+          )
+        }
+        primaryText={isHidden ? commonCopy.unhide_button : commonCopy.hide_button}
+        secondaryText={commonCopy.cancel_button}
+      >
+        <Text truncate={false} variant="Paragraph">
+          {isHidden ? copy.hide_trnx_desc_unhiding : copy.hide_trnx_desc_hiding}
+        </Text>
+      </Dialog>
+    </Box>
+  )
+}
+
+export default observer(HideAction)

package/src/transactions/components/shared/transactiondetails/actions/MemoAction.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Avatar from '@mui/material/Avatar'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import TextField from '@mui/material/TextField'
+
+import { Icon, IconWeight, Text } from '@kyper/mui'
+
+import { ANALYTICS_EVENTS, Drawer, useGlobalCopyStore } from '../../../../../common'
+
+import type { Transaction } from '../../../../../common'
+
+import { useTransactionsUiStore } from '../../../../context/hooks'
+import { useEvent, useTransactionStore } from '../../../../../common'
+import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
+
+import TransactionAmountHeader from '../TransactionAmountHeader'
+
+interface MemoActionProps {
+  transaction: Transaction
+}
+
+const MemoAction: React.FC<MemoActionProps> = ({ transaction }) => {
+  const { onEvent } = useEvent()
+  const { updateTransaction } = useTransactionStore()
+  const { updateManualTransaction } = useTransactionsUiStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+
+  const [open, setOpen] = React.useState(false)
+  const [memoText, setMemoText] = React.useState('')
+
+  React.useEffect(() => {
+    if (open) {
+      setMemoText(transaction.memo ? transaction.memo : '')
+    }
+  }, [open])
+
+  const handleSave = async () => {
+    if (transaction.is_manual && !transaction.guid) {
+      updateManualTransaction({ ...transaction, memo: memoText })
+      setOpen(false)
+      return
+    }
+
+    await updateTransaction({ ...transaction, memo: memoText })
+    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_MEMO, { transaction_guid: transaction.guid })
+    setOpen(false)
+  }
+
+  return (
+    <div className="mx-txn-memo-action">
+      <ListItem disableGutters={true} disablePadding={true}>
+        <ListItemButton
+          onClick={() => {
+            onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_MEMO_CLICK)
+            setOpen(true)
+          }}
+        >
+          <ListItemAvatar>
+            <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
+              <Icon name="article" sx={{ color: 'text.primary' }} weight={IconWeight.Dark} />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary={copy.memo_title}
+            primaryTypographyProps={{ variant: 'XSmall' }}
+            secondary={
+              <Text
+                bold={true}
+                sx={{ overflowWrap: 'break-word', whiteSpace: 'wrap' }}
+                variant="Body"
+              >
+                {transaction.memo ? transaction.memo : copy.memo_desc}
+              </Text>
+            }
+          />
+          <ListItemIcon>
+            <Icon name="chevron_right" weight={IconWeight.Dark} />
+          </ListItemIcon>
+        </ListItemButton>
+      </ListItem>
+
+      <Drawer
+        ariaLabelClose={commonCopy.close_aria}
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        onPrimaryAction={handleSave}
+        title={copy.memo_title}
+      >
+        <TransactionAmountHeader transaction={transaction} />
+        <TextField
+          aria-label={copy.memo_desc_aria}
+          focused={true}
+          multiline={true}
+          name="memo"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemoText(e.target.value)}
+          placeholder={copy.memo_desc}
+          rows={4}
+          sx={{ px: 16 }}
+          value={memoText}
+        />
+      </Drawer>
+    </div>
+  )
+}
+
+export default observer(MemoAction)