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

package/src/accounts/components/ConnectionStatusIcons.tsx

@@ -0,0 +1,26 @@
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import ErrorIcon from '@mui/icons-material/Error'
+
+import { IconBacking } from '../../common'
+
+type IconProp = {
+  size?: number
+}
+
+const iconStyle = {
+  gridRow: 1,
+  gridColumn: 1,
+  zIndex: 2,
+}
+
+export const ConnectedStatus = ({ size = 20 }: IconProp) => (
+  <IconBacking size={size}>
+    <CheckCircleIcon color="success" sx={{ fontSize: size, ...iconStyle }} />
+  </IconBacking>
+)
+
+export const ErrorStatus = ({ size = 20 }: IconProp) => (
+  <IconBacking size={size}>
+    <ErrorIcon color="error" sx={{ fontSize: size, ...iconStyle }} />
+  </IconBacking>
+)

package/src/accounts/components/ConnectionsDrawer.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { useTheme } from '@mui/material/styles'
+
+import { ConnectionsWidget } from '@mxenabled/web-widget-sdk'
+
+import ConnectStatus from './ConnectStatus'
+import { Drawer, useAccountStore, useGlobalCopyStore } from '../../common'
+import { MemberConnectionStatus } from '../constants/Accounts'
+import { CONNECTIONS_WIDGET_ID } from '../../common/constants/Connect'
+import { useConnectStore } from '../../common/context/hooks'
+
+interface ConnectionsDrawerProps {
+  onClose: () => void
+  showConnectionsWidget: boolean
+  title: string
+}
+
+const ConnectionsDrawer: React.FC<ConnectionsDrawerProps> = ({
+  onClose,
+  showConnectionsWidget,
+  title,
+}) => {
+  let connectionsWidget: ConnectionsWidget
+  const { refreshAccounts } = useAccountStore()
+  const { loadWidget } = useConnectStore()
+  const { connect: connectCopy } = useGlobalCopyStore()
+  const theme = useTheme()
+
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [hasError, setHasError] = React.useState(false)
+
+  React.useEffect(() => {
+    if (showConnectionsWidget) {
+      setIsLoading(true)
+      loadWidget({ widget: 'connections_widget', mode: theme.palette.mode }).then((res) => {
+        connectionsWidget = new ConnectionsWidget({
+          container: `#${CONNECTIONS_WIDGET_ID}`,
+          style: {
+            height: 'calc(100% - 62px)',
+            width: '100%',
+            position: 'absolute',
+          },
+          url: res.url,
+          onSsoUrlLoadError: () => {
+            setIsLoading(false)
+            setHasError(true)
+          },
+          onLoad: () => {
+            setIsLoading(false)
+            setHasError(false)
+          },
+        })
+      })
+    } else {
+      setIsLoading(false)
+      setHasError(false)
+    }
+
+    return () => {
+      connectionsWidget?.unmount()
+    }
+  }, [showConnectionsWidget])
+
+  return (
+    <Drawer
+      ariaLabelClose={connectCopy.close_connections_aria}
+      isOpen={showConnectionsWidget}
+      onClose={() => {
+        onClose()
+        refreshAccounts()
+      }}
+      title={title}
+    >
+      <div id={CONNECTIONS_WIDGET_ID}>
+        {hasError && <ConnectStatus status={MemberConnectionStatus.Error} />}
+        {isLoading && <ConnectStatus status={MemberConnectionStatus.Loading} />}
+      </div>
+    </Drawer>
+  )
+}
+
+export default observer(ConnectionsDrawer)

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

