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

package/src/transactions/components/transactionwidget/actions/AddTransactionAction.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { getUnixTime } from 'date-fns/getUnixTime'
+import { startOfToday } from 'date-fns/startOfToday'
+
+import { Icon } from '@kyper/mui'
+
+import { Drawer, useGlobalCopyStore } from '../../../../common'
+
+import { useTransactionsUiStore } from '../../../context/hooks'
+import { ResponsiveButton, useEvent, useTransactionStore, useUserStore } from '../../../../common'
+import ManualTransactionDetails from '../../shared/transactiondetails/ManualTransactionDetails'
+import { DEFAULT_TRANSACTION } from '../../../constants/Transaction'
+import { ON_CLICK_EVENTS } from '../../../constants/OnClickEvents'
+
+const AddTransactionAction = () => {
+  const { onEvent } = useEvent()
+  const { addTransaction } = useTransactionStore()
+  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
+  const { manualTransaction, isAmountValid, updateManualTransaction } = useTransactionsUiStore()
+  const { userProfile } = useUserStore()
+
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const handleClick = () => {
+    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_MANUAL_ADD_CLICK)
+    updateManualTransaction({
+      ...DEFAULT_TRANSACTION,
+      date: getUnixTime(startOfToday()),
+      user_guid: userProfile?.user_guid || '',
+    })
+
+    setIsOpen(true)
+  }
+
+  const isTransactionValid =
+    isAmountValid &&
+    Boolean(manualTransaction.payee) &&
+    Boolean(manualTransaction.account_guid) &&
+    Boolean(manualTransaction.category_guid)
+
+  const handleAddTransaction = async () => {
+    if (isTransactionValid) {
+      await addTransaction(manualTransaction)
+      onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_MANUAL_ADD_ADDED)
+    }
+
+    setIsOpen(false)
+  }
+
+  return (
+    <div className="mx-txn-add-transaction-action">
+      <ResponsiveButton
+        icon={<Icon name="add" />}
+        label={copy.add_transaction_btn}
+        onClick={handleClick}
+        tooltipText={copy.add_transaction_title}
+      />
+
+      <Drawer
+        ariaLabelClose={commonCopy.close_aria}
+        isOpen={isOpen}
+        isPrimaryDisabled={!isTransactionValid}
+        onClose={() => setIsOpen(false)}
+        onPrimaryAction={handleAddTransaction}
+        title={copy.add_transaction_title}
+      >
+        <ManualTransactionDetails />
+      </Drawer>
+    </div>
+  )
+}
+
+export default observer(AddTransactionAction)

