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

package/src/common/api/WidgetApi.ts

@@ -0,0 +1,15 @@
+import Fetch from '../utils/Fetch'
+
+import { ApiEndpoints } from '../constants'
+
+export class WidgetApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  requestWidgetUrl = async (req: any) => {
+    return this.fetchInstance.post(ApiEndpoints.WIDGET_URLS, req).then((data) => data.widget_url)
+  }
+}

package/src/common/api/__mocks__/BeatApi.ts

@@ -0,0 +1,8 @@
+export class BeatApi {
+  getBeats() {
+    return []
+  }
+  getBeatsWithAssociatedTransaction() {
+    return []
+  }
+}

package/src/common/api/__mocks__/CategoryApi.ts

@@ -0,0 +1,15 @@
+import categories from '../../../../mock/data/Categories.json'
+import { SpendingTestData } from '../../../../mock/unittestdata/SpendingTestData'
+
+export class CategoryApi {
+  getCategories() {
+    return categories
+  }
+
+  getDateRangeCategoryTotals() {
+    return SpendingTestData.monthlyTotals
+  }
+  getMonthlyCategoryTotals() {
+    return SpendingTestData.monthlyTotals
+  }
+}

package/src/common/api/__mocks__/GlobalCopyApi.ts

@@ -0,0 +1,7 @@
+import globalCopy from '../../../../mock/data/GlobalCopy.json'
+
+export class GlobalCopyApi {
+  getGlobalCopy() {
+    return globalCopy
+  }
+}

package/src/common/api/__mocks__/NotificationApi.ts

@@ -0,0 +1,11 @@
+import { NotificationTestData as data } from '../../../../mock/unittestdata/NotificationTestData'
+
+export class NotificationApi {
+  getNotifications() {
+    return data.notifications.map((obj) => obj.notification)
+  }
+
+  markAllAsViewed() {
+    return null
+  }
+}

package/src/common/api/__mocks__/ScheduledPaymentsApi.ts

@@ -0,0 +1,7 @@
+import { ScheduledPaymentsTestData } from '../../../../mock/unittestdata/ScheduledPaymentsTestData'
+
+export class ScheduledPaymentsApi {
+  getScheduledPayments() {
+    return ScheduledPaymentsTestData.scheduledPayments
+  }
+}

package/src/common/api/__mocks__/UserApi.ts

@@ -0,0 +1,9 @@
+export class UserApi {
+  getUserProfile() {
+    return {
+      guid: 'USP-001',
+      has_completed_recurring_transactions_manager_onboarding: false,
+      user_guid: 'USR-001',
+    }
+  }
+}

package/src/common/api/__mocks__/WidgetApi.ts

@@ -0,0 +1,11 @@
+export class WidgetApi {
+  requestWidgetUrl(widget: any) {
+    return {
+      widget_url: {
+        url: widget.widget_url,
+        type: widget.widget_type,
+        ui_message_version: 4,
+      },
+    }
+  }
+}

package/src/common/api/index.ts

@@ -0,0 +1,9 @@
+export { AnalyticsApi } from './AnalyticsApi'
+export { BeatApi } from './BeatApi'
+export { CategoryApi } from './CategoryApi'
+export { GlobalCopyApi } from './GlobalCopyApi'
+export { LocalizedCopyApi } from './LocalizedCopyApi'
+export { NotificationApi } from './NotificationApi'
+export { ScheduledPaymentsApi } from './ScheduledPaymentsApi'
+export { UserApi } from './UserApi'
+export { WidgetApi } from './WidgetApi'

package/src/common/components/ConnectDrawer.tsx

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

package/src/common/components/CurrencyInput.tsx

