@planningcenter/chat-react-native 4.4.1-qa-staging.17 → 4.4.1-qa-staging.18

package/src/components/display/icon_tile.tsx

@@ -0,0 +1,54 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useFontScale, useTheme } from '../../hooks'
+import { MAX_FONT_SIZE_MULTIPLIER } from '../../utils'
+import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
+
+const ICON_SIZE_PX = 16
+
+interface IconTileProps {
+  icon: IconDefinition
+  size?: AvatarRootProps['size']
+  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
+  style?: AvatarRootProps['style']
+  testID?: string
+}
+
+export function IconTile({
+  icon,
+  size = 'lg',
+  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+  style,
+  testID,
+}: IconTileProps) {
+  const styles = useStyles()
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
+
+  return (
+    <AvatarPrimitive.Root size={size} maxFontSizeMultiplier={maxFontSizeMultiplier} style={style}>
+      <AvatarPrimitive.Mask>
+        <View style={styles.tile} testID={testID} accessibilityElementsHidden>
+          <FontAwesomeIcon icon={icon} size={ICON_SIZE_PX * fontScale} color={styles.icon.color} />
+        </View>
+      </AvatarPrimitive.Mask>
+    </AvatarPrimitive.Root>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    tile: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: colors.fillColorNeutral070,
+    },
+    icon: {
+      color: colors.iconColorDefaultPrimary,
+    },
+  })
+}

package/src/components/display/index.ts

@@ -4,6 +4,7 @@ export * from './badge'
 export * from './conversation_avatar'
 export * from './emoji_avatar'
 export * from './icon_avatar'
+export * from './icon_tile'
 export * from './banner_collapsible'
 export * from './banner'
 export * from './button'

package/src/contexts/conversations_context.tsx

@@ -45,13 +45,14 @@ export const ConversationsContextProvider = ({
   opts?: ApiGetQueryOptions
 }>) => {
   const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
-  const { chat_group_graph_id, group_source_app_name, show_direct_messages } = args
+  const { chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived } = args
 
   const query = useConversations(
     {
       chat_group_graph_id,
       group_source_app_name,
       show_direct_messages,
+      show_archived,
     },
     paginatorOptions
   )

package/src/hooks/__tests__/use_conversation_archive.test.tsx

@@ -5,6 +5,7 @@ import { Alert } from 'react-native'
 import { buildTestQueryClient } from '../../__utils__/query_client'
 import { getConversationsRequestArgs } from '../../utils/request/conversation'
 import { getConversationRequestArgs, useConversationArchive } from '../use_conversation'
+import { currentPersonQueryKey } from '../use_current_person'
 import { getRequestQueryKey } from '../use_suspense_api'
 
 const mockPost = jest.fn()
@@ -33,6 +34,9 @@ describe('useConversationArchive', () => {
     queryClient = buildQueryClient()
     queryClient.setQueryData(conversationKey, { data: { id: conversation_id } })
     queryClient.setQueryData(conversationsKey, { data: [] })
+    queryClient.setQueryData(currentPersonQueryKey, {
+      data: { id: 1, canBrowseArchivedConversations: false },
+    })
     mockPost.mockReset()
     jest.spyOn(Alert, 'alert').mockImplementation(() => {})
   })
@@ -58,6 +62,24 @@ describe('useConversationArchive', () => {
       })
       expect(isInvalidated(conversationKey)).toBe(true)
       expect(isInvalidated(conversationsKey)).toBe(true)
+      expect(isInvalidated(currentPersonQueryKey)).toBe(false)
+    }
+  )
+
+  it.each([
+    [true, true],
+    [false, false],
+  ])(
+    'sets archive access in the person cache to %s after archived=%s',
+    async (archived, canBrowse) => {
+      mockPost.mockResolvedValue({ data: { id: conversation_id } })
+      const { result } = renderHook(() => useConversationArchive({ conversation_id }), { wrapper })
+
+      await act(() => result.current.mutateAsync(archived))
+
+      expect(queryClient.getQueryData(currentPersonQueryKey)).toEqual({
+        data: { id: 1, canBrowseArchivedConversations: canBrowse },
+      })
     }
   )
 

package/src/hooks/__tests__/use_jolt.test.tsx