package/src/transactions/components/transactionwidget/actions/EditCategoryAction.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+
+import { Text } from '@kyper/mui'
+
+import { CategorySelectorDrawer } from '../../../../categories'
+
+import { buildDynamicCopy, Dialog, useCategoryStore, useGlobalCopyStore } from '../../../../common'
+import type { Transaction } from '../../../../common'
+
+import { useTransactionStore } from '../../../../common'
+
+interface EditCategoryActionProps {
+  onClose: () => void
+  transaction: Transaction
+}
+
+const EditCategoryAction: React.FC<EditCategoryActionProps> = ({ onClose, transaction }) => {
+  const { addOrUpdateTransactionRule, updateTransaction } = useTransactionStore()
+  const { transactions: copy } = useGlobalCopyStore()
+
+  const { categories } = useCategoryStore()
+
+  const [categoryGuid, setCategoryGuid] = React.useState('')
+
+  const category = React.useMemo(
+    () => categories.find((item) => item.guid === categoryGuid),
+    [categoryGuid],
+  )
+
+  const handleCategoryChanged = async (applyToAll: boolean) => {
+    await updateTransaction({ ...transaction, category_guid: categoryGuid })
+    if (applyToAll) {
+      await addOrUpdateTransactionRule(categoryGuid, transaction)
+    }
+
+    setCategoryGuid('')
+    onClose()
+  }
+
+  return (
+    <Box className="mx-txn-edit-category-action">
+      <CategorySelectorDrawer
+        initialSelected={transaction.category_guid}
+        onClose={onClose}
+        onSelect={(guid: string) => setCategoryGuid(guid)}
+        showDrawer={!!transaction}
+        title={copy.actions_select_a_category}
+      />
+      <Dialog
+        copy={{
+          title: buildDynamicCopy(
+            copy.actions_apply_to_all_transaction_types,
+            transaction.description,
+          ) as string,
+        }}
+        isOpen={!!categoryGuid}
+        onClose={() => handleCategoryChanged(false)}
+        onPrimaryAction={() => handleCategoryChanged(true)}
+        onSecondaryAction={() => handleCategoryChanged(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>
+    </Box>
+  )
+}
+
+export default observer(EditCategoryAction)

package/src/transactions/components/transactionwidget/actions/ExportCsvAction.tsx

@@ -0,0 +1,32 @@
+import { observer } from 'mobx-react-lite'
+
+import { Icon } from '@kyper/mui'
+
+import { ResponsiveButton, useGlobalCopyStore } from '../../../../common'
+import { useEvent, useTransactionStore } from '../../../../common'
+import { exportTransactionsToCSV } from '../../../utils/exportTransactionsToCSV'
+import { ON_CLICK_EVENTS } from '../../../constants/OnClickEvents'
+
+const ExportCsvAction = () => {
+  const { onEvent } = useEvent()
+  const { tags, transactions } = useTransactionStore()
+  const { transactions: copy } = useGlobalCopyStore()
+
+  const handleExport = () => {
+    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_EXPORT_CSV_CLICK)
+    exportTransactionsToCSV(transactions, tags)
+  }
+
+  return (
+    <div className="mx-txn-export-csv-action">
+      <ResponsiveButton
+        icon={<Icon name="open_in_new" />}
+        label={copy.export_csv_btn}
+        onClick={handleExport}
+        tooltipText={copy.export_csv_title}
+      />
+    </div>
+  )
+}
+
+export default observer(ExportCsvAction)

package/src/transactions/constants/Actions.ts

@@ -0,0 +1,28 @@
+export enum TopActions {
+  Category,
+  Date,
+  Memo,
+  Tags,
+}
+
+export enum BottomActions {
+  SplitTransaction,
+  HideTransaction,
+  MerchantLogo,
+}
+
+export const DEFAULT_TOP_ACTIONS = [
+  TopActions.Category,
+  TopActions.Date,
+  TopActions.Memo,
+  TopActions.Tags,
+] as TopActions[]
+
+export const DEFAULT_BOTTOM_ACTIONS = [
+  BottomActions.SplitTransaction,
+  BottomActions.HideTransaction,
+  BottomActions.MerchantLogo,
+] as BottomActions[]
+
+export const CHEVRON_ICON_SIZE = 20
+export const ICON_SIZE = 28

package/src/transactions/constants/Analytics.ts

@@ -0,0 +1,272 @@
+import { ON_CLICK_EVENTS } from './OnClickEvents'
+
+export const ANALYTICS_ACTIONS = {
+  ADD: 'Add',
+  ADD_CATEGORY: 'Add Category',
+  CHANGE_CATEGORY: 'Change Category',
+  CHANGE_DATE: 'Change Date',
+  CLOSE: 'Close',
+  DELETE: 'Delete',
+  EDIT: 'Edit',
+  HIDE: 'Hide',
+  SAVE: 'Save',
+  SPLIT: 'Split',
+  SELECT: 'Select',
+  UNHIDE: 'Unhide',
+  UNSPLIT: 'Unsplit',
+}
+
+export const ANALYTICS_CATEGORIES = {
+  TRANSACTION_DETAILS: 'Transaction Details',
+  TRANSACTIONS_LIST: 'Transactions List',
+  TRANSACTIONS_WIDGET: 'Transactions Widget',
+}
+
+export const ANALYTICS_LABELS = {
+  ADD_TRANSACTION: 'Manual Transaction',
+  CATEGORY: 'Category',
+  DATE: 'Date',
+  DELETE_MERCHANT_LOGO: 'Merchant Logo',
+  DELETE_TRANSACTION: 'Delete Transaction',
+  DESCRIPTION: 'Description',
+  EXPORT_CSV: 'Export CSV',
+  FLAG: 'Flag',
+  HIDE_TRANSACTION: 'Hide Transaction',
+  MEMO: 'Memo',
+  SPLITS: 'Split Transactions',
+  TAGS: 'Tags',
+  TAG_ADD: 'Add Tag',
+  TAG_DELETE: 'Delete Tag',
+  TAG_EDIT: 'Edit Tag',
+  TRANSACTION: 'Transaction',
+  TRANSACTIONS_LIST: 'Transactions List',
+  UNHIDE_TRANSACTION: 'Unhide Transaction',
+}
+
+export const ANALYTICS_EVENTS = {
+  // splits
+  [ON_CLICK_EVENTS.ON_TRANSACTION_SPLIT_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.SPLITS,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_SPLIT_CATEGORY_CLICK]: {
+    action: ANALYTICS_ACTIONS.ADD_CATEGORY,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.SPLITS,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_SPLIT_DELETE_CLICK]: {
+    action: ANALYTICS_ACTIONS.DELETE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.SPLITS,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_SPLIT_SAVE_CLICK]: {
+    action: ANALYTICS_ACTIONS.SPLIT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.SPLITS,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_UNSPLIT]: {
+    action: ANALYTICS_ACTIONS.UNSPLIT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.SPLITS,
+  },
+
+  // category
+  [ON_CLICK_EVENTS.ON_TRANSACTION_CATEGORY_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTIONS_LIST,
+    label: ANALYTICS_LABELS.CATEGORY,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_CATEGORY_CHANGED]: {
+    action: ANALYTICS_ACTIONS.CHANGE_CATEGORY,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.CATEGORY,
+  },
+
+  // date
+  [ON_CLICK_EVENTS.ON_TRANSACTION_DATE_CHANGED]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.DATE,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_DATE_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.DATE,
+  },
+
+  // merchant logo
+  [ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_LOGO_CANCEL]: {
+    action: ANALYTICS_ACTIONS.CLOSE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.DELETE_MERCHANT_LOGO,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_LOGO_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.DELETE_MERCHANT_LOGO,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_LOGO_DELETED]: {
+    action: ANALYTICS_ACTIONS.DELETE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.DELETE_MERCHANT_LOGO,
+  },
+
+  // description
+  [ON_CLICK_EVENTS.ON_TRANSACTION_DESCRIPTION_EDIT_CLICK]: {
+    action: ANALYTICS_ACTIONS.EDIT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.DESCRIPTION,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_DESCRIPTION_SAVE_CLICK]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.DESCRIPTION,
+  },
+
+  // hide transactions
+  [ON_CLICK_EVENTS.ON_TRANSACTION_HIDDEN]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.HIDE_TRANSACTION,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_HIDE_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.HIDE_TRANSACTION,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_HIDE_CANCEL_CLICK]: {
+    action: ANALYTICS_ACTIONS.CLOSE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.HIDE_TRANSACTION,
+  },
+
+  // transaction list
+  [ON_CLICK_EVENTS.ON_TRANSACTION_LIST_ITEM_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTIONS_LIST,
+    label: ANALYTICS_LABELS.TRANSACTION,
+  },
+
+  // memo
+  [ON_CLICK_EVENTS.ON_TRANSACTION_MEMO_CHANGED]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.MEMO,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_MEMO_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.MEMO,
+  },
+
+  // tags
+  [ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_CHANGED]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.TAGS,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.TAGS,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_ADD_CANCEL_CLICK]: {
+    action: ANALYTICS_ACTIONS.CLOSE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.TAGS,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_ADD_CLICK]: {
+    action: ANALYTICS_ACTIONS.ADD,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.TAG_ADD,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_ADDED]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.TAG_ADD,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_DELETE_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.TAG_DELETE,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_DELETE_CANCEL_CLICK]: {
+    action: ANALYTICS_ACTIONS.CLOSE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.TAG_DELETE,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_DELETED]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.TAG_DELETE,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_EDIT_CLICK]: {
+    action: ANALYTICS_ACTIONS.EDIT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.TAG_EDIT,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_TAGS_TAG_EDIT_SAVED]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.TAG_EDIT,
+  },
+
+  // flag
+  [ON_CLICK_EVENTS.ON_TRANSACTION_TOGGLE_FLAG_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.FLAG,
+  },
+
+  // hide
+  [ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDDEN]: {
+    action: ANALYTICS_ACTIONS.SAVE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.UNHIDE_TRANSACTION,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDE_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.UNHIDE_TRANSACTION,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDE_CANCEL_CLICK]: {
+    action: ANALYTICS_ACTIONS.CLOSE,
+    category: ANALYTICS_CATEGORIES.TRANSACTION_DETAILS,
+    label: ANALYTICS_LABELS.UNHIDE_TRANSACTION,
+  },
+
+  // export CSV
+  [ON_CLICK_EVENTS.ON_TRANSACTION_EXPORT_CSV_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTIONS_WIDGET,
+    label: ANALYTICS_LABELS.EXPORT_CSV,
+  },
+
+  // add transaction
+  [ON_CLICK_EVENTS.ON_TRANSACTION_MANUAL_ADD_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTIONS_WIDGET,
+    label: ANALYTICS_LABELS.ADD_TRANSACTION,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_MANUAL_ADD_ADDED]: {
+    action: ANALYTICS_ACTIONS.ADD,
+    category: ANALYTICS_CATEGORIES.TRANSACTIONS_WIDGET,
+    label: ANALYTICS_LABELS.ADD_TRANSACTION,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_CLICK]: {
+    action: ANALYTICS_ACTIONS.SELECT,
+    category: ANALYTICS_CATEGORIES.TRANSACTIONS_WIDGET,
+    label: ANALYTICS_LABELS.DELETE_TRANSACTION,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_CANCEL]: {
+    action: ANALYTICS_ACTIONS.CLOSE,
+    category: ANALYTICS_CATEGORIES.TRANSACTIONS_WIDGET,
+    label: ANALYTICS_LABELS.DELETE_TRANSACTION,
+  },
+  [ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_DELETED]: {
+    action: ANALYTICS_ACTIONS.DELETE,
+    category: ANALYTICS_CATEGORIES.TRANSACTIONS_WIDGET,
+    label: ANALYTICS_LABELS.DELETE_TRANSACTION,
+  },
+}