@@ -0,0 +1,147 @@
+import React from 'react'
+import { css } from '@mxenabled/cssinjs'
+import { v4 as uuidv4 } from 'uuid'
+
+import type { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField'
+
+import { P, TextField, useTokens } from '@kyper/mui'
+
+import { buildDynamicCopy, getLocale } from '../utils/Localization'
+import { formatCurrency, getCurrencyCodes } from '../utils/NumberFormatting'
+import { CurrencyCodes, MAX_MONEY_INPUT } from '../constants/Numbers'
+import { CurrencyInputCopy } from '../types'
+import { useGlobalCopyStore } from '../../common'
+
+type CurrencyInputProps = {
+  allowDecimals?: boolean
+  amountIsRequired?: boolean
+  ariaLabel?: string
+  amount: string | number
+  copy?: CurrencyInputCopy
+  customValidate?: () => boolean
+  errorText?: string
+  label?: string
+  minAmount?: number
+  setAmount: (s: string) => void
+  setHasValidInput?: (b: boolean) => void
+} & MuiTextFieldProps
+
+const CurrencyInput: React.FC<CurrencyInputProps> = ({
+  allowDecimals = true,
+  ariaLabel,
+  amount,
+  amountIsRequired = true,
+  copy,
+  customValidate = () => true,
+  errorText = '',
+  label,
+  minAmount = 1,
+  setAmount,
+  setHasValidInput,
+  ...rest
+}) => {
+  const [errorMsg, setErrorMsg] = React.useState('')
+  const { common: commonCopy } = useGlobalCopyStore()
+  const customCopy = copy ? copy : commonCopy.currency_input
+
+  const tokens = useTokens()
+  const styles = getStyles(tokens)
+
+  const numbersOnly = /^[0-9]*$/
+  // disabling this lint rule because this "useless" escape is not useless and breaks functionality if removed
+  // eslint-disable-next-line no-useless-escape
+  const numbersWithComma = /^(\d)*(\,)?([0-9]{1,2})?$/
+  const numbersWithDecimal = /^(\d)*(\.)?([0-9]{1,2})?$/
+  let pattern: RegExp
+
+  const nameRef = React.useRef(uuidv4())
+
+  if (allowDecimals) {
+    switch (getCurrencyCodes()) {
+      case CurrencyCodes.CAD:
+        pattern = numbersWithComma
+        break
+      default:
+        pattern = numbersWithDecimal
+        break
+    }
+  } else {
+    pattern = numbersOnly
+  }
+
+  React.useEffect(() => {
+    handleValidation(amount)
+  }, [amount])
+
+  const handleValidation = (value: string | number) => {
+    if (!amountIsRequired && (value === '' || value === '.' || value === ',')) {
+      // don't display error in these instances, but indicate the input isn't valid
+      setErrorMsg('')
+      setHasValidInput?.(false)
+    } else if (Number(value) < minAmount) {
+      // display error if number is negative
+      setErrorMsg(
+        buildDynamicCopy(
+          customCopy.error_amount_must_be_equal_to,
+          formatCurrency(minAmount, '0'),
+        ) as string,
+      )
+      setHasValidInput?.(false)
+    } else if (Number(value) > MAX_MONEY_INPUT) {
+      // display error if number is greater than max amount allowed
+      setErrorMsg(
+        buildDynamicCopy(
+          customCopy.error_amount_must_be_less_than_or_equal_to,
+          formatCurrency(MAX_MONEY_INPUT, allowDecimals ? '0,0.00' : '0,0', Math.floor),
+        ) as string,
+      )
+      setHasValidInput?.(false)
+    } else if (!value.toString().match(pattern)) {
+      // check that input is valid and display error on special characters, etc
+      setErrorMsg(customCopy.error_amount_is_invalid)
+      setHasValidInput?.(false)
+    } else if (!customValidate()) {
+      // if custom error validation returns false, error passed in by parent is displayed
+      setErrorMsg(errorText)
+      setHasValidInput?.(false)
+    } else {
+      // input is valid!
+      setErrorMsg('')
+      setHasValidInput?.(true)
+    }
+
+    setAmount(value.toString())
+  }
+
+  return (
+    <TextField
+      InputProps={{
+        endAdornment: getLocale().includes('fr-ca') ? <P>$</P> : undefined,
+        startAdornment: !getLocale().includes('fr-ca') ? <P>$</P> : undefined,
+      }}
+      aria-label={ariaLabel || customCopy.enter_amount}
+      className={`mx-cmn-currency-input ${styles}`}
+      error={Boolean(errorMsg)}
+      helperText={errorMsg}
+      inputMode={allowDecimals ? 'decimal' : 'numeric'}
+      inputProps={{
+        noValidate: true,
+        pattern: '[0-9]*',
+      }}
+      label={label}
+      name={`currency-input-${nameRef.current}`}
+      onChange={(e: any) => handleValidation(e.target.value)}
+      value={amount}
+      {...rest}
+    />
+  )
+}
+
+const getStyles = (tokens: any) =>
+  css({
+    '& .MuiInputBase-adornedStart > .p': {
+      marginRight: tokens.Spacing.Tiny,
+    },
+  })
+
+export default CurrencyInput

package/src/common/components/CurrencyText.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { SxProps } from '@mui/material/styles'
+import { Text } from '@kyper/mui'
+import { TypographyProps } from '@mui/material/Typography'
+
+import { formatCurrency } from '../utils'
+
+interface CurrencyTextProps extends TypographyProps {
+  isIncome?: boolean
+  amount: number | string
+  bold?: boolean
+  color?: string
+  formatString?: string
+  sx?: SxProps
+  symbol?: string
+  variant?: TypographyProps['variant']
+}
+
+export const CurrencyText: React.FC<CurrencyTextProps> = ({
+  isIncome = false,
+  amount = 0,
+  bold,
+  color,
+  formatString,
+  sx,
+  symbol,
+  variant,
+  ...rest
+}) => {
+  const textColor = () => {
+    if (color) {
+      return color
+    } else {
+      return isIncome ? 'success.main' : 'text.primary'
+    }
+  }
+
+  return (
+    <Text bold={bold} color={textColor()} sx={sx} variant={variant} {...rest}>
+      {symbol && symbol}
+      {formatCurrency(Number(amount), formatString ?? '0,0.00')}
+    </Text>
+  )
+}

package/src/common/components/DataRow.tsx

@@ -0,0 +1,52 @@
+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 ListItemText from '@mui/material/ListItemText'
+
+import { Icon, IconWeight } from '@kyper/mui'
+import ListItemIcon from '@mui/material/ListItemIcon'
+
+interface DataRowProps {
+  iconName: string
+  label: string
+  onClick?: () => void
+  value: string
+}
+
+const DataRow: React.FC<DataRowProps> = ({ iconName, label, onClick, value }) => {
+  const rowContents = (
+    <>
+      <ListItemAvatar>
+        <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
+          <Icon name={iconName} sx={{ color: 'text.primary' }} weight={IconWeight.Dark} />
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText
+        primary={label}
+        primaryTypographyProps={{ variant: 'XSmall' }}
+        secondary={value}
+        secondaryTypographyProps={{ color: 'text.default', variant: 'Body', fontWeight: 600 }}
+      />
+    </>
+  )
+
+  return onClick ? (
+    <ListItem disableGutters={true} disablePadding={true}>
+      <ListItemButton onClick={onClick}>
+        {rowContents}
+        <ListItemIcon>
+          <Icon name="chevron_right" size={24} />
+        </ListItemIcon>
+      </ListItemButton>
+    </ListItem>
+  ) : (
+    <ListItem disableGutters={false} disablePadding={false}>
+      {rowContents}
+    </ListItem>
+  )
+}
+
+export default DataRow

package/src/common/components/IconBacking.tsx

@@ -0,0 +1,41 @@
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+import type { SxProps } from '@mui/material/styles'
+
+interface IconProps {
+  backingSx?: SxProps
+  size: number
+  sx?: SxProps
+}
+
+const IconBacking: React.FC<React.PropsWithChildren<IconProps>> = ({
+  backingSx,
+  children,
+  size,
+  sx,
+}) => (
+  <Stack
+    sx={{
+      display: 'grid',
+      placeItems: 'center',
+      zIndex: 3,
+      ...sx,
+    }}
+  >
+    {children}
+
+    <Box
+      sx={{
+        backgroundColor: 'common.white',
+        borderRadius: '50%',
+        height: size,
+        width: size,
+        gridRow: 1,
+        gridColumn: 1,
+        ...backingSx,
+      }}
+    />
+  </Stack>
+)
+
+export default IconBacking

package/src/common/components/InformationTooltip.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import IconButton from '@mui/material/IconButton'
+import Stack from '@mui/material/Stack'
+import Tooltip from '@mui/material/Tooltip'
+
+import { Icon, IconWeight, Text } from '@kyper/mui'
+
+interface InformationTooltipProps {
+  body: string
+  iconName?: string
+  title: string
+}
+
+const InformationTooltip: React.FC<InformationTooltipProps> = ({
+  body,
+  iconName = 'info',
+  title,
+}) => {
+  return (
+    <Tooltip
+      enterTouchDelay={500}
+      title={
+        <Stack gap={2} p={12} sx={{ textOverflow: 'none' }}>
+          <Text bold={true} variant="Body">
+            {title}
+          </Text>
+          <Text sx={{ whiteSpace: 'unset' }} variant="Small">
+            {body}
+          </Text>
+        </Stack>
+      }
+    >
+      <IconButton
+        aria-label={title}
+        sx={{
+          minHeight: 0,
+          minWidth: 0,
+          p: 0,
+        }}
+      >
+        <Icon
+          name={iconName}
+          sx={{ color: 'action.active', fontSize: 16 }}
+          weight={IconWeight.Dark}
+        />
+      </IconButton>
+    </Tooltip>
+  )
+}
+
+export default InformationTooltip

package/src/common/components/ListItemWrapper.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import { SxProps } from '@mui/material/styles'
+
+import { useEvent } from '../context'
+
+interface ListItemWrapperProps {
+  clickEventName?: string
+  onClick?: () => void
+  sx?: SxProps
+}
+
+export const ListItemWrapper: React.FC<React.PropsWithChildren<ListItemWrapperProps>> = ({
+  children,
+  clickEventName,
+  onClick,
+  sx = {},
+}) => {
+  const { onEvent } = useEvent()
+
+  if (onClick) {
+    return (
+      <ListItem sx={{ bgcolor: 'background.paper', ...sx }}>
+        <ListItemButton
+          onClick={() => {
+            if (clickEventName) {
+              onEvent(clickEventName)
+            }
+            onClick()
+          }}
+        >
+          {children}
+        </ListItemButton>
+      </ListItem>
+    )
+  } else {
+    return (
+      <ListItem
+        disableGutters={false}
+        disablePadding={false}
+        sx={{ bgcolor: 'background.paper', ...sx }}
+      >
+        {children}
+      </ListItem>
+    )
+  }
+}

package/src/common/components/Loader.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import CircularProgress from '@mui/material/CircularProgress'
+import Stack from '@mui/material/Stack'
+
+import { Text, useTokens } from '@kyper/mui'
+
+interface LoaderProps {
+  label?: string
+  size?: number
+}
+
+const Loader: React.FC<LoaderProps> = ({ label = '', size = 32 }) => {
+  const tokens = useTokens()
+
+  return (
+    <Stack alignItems="center" gap={tokens.Spacing.XLarge} height={450} justifyContent="center">
+      <CircularProgress size={size} />
+      {label && <Text>{label}</Text>}
+    </Stack>
+  )
+}
+
+export default Loader

package/src/common/components/MiniWidgetContainer.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import type { SxProps } from '@mui/material/styles'
+
+import { H3, Icon, Text } from '@kyper/mui'
+
+import { WidgetContainerProvider } from '../context'
+import { useDimensions } from '../hooks/useDimensions'
+
+interface CardContainerProps {
+  className?: string
+  onPrimaryCtaClick?: () => void
+  primaryCtaLabel?: string
+  subTitle?: string
+  sx?: SxProps
+  title?: string
+}
+
+const MiniWidgetContainer: React.FC<React.PropsWithChildren<CardContainerProps>> = ({
+  className = 'mx-cmn-mini-widget',
+  children,
+  onPrimaryCtaClick,
+  primaryCtaLabel = '',
+  subTitle = '',
+  sx = {},
+  title = '',
+}) => {
+  const [containerRef, { height, width }] = useDimensions()
+
+  return (
+    <Card className={className} sx={{ borderRadius: '8px', ...sx }}>
+      <CardHeader
+        action={
+          onPrimaryCtaClick && (
+            <Button
+              endIcon={<Icon name="keyboard_arrow_right_rounded" />}
+              onClick={onPrimaryCtaClick}
+            >
+              <Text bold={true} variant="Small">
+                {primaryCtaLabel}
+              </Text>
+            </Button>
+          )
+        }
+        subheader={subTitle ? subTitle : null}
+        subheaderTypographyProps={{ variant: 'Small' }}
+        sx={{ pb: 4 }}
+        title={title ? <H3 sx={{ pb: 4 }}>{title}</H3> : null}
+      />
+
+      <CardContent ref={containerRef} sx={{ p: 0 }}>
+        <WidgetContainerProvider availableHeight={height} availableWidth={width}>
+          {children}
+        </WidgetContainerProvider>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default MiniWidgetContainer