@@ -81,13 +81,15 @@ describe('useJoltForegroundPing', () => {
     return null
   }
 
-  const renderForegroundPing = (joltClient: Partial<JoltClient>) => {
+  const renderForegroundPing = (joltClient: Partial<JoltClient>, { mounts = 1 } = {}) => {
     const queryClient = buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
     queryClient.setQueryData(['jolt-client', 'wss://jolt.test', 'a-real-token'], joltClient)
 
-    render(
+    const result = render(
       <QueryClientProvider client={queryClient}>
-        <PingProbe />
+        {Array.from({ length: mounts }, (_, index) => (
+          <PingProbe key={index} />
+        ))}
       </QueryClientProvider>
     )
 
@@ -96,7 +98,7 @@ describe('useJoltForegroundPing', () => {
       (_state: AppStateStatus) => void,
     ]
 
-    return onChange
+    return { onChange, unmount: result.unmount }
   }
 
   beforeEach(() => {
@@ -105,7 +107,7 @@ describe('useJoltForegroundPing', () => {
 
   it('pings the jolt client once when the app returns to the foreground', () => {
     const ping = jest.fn()
-    const onChange = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
 
     onChange('background')
     onChange('active')
@@ -113,9 +115,29 @@ describe('useJoltForegroundPing', () => {
     expect(ping).toHaveBeenCalledTimes(1)
   })
 
+  it('registers one listener and pings once no matter how many providers mount it', () => {
+    const ping = jest.fn()
+    const remove = jest.fn()
+    addEventListener.mockReturnValueOnce({ remove })
+    const { onChange, unmount } = renderForegroundPing(
+      { ping, subscriptions: [confirmedSubscription] },
+      { mounts: 3 }
+    )
+
+    onChange('background')
+    onChange('active')
+
+    expect(addEventListener).toHaveBeenCalledTimes(1)
+    expect(ping).toHaveBeenCalledTimes(1)
+
+    unmount()
+
+    expect(remove).toHaveBeenCalledTimes(1)
+  })
+
   it('does not ping when there are no confirmed subscriptions', () => {
     const ping = jest.fn()
-    const onChange = renderForegroundPing({ ping, subscriptions: [] })
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [] })
 
     onChange('background')
     onChange('active')
@@ -125,7 +147,7 @@ describe('useJoltForegroundPing', () => {
 
   it('does not ping when the app leaves the foreground', () => {
     const ping = jest.fn()
-    const onChange = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
 
     onChange('inactive')
     onChange('background')
@@ -137,7 +159,7 @@ describe('useJoltForegroundPing', () => {
     const ping = jest.fn(() => {
       throw new Error('No WebSocket')
     })
-    const onChange = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
 
     onChange('background')
 

package/src/hooks/index.ts

@@ -3,6 +3,7 @@ export { useApiClient } from './use_api_client'
 export * from './use_api'
 export * from './use_app_state'
 export * from './use_async_storage'
+export * from './use_can_browse_archived_conversations'
 export * from './use_at_font_scale_breakpoint'
 export * from './use_chat_permissions'
 export * from './use_create_android_ripple_color'
@@ -16,6 +17,7 @@ export * from './use_groups_groups'
 export * from './use_groups'
 export * from './use_selected_chip_background_color'
 export * from './use_interaction_tinted_background_color'
+export * from './use_manual_archiving_enabled'
 export * from './use_message_reaction_toggle'
 export * from './use_new_conversation_entry'
 export * from './use_organization'

package/src/hooks/use_can_browse_archived_conversations.ts

@@ -0,0 +1,17 @@
+import { CurrentPersonResource } from '../types'
+import { FIVE_MINUTES } from '../utils/time'
+import { useApiGet } from './use_api'
+import { currentPersonRequestArgs } from './use_current_person'
+import { useManualArchivingEnabled } from './use_manual_archiving_enabled'
+
+export const useCanBrowseArchivedConversations = (): boolean => {
+  const manualArchivingEnabled = useManualArchivingEnabled()
+  const { data: person, isFetched } = useApiGet<CurrentPersonResource>(currentPersonRequestArgs, {
+    enabled: manualArchivingEnabled,
+    staleTime: FIVE_MINUTES,
+  })
+
+  if (!manualArchivingEnabled || !isFetched) return false
+
+  return person?.canBrowseArchivedConversations ?? false
+}

package/src/hooks/use_clear_conversation_filters.ts

@@ -10,6 +10,7 @@ export function useClearConversationFilters() {
       chat_group_graph_id: undefined,
       group_source_app_name: undefined,
       show_direct_messages: undefined,
+      show_archived: undefined,
     })
   }, [navigation])
 }

package/src/hooks/use_conversation.ts

@@ -6,6 +6,7 @@ import { transformGetToPost } from '../utils/client/request_helpers'
 import { Haptic } from '../utils/native_adapters'
 import { getConversationsRequestArgs } from '../utils/request/conversation'
 import { useApiClient } from './use_api_client'
+import { useCurrentPersonCache } from './use_current_person'
 import { getRequestQueryKey, SuspenseGetQueryOptions, useSuspenseGet } from './use_suspense_api'
 
 export const getConversationRequestArgs = ({ conversation_id }: { conversation_id: number }) => ({
@@ -188,6 +189,7 @@ export const useConversationDelete = ({ conversation_id }: { conversation_id: nu
 export const useConversationArchive = ({ conversation_id }: { conversation_id: number }) => {
   const apiClient = useApiClient()
   const queryClient = useQueryClient()
+  const currentPersonCache = useCurrentPersonCache()
   const conversationQueryKey = getRequestQueryKey(getConversationRequestArgs({ conversation_id }))
   const { url } = getConversationsRequestArgs()
 
@@ -201,8 +203,9 @@ export const useConversationArchive = ({ conversation_id }: { conversation_id: n
         data: { data: { type: 'Conversation', attributes: {} } },
       })
     },
-    onSuccess: () => {
+    onSuccess: (_response, archived) => {
       Haptic.notificationSuccess()
+      if (archived) currentPersonCache.update({ canBrowseArchivedConversations: true })
       queryClient.invalidateQueries({ queryKey: [url] })
       return queryClient.invalidateQueries({ queryKey: conversationQueryKey })
     },

package/src/hooks/use_current_person.ts

@@ -18,6 +18,7 @@ export const currentPersonRequestArgs = {
         'age_qualification_status',
         'direct_messages_disabled',
         'direct_messages_eligible',
+        'can_browse_archived_conversations',
         'under_18',
       ],
     },

package/src/hooks/use_jolt.ts

@@ -140,19 +140,44 @@ const pingSubscribedJoltClients = (queryClient: QueryClient) => {
     })
 }
 
+const foregroundPingListeners = new Map<QueryClient, { mounts: number; remove: () => void }>()
+
+const subscribeToForegroundPing = (queryClient: QueryClient) => {
+  const existing = foregroundPingListeners.get(queryClient)
+  if (existing) {
+    existing.mounts += 1
+    return
+  }
+
+  let previousState: AppStateStatus = AppState.currentState
+  const subscription = AppState.addEventListener('change', nextState => {
+    if (nextState === 'active' && previousState !== 'active') {
+      pingSubscribedJoltClients(queryClient)
+    }
+    previousState = nextState
+  })
+
+  foregroundPingListeners.set(queryClient, { mounts: 1, remove: () => subscription.remove() })
+}
+
+const unsubscribeFromForegroundPing = (queryClient: QueryClient) => {
+  const existing = foregroundPingListeners.get(queryClient)
+  if (!existing) return
+
+  existing.mounts -= 1
+  if (existing.mounts > 0) return
+
+  existing.remove()
+  foregroundPingListeners.delete(queryClient)
+}
+
 export const useJoltForegroundPing = () => {
   const queryClient = useQueryClient()
 
   useEffect(() => {
-    let previousState: AppStateStatus = AppState.currentState
-    const subscription = AppState.addEventListener('change', nextState => {
-      if (nextState === 'active' && previousState !== 'active') {
-        pingSubscribedJoltClients(queryClient)
-      }
-      previousState = nextState
-    })
+    subscribeToForegroundPing(queryClient)
 
-    return () => subscription.remove()
+    return () => unsubscribeFromForegroundPing(queryClient)
   }, [queryClient])
 }
 

package/src/hooks/use_manual_archiving_enabled.ts

@@ -0,0 +1,10 @@
+import { availableFeatures, useFeatures } from './use_features'
+
+export function useManualArchivingEnabled() {
+  const { featureEnabled } = useFeatures()
+
+  return (
+    featureEnabled(availableFeatures.manual_archiving) ||
+    featureEnabled(availableFeatures.manual_archiving_rollout)
+  )
+}

package/src/screens/conversation_details_screen.tsx

@@ -50,6 +50,7 @@ import {
   useConversationUpdate,
 } from '../hooks/use_conversation'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
+import { useManualArchivingEnabled } from '../hooks/use_manual_archiving_enabled'
 import { usePreviewAvatarDiameter } from '../hooks/use_preview_avatar_diameter'
 import { useUnarchiveConversationAction } from '../hooks/use_unarchive_conversation_action'
 import { type ConversationResource, MemberResource, isDefined } from '../types'
@@ -113,9 +114,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const { featureEnabled } = useFeatures()
   const granularNotificationsEnabled = featureEnabled(availableFeatures.granular_notifications_ui)
   const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
-  const manualArchivingEnabled =
-    featureEnabled(availableFeatures.manual_archiving) ||
-    featureEnabled(availableFeatures.manual_archiving_rollout)
+  const manualArchivingEnabled = useManualArchivingEnabled()
   const showGenderFilter =
     featureEnabled(availableFeatures.gender_specific_conversations) && !!conversation.genderOption
   const genderLabel = conversation.genderOption ? genderDisplayLabel(conversation.genderOption) : ''

package/src/screens/conversation_filters/__tests__/conversation_filters.test.tsx

@@ -0,0 +1,101 @@
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { fireEvent, render, within } from '@testing-library/react-native'
+import React from 'react'
+import { ConversationFilters } from '../components/conversation_filters'
+import { FilterContext } from '../context/conversation_filter_context'
+import { ConversationFiltersParams } from '../screen_props'
+
+jest.mock('react-native-gesture-handler', () => {
+  const { createElement } = jest.requireActual('react')
+  const { FlatList } = jest.requireActual('react-native')
+
+  return {
+    FlatList: (props: object) => createElement(FlatList, { ...props, initialNumToRender: 50 }),
+  }
+})
+
+let mockCanBrowseArchived = false
+jest.mock('../../../hooks/use_can_browse_archived_conversations', () => ({
+  useCanBrowseArchivedConversations: () => mockCanBrowseArchived,
+}))
+jest.mock('../../../hooks/use_direct_messages_eligible', () => ({
+  useDirectMessagesEligible: () => false,
+}))
+jest.mock('../../../hooks/use_filter_dropdown_enabled', () => ({
+  useFilterDropdownEnabled: () => false,
+}))
+jest.mock('../../../hooks/use_has_direct_messages', () => ({
+  useHasDirectMessages: () => false,
+}))
+jest.mock('../hooks/filters', () => ({
+  useGroupsToFilter: () => ({ groups: [] }),
+  useTeamsToFilter: () => ({ teams: [] }),
+}))
+
+const mockSetAppFilter = jest.fn()
+
+const renderFilters = (params: ConversationFiltersParams = {}) =>
+  render(
+    <ThemeProvider value={DefaultTheme}>
+      <FilterContext.Provider
+        value={{
+          params,
+          scrollOffset: 0,
+          setScrollOffset: jest.fn(),
+          setFormSheetHeaderHeight: jest.fn(),
+          resetFilter: jest.fn(),
+          setGroupFilter: jest.fn(),
+          setAppFilter: mockSetAppFilter,
+          applyFilters: jest.fn(),
+          platformListPaddingBottom: 0,
+        }}
+      >
+        <ConversationFilters />
+      </FilterContext.Provider>
+    </ThemeProvider>
+  )
+
+describe('ConversationFilters archived option', () => {
+  beforeEach(() => {
+    mockSetAppFilter.mockClear()
+    mockCanBrowseArchived = false
+  })
+
+  it('hides the Other section when the person cannot browse archived conversations', () => {
+    const view = renderFilters()
+
+    expect(view.queryByText('Other')).toBeNull()
+    expect(view.queryByText('Archived conversations')).toBeNull()
+  })
+
+  it('offers Archived under Other when the person can browse archived conversations', () => {
+    mockCanBrowseArchived = true
+
+    const view = renderFilters()
+
+    expect(view.getByText('Other')).toBeTruthy()
+    expect(view.getByText('Archived conversations')).toBeTruthy()
+    expect(view.getByText('Archived for everybody')).toBeTruthy()
+    expect(view.queryByRole('button', { selected: true })).toBeNull()
+  })
+
+  it('selecting Archived sets the archived filter param', () => {
+    mockCanBrowseArchived = true
+
+    const view = renderFilters()
+
+    fireEvent.press(view.getByText('Archived conversations'))
+
+    expect(mockSetAppFilter).toHaveBeenCalledTimes(1)
+    expect(mockSetAppFilter).toHaveBeenCalledWith({ show_archived: true })
+  })
+
+  it('preselects Archived when it is the active filter', () => {
+    mockCanBrowseArchived = true
+
+    const view = renderFilters({ show_archived: true })
+
+    const selected = view.getByRole('button', { selected: true })
+    expect(within(selected).getByText('Archived conversations')).toBeTruthy()
+  })
+})

package/src/screens/conversation_filters/components/conversation_filters.tsx

@@ -4,11 +4,13 @@ import { FlatList } from 'react-native-gesture-handler'
 import { Heading } from '../../../components'
 import {
   useAtFontScaleBreakpoint,
+  useCanBrowseArchivedConversations,
   useDirectMessagesEligible,
   useHasDirectMessages,
   useTheme,
 } from '../../../hooks'
 import { useFilterDropdownEnabled } from '../../../hooks/use_filter_dropdown_enabled'
+import { faBoxArchive } from '../../../vendor/font_awesome_pro_solid_icons'
 import { FilterContext, useFilterContext } from '../context/conversation_filter_context'
 import { FilterTypes } from '../filter_types'
 import { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters'
@@ -17,6 +19,8 @@ import {
   FilterRow,
   GroupRow,
   GroupRowProps,
+  OtherRow,
+  OtherRowProps,
   TeamRow,
   TeamRowProps,
   ViewMore,
@@ -33,6 +37,7 @@ enum SectionTypes {
   header,
   hidden,
   more,
+  other,
   teams,
 }
 
@@ -42,6 +47,7 @@ type SectionListData = Array<
   | DataItem<HeaderProps, SectionTypes.header>
   | DataItem<any, SectionTypes.hidden>
   | DataItem<ViewMoreRowProps, SectionTypes.more>
+  | DataItem<OtherRowProps, SectionTypes.other>
   | DataItem<TeamRowProps, SectionTypes.teams>
 >
 
@@ -58,12 +64,18 @@ interface DataItem<T, TName extends SectionTypes> {
 export const ConversationFilters = () => {
   const styles = useStyles()
   const { setScrollOffset, params } = useContext(FilterContext)
-  const { chat_group_graph_id, group_source_app_name = '', show_direct_messages } = params
+  const {
+    chat_group_graph_id,
+    group_source_app_name = '',
+    show_direct_messages,
+    show_archived,
+  } = params
 
   const filterDropdownEnabled = useFilterDropdownEnabled()
   const directMessagesEligible = useDirectMessagesEligible()
   const hasDirectMessages = useHasDirectMessages()
   const canFilterByDMs = directMessagesEligible && hasDirectMessages
+  const canFilterByArchived = useCanBrowseArchivedConversations()
 
   const activeFilter: FilterTypes = useMemo(() => {
     if (chat_group_graph_id) {
@@ -74,10 +86,12 @@ export const ConversationFilters = () => {
       return FilterTypes.Teams
     } else if (show_direct_messages) {
       return FilterTypes.DirectMessages
+    } else if (show_archived) {
+      return FilterTypes.Archived
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
 
   const { groups = [] } = useGroupsToFilter()
   const { teams = [] } = useTeamsToFilter()
@@ -158,6 +172,20 @@ export const ConversationFilters = () => {
       type: teamItems.length > 5 ? SectionTypes.more : SectionTypes.hidden,
       data: { routeName: 'TeamFilters' },
     },
+    {
+      type: canFilterByArchived ? SectionTypes.header : SectionTypes.hidden,
+      data: { title: 'Other', style: styles.extraHeaderScalableSpace },
+    },
+    {
+      type: canFilterByArchived ? SectionTypes.other : SectionTypes.hidden,
+      data: {
+        filter: FilterTypes.Archived,
+        description: 'Archived for everybody',
+        icon: faBoxArchive,
+        show_archived: true,
+        isActive: activeFilter === FilterTypes.Archived,
+      },
+    },
   ]
 
   return (
@@ -178,6 +206,8 @@ export const ConversationFilters = () => {
             return <TeamRow {...item.data} />
           case SectionTypes.more:
             return <ViewMore {...item.data} />
+          case SectionTypes.other:
+            return <OtherRow {...item.data} />
           default:
             return null
         }

package/src/screens/conversation_filters/components/rows.tsx

@@ -1,8 +1,9 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { PlatformPressable } from '@react-navigation/elements'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
 import React, { PropsWithChildren, useContext } from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
-import { Heading, Icon, Image, Text, TextButton } from '../../../components'
+import { Heading, Icon, IconTile, Image, Text, TextButton } from '../../../components'
 import {
   useAtFontScaleBreakpoint,
   useFontScale,
@@ -115,6 +116,33 @@ export const TeamRow = ({ team }: TeamRowProps) => {
   )
 }
 
+export type OtherRowProps = {
+  show_archived?: boolean
+  isActive: boolean
+  filter: FilterTypes
+  description: string
+  icon: IconDefinition
+}
+
+export const OtherRow = ({ show_archived, isActive, filter, description, icon }: OtherRowProps) => {
+  const styles = useRowStyles()
+  const { setAppFilter } = useContext(FilterContext)
+
+  return (
+    <PressableRow onPress={() => setAppFilter({ show_archived })} isActive={isActive}>
+      <IconTile icon={icon} size="lg" />
+      <View style={styles.rowTextContainer}>
+        <Heading variant="h3" style={styles.rowTitle}>
+          {filter}
+        </Heading>
+        <Text variant="footnote" style={styles.rowSubtitle}>
+          {description}
+        </Text>
+      </View>
+    </PressableRow>
+  )
+}
+
 export type ViewMoreRowProps = { routeName: keyof ConversationFilterStackParamList }
 
 export const ViewMore = ({ routeName }: ViewMoreRowProps) => {

package/src/screens/conversation_filters/context/conversation_filter_context.tsx

@@ -22,6 +22,7 @@ export const FilterContext = createContext<{
     chat_group_graph_id: undefined,
     group_source_app_name: undefined,
     show_direct_messages: undefined,
+    show_archived: undefined,
   },
   scrollOffset: 0,
   setScrollOffset: () => {},
@@ -57,6 +58,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
           chat_group_graph_id: undefined,
           group_source_app_name: undefined,
           show_direct_messages: undefined,
+          show_archived: undefined,
         })
       )
     },
@@ -65,6 +67,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
         chat_group_graph_id: params.chat_group_graph_id,
         group_source_app_name: undefined,
         show_direct_messages: undefined,
+        show_archived: undefined,
       })
     },
     setAppFilter: (params: Omit<ConversationFiltersParams, 'chat_group_graph_id'>) => {
@@ -72,6 +75,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
         chat_group_graph_id: undefined,
         group_source_app_name: params.group_source_app_name,
         show_direct_messages: params.show_direct_messages,
+        show_archived: params.show_archived,
       })
     },
     applyFilters: (params: ConversationFiltersParams) => {

package/src/screens/conversation_filters/filter_types.ts

@@ -3,5 +3,6 @@ export enum FilterTypes {
   DirectMessages = 'Direct messages',
   Groups = 'All my groups',
   Teams = 'All my teams and plans',
+  Archived = 'Archived conversations',
   More = 'More',
 }

package/src/screens/conversation_filters/screen_props.ts

@@ -5,6 +5,7 @@ export type ConversationFiltersParams = {
   chat_group_graph_id?: GraphId
   group_source_app_name?: string
   show_direct_messages?: boolean
+  show_archived?: boolean
 }
 
 export type ConversationFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>