@planningcenter/chat-react-native 4.2.0 → 4.2.1-qa-staging.0

package/src/__tests__/hooks/use_direct_message_eligibility.test.tsx

@@ -0,0 +1,83 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { useApiClient } from '../../hooks/use_api_client'
+import { useDirectMessageEligibility } from '../../hooks/use_direct_message_eligibility'
+
+jest.mock('../../hooks/use_api_client')
+
+const mockedUseApiClient = useApiClient as jest.MockedFunction<typeof useApiClient>
+const mockGet = jest.fn()
+
+beforeEach(() => {
+  mockGet.mockReset()
+  mockedUseApiClient.mockReturnValue({ chat: { get: mockGet } } as any)
+})
+
+const createWrapper = () => {
+  const queryClient = buildTestQueryClient()
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+const args = { groupId: 'Groups-Group-42', personId: 75179873 }
+
+test("reads the member's eligibility from the chat group", async () => {
+  mockGet.mockResolvedValue({
+    data: {
+      id: '75179873',
+      type: 'Member',
+      canDirectMessage: false,
+      directMessagesDisabled: true,
+    },
+  })
+
+  const { result } = renderHook(() => useDirectMessageEligibility(args), {
+    wrapper: createWrapper(),
+  })
+
+  await waitFor(() => expect(result.current.eligibility).toBeDefined())
+
+  expect(mockGet).toHaveBeenCalledWith({
+    url: '/me/groups/Groups-Group-42/members/75179873',
+    data: { fields: { Member: ['can_direct_message', 'direct_messages_disabled'] } },
+  })
+  expect(result.current.eligibility).toEqual({
+    canDirectMessage: false,
+    directMessagesDisabled: true,
+  })
+})
+
+test('has no answer until the member loads', () => {
+  mockGet.mockReturnValue(new Promise(() => {}))
+
+  const { result } = renderHook(() => useDirectMessageEligibility(args), {
+    wrapper: createWrapper(),
+  })
+
+  expect(result.current.eligibility).toBeUndefined()
+  expect(result.current.isLoading).toBe(true)
+})
+
+test('reports a failed lookup without an answer', async () => {
+  mockGet.mockRejectedValue(new Error('404'))
+
+  const { result } = renderHook(() => useDirectMessageEligibility(args), {
+    wrapper: createWrapper(),
+  })
+
+  await waitFor(() => expect(result.current.isError).toBe(true))
+
+  expect(result.current.eligibility).toBeUndefined()
+  expect(result.current.isLoading).toBe(false)
+})
+
+test('does not ask when disabled', () => {
+  renderHook(() => useDirectMessageEligibility({ ...args, enabled: false }), {
+    wrapper: createWrapper(),
+  })
+
+  expect(mockGet).not.toHaveBeenCalled()
+})

package/src/__tests__/screens/conversation_new/components/services_form.test.tsx

@@ -0,0 +1,91 @@
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { useFindOrCreateServicesConversation } from '../../../../hooks/services/use_find_or_create_services_conversation'
+import { useTeamMembersForNewConversation } from '../../../../hooks/services/use_team_members_for_new_conversation'
+import { ServicesForm } from '../../../../screens/conversation_new/components/services_form'
+
+jest.mock('react-native-reanimated', () => ({
+  ...jest.requireActual('react-native-reanimated/mock'),
+  LayoutAnimationConfig: ({ children }: { children: React.ReactNode }) => children,
+}))
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ navigate: jest.fn(), dispatch: jest.fn(), getParent: () => undefined }),
+}))
+jest.mock('../../../../hooks/use_api_client', () => ({ useApiClient: () => ({}) }))
+jest.mock('../../../../hooks/use_upload_client', () => ({ useUploadClient: () => ({}) }))
+jest.mock('../../../../hooks/use_features', () => ({
+  ...jest.requireActual('../../../../hooks/use_features'),
+  useFeatures: () => ({ features: [], featureEnabled: () => false }),
+}))
+jest.mock('../../../../hooks/use_conversation_validate', () => ({
+  useConversationValidate: () => ({ warnings: [], validationPending: false }),
+}))
+jest.mock('../../../../hooks/services/use_services_chat_conversation_payload', () => ({
+  useServicesChatConversationPayload: () => ({ payload: undefined, isLoading: false }),
+}))
+jest.mock('../../../../hooks/services/use_services_team', () => ({
+  useServicesTeams: () => [],
+}))
+jest.mock('../../../../hooks/services/use_team_plans', () => ({
+  useTeamPlans: () => ({
+    planOptions: [],
+    isFetching: false,
+    isError: false,
+    findPlan: () => undefined,
+  }),
+}))
+jest.mock('../../../../hooks/services/use_team_members_for_new_conversation', () => ({
+  useTeamMembersForNewConversation: jest.fn(() => ({ members: [], isError: false })),
+}))
+jest.mock('../../../../hooks/services/use_find_or_create_services_conversation', () => ({
+  useFindOrCreateServicesConversation: jest.fn(() => ({
+    mutate: jest.fn(),
+    isPending: false,
+    selectionHasConversation: false,
+    isLoadingConversationCheck: false,
+  })),
+}))
+
+const mockedFindOrCreate = jest.mocked(useFindOrCreateServicesConversation)
+const mockedTeamMembers = jest.mocked(useTeamMembersForNewConversation)
+
+const latestArgs = <T extends jest.Mock>(mock: T) => mock.mock.calls.at(-1)?.[0]
+
+const safeAreaMetrics = {
+  frame: { x: 0, y: 0, width: 390, height: 844 },
+  insets: { top: 0, right: 0, bottom: 0, left: 0 },
+}
+
+const renderForm = (props: { initialPlanId?: number } = {}) =>
+  render(
+    <SafeAreaProvider initialMetrics={safeAreaMetrics}>
+      <ThemeProvider value={DefaultTheme}>
+        <ServicesForm initialTeamIds={[1, 2]} {...props} />
+      </ThemeProvider>
+    </SafeAreaProvider>
+  )
+
+describe('ServicesForm', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('filters by plan when opened from a plan', () => {
+    const { getByRole } = renderForm({ initialPlanId: 42 })
+
+    expect(getByRole('switch').props.value).toBe(true)
+    expect(latestArgs(mockedFindOrCreate)).toMatchObject({ teamIds: [1, 2], planId: 42 })
+    expect(latestArgs(mockedTeamMembers)).toMatchObject({ teamIds: [1, 2], planId: 42 })
+  })
+
+  it('does not filter by plan when opened without a plan', () => {
+    const { getByRole } = renderForm()
+
+    expect(getByRole('switch').props.value).toBe(false)
+    expect(latestArgs(mockedFindOrCreate)).toMatchObject({ teamIds: [1, 2], planId: undefined })
+    expect(latestArgs(mockedTeamMembers)).toMatchObject({ teamIds: [1, 2], planId: undefined })
+  })
+})

