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

package/src/accounts/components/detailsdrawer/Accounts/AccountDetails.tsx

@@ -1,98 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Divider from '@mui/material/Divider'
-import ListItem from '@mui/material/ListItem'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemText from '@mui/material/ListItemText'
-
-import { Icon, Text } from '@kyper/mui'
-
-import AccountDetailEdit from './AccountDetailEdit'
-
-import { getAccountDetailFields, type AccountField } from '../../../utils/AccountFields'
-import { useAccountUiStore } from '../../../hooks/useUiStore'
-import { useEvent, useGlobalCopyStore } from '../../../../common'
-
-const AccountDetails = () => {
-  const widgetProfile = window.app?.config
-
-  const { onEvent } = useEvent()
-  const { selectedAccount: account } = useAccountUiStore()
-  const { accounts: accountsCopy } = useGlobalCopyStore()
-
-  const fields = getAccountDetailFields(account, accountsCopy)
-  const canEdit =
-    account.member_is_managed_by_user ||
-    (!account.member_is_managed_by_user && widgetProfile.enable_renaming_home_accounts)
-
-  const [showEditDialog, setShowEditDialog] = React.useState(false)
-  const [fieldToEdit, setFieldToEdit] = React.useState<AccountField>(fields[0])
-
-  const displayableFields = fields.filter(
-    (field) => canEdit || account[field.name] || account[field.name] === 0,
-  )
-
-  return (
-    <>
-      {displayableFields.map((field) => {
-        const hasValue = account[field.name] || account[field.name] === 0
-        const isLast = displayableFields.indexOf(field) === displayableFields.length - 1
-
-        const content = (
-          <ListItemText
-            disableTypography={true}
-            primary={<Text sx={{ fontSize: 11 }}>{field.label}</Text>}
-            secondary={
-              <Text bold={true} sx={{ fontSize: 15 }}>
-                {hasValue
-                  ? (field.valueFormatter(account[field.name]) as string)
-                  : field.placeholder}
-              </Text>
-            }
-          />
-        )
-
-        return (
-          <React.Fragment key={field.name}>
-            {canEdit ? (
-              <>
-                <ListItem sx={{ backgroundColor: 'background.paper', px: 0 }}>
-                  <ListItemButton
-                    onClick={() => {
-                      setFieldToEdit(field)
-                      setShowEditDialog(true)
-                      if (field?.event) onEvent(field.event, { account_guid: account.guid })
-                    }}
-                  >
-                    {content}
-                    <Icon name="chevron_right" />
-                  </ListItemButton>
-                </ListItem>
-                <Divider sx={{ ml: isLast ? 0 : 24 }} />
-              </>
-            ) : (
-              hasValue && (
-                <>
-                  <ListItem sx={{ backgroundColor: 'background.paper', px: 24 }}>
-                    {content}
-                  </ListItem>
-                  <Divider sx={{ ml: isLast ? 0 : 24 }} />
-                </>
-              )
-            )}
-          </React.Fragment>
-        )
-      })}
-      {showEditDialog && fieldToEdit && (
-        <AccountDetailEdit
-          field={fieldToEdit}
-          isOpen={showEditDialog}
-          onClose={() => setShowEditDialog(false)}
-        />
-      )}
-    </>
-  )
-}
-
-export default observer(AccountDetails)

package/src/accounts/components/detailsdrawer/Accounts/AccountDetailsChart.tsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import CardHeader from '@mui/material/CardHeader'
-
-import { H3 } from '@kyper/mui'
-
-import {
-  formatDate,
-  DATE_FORMATS_INTL,
-  Loader,
-  MiniWidgetProps,
-  useCategoryStore,
-  useGlobalStore,
-} from '../../../../common'
-
-import TrendsChart from '../../../../trends/components/TrendsChart'
-import { useAccountUiStore } from '../../../hooks/useUiStore'
-
-const AccountDetailsChart: React.FC<MiniWidgetProps> = ({ sx }) => {
-  const { loadMonthlyCategoryTotals } = useCategoryStore()
-  const { isInitialized } = useGlobalStore()
-  const { selectedAccount } = useAccountUiStore()
-
-  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)
-
-  React.useEffect(() => {
-    if (isInitialized) {
-      loadMonthlyCategoryTotals([selectedAccount]).finally(() => {
-        setIsWidgetInitialized(true)
-      })
-    }
-  }, [isInitialized, selectedAccount])
-
-  if (!isInitialized || !isWidgetInitialized) {
-    return <Loader />
-  }
-
-  return (
-    <Card
-      sx={{
-        borderRadius: '8px',
-        '& .MuiCardContent-root:last-child': {
-          pb: 0,
-        },
-        ...sx,
-      }}
-    >
-      <CardHeader
-        sx={{ pb: 0 }}
-        title={<H3 sx={{ pb: 4 }}>{formatDate(new Date(), DATE_FORMATS_INTL.MONTH_LONG)}</H3>}
-      />
-
-      <CardContent sx={{ p: 0 }}>
-        <TrendsChart />
-      </CardContent>
-    </Card>
-  )
-}
-
-export default observer(AccountDetailsChart)

