@planningcenter/chat-react-native 4.2.0-rc.1 → 4.2.0-rc.2

package/build/utils/time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAE/C,wBAAgB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,CAS1D;AAED,eAAO,MAAM,YAAY,QAAqB,CAAA;AAC9C,eAAO,MAAM,YAAY,QAAqB,CAAA;AAC9C,eAAO,MAAM,cAAc,QAAsB,CAAA;AACjD,eAAO,MAAM,QAAQ,QAAmB,CAAA"}
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAE/C,wBAAgB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,CAS1D;AAED,eAAO,MAAM,YAAY,QAAqB,CAAA;AAC9C,eAAO,MAAM,UAAU,QAAqB,CAAA;AAC5C,eAAO,MAAM,YAAY,QAAqB,CAAA;AAC9C,eAAO,MAAM,cAAc,QAAsB,CAAA;AACjD,eAAO,MAAM,QAAQ,QAAmB,CAAA"}

package/build/utils/time.js

@@ -9,6 +9,7 @@ export function toMs(value, unit) {
   }
 }
 export const FIVE_SECONDS = toMs(5, 'seconds');
+export const ONE_MINUTE = toMs(1, 'minutes');
 export const FIVE_MINUTES = toMs(5, 'minutes');
 export const THIRTY_MINUTES = toMs(30, 'minutes');
 export const ONE_HOUR = toMs(1, 'hours');

