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

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

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

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

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

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