package/src/__tests__/utils/gated_message_cache.test.ts

@@ -0,0 +1,26 @@
+import { gatedMessageCache } from '../../utils/gated_message_cache'
+
+describe('gatedMessageCache', () => {
+  const queryKey = ['messages']
+
+  it('keeps new messages out while they are not accepted and reports the skip', () => {
+    const onSkippedNewMessage = jest.fn()
+    const cache = gatedMessageCache({ queryKey, acceptNewMessages: false, onSkippedNewMessage })
+
+    expect(cache.queryKey).toBe(queryKey)
+    expect(cache.canUpdate?.('message.created')).toBe(false)
+    expect(onSkippedNewMessage).toHaveBeenCalledTimes(1)
+    expect(cache.canUpdate?.('message.updated')).toBe(true)
+    expect(cache.canUpdate?.('message.destroyed')).toBe(true)
+    expect(cache.canUpdate?.('reaction')).toBe(true)
+    expect(onSkippedNewMessage).toHaveBeenCalledTimes(1)
+  })
+
+  it('lets new messages in once they are accepted', () => {
+    const onSkippedNewMessage = jest.fn()
+    const cache = gatedMessageCache({ queryKey, acceptNewMessages: true, onSkippedNewMessage })
+
+    expect(cache.canUpdate?.('message.created')).toBe(true)
+    expect(onSkippedNewMessage).not.toHaveBeenCalled()
+  })
+})

package/src/components/conversation/message_form.tsx

