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

package/src/insights/settings/hiddeninsights/components/SubCategoryDrawer.tsx

@@ -0,0 +1,256 @@
+import React, { useEffect } from 'react'
+
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import Button from '@mui/material/Button'
+import LoadingButton from '@mui/lab/LoadingButton'
+import Checkbox from '@mui/material/Checkbox'
+import useTheme from '@mui/material/styles/useTheme'
+import Box from '@mui/material/Box'
+import ListItemButton from '@mui/material/ListItemButton'
+import Stack from '@mui/material/Stack'
+
+import { DisabledBeatTemplate, SettingsMenuContent } from '../types'
+import { Text } from '@kyper/mui'
+
+import Drawer from '../../../../common/components/drawer/Drawer'
+import { usePrevious } from '../../../../common/hooks/usePrevious'
+import Toast from '../../components/Toast'
+import SubheaderRow from '../../components/PulseSubheaderRow'
+
+import { useToast } from '../../../contexts/ToastContext'
+
+interface Props {
+  content: SettingsMenuContent
+  disabledBeatTemplates: DisabledBeatTemplate[]
+  handleEnableBeatTemplates: (templateNames: string[], showSnackBar: boolean) => void
+  isOpen: boolean
+  isUpdateLoading: boolean
+  onClose: () => void
+  translatedSubCatetgory: string
+}
+
+export const SubCategoryDrawer: React.FC<Props> = ({
+  content,
+  disabledBeatTemplates = [],
+  handleEnableBeatTemplates = () => {},
+  isOpen = false,
+  isUpdateLoading = false,
+  onClose = () => {},
+  translatedSubCatetgory = '',
+}) => {
+  const theme = useTheme()
+
+  // using an object to store checkbox state because updating the check value via
+  // key/name in handleCheckboxChange is seemed cleaner than a map with a conditional
+  //
+  // [name]: checked
+  //      vs
+  // prevCheckboxes.map((checkbox) =>
+  //   checkbox.id === id ? { ...checkbox, checked: !checkbox.checked } : checkbox
+  // )
+  //
+  // for the initialCheckboxState, using reduce to create an object instead of map to create an array of objects also felt
+  // more focused for this use case
+  const initialCheckboxState = React.useMemo(
+    () => disabledBeatTemplates.reduce((acc, beat) => ({ ...acc, [beat.name]: false }), {}),
+    [disabledBeatTemplates],
+  )
+
+  const [beatTemplatesChecked, setBeatTemplatesChecked] = React.useState<{
+    [key: string]: boolean
+  }>(initialCheckboxState)
+
+  const { toastState, hideToast } = useToast()
+
+  const prevUpdateLoading = usePrevious(isUpdateLoading)
+
+  useEffect(() => {
+    //a update request was made
+    if (prevUpdateLoading && !isUpdateLoading) {
+      setBeatTemplatesChecked(initialCheckboxState)
+    }
+  }, [prevUpdateLoading, isUpdateLoading, initialCheckboxState, setBeatTemplatesChecked])
+
+  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, checked } = e.target
+    setBeatTemplatesChecked((prev) => ({
+      ...prev,
+      [name]: checked,
+    }))
+  }
+
+  const numCheckedBeats = Object.values(beatTemplatesChecked).filter(Boolean).length
+
+  const handleClose = () => {
+    setBeatTemplatesChecked(initialCheckboxState)
+    onClose()
+  }
+
+  const toggleAllCheckboxes = () => {
+    const newCheckboxesState = disabledBeatTemplates.reduce(
+      (acc, beat) => ({
+        ...acc,
+        [beat.name]: numCheckedBeats !== disabledBeatTemplates.length,
+      }),
+      {} as { [key: string]: boolean },
+    )
+    setBeatTemplatesChecked(newCheckboxesState)
+  }
+
+  const handleUnhideSelectedInisghts = () => {
+    const shouldCloseDrawer = numCheckedBeats === disabledBeatTemplates.length
+
+    handleEnableBeatTemplates(
+      Object.keys(beatTemplatesChecked).filter((key) => beatTemplatesChecked[key]),
+      shouldCloseDrawer,
+    )
+  }
+
+  return (
+    <Drawer
+      ariaLabelClose={content.close}
+      isOpen={isOpen}
+      onClose={handleClose}
+      shouldShowHeaderBorders={false}
+      sx={{
+        '& .MuiDrawer-paper': {
+          backgroundColor: 'background.white',
+        },
+      }}
+      title={translatedSubCatetgory.replace(/&amp;/g, '&')}
+    >
+      <Divider />
+      <Box px={24} py={16}>
+        <Text
+          sx={{
+            fontSize: theme.typography.Paragraph,
+            maxWidth: 327,
+            overflow: 'visible',
+            whiteSpace: 'normal',
+          }}
+        >
+          {content.select_insights_for_feed}
+        </Text>
+      </Box>
+      <Divider />
+      <Stack height="calc(100vh - 142px)">
+        <List
+          subheader={
+            <SubheaderRow>
+              <Box
+                boxSizing="border-box"
+                pt={8}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                  height: '100%',
+                }}
+              >
+                <Text fontSize={11} fontWeight={700}>
+                  {content.insight_name}
+                </Text>
+                <Button
+                  onClick={toggleAllCheckboxes}
+                  size="small"
+                  sx={{
+                    '&:hover': { backgroundColor: 'transparent' },
+                    color: theme.palette.primary.main,
+                    p: 0,
+                    height: 16,
+                    fontSize: 13,
+                    minWidth: 0,
+                  }}
+                >
+                  {numCheckedBeats === disabledBeatTemplates.length
+                    ? content.unselect_all
+                    : content.select_all}
+                </Button>
+              </Box>
+            </SubheaderRow>
+          }
+          sx={{ height: '100%' }}
+        >
+          {disabledBeatTemplates
+            .sort((a, b) => (a.name < b.name ? -1 : 1))
+            .map((beat, i) => (
+              <Box key={i}>
+                <ListItem disablePadding={true}>
+                  <ListItemButton
+                    onClick={() =>
+                      setBeatTemplatesChecked((prevCheckboxes) => ({
+                        ...prevCheckboxes,
+                        [beat.name]: !prevCheckboxes[beat.name],
+                      }))
+                    }
+                  >
+                    <ListItemText
+                      primary={beat.title}
+                      secondary={<React.Fragment>{beat.description}</React.Fragment>}
+                    />
+                    <Checkbox
+                      checked={
+                        beatTemplatesChecked[beat.name] ? beatTemplatesChecked[beat.name] : false
+                      }
+                      edge="end"
+                      inputProps={{
+                        'aria-label': beatTemplatesChecked[beat.name]
+                          ? `${content.unselect_insight.split(' ')[0]} ${
+                              beat.name
+                            } ${content.unselect_insight.split(' ')[1]}`
+                          : `${content.select_insight.split(' ')[0]} ${
+                              beat.name
+                            } ${content.select_insight.split(' ')[1]}`,
+                        role: 'checkbox',
+                      }}
+                      name={beat.name}
+                      onChange={handleCheckboxChange}
+                      size="small"
+                    />
+                  </ListItemButton>
+                </ListItem>
+                <Divider sx={{ ml: i < disabledBeatTemplates.length - 1 ? 24 : 0 }} />
+              </Box>
+            ))}
+        </List>
+        {/* Todo remove border-box after pulse has CSSbaseline */}
+        <Box
+          boxSizing="border-box"
+          pb={32}
+          pt={24}
+          px={24}
+          sx={{ display: 'flex', justifyContent: 'center' }}
+        >
+          {!isUpdateLoading && (
+            <Toast
+              handleClose={hideToast}
+              message={toastState.message}
+              open={toastState.isOpen}
+              severity={toastState.severity}
+              snackbarSx={{
+                boxSizing: 'border-box',
+                position: 'absolute',
+                '&.MuiSnackbar-root': { bottom: '24px', left: 0, right: 0, justifySelf: 'center' },
+              }}
+            />
+          )}
+          <LoadingButton
+            color="primary"
+            disabled={numCheckedBeats === 0}
+            fullWidth={true}
+            loading={isUpdateLoading}
+            onClick={handleUnhideSelectedInisghts}
+            variant="contained"
+          >
+            {numCheckedBeats > 0
+              ? `${content.show} ${numCheckedBeats} ${numCheckedBeats > 1 ? content.hidden_insights : content.hidden_insight}`
+              : content.show_insights}
+          </LoadingButton>
+        </Box>
+      </Stack>
+    </Drawer>
+  )
+}

