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

package/src/common/api/WidgetApi.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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