package/src/transactions/constants/OnClickEvents.ts

@@ -0,0 +1,45 @@
+export const ON_CLICK_EVENTS = {
+  ON_TRANSACTION_CATEGORY_CLICK: 'onTransactionCategoryClick',
+  ON_TRANSACTION_CATEGORY_CHANGED: 'onTransactionCategoryChanged',
+  ON_TRANSACTION_MANUAL_ADD_CLICK: 'onTransactionManualAddClick',
+  ON_TRANSACTION_MANUAL_ADD_ADDED: 'onTransactionManualAddAdded',
+  ON_TRANSACTION_DATE_CHANGED: 'onTransactionDateChanged',
+  ON_TRANSACTION_DATE_CLICK: 'onTransactionDateClick',
+  ON_TRANSACTION_DELETE_CANCEL: 'onTransactionDeleteCancel',
+  ON_TRANSACTION_DELETE_CLICK: 'onTransactionDeleteClick',
+  ON_TRANSACTION_DELETE_DELETED: 'onTransactionDeleted',
+  ON_TRANSACTION_DELETE_LOGO_CANCEL: 'onTransactionDeleteLogoCancel',
+  ON_TRANSACTION_DELETE_LOGO_CLICK: 'onTransactionDeleteLogoClick',
+  ON_TRANSACTION_DELETE_LOGO_DELETED: 'onTransactionDeletedLogo',
+  ON_TRANSACTION_DESCRIPTION_EDIT_CLICK: 'onTransactionDescriptionEditClick',
+  ON_TRANSACTION_DESCRIPTION_SAVE_CLICK: 'onTransactionDescriptionSaveClick',
+  ON_TRANSACTION_EXPORT_CSV_CLICK: 'onTransactionExportCsvClick',
+  ON_TRANSACTION_HIDDEN: 'onTransactionHidden',
+  ON_TRANSACTION_HIDE_CLICK: 'onTransactionHideClick',
+  ON_TRANSACTION_HIDE_CANCEL_CLICK: 'onTransactionHideCancelClick',
+  ON_TRANSACTION_LIST_ITEM_CLICK: 'onTransactionListItemClick',
+  ON_TRANSACTION_MEMO_CHANGED: 'onTransactionMemoChanged',
+  ON_TRANSACTION_MEMO_CLICK: 'onTransactionMemoClick',
+  ON_TRANSACTION_SPLIT_ADD_CLICK: 'onTransactionSplitAddClick',
+  ON_TRANSACTION_SPLIT_CANCEL_CLICK: 'onTransactionSplitCancelClick',
+  ON_TRANSACTION_SPLIT_CATEGORY_CLICK: 'onTransactionSplitCategoryClick',
+  ON_TRANSACTION_SPLIT_CLICK: 'onTransactionSplitClick',
+  ON_TRANSACTION_SPLIT_DELETE_CLICK: 'onTransactionSplitDeleteClick',
+  ON_TRANSACTION_SPLIT_SAVE_CLICK: 'onTransactionSplitSaveClick',
+  ON_TRANSACTION_TAGS_CHANGED: 'onTransactionTagsChanged',
+  ON_TRANSACTION_TAGS_CLICK: 'onTransactionTagsClick',
+  ON_TRANSACTION_TAGS_TAG_ADD_CANCEL_CLICK: 'onTransactionTagsTagAddCancelClick',
+  ON_TRANSACTION_TAGS_TAG_ADD_CLICK: 'onTransactionTagsTagAddClick',
+  ON_TRANSACTION_TAGS_TAG_ADDED: 'onTransactionTagsTagAdded',
+  ON_TRANSACTION_TAGS_TAG_DELETE_CLICK: 'onTransactionTagsTagDeleteClick',
+  ON_TRANSACTION_TAGS_TAG_DELETE_CANCEL_CLICK: 'onTransactionTagsTagDeleteCancelClick',
+  ON_TRANSACTION_TAGS_TAG_DELETED: 'onTransactionTagsTagDeleted',
+  ON_TRANSACTION_TAGS_TAG_EDIT_CLICK: 'onTransactionTagsTagEditClick',
+  ON_TRANSACTION_TAGS_TAG_EDIT_SAVED: 'onTransactionTagsTagEditSavedClick',
+  ON_TRANSACTION_TOGGLE_FLAG_CLICK: 'onTransactionToggleFlagClick',
+  ON_TRANSACTION_UNHIDDEN: 'onTransactionUnHidden',
+  ON_TRANSACTION_UNHIDE_CLICK: 'onTransactionUnHideClick',
+  ON_TRANSACTION_UNHIDE_CANCEL_CLICK: 'onTransactionUnHideCancelClick',
+  ON_TRANSACTION_UNSPLIT: 'onTransactionUnsplit',
+  ON_TRANSACTION_UNSPLIT_CANCEL: 'onTransactionUnsplitCancel',
+}

