@planningcenter/chat-react-native 3.38.0-rc.9 → 3.38.1-rc.0

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -12,7 +12,6 @@ import {
   updateCacheWithIndividualMessage,
   updateCacheWithReaction,
   getThreadedMessagesQueryKey,
-  hasUnloadedNewerPages,
 } from '../utils/cache/messages_cache'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
 import { completeMessageCreationTracking } from '../utils/performance_tracking'
@@ -53,10 +52,10 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       }
     }
 
-    if (e.event === 'message.updated' || !hasUnloadedNewerPages(queryClient, messagesQueryKey)) {
-      updateCacheWithMessage(queryClient, messagesQueryKey, message, e.event)
-    }
+    // Update the main conversation cache
+    updateCacheWithMessage(queryClient, messagesQueryKey, message, e.event)
 
+    // If message has a reply_root_id, also update the threaded cache
     if (data.reply_root_id) {
       const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
         conversationId,

package/src/hooks/use_conversations_actions.ts

@@ -98,21 +98,6 @@ export const useConversationsMute = ({ conversation }: { conversation: Conversat
   }
 }
 
-export const useConversationsMarkReadUpTo = ({ conversationId }: { conversationId: number }) => {
-  const apiClient = useApiClient()
-
-  return useMutation({
-    mutationKey: ['markReadUpTo', conversationId],
-    mutationFn: async ({ sortKey }: { sortKey: string }) =>
-      apiClient.chat.post({
-        url: `/me/conversations/${conversationId}/mark_read_up_to`,
-        data: {
-          data: { type: 'Conversation', attributes: { sort_key: sortKey } },
-        },
-      }),
-  })
-}
-
 export const useMarkAllRead = () => {
   const apiClient = useApiClient()
   const { args } = useConversationsContext()

package/src/hooks/use_features.ts

@@ -40,7 +40,6 @@ export const availableFeatures = {
   message_reporting: 'ROLLOUT_MOBILE_message_reporting',
   granular_notifications_ui: 'ROLLOUT_granular_notification_preferences_ui',
   custom_conversation_avatars: 'ROLLOUT_custom_conversation_avatars',
-  jump_to_unread: 'ROLLOUT_jump_to_unread',
   conversation_safety_lock: 'ROLLOUT_conversation_safety_lock',
   video_moderation: 'ROLLOUT_MOBILE_video_moderation',
 } as const satisfies Record<string, `ROLLOUT_${string}`>

package/src/hooks/use_mark_latest_message_read.ts

@@ -1,19 +1,15 @@
 import { debounce } from 'lodash'
 import { useEffect, useMemo, useRef } from 'react'
-import { useConversationContext } from '../contexts/conversation_context'
 import { ConversationResource, MessageResource } from '../types'
 import { useAppState } from './use_app_state'
 import { useConversationsMarkRead } from './use_conversations_actions'
-import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
 
 interface Props {
   conversation: ConversationResource
-  messages?: MessageResource[]
+  messages: MessageResource[]
 }
 
 export function useMarkLatestMessageRead({ conversation }: Props) {
-  const { jumpToUnreadActive } = useJumpToUnreadGates()
-  const { currentPageReplyRootId, atEndOfMessageHistory } = useConversationContext()
   const firedOnce = useRef<boolean>(false)
   const { markRead } = useConversationsMarkRead({ conversation })
   const debouncedMarkRead = useMemo(
@@ -29,20 +25,10 @@ export function useMarkLatestMessageRead({ conversation }: Props) {
 
   useEffect(() => {
     if (!isActive || !shouldMarkRead) return
-    if (currentPageReplyRootId) return
-    if (jumpToUnreadActive && !atEndOfMessageHistory) return
 
     firedOnce.current = true
 
     debouncedMarkRead(true)
     // keeping unreadReactionCount in the dependency array to watch for changes
-  }, [
-    debouncedMarkRead,
-    isActive,
-    shouldMarkRead,
-    unreadReactionCount,
-    currentPageReplyRootId,
-    jumpToUnreadActive,
-    atEndOfMessageHistory,
-  ])
+  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReactionCount])
 }

package/src/hooks/use_suspense_api.ts

@@ -90,7 +90,7 @@ export const useSuspensePaginator = <T extends ResourceObject>(
   return { ...query, data, totalCount }
 }
 
-export const throwResponseError = (error: unknown) => {
+const throwResponseError = (error: unknown) => {
   if (error instanceof Response) {
     throw new ResponseError(error as FailedResponse)
   }

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[]
 }