@@ -71,6 +71,7 @@ interface MessagesFormRootProps extends ViewProps {
   replyRootId?: string | null
   replyRootAuthorFirstName?: string | null
   onFlaggedInMessageForm?: (id: string) => void
+  onBeforeSubmit?: () => void
 }
 
 const MessageFormContext = React.createContext<{
@@ -113,6 +114,7 @@ function MessageFormRoot({
   replyRootId,
   replyRootAuthorFirstName,
   onFlaggedInMessageForm,
+  onBeforeSubmit,
 }: MessagesFormRootProps) {
   const { giphyApiKey } = useContext(ChatContext)
   const canGiphy = !!giphyApiKey && !currentlyEditingMessage
@@ -227,6 +229,8 @@ function MessageFormRoot({
   const handleSubmit = () => {
     if (!canSubmit) return
 
+    onBeforeSubmit?.()
+
     if (canGiphy && usingGiphy) {
       TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())
       Haptic.impactLight()

package/src/components/conversation/message_list.tsx

@@ -16,7 +16,12 @@ import { SystemMessage } from './system_message'
 
 type ScrollHandlers = Pick<
   FlatListProps<EnrichedMessage>,
-  'onScroll' | 'onLayout' | 'onContentSizeChange' | 'onScrollEndDrag' | 'onMomentumScrollEnd'
+  | 'onScroll'
+  | 'onLayout'
+  | 'onContentSizeChange'
+  | 'onScrollEndDrag'
+  | 'onMomentumScrollEnd'
+  | 'maintainVisibleContentPosition'
 >
 
 interface MessageListProps extends ScrollHandlers {
@@ -45,6 +50,7 @@ export function MessageList({
   onContentSizeChange,
   onScrollEndDrag,
   onMomentumScrollEnd,
+  maintainVisibleContentPosition,
 }: MessageListProps) {
   const styles = useStyles()
   const inReplyScreen = !!replyRootId
@@ -102,6 +108,7 @@ export function MessageList({
         )
       }}
       onEndReached={onEndReached}
+      maintainVisibleContentPosition={maintainVisibleContentPosition}
       ListHeaderComponent={<View style={styles.listHeader} />}
     />
   )

package/src/hooks/index.ts

@@ -8,6 +8,7 @@ export * from './use_chat_permissions'
 export * from './use_create_android_ripple_color'
 export * from './use_current_person'
 export * from './use_deleting_ids'
+export * from './use_direct_message_eligibility'
 export * from './use_direct_messages_eligible'
 export * from './use_font_scale'
 export * from './use_has_direct_messages'

package/src/hooks/paginator_meta.ts

@@ -1,13 +1,37 @@
-import { NextPageCursor } from '../types/api_primitives'
+import { ApiCollection, NextPageCursor, ResourceObject } from '../types/api_primitives'
 import { RequestData } from '../utils/client'
 
 export const getNextPageParamFromMeta = (
   next: NextPageCursor = {}
 ): Partial<RequestData> | undefined => {
-  if (next.idLt) return { where: { id_lt: next.idLt } }
-  if (next.idGt) return { where: { id_gt: next.idGt } }
-  if (next.idLte) return { where: { id_lte: next.idLte } }
-  if (next.idGte) return { where: { id_gte: next.idGte } }
+  if (next.idLt) return withOrder({ where: { id_lt: next.idLt } }, next.order)
+  if (next.idGt) return withOrder({ where: { id_gt: next.idGt } }, next.order)
+  if (next.idLte) return withOrder({ where: { id_lte: next.idLte } }, next.order)
+  if (next.idGte) return withOrder({ where: { id_gte: next.idGte } }, next.order)
   if (next.offset) return { offset: Number(next.offset) }
   return undefined
 }
+
+const withOrder = (param: Partial<RequestData>, order: NextPageCursor['order']) =>
+  order ? { ...param, order } : param
+
+const BOUND_KEYS = ['id_lt', 'id_lte', 'id_gt', 'id_gte', 'id_around']
+
+export const mergePageWhere = (
+  argsWhere: RequestData['where'] = {},
+  pageWhere: RequestData['where'] = {}
+): RequestData['where'] => {
+  const pageHasCursor = BOUND_KEYS.some(key => key in pageWhere)
+  const base = pageHasCursor
+    ? Object.fromEntries(Object.entries(argsWhere).filter(([key]) => !BOUND_KEYS.includes(key)))
+    : argsWhere
+  return { ...base, ...pageWhere }
+}
+
+export const getNewerPageParam = (
+  page: ApiCollection<ResourceObject>,
+  pageParam: Partial<RequestData> | undefined
+): Partial<RequestData> | undefined => {
+  const isAscendingPage = pageParam?.order === 'asc'
+  return getNextPageParamFromMeta(isAscendingPage ? page.meta?.next : page.meta?.prev)
+}

package/src/hooks/use_api.ts

@@ -4,7 +4,7 @@ import { ChatContext } from '../contexts/chat_context'
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client'
 import { ResponseError, throwResponseError } from '../utils/response_error'
-import { getNextPageParamFromMeta } from './paginator_meta'
+import { getNextPageParamFromMeta, mergePageWhere } from './paginator_meta'
 import { App, useApiClient } from './use_api_client'
 import { getRequestQueryKey, RequestQueryKey } from './use_suspense_api'
 
@@ -61,12 +61,11 @@ export const useApiPaginator = <T extends ResourceObject>(
   >({
     queryKey: getRequestQueryKey(args),
     queryFn: ({ pageParam }) => {
-      const pageParmWhere = pageParam?.where || {}
-      const argsWhere = args.data.where || {}
-      const where = { ...argsWhere, ...pageParmWhere }
+      const where = mergePageWhere(args.data.where, pageParam?.where)
       const app = args.app || 'chat'
       const offset = pageParam?.offset || args.data.offset
-      const data = { ...args.data, where, offset }
+      const order = pageParam?.order || args.data.order
+      const data = { ...args.data, where, offset, order }
 
       return apiClient[app].get<ApiCollection<T>>({ url: args.url, data }).catch(throwResponseError)
     },

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -1,4 +1,4 @@
-import { InfiniteData, useQueryClient } from '@tanstack/react-query'
+import { hashKey, InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { ApiCollection, MessageResource } from '../types'
 import { JoltReactionEvent, JoltTypingEvent } from '../types/jolt_events'
 import {
@@ -24,16 +24,49 @@ import { useJoltChannel, useJoltEvent } from './use_jolt'
 import { getRequestQueryKey } from './use_suspense_api'
 import { TYPING_TIMEOUT_INTERVAL, useTypingStatusCache } from './use_typing_status_cache'
 
+export type MessagesJoltEvent =
+  | 'message.created'
+  | 'message.updated'
+  | 'message.destroyed'
+  | 'reaction'
+
+export interface MessagesCache {
+  queryKey: unknown[]
+  canUpdate?: (event: MessagesJoltEvent) => boolean
+}
+
 interface Props {
   conversationId: number
+  messageCaches?: MessagesCache[]
+}
+
+export const resolveMessageCaches = (defaults: unknown[][], overrides: MessagesCache[]) => {
+  const overrideByHash = new Map(overrides.map(cache => [hashKey(cache.queryKey), cache]))
+  const defaultHashes = new Set(defaults.map(hashKey))
+  const resolved = defaults.map(queryKey => overrideByHash.get(hashKey(queryKey)) ?? { queryKey })
+  const extras = overrides.filter(cache => !defaultHashes.has(hashKey(cache.queryKey)))
+  return [...resolved, ...extras]
 }
 
-export function useConversationMessagesJoltEvents({ conversationId }: Props) {
+export const queryKeysForEvent = (
+  event: MessagesJoltEvent,
+  defaults: unknown[][],
+  overrides: MessagesCache[]
+) =>
+  resolveMessageCaches(defaults, overrides)
+    .filter(cache => !cache.canUpdate || cache.canUpdate(event))
+    .map(cache => cache.queryKey)
+
+export function useConversationMessagesJoltEvents({ conversationId, messageCaches = [] }: Props) {
   const queryClient = useQueryClient()
   const currentPerson = useCurrentPerson()
   const joltChannel = useJoltChannel(`chat.conversations.${conversationId}`)
   const messagesRequestArgs = getMessagesRequestArgs({ conversation_id: conversationId })
   const messagesQueryKey = getRequestQueryKey(messagesRequestArgs)
+  const cachesTouchedBy = (replyRootId?: string | null): unknown[][] =>
+    replyRootId
+      ? [messagesQueryKey, getThreadedMessagesQueryKey(conversationId, replyRootId)]
+      : [messagesQueryKey]
   const apiClient = useApiClient()
 
   const { addTypingEvent, removeTypingEventById, removeAllTypingEventsByAuthorId } =
@@ -54,21 +87,16 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       }
     }
 
-    // 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,
-        data.reply_root_id
-      )
-      updateCacheWithMessage(queryClient, threadedMessagesQueryKey, message, e.event)
-
-      if (isReplyRootUpdate) {
-        updateCacheReplyRoots(queryClient, messagesQueryKey, message)
-        updateCacheReplyRoots(queryClient, threadedMessagesQueryKey, message)
-      }
+    const targetQueryKeys = queryKeysForEvent(
+      e.event,
+      cachesTouchedBy(data.reply_root_id),
+      messageCaches
+    )
+    targetQueryKeys.forEach(queryKey =>
+      updateCacheWithMessage(queryClient, queryKey, message, e.event)
+    )
+    if (isReplyRootUpdate) {
+      targetQueryKeys.forEach(queryKey => updateCacheReplyRoots(queryClient, queryKey, message))
     }
 
     // Update individual message query cache so reply shadow messages update immediately
@@ -88,34 +116,23 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       currentPersonId: currentPerson.id,
     })
 
-    // Update the main conversation cache
-    queryClient.setQueryData<QueryData>(messagesQueryKey, prev =>
-      deleteRecordInPagesData({ data: prev, record: message })
-    )
-
-    // If message has a reply_root_id, also update the threaded cache
-    if (data.reply_root_id) {
-      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
-        conversationId,
-        data.reply_root_id
-      )
-      queryClient.setQueryData<QueryData>(threadedMessagesQueryKey, prev =>
+    queryKeysForEvent(
+      'message.destroyed',
+      cachesTouchedBy(data.reply_root_id),
+      messageCaches
+    ).forEach(queryKey =>
+      queryClient.setQueryData<QueryData>(queryKey, prev =>
         deleteRecordInPagesData({ data: prev, record: message })
       )
-    }
+    )
   }
 
   const handleReactionJoltEvent = async (e: JoltReactionEvent) => {
-    // Update the main conversation cache and capture the reply_root_id if present
-    updateCacheWithReaction(queryClient, messagesQueryKey, e, currentPerson.id)
-
-    const replyRootId = e.data.data.reply_root_id
-
-    // If the message has a reply_root_id, also update the threaded cache
-    if (replyRootId) {
-      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(conversationId, replyRootId)
-      updateCacheWithReaction(queryClient, threadedMessagesQueryKey, e, currentPerson.id)
-    }
+    queryKeysForEvent(
+      'reaction',
+      cachesTouchedBy(e.data.data.reply_root_id),
+      messageCaches
+    ).forEach(queryKey => updateCacheWithReaction(queryClient, queryKey, e, currentPerson.id))
   }
 
   const handleTypingEvent = async (e: JoltTypingEvent) => {

package/src/hooks/use_direct_message_eligibility.ts

@@ -0,0 +1,40 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiResource, MemberResource } from '../types'
+import { useApiClient } from './use_api_client'
+
+export interface DirectMessageEligibility {
+  canDirectMessage: boolean
+  directMessagesDisabled: boolean
+}
+
+export function useDirectMessageEligibility({
+  groupId,
+  personId,
+  enabled = true,
+}: {
+  groupId: string
+  personId: number
+  enabled?: boolean
+}) {
+  const apiClient = useApiClient()
+  const url = `/me/groups/${groupId}/members/${personId}`
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['chat', url, 'direct_message_eligibility'],
+    queryFn: () =>
+      apiClient.chat.get({
+        url,
+        data: { fields: { Member: ['can_direct_message', 'direct_messages_disabled'] } },
+      }) as Promise<ApiResource<MemberResource>>,
+    enabled,
+    retry: false,
+  })
+
+  const member = data?.data
+  const eligibility: DirectMessageEligibility | undefined = member && {
+    canDirectMessage: member.canDirectMessage ?? false,
+    directMessagesDisabled: member.directMessagesDisabled ?? false,
+  }
+
+  return { eligibility, isLoading, isError }
+}

package/src/hooks/use_fetch_newer_messages.ts

@@ -0,0 +1,37 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useCallback } from 'react'
+import { ApiCollection, MessageResource } from '../types'
+import { prependNewerPage } from '../utils/cache/prepend_newer_page'
+import { RequestData } from '../utils/client'
+import { getMessagesRequestArgs } from '../utils/request/get_messages'
+import { useApiClient } from './use_api_client'
+
+type Options = {
+  conversation_id: number
+  reply_root_id?: string | null
+  queryKey: unknown[]
+}
+
+export const useFetchNewerMessages = ({ conversation_id, reply_root_id, queryKey }: Options) => {
+  const queryClient = useQueryClient()
+  const apiClient = useApiClient()
+
+  return useCallback(
+    (newestMessageId: string) => {
+      const { url, data } = getMessagesRequestArgs({ conversation_id, reply_root_id })
+      const where = { id_gt: newestMessageId }
+      const pageParam: Partial<RequestData> = { where, order: 'asc' }
+
+      return apiClient.chat
+        .get<ApiCollection<MessageResource>>({ url, data: { ...data, where, order: 'asc' } })
+        .then(page => {
+          queryClient.setQueryData<Parameters<typeof prependNewerPage<MessageResource>>[0]>(
+            queryKey,
+            prev => prependNewerPage(prev, page, pageParam)
+          )
+        })
+        .catch(() => {})
+    },
+    [apiClient, conversation_id, queryClient, queryKey, reply_root_id]
+  )
+}

package/src/hooks/use_suspense_api.ts

@@ -10,7 +10,7 @@ import { FailedResponse } from '../types/api_primitives'
 import { Log } from '../utils'
 import { GetRequest, RequestData } from '../utils/client'
 import { throwResponseError } from '../utils/response_error'
-import { getNextPageParamFromMeta } from './paginator_meta'
+import { getNextPageParamFromMeta, mergePageWhere } from './paginator_meta'
 import { App, useApiClient } from './use_api_client'
 
 interface SuspenseGetOptions extends GetRequest {
@@ -65,12 +65,11 @@ export const useSuspensePaginator = <T extends ResourceObject>(
     queryFn: ({ pageParam }) => {
       Log.info('useSuspenseGet', { pageParam })
 
-      const pageParmWhere = pageParam?.where || {}
-      const argsWhere = args.data.where || {}
-      const where = { ...argsWhere, ...pageParmWhere }
+      const where = mergePageWhere(args.data.where, pageParam?.where)
       const app = args.app || 'chat'
       const offset = pageParam?.offset || args.data.offset
-      const data = { ...args.data, where, offset }
+      const order = pageParam?.order || args.data.order
+      const data = { ...args.data, where, offset, order }
 
       return apiClient[app]
         .get<ApiCollection<T>>({

package/src/screens/conversation_new/components/services_form.tsx

@@ -45,6 +45,7 @@ export const ServicesForm = ({
   const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
   const safetyLockEnabled = featureEnabled(availableFeatures.conversation_safety_lock)
   const [selectedPlanId, setSelectedPlanId] = useState<number | undefined>(initialPlanId)
+  const [filterByPlan, setFilterByPlan] = useState(!!initialPlanId)
   const initialState = useMemo(() => uniq(initialTeamIds) || [], [initialTeamIds]) // Uniq here because services can send duplicates in the teams_i_lead response.
   const [selectedTeamIds, setSelectedTeamIds] = useState<number[]>(initialState)
 
@@ -52,6 +53,7 @@ export const ServicesForm = ({
   useEffect(() => {
     setSelectedTeamIds(initialState)
     setSelectedPlanId(initialPlanId)
+    setFilterByPlan(!!initialPlanId)
   }, [initialState, initialPlanId])
 
   const removeSelection = useCallback(
@@ -61,9 +63,7 @@ export const ServicesForm = ({
     [selectedTeamIds]
   )
 
-  const [filerByPlan, setFilterByPlan] = useState(false)
-
-  const activePlanId = filerByPlan ? selectedPlanId : undefined
+  const activePlanId = filterByPlan ? selectedPlanId : undefined
 
   const { payload, isLoading: isLoadingPayload } = useServicesChatConversationPayload({
     teamIds: selectedTeamIds,
@@ -79,7 +79,7 @@ export const ServicesForm = ({
 
   const { members, isError: isMemberError } = useTeamMembersForNewConversation({
     teamIds: selectedTeamIds,
-    planId: selectedPlanId,
+    planId: activePlanId,
   })
   const adultMembers = useMemo(() => members.filter(member => !member.child), [members])
 
@@ -118,7 +118,7 @@ export const ServicesForm = ({
             removeSelection={removeSelection}
             selectedPlanId={selectedPlanId}
             setSelectedPlanId={setSelectedPlanId}
-            filterByPlan={filerByPlan}
+            filterByPlan={filterByPlan}
             setFilterByPlan={setFilterByPlan}
             members={members}
             isMemberError={isMemberError}