package/src/accounts/components/detailsdrawer/Accounts/AccountDetailsContent.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Tab from '@mui/material/Tab'
-import Tabs from '@mui/material/Tabs'
-
-import { TabContentContainer, useGlobalCopyStore } from '../../../../common'
-
-import AccountDetailsTab from './AccountDetailsTab'
-import ConnectionErrorMessage from './ConnectionErrorMessage'
-import TransactionsTab from '../Transactions/TransactionsTab'
-
-const AccountDetailsContent = () => {
-  const [tabValue, setTabValue] = React.useState(0)
-
-  const { accounts: accountsCopy } = useGlobalCopyStore()
-
-  return (
-    <>
-      <ConnectionErrorMessage setTabValue={setTabValue} />
-
-      <Tabs
-        aria-label={accountsCopy.transactions_and_details_aria}
-        centered={true}
-        onChange={(_, val) => setTabValue(val)}
-        value={tabValue}
-        variant="fullWidth"
-      >
-        <Tab
-          aria-controls="transaction-details-tabpanel-0"
-          id="transaction-details-tab-0"
-          label={accountsCopy.transactions}
-        />
-        <Tab
-          aria-controls="account-details-tabpanel-1"
-          id="account-details-tab-1"
-          label={accountsCopy.account_details}
-        />
-      </Tabs>
-
-      <TabContentContainer index={0} name="transaction-details" value={tabValue}>
-        <TransactionsTab />
-      </TabContentContainer>
-
-      <TabContentContainer index={1} name="account-details" value={tabValue}>
-        <AccountDetailsTab />
-      </TabContentContainer>
-    </>
-  )
-}
-
-export default observer(AccountDetailsContent)

package/src/accounts/components/detailsdrawer/Accounts/AccountDetailsHeader.tsx

@@ -1,71 +0,0 @@
-import { observer } from 'mobx-react-lite'
-
-import Stack from '@mui/material/Stack'
-
-import { H2, InstitutionLogo, Text } from '@kyper/mui'
-
-import {
-  formatCurrency,
-  useAccountStore,
-  INCOME_ACCOUNT_TYPES,
-  PAYMENT_ACCOUNT_TYPES,
-  SPENDING_ACCOUNT_TYPES,
-  useGlobalCopyStore,
-} from '../../../../common'
-import { getAccountBalanceDetails } from '../../../utils/AccountFields'
-import { useAccountUiStore } from '../../../hooks/useUiStore'
-
-import AccountDetailsChart from './AccountDetailsChart'
-
-const AccountDetailsHeader = () => {
-  const { institutions } = useAccountStore()
-  const { selectedAccount: account } = useAccountUiStore()
-  const { accounts: accountsCopy } = useGlobalCopyStore()
-  const { firstSubtitle, firstValue, hasAvailableBalance, secondSubtitle, secondValue } =
-    getAccountBalanceDetails(account, accountsCopy)
-
-  const institution = institutions.find(
-    (institution) => institution.guid === account?.institution_guid,
-  )
-
-  const showChart = [
-    ...INCOME_ACCOUNT_TYPES,
-    ...PAYMENT_ACCOUNT_TYPES,
-    ...SPENDING_ACCOUNT_TYPES,
-  ].includes(account.account_type)
-
-  return (
-    <Stack p={24}>
-      <Stack gap={12}>
-        <InstitutionLogo
-          alt={accountsCopy.institution_logo_alt}
-          institutionGuid={account.institution_guid || ''}
-          size={64}
-        />
-        <Text variant="Small">{institution?.name}</Text>
-      </Stack>
-      <Stack gap={8} mb={24} mt={4}>
-        <H2>{account.name || account.feed_name}</H2>
-        <Stack direction="row" justifyContent="space-between">
-          <Text bold={hasAvailableBalance} variant="Body">
-            {firstSubtitle}
-          </Text>
-          <Text bold={true} variant="Body">
-            {formatCurrency(firstValue, '0,0.00')}
-          </Text>
-        </Stack>
-        <Stack direction="row" justifyContent="space-between">
-          <Text variant="Small">{secondSubtitle}</Text>
-          <Text variant="Small">{secondValue}</Text>
-        </Stack>
-      </Stack>
-      {showChart && (
-        <Stack>
-          <AccountDetailsChart />
-        </Stack>
-      )}
-    </Stack>
-  )
-}
-
-export default observer(AccountDetailsHeader)

