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

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/search/__tests__/search_screen.test.tsx

@@ -18,6 +18,11 @@ const mockUseSearchResults = jest.fn<ReturnType<typeof useSearchResults>, [strin
 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,
@@ -47,9 +52,17 @@ const messageResult: MessageSearchResultResource = {
   },
 }
 
+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],
+    results: [conversationResult, messageResult, secondMessageResult],
     failedTypes: [],
     isPending: false,
     isError: false,
@@ -59,7 +72,9 @@ const renderWithResults = () => {
     isFetchingNextPage: false,
   })
   const view = render(<SearchScreen />)
-  fireEvent.changeText(view.getByLabelText(inputLabel), 'budget')
+  const input = view.getByLabelText(inputLabel)
+  fireEvent.changeText(input, 'bud')
+  fireEvent.changeText(input, 'budget')
   act(() => jest.advanceTimersByTime(200))
   return view
 }
@@ -67,6 +82,7 @@ const renderWithResults = () => {
 beforeEach(() => {
   jest.useFakeTimers()
   mockNavigate.mockReset()
+  mockPublishEvent.mockReset()
   mockUseSearchResults.mockReset().mockReturnValue({
     results: [],
     failedTypes: [],
@@ -137,4 +153,42 @@ describe('SearchScreen', () => {
       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

@@ -43,13 +43,13 @@ describe('ConversationResults', () => {
     expect(view.getByText('View less')).toBeTruthy()
   })
 
-  it('passes the pressed result to onSelect', () => {
+  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])
+    expect(onSelect).toHaveBeenCalledWith(results[1], 1)
   })
 })

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

@@ -49,9 +49,15 @@ const messageResult = (id: string): MessageSearchResultResource => ({
   },
 })
 
-const renderList = (state: Partial<SearchState>) => {
+const renderList = (state: Partial<SearchState>, onSettled = jest.fn()) => {
   mockUseSearchResults.mockReturnValue(searchState(state))
-  return render(<SearchResultsList term="potluck" onSelect={jest.fn()} />)
+  const list = () => <SearchResultsList term="potluck" onSelect={jest.fn()} onSettled={onSettled} />
+  const view = render(list())
+  const rerenderWith = (next: Partial<SearchState>) => {
+    mockUseSearchResults.mockReturnValue(searchState(next))
+    view.rerender(list())
+  }
+  return { ...view, rerenderWith }
 }
 
 describe('SearchResultsList', () => {
@@ -119,6 +125,45 @@ describe('SearchResultsList', () => {
     expect(loadMore).not.toHaveBeenCalled()
   })
 
+  it('passes a message result and its position within the section to onSelect', () => {
+    const onSelect = jest.fn()
+    const results = [conversationResult('1'), messageResult('1'), messageResult('2')]
+    mockUseSearchResults.mockReturnValue(searchState({ results }))
+    const view = render(
+      <SearchResultsList term="potluck" onSelect={onSelect} onSettled={jest.fn()} />
+    )
+
+    fireEvent.press(view.getByLabelText(/^Message 2/))
+
+    expect(onSelect).toHaveBeenCalledWith(results[2], 1)
+  })
+
+  it('reports the settled term and counts once, not while pending or after paging', () => {
+    const onSettled = jest.fn()
+    const view = renderList({ isPending: true }, onSettled)
+    expect(onSettled).not.toHaveBeenCalled()
+
+    const results = [conversationResult('1'), messageResult('1'), messageResult('2')]
+    view.rerenderWith({ results })
+
+    expect(onSettled).toHaveBeenCalledTimes(1)
+    expect(onSettled).toHaveBeenCalledWith('potluck', {
+      conversationResultCount: 1,
+      messageResultCount: 2,
+    })
+
+    view.rerenderWith({ results: [...results, messageResult('3')] })
+
+    expect(onSettled).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not report a failed search', () => {
+    const onSettled = jest.fn()
+    renderList({ isError: true }, onSettled)
+
+    expect(onSettled).not.toHaveBeenCalled()
+  })
+
   it('offers a retry after a paging failure', () => {
     const loadMore = jest.fn()
     const view = renderList({

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

@@ -8,7 +8,7 @@ const COLLAPSED_COUNT = 5
 
 interface ConversationResultsProps {
   results: ConversationSearchResultResource[]
-  onSelect: (result: ConversationSearchResultResource) => void
+  onSelect: (result: ConversationSearchResultResource, position: number) => void
 }
 
 export function ConversationResults({ results, onSelect }: ConversationResultsProps) {
@@ -31,8 +31,12 @@ export function ConversationResults({ results, onSelect }: ConversationResultsPr
 
   return (
     <ResultsSection title="Conversations" footer={footer}>
-      {visible.map(result => (
-        <ConversationResultRow key={result.id} result={result} onPress={() => onSelect(result)} />
+      {visible.map((result, index) => (
+        <ConversationResultRow
+          key={result.id}
+          result={result}
+          onPress={() => onSelect(result, index)}
+        />
       ))}
     </ResultsSection>
   )

package/src/screens/search/components/search_results_list.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
 import { Banner, Spinner, Text, TextButton } from '../../../components'
 import { useSearchResults } from '../../../hooks/use_search_results'
@@ -14,12 +14,18 @@ import { NoResultsBlankState } from './search_blank_states'
 
 const SEARCH_ERROR_MESSAGE = "Couldn't search right now. Try again."
 
+export interface SearchResultCounts {
+  conversationResultCount: number
+  messageResultCount: number
+}
+
 interface SearchResultsListProps {
   term: string
-  onSelect: (result: SearchResultResource) => void
+  onSelect: (result: SearchResultResource, position: number) => void
+  onSettled: (term: string, counts: SearchResultCounts) => void
 }
 
-export function SearchResultsList({ term, onSelect }: SearchResultsListProps) {
+export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsListProps) {
   const {
     results,
     failedTypes,
@@ -32,6 +38,19 @@ export function SearchResultsList({ term, onSelect }: SearchResultsListProps) {
   } = useSearchResults(term)
   const conversationResults = results.filter(isConversationResult)
   const messageResults = results.filter(isMessageResult)
+  const settled = !isPending && !isError
+
+  const settledTermRef = useRef<string | undefined>(undefined)
+
+  useEffect(() => {
+    if (!settled || settledTermRef.current === term) return
+
+    settledTermRef.current = term
+    onSettled(term, {
+      conversationResultCount: conversationResults.length,
+      messageResultCount: messageResults.length,
+    })
+  }, [settled, term, conversationResults.length, messageResults.length, onSettled])
 
   return (
     <FlatList
@@ -40,7 +59,9 @@ export function SearchResultsList({ term, onSelect }: SearchResultsListProps) {
       keyboardShouldPersistTaps="handled"
       keyboardDismissMode="on-drag"
       contentContainerStyle={styles.content}
-      renderItem={({ item }) => <MessageResultRow result={item} onPress={onSelect} />}
+      renderItem={({ item, index }) => (
+        <MessageResultRow result={item} onPress={() => onSelect(item, index)} />
+      )}
       ListHeaderComponent={
         <>
           {conversationResults.length > 0 && (

package/src/screens/search/search_screen.tsx

@@ -3,7 +3,7 @@ import {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { Keyboard, StyleSheet, View } from 'react-native'
 import { KeyboardView } from '../../components'
 import {
@@ -11,10 +11,11 @@ import {
   withMinimalBack,
 } from '../../components/display/platform_modal_header_buttons'
 import { useDebouncedSearchTerm } from '../../hooks/use_debounced_search_term'
+import { analyticsEvents, useProductAnalytics } from '../../hooks/use_product_analytics'
 import type { SearchResultResource } from '../../types/resources/search_result'
 import { SearchPromptBlankState } from './components/search_blank_states'
 import { SearchField } from './components/search_field'
-import { SearchResultsList } from './components/search_results_list'
+import { SearchResultsList, type SearchResultCounts } from './components/search_results_list'
 
 export const SearchScreenOptions = ({
   navigation,
@@ -28,9 +29,23 @@ export function SearchScreen() {
   const navigation = useNavigation()
   const [term, setTerm] = useState('')
   const debouncedTerm = useDebouncedSearchTerm(term)
+  const { publishEvent } = useProductAnalytics()
+  const publishedTerms = useRef(new Set<string>())
 
-  const openResult = (result: SearchResultResource) => {
+  const publishSearch = (settledTerm: string, counts: SearchResultCounts) => {
+    if (publishedTerms.current.has(settledTerm)) return
+
+    publishedTerms.current.add(settledTerm)
+    publishEvent(analyticsEvents.search_performed, {
+      term_length: settledTerm.length,
+      conversation_result_count: counts.conversationResultCount,
+      message_result_count: counts.messageResultCount,
+    })
+  }
+
+  const openResult = (result: SearchResultResource, position: number) => {
     Keyboard.dismiss()
+    publishEvent(analyticsEvents.search_result_opened, { result_type: result.type, position })
 
     if (result.type === 'conversation') {
       navigation.navigate('Conversation', {
@@ -51,7 +66,12 @@ export function SearchScreen() {
       <View style={styles.container} testID="search-screen">
         <SearchField term={term} onChange={setTerm} />
         {debouncedTerm.length > 0 ? (
-          <SearchResultsList key={debouncedTerm} term={debouncedTerm} onSelect={openResult} />
+          <SearchResultsList
+            key={debouncedTerm}
+            term={debouncedTerm}
+            onSelect={openResult}
+            onSettled={publishSearch}
+          />
         ) : (
           <SearchPromptBlankState />
         )}