package/src/insights/settings/hiddeninsights/types/index.ts

@@ -0,0 +1,74 @@
+export interface Category {
+  category_key: string
+  category: string
+  subcategory_key: string
+  subcategory: string
+}
+
+export interface DisabledBeatTemplate {
+  name: string
+  title: string
+  description: string
+  locale: string
+  client_namespace: string | null
+  categories: Category[]
+}
+
+export interface DisabledBeatTemplatesStore {
+  items: DisabledBeatTemplate[]
+  isUpdateLoading: boolean
+  isUpdateError: boolean
+  update: (beatTemplatesNames: string[]) => void
+}
+
+export type CategoryMapping = {
+  [key: string]: string
+}
+
+export type SubcategoryMapping = {
+  [key: string]: string
+}
+
+export interface BeatSubcategory {
+  key: string
+  beats: DisabledBeatTemplate[]
+}
+
+export interface BeatCategory {
+  key: string
+  subcategories: BeatSubcategory[]
+}
+
+export interface SettingsMenuContent {
+  account_data_hidden: string
+  account_data_shown: string
+  are_you_sure: string
+  cancel: string
+  close: string
+  hidden_insight: string
+  hidden_insights: string
+  insight_hidden: string
+  insight_name: string
+  insight_unhidden: string
+  insights_hidden: string
+  insights_unhidden: string
+  manage_accounts: string
+  manage_hidden_insights: string
+  open_accounts_drawer: string
+  select_all: string
+  select_insight: string
+  select_insights_for_feed: string
+  settings: string
+  show: string
+  show_all_hidden_insights: string
+  show_insights: string
+  something_went_wrong: string
+  there_are_no_insights_hidden: string
+  turn_off: string
+  turn_off_account: string
+  turn_on: string
+  turn_on_account: string
+  undo_reactivate_account: string
+  unselect_all: string
+  unselect_insight: string
+}

