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

package/src/insights/settings/hiddeninsights/__tests__/SubCategoryDrawer.test.tsx

@@ -0,0 +1,150 @@
+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, vi } from 'vitest'
+
+import '@testing-library/jest-dom'
+
+import { GlobalDataProvider, GlobalStore } from '../../../../common'
+import { SubCategoryDrawer } from '../components/SubCategoryDrawer'
+import { ToastProvider } from '../../../contexts/ToastContext'
+import disabledBeatTemplates from '../../../../../mock/data/DisabledBeatTemplates.json'
+import globalCopy from '../../../../../mock/data/GlobalCopy.json'
+
+const globalStore = new GlobalStore()
+
+const renderSubCategoryDrawer = (props) => {
+  globalStore.initialize('/', '').finally()
+
+  return render(
+    <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+      <ThemeProvider theme={createMXTheme(props.useDarkMode ? 'dark' : 'light')}>
+        <ToastProvider>
+          <SubCategoryDrawer {...props} />
+        </ToastProvider>
+      </ThemeProvider>
+    </GlobalDataProvider>,
+  )
+}
+
+const SELECTED_CATEGORY = {
+  category_key: 'spending',
+  category: 'Insights for Spending',
+  subcategory_key: 'current_spending',
+  subcategory: 'Current Spending',
+}
+
+describe('SubCategoryDrawer', () => {
+  const baseProps = {
+    content: globalCopy.experiences.insights_feed.settings_menu,
+    disabledBeatTemplates: disabledBeatTemplates.filter((item) =>
+      item.categories.some(
+        (category) => category.subcategory_key === SELECTED_CATEGORY.subcategory_key,
+      ),
+    ),
+    handleEnableBeatTemplates: vi.fn(),
+    isOpen: true,
+    isUpdateLoading: false,
+    onClose: vi.fn(),
+    translatedSubCatetgory: SELECTED_CATEGORY.subcategory,
+  }
+
+  it('renders correctly when open', () => {
+    renderSubCategoryDrawer({ ...baseProps, isOpen: true })
+
+    expect(screen.getByText(SELECTED_CATEGORY.subcategory)).toBeInTheDocument()
+  })
+
+  it('does not render when closed', () => {
+    renderSubCategoryDrawer({ ...baseProps, isOpen: false })
+
+    expect(screen.queryByText(SELECTED_CATEGORY.subcategory)).not.toBeInTheDocument()
+  })
+
+  it('renders disabled beat templates correctly', () => {
+    renderSubCategoryDrawer({ ...baseProps })
+
+    baseProps.disabledBeatTemplates.forEach((template) => {
+      expect(screen.getByText(template.title)).toBeInTheDocument()
+    })
+  })
+
+  it('selects and unselects all beat templates when toggle all is clicked', () => {
+    renderSubCategoryDrawer({ ...baseProps })
+
+    const selectAllButton = screen.getByText('Select all')
+
+    fireEvent.click(selectAllButton)
+    baseProps.disabledBeatTemplates.forEach((template) => {
+      expect(
+        screen.getByRole('checkbox', { name: `Unselect ${template.name} insight` }),
+      ).toBeChecked()
+    })
+
+    const unselectAllButton = screen.getByText('Unselect all')
+
+    fireEvent.click(unselectAllButton)
+    baseProps.disabledBeatTemplates.forEach((template) => {
+      expect(
+        screen.getByRole('checkbox', { name: `Select ${template.name} insight` }),
+      ).not.toBeChecked()
+    })
+  })
+
+  it('calls handleEnableBeatTemplates when unhide selected insights button is clicked', () => {
+    renderSubCategoryDrawer({ ...baseProps })
+
+    const checkbox = screen.getByRole('checkbox', {
+      name: `Select ${baseProps.disabledBeatTemplates[0].name} insight`,
+    })
+    fireEvent.click(checkbox)
+
+    const unhideButton = screen.getByText('Show 1 hidden insight')
+    fireEvent.click(unhideButton)
+
+    expect(baseProps.handleEnableBeatTemplates).toHaveBeenCalledWith(
+      [baseProps.disabledBeatTemplates[0].name],
+      false,
+    )
+  })
+
+  it('shows the correct button text based on the number of selected insights', () => {
+    renderSubCategoryDrawer({ ...baseProps })
+
+    expect(screen.getByText('Show insights')).toBeInTheDocument()
+
+    const checkbox = screen.getByRole('checkbox', {
+      name: `Select ${baseProps.disabledBeatTemplates[0].name} insight`,
+    })
+    fireEvent.click(checkbox)
+    const checkbox2 = screen.getByRole('checkbox', {
+      name: `Select ${baseProps.disabledBeatTemplates[1].name} insight`,
+    })
+    fireEvent.click(checkbox2)
+
+    expect(screen.getByText('Show 2 hidden insights')).toBeInTheDocument()
+  })
+
+  it('resets checkbox state and calls onClose when the drawer is closed', () => {
+    renderSubCategoryDrawer({ ...baseProps })
+
+    const checkbox = screen.getByRole('checkbox', {
+      name: `Select ${baseProps.disabledBeatTemplates[0].name} insight`,
+    })
+    fireEvent.click(checkbox)
+
+    const closeButton = screen.getByLabelText(baseProps.content.close)
+    fireEvent.click(closeButton)
+
+    expect(baseProps.onClose).toHaveBeenCalled()
+    expect(
+      screen.getByRole('checkbox', {
+        name: `Select ${baseProps.disabledBeatTemplates[0].name} insight`,
+      }),
+    ).not.toBeChecked()
+  })
+})

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