package/src/transactions/constants/Transaction.ts

@@ -0,0 +1,32 @@
+import type { Transaction } from '../../common/types'
+import { TransactionStatus, TransactionType } from '../../common/types'
+
+export const DEFAULT_TRANSACTION = {
+  account_guid: '',
+  amount: 0,
+  currency_code: '',
+  date: 0,
+  description: '',
+  duplicate: false,
+  feed_description: '',
+  feed_status: TransactionStatus.POSTED,
+  feed_transaction_date: 0,
+  has_been_split: false,
+  has_been_viewed: false,
+  is_cleared: false,
+  is_flagged: false,
+  is_hidden: false,
+  is_manual: true,
+  is_personal: true,
+  is_reimbursable: false,
+  is_subscription: false,
+  is_void: false,
+  revision: 1,
+  transaction_type: TransactionType.DEBIT,
+  user_guid: '',
+  is_duplicate: false,
+  feed_transacted_at: 0,
+  guid: '',
+  memo: undefined,
+  tags: [],
+} as Transaction

package/src/transactions/constants/TransactionsTable.ts

@@ -0,0 +1,26 @@
+export const ROW_HEIGHT = 48
+
+const FLAG_COLUMN_WIDTH = 24
+const DATE_COLUMN_WIDTH = 64
+const AMOUNT_COLUMN_WIDTH = 112
+const VARIABLE_COLUMN_WIDTH = `calc((100% - ${
+  FLAG_COLUMN_WIDTH + DATE_COLUMN_WIDTH + AMOUNT_COLUMN_WIDTH
+}px) / 3)`
+
+export const COLUMN_WIDTH = {
+  FLAG: FLAG_COLUMN_WIDTH, // Fixed width
+  DATE: DATE_COLUMN_WIDTH, // Fixed width
+  PAYEE: VARIABLE_COLUMN_WIDTH, // 1/3 of remaining width
+  CATEGORY: VARIABLE_COLUMN_WIDTH, // 1/3 of remaining width
+  ACCOUNT: VARIABLE_COLUMN_WIDTH, // 1/3 of remaining width
+  AMOUNT: AMOUNT_COLUMN_WIDTH, // Fixed width
+}
+
+export const COLUMN_NAMES = {
+  FLAG: 'flag',
+  DATE: 'date',
+  PAYEE: 'payee',
+  CATEGORY: 'category',
+  ACCOUNT: 'account',
+  AMOUNT: 'amount',
+}