package/src/insights/settings/manageaccounts/__tests__/AccountGroup.test.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+
+import { ThemeProvider } from '@mui/material/styles'
+
+import { createMXTheme } from '@kyper/mui'
+
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, vi } from 'vitest'
+import '@testing-library/jest-dom'
+
+import { GlobalDataProvider, GlobalStore } from '../../../../common'
+import globalCopy from '../../../../../mock/data/GlobalCopy.json'
+import { AccountGroup } from '../components/AccountGroup'
+import groupedAccounts from '../../../../../mock/data/GroupedAccounts.json'
+
+const globalStore = new GlobalStore()
+
+const renderAccountGroup = (props) => {
+  globalStore.initialize('/', '').finally()
+
+  return render(
+    <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+      <ThemeProvider theme={createMXTheme(props.useDarkMode ? 'dark' : 'light')}>
+        <AccountGroup {...props} />
+      </ThemeProvider>
+    </GlobalDataProvider>,
+  )
+}
+
+const mockToggleAccount = vi.fn()
+
+describe('AccountGroup', () => {
+  const baseProps = {
+    accounts: groupedAccounts[0].accounts,
+    content: globalCopy.experiences.insights_feed.settings_menu,
+    toggleAccount: mockToggleAccount,
+    title: groupedAccounts[0].title,
+  }
+
+  it('renders the account group with account type, account name, intitution, and instiution logo', () => {
+    renderAccountGroup({ ...baseProps })
+
+    expect(screen.getByText(groupedAccounts[0].title)).toBeInTheDocument()
+    expect(
+      screen.getByText(groupedAccounts[0].accounts[0].truncatedDisplayName),
+    ).toBeInTheDocument()
+    expect(screen.getByText(groupedAccounts[0].accounts[0].institutionName)).toBeInTheDocument()
+  })
+
+  it('opens the confirmation dialog when clicking an account', () => {
+    renderAccountGroup({ ...baseProps })
+
+    fireEvent.click(screen.getByText(groupedAccounts[0].accounts[0].truncatedDisplayName))
+
+    expect(screen.getByText('Turn off account')).toBeInTheDocument()
+  })
+
+  it('calls toggleAccount when confirming the action', () => {
+    renderAccountGroup({ ...baseProps, accounts: groupedAccounts[1].accounts })
+
+    fireEvent.click(screen.getByText(groupedAccounts[1].accounts[0].truncatedDisplayName))
+
+    fireEvent.click(screen.getByText('Turn on'))
+
+    expect(mockToggleAccount).toHaveBeenCalledWith(
+      'confirm',
+      groupedAccounts[1].accounts[0].guid,
+      'ENABLE',
+    )
+  })
+
+  it('calls toggleAccount with "cancel" when closing the dialog', () => {
+    renderAccountGroup({ ...baseProps })
+
+    fireEvent.click(screen.getByText(groupedAccounts[0].accounts[0].truncatedDisplayName))
+
+    fireEvent.click(screen.getByText('Cancel'))
+
+    expect(mockToggleAccount).toHaveBeenCalledWith('cancel', '', 'DISABLE')
+  })
+
+  it('renders the Switch correctly based on account visibility', () => {
+    renderAccountGroup({
+      ...baseProps,
+      accounts: [...groupedAccounts[0].accounts, ...groupedAccounts[1].accounts],
+    })
+
+    expect(screen.getAllByRole('checkbox')[0]).toBeChecked()
+
+    expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked()
+  })
+})