package/src/accounts/components/detailsdrawer/Accounts/AccountDetailsTab.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import List from '@mui/material/List'
-
-import AccountActions from './AccountActions'
-import AccountConnection from './AccountConnection'
-import AccountDetails from './AccountDetails'
-
-import { ANALYTICS_EVENTS, useEvent } from '../../../../common'
-
-const AccountDetailsTab = () => {
-  const { onEvent } = useEvent()
-  React.useEffect(() => onEvent(ANALYTICS_EVENTS.ACCOUNT_DETAILS_VIEW), [])
-
-  return (
-    <List>
-      <AccountDetails />
-      <AccountConnection />
-      <AccountActions />
-    </List>
-  )
-}
-
-export default observer(AccountDetailsTab)

package/src/accounts/components/detailsdrawer/Accounts/ConnectionErrorMessage.tsx

@@ -1,99 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Alert from '@mui/material/Alert'
-import AlertTitle from '@mui/material/AlertTitle'
-import ErrorIcon from '@mui/icons-material/Error'
-import Link from '@mui/material/Link'
-import Paper from '@mui/material/Paper'
-
-import { Text } from '@kyper/mui'
-
-import ConnectDrawer from '../../../../common/components/ConnectDrawer'
-
-import {
-  getConnectionMessages,
-  ConnectionMessageObject,
-} from '../../../utils/getConnectionMessages'
-import { NonConnectedStatuses, useGlobalCopyStore } from '../../../../common'
-import { useAccountUiStore } from '../../../hooks/useUiStore'
-
-interface ConnectionErrorMessageProps {
-  setTabValue: (val: number) => void
-}
-
-const ConnectionErrorMessage: React.FC<ConnectionErrorMessageProps> = ({ setTabValue }) => {
-  const [shouldShowConnectDrawer, setShouldShowConnectDrawer] = React.useState(false)
-
-  const { selectedMember: member } = useAccountUiStore()
-  const { accounts: accountsCopy, connect: connectCopy } = useGlobalCopyStore()
-
-  const hasError =
-    member.connection_status && NonConnectedStatuses.includes(member.connection_status)
-
-  React.useEffect(() => {
-    if (hasError) {
-      setTabValue(1)
-    }
-  }, [hasError])
-
-  if (!hasError) return
-
-  const statusMessages: ConnectionMessageObject = getConnectionMessages(member, connectCopy)
-
-  // eslint-disable-next-line consistent-return
-  return (
-    <>
-      <Paper
-        sx={{
-          mb: 16,
-          mt: 24,
-          mx: 24,
-        }}
-      >
-        <Alert
-          icon={<ErrorIcon />}
-          severity="error"
-          sx={{
-            borderLeft: 5,
-            borderTopLeftRadius: 6,
-            borderBottomLeftRadius: 6,
-            borderColor: 'error.main',
-            color: 'text.primary',
-            '&.MuiPaper-root': {
-              backgroundColor: 'background.paper',
-            },
-          }}
-        >
-          {statusMessages.title && (
-            <AlertTitle sx={{ fontWeight: 600, marginTop: 2 }} variant="Body">
-              {statusMessages.title}
-            </AlertTitle>
-          )}
-          <Text component="p" sx={{ whiteSpace: 'wrap' }} variant="ParagraphSmall">
-            {statusMessages.main}
-          </Text>
-          {statusMessages.cta && (
-            <Link
-              onClick={() => setShouldShowConnectDrawer(true)}
-              sx={{ fontSize: 15, fontWeight: 600, ml: 0 }}
-            >
-              {statusMessages.cta}
-            </Link>
-          )}
-        </Alert>
-      </Paper>
-
-      {shouldShowConnectDrawer && (
-        <ConnectDrawer
-          loadWidgetProps={{ current_member_guid: member.guid }}
-          onClose={() => setShouldShowConnectDrawer(false)}
-          showConnectWidget={shouldShowConnectDrawer}
-          title={accountsCopy.manage_connection}
-        />
-      )}
-    </>
-  )
-}
-
-export default observer(ConnectionErrorMessage)

