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

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

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

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

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

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

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

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

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

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

package/src/accounts/hooks/useGetMergeableAccounts.tsx

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

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

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