@planningcenter/chat-react-native 4.4.1-qa-staging.16 → 4.4.1-qa-staging.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/hooks/use_reduce_motion.ts

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
 import { AccessibilityInfo } from 'react-native'
+import { useReducedMotion } from 'react-native-reanimated'
 
 export const useReduceMotion = () => {
-  const [reduceMotion, setReduceMotion] = useState(false)
+  const [reduceMotion, setReduceMotion] = useState(useReducedMotion())
 
   useEffect(() => {
     AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion)

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,10 +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'
@@ -16,6 +19,8 @@ import {
   FilterRow,
   GroupRow,
   GroupRowProps,
+  OtherRow,
+  OtherRowProps,
   TeamRow,
   TeamRowProps,
   ViewMore,
@@ -32,6 +37,7 @@ enum SectionTypes {
   header,
   hidden,
   more,
+  other,
   teams,
 }
 
@@ -41,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>
 >
 
@@ -57,11 +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) {
@@ -72,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()
@@ -101,8 +117,9 @@ export const ConversationFilters = () => {
   const groupItemData = selectActiveWithFirst(5)(groupItems)
   const teamItemData = selectActiveWithFirst(5)(teamItems)
 
-  const hideAppFilters = groupItems.length < 1 || teamItems.length < 1
-  const showGeneralFilters = !hideAppFilters || canFilterByDMs
+  const showAppFilters = !filterDropdownEnabled && groupItems.length > 0 && teamItems.length > 0
+  const showDMFilter = !filterDropdownEnabled && canFilterByDMs
+  const showGeneralFilters = showAppFilters || showDMFilter
 
   const listData: SectionListData = [
     {
@@ -114,7 +131,7 @@ export const ConversationFilters = () => {
       data: { filter: FilterTypes.All, isActive: activeFilter === FilterTypes.All },
     },
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      type: showAppFilters ? SectionTypes.filter : SectionTypes.hidden,
       data: {
         filter: FilterTypes.Groups,
         group_source_app_name: 'groups',
@@ -122,7 +139,7 @@ export const ConversationFilters = () => {
       },
     },
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      type: showAppFilters ? SectionTypes.filter : SectionTypes.hidden,
       data: {
         filter: FilterTypes.Teams,
         group_source_app_name: 'services',
@@ -130,7 +147,7 @@ export const ConversationFilters = () => {
       },
     },
     {
-      type: canFilterByDMs ? SectionTypes.filter : SectionTypes.hidden,
+      type: showDMFilter ? SectionTypes.filter : SectionTypes.hidden,
       data: {
         filter: FilterTypes.DirectMessages,
         show_direct_messages: true,
@@ -155,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 (
@@ -175,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>

package/src/screens/conversation_filters_screen.tsx

@@ -1,11 +1,13 @@
-import { useHeaderHeight } from '@react-navigation/elements'
+import { HeaderBackButton, useHeaderHeight } from '@react-navigation/elements'
 import * as ReactNavigationNative from '@react-navigation/native'
-import { RouteProp, useRoute } from '@react-navigation/native'
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React, { useCallback } from 'react'
 import { LayoutChangeEvent, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { useTheme } from '../hooks'
+import { useFilterDropdownEnabled } from '../hooks/use_filter_dropdown_enabled'
 import { ConversationFilters } from './conversation_filters/components/conversation_filters'
 import {
   FilterProvider,
@@ -86,16 +88,19 @@ export const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps
   return (
     <FilterProvider>
       <FormSheet.Root contentStyle={styles.contentContainer} showAndroidSheetGrabber={false}>
-        <FormSheetHeaderWithContext />
+        <ConversationFiltersHeader />
         <Filters />
       </FormSheet.Root>
     </FilterProvider>
   )
 }
 
-const FormSheetHeaderWithContext = () => {
+export const ConversationFiltersHeader = () => {
   const { resetFilter, applyFilters, setFormSheetHeaderHeight } = useFilterContext()
+  const navigation = useNavigation()
   const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
+  const filterDropdownEnabled = useFilterDropdownEnabled()
+  const { colors } = useTheme()
   const styles = useStyles()
 
   const handleFormSheetHeaderLayout = useCallback(
@@ -108,7 +113,18 @@ const FormSheetHeaderWithContext = () => {
   return (
     <View onLayout={handleFormSheetHeaderLayout}>
       <FormSheet.Header style={styles.header}>
-        <FormSheet.HeaderTitle>Filters</FormSheet.HeaderTitle>
+        {Platform.OS === 'android' && (
+          <HeaderBackButton
+            displayMode="minimal"
+            accessibilityLabel="Back"
+            tintColor={colors.iconColorDefaultPrimary}
+            onPress={navigation.goBack}
+            style={styles.backButton}
+          />
+        )}
+        <FormSheet.HeaderTitle>
+          {filterDropdownEnabled ? 'More filters' : 'Filters'}
+        </FormSheet.HeaderTitle>
         <FormSheet.HeaderActions>
           <FormSheet.HeaderTextButton onPress={resetFilter}>Reset</FormSheet.HeaderTextButton>
           <FormSheet.HeaderButton title="Apply" onPress={() => applyFilters(route.params)} />
@@ -141,5 +157,9 @@ const useStyles = () => {
       // separator the way the non-scrolling reaction sheet does.
       borderBottomWidth: 0,
     },
+    backButton: {
+      marginLeft: -3,
+      marginRight: 8,
+    },
   })
 }

package/src/screens/conversations/__tests__/conversations_screen.test.tsx

@@ -2,6 +2,14 @@ import { QueryClientProvider } from '@tanstack/react-query'
 import { render } from '@testing-library/react-native'
 import React, { Suspense } from 'react'
 import { buildTestQueryClient } from '../../../__utils__/query_client'
+import {
+  AudioAdapter,
+  ChatAdapters,
+  ClipboardAdapter,
+  ImagePickerAdapter,
+  MenuAdapter,
+  VideoAdapter,
+} from '../../../utils/native_adapters'
 import { ConversationsScreen } from '../conversations_screen'
 
 const mockGet = jest.fn()
@@ -28,6 +36,26 @@ jest.mock('../components/search_list_header_component', () => {
   const { Text } = require('react-native')
   return { SearchListHeaderComponent: () => <Text>Search header</Text> }
 })
+jest.mock('../components/filter_dropdown_list_header_component', () => {
+  const { Text } = require('react-native')
+  return { FilterDropdownListHeaderComponent: () => <Text>Filter dropdown header</Text> }
+})
+
+const configureAdapters = ({ menu }: { menu: boolean }) => {
+  ChatAdapters.configure({
+    clipboard: new ClipboardAdapter({
+      getStringAsync: async () => '',
+      setStringAsync: async () => {},
+    }),
+    audio: new AudioAdapter({ useAudio: () => ({}) as any }),
+    video: new VideoAdapter({ Player: (() => null) as any }),
+    imagePicker: new ImagePickerAdapter({
+      openCameraAsync: async () => ({ canceled: true, assets: null }),
+      openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
+    }),
+    ...(menu ? { menu: new MenuAdapter({ View: () => null }) } : {}),
+  })
+}
 
 const renderWithFeatures = (enabledFeatures: string[]) => {
   mockGet.mockResolvedValue({
@@ -51,6 +79,10 @@ const renderWithFeatures = (enabledFeatures: string[]) => {
 }
 
 describe('ConversationsScreen header gating', () => {
+  beforeEach(() => {
+    configureAdapters({ menu: true })
+  })
+
   it('shows the search header with only the QA flag on', async () => {
     const view = renderWithFeatures(['QA_MOBILE_search'])
 
@@ -63,6 +95,26 @@ describe('ConversationsScreen header gating', () => {
     expect(await view.findByText('Search header')).toBeTruthy()
   })
 
+  it('shows the filter dropdown header over the search header when its flag is on', async () => {
+    const view = renderWithFeatures(['QA_MOBILE_filter_dropdown', 'ROLLOUT_MOBILE_search'])
+
+    expect(await view.findByText('Filter dropdown header')).toBeTruthy()
+  })
+
+  it('shows the filter dropdown header with only its rollout flag on', async () => {
+    const view = renderWithFeatures(['ROLLOUT_MOBILE_filter_dropdown'])
+
+    expect(await view.findByText('Filter dropdown header')).toBeTruthy()
+  })
+
+  it('falls back to the search header when the host has no menu adapter', async () => {
+    configureAdapters({ menu: false })
+
+    const view = renderWithFeatures(['QA_MOBILE_filter_dropdown', 'ROLLOUT_MOBILE_search'])
+
+    expect(await view.findByText('Search header')).toBeTruthy()
+  })
+
   it('shows the default header with neither flag on', async () => {
     const view = renderWithFeatures(['ROLLOUT_WEB_search'])