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

package/src/common/components/ResponsiveButton.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import useTheme from '@mui/material/styles/useTheme'
+
+interface ResponsiveButtonProps {
+  icon: React.ReactElement
+  label: string
+  onClick?: () => void
+  placement?:
+    | 'bottom-end'
+    | 'bottom-start'
+    | 'bottom'
+    | 'left-end'
+    | 'left-start'
+    | 'left'
+    | 'right-end'
+    | 'right-start'
+    | 'right'
+    | 'top-end'
+    | 'top-start'
+    | 'top'
+  tooltipText: string
+  variant?: 'contained' | 'outlined' | 'text'
+}
+
+const ResponsiveButton: React.FC<ResponsiveButtonProps> = ({
+  icon,
+  label,
+  onClick,
+  placement = 'bottom',
+  tooltipText,
+  variant = 'text',
+}) => {
+  const theme = useTheme()
+
+  return (
+    <React.Fragment>
+      <Button
+        onClick={onClick}
+        startIcon={icon}
+        sx={{
+          [theme.breakpoints.down('lg')]: { display: 'none' },
+          [theme.breakpoints.up('lg')]: { display: 'inline-flex' },
+        }}
+        title={tooltipText}
+        variant={variant}
+      >
+        {label}
+      </Button>
+      <Tooltip
+        describeChild={true}
+        placement={placement}
+        sx={{ display: { xs: 'inline-flex', lg: 'none' } }}
+        title={tooltipText}
+      >
+        <IconButton onClick={onClick}>{icon}</IconButton>
+      </Tooltip>
+    </React.Fragment>
+  )
+}
+
+export default ResponsiveButton

package/src/common/components/SearchBox.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+import InputAdornment from '@mui/material/InputAdornment'
+
+import { Icon, TextField, useTokens } from '@kyper/mui'
+
+export interface SearchBoxProps {
+  ariaLabel?: string
+  cancelAriaLabel?: string
+  onChange: (value: string) => void
+  placeholder?: string
+  searchValue: string
+}
+
+const SearchBox: React.FC<SearchBoxProps> = ({
+  ariaLabel = 'Search',
+  cancelAriaLabel = 'Cancel Search',
+  onChange,
+  placeholder = 'Search',
+  searchValue,
+}) => {
+  const tokens = useTokens()
+
+  const cancelButton = (
+    <IconButton
+      aria-label={cancelAriaLabel}
+      className="mx-cat-cancel-search-button"
+      onClick={() => onChange('')}
+    >
+      <Icon name="cancel" size={24} />
+    </IconButton>
+  )
+
+  return (
+    <Box className="mx-cmn-search-box" px={tokens.Spacing.Large} py={tokens.Spacing.Medium}>
+      <TextField
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <Icon color="disabled" name="search" size={26} />
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position="end" sx={{ p: 0 }}>
+              {searchValue ? cancelButton : null}
+            </InputAdornment>
+          ),
+        }}
+        aria-label={ariaLabel}
+        name="search"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+        placeholder={placeholder}
+        // TODO: Theme needs to have the background color defaulted to paper for TextField
+        sx={{ bgcolor: 'background.paper', width: '100%' }}
+        value={searchValue}
+      />
+    </Box>
+  )
+}
+
+export default observer(SearchBox)