package/src/accounts/components/detailsdrawer/Transactions/TransactionsTab.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-import { subDays, startOfToday, endOfToday } from 'date-fns'
-
-import {
-  ANALYTICS_EVENTS,
-  Drawer,
-  useEvent,
-  useGlobalCopyStore,
-  useTransactionStore,
-} from '../../../../common'
-import { TransactionDetails, TransactionList } from '../../../../transactions'
-import { useAccountUiStore } from '../../../hooks/useUiStore'
-
-const TransactionsTab = () => {
-  const [guid, setGuid] = React.useState('')
-
-  const { onEvent } = useEvent()
-  const { selectedAccount } = useAccountUiStore()
-  const { accounts: accountsCopy } = useGlobalCopyStore()
-  const { setFilter, sortedTransactions } = useTransactionStore()
-
-  const transaction = React.useMemo(() => sortedTransactions.find((t) => t.guid === guid), [guid])
-
-  React.useEffect(() => {
-    setFilter({
-      dateRange: { start: subDays(startOfToday(), 90), end: endOfToday() },
-      accounts: [selectedAccount.guid],
-    })
-  }, [selectedAccount])
-
-  React.useEffect(() => onEvent(ANALYTICS_EVENTS.ACCOUNT_DETAILS_VIEW_TRANSACTIONS), [])
-
-  return (
-    <>
-      <TransactionList onClick={setGuid} />
-      {transaction && (
-        <Drawer
-          ariaLabelClose={accountsCopy.close_drawer}
-          isOpen={!!guid}
-          onClose={() => setGuid('')}
-          title={accountsCopy.transaction_drawer_title}
-        >
-          <TransactionDetails transaction={transaction} />
-        </Drawer>
-      )}
-    </>
-  )
-}
-
-export default observer(TransactionsTab)

package/src/accounts/constants/Accounts.ts

@@ -1,11 +0,0 @@
-export enum MemberConnectionStatus {
-  Loading = 'loading',
-  Error = 'error',
-}
-
-export enum FieldType {
-  Currency = 'currency',
-  Date = 'date',
-  Input = 'input',
-  Select = 'select',
-}

package/src/accounts/hooks/useGetMergeableAccounts.tsx

@@ -1,13 +0,0 @@
-import { useAccountStore } from '../../common'
-import { useAccountUiStore } from './useUiStore'
-
-export const useGetMergeableAccounts = () => {
-  const { accounts } = useAccountStore()
-  const { selectedAccount, selectedMember } = useAccountUiStore()
-  return accounts.filter(
-    (account) =>
-      account.member_guid === selectedMember.guid &&
-      selectedMember.successfully_aggregated_at &&
-      account.guid !== selectedAccount.guid,
-  )
-}

package/src/accounts/hooks/useUiStore.ts

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

package/src/accounts/index.ts

@@ -1,8 +0,0 @@
-export { default as AccountsWidget } from './AccountsWidget'
-export { default as AccountsMiniWidget } from './AccountsMiniWidget'
-export { default as ConnectMiniWidget } from './ConnectMiniWidget'
-export { getAccountBalanceDetails, getAccountDetailFields } from './utils/AccountFields'
-export { FieldType, MemberConnectionStatus } from './constants/Accounts'
-export { useGetMergeableAccounts } from './hooks/useGetMergeableAccounts'
-export { AccountApi } from './api/AccountApi'
-export { AccountStore } from './stores/AccountStore'