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

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

@@ -8,9 +8,8 @@ import {
   useTheme as useNavigationTheme,
   useRoute,
 } from '@react-navigation/native'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ActivityIndicator, FlatList, Platform, StyleSheet, View } from 'react-native'
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { FlatList, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
 import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
@@ -25,46 +24,25 @@ import {
 import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
 import { SystemMessage } from '../components/conversation/system_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
-import { UnreadDivider } from '../components/conversation/unread_divider'
 import { KeyboardView } from '../components/display/keyboard_view'
 import BlankState from '../components/primitive/blank_state_primitive'
-import {
-  ConversationContextProvider,
-  useConversationContext,
-} from '../contexts/conversation_context'
+import { ConversationContextProvider } from '../contexts/conversation_context'
 import { useTheme } from '../hooks'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events'
-import { availableFeatures, useFeatures } from '../hooks/use_features'
-import { useFlatListViewability } from '../hooks/use_flat_list_viewability'
-import { useJumpToBottomAction } from '../hooks/use_jump_to_bottom_action'
-import { useJumpToUnreadAnchor } from '../hooks/use_jump_to_unread_anchor'
-import { useJumpToUnreadGates } from '../hooks/use_jump_to_unread_gates'
 import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import {
   analyticsEvents,
   normalizeAnalyticsMetadata,
   usePublishProductAnalyticsEvent,
 } from '../hooks/use_product_analytics'
-import { useScrollTracking } from '../hooks/use_scroll_tracking'
-import { useTrackHighestSeenMessage } from '../hooks/use_track_highest_seen_message'
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
 import { MessageResource } from '../types/resources/message'
 import { getRelativeDateStatus } from '../utils/date'
-import {
-  groupMessages,
-  UNREAD_DIVIDER_KEY,
-  type DateSeparator,
-  type EnrichedMessage,
-} from '../utils/group_messages'
-import {
-  detectDividerExitTowardNewer,
-  reportViewableMessages,
-  type ViewabilityObserver,
-} from '../utils/message_viewability'
+import { groupMessages, type DateSeparator } from '../utils/group_messages'
 import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
 import { isSystemMessage } from '../utils/system_messages'
 
@@ -75,7 +53,6 @@ export type ConversationRouteProps = {
   chat_group_graph_id?: string
   clear_input?: boolean
   editing_message_id?: number | null
-  message_id?: string
   title?: string
   subtitle?: string
   badge?: ConversationBadgeResource
@@ -85,34 +62,20 @@ 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
+  const { conversation_id, reply_root_id } = route.params
 
   const { data: conversation } = useConversation({ conversation_id })
-  const { featureEnabled } = useFeatures()
 
   usePublishProductAnalyticsEvent(analyticsEvents.conversation_show_opened, {
     reply_root_id,
     ...normalizeAnalyticsMetadata(conversation),
   })
 
-  const lastReadMessageSortKey = conversation.conversationMembership?.lastReadMessageSortKey ?? null
-  const jumpToUnreadAnchor =
-    featureEnabled(availableFeatures.jump_to_unread) && !reply_root_id
-      ? lastReadMessageSortKey
-      : null
-  const initialMessageId = message_id ?? jumpToUnreadAnchor
-  const initialMessageIdIsAnchor = !!initialMessageId && !message_id
-
   return (
     <ConversationContextProvider
       conversationId={conversation_id}
       currentPageReplyRootId={reply_root_id ?? null}
-      initialMessageId={initialMessageId}
-      initialMessageIdIsAnchor={initialMessageIdIsAnchor}
     >
       <ConversationScreenContent route={route} />
     </ConversationContextProvider>
@@ -122,49 +85,29 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
 function ConversationScreenContent({ route }: ConversationScreenProps) {
   const styles = useStyles()
   const navigation = useNavigation()
-  const {
-    conversation_id: conversationId,
-    editing_message_id: editingMessageId,
-    reply_root_id: replyRootId,
-    reply_root_author_name: replyRootAuthorName,
-  } = route.params
+  const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
+    route.params
   const { data: conversation } = useConversation(route.params)
-  const {
-    messages,
-    fetchOlderMessages,
-    fetchNewerMessages,
-    hasMoreNewerMessages,
-    isFetchingNewerMessages,
-    cancelFetchNewerMessages,
-  } = useConversationMessages({ conversation_id: conversationId, reply_root_id: replyRootId })
-
-  const { jumpToUnreadActive } = useJumpToUnreadGates()
-  const { initialMessageId } = useConversationContext()
-
-  useConversationJoltEvents({ conversationId })
-  useConversationMessagesJoltEvents({ conversationId })
+  const { messages, fetchNextPage } = useConversationMessages({
+    conversation_id,
+    reply_root_id,
+  })
+  useConversationJoltEvents({ conversationId: conversation_id })
+  useConversationMessagesJoltEvents({ conversationId: conversation_id })
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const { onMessageSeen } = useTrackHighestSeenMessage()
-
-  const items = useMemo(
-    () =>
-      groupMessages({
-        ms: messages,
-        inReplyScreen: !!replyRootId,
-        jumpToUnreadActive,
-        initialMessageId,
-      }),
-    [messages, replyRootId, jumpToUnreadActive, initialMessageId]
-  )
-  const noMessages = items.length === 0
+  const messagesWithSeparators = groupMessages({
+    ms: messages,
+    inReplyScreen: !!reply_root_id,
+  })
+  const noMessages = messagesWithSeparators.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
   const canReply = memberAbility?.canReply
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
   const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
-  const currentlyEditingMessage = messages.find(m => String(m.id) === String(editingMessageId))
-  const replyRootAuthorFirstName = replyRootAuthorName?.split(' ')[0]
+  const currentlyEditingMessage = messages.find(m => String(m.id) === String(editing_message_id))
+  const replyRootAuthorFirstName = reply_root_author_name?.split(' ')[0]
   const replyHeaderTitle = replyRootAuthorFirstName
     ? `Reply to ${replyRootAuthorFirstName}`
     : 'Reply'
@@ -172,96 +115,21 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const muted = conversation.conversationMembership?.muted ?? conversation.muted
 
   const listRef = useRef<FlatList>(null)
-  const [dividerScrolledPast, setDividerScrolledPast] = useState(false)
-
-  const observers = useMemo<ViewabilityObserver<EnrichedMessage>[]>(
-    () => [
-      reportViewableMessages(onMessageSeen),
-      detectDividerExitTowardNewer({
-        dividerKey: UNREAD_DIVIDER_KEY,
-        initialMessageId,
-        onExited: () => setDividerScrolledPast(true),
-      }),
-    ],
-    [onMessageSeen, initialMessageId]
-  )
+  const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
 
-  const { viewabilityConfigCallbackPairs, onScrollBeginDrag: viewabilityOnScrollBeginDrag } =
-    useFlatListViewability({ observers })
-  const {
-    onContentSizeChange,
-    onScrollToIndexFailed,
-    onScrollBeginDrag: anchorOnScrollBeginDrag,
-  } = useJumpToUnreadAnchor({ listRef, items })
-  const onScrollBeginDrag = useCallback(() => {
-    viewabilityOnScrollBeginDrag()
-    anchorOnScrollBeginDrag()
-  }, [viewabilityOnScrollBeginDrag, anchorOnScrollBeginDrag])
-  const { onScroll, showJumpToBottomButton } = useScrollTracking({
-    hasMoreNewerMessages,
-    isFetchingNewerMessages,
-    fetchNewerMessages,
-    cancelFetchNewerMessages,
-  })
-  const { handleJumpToBottom, isJumpingToBottom } = useJumpToBottomAction({ listRef })
-
-  const listHeader = useMemo(
-    () => (
-      <View>
-        {isFetchingNewerMessages && (
-          <Animated.View
-            entering={FadeIn.duration(750)}
-            exiting={FadeOut.duration(750)}
-            style={styles.loadingFooter}
-            accessibilityRole="progressbar"
-            accessibilityLabel="Loading more messages"
-          >
-            <ActivityIndicator />
-          </Animated.View>
-        )}
-        <View style={styles.listHeader} />
-      </View>
-    ),
-    [isFetchingNewerMessages, styles.loadingFooter, styles.listHeader]
-  )
+  const trackScroll = (event: any) => {
+    const offsetY = event.nativeEvent.contentOffset.y
+    setShowJumpToBottomButton(offsetY > 200)
+  }
 
-  const renderItem = useCallback(
-    ({ item }: { item: EnrichedMessage }) => {
-      if (item.type === 'DateSeparator') return <InlineDateSeparator {...item} />
-      if (item.type === 'UnreadDivider') return <UnreadDivider scrolledPast={dividerScrolledPast} />
-      if (item.type === 'ReplyShadowMessage') {
-        return (
-          <ReplyShadowMessage
-            {...item}
-            conversation_id={conversationId}
-            inReplyScreen={!!replyRootId}
-          />
-        )
-      }
-      if (isSystemMessage(item)) {
-        return <SystemMessage message={item} conversationId={conversationId} />
-      }
-      return (
-        <Message
-          {...item}
-          canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
-          conversation_id={conversationId}
-          latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
-          inReplyScreen={!!replyRootId}
-        />
-      )
-    },
-    [
-      dividerScrolledPast,
-      conversationId,
-      replyRootId,
-      canDeleteNonAuthoredMessages,
-      conversation?.latestReadMessageSortKey,
-    ]
-  )
+  const handleReturnToBottom = useCallback(() => {
+    listRef.current?.scrollToOffset({
+      offset: 0,
+    })
+  }, [])
 
   useEffect(() => {
-    if (replyRootId) {
+    if (reply_root_id) {
       navigation.setParams({
         title: replyHeaderTitle,
       })
@@ -273,7 +141,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
         muted,
       })
     }
-  }, [navigation, title, badges, conversation?.deleted, replyRootId, replyHeaderTitle, muted])
+  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle, muted])
 
   if (!conversation || conversation.deleted) {
     return (
@@ -304,32 +172,51 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             inverted
             ref={listRef}
             contentContainerStyle={styles.listContainer}
-            maintainVisibleContentPosition={maintainVisibleContentPosition}
-            data={items}
-            keyExtractor={extractItemKey}
-            onScroll={onScroll}
-            onScrollBeginDrag={onScrollBeginDrag}
-            scrollEventThrottle={64}
-            viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs}
-            onContentSizeChange={onContentSizeChange}
-            onScrollToIndexFailed={onScrollToIndexFailed}
-            renderItem={renderItem}
-            onEndReached={() => fetchOlderMessages()}
-            ListHeaderComponent={listHeader}
+            data={messagesWithSeparators}
+            keyExtractor={item => item.id}
+            onScroll={trackScroll}
+            scrollEventThrottle={10}
+            renderItem={({ item }) => {
+              if (item.type === 'DateSeparator') {
+                return <InlineDateSeparator {...item} />
+              }
+
+              if (item.type === 'ReplyShadowMessage') {
+                return (
+                  <ReplyShadowMessage
+                    {...(item as any)}
+                    conversation_id={conversation_id}
+                    inReplyScreen={!!reply_root_id}
+                  />
+                )
+              }
+
+              if (isSystemMessage(item)) {
+                return <SystemMessage message={item} conversationId={conversation_id} />
+              }
+
+              return (
+                <Message
+                  {...item}
+                  canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
+                  conversation_id={conversation_id}
+                  latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
+                  inReplyScreen={!!reply_root_id}
+                />
+              )
+            }}
+            onEndReached={() => fetchNextPage()}
+            ListHeaderComponent={<View style={styles.listHeader} />}
           />
         )}
-        <JumpToBottomButton
-          onPress={handleJumpToBottom}
-          visible={showJumpToBottomButton}
-          loading={isJumpingToBottom}
-        />
+        <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
         {!noMessages && <TypingIndicator />}
         {showLeaderDisabledReplyBanner && <LeaderMessagesDisabledBanner />}
         <ConversationBottomBar
           conversation={conversation}
           canReply={canReply}
           replyRootAuthorFirstName={replyRootAuthorFirstName}
-          replyRootId={replyRootId}
+          replyRootId={reply_root_id}
           currentlyEditingMessage={currentlyEditingMessage}
         />
       </KeyboardView>
@@ -506,10 +393,6 @@ const useStyles = () => {
       // Just whitespace to provide space where the typing indicator can be
       height: 16,
     },
-    loadingFooter: {
-      paddingVertical: 12,
-      alignItems: 'center',
-    },
   })
 }
 

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>
+  )
+}