package/build/utils/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","names":["toMs","value","unit","FIVE_SECONDS","FIVE_MINUTES","THIRTY_MINUTES","ONE_HOUR"],"sources":["../../src/utils/time.ts"],"sourcesContent":["type TimeUnit = 'hours' | 'minutes' | 'seconds'\n\nexport function toMs(value: number, unit: TimeUnit): number {\n  switch (unit) {\n    case 'hours':\n      return value * 60 * 60 * 1000\n    case 'minutes':\n      return value * 60 * 1000\n    case 'seconds':\n      return value * 1000\n  }\n}\n\nexport const FIVE_SECONDS = toMs(5, 'seconds')\nexport const FIVE_MINUTES = toMs(5, 'minutes')\nexport const THIRTY_MINUTES = toMs(30, 'minutes')\nexport const ONE_HOUR = toMs(1, 'hours')\n"],"mappings":"AAEA,OAAO,SAASA,IAAIA,CAACC,KAAa,EAAEC,IAAc,EAAU;EAC1D,QAAQA,IAAI;IACV,KAAK,OAAO;MACV,OAAOD,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI;IAC/B,KAAK,SAAS;MACZ,OAAOA,KAAK,GAAG,EAAE,GAAG,IAAI;IAC1B,KAAK,SAAS;MACZ,OAAOA,KAAK,GAAG,IAAI;EACvB;AACF;AAEA,OAAO,MAAME,YAAY,GAAGH,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC;AAC9C,OAAO,MAAMI,YAAY,GAAGJ,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC;AAC9C,OAAO,MAAMK,cAAc,GAAGL,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;AACjD,OAAO,MAAMM,QAAQ,GAAGN,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC","ignoreList":[]}
+{"version":3,"file":"time.js","names":["toMs","value","unit","FIVE_SECONDS","ONE_MINUTE","FIVE_MINUTES","THIRTY_MINUTES","ONE_HOUR"],"sources":["../../src/utils/time.ts"],"sourcesContent":["type TimeUnit = 'hours' | 'minutes' | 'seconds'\n\nexport function toMs(value: number, unit: TimeUnit): number {\n  switch (unit) {\n    case 'hours':\n      return value * 60 * 60 * 1000\n    case 'minutes':\n      return value * 60 * 1000\n    case 'seconds':\n      return value * 1000\n  }\n}\n\nexport const FIVE_SECONDS = toMs(5, 'seconds')\nexport const ONE_MINUTE = toMs(1, 'minutes')\nexport const FIVE_MINUTES = toMs(5, 'minutes')\nexport const THIRTY_MINUTES = toMs(30, 'minutes')\nexport const ONE_HOUR = toMs(1, 'hours')\n"],"mappings":"AAEA,OAAO,SAASA,IAAIA,CAACC,KAAa,EAAEC,IAAc,EAAU;EAC1D,QAAQA,IAAI;IACV,KAAK,OAAO;MACV,OAAOD,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI;IAC/B,KAAK,SAAS;MACZ,OAAOA,KAAK,GAAG,EAAE,GAAG,IAAI;IAC1B,KAAK,SAAS;MACZ,OAAOA,KAAK,GAAG,IAAI;EACvB;AACF;AAEA,OAAO,MAAME,YAAY,GAAGH,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC;AAC9C,OAAO,MAAMI,UAAU,GAAGJ,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC;AAC5C,OAAO,MAAMK,YAAY,GAAGL,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC;AAC9C,OAAO,MAAMM,cAAc,GAAGN,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;AACjD,OAAO,MAAMO,QAAQ,GAAGP,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.2.0-rc.1",
+  "version": "4.2.0-rc.2",
   "description": "",
   "repository": {
     "type": "git",
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "5f3487e3e5462b3074ed2e855ade9591243c6544"
+  "gitHead": "94508a030b77e376d9a99fd0883290d8a71e778f"
 }

package/src/__tests__/hooks/use_features.test.ts

@@ -0,0 +1,61 @@
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import type { ApiClient } from '../../hooks/use_api_client'
+import { featuresQueryOptions } from '../../hooks/use_features'
+
+const features = {
+  data: [{ type: 'Feature', id: '1', name: 'ROLLOUT_search', enabled: true }],
+  links: {},
+  meta: { count: 1, totalCount: 1 },
+}
+
+const buildClient = (get: jest.Mock) => ({ chat: { get } }) as unknown as ApiClient
+
+const fetchTwice = async (get: jest.Mock, secondsBetween: number) => {
+  const queryClient = buildTestQueryClient()
+  const options = featuresQueryOptions(buildClient(get))
+
+  await queryClient.fetchQuery(options)
+  jest.advanceTimersByTime(secondsBetween * 1000)
+  await queryClient.fetchQuery(options)
+}
+
+describe('featuresQueryOptions', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('keeps successful flags fresh for five minutes', async () => {
+    const get = jest.fn().mockResolvedValue(features)
+
+    await fetchTwice(get, 4 * 60)
+
+    expect(get).toHaveBeenCalledTimes(1)
+  })
+
+  it('refetches right away after a failed fetch', async () => {
+    const get = jest.fn().mockRejectedValue({ status: 503 })
+
+    await fetchTwice(get, 1)
+
+    expect(get).toHaveBeenCalledTimes(2)
+  })
+
+  it('backs off for a minute after a 429', async () => {
+    const get = jest.fn().mockRejectedValue({ status: 429 })
+    const queryClient = buildTestQueryClient()
+    const options = featuresQueryOptions(buildClient(get))
+
+    await queryClient.fetchQuery(options)
+    jest.advanceTimersByTime(30 * 1000)
+    await queryClient.fetchQuery(options)
+    expect(get).toHaveBeenCalledTimes(1)
+
+    jest.advanceTimersByTime(31 * 1000)
+    await queryClient.fetchQuery(options)
+    expect(get).toHaveBeenCalledTimes(2)
+  })
+})

package/src/contexts/api_provider.tsx

@@ -10,6 +10,7 @@ import { ViewProps } from 'react-native'
 import { ApiClient, useApiClient } from '../hooks/use_api_client'
 import { useAppState } from '../hooks/use_app_state'
 import { appGrantsRequestArgs } from '../hooks/use_chat_permissions'
+import { featuresQueryOptions } from '../hooks/use_features'
 import { getRequestQueryKey, RequestQueryKey } from '../hooks/use_suspense_api'
 import { emitAuthRefresh } from '../utils/auth_events'
 import { ResponseError } from '../utils/response_error'
