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

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

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

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

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

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

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

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

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