package/src/common/components/SelectionBox.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+
+import Box from '@mui/material/Box'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Radio from '@mui/material/Radio'
+import type { SxProps } from '@mui/material/styles'
+import useTheme from '@mui/material/styles/useTheme'
+import Tooltip from '@mui/material/Tooltip'
+
+interface SelectionBoxProps {
+  checked?: boolean
+  label: string
+  sx?: SxProps
+  tooltip?: string
+  value: string | number
+}
+
+/** TODO: Move this component to KyperMUI **/
+const SelectionBox: React.FC<SelectionBoxProps> = ({
+  checked = false,
+  label,
+  sx = {},
+  tooltip = '',
+  value,
+}) => {
+  const theme = useTheme()
+
+  /** TODO: Add new theme color to handle this color and remove the mode check **/
+  const greyColor =
+    theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]
+  const borderColor = checked ? theme.palette.action.active : greyColor
+  const borderSize = checked ? 3 : 1
+
+  return (
+    <Box
+      bgcolor="background.paper"
+      border={`${borderSize}px solid`}
+      borderColor={borderColor}
+      borderRadius={2}
+      mt={-2}
+      mx={8}
+      pr={8}
+      py={4}
+      sx={{ '&:hover': { borderColor: theme.palette.action.active }, ...sx }}
+    >
+      <Tooltip title={tooltip}>
+        <FormControlLabel
+          control={
+            <Radio
+              disableRipple={true}
+              sx={{ '&.Mui-checked': { color: theme.palette.action.active } }}
+            />
+          }
+          label={label}
+          labelPlacement="start"
+          sx={{ ml: 0, pl: 8 }}
+          value={value}
+        />
+      </Tooltip>
+    </Box>
+  )
+}
+
+export default SelectionBox

package/src/common/components/SubheaderRow.tsx

@@ -0,0 +1,22 @@
+import React, { PropsWithChildren } from 'react'
+
+import Box from '@mui/material/Box'
+
+import { Text } from '@kyper/mui'
+
+interface SubheaderRowProps {
+  bgcolor?: string
+}
+
+const SubheaderRow: React.FC<PropsWithChildren<SubheaderRowProps>> = ({
+  bgcolor = 'background.default',
+  children,
+}) => (
+  <Box display="inline-block" pb={4} pl={24} pt={4} sx={{ bgcolor, width: '100%' }}>
+    <Text bold={true} variant="XSmall">
+      {children}
+    </Text>
+  </Box>
+)
+
+export default SubheaderRow

package/src/common/components/TabContentContainer.tsx

@@ -0,0 +1,28 @@
+interface TabContentProps {
+  children?: React.ReactNode
+  index: number
+  name: string
+  value: number
+}
+
+const TabContentContainer: React.FC<TabContentProps> = ({
+  children,
+  index,
+  name,
+  value,
+  ...rest
+}) => {
+  return (
+    <div
+      aria-labelledby={`${name}-tab-${index}`}
+      hidden={value !== index}
+      id={`${name}-tabpanel-${index}`}
+      role="tabpanel"
+      {...rest}
+    >
+      {value === index && children}
+    </div>
+  )
+}
+
+export default TabContentContainer

package/src/common/components/WidgetContainer.tsx