@@ -81,10 +82,13 @@ export function ApiProvider({ children }: ViewProps) {
 // This needs to live in the provider so that it can access the api client
 // and the chat query client
 const PrefetchQueries = () => {
+  const client = useApiClient()
+
   usePrefetchQuery({
     queryKey: getRequestQueryKey(appGrantsRequestArgs),
     queryFn: defaultQueryFn,
   })
+  usePrefetchQuery(featuresQueryOptions(client))
 
   return null
 }

package/src/hooks/use_features.ts

@@ -1,26 +1,20 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { ApiCollection } from '../types'
 import type { FeatureResource } from '../types/resources/feature_resource'
 import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
-import { FIVE_MINUTES } from '../utils/time'
-import { useApiClient } from './use_api_client'
+import { FIVE_MINUTES, ONE_MINUTE } from '../utils/time'
+import { ApiClient, useApiClient } from './use_api_client'
 
 type FeatureName = (typeof availableFeatures)[keyof typeof availableFeatures]
 
+type FeaturesCollection = ApiCollection<FeatureResource> & {
+  failure?: { status?: number }
+}
+
 export function useFeatures() {
   const apiClient = useApiClient()
-  const requestArgs = getFeaturesRequestArgs()
-
-  const { data } = useSuspenseQuery({
-    queryKey: getFeaturesQueryKey(),
-    queryFn: () => {
-      return apiClient.chat
-        .get<ApiCollection<FeatureResource>>(requestArgs)
-        .catch(() => stableEmptyFeatures)
-    },
-    staleTime: FIVE_MINUTES,
-  })
+  const { data } = useSuspenseQuery(featuresQueryOptions(apiClient))
 
   const features = data.data
 
@@ -36,6 +30,23 @@ export function useFeatures() {
   }
 }
 
+export const featuresQueryOptions = (apiClient: ApiClient) =>
+  queryOptions({
+    queryKey: getFeaturesQueryKey(),
+    queryFn: (): Promise<FeaturesCollection> => {
+      return apiClient.chat
+        .get<ApiCollection<FeatureResource>>(getFeaturesRequestArgs())
+        .catch(error => ({ ...stableEmptyFeatures, failure: { status: error?.status } }))
+    },
+    staleTime: query => {
+      const failure = query.state.data?.failure
+      if (!failure) return FIVE_MINUTES
+
+      return failure.status === 429 ? ONE_MINUTE : 0
+    },
+    gcTime: Infinity,
+  })
+
 export const availableFeatures = {
   gender_specific_conversations: 'ROLLOUT_gender_specific_conversations',
   message_reporting: 'ROLLOUT_MOBILE_message_reporting',
@@ -44,6 +55,7 @@ export const availableFeatures = {
   conversation_safety_lock: 'ROLLOUT_conversation_safety_lock',
   video_moderation: 'ROLLOUT_MOBILE_video_moderation',
   dm_search_clear_fix: 'ROLLOUT_MOBILE_dm_search_clear_fix',
+  search: 'ROLLOUT_search',
 } as const satisfies Record<string, `ROLLOUT_${string}`>
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/screens/conversations/components/search_list_header_component.tsx

@@ -0,0 +1,291 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback, useMemo } from 'react'
+import { Alert, ScrollView, StyleSheet, View } from 'react-native'
+import { Heading, TextButton, ToggleButton } from '../../../components'
+import {
+  useAtFontScaleBreakpoint,
+  useCanCreateConversations,
+  useCurrentPersonCache,
+  useDirectMessagesEligible,
+  useHasDirectMessages,
+  useNewConversationEntry,
+  useTheme,
+} from '../../../hooks'
+import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
+import { useCanDisplayGroups } from '../../../hooks/use_groups'
+import { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'
+import { GraphId } from '../../../types/resources/group_resource'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
+import { Haptic } from '../../../utils/native_adapters'
+import { ConversationFiltersParams } from '../../conversation_filters/screen_props'
+import { ConversationsScreenProps } from '../conversations_screen'
+import { ChatGroupBadge } from './chat_group_badge'
+import { ListHeaderActionButton } from './list_header_action_button'
+
+const ROW_PADDING_HORIZONTAL = 16
+
+enum FilterTypes {
+  All = 'All',
+  Groups = 'Groups',
+  Teams = 'Teams',
+  DMs = 'DMs',
+  More = 'More',
+}
+
+export const SearchListHeaderComponent = () => {
+  const navigation = useNavigation()
+  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })
+  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })
+  const directMessagesEligible = useDirectMessagesEligible()
+  const hasDirectMessages = useHasDirectMessages()
+  const canFilterByDMs = directMessagesEligible && hasDirectMessages
+  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()
+  const {
+    chat_group_graph_id,
+    group_source_app_name = '',
+    show_direct_messages,
+  } = route.params || {}
+  const currentPersonCache = useCurrentPersonCache()
+  const { markAllRead, isPending } = useMarkAllRead()
+  const canCreateConversations = useCanCreateConversations()
+  const entryMode = useNewConversationEntry()
+  const newConversationFromFilter = useNewConversationFromFilter(
+    chat_group_graph_id as GraphId | undefined
+  )
+
+  const active: FilterTypes = useMemo(() => {
+    if (chat_group_graph_id) {
+      return FilterTypes.More
+    } else if (/groups/i.test(group_source_app_name)) {
+      return FilterTypes.Groups
+    } else if (/services/i.test(group_source_app_name)) {
+      return FilterTypes.Teams
+    } else if (show_direct_messages) {
+      return FilterTypes.DMs
+    }
+
+    return FilterTypes.All
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
+
+  const handleNewConversationNavigation = useCallback(() => {
+    if (newConversationFromFilter || entryMode === 'select_type') {
+      return navigation.navigate('ConversationSelectType', {
+        ...route.params,
+        newConversationFromFilter,
+      })
+    }
+
+    if (entryMode === 'groups') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectGroupRecipients',
+        params: { ...route.params },
+      })
+    }
+
+    if (entryMode === 'teams') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectTeamsILeadRecipients',
+        params: { ...route.params },
+      })
+    }
+
+    if (entryMode === 'direct_message') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectDirectMessageRecipients',
+        params: { ...route.params },
+      })
+    }
+  }, [navigation, route.params, entryMode, newConversationFromFilter])
+
+  const handleSetFilter = useCallback(
+    (params: ConversationFiltersParams) => {
+      navigation.setParams({
+        title: undefined,
+        chat_group_graph_id: undefined,
+        group_source_app_name: undefined,
+        show_direct_messages: undefined,
+        ...params,
+      })
+    },
+    [navigation]
+  )
+
+  const handleChatSettings = useCallback(() => {
+    navigation.navigate('ChatSettings', {})
+  }, [navigation])
+
+  const handleOpenConversationFilters = useCallback(() => {
+    navigation.navigate('ConversationFilters', {
+      chat_group_graph_id,
+      group_source_app_name,
+      show_direct_messages,
+    })
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])
+
+  const handleMarkAllRead = useCallback(() => {
+    currentPersonCache.update({ unreadCount: 0 })
+    Haptic.notificationSuccess()
+    markAllRead()
+  }, [currentPersonCache, markAllRead])
+
+  const alertMarkAllRead = useCallback(() => {
+    if (active === FilterTypes.All) return handleMarkAllRead()
+
+    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [
+      { text: 'Cancel' },
+      { text: 'OK', onPress: () => handleMarkAllRead() },
+    ])
+  }, [active, handleMarkAllRead])
+
+  const hasSomeSourceFilterCapability = canFilterByTeams || canFilterByGroups
+  const hasMultiSourceFilterCapabilities = canFilterByTeams && canFilterByGroups
+  const showFilterRow = hasMultiSourceFilterCapabilities || canFilterByDMs
+  const shouldShowHeaderFiltersButton = hasSomeSourceFilterCapability && !showFilterRow
+  const moreFiltersButtonA11yLabel = shouldShowHeaderFiltersButton
+    ? 'View filters'
+    : 'View more filters'
+
+  const moreFiltersButtonProps = {
+    onPress: handleOpenConversationFilters,
+    active: active === FilterTypes.More,
+    iconNameRight: 'general.threeReducingHorizontalBars' as const,
+    accessibilityLabel: moreFiltersButtonA11yLabel,
+  }
+
+  const styles = useStyles({ shouldShowHeaderFiltersButton })
+
+  return (
+    <View style={styles.listHeader}>
+      <View style={styles.headingRow}>
+        <View style={styles.titleContainer}>
+          <Heading numberOfLines={1} variant="h2">
+            Conversations
+          </Heading>
+          <TextButton
+            onPress={alertMarkAllRead}
+            disabled={isPending}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            accessibilityShowsLargeContentViewer
+            accessibilityLargeContentTitle="Mark all read"
+          >
+            Mark all read
+          </TextButton>
+        </View>
+        <View style={styles.actionsContainer}>
+          <ListHeaderActionButton
+            name="general.cog"
+            onPress={handleChatSettings}
+            accessibilityLabel="Chat settings"
+            testID="conversations-chat-settings-button"
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          />
+          {canCreateConversations && (
+            <ListHeaderActionButton
+              name="churchCenter.signups"
+              onPress={handleNewConversationNavigation}
+              accessibilityLabel="New conversation"
+              testID="conversations-new-conversation-button"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            />
+          )}
+          {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps} />}
+        </View>
+      </View>
+      {showFilterRow && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.filterRow}
+          accessibilityRole="toolbar"
+        >
+          <ToggleButton
+            title={FilterTypes.All}
+            active={active === FilterTypes.All}
+            onPress={() => handleSetFilter({})}
+            accessibilityLabel="Show all conversations"
+            style={styles.filterButton}
+          />
+          {canFilterByGroups && (
+            <ToggleButton
+              title={FilterTypes.Groups}
+              active={active === FilterTypes.Groups}
+              onPress={() => handleSetFilter({ group_source_app_name: 'Groups' })}
+              accessibilityLabel="Filter to group conversations"
+              style={styles.filterButton}
+            />
+          )}
+          {canFilterByTeams && (
+            <ToggleButton
+              title={FilterTypes.Teams}
+              active={active === FilterTypes.Teams}
+              onPress={() => handleSetFilter({ group_source_app_name: 'Services' })}
+              accessibilityLabel="Filter to team conversations"
+              style={styles.filterButton}
+            />
+          )}
+          {canFilterByDMs && (
+            <ToggleButton
+              title={FilterTypes.DMs}
+              active={active === FilterTypes.DMs}
+              onPress={() => handleSetFilter({ show_direct_messages: true })}
+              accessibilityLabel="Filter to direct message conversations"
+              style={styles.filterButton}
+            />
+          )}
+          <ToggleButton {...moreFiltersButtonProps} />
+        </ScrollView>
+      )}
+      <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL} />
+    </View>
+  )
+}
+
+const useStyles = ({
+  shouldShowHeaderFiltersButton,
+}: {
+  shouldShowHeaderFiltersButton: boolean
+}) => {
+  const theme = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint(
+    shouldShowHeaderFiltersButton ? 1.2 : undefined
+  )
+
+  return StyleSheet.create({
+    listHeader: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.statusErrorBorder,
+      paddingBottom: 16,
+      gap: 16,
+    },
+    headingRow: {
+      gap: 12,
+      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
+      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
+      justifyContent: 'space-between',
+      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+    },
+    titleContainer: {
+      gap: 8,
+    },
+    actionsContainer: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+    markAllReadRow: {
+      paddingBottom: 4,
+    },
+    filterRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      gap: 8,
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+      flexGrow: 1,
+    },
+    filterButton: {
+      flex: 1,
+      minWidth: 65,
+    },
+  })
+}