@@ -0,0 +1,177 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Divider from '@mui/material/List'
+import List from '@mui/material/List'
+import ListSubheader from '@mui/material/ListSubheader'
+import Switch from '@mui/material/Switch'
+
+import { Icon, Text } from '@kyper/mui'
+
+import AccountActionsRow from './AccountActionsRow'
+
+import {
+  ANALYTICS_EVENTS,
+  Account,
+  Dialog,
+  Drawer,
+  buildDynamicCopy,
+  useAccountStore,
+  useEvent,
+  useGlobalCopyStore,
+} from '../../../../common'
+import { useAccountUiStore } from '../../../hooks/useUiStore'
+import { useGetMergeableAccounts } from '../../../hooks/useGetMergeableAccounts'
+import AccountListItem from '../../AccountListItem'
+
+type UpdatedValue = Pick<Account, 'is_closed'> | Pick<Account, 'is_hidden'>
+
+const AccountActions = () => {
+  const [shouldShowCloseAccountModal, setShouldShowCloseAccountModal] = React.useState(false)
+  const [shouldShowAccountMergeDrawer, setShouldShowAccountMergeDrawer] = React.useState(false)
+  const [shouldShowMergeConfirmModal, setShouldShowMergeConfirmModal] = React.useState(false)
+  const [accountToMerge, setAccountToMerge] = React.useState({} as Account)
+
+  const { selectedAccount: account } = useAccountUiStore()
+  const { mergeAccounts, updateAccount } = useAccountStore()
+  const { accounts: accountsCopy } = useGlobalCopyStore()
+  const mergeableAccounts = useGetMergeableAccounts()
+  const { onEvent } = useEvent()
+
+  const handleUpdateAccount = (updatedValue: UpdatedValue) => {
+    updateAccount({
+      ...account,
+      ...updatedValue,
+    })
+  }
+
+  const handleMergeAccounts = () => {
+    mergeAccounts([account.guid, accountToMerge.guid]).finally(() =>
+      setShouldShowAccountMergeDrawer(false),
+    )
+  }
+
+  return (
+    <>
+      <ListSubheader sx={{ backgroundColor: 'transparent', mb: 4, mt: 12, mx: 8 }}>
+        <Text bold={true} component="h2" variant="XSmall">
+          {accountsCopy.actions}
+        </Text>
+      </ListSubheader>
+
+      <AccountActionsRow
+        onClick={() => {
+          handleUpdateAccount({ is_hidden: !account.is_hidden })
+          onEvent(ANALYTICS_EVENTS.ACCOUNT_DETAILS_CLICK_HIDE, { account_guid: account.guid })
+        }}
+        primaryText={account.is_hidden ? accountsCopy.unhide_account : accountsCopy.hide_Account}
+        secondaryText={
+          account.is_hidden ? accountsCopy.include_this_account : accountsCopy.exclude_this_account
+        }
+      >
+        <Switch checked={account.is_hidden} />
+      </AccountActionsRow>
+
+      <AccountActionsRow
+        onClick={() => {
+          setShouldShowCloseAccountModal(true)
+          onEvent(ANALYTICS_EVENTS.ACCOUNT_DETAILS_CLICK_MARK_CLOSED, {
+            account_guid: account.guid,
+          })
+        }}
+        primaryText={account.is_closed ? accountsCopy.mark_as_open : accountsCopy.mark_as_closed}
+        secondaryText={accountsCopy.this_will_set_the_account_balance_to_0}
+      >
+        <Icon name="chevron_right" />
+      </AccountActionsRow>
+
+      {mergeableAccounts.length > 0 && (
+        <AccountActionsRow
+          isLast={true}
+          onClick={() => {
+            setShouldShowAccountMergeDrawer(true)
+            onEvent(ANALYTICS_EVENTS.ACCOUNT_DETAILS_CLICK_MARK_DUPLICATE, {
+              account_guid: account.guid,
+            })
+          }}
+          primaryText={accountsCopy.mark_as_duplicate}
+          secondaryText={accountsCopy.if_a_connected_account_is_showing_up_twice}
+        >
+          <Icon name="chevron_right" />
+        </AccountActionsRow>
+      )}
+
+      <Dialog
+        copy={{
+          close_aria: accountsCopy.close_modal,
+          title: account.is_closed
+            ? accountsCopy.confirm_mark_as_open
+            : accountsCopy.confirm_mark_closed,
+        }}
+        isOpen={shouldShowCloseAccountModal}
+        onClose={() => {
+          setShouldShowCloseAccountModal(false)
+        }}
+        onPrimaryAction={() => handleUpdateAccount({ is_closed: !account.is_closed })}
+      >
+        {
+          buildDynamicCopy(
+            account.is_closed
+              ? accountsCopy.this_will_resume_updating_the_balance
+              : accountsCopy.this_will_set_the_balance_of_your_account,
+            account.name,
+          ) as string
+        }
+      </Dialog>
+
+      <Drawer
+        ariaLabelClose={accountsCopy.close_drawer}
+        isOpen={shouldShowAccountMergeDrawer}
+        onClose={() => setShouldShowAccountMergeDrawer(false)}
+        title={accountsCopy.mark_as_duplicate}
+      >
+        <List>
+          {mergeableAccounts.map((account: Account) => {
+            const isLast = mergeableAccounts.indexOf(account) === mergeableAccounts.length - 1
+            return (
+              <React.Fragment key={account.guid}>
+                <AccountListItem
+                  account={account}
+                  onRowClick={() => {
+                    setShouldShowMergeConfirmModal(true)
+                    setAccountToMerge(account)
+                  }}
+                />
+                <Divider sx={{ ml: isLast ? 0 : 24 }} />
+              </React.Fragment>
+            )
+          })}
+        </List>
+      </Drawer>
+      {shouldShowMergeConfirmModal && (
+        <Dialog
+          copy={{
+            close_aria: accountsCopy.close_modal,
+            title: accountsCopy.confirm_merge,
+          }}
+          isOpen={shouldShowMergeConfirmModal}
+          onClose={() => setShouldShowMergeConfirmModal(false)}
+          onPrimaryAction={handleMergeAccounts}
+        >
+          {
+            buildDynamicCopy(
+              accountsCopy.this_means_accounts_will_be_merged,
+              account.name,
+              accountToMerge.name,
+            ) as string
+          }
+          <Text color="error" sx={{ mt: 24 }}>
+            {accountsCopy.this_action_cannot_be_undone}
+          </Text>
+        </Dialog>
+      )}
+    </>
+  )
+}
+
+export default observer(AccountActions)

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