@@ -0,0 +1,239 @@
+import React, { PropsWithChildren } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Divider from '@mui/material/Divider'
+import IconButton from '@mui/material/IconButton'
+import Stack from '@mui/material/Stack'
+import type { SxProps } from '@mui/material/styles'
+
+import { H1, H3, Icon } from '@kyper/mui'
+
+import { AccountFilter } from './accountfilter'
+import { DateRangeSelector } from './daterangeselector'
+import { ANALYTICS_EVENTS, useEvent } from '../../common'
+import { useGlobalCopyStore, useGlobalUiStore } from '../context'
+import { useScreenSize } from '../hooks'
+import { Account } from '../types'
+import { CalendarActions, DateRangeSelectorCopy } from './daterangeselector/DateRangeSelector'
+
+import { WidgetContainerProvider } from '../context'
+import { useDimensions } from '../hooks/useDimensions'
+
+type Action = {
+  label: string
+  iconName: string
+  onClick: () => void
+}
+
+interface WidgetContainerProps {
+  accountOptions?: Account[]
+  actions?: Action[]
+  calendarActions?: CalendarActions
+  className?: string
+  dateRange?: { start: Date; end: Date }
+  dateRangeVariant?: 'outlined' | 'text' | 'readonly' | 'timeframebuttons' | 'timeframetabs'
+  hasDivider?: boolean
+  onBackClick?: () => void
+  onAccountsFilterClick?: () => void
+  showDividerAboveDateSelector?: boolean
+  sx?: SxProps
+  title?: string
+}
+
+const WidgetContainer: React.FC<PropsWithChildren<WidgetContainerProps>> = ({
+  accountOptions,
+  actions = [],
+  calendarActions,
+  children,
+  dateRange,
+  dateRangeVariant,
+  className = 'mx-cmn-widget',
+  hasDivider = false,
+  onBackClick,
+  onAccountsFilterClick,
+  showDividerAboveDateSelector = true,
+  sx = {},
+  title = '',
+}) => {
+  const [containerRef, { height, width }] = useDimensions()
+  const { onEvent } = useEvent()
+
+  const { isDesktop, isMobile, isTablet } = useScreenSize()
+  const { displayedDateRange, selectedAccountGuids, setSelectedAccountGuids } = useGlobalUiStore()
+  const { common: commonCopy } = useGlobalCopyStore()
+
+  const handleBackClick = () => {
+    if (onBackClick) {
+      onBackClick()
+      onEvent(ANALYTICS_EVENTS.WIDGET_BACK_CLICK)
+    }
+  }
+
+  const accountFilterCopy = {
+    accountFilterOptionsCopy: {
+      accountTypeAccounts: commonCopy.account_filter.account_type_accounts,
+      cancelButton: commonCopy.cancel_button,
+      filterButton: commonCopy.filter_button,
+      filterButtonAria: commonCopy.account_filter.filter_button_generic_aria,
+      selectAllAccounts: commonCopy.account_filter.select_all_accounts,
+      toggleAccountTypeAccounts: commonCopy.account_filter.toggle_account_type_accounts,
+      unselectAllAccounts: commonCopy.account_filter.unselect_all_accounts,
+      zeroStateButton: commonCopy.account_filter.zero_state_button,
+      zeroStateDescription: commonCopy.account_filter.zero_state_description,
+      zeroStateTitle: commonCopy.account_filter.zero_state_title,
+    },
+    title: commonCopy.account_filter.title,
+  }
+
+  const dateRangeSelectorCopy = {
+    dateRangePickerCopy: {
+      dateRangeFrom: commonCopy.date_range_picker.from,
+      dateRangeTo: commonCopy.date_range_picker.to,
+      dateRangeCustom: commonCopy.date_range_picker.custom,
+      dateRangeSelectARange: commonCopy.date_range_picker.select_range,
+      dateRangeThisMonth: commonCopy.date_range_picker.this_month,
+      dateRangeLastMonth: commonCopy.date_range_picker.last_month,
+      dateRangeLast30Days: commonCopy.date_range_picker.last_30_days,
+      dateRangeLast90Days: commonCopy.date_range_picker.last_90_days,
+      dateRangeYTD: commonCopy.date_range_picker.ytd,
+      dateRangeLastYear: commonCopy.date_range_picker.last_year,
+      dateRangeSelect: commonCopy.date_range_picker.select,
+    },
+    dateRangeEditApply: commonCopy.date_range_picker.edit_apply,
+    dateRangeEditTitle: commonCopy.date_range_picker.edit_title,
+    dateRangeNextAria: commonCopy.date_range_picker.next_aria,
+    dateRangePreviousAria: commonCopy.date_range_picker.previous_aria,
+  } as DateRangeSelectorCopy
+
+  const startDate = dateRange ? dateRange.start : displayedDateRange.start
+  const endDate = dateRange ? dateRange.end : displayedDateRange.end
+
+  return (
+    <Card
+      className={className}
+      sx={{
+        borderRadius: '8px',
+        ...(isMobile && {
+          px: 4,
+        }),
+        '& .mx-cmn-date-range-selector': {
+          ...((isMobile || isTablet) && {
+            textAlign: 'center',
+          }),
+        },
+        ...sx,
+      }}
+    >
+      <CardHeader
+        action={
+          <Stack alignItems="center" flexDirection="row">
+            {isDesktop && calendarActions && (
+              <Box sx={{ flexGrow: 1 }}>
+                <DateRangeSelector
+                  calendarActions={calendarActions}
+                  copy={dateRangeSelectorCopy}
+                  range={[startDate, endDate]}
+                  shouldShrinkToIcon={false}
+                  variant={dateRangeVariant}
+                />
+              </Box>
+            )}
+            {accountOptions && (
+              <AccountFilter
+                accounts={accountOptions}
+                copy={accountFilterCopy}
+                onFilterClick={(guids) => {
+                  const selAcctGuids = accountOptions
+                    .filter((account) => guids.includes(account.guid))
+                    .map((account) => account.guid)
+
+                  setSelectedAccountGuids(selAcctGuids)
+                  onAccountsFilterClick?.()
+                }}
+                selectedAccountGuids={selectedAccountGuids}
+                showAccountNumbers={false}
+                sx={{ '& .mx-cmn-account-filter-title': { fontSize: 15 }, mx: 4 }}
+                variant="text"
+              />
+            )}
+            {actions.map((action) =>
+              isDesktop || isTablet ? (
+                <Button
+                  key={action.iconName}
+                  onClick={action.onClick}
+                  startIcon={<Icon name={action.iconName} />}
+                  sx={{ mx: 4 }}
+                >
+                  {action.label}
+                </Button>
+              ) : (
+                <IconButton
+                  aria-label={action.label}
+                  key={action.iconName}
+                  onClick={action.onClick}
+                >
+                  <Icon name={action.iconName} />
+                </IconButton>
+              ),
+            )}
+          </Stack>
+        }
+        sx={{
+          '& .MuiCardHeader-action': {
+            ...(calendarActions && isDesktop && { flexGrow: 1 }),
+            ...((isMobile || isTablet) && {
+              alignSelf: 'center',
+            }),
+          },
+          p: isDesktop ? 48 : 24,
+          pb: 0,
+        }}
+        title={
+          isDesktop || isTablet ? (
+            <H1>{title}</H1>
+          ) : (
+            <Stack alignItems="center" flexDirection="row">
+              {isMobile && onBackClick && (
+                <IconButton
+                  aria-label={commonCopy.back_to_dashboard}
+                  onClick={handleBackClick}
+                  sx={{ ml: -16, mr: 16 }}
+                >
+                  <Icon name="arrow_back" />
+                </IconButton>
+              )}
+              <H3>{title}</H3>
+            </Stack>
+          )
+        }
+      />
+
+      {hasDivider && <Divider sx={{ mt: isDesktop ? 48 : 24 }} />}
+
+      {calendarActions && (isMobile || isTablet) && (
+        <Stack gap={24} justifyContent="center" sx={{ mt: 16 }}>
+          {showDividerAboveDateSelector && <Divider />}
+          <DateRangeSelector
+            calendarActions={calendarActions}
+            copy={dateRangeSelectorCopy}
+            range={[startDate, endDate]}
+            shouldShrinkToIcon={false}
+            variant={dateRangeVariant}
+          />
+        </Stack>
+      )}
+      <CardContent ref={containerRef} sx={{ p: 0 }}>
+        <WidgetContainerProvider availableHeight={height} availableWidth={width}>
+          {children}
+        </WidgetContainerProvider>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default observer(WidgetContainer)

package/src/common/components/accountfilter/AccountFilter.tsx

@@ -0,0 +1,133 @@
+import React, { FC } from 'react'
+
+import Button from '@mui/material/Button'
+import { Icon } from '@kyper/mui'
+import Tooltip from '@mui/material/Tooltip'
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+import { type SxProps } from '@mui/material/styles'
+
+import { AccountFilterOptions } from './AccountFilterOptions'
+import { setupMappedSelectedOptions } from '../../utils/AccountFilter'
+
+import type { Account } from '../../types'
+import type { AccountFilterOptionsCopy } from './AccountFilterOptions'
+import type { MappedAccount, MappedOptions } from '../../utils/AccountFilter'
+import { useScreenSize } from '../../hooks'
+
+export type AccountFilterCopy = {
+  accountFilterOptionsCopy: AccountFilterOptionsCopy
+  title: string
+}
+
+// TODO: pass in copy to account filter like this when refactored
+// const accountFilterCopy = {
+//   ...copy.account_filter,
+//   accounts_type: copy.full_view.accounts_type,
+//   title: copy.full_view.account_filter_title,
+// }
+
+export interface AccountFilterProps {
+  accounts: Account[]
+  copy: AccountFilterCopy
+  onFilterClick: (selected: string[]) => void
+  onConnectAccountClick?: () => void
+  selectedAccountGuids: string[]
+  showAccountNumbers: boolean
+  sx?: SxProps
+  variant?: 'outlined' | 'text'
+}
+
+const AccountFilter: FC<AccountFilterProps> = ({
+  accounts,
+  copy,
+  onFilterClick,
+  onConnectAccountClick = () => {},
+  selectedAccountGuids,
+  showAccountNumbers,
+  sx = {},
+  variant = 'outlined',
+}) => {
+  const { isMobile } = useScreenSize()
+
+  const [accountFilterButtonEl, setAccountFilterButtonEl] =
+    React.useState<HTMLButtonElement | null>(null)
+
+  const [selectedOptions, setSelectedOptions] = React.useState<MappedOptions>(
+    setupMappedSelectedOptions(accounts, selectedAccountGuids),
+  )
+
+  React.useEffect(() => {
+    setSelectedOptions(setupMappedSelectedOptions(accounts, selectedAccountGuids))
+  }, [accounts, selectedAccountGuids])
+
+  const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAccountFilterButtonEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAccountFilterButtonEl(null)
+  }
+
+  return (
+    <Box className="mx-cmn-account-filter" m={4} sx={{ ...sx }}>
+      {isMobile ? (
+        <Tooltip id="filter-accounts" placement="bottom" title={copy.title}>
+          <IconButton
+            aria-controls="filter_accounts"
+            aria-describedby="filter-accounts"
+            aria-haspopup={true}
+            aria-label={copy.title}
+            onClick={onClick}
+          >
+            <Icon name="filter_alt" />
+          </IconButton>
+        </Tooltip>
+      ) : (
+        <Button
+          aria-controls="filter_accounts"
+          aria-haspopup={true}
+          aria-label={copy.title}
+          onClick={onClick}
+          startIcon={<Icon name="filter_alt" />}
+          variant={variant}
+        >
+          {copy.title}
+        </Button>
+      )}
+
+      <AccountFilterOptions
+        accountFilterButtonEl={accountFilterButtonEl}
+        accounts={accounts}
+        copy={copy.accountFilterOptionsCopy}
+        handleClose={handleClose}
+        onAccountClick={(account) => {
+          setSelectedOptions({ ...selectedOptions, [account.guid]: !selectedOptions[account.guid] })
+        }}
+        onAccountGroupClick={(accountType, mappedAccounts, allSelected) => {
+          const selectedOptionsClone = { ...selectedOptions }
+
+          mappedAccounts[accountType].forEach((account: MappedAccount) => {
+            selectedOptionsClone[account.guid] = !allSelected
+          })
+
+          setSelectedOptions(selectedOptionsClone)
+        }}
+        onCancelClick={() => {
+          setSelectedOptions(setupMappedSelectedOptions(accounts, selectedAccountGuids))
+          handleClose()
+        }}
+        onConnectAccountClick={onConnectAccountClick}
+        onFilterClick={() => {
+          onFilterClick(Object.keys(selectedOptions).filter((guid) => selectedOptions[guid]))
+          handleClose()
+        }}
+        selectedOptions={selectedOptions}
+        setSelectedOptions={setSelectedOptions}
+        showAccountNumbers={showAccountNumbers}
+      />
+    </Box>
+  )
+}
+
+export default AccountFilter