feat: #7514 fixed a few bugs in app market (#7567)

packages/app-market/src/components/apps-browse/__tests__/app-filters-collection.test.tsx

@@ -5,6 +5,7 @@ import { handleSortConfigs } from '../apps-browse'
 import { appsBrowseConfigCollection } from '../../../core/config'
 import { trackEvent } from '../../../core/analytics'
 import { TrackingEvent } from '../../../core/analytics-events'
+import { mockCategoryModelPagedResult } from '../../../tests/__stubs__/categories'
 
 const configItem = handleSortConfigs(appsBrowseConfigCollection)().appsFilters[0]
 
@@ -23,7 +24,7 @@ describe('AppFiltersCollection', () => {
 describe('handleSetFilters', () => {
   it('should set filters', () => {
     const setAppsBrowseFilterState = jest.fn()
-    const curried = handleSetFilters(setAppsBrowseFilterState, configItem.filters)
+    const curried = handleSetFilters(setAppsBrowseFilterState, mockCategoryModelPagedResult, configItem.filters)
 
     curried()
 

packages/app-market/src/components/apps-browse/__tests__/app-search-filters-bar.test.tsx

@@ -2,15 +2,12 @@ import React, { ChangeEvent, MutableRefObject } from 'react'
 import { useAppsBrowseState } from '../../../core/use-apps-browse-state'
 import { mockAppsBrowseState } from '../../../core/__mocks__/use-apps-browse-state'
 import { render } from '../../../tests/react-testing'
-import { mockAppSummaryModelPagedResult } from '../../../tests/__stubs__/apps'
+import { mockCategoryModelPagedResult } from '../../../tests/__stubs__/categories'
 import { AppSearchFilters, handleClearSearch, handleSearch, handleSelectFilter } from '../app-search-filters-bar'
 import { MobileControlsState } from '../apps-browse'
 
 jest.mock('../../../core/use-apps-browse-state')
 jest.mock('../../../core/analytics')
-jest.mock('@reapit/utils-react', () => ({
-  useReapitGet: jest.fn(() => [mockAppSummaryModelPagedResult, false]),
-}))
 
 const mockUseAppsBrowseState = useAppsBrowseState as jest.Mock
 
@@ -50,7 +47,7 @@ describe('handleSelectFilter', () => {
       },
     } as unknown as ChangeEvent<HTMLInputElement>
     const setAppsBrowseFilterState = jest.fn()
-    const curried = handleSelectFilter(appsBrowseFilterState, setAppsBrowseFilterState)
+    const curried = handleSelectFilter(appsBrowseFilterState, setAppsBrowseFilterState, mockCategoryModelPagedResult)
 
     curried(event)
 
@@ -67,7 +64,7 @@ describe('handleSelectFilter', () => {
       },
     } as unknown as ChangeEvent<HTMLInputElement>
     const setAppsBrowseFilterState = jest.fn()
-    const curried = handleSelectFilter(appsBrowseFilterState, setAppsBrowseFilterState)
+    const curried = handleSelectFilter(appsBrowseFilterState, setAppsBrowseFilterState, mockCategoryModelPagedResult)
 
     curried(event)
 

packages/app-market/src/components/apps-browse/app-filters-collection.tsx

@@ -1,6 +1,10 @@
 import { cx } from '@linaria/core'
 import { elMb5, elMr7, FlexContainer, Icon, IconNames, MediaType, useMediaQuery } from '@reapit/elements'
-import { AppsBrowseConfigItemFiltersInterface, AppsBrowseConfigItemInterface } from '@reapit/foundations-ts-definitions'
+import {
+  AppsBrowseConfigItemFiltersInterface,
+  AppsBrowseConfigItemInterface,
+  CategoryModelPagedResult,
+} from '@reapit/foundations-ts-definitions'
 import React, { Dispatch, FC, memo, SetStateAction, useCallback, useMemo } from 'react'
 import { trackEvent } from '../../core/analytics'
 import { TrackingEvent } from '../../core/analytics-events'
@@ -14,11 +18,21 @@ interface AppFiltersCollectionProps {
 export const handleSetFilters =
   (
     setAppsBrowseFilterState: Dispatch<SetStateAction<AppsBrowseConfigItemFiltersInterface | null>>,
+    appsBrowseCategoriesState: CategoryModelPagedResult | null,
     filters?: AppsBrowseConfigItemFiltersInterface | null,
   ) =>
   () => {
     if (filters) {
       setAppsBrowseFilterState(filters)
+
+      const category = filters.category
+      const categoryNames = category?.map((categoryItem) => {
+        const foundCategory = appsBrowseCategoriesState?.data?.find((stateItem) => stateItem.id === categoryItem)
+        return foundCategory?.name ?? ''
+      })
+
+      filters.category = categoryNames
+
       trackEvent(TrackingEvent.ClickFiltersTile, true, { filters })
     }
   }
@@ -34,14 +48,17 @@ export const handleIconSize = (mediaQuery: MediaType) => () => {
 }
 
 export const AppFiltersCollection: FC<AppFiltersCollectionProps> = memo(({ configItem }) => {
-  const { setAppsBrowseFilterState } = useAppsBrowseState()
+  const { setAppsBrowseFilterState, appsBrowseCategoriesState } = useAppsBrowseState()
   const mediaQuery = useMediaQuery()
   const iconSize = useMemo(handleIconSize(mediaQuery), [mediaQuery])
   const { content, filters } = configItem
   const { isSuperWideScreen, is4KScreen } = mediaQuery
   const isFullSizeScreen = isSuperWideScreen || is4KScreen
 
-  const setFilters = useCallback(handleSetFilters(setAppsBrowseFilterState, filters), [filters])
+  const setFilters = useCallback(handleSetFilters(setAppsBrowseFilterState, appsBrowseCategoriesState, filters), [
+    filters,
+    appsBrowseCategoriesState,
+  ])
 
   return (
     <AppFilterCol onClick={setFilters}>

packages/app-market/src/components/apps-browse/app-search-filters-bar.tsx

@@ -24,10 +24,7 @@ import {
   appsSearchMobileFilterControlsActive,
   appsSearchMobileControls,
 } from './__styles__'
-import { useReapitGet } from '@reapit/utils-react'
 import { AppsBrowseConfigItemFiltersInterface, CategoryModelPagedResult } from '@reapit/foundations-ts-definitions'
-import { GetActionNames, getActions } from '@reapit/utils-common'
-import { reapitConnectBrowserSession } from '../../core/connect-session'
 import { cx } from '@linaria/core'
 import debounce from 'just-debounce-it'
 import { MobileControlsState } from './apps-browse'
@@ -44,6 +41,7 @@ export const handleSelectFilter =
   (
     appsBrowseFilterState: AppsBrowseConfigItemFiltersInterface | null,
     setAppsBrowseFilterState: Dispatch<SetStateAction<AppsBrowseConfigItemFiltersInterface | null>>,
+    appsBrowseCategoriesState: CategoryModelPagedResult | null,
   ) =>
   (event: ChangeEvent<HTMLInputElement>) => {
     const newCategory = event.target.value
@@ -62,8 +60,12 @@ export const handleSelectFilter =
     }
 
     const category = [...currentCategory, newCategory]
+    const categoryNames = category.map((categoryItem) => {
+      const foundCategory = appsBrowseCategoriesState?.data?.find((stateItem) => stateItem.id === categoryItem)
+      return foundCategory?.name ?? ''
+    })
 
-    trackEvent(TrackingEvent.FilterApps, true, { category })
+    trackEvent(TrackingEvent.FilterApps, true, { categoryNames })
 
     return setAppsBrowseFilterState({
       ...currentFilters,
@@ -109,20 +111,15 @@ export const handleClearSearch =
   }
 
 export const AppSearchFilters: FC<AppSearchFiltersProps> = memo(({ mobileControlsState }) => {
-  const { appsBrowseFilterState, setAppsBrowseFilterState } = useAppsBrowseState()
+  const { appsBrowseFilterState, appsBrowseCategoriesState, setAppsBrowseFilterState } = useAppsBrowseState()
   const searchRef = useRef<HTMLInputElement | null>(null)
 
-  const [categories] = useReapitGet<CategoryModelPagedResult>({
-    reapitConnectBrowserSession,
-    action: getActions(window.reapit.config.appEnv)[GetActionNames.getAppCategories],
-    queryParams: { pageSize: 25 },
-  })
-
   const debouncedSearch = useCallback(debounce(handleSearch(setAppsBrowseFilterState), 500), [])
   const clearSearch = useCallback(handleClearSearch(setAppsBrowseFilterState, searchRef), [searchRef])
-  const selectFilter = useCallback(handleSelectFilter(appsBrowseFilterState, setAppsBrowseFilterState), [
-    appsBrowseFilterState,
-  ])
+  const selectFilter = useCallback(
+    handleSelectFilter(appsBrowseFilterState, setAppsBrowseFilterState, appsBrowseCategoriesState),
+    [appsBrowseFilterState],
+  )
 
   const hasFilters = appsBrowseFilterState && Boolean(Object.keys(appsBrowseFilterState).length)
 
@@ -153,15 +150,15 @@ export const AppSearchFilters: FC<AppSearchFiltersProps> = memo(({ mobileControl
           Browse By
         </BodyText>
       </FlexContainer>
-      {Boolean(categories?.data?.length) && (
+      {Boolean(appsBrowseCategoriesState?.data?.length) && (
         <ElMultiSelectUnSelected
           className={cx(
             elFadeIn,
             appsFiltersCategories,
             mobileControlsState !== 'filters' && appsSearchDesktopControls,
           )}
         >
-          {categories?.data?.map(({ id, name }) => (
+          {appsBrowseCategoriesState?.data?.map(({ id, name }) => (
             <MultiSelectChip
               className={elHasGreyChips}
               id={id}

packages/app-market/src/components/apps-detail/app-install-modal.tsx

@@ -90,7 +90,7 @@ export const AppInstallModalContent: FC<AppInstallModalContentProps> = ({
   const closeWithoutInstalling = useCallback(handleCloseModal(closeModal, name, clientId, email), [connectSession, app])
   const confirmInstall = useCallback(
     handleInstall(installApp, refetchApp, closeModal, successOpenModal, name, id, clientId, email),
-    [connectSession, app],
+    [connectSession, app, installApp],
   )
   const trackReadDocs = useCallback(trackEventHandler(TrackingEvent.ClickReadDocs, true), [])
   const trackNavigateMmApp = useCallback(trackEventHandler(TrackingEvent.ClickReadDocs, true), [])

packages/app-market/src/core/__mocks__/use-apps-browse-state.tsx

@@ -1,9 +1,11 @@
+import { mockCategoryModelPagedResult } from '../../tests/__stubs__/categories'
 import { appsBrowseConfigCollection } from '../config'
 
 export const mockAppsBrowseState = {
   appsBrowseDataState: {},
   appsBrowseFilterState: null,
   appsBrowseConfigState: appsBrowseConfigCollection,
+  appsBrowseCategoriesState: mockCategoryModelPagedResult,
   setAppsBrowseFilterState: jest.fn(),
 }
 

packages/app-market/src/core/use-apps-browse-state.tsx

@@ -1,4 +1,8 @@
-import { AppsBrowseConfigItemFiltersInterface, AppsBrowseConfigItemInterface } from '@reapit/foundations-ts-definitions'
+import {
+  AppsBrowseConfigItemFiltersInterface,
+  AppsBrowseConfigItemInterface,
+  CategoryModelPagedResult,
+} from '@reapit/foundations-ts-definitions'
 import { GetActionNames, getActions } from '@reapit/utils-common'
 import { useReapitGet } from '@reapit/utils-react'
 import React, { FC, createContext, useContext, useState, SetStateAction, Dispatch, useEffect } from 'react'
@@ -29,6 +33,7 @@ export interface AppsBrowseConfigCollection {
 export interface AppsBrowseStateHook {
   appsBrowseFilterState: AppsBrowseConfigItemFiltersInterface | null
   appsBrowseConfigState: AppsBrowseConfigCollection | null
+  appsBrowseCategoriesState: CategoryModelPagedResult | null
   setAppsBrowseFilterState: Dispatch<SetStateAction<AppsBrowseConfigItemFiltersInterface | null>>
 }
 
@@ -52,11 +57,18 @@ export const AppsBrowseProvider: FC = ({ children }) => {
     },
   })
 
+  const [appsBrowseCategoriesCollection] = useReapitGet<CategoryModelPagedResult>({
+    reapitConnectBrowserSession,
+    action: getActions(window.reapit.config.appEnv)[GetActionNames.getAppCategories],
+    queryParams: { pageSize: 25 },
+  })
+
   return (
     <Provider
       value={{
         appsBrowseFilterState,
         appsBrowseConfigState: appsBrowseConfigCollection,
+        appsBrowseCategoriesState: appsBrowseCategoriesCollection,
         setAppsBrowseFilterState: setAppsBrowseFilterState,
       }}
     >

packages/app-market/src/tests/__stubs__/categories.ts

@@ -0,0 +1,55 @@
+import { CategoryModelPagedResult } from '@reapit/foundations-ts-definitions'
+
+export const mockCategoryModelPagedResult: CategoryModelPagedResult = {
+  data: [
+    {
+      id: '9',
+      name: 'Tools',
+      description: 'General purpose tools',
+    },
+    {
+      id: '8',
+      name: 'Social',
+      description: 'Social media and collaborative',
+    },
+    {
+      id: '7',
+      name: 'Marketing',
+      description: 'Marketing and advertisement',
+    },
+    {
+      id: '6',
+      name: 'Communication',
+      description: 'Messaging and communication',
+    },
+    {
+      id: '5',
+      name: 'Media',
+      description: 'Pictures and video',
+    },
+    {
+      id: '4',
+      name: 'Events',
+      description: 'Events and scheduling',
+    },
+    {
+      id: '3',
+      name: 'Finance',
+      description: 'Finance apps',
+    },
+    {
+      id: '2',
+      name: 'Productivity',
+      description: 'Productivity aids',
+    },
+    {
+      id: '1',
+      name: 'Other',
+      description: 'Everything else',
+    },
+  ],
+  pageNumber: 1,
+  pageSize: 25,
+  pageCount: 9,
+  totalCount: 9,
+}

packages/app-marketplace-admin/src/components/apps-market-manager/app-browse-upsert-modal.tsx

@@ -270,9 +270,9 @@ export const AppBrowseUpsertModal: FC<AppBrowseUpsertModalDefaultProps> = ({
                   id="filters.category"
                   {...register('filters.category')}
                   options={
-                    categories?.data?.map(({ name, description }) => ({
-                      name: description as string,
-                      value: name as string,
+                    categories?.data?.map(({ name, id }) => ({
+                      name: name as string,
+                      value: id as string,
                     })) || []
                   }
                   defaultValues={defaultValues?.filters?.category}