package/src/transactions/context/hooks.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { GlobalDataContext, useTransactionStore } from '../../common'
+
+export const useTransactionsUiStore = () => {
+  const context = React.useContext(GlobalDataContext)
+
+  if (!context) {
+    throw new Error('useTransactionsUiStore() must be used within the GlobalDataContext')
+  }
+
+  return useTransactionStore().uiStore
+}

package/src/transactions/index.ts

@@ -0,0 +1,12 @@
+export { TransactionApi } from './api/TransactionApi'
+export { BottomActions, TopActions } from './constants/Actions'
+export { ON_CLICK_EVENTS as TRANSACTION_EVENTS } from './constants/OnClickEvents'
+export { TransactionStore } from './stores/TransactionStore'
+export { useTransactionsUiStore } from './context/hooks'
+export { exportTransactionsToCSV } from './utils/exportTransactionsToCSV'
+export { default as TransactionRow } from './components/shared/transactionlist/TransactionRow'
+export { default as TransactionList } from './components/shared/TransactionList'
+export { default as TransactionTable } from './components/shared/TransactionTable'
+export { default as TransactionDetails } from './components/shared/TransactionDetails'
+export { default as AddAccountModal } from './components/transactionwidget/AddAccountModal'
+export { default as TransactionWidget } from './TransactionWidget'