@@ -0,0 +1,33 @@
+import Divider from '@mui/material/Divider'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+
+interface AccountActionsRowProps {
+  onClick: () => void
+  isLast?: boolean
+  primaryText: string
+  secondaryText: string
+}
+
+const AccountActionsRow: React.FC<React.PropsWithChildren<AccountActionsRowProps>> = ({
+  children,
+  isLast = false,
+  onClick,
+  primaryText,
+  secondaryText,
+}) => {
+  return (
+    <>
+      <ListItem sx={{ backgroundColor: 'background.paper' }}>
+        <ListItemButton onClick={onClick}>
+          <ListItemText primary={primaryText} secondary={secondaryText} />
+          {children}
+        </ListItemButton>
+      </ListItem>
+      <Divider sx={{ ml: isLast ? 0 : 24 }} />
+    </>
+  )
+}
+
+export default AccountActionsRow

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

@@ -0,0 +1,139 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'
+import Divider from '@mui/material/Divider'
+import ErrorIcon from '@mui/icons-material/Error'
+import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import ListSubheader from '@mui/material/ListSubheader'
+import Stack from '@mui/material/Stack'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { Icon, THEMES, Text } from '@kyper/mui'
+
+import ConnectDrawer from '../../../../common/components/ConnectDrawer'
+import { IconBacking, NonConnectedStatuses, useGlobalCopyStore } from '../../../../common'
+import { getConnectionMessages } from '../../../utils/getConnectionMessages'
+import { useAccountUiStore } from '../../../hooks/useUiStore'
+
+const iconStyle = {
+  color: 'background.default',
+  fontSize: 20,
+  gridRow: 1,
+  gridColumn: 1,
+  zIndex: 2,
+}
+
+const AccountConnection = () => {
+  const [shouldShowConnectDrawer, setShouldShowConnectDrawer] = React.useState(false)
+  const {
+    palette: { mode },
+  } = useTheme()
+  const { selectedMember: member } = useAccountUiStore()
+  const { accounts: accountsCopy, connect: connectCopy } = useGlobalCopyStore()
+
+  const statusMessages = getConnectionMessages(member, connectCopy)
+
+  const status = NonConnectedStatuses.includes(member.connection_status)
+    ? {
+      color: 'error.main',
+      ctaCopy: statusMessages.cta ?? '',
+      icon: <ErrorIcon sx={{ ...iconStyle }} />,
+      mainMessage: statusMessages.statusName,
+      secondaryMessage: `${statusMessages.title}.`,
+    }
+    : {
+      color: 'success.main',
+      icon: <CheckCircleRoundedIcon sx={{ ...iconStyle }} />,
+      mainMessage: statusMessages.statusName,
+      secondaryMessage: statusMessages.title,
+    }
+
+  return (
+    <>
+      <ListSubheader sx={{ mb: 4, mt: 12, mx: 8 }}>
+        <Text bold={true} component="h2" variant="XSmall">
+          {accountsCopy.connection_status}
+        </Text>
+      </ListSubheader>
+      <ListItem sx={{ backgroundColor: 'background.paper' }}>
+        {member.is_manual || !status.ctaCopy ? (
+          <Stack alignItems="center" direction="row" px={24} py={12}>
+            <ListItemAvatar>
+              <IconBacking backingSx={{ backgroundColor: status.color, borderRadius: 1 }} size={32}>
+                {status.icon}
+              </IconBacking>
+            </ListItemAvatar>
+            <ListItemText primary={status.mainMessage} secondary={status.secondaryMessage} />
+          </Stack>
+        ) : (
+          <ListItemButton onClick={() => setShouldShowConnectDrawer(true)}>
+            <ListItemAvatar>
+              <IconBacking backingSx={{ backgroundColor: status.color, borderRadius: 1 }} size={32}>
+                {status.icon}
+              </IconBacking>
+            </ListItemAvatar>
+            <ListItemText
+              primary={status.mainMessage}
+              secondary={
+                status.secondaryMessage && (
+                  <>
+                    {status.secondaryMessage}{' '}
+                    <Text bold={true} sx={{ color: 'action.active' }} variant="XSmall">
+                      {status.ctaCopy}
+                    </Text>
+                  </>
+                )
+              }
+            />
+            <Icon name="chevron_right" />
+          </ListItemButton>
+        )}
+      </ListItem>
+      <Divider sx={{ ml: member.is_manual || !member.institution_url ? 0 : 24 }} />
+
+      {!member.is_manual && member.institution_url && (
+        <>
+          <ListItem sx={{ backgroundColor: 'background.paper' }}>
+            <ListItemButton component="a" href={member.institution_url} target="_blank">
+              <ListItemAvatar>
+                <IconBacking
+                  backingSx={{
+                    backgroundColor: mode === THEMES.LIGHT ? 'grey.300' : 'grey.700',
+                    borderRadius: 1,
+                  }}
+                  size={32}
+                >
+                  <LanguageRoundedIcon
+                    sx={{
+                      ...iconStyle,
+                      color: mode === THEMES.LIGHT ? 'grey.900' : 'common.white',
+                    }}
+                  />
+                </IconBacking>
+              </ListItemAvatar>
+              <ListItemText primary={member.name} secondary={member.institution_url} />
+              <Icon name="launch" />
+            </ListItemButton>
+          </ListItem>
+          <Divider />
+        </>
+      )}
+
+      {shouldShowConnectDrawer && (
+        <ConnectDrawer
+          loadWidgetProps={{ current_member_guid: member.guid }}
+          onClose={() => setShouldShowConnectDrawer(false)}
+          showConnectWidget={shouldShowConnectDrawer}
+          title={accountsCopy.manage_connection}
+        />
+      )}
+    </>
+  )
+}
+
+export default observer(AccountConnection)

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