package/src/screens/conversations/conversations_screen.tsx

@@ -3,10 +3,12 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Conversations } from '../../components'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
+import { availableFeatures, useFeatures } from '../../hooks/use_features'
 import { analyticsEvents, usePublishProductAnalyticsEvent } from '../../hooks/use_product_analytics'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
 import { ListHeaderComponent } from './components/list_header_component'
+import { SearchListHeaderComponent } from './components/search_list_header_component'
 
 export type ConversationsScreenProps = StaticScreenProps<{
   title?: string
@@ -17,13 +19,16 @@ export type ConversationsScreenProps = StaticScreenProps<{
 
 export function ConversationsScreen({ route }: ConversationsScreenProps) {
   const styles = useStyles()
+  const { featureEnabled } = useFeatures()
+  const searchEnabled = featureEnabled(availableFeatures.search)
+  const Header = searchEnabled ? SearchListHeaderComponent : ListHeaderComponent
 
   usePublishProductAnalyticsEvent(analyticsEvents.conversation_index_opened)
 
   return (
     <View style={styles.container}>
       <ConversationsContextProvider args={route.params} opts={{ throwOnError: true }}>
-        <Conversations ListHeaderComponent={ListHeaderComponent} />
+        <Conversations ListHeaderComponent={Header} />
       </ConversationsContextProvider>
     </View>
   )

package/src/utils/time.ts

@@ -12,6 +12,7 @@ export function toMs(value: number, unit: TimeUnit): number {
 }
 
 export const FIVE_SECONDS = toMs(5, 'seconds')
+export const ONE_MINUTE = toMs(1, 'minutes')
 export const FIVE_MINUTES = toMs(5, 'minutes')
 export const THIRTY_MINUTES = toMs(30, 'minutes')
 export const ONE_HOUR = toMs(1, 'hours')