@planningcenter/chat-react-native 4.3.0-rc.9 → 4.3.1-qa-989.0

package/src/screens/bug_report_screen.tsx

@@ -5,15 +5,7 @@ import type {
 } from '@react-navigation/native-stack'
 import { startsWith } from 'lodash'
 import React, { useCallback, useState } from 'react'
-import {
-  View,
-  StyleSheet,
-  TextInput,
-  Linking,
-  ScrollView,
-  TouchableOpacity,
-  Platform,
-} from 'react-native'
+import { View, StyleSheet, TextInput, ScrollView, TouchableOpacity, Platform } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import {
   Button,
@@ -38,7 +30,7 @@ import { useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
 import { useReportBugAction } from '../hooks/use_report_bug_action'
 import { useUploadClient } from '../hooks/use_upload_client'
-import { ImagePicker, ImagePickerResult, platformFontWeightBold } from '../utils'
+import { ImagePicker, ImagePickerResult, Linking, platformFontWeightBold } from '../utils'
 
 const MAX_DESCRIPTION_LENGTH = 2000
 

package/src/screens/conversation_select_recipients/components/view_more_link_row.tsx

@@ -4,15 +4,24 @@ import { TextButton } from '../../../components'
 interface ViewMoreLinkRowProps {
   onPress: () => void
   accessibilityHint: string
+  expanded?: boolean
 }
 
-export const ViewMoreLinkRow = ({ accessibilityHint, onPress }: ViewMoreLinkRowProps) => {
+export const ViewMoreLinkRow = ({
+  accessibilityHint,
+  expanded = false,
+  onPress,
+}: ViewMoreLinkRowProps) => {
   const styles = useRowStyles()
 
   return (
     <View style={[styles.row]}>
-      <TextButton onPress={onPress} accessibilityHint={accessibilityHint} accessibilityRole="link">
-        View more
+      <TextButton
+        onPress={onPress}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ expanded }}
+      >
+        {expanded ? 'View less' : 'View more'}
       </TextButton>
     </View>
   )

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -1,6 +1,6 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StackActions, useNavigation } from '@react-navigation/native'
-import { RefObject, useEffect, useRef, useState } from 'react'
+import { RefObject, useRef, useState } from 'react'
 import { FlatList, Pressable, StyleSheet, TextInput, View } from 'react-native'
 import { Avatar, Badge, Banner, Icon, KeyboardView, Spinner, Text } from '../../components'
 import { ActionButton } from '../../components/display/action_button'
@@ -11,6 +11,7 @@ import { useDirectMessageAffiliations } from '../../hooks/direct_messages/use_di
 import { useDirectMessageCandidates } from '../../hooks/direct_messages/use_direct_message_candidates'
 import { useDirectMessageConversationValidate } from '../../hooks/direct_messages/use_direct_message_conversation_validate'
 import { useFindOrCreateDirectMessageConversation } from '../../hooks/direct_messages/use_find_or_create_direct_message_conversation'
+import { useDebouncedSearchTerm } from '../../hooks/use_debounced_search_term'
 import { availableFeatures, useFeatures } from '../../hooks/use_features'
 import { DirectMessageCandidateResource } from '../../types/resources/direct_message_candidate'
 import { ResultsHeading } from './components/results_heading'
@@ -26,7 +27,7 @@ export function ConversationSelectDirectMessageRecipientsScreen({
   const navigation = useNavigation()
   const { featureEnabled } = useFeatures()
   const [searchTerm, setSearchTerm] = useState('')
-  const [debouncedTerm, setDebouncedTerm] = useState('')
+  const debouncedTerm = useDebouncedSearchTerm(searchTerm)
   const [selectedPeople, setSelectedPeople] = useState<Map<string, DirectMessageCandidateResource>>(
     () =>
       new Map(
@@ -45,16 +46,10 @@ export function ConversationSelectDirectMessageRecipientsScreen({
   )
   const searchInputRef = useRef<TextInput>(null)
 
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedTerm(searchTerm), 200)
-    return () => clearTimeout(timer)
-  }, [searchTerm])
-
   const selectPerson = (person: DirectMessageCandidateResource) => {
     if (selectedPeople.size >= MAX_RECIPIENTS) return
     setSelectedPeople(prev => new Map(prev).set(person.id, person))
     setSearchTerm('')
-    setDebouncedTerm('')
     // Controlled TextInput can retain stale native text on iOS when the value
     // is cleared while it stays focused (keyboardShouldPersistTaps keeps it
     // focused through the tap) — clear() forces the native view to sync. Gated

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

@@ -0,0 +1,71 @@
+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 { ConversationsScreen } from '../conversations_screen'
+
+const mockGet = jest.fn()
+jest.mock('../../../hooks/use_api_client', () => ({
+  useApiClient: () => ({ chat: { get: mockGet } }),
+}))
+jest.mock('../../../hooks/use_product_analytics', () => ({
+  ...jest.requireActual('../../../hooks/use_product_analytics'),
+  usePublishProductAnalyticsEvent: () => {},
+}))
+jest.mock('../../../contexts/conversations_context', () => ({
+  ConversationsContextProvider: ({ children }: { children: React.ReactNode }) => children,
+}))
+jest.mock('../../../components', () => ({
+  Conversations: ({ ListHeaderComponent }: { ListHeaderComponent: React.ComponentType }) => (
+    <ListHeaderComponent />
+  ),
+}))
+jest.mock('../components/list_header_component', () => {
+  const { Text } = require('react-native')
+  return { ListHeaderComponent: () => <Text>Default header</Text> }
+})
+jest.mock('../components/search_list_header_component', () => {
+  const { Text } = require('react-native')
+  return { SearchListHeaderComponent: () => <Text>Search header</Text> }
+})
+
+const renderWithFeatures = (enabledFeatures: string[]) => {
+  mockGet.mockResolvedValue({
+    data: enabledFeatures.map((name, index) => ({
+      type: 'Feature',
+      id: String(index + 1),
+      name,
+      enabled: true,
+    })),
+    links: {},
+    meta: { count: enabledFeatures.length, totalCount: enabledFeatures.length },
+  })
+
+  return render(
+    <QueryClientProvider client={buildTestQueryClient()}>
+      <Suspense fallback={null}>
+        <ConversationsScreen route={{ params: {} }} />
+      </Suspense>
+    </QueryClientProvider>
+  )
+}
+
+describe('ConversationsScreen header gating', () => {
+  it('shows the search header with only the QA flag on', async () => {
+    const view = renderWithFeatures(['QA_MOBILE_search'])
+
+    expect(await view.findByText('Search header')).toBeTruthy()
+  })
+
+  it('shows the search header with only the rollout flag on', async () => {
+    const view = renderWithFeatures(['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'])
+
+    expect(await view.findByText('Default header')).toBeTruthy()
+  })
+})

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

@@ -264,7 +264,7 @@ const useStyles = ({
   return StyleSheet.create({
     listHeader: {
       borderBottomWidth: 1,
-      borderBottomColor: theme.colors.statusErrorBorder,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
       paddingBottom: 16,
       gap: 16,
     },

package/src/screens/conversations/conversations_screen.tsx

@@ -3,8 +3,8 @@ 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 { useSearchEnabled } from '../../hooks/use_search_enabled'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
 import { ListHeaderComponent } from './components/list_header_component'
@@ -19,8 +19,7 @@ export type ConversationsScreenProps = StaticScreenProps<{
 
 export function ConversationsScreen({ route }: ConversationsScreenProps) {
   const styles = useStyles()
-  const { featureEnabled } = useFeatures()
-  const searchEnabled = featureEnabled(availableFeatures.search)
+  const searchEnabled = useSearchEnabled()
   const Header = searchEnabled ? SearchListHeaderComponent : ListHeaderComponent
 
   usePublishProductAnalyticsEvent(analyticsEvents.conversation_index_opened)

package/src/screens/get_help_screen.tsx

@@ -1,12 +1,12 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { useCallback, useMemo } from 'react'
-import { Alert, Linking, StyleSheet, View } from 'react-native'
+import { Alert, StyleSheet, View } from 'react-native'
 import { Heading, PressableRow, Text, TextInlineButton } from '../components'
 import { useApiGet, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
 import { useOrganization } from '../hooks/use_organization'
 import { ResourceObject } from '../types'
-import { Clipboard } from '../utils'
+import { Clipboard, Linking } from '../utils'
 
 type GetHelpScreenRouteProps = {
   type?: 'chat' | 'general'

package/src/screens/message_actions_screen.tsx

@@ -124,8 +124,12 @@ function MessageActionsScreenContent({
     })
   }, [navigation, conversation_id, message.id, message.replyRootId, replyRootAuthorName])
 
-  const handleCopyPress = () => {
-    Clipboard.setStringAsync(message?.text || attachmentForCopy() || '')
+  const handleCopyPress = async () => {
+    const textToCopy = message?.text || attachmentForCopy()
+    if (textToCopy) {
+      await Clipboard.setStringAsync(textToCopy)
+      Haptic.notificationSuccess()
+    }
     navigation.goBack()
   }
 

package/src/screens/search/__tests__/search_screen.test.tsx

@@ -0,0 +1,194 @@
+import { act, fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { Keyboard } from 'react-native'
+import type { useSearchResults } from '../../../hooks/use_search_results'
+import type {
+  ConversationSearchResultResource,
+  MessageSearchResultResource,
+} from '../../../types/resources/search_result'
+import { SearchScreen } from '../search_screen'
+
+const mockNavigate = jest.fn()
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ navigate: mockNavigate }),
+}))
+
+const mockUseSearchResults = jest.fn<ReturnType<typeof useSearchResults>, [string]>()
+jest.mock('../../../hooks/use_search_results', () => ({
+  useSearchResults: (term: string) => mockUseSearchResults(term),
+}))
+const mockPublishEvent = jest.fn()
+jest.mock('../../../hooks/use_product_analytics', () => ({
+  ...jest.requireActual('../../../hooks/use_product_analytics'),
+  useProductAnalytics: () => ({ publishEvent: mockPublishEvent }),
+}))
+jest.mock('../../../components/display/keyboard_view', () => ({
+  ...jest.requireActual('../../../components/display/keyboard_view'),
+  KeyboardView: ({ children }: { children: React.ReactNode }) => children,
+}))
+
+const inputLabel = 'Search titles and messages'
+
+const conversationResult: ConversationSearchResultResource = {
+  type: 'conversation',
+  id: '42',
+  title: 'Budget Team',
+  url: '/conversations/42',
+  extra: { avatar: { previewAvatarUrls: [] } },
+}
+
+const messageResult: MessageSearchResultResource = {
+  type: 'message',
+  id: '01JMESSAGEULID',
+  title: 'Finance',
+  url: '/conversations/7/messages/01JMESSAGEULID',
+  extra: {
+    conversationId: 7,
+    authorName: 'Ann',
+    snippet: [{ text: 'budget', match: true }],
+    createdAt: '2026-01-01T00:00:00Z',
+    avatar: { previewAvatarUrls: [] },
+  },
+}
+
+const secondMessageResult: MessageSearchResultResource = {
+  ...messageResult,
+  id: '01JSECONDULID',
+  title: 'Youth',
+  url: '/conversations/9/messages/01JSECONDULID',
+  extra: { ...messageResult.extra, conversationId: 9, authorName: 'Bob' },
+}
+
+const renderWithResults = () => {
+  mockUseSearchResults.mockReturnValue({
+    results: [conversationResult, messageResult, secondMessageResult],
+    failedTypes: [],
+    isPending: false,
+    isError: false,
+    isFetchNextPageError: false,
+    loadMore: jest.fn(),
+    hasNextPage: false,
+    isFetchingNextPage: false,
+  })
+  const view = render(<SearchScreen />)
+  const input = view.getByLabelText(inputLabel)
+  fireEvent.changeText(input, 'bud')
+  fireEvent.changeText(input, 'budget')
+  act(() => jest.advanceTimersByTime(200))
+  return view
+}
+
+beforeEach(() => {
+  jest.useFakeTimers()
+  mockNavigate.mockReset()
+  mockPublishEvent.mockReset()
+  mockUseSearchResults.mockReset().mockReturnValue({
+    results: [],
+    failedTypes: [],
+    isPending: true,
+    isError: false,
+    isFetchNextPageError: false,
+    loadMore: jest.fn(),
+    hasNextPage: false,
+    isFetchingNextPage: false,
+  })
+})
+
+afterEach(() => jest.useRealTimers())
+
+describe('SearchScreen', () => {
+  it('searches once with the trimmed term after typing settles', () => {
+    const view = render(<SearchScreen />)
+    const input = view.getByLabelText(inputLabel)
+
+    fireEvent.changeText(input, 'bud')
+    fireEvent.changeText(input, ' budget ')
+
+    expect(view.getByText('Search chat')).toBeTruthy()
+    expect(mockUseSearchResults).not.toHaveBeenCalled()
+
+    act(() => jest.advanceTimersByTime(200))
+
+    const searchedTerms = new Set(mockUseSearchResults.mock.calls.map(([term]) => term))
+    expect([...searchedTerms]).toEqual(['budget'])
+    expect(view.queryByText('Search chat')).toBeNull()
+    expect(view.getByLabelText('Loading results')).toBeTruthy()
+  })
+
+  it('returns to the prompt as soon as the term is cleared', () => {
+    const view = render(<SearchScreen />)
+    const input = view.getByLabelText(inputLabel)
+
+    fireEvent.changeText(input, 'budget')
+    act(() => jest.advanceTimersByTime(200))
+    expect(view.queryByText('Search chat')).toBeNull()
+
+    fireEvent.changeText(input, '   ')
+
+    expect(view.getByText('Search chat')).toBeTruthy()
+  })
+
+  it('opens a conversation result at the latest message', () => {
+    const dismiss = jest.spyOn(Keyboard, 'dismiss')
+    const view = renderWithResults()
+
+    fireEvent.press(view.getByLabelText('Budget Team'))
+
+    expect(dismiss).toHaveBeenCalled()
+    expect(mockNavigate).toHaveBeenCalledWith('Conversation', {
+      conversation_id: 42,
+      title: 'Budget Team',
+    })
+  })
+
+  it('opens a message result anchored at that message', () => {
+    const view = renderWithResults()
+
+    fireEvent.press(view.getByLabelText(/^Finance, Ann: budget/))
+
+    expect(mockNavigate).toHaveBeenCalledWith('Conversation', {
+      conversation_id: 7,
+      initial_message_id: '01JMESSAGEULID',
+      title: 'Finance',
+    })
+  })
+
+  it('publishes one search event per settled term with result counts, never the term', () => {
+    renderWithResults()
+
+    expect(mockPublishEvent).toHaveBeenCalledTimes(1)
+    expect(mockPublishEvent).toHaveBeenCalledWith('chat.mobile.search.performed', {
+      term_length: 6,
+      conversation_result_count: 1,
+      message_result_count: 2,
+    })
+    expect(JSON.stringify(mockPublishEvent.mock.calls)).not.toContain('budget')
+  })
+
+  it('does not publish a retyped term whose results are already cached', () => {
+    const view = renderWithResults()
+    const input = view.getByLabelText(inputLabel)
+
+    fireEvent.changeText(input, 'budge')
+    act(() => jest.advanceTimersByTime(200))
+    fireEvent.changeText(input, 'budget')
+    act(() => jest.advanceTimersByTime(200))
+
+    const performed = mockPublishEvent.mock.calls.filter(
+      ([name]) => name === 'chat.mobile.search.performed'
+    )
+    expect(performed.map(([, meta]) => meta.term_length)).toEqual([6, 5])
+  })
+
+  it('publishes the opened result type and its position within its section', () => {
+    const view = renderWithResults()
+
+    fireEvent.press(view.getByLabelText(/^Youth, Bob: budget/))
+
+    expect(mockPublishEvent).toHaveBeenCalledWith('chat.mobile.search.result.opened', {
+      result_type: 'message',
+      position: 1,
+    })
+  })
+})

package/src/screens/search/components/__tests__/conversation_results.test.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import type { ConversationSearchResultResource } from '../../../../types'
+import { ConversationResults } from '../conversation_results'
+
+const buildResults = (count: number, prefix = 'Conversation') =>
+  Array.from({ length: count }, (_, index) => ({
+    type: 'conversation' as const,
+    id: `${prefix}-${index + 1}`,
+    title: `${prefix} ${index + 1}`,
+    url: `/conversations/${index + 1}`,
+    extra: { avatar: { previewAvatarUrls: [] } },
+  })) satisfies ConversationSearchResultResource[]
+
+describe('ConversationResults', () => {
+  it('caps at five rows until View more is pressed, then offers View less', () => {
+    const view = render(<ConversationResults results={buildResults(6)} onSelect={jest.fn()} />)
+
+    expect(view.getByText('Conversation 5')).toBeTruthy()
+    expect(view.queryByText('Conversation 6')).toBeNull()
+
+    fireEvent.press(view.getByText('View more'))
+
+    expect(view.getByText('Conversation 6')).toBeTruthy()
+    expect(view.getByText('View less')).toBeTruthy()
+    expect(view.queryByText('View more')).toBeNull()
+  })
+
+  it('renders no footer for five or fewer results', () => {
+    const view = render(<ConversationResults results={buildResults(4)} onSelect={jest.fn()} />)
+
+    expect(view.getByText('Conversation 4')).toBeTruthy()
+    expect(view.queryByText('View more')).toBeNull()
+  })
+
+  it('stays expanded when the parent re-renders with a new results array', () => {
+    const view = render(<ConversationResults results={buildResults(6)} onSelect={jest.fn()} />)
+    fireEvent.press(view.getByText('View more'))
+
+    view.rerender(<ConversationResults results={buildResults(6)} onSelect={jest.fn()} />)
+
+    expect(view.getByText('Conversation 6')).toBeTruthy()
+    expect(view.getByText('View less')).toBeTruthy()
+  })
+
+  it('passes the pressed result and its position to onSelect', () => {
+    const onSelect = jest.fn()
+    const results = buildResults(2)
+    const view = render(<ConversationResults results={results} onSelect={onSelect} />)
+
+    fireEvent.press(view.getByText('Conversation 2'))
+
+    expect(onSelect).toHaveBeenCalledWith(results[1], 1)
+  })
+})

package/src/screens/search/components/__tests__/message_result_row.test.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import type { MessageSearchResultResource } from '../../../../types/resources/search_result'
+import { formatDatePreview } from '../../../../utils/date'
+import { defaultTheme } from '../../../../utils/theme'
+import { MessageResultRow } from '../message_result_row'
+
+const result: MessageSearchResultResource = {
+  id: '42',
+  type: 'message',
+  title: 'Worship Team',
+  url: '/conversations/7?message_id=42',
+  extra: {
+    conversationId: 7,
+    authorName: 'Ada Lovelace',
+    snippet: [
+      { text: '…planning the ', match: false },
+      { text: 'budget', match: true },
+      { text: ' meeting for next week', match: false },
+    ],
+    createdAt: '2026-03-04T15:30:00Z',
+    avatar: {
+      customAvatarType: null,
+      customAvatarKey: null,
+      customAvatarColor: null,
+      customAvatarImageUrl: null,
+      previewAvatarUrls: [],
+    },
+  },
+}
+
+const interactionColor = defaultTheme('light').colors.interaction
+
+describe('MessageResultRow', () => {
+  it('renders the title, author, snippet, and date', () => {
+    const view = render(<MessageResultRow result={result} onPress={jest.fn()} />)
+
+    expect(view.getByText('Worship Team')).toBeTruthy()
+    expect(view.getByText('Ada Lovelace:', { exact: false })).toBeTruthy()
+    expect(view.getByText('…planning the ')).toBeTruthy()
+    expect(view.getByText('budget')).toBeTruthy()
+    expect(view.getByText(' meeting for next week')).toBeTruthy()
+    expect(view.getByText(formatDatePreview(result.extra.createdAt))).toBeTruthy()
+  })
+
+  it('colors matched segments with the interaction color', () => {
+    const view = render(<MessageResultRow result={result} onPress={jest.fn()} />)
+
+    expect(view.getByText('budget')).toHaveStyle({ color: interactionColor })
+    expect(view.getByText('…planning the ')).not.toHaveStyle({ color: interactionColor })
+  })
+
+  it('exposes the row as a button with a composed label and reports presses', () => {
+    const onPress = jest.fn()
+    const date = formatDatePreview(result.extra.createdAt)
+    const view = render(<MessageResultRow result={result} onPress={onPress} />)
+
+    const row = view.getByRole('button', {
+      name: `Worship Team, Ada Lovelace: …planning the budget meeting for next week, ${date}`,
+    })
+    fireEvent.press(row)
+
+    expect(onPress).toHaveBeenCalledWith(result)
+  })
+})

package/src/screens/search/components/__tests__/result_row.test.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import { useAtFontScaleBreakpoint } from '../../../../hooks/use_at_font_scale_breakpoint'
+import { ResultRow } from '../result_row'
+
+jest.mock('../../../../hooks/use_at_font_scale_breakpoint')
+
+const mockUseAtFontScaleBreakpoint = jest.mocked(useAtFontScaleBreakpoint)
+
+describe('ResultRow', () => {
+  it('lays children out in a row below the font scale breakpoint', () => {
+    mockUseAtFontScaleBreakpoint.mockReturnValue(false)
+    const view = render(
+      <ResultRow accessibilityLabel="Row" onPress={jest.fn()} alignItems="center">
+        <Text>child</Text>
+      </ResultRow>
+    )
+
+    expect(view.getByRole('button')).toHaveStyle({ flexDirection: 'row', alignItems: 'center' })
+  })
+
+  it('stacks children at the font scale breakpoint', () => {
+    mockUseAtFontScaleBreakpoint.mockReturnValue(true)
+    const view = render(
+      <ResultRow accessibilityLabel="Row" onPress={jest.fn()} alignItems="center">
+        <Text>child</Text>
+      </ResultRow>
+    )
+
+    expect(view.getByRole('button')).toHaveStyle({ flexDirection: 'column', alignItems: 'stretch' })
+  })
+})