@@ -0,0 +1,162 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { addMonths } from 'date-fns/addMonths'
+
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import { LocalizationProvider } from '@mui/x-date-pickers-pro'
+import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
+import TextField from '@mui/material/TextField'
+
+import {
+  CurrencyInput,
+  Dialog,
+  buildDynamicCopy,
+  useAccountStore,
+  useGlobalCopyStore,
+} from '../../../../common'
+
+import { type AccountField } from '../../../utils/AccountFields'
+import { useAccountUiStore } from '../../../hooks/useUiStore'
+import { FieldType } from '../../../constants/Accounts'
+
+interface AccountDetailEditProps {
+  field: AccountField
+  isOpen: boolean
+  onClose: () => void
+}
+
+const AccountDetailEdit: React.FC<AccountDetailEditProps> = ({ field, isOpen, onClose }) => {
+  const { updateAccount } = useAccountStore()
+  const { selectedAccount: account } = useAccountUiStore()
+  const { accounts: accountsCopy } = useGlobalCopyStore()
+
+  const [editedValue, setEditedValue] = React.useState<any>(account[field.name])
+  const [errorMessage, setErrorMessage] = React.useState('')
+  const [hasValidCurrencyInput, setHasValidCurrencyInput] = React.useState(true)
+
+  const handleClose = () => {
+    setEditedValue('')
+    setErrorMessage('')
+    onClose()
+  }
+
+  const getEditableField = () => {
+    switch (field.type) {
+      case FieldType.Select: {
+        return (
+          <FormControl fullWidth={true}>
+            <InputLabel id={`${field.label}-select-label`}>{field.label}</InputLabel>
+            <Select
+              id={`${field.label}-select`}
+              inputProps={{
+                sx: {
+                  backgroundColor: 'background.paper',
+                },
+              }}
+              label={field.label}
+              labelId={`${field.label}-select-label`}
+              onChange={(e) => setEditedValue(e.target.value)}
+              placeholder={field.placeholder}
+              value={editedValue}
+            >
+              {field.options?.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        )
+      }
+
+      case FieldType.Currency: {
+        return (
+          <CurrencyInput
+            amount={(editedValue as string | number) || ''}
+            fullWidth={true}
+            label={field.label}
+            placeholder={field.placeholder}
+            setAmount={setEditedValue}
+            setHasValidInput={setHasValidCurrencyInput}
+          />
+        )
+      }
+
+      case FieldType.Date: {
+        return (
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DateCalendar
+              maxDate={addMonths(new Date(), 1)}
+              minDate={new Date()}
+              onChange={(date: Date) => {
+                if (account[field.name] && Number(account[field.name]) <= 31) {
+                  // gets and sets the day of the month to editedValue
+                  setEditedValue(date.getDate())
+                } else {
+                  // the day of the month was already passed, so we set it directly to state
+                  setEditedValue(date)
+                }
+              }}
+              views={['day']}
+            />
+          </LocalizationProvider>
+        )
+      }
+
+      default: {
+        return (
+          <TextField
+            defaultValue={account[field.name]}
+            error={!!errorMessage}
+            fullWidth={true}
+            helperText={errorMessage}
+            onChange={updateField}
+            placeholder={field.placeholder}
+          />
+        )
+      }
+    }
+  }
+
+  const saveField = () => {
+    // prevents any unnecessary api calls
+    if (account[field.name] !== editedValue) {
+      updateAccount({
+        ...account,
+        [field.name]: editedValue,
+      })
+    }
+    handleClose()
+  }
+
+  const updateField = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEditedValue(e.target.value)
+
+    if (field.validation) {
+      setErrorMessage(field.validation(e.target.value))
+    }
+  }
+
+  return (
+    <Dialog
+      copy={{
+        close_aria: accountsCopy.close_aria,
+        title: buildDynamicCopy(accountsCopy.edit_field, field.label) as string,
+      }}
+      disablePrimaryButton={!!errorMessage || !hasValidCurrencyInput}
+      isOpen={isOpen}
+      onClose={handleClose}
+      onPrimaryAction={saveField}
+      primaryText={accountsCopy.save}
+    >
+      {getEditableField()}
+    </Dialog>
+  )
+}
+
+export default observer(AccountDetailEdit)