@planningcenter/chat-react-native 3.38.0-rc.1 → 3.38.0-rc.10

package/src/screens/conversation_filter_recipients/components/header_row.tsx

@@ -24,6 +24,7 @@ export const HeaderRow = ({ data, nativeID, style, setTeamFilters }: HeaderRowPr
   const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
 
   const { serviceTypeName, teamIdsForServiceType } = data
+  const displayName = serviceTypeName ?? 'No service type'
   const { team_ids: currentTeamIds = [] } = route.params
 
   const newTeamIdsAdded = [...new Set([...currentTeamIds, ...teamIdsForServiceType])]
@@ -34,7 +35,7 @@ export const HeaderRow = ({ data, nativeID, style, setTeamFilters }: HeaderRowPr
   const selectLabel = allTeamsSelected ? 'Deselect' : 'Select'
 
   const headingAccessibilityHint = `${pluralize(teamIdsForServiceType.length, 'team')} available to select`
-  const selectAllAccessibilityLabel = `${selectLabel} ${pluralize(teamIdsForServiceType.length, 'team')} for ${serviceTypeName}`
+  const selectAllAccessibilityLabel = `${selectLabel} ${pluralize(teamIdsForServiceType.length, 'team')} for ${displayName}`
 
   const handleSelectAll = () => {
     setTeamFilters({
@@ -53,7 +54,7 @@ export const HeaderRow = ({ data, nativeID, style, setTeamFilters }: HeaderRowPr
           nativeID={nativeID}
           accessibilityHint={headingAccessibilityHint}
         >
-          {serviceTypeName}
+          {displayName}
         </Heading>
       </View>
 

package/src/screens/conversation_filter_recipients/hooks/__tests__/use_service_types_with_teams.test.ts

@@ -0,0 +1,108 @@
+import type { TeamResponseItem } from '../../../../types'
+import { decorateTeamResponseItems } from '../use_service_types_with_teams'
+
+const makeTeam = (
+  overrides: Partial<TeamResponseItem> & { teamId: number; teamName: string }
+): TeamResponseItem => ({
+  name: overrides.teamName,
+  value: {
+    teamId: overrides.teamId,
+    serviceTypeId: overrides.value?.serviceTypeId ?? 0,
+    serviceTypeIds: overrides.value?.serviceTypeIds ?? [],
+  },
+  serviceTypeName: overrides.serviceTypeName ?? '',
+  serviceTypeNames: overrides.serviceTypeNames ?? [],
+  serviceTypeAcronyms: overrides.serviceTypeAcronyms ?? [],
+  teamName: overrides.teamName,
+  order: overrides.order ?? [0, '', overrides.teamName],
+})
+
+describe('decorateTeamResponseItems', () => {
+  it('groups teams under their service types', () => {
+    const items = [
+      makeTeam({
+        teamId: 1,
+        teamName: 'Worship',
+        value: { teamId: 1, serviceTypeId: 10, serviceTypeIds: [10] },
+        serviceTypeNames: ['Sunday Morning'],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items)
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ id: 10, name: 'Sunday Morning', teams: [{ id: 1 }] })
+  })
+
+  it('gives each team without a service type its own bucket', () => {
+    const items = [
+      makeTeam({
+        teamId: 58,
+        teamName: 'Services Team 58',
+        value: { teamId: 58, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+      makeTeam({
+        teamId: 99,
+        teamName: 'Another Typeless Team',
+        value: { teamId: 99, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items)
+
+    expect(result).toHaveLength(2)
+    expect(result[0]).toMatchObject({ id: -58, name: 'Services Team 58', teams: [{ id: 58 }] })
+    expect(result[1]).toMatchObject({
+      id: -99,
+      name: 'Another Typeless Team',
+      teams: [{ id: 99 }],
+    })
+  })
+
+  it('places teams with and without service types in the right buckets', () => {
+    const items = [
+      makeTeam({
+        teamId: 1,
+        teamName: 'Worship',
+        value: { teamId: 1, serviceTypeId: 10, serviceTypeIds: [10] },
+        serviceTypeNames: ['Sunday Morning'],
+      }),
+      makeTeam({
+        teamId: 58,
+        teamName: 'Services Team 58',
+        value: { teamId: 58, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items)
+
+    expect(result).toHaveLength(2)
+    expect(result[0]).toMatchObject({ id: -58, name: 'Services Team 58', teams: [{ id: 58 }] })
+    expect(result[1]).toMatchObject({ id: 10, name: 'Sunday Morning' })
+  })
+
+  it('filters by search query, matching teams without service types by name', () => {
+    const items = [
+      makeTeam({
+        teamId: 58,
+        teamName: 'Services Team 58',
+        value: { teamId: 58, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+      makeTeam({
+        teamId: 99,
+        teamName: 'Unrelated Team',
+        value: { teamId: 99, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items, 'Services Team')
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ id: -58, name: 'Services Team 58', teams: [{ id: 58 }] })
+  })
+})

package/src/screens/conversation_filter_recipients/hooks/use_flattened_array_of_service_types_with_teams.tsx

@@ -13,9 +13,10 @@ export function useFlattenedArrayOfServiceTypesWithTeams({
   firstRowStyle,
   lastRowStyle,
 }: Props) {
-  const flattenedData: SectionListData = useMemo(
-    () =>
-      data.flatMap(serviceType => {
+  const flattenedData: SectionListData = useMemo(() => {
+    const serviceTypeRows = data
+      .filter(serviceType => serviceType.id > 0)
+      .flatMap(serviceType => {
         const teamIdsForServiceType = serviceType.teams.map(team => team.id)
 
         return [
@@ -28,23 +29,49 @@ export function useFlattenedArrayOfServiceTypesWithTeams({
             },
             sectionStyle: firstRowStyle,
           },
-          ...serviceType.teams.map((team, teamIdx) => {
-            const isLastTeamInServiceType = teamIdx === serviceType.teams.length - 1
-
-            return {
-              type: SectionTypes.team as const,
-              data: {
-                teamName: team.name,
-                teamId: team.id,
-                serviceTypeId: serviceType.id,
-              },
-              sectionStyle: isLastTeamInServiceType ? lastRowStyle : undefined,
-            }
-          }),
+          ...serviceType.teams.map((team, teamIdx) => ({
+            type: SectionTypes.team as const,
+            data: {
+              teamName: team.name,
+              teamId: team.id,
+              serviceTypeId: serviceType.id,
+            },
+            sectionStyle: teamIdx === serviceType.teams.length - 1 ? lastRowStyle : undefined,
+          })),
         ]
-      }),
-    [data, firstRowStyle, lastRowStyle]
-  )
+      })
+
+    // Teams without a service type (id < 0) are merged under a single "No service type" section.
+    // Service type ID 0 is a safe sentinel — real IDs are always positive.
+    const serviceTypelessTeams = data
+      .filter(serviceType => serviceType.id < 0)
+      .flatMap(serviceType => serviceType.teams)
+
+    if (serviceTypelessTeams.length === 0) return serviceTypeRows
+
+    const serviceTypelessRows: SectionListData = [
+      {
+        type: SectionTypes.header as const,
+        data: {
+          serviceTypeName: null,
+          serviceTypeId: 0,
+          teamIdsForServiceType: serviceTypelessTeams.map(t => t.id),
+        },
+        sectionStyle: firstRowStyle,
+      },
+      ...serviceTypelessTeams.map((team, teamIdx) => ({
+        type: SectionTypes.team as const,
+        data: {
+          teamName: team.name,
+          teamId: team.id,
+          serviceTypeId: 0,
+        },
+        sectionStyle: teamIdx === serviceTypelessTeams.length - 1 ? lastRowStyle : undefined,
+      })),
+    ]
+
+    return [...serviceTypelessRows, ...serviceTypeRows]
+  }, [data, firstRowStyle, lastRowStyle])
 
   return flattenedData
 }

package/src/screens/conversation_filter_recipients/hooks/use_service_types_with_teams.ts

@@ -59,45 +59,47 @@ const useTeams = ({ filterType }: { filterType: TeamFilterTypes }) => {
   return { data: result || [], ...rest }
 }
 
-function decorateTeamResponseItems(teamResponseItems: TeamResponseItem[], searchQuery?: string) {
-  return teamResponseItems
-    .filter(item => {
-      if (!searchQuery) return true
+export function decorateTeamResponseItems(
+  teamResponseItems: TeamResponseItem[],
+  searchQuery?: string
+) {
+  const filtered = teamResponseItems.filter(item => {
+    if (!searchQuery) return true
+    const evalMatch = (str: string) => str.toLowerCase().includes(searchQuery.toLowerCase())
+    return evalMatch(item.name) || evalMatch(item.serviceTypeNames?.join(',') || '')
+  })
 
-      const evalMatch = (str: string) => str.toLowerCase().includes(searchQuery.toLowerCase())
-      const teamNameMatch = evalMatch(item.name)
-      const serviceTypeNamesMatch = evalMatch(item.serviceTypeNames?.join(',') || '')
+  const withServiceTypes = filtered.filter(item => item.value.serviceTypeIds.length > 0)
+  const withoutServiceTypes = filtered.filter(item => item.value.serviceTypeIds.length === 0)
 
-      return teamNameMatch || serviceTypeNamesMatch
-    })
-    .map(({ value, serviceTypeNames, teamName }) => {
-      return {
-        service_types: value.serviceTypeIds.map((serviceTypeId, i) => ({
-          id: serviceTypeId,
-          name: serviceTypeNames[i],
-        })),
-        team: {
-          id: value.teamId,
-          name: teamName,
-        },
-      }
+  // Negative team ID is used as a unique sentinel — real service type IDs are always positive.
+  const typelessEntries: ServiceTypeWithTeams[] = withoutServiceTypes.map(
+    ({ value, teamName }) => ({
+      id: -value.teamId,
+      name: teamName,
+      teams: [{ id: value.teamId, name: teamName }],
     })
+  )
+
+  const typedEntries = withServiceTypes
+    .map(({ value, serviceTypeNames, teamName }) => ({
+      service_types: value.serviceTypeIds.map((serviceTypeId, i) => ({
+        id: serviceTypeId,
+        name: serviceTypeNames[i],
+      })),
+      team: { id: value.teamId, name: teamName },
+    }))
     .reduce((acc: ServiceTypeWithTeams[], { service_types, team }) => {
       service_types.forEach(serviceType => {
         let serviceTypeEntry = acc.find(entry => entry.id === serviceType.id)
-
         if (!serviceTypeEntry) {
-          serviceTypeEntry = {
-            id: serviceType.id,
-            name: serviceType.name,
-            teams: [],
-          }
+          serviceTypeEntry = { id: serviceType.id, name: serviceType.name, teams: [] }
           acc.push(serviceTypeEntry)
         }
-
-        const initialTeams = serviceTypeEntry.teams
-        serviceTypeEntry.teams = uniqBy([...initialTeams, team], 'id')
+        serviceTypeEntry.teams = uniqBy([...serviceTypeEntry.teams, team], 'id')
       })
       return acc
     }, [])
+
+  return [...typelessEntries, ...typedEntries]
 }

package/src/screens/conversation_filter_recipients/types.tsx

@@ -17,7 +17,7 @@ export enum SectionTypes {
 }
 
 export interface ServiceTypeProps {
-  serviceTypeName: string
+  serviceTypeName: string | null
   serviceTypeId: number
   teamIdsForServiceType: number[]
 }

package/src/screens/conversation_screen.tsx

@@ -9,7 +9,8 @@ import {
   useRoute,
 } from '@react-navigation/native'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ActivityIndicator, FlatList, Platform, StyleSheet, View } from 'react-native'
+import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'
+import type { FlatList } from 'react-native-gesture-handler'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
@@ -17,6 +18,7 @@ import { EmptyConversationBlankState } from '../components/conversation/empty_co
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
+import { MessageList } from '../components/conversation/message_list'
 import {
   ConversationDisabledBanner,
   LeaderMessagesDisabledBanner,
@@ -85,9 +87,6 @@ export type ConversationRouteProps = {
 
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
-const extractItemKey = (item: EnrichedMessage) => String(item.id)
-const maintainVisibleContentPosition = { minIndexForVisible: 0 }
-
 export function ConversationScreen({ route }: ConversationScreenProps) {
   const { conversation_id, message_id, reply_root_id } = route.params
 
@@ -300,16 +299,11 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
         {noMessages ? (
           <EmptyConversationBlankState />
         ) : (
-          <FlatList
-            inverted
-            ref={listRef}
-            contentContainerStyle={styles.listContainer}
-            maintainVisibleContentPosition={maintainVisibleContentPosition}
+          <MessageList
+            listRef={listRef}
             data={items}
-            keyExtractor={extractItemKey}
             onScroll={onScroll}
             onScrollBeginDrag={onScrollBeginDrag}
-            scrollEventThrottle={64}
             viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs}
             onContentSizeChange={onContentSizeChange}
             onScrollToIndexFailed={onScrollToIndexFailed}
@@ -499,9 +493,6 @@ const useStyles = () => {
       backgroundColor: navigationTheme.colors.card,
       paddingBottom: bottom,
     },
-    listContainer: {
-      paddingVertical: 12,
-    },
     listHeader: {
       // Just whitespace to provide space where the typing indicator can be
       height: 16,

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

@@ -11,7 +11,7 @@ interface RecipientLinkRowProps {
   accessibilityHint: string
   imageUri?: string
   title: string
-  subtitle: string
+  subtitle?: string
 }
 
 export const RecipientLinkRow = ({
@@ -40,9 +40,11 @@ export const RecipientLinkRow = ({
           <Text style={styles.title} numberOfLines={2}>
             {title}
           </Text>
-          <Text variant="tertiary" numberOfLines={1}>
-            {subtitle}
-          </Text>
+          {subtitle && (
+            <Text variant="tertiary" numberOfLines={1}>
+              {subtitle}
+            </Text>
+          )}
         </View>
         {Platform.OS === 'ios' && (
           <Icon name="general.rightChevron" size={16} style={styles.icon} />

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

@@ -9,7 +9,8 @@ interface TeamRecipientRowProps {
 
 export const TeamRecipientRow = ({ serviceType, onPress }: TeamRecipientRowProps) => {
   const serviceTypeAccessibilityLabel = `Select ${pluralize(serviceType.teams.length, 'team')} for ${serviceType.name}`
-  const teamNames = serviceType.teams.map(team => team.name).join(', ')
+  const teamNames =
+    serviceType.id > 0 ? serviceType.teams.map(team => team.name).join(', ') : undefined
 
   return (
     <RecipientLinkRow

package/src/screens/team_conversation_screen.tsx

@@ -2,8 +2,10 @@ import { StackActions, StaticScreenProps, useNavigation } from '@react-navigatio
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect } from 'react'
 import { DefaultLoading } from '../components/page/loading'
+import BlankState from '../components/primitive/blank_state_primitive'
 import { useApiClient } from '../hooks'
 import { findOrCreateServicesConversation } from '../hooks/services/use_find_or_create_services_conversation'
+import { ResponseError } from '../utils/response_error'
 
 export type TeamConversationRouteProps = {
   plan_id?: number
@@ -16,7 +18,11 @@ export const TeamConversationScreen = ({ route }: TeamConversationScreenProps) =
   const apiClient = useApiClient()
   const queryClient = useQueryClient()
   const navigation = useNavigation()
-  const { data: conversation } = useQuery({
+  const {
+    data: conversation,
+    isError,
+    error,
+  } = useQuery({
     queryKey: ['team-conversation', route.params.team_ids, route.params.plan_id],
     queryFn: () =>
       findOrCreateServicesConversation({
@@ -24,6 +30,7 @@ export const TeamConversationScreen = ({ route }: TeamConversationScreenProps) =
         teamIds: route.params.team_ids ?? [],
         planId: route.params.plan_id,
       }).then(r => r.conversation),
+    retry: (failureCount, err) => !(err instanceof ResponseError) && failureCount < 3,
   })
 
   useEffect(() => {
@@ -41,5 +48,30 @@ export const TeamConversationScreen = ({ route }: TeamConversationScreenProps) =
     }
   }, [conversation?.id, conversation?.title, navigation, queryClient])
 
+  if (isError) return <TeamConversationError error={error} onGoBack={navigation.goBack} />
+
   return <DefaultLoading />
 }
+
+function TeamConversationError({ error, onGoBack }: { error: Error; onGoBack: () => void }) {
+  const detail =
+    error instanceof ResponseError
+      ? error.errors
+          .map(e => e.detail)
+          .filter(Boolean)
+          .join('\n')
+      : ''
+
+  return (
+    <BlankState.Root>
+      <BlankState.Imagery name="people.noTextMessage" />
+      <BlankState.Content>
+        <BlankState.Heading>Can't start this conversation</BlankState.Heading>
+        <BlankState.Text>
+          {detail || 'Something went wrong while starting this conversation.'}
+        </BlankState.Text>
+      </BlankState.Content>
+      <BlankState.Button title="Go back" onPress={onGoBack} size="md" accessibilityRole="link" />
+    </BlankState.Root>
+  )
+}

package/src/utils/client/__tests__/instrumented_fetch.test.ts

@@ -5,15 +5,18 @@ const buildResponse = (status: number) => new Response('', { status })
 
 describe('instrumentedFetch', () => {
   let reportError: jest.SpyInstance
+  let warnSpy: jest.SpyInstance
   let fetchSpy: jest.SpyInstance
 
   beforeEach(() => {
     reportError = jest.spyOn(Log, 'reportError').mockImplementation(() => {})
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     fetchSpy = jest.spyOn(globalThis, 'fetch')
   })
 
   afterEach(() => {
     reportError.mockRestore()
+    warnSpy.mockRestore()
     fetchSpy.mockRestore()
   })
 
@@ -27,6 +30,7 @@ describe('instrumentedFetch', () => {
 
     expect(result).toBe(response)
     expect(reportError).not.toHaveBeenCalled()
+    expect(warnSpy).not.toHaveBeenCalled()
   })
 
   it.each([400, 422, 500])(
@@ -63,7 +67,7 @@ describe('instrumentedFetch', () => {
     expect(reportError).not.toHaveBeenCalled()
   })
 
-  it('reports network failures with http.error=network', async () => {
+  it('warns on network failures instead of reporting them', async () => {
     const networkError = new TypeError('Network request failed')
     fetchSpy.mockRejectedValueOnce(networkError)
 
@@ -71,10 +75,10 @@ describe('instrumentedFetch', () => {
       instrumentedFetch('https://api.example.com/conversations/123', { method: 'GET' })
     ).rejects.toBe(networkError)
 
-    expect(reportError).toHaveBeenCalledTimes(1)
-    const [error, context] = reportError.mock.calls[0]
-    expect(error.name).toBe('NetworkError')
-    expect(error.message).toContain('Network failure GET /conversations/:id')
+    expect(reportError).not.toHaveBeenCalled()
+    expect(warnSpy).toHaveBeenCalledTimes(1)
+    const [message, context] = warnSpy.mock.calls[0]
+    expect(message).toContain('Network failure GET /conversations/:id')
     expect(context.tags).toMatchObject({
       'http.method': 'GET',
       'http.path': '/conversations/:id',

package/src/utils/client/client.ts

@@ -105,16 +105,18 @@ export class Client {
     return makeRequest(requestArgs).catch(this.handleNotOk)
   }
 
-  handleNotOk = async (response: Response) => {
+  handleNotOk = async (response: Response | Error) => {
+    if (!(response instanceof Response)) return Promise.reject(response)
+
+    const errorData = await this.parseErrorResponse(response)
+    const notOkResponse = response.clone() as FailedResponse
+    notOkResponse.errors = errorData.errors || []
+
     if (response.status === 401) {
-      const errorData = await this.parseErrorResponse(response)
-      this.onUnauthorizedResponse?.({
-        ...response,
-        errors: errorData.errors || [],
-      } as FailedResponse)
+      this.onUnauthorizedResponse?.(notOkResponse)
     }
 
-    return Promise.reject(response)
+    return Promise.reject(notOkResponse)
   }
 
   parseErrorResponse = async (response: Response): Promise<Partial<FailedResponse>> => {

package/src/utils/client/instrumented_fetch.ts

@@ -14,7 +14,7 @@ export async function instrumentedFetch(url: string, init: RequestInit): Promise
     if (!response.ok) reportHttpError(response, method, url)
     return response
   } catch (networkError) {
-    reportNetworkError(networkError as Error, method, url)
+    warnNetworkError(networkError as Error, method, url)
     throw networkError
   }
 }
@@ -38,12 +38,9 @@ function reportHttpError(response: Response, method: string, url: string) {
   })
 }
 
-function reportNetworkError(networkError: Error, method: string, url: string) {
+function warnNetworkError(networkError: Error, method: string, url: string) {
   const path = templatePath(url)
-  const error = new Error(`Network failure ${method} ${path}: ${networkError.message}`)
-  error.name = 'NetworkError'
-
-  Log.reportError(error, {
+  console.warn(`Network failure ${method} ${path}: ${networkError.message}`, {
     scope: 'http',
     tags: {
       ...SHARED_TAGS,