@@ -0,0 +1,50 @@
+import Box from '@mui/material/Box'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { Text } from '@kyper/mui'
+import React from 'react'
+import { SettingsMenuContent } from '../types'
+
+import noInsightsImageUrl from '../images/no-insights.png'
+
+interface Props {
+  content: SettingsMenuContent
+}
+
+export const CategoryEmptyState: React.FC<Props> = ({ content = {} }) => {
+  const theme = useTheme()
+
+  return (
+    <Box px={24} py={32}>
+      <Text
+        color={theme.palette.text.secondary}
+        component="div"
+        fontWeight="bold"
+        height="72px"
+        maxWidth="297px"
+        truncate={false}
+        variant="Body"
+      >
+        {content.there_are_no_insights_hidden}
+      </Text>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          p: '16px 24px',
+        }}
+      >
+        <Box
+          sx={{
+            backgroundImage: `url(${noInsightsImageUrl})`,
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '100% 100%',
+            height: '105px',
+            width: '121px',
+          }}
+        />
+      </Box>
+    </Box>
+  )
+}

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

@@ -0,0 +1,222 @@
+import React, { useEffect } from 'react'
+
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import LoadingButton from '@mui/lab/LoadingButton'
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined'
+
+import { Icon } from '@kyper/mui'
+
+import Drawer from '../../../../common/components/drawer/Drawer'
+import Toast from '../../components/Toast'
+import PulseSubheaderRow from '../../components/PulseSubheaderRow'
+import { usePrevious } from '../../../../common/hooks/usePrevious'
+import { CategoryEmptyState } from './CategoryEmptyState'
+import { SubCategoryDrawer } from './SubCategoryDrawer'
+import SettingsItem from '../../components/SettingsItem'
+
+import { organizeBeats } from '../../../utils/beatTemplateCategories'
+
+import {
+  CategoryMapping,
+  BeatCategory,
+  SubcategoryMapping,
+  SettingsMenuContent,
+  DisabledBeatTemplatesStore,
+} from '../types'
+import { useToast } from '../../../contexts/ToastContext'
+
+interface Props {
+  content: SettingsMenuContent
+  disabledBeatTemplatesStore: DisabledBeatTemplatesStore
+}
+
+export const HiddenInsightsDrawer: React.FC<Props> = ({ content, disabledBeatTemplatesStore }) => {
+  const {
+    items: disabledBeatTemplates,
+    update: handleEnableBeatTemplates,
+    isUpdateError,
+    isUpdateLoading,
+  } = disabledBeatTemplatesStore
+
+  const [sortedBeats, translatedCategories, translatedSubcategories]: [
+    BeatCategory[],
+    CategoryMapping,
+    SubcategoryMapping,
+  ] = organizeBeats(disabledBeatTemplates)
+
+  const { toastState, showToast, hideToast, setMessage } = useToast()
+  const [isSubCatDrawerOpen, setIsSubCatDrawerOpen] = React.useState(false)
+  const [isSubCategoryDrawerOpen, setIsSubCategoryDrawerOpen] = React.useState(false)
+  const [selectedCategory, setSelectedCategory] = React.useState<string>('')
+  const [selectedSubCategory, setSelectedSubCategory] = React.useState<string>('')
+  const prevUpdateLoading = usePrevious(isUpdateLoading)
+
+  useEffect(() => {
+    //check if an update request was made
+    //otherwise if drawer opens with old api request state it will fire a toast
+    if (prevUpdateLoading && !isUpdateLoading) {
+      if (isUpdateError) {
+        showToast(content.something_went_wrong, 'error')
+      } else {
+        showToast(undefined, 'success')
+      }
+    }
+  }, [prevUpdateLoading, isUpdateError])
+
+  const handleUnhideAllInsights = () => {
+    setMessage(
+      disabledBeatTemplates.length > 1 ? content.insights_unhidden : content.insight_unhidden,
+    )
+    handleEnableBeatTemplates(disabledBeatTemplates.map((beat) => beat.name))
+  }
+
+  const handleOpenSubcategoryDrawer = (category: string, subcategory: string) => {
+    setIsSubCategoryDrawerOpen(true)
+    setSelectedCategory(category)
+    setSelectedSubCategory(subcategory)
+  }
+
+  const handleCloseSubCategoryDrawer = () => {
+    setIsSubCategoryDrawerOpen(false)
+    setSelectedSubCategory('')
+    setSelectedCategory('')
+  }
+
+  const handleEnableBeatTemplatesFromSubcategory = (
+    templateNames: string[],
+    shouldCloseDrawer: boolean,
+  ) => {
+    handleEnableBeatTemplates(templateNames)
+
+    if (shouldCloseDrawer) {
+      setIsSubCategoryDrawerOpen(false)
+    }
+
+    setMessage(templateNames.length > 1 ? content.insights_unhidden : content.insight_unhidden)
+  }
+
+  return (
+    <>
+      <SettingsItem
+        Icon={VisibilityOffOutlinedIcon}
+        itemCount={disabledBeatTemplates.length}
+        label={content.manage_hidden_insights}
+        onClick={() => setIsSubCatDrawerOpen(true)}
+      />
+      <Drawer
+        ariaLabelClose={content.close}
+        isOpen={isSubCatDrawerOpen}
+        onClose={() => setIsSubCatDrawerOpen(false)}
+        shouldShowHeaderBorders={false}
+        sx={{
+          '& .MuiDrawer-paper': {
+            backgroundColor: 'background.white',
+          },
+        }}
+        title={content.manage_hidden_insights}
+      >
+        <Divider />
+        <Stack height="calc(100vh - 61px)">
+          {disabledBeatTemplates.length > 0 ? (
+            <List sx={{ height: '100%' }}>
+              {sortedBeats.map(
+                (category) =>
+                  translatedCategories[category.key] !== '' && (
+                    <List
+                      key={category.key}
+                      subheader={
+                        <PulseSubheaderRow>{translatedCategories[category.key]}</PulseSubheaderRow>
+                      }
+                    >
+                      {category.subcategories.map(
+                        (subcategory, i) =>
+                          subcategory.beats.length > 0 && (
+                            <Box key={subcategory.key}>
+                              <ListItem disablePadding={true}>
+                                <ListItemButton
+                                  onClick={() =>
+                                    handleOpenSubcategoryDrawer(category.key, subcategory.key)
+                                  }
+                                >
+                                  <ListItemText
+                                    primary={translatedSubcategories[subcategory.key].replace(
+                                      /&amp;/g,
+                                      '&',
+                                    )}
+                                    secondary={
+                                      <React.Fragment>
+                                        {subcategory.beats.length}{' '}
+                                        {subcategory.beats.length > 1
+                                          ? content.insights_hidden
+                                          : content.insight_hidden}
+                                      </React.Fragment>
+                                    }
+                                  />
+                                  <Icon name="chevron_right" size={24} />
+                                </ListItemButton>
+                              </ListItem>
+                              <Divider
+                                sx={{ ml: i < category.subcategories.length - 1 ? 24 : 0 }}
+                              />
+                            </Box>
+                          ),
+                      )}
+                    </List>
+                  ),
+              )}
+            </List>
+          ) : (
+            <CategoryEmptyState content={content} />
+          )}
+          {/* Todo remove border-box after pulse has CSSbaseline */}
+          <Box boxSizing="border-box" pb={32} pt={24} px={24}>
+            {disabledBeatTemplates.length > 0 && (
+              <LoadingButton
+                color="primary"
+                fullWidth={true}
+                loading={isUpdateLoading}
+                onClick={handleUnhideAllInsights}
+                variant="contained"
+              >
+                {content.show_all_hidden_insights}
+              </LoadingButton>
+            )}
+            <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' },
+              }}
+            />
+          </Box>
+        </Stack>
+        <SubCategoryDrawer
+          content={content}
+          disabledBeatTemplates={
+            selectedSubCategory !== ''
+              ? sortedBeats
+                  .filter((category) => category.key === selectedCategory)[0]
+                  .subcategories.filter((subcategory) => subcategory.key === selectedSubCategory)[0]
+                  .beats
+              : []
+          }
+          handleEnableBeatTemplates={handleEnableBeatTemplatesFromSubcategory}
+          isOpen={isSubCategoryDrawerOpen}
+          isUpdateLoading={isUpdateLoading}
+          onClose={handleCloseSubCategoryDrawer}
+          translatedSubCatetgory={translatedSubcategories[selectedSubCategory]}
+        />
+      </Drawer>
+    </>
+  )
+}

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

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { ToastProvider } from '../../../contexts/ToastContext'
+import { HiddenInsightsDrawer } from './HiddenInsightsDrawer'
+import { SettingsMenuContent, DisabledBeatTemplatesStore } from '../types'
+
+interface Props {
+  content: SettingsMenuContent
+  disabledBeatTemplatesStore: DisabledBeatTemplatesStore
+}
+
+export const HiddenInsightsDrawerWrapper: React.FC<Props> = ({
+  content,
+  disabledBeatTemplatesStore,
+}) => {
+  return (
+    <ToastProvider>
+      <HiddenInsightsDrawer
+        content={content}
+        disabledBeatTemplatesStore={disabledBeatTemplatesStore}
+      />
+    </ToastProvider>
+  )
+}