package/src/insights/settings/manageaccounts/__tests__/ManageAccountsDrawer.test.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+
+import { ThemeProvider } from '@mui/material/styles'
+
+import { createMXTheme } from '@kyper/mui'
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, vi } from 'vitest'
+import '@testing-library/jest-dom'
+
+import { GlobalDataProvider, GlobalStore } from '../../../../common'
+import globalCopy from '../../../../../mock/data/GlobalCopy.json'
+import { ManageAccountsDrawer } from '../components/ManageAccountsDrawer'
+import groupedAccounts from '../../../../../mock/data/GroupedAccounts.json'
+
+const globalStore = new GlobalStore()
+
+const renderCategoryDrawer = (props) => {
+  globalStore.initialize('/', '').finally()
+
+  return render(
+    <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+      <ThemeProvider theme={createMXTheme(props.useDarkMode ? 'dark' : 'light')}>
+        <ManageAccountsDrawer {...props} />
+      </ThemeProvider>
+    </GlobalDataProvider>,
+  )
+}
+
+describe('ManageAccountsDrawer', () => {
+  const baseProps = {
+    content: globalCopy.experiences.insights_feed.settings_menu,
+    manageAcountsStore: {
+      handleAccountsDrawerAction: vi.fn(),
+      groupedAccounts: groupedAccounts,
+      toggleAccount: vi.fn(),
+    },
+    isOpen: true,
+    onClose: vi.fn(),
+  }
+
+  it('renders the drawer with correct title', () => {
+    renderCategoryDrawer({
+      ...baseProps,
+      manageAccountsStore: {
+        ...baseProps.manageAcountsStore,
+      },
+    })
+
+    fireEvent.click(screen.getByText('Manage accounts'))
+    const allTitles = screen.getAllByText('Manage accounts')
+    expect(allTitles[1]).toBeInTheDocument()
+  })
+
+  it('does not render the drawer when closed', () => {
+    renderCategoryDrawer({
+      ...baseProps,
+      manageAccountsStore: {
+        ...baseProps.manageAcountsStore,
+      },
+    })
+
+    expect(screen.queryByText('Savings account')).not.toBeInTheDocument()
+  })
+
+  it('renders account groups based on the store data', () => {
+    renderCategoryDrawer({
+      ...baseProps,
+      manageAccountsStore: {
+        ...baseProps.manageAcountsStore,
+      },
+    })
+
+    fireEvent.click(screen.getByText('Manage accounts'))
+
+    expect(
+      screen.getByText(groupedAccounts[0].accounts[0].truncatedDisplayName),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText(groupedAccounts[1].accounts[1].truncatedDisplayName),
+    ).toBeInTheDocument()
+  })
+})

package/src/insights/settings/manageaccounts/components/AccountGroup.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import Box from '@mui/material/Box'
+import Switch from '@mui/material/Switch'
+import Divider from '@mui/material/Divider'
+
+import { InstitutionLogo } from '@kyper/mui'
+
+import PulseSubheaderRow from '../../components/PulseSubheaderRow'
+
+import type { Account } from '../../../../common/types/Account'
+import { Dialog } from '../../../../common'
+import { SettingsMenuContent } from '../../hiddeninsights/types'
+
+interface Props {
+  accounts: Account[]
+  content: SettingsMenuContent
+  toggleAccount: (dialogueActionType: string, accountToUpdate: string, updateType: string) => void
+  title: string
+}
+
+export const AccountGroup: React.FC<Props> = ({
+  accounts = [],
+  content,
+  toggleAccount,
+  title = '',
+}) => {
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false)
+  const [accountUpdateData, setAccountUpdateData] = React.useState({
+    accountToUpdate: '',
+    updateType: '',
+  })
+
+  const prepareToToggleAccount = (account: Account) => {
+    setAccountUpdateData({
+      accountToUpdate: account.guid,
+      updateType: account.is_hidden ? 'ENABLE' : 'DISABLE',
+    })
+    setIsDialogOpen(true)
+  }
+
+  const handleToggleAccount = () => {
+    toggleAccount('confirm', accountUpdateData.accountToUpdate, accountUpdateData.updateType)
+    handleCloseDialog()
+  }
+
+  const handleCloseDialog = () => {
+    setIsDialogOpen(false)
+    toggleAccount('cancel', '', accountUpdateData.updateType)
+    //call analytics
+    setAccountUpdateData({
+      accountToUpdate: '',
+      updateType: '',
+    })
+  }
+
+  return (
+    <Box>
+      <PulseSubheaderRow>{title}</PulseSubheaderRow>
+      {accounts.map((account, i) => (
+        <Box key={account.guid}>
+          <ListItem>
+            <ListItemButton onClick={() => prepareToToggleAccount(account)}>
+              <ListItemAvatar>
+                <InstitutionLogo
+                  alt={`${account.displayName} logo`}
+                  institutionGuid={account.institution_guid || ''}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={account.truncatedDisplayName}
+                secondary={account.institutionName}
+              />
+              <Switch checked={!account.is_hidden} />
+            </ListItemButton>
+          </ListItem>
+          <Divider sx={{ ml: i < accounts.length - 1 ? 24 : 0 }} />
+        </Box>
+      ))}
+      <Dialog
+        copy={{
+          close_aria: content.close,
+          title:
+            accountUpdateData.updateType === 'DISABLE'
+              ? content.turn_off_account
+              : content.turn_on_account,
+        }}
+        isOpen={isDialogOpen}
+        onClose={handleCloseDialog}
+        onPrimaryAction={handleToggleAccount}
+        primaryText={
+          accountUpdateData.updateType === 'DISABLE' ? content.turn_off : content.turn_on
+        }
+      >
+        {accountUpdateData.updateType === 'DISABLE'
+          ? content.account_data_hidden + '*'
+          : content.account_data_shown}
+        <br />
+        <br />
+        {accountUpdateData.updateType === 'DISABLE'
+          ? '*' + content.undo_reactivate_account + '.'
+          : ''}
+      </Dialog>
+    </Box>
+  )
+}

package/src/insights/settings/manageaccounts/components/ManageAccountsDrawer.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import AccountBalanceOutlinedIcon from '@mui/icons-material/AccountBalanceOutlined'
+
+import Drawer from '../../../../common/components/drawer/Drawer'
+
+import { ManageAccountsStore } from '../types'
+import { AccountGroup } from './AccountGroup'
+import { SettingsMenuContent } from '../../hiddeninsights/types'
+import SettingsItem from '../../components/SettingsItem'
+
+interface Props {
+  content: SettingsMenuContent
+  manageAccountsStore: ManageAccountsStore
+}
+
+export const ManageAccountsDrawer: React.FC<Props> = ({ content, manageAccountsStore }) => {
+  const { groupedAccounts, toggleAccount } = manageAccountsStore
+  const [isAccountsControlDrawerOpen, setIsAccountsControlDrawerOpen] = React.useState(false)
+
+  return (
+    <>
+      <SettingsItem
+        Icon={AccountBalanceOutlinedIcon}
+        label={content.manage_accounts}
+        onClick={() => {
+          setIsAccountsControlDrawerOpen(true)
+          manageAccountsStore.handleAccountsDrawerAction('opened')
+        }}
+      />
+      <Drawer
+        ariaLabelClose={content.close}
+        isOpen={isAccountsControlDrawerOpen}
+        onClose={() => {
+          setIsAccountsControlDrawerOpen(false)
+          manageAccountsStore.handleAccountsDrawerAction('closed')
+        }}
+        shouldShowHeaderBorders={false}
+        sx={{
+          '& .MuiDrawer-paper': {
+            backgroundColor: 'background.white',
+          },
+        }}
+        title={content.manage_accounts}
+      >
+        <Divider />
+        <List sx={{ height: '100%' }}>
+          {groupedAccounts.map(({ accountType, accounts, title }) => (
+            <AccountGroup
+              accounts={accounts}
+              content={content}
+              key={accountType}
+              title={title}
+              toggleAccount={toggleAccount}
+            />
+          ))}
+        </List>
+      </Drawer>
+    </>
+  )
+}

package/src/insights/settings/manageaccounts/types/index.ts

@@ -0,0 +1,13 @@
+import type { Account } from './../../../../common/types/Account'
+
+export interface ManageAccountsStore {
+  handleAccountsDrawerAction: (actionType: string) => void
+  groupedAccounts: GroupedAccount[]
+  toggleAccount: (dialogueActionType: string, accountToUpdate: string, updateType: string) => void
+}
+
+export interface GroupedAccount {
+  accounts: Account[]
+  accountType: string
+  title: string
+}