@planningcenter/chat-react-native 3.36.2-rc.3 → 3.37.0-rc.1

package/build/types/resources/index.d.ts

@@ -1,6 +1,7 @@
 export * from './analytics_metadata';
 export * from './conversation';
 export * from './conversation_membership';
+export * from './conversation_validate';
 export * from './member';
 export * from './message';
 export * from './oauth_token';

package/build/types/resources/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/resources/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/resources/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA"}

package/build/types/resources/index.js

@@ -1,6 +1,7 @@
 export * from './analytics_metadata';
 export * from './conversation';
 export * from './conversation_membership';
+export * from './conversation_validate';
 export * from './member';
 export * from './message';
 export * from './oauth_token';

package/build/types/resources/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/resources/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './analytics_metadata'\nexport * from './conversation'\nexport * from './conversation_membership'\nexport * from './member'\nexport * from './message'\nexport * from './oauth_token'\nexport * from './person'\nexport * from './groups'\nexport * from './app_grant'\nexport * from './services'\nexport * from './organization'\nexport * from './group_membership'\nexport * from './group_resource'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/resources/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './analytics_metadata'\nexport * from './conversation'\nexport * from './conversation_membership'\nexport * from './conversation_validate'\nexport * from './member'\nexport * from './message'\nexport * from './oauth_token'\nexport * from './person'\nexport * from './groups'\nexport * from './app_grant'\nexport * from './services'\nexport * from './organization'\nexport * from './group_membership'\nexport * from './group_resource'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.36.2-rc.3",
+  "version": "3.37.0-rc.1",
   "description": "",
   "main": "build/index.js",
   "react-native": "./src/index.tsx",
@@ -72,5 +72,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "~5.9.2"
   },
-  "gitHead": "a38801b6b2c617d0de3a2da7935696f153dd55b9"
+  "gitHead": "7c6773155a5b589fe9a58a28921ddaac1d134e86"
 }

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

@@ -0,0 +1,117 @@
+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 * as useApiClientModule from '../../hooks/use_api_client'
+import { useConversationValidate } from '../../hooks/use_conversation_validate'
+
+const createWrapper = () => {
+  const queryClient = buildTestQueryClient()
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+const mockChatPost = (impl: jest.Mock) => {
+  jest.spyOn(useApiClientModule, 'useApiClient').mockReturnValue({
+    chat: { post: impl },
+  } as unknown as ReturnType<typeof useApiClientModule.useApiClient>)
+  return impl
+}
+
+const resolveWith = (warnings: { attribute: string; fullMessage: string }[]) =>
+  jest.fn().mockResolvedValue({
+    data: { type: 'ConversationValidate', id: '1', warnings },
+    links: {},
+    meta: {},
+  })
+
+describe('useConversationValidate', () => {
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  it('does not fire the request when disabled', () => {
+    const post = mockChatPost(resolveWith([]))
+
+    const { result } = renderHook(
+      () => useConversationValidate({ payload: 'abc', enabled: false }),
+      { wrapper: createWrapper() }
+    )
+
+    expect(post).not.toHaveBeenCalled()
+    expect(result.current.warnings).toEqual([])
+    expect(result.current.validationPending).toBe(false)
+  })
+
+  it('does not fire the request when payload is undefined', () => {
+    const post = mockChatPost(resolveWith([]))
+
+    const { result } = renderHook(
+      () => useConversationValidate({ payload: undefined, isLoadingPayload: true }),
+      { wrapper: createWrapper() }
+    )
+
+    expect(post).not.toHaveBeenCalled()
+    // validationPending stays true while the upstream payload query is still loading
+    expect(result.current.validationPending).toBe(true)
+  })
+
+  it('returns warnings from the response and clears validationPending', async () => {
+    const warnings = [{ attribute: 'safety_policy', fullMessage: 'Needs a second adult.' }]
+    mockChatPost(resolveWith(warnings))
+
+    const { result } = renderHook(() => useConversationValidate({ payload: 'abc' }), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => expect(result.current.warnings).toEqual(warnings))
+    expect(result.current.validationPending).toBe(false)
+  })
+
+  it('sends gender_id in attributes when provided', async () => {
+    const post = mockChatPost(resolveWith([]))
+
+    renderHook(() => useConversationValidate({ payload: 'abc', genderId: '42' }), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => expect(post).toHaveBeenCalledTimes(1))
+    expect(post).toHaveBeenCalledWith(
+      expect.objectContaining({
+        url: '/me/conversation_validate',
+        data: {
+          data: {
+            type: 'ConversationValidate',
+            attributes: { payload: 'abc', gender_id: '42' },
+          },
+        },
+      })
+    )
+  })
+
+  it('omits gender_id when not provided', async () => {
+    const post = mockChatPost(resolveWith([]))
+
+    renderHook(() => useConversationValidate({ payload: 'abc' }), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => expect(post).toHaveBeenCalledTimes(1))
+    const [call] = post.mock.calls
+    expect(call[0].data.data.attributes).toEqual({ payload: 'abc' })
+  })
+
+  it('falls back to empty warnings and unblocks on request error', async () => {
+    // Documents the current fail-open behavior: if validate errors, the user is allowed to proceed.
+    const post = mockChatPost(jest.fn().mockRejectedValue(new Error('boom')))
+
+    const { result } = renderHook(() => useConversationValidate({ payload: 'abc' }), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => expect(post).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(result.current.validationPending).toBe(false))
+    expect(result.current.warnings).toEqual([])
+  })
+})

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

@@ -0,0 +1,95 @@
+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 { useEnrichPeople } from '../../hooks/use_enrich_people'
+
+jest.mock('../../hooks/use_api_client')
+
+const mockedUseApiClient = useApiClient as jest.MockedFunction<typeof useApiClient>
+const mockPost = jest.fn()
+
+beforeEach(() => {
+  mockPost.mockReset()
+  mockedUseApiClient.mockReturnValue({ chat: { post: mockPost } } as any)
+})
+
+const createWrapper = () => {
+  const queryClient = buildTestQueryClient()
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+test('returns empty map and skips the request when personIds is empty', () => {
+  const { result } = renderHook(() => useEnrichPeople({ personIds: [] }), {
+    wrapper: createWrapper(),
+  })
+
+  expect(result.current.size).toBe(0)
+  expect(mockPost).not.toHaveBeenCalled()
+})
+
+test('returns enrichment data keyed by person id', async () => {
+  mockPost.mockResolvedValue({
+    data: [
+      { id: '1', type: 'PersonEnrichment', badges: [{ title: 'Leader' }] },
+      { id: '2', type: 'PersonEnrichment', badges: [] },
+    ],
+  })
+
+  const { result } = renderHook(() => useEnrichPeople({ personIds: [1, 2] }), {
+    wrapper: createWrapper(),
+  })
+
+  await waitFor(() => expect(result.current.size).toBe(2))
+
+  expect(result.current.get(1)?.badges).toEqual([{ title: 'Leader' }])
+  expect(result.current.get(2)?.badges).toEqual([])
+})
+
+test('includes group_id in the request when provided', async () => {
+  mockPost.mockResolvedValue({ data: [] })
+
+  renderHook(() => useEnrichPeople({ personIds: [1], groupId: 42 }), {
+    wrapper: createWrapper(),
+  })
+
+  await waitFor(() => expect(mockPost).toHaveBeenCalled())
+
+  expect(mockPost).toHaveBeenCalledWith(
+    expect.objectContaining({
+      data: expect.objectContaining({
+        data: expect.objectContaining({
+          attributes: expect.objectContaining({ group_id: 42 }),
+        }),
+      }),
+    })
+  )
+})
+
+test('omits group_id from the request when not provided', async () => {
+  mockPost.mockResolvedValue({ data: [] })
+
+  renderHook(() => useEnrichPeople({ personIds: [1] }), {
+    wrapper: createWrapper(),
+  })
+
+  await waitFor(() => expect(mockPost).toHaveBeenCalled())
+
+  const attributes = mockPost.mock.calls[0][0].data.data.attributes
+  expect(attributes).not.toHaveProperty('group_id')
+})
+
+test('returns empty map when the request fails', async () => {
+  mockPost.mockRejectedValue(new Error('network error'))
+
+  const { result } = renderHook(() => useEnrichPeople({ personIds: [1] }), {
+    wrapper: createWrapper(),
+  })
+
+  await waitFor(() => expect(mockPost).toHaveBeenCalled())
+
+  expect(result.current.size).toBe(0)
+})

package/src/components/display/action_button.tsx

@@ -3,7 +3,9 @@ import { useEffect } from 'react'
 import { Animated, LayoutAnimation, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
+import { ConversationWarning } from '../../types'
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
+import { Banner } from './banner'
 import { Button } from './button'
 import { IconString } from './icon'
 import { Text } from './text'
@@ -17,6 +19,7 @@ export const ActionButton = ({
   buttonIconNameLeft,
   secondaryButton,
   loading = false,
+  warnings = [],
 }: {
   visible?: boolean
   disabled?: boolean
@@ -26,6 +29,7 @@ export const ActionButton = ({
   buttonIconNameLeft?: IconString
   secondaryButton?: React.ReactNode
   loading?: boolean
+  warnings?: ConversationWarning[]
 }) => {
   const styles = useStyles()
   const [show, setShow] = useState(visible)
@@ -41,6 +45,17 @@ export const ActionButton = ({
 
   return (
     <Animated.View style={styles.container}>
+      {warnings.length > 0 && (
+        <View style={styles.warnings}>
+          {warnings.map((warning, index) => (
+            <Banner
+              key={`${warning.attribute}-${index}`}
+              appearance="error"
+              description={warning.fullMessage}
+            />
+          ))}
+        </View>
+      )}
       {Boolean(infoText) && (
         <Text style={styles.infoText} variant="footnote">
           {infoText}
@@ -95,5 +110,8 @@ const useStyles = () => {
     infoText: {
       textAlign: 'center',
     },
+    warnings: {
+      gap: 8,
+    },
   })
 }

package/src/hooks/groups/use_group_chat_conversation_payload.ts

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiResource, ResourceObject } from '../../types'
+import { useApiClient } from '../use_api_client'
+
+const STALE_TIME_MS = 25 * 60 * 1000 // under Groups' 30-min server-side expiry
+
+interface Props {
+  groupId: number
+  enabled?: boolean
+}
+
+export function useGroupChatConversationPayload({ groupId, enabled = true }: Props) {
+  const apiClient = useApiClient()
+  const url = `/me/groups/${groupId}/chat_conversation_payload`
+
+  const { data, ...rest } = useQuery({
+    queryKey: ['groups', url],
+    queryFn: () =>
+      apiClient.groups.post<ApiResource<GroupChatConversationPayload>>({
+        url,
+        data: {
+          data: {
+            type: 'GroupChatConversationPayload',
+            attributes: { title: '' },
+          },
+        },
+      }),
+    staleTime: STALE_TIME_MS,
+    enabled,
+  })
+
+  return { payload: data?.data.value, ...rest }
+}
+
+interface GroupChatConversationPayload extends ResourceObject {
+  type: 'GroupChatConversationPayload'
+  value: string
+}

package/src/hooks/groups/use_group_members_for_new_conversation.ts

@@ -1,6 +1,7 @@
-import { MemberBadge, MemberResource, ResourceObject } from '../../types'
+import { useMemo } from 'react'
+import { MemberResource, ResourceObject } from '../../types'
 import { GroupsGroupMemberResource } from '../../types/resources/groups/groups_member_resource_with_person'
-import { useCurrentPerson } from '../use_current_person'
+import { useEnrichPeople } from '../use_enrich_people'
 import { useSuspensePaginator } from '../use_suspense_api'
 
 type UseSuspensePaginatorResult<T extends ResourceObject> = ReturnType<
@@ -16,10 +17,6 @@ export type GroupMembersForNewConversationResult = Omit<
   childMembers: MemberResource[]
 }
 
-/**
- * This is specifically for the new conversation screen because we assign
- * the "Conversation owner" badge to the current person.
- */
 export function useGroupMembersForNewConversation({
   id,
   gender,
@@ -27,7 +24,6 @@ export function useGroupMembersForNewConversation({
   id: number
   gender: string | null
 }) {
-  const currentPerson = useCurrentPerson()
   const response = useSuspensePaginator<GroupsGroupMemberResource>({
     url: `/me/groups/${id}/memberships`,
     data: {
@@ -43,12 +39,16 @@ export function useGroupMembersForNewConversation({
   })
 
   const { data: memberships = [] } = response
+  const personIds = useMemo(() => memberships.map(m => +m.person.id), [memberships])
+  const enrichmentMap = useEnrichPeople({ personIds, groupId: id })
+
   const members: MemberResource[] = memberships.map(membership => {
     const { person } = membership
+    const enrichment = enrichmentMap.get(+person.id)
     return {
       type: 'Member',
       avatar: person.avatarUrl,
-      badges: buildBadges(membership, currentPerson.id),
+      badges: enrichment?.badges ?? [],
       child: person.child,
       gender: person.gender,
       id: +person.id,
@@ -57,6 +57,7 @@ export function useGroupMembersForNewConversation({
       role: membership.role,
     }
   })
+
   const adultMembers = members.filter(member => !member.child)
   const childMembers = members.filter(member => member.child)
 
@@ -67,18 +68,3 @@ export function useGroupMembersForNewConversation({
     childMembers,
   }
 }
-
-function buildBadges(
-  membership: GroupsGroupMemberResource,
-  currentPersonId: number
-): MemberBadge[] {
-  const { person } = membership
-  const badges = []
-  if (membership.role === 'leader') {
-    badges.push({ title: 'Leader' })
-  }
-  if (person.id === currentPersonId) {
-    badges.push({ title: 'Conversation owner' })
-  }
-  return badges
-}

package/src/hooks/groups/use_groups_conversation_create.ts

@@ -24,7 +24,7 @@ export function useGroupsConversationCreate({ groupId, title, genderId, onSucces
           url: `/me/groups/${groupId}/chat_conversation_payload`,
           data: {
             data: {
-              type: '',
+              type: 'GroupChatConversationPayload',
               attributes: {
                 title,
               },

package/src/hooks/services/use_find_or_create_services_conversation.ts

@@ -26,14 +26,7 @@ export const useFindOrCreateServicesConversation = ({ teamIds, planId, onSuccess
   const apiClient = useApiClient()
 
   const teamAndPlanParams: TeamAndPlanParams = useMemo(
-    () =>
-      omitBy(
-        {
-          team_id: teamIds?.join(',') || null,
-          plan_id: planId,
-        },
-        isNil
-      ),
+    () => buildTeamAndPlanParams(teamIds, planId),
     [teamIds, planId]
   )
 
@@ -49,16 +42,23 @@ export const useFindOrCreateServicesConversation = ({ teamIds, planId, onSuccess
     onSuccess: ({ conversation, created }) => {
       onSuccess?.(conversation, { created })
     },
-    mutationFn: async () => findOrCreateServicesConversation(apiClient, teamAndPlanParams),
+    mutationFn: async () =>
+      findOrCreateServicesConversation({ apiClient, teamIds: teamIds ?? [], planId }),
   })
 
   return { ...mutation, selectionHasConversation, isLoadingConversationCheck }
 }
 
-export const findOrCreateServicesConversation = async (
-  apiClient: ApiClient,
-  teamAndPlanParams: TeamAndPlanParams
-): Promise<{ conversation: ConversationResource; created: boolean }> => {
+export const findOrCreateServicesConversation = async ({
+  apiClient,
+  teamIds,
+  planId,
+}: {
+  apiClient: ApiClient
+  teamIds: number[]
+  planId?: number
+}): Promise<{ conversation: ConversationResource; created: boolean }> => {
+  const teamAndPlanParams = buildTeamAndPlanParams(teamIds, planId)
   const foundConversations = await getGroupIdsFromServices(apiClient, teamAndPlanParams)
     .then(res => res.data.groupIdentifiers)
     .then(groupIdentifiers => findConversationWithExactTeams(apiClient, groupIdentifiers))
@@ -69,24 +69,27 @@ export const findOrCreateServicesConversation = async (
     return { conversation: foundConversation, created: false }
   }
 
-  return fetchServicesPayload(apiClient, teamAndPlanParams)
+  return getServicesChatConversationPayload({ apiClient, teamIds, planId })
     .then(res => res.data.payload)
     .then(payload => createConversation(apiClient, payload))
     .then(res => ({ conversation: res.data, created: true }))
     .catch(throwResponseError)
 }
 
-export const fetchServicesPayload = (
-  apiClient: ApiClient,
-  teamAndPlanParams: TeamAndPlanParams
-) => {
+export const getServicesChatConversationPayload = ({
+  apiClient,
+  teamIds,
+  planId,
+}: {
+  apiClient: ApiClient
+  teamIds: number[]
+  planId?: number
+}) => {
   return apiClient.services.get({
-    url: `/chat`,
+    url: '/chat',
     data: {
-      ...teamAndPlanParams,
-      fields: {
-        Chat: ['payload'],
-      },
+      ...buildTeamAndPlanParams(teamIds, planId),
+      fields: { Chat: ['payload'] },
     },
   }) as Promise<ApiResource<ServicesChatPayloadResource>>
 }
@@ -157,7 +160,7 @@ export const checkIfConversationWithGroupExists = (
 export const buildTeamAndPlanParams = (teamIds: number[] = [], planId?: number) => {
   return omitBy(
     {
-      team_id: teamIds.join(','),
+      team_id: teamIds.length ? teamIds.join(',') : null,
       plan_id: planId,
     },
     isNil

package/src/hooks/services/use_services_chat_conversation_payload.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query'
+import { useApiClient } from '../use_api_client'
+import { getServicesChatConversationPayload } from './use_find_or_create_services_conversation'
+
+const STALE_TIME_MS = 55 * 60 * 1000 // under Services' 1-hour server-side expiry
+
+interface Props {
+  teamIds: number[]
+  planId?: number
+  enabled?: boolean
+}
+
+export function useServicesChatConversationPayload({ teamIds, planId, enabled = true }: Props) {
+  const apiClient = useApiClient()
+  const sortedTeamIds = [...teamIds].sort((a, b) => a - b)
+
+  const { data, ...rest } = useQuery({
+    queryKey: ['services', '/chat', { teamIds: sortedTeamIds, planId }],
+    queryFn: () =>
+      getServicesChatConversationPayload({ apiClient, teamIds: sortedTeamIds, planId }),
+    staleTime: STALE_TIME_MS,
+    enabled: enabled && sortedTeamIds.length > 0,
+  })
+
+  return { payload: data?.data.payload, ...rest }
+}

package/src/hooks/services/use_team_members_for_new_conversation.ts

@@ -2,6 +2,7 @@ import { isNil, omitBy } from 'lodash'
 import { useMemo } from 'react'
 import { MemberResource, TeamPeopleResource, TeamPersonResponseItem } from '../../types'
 import { useApiGet } from '../use_api'
+import { useEnrichPeople } from '../use_enrich_people'
 
 interface Props {
   teamIds: number[]
@@ -23,14 +24,24 @@ export function useTeamMembersForNewConversation({ teamIds, planId }: Props) {
   })
 
   const people = data?.people || stableEmptyPersonArray
+  const personIds = useMemo(() => people.map(p => p.id), [people])
+  const enrichmentMap = useEnrichPeople({ personIds })
 
-  const members: MemberResource[] = useMemo(() => {
-    return people.map(person => ({
-      ...person,
-      type: 'Member',
-      gender: null,
-    }))
-  }, [people])
+  const members: MemberResource[] = useMemo(
+    () =>
+      people.map(person => {
+        const enrichedBadges = enrichmentMap.get(person.id)?.badges ?? []
+        const existingTitles = new Set(person.badges.map(b => b.title))
+        const newBadges = enrichedBadges.filter(b => !existingTitles.has(b.title))
+        return {
+          ...person,
+          type: 'Member',
+          gender: null,
+          badges: [...person.badges, ...newBadges],
+        }
+      }),
+    [people, enrichmentMap]
+  )
 
   return {
     members,

package/src/hooks/use_conversation_validate.ts

@@ -0,0 +1,45 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiResource, ConversationValidateResource } from '../types'
+import { useApiClient } from './use_api_client'
+
+interface Props {
+  payload: string | undefined
+  isLoadingPayload?: boolean
+  genderId?: string | null
+  enabled?: boolean
+}
+
+export function useConversationValidate({
+  payload,
+  isLoadingPayload = false,
+  genderId,
+  enabled = true,
+}: Props) {
+  const apiClient = useApiClient()
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['chat', '/me/conversation_validate', { payload, genderId }],
+    queryFn: () =>
+      apiClient.chat.post<ApiResource<ConversationValidateResource>>({
+        url: '/me/conversation_validate',
+        data: {
+          data: {
+            type: 'ConversationValidate',
+            attributes: {
+              payload: payload!,
+              ...(genderId ? { gender_id: genderId } : {}),
+            },
+          },
+        },
+      }),
+    enabled: enabled && payload != null,
+    retry: false,
+  })
+
+  const warnings = data?.data.warnings ?? []
+
+  return {
+    warnings,
+    validationPending: enabled && (isLoadingPayload || isLoading),
+  }
+}

package/src/hooks/use_enrich_people.ts

@@ -0,0 +1,35 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { ApiCollection, ResourceObject } from '../types'
+import { useApiClient } from './use_api_client'
+
+export interface PersonEnrichmentResource extends ResourceObject {
+  type: 'PersonEnrichment'
+  id: string
+  badges: { title: string }[]
+}
+
+export function useEnrichPeople({ personIds, groupId }: { personIds: number[]; groupId?: number }) {
+  const apiClient = useApiClient()
+
+  const { data } = useQuery<ApiCollection<PersonEnrichmentResource>>({
+    queryKey: ['enrich_people', [...personIds].sort((a, b) => a - b), groupId],
+    queryFn: () =>
+      apiClient.chat.post<ApiCollection<PersonEnrichmentResource>>({
+        url: '/enrich_people',
+        data: {
+          data: {
+            type: 'PersonEnrichment',
+            attributes: {
+              person_ids: personIds,
+              ...(groupId !== undefined ? { group_id: groupId } : {}),
+            },
+          },
+        },
+      }),
+    enabled: personIds.length > 0,
+    placeholderData: keepPreviousData,
+  })
+
+  return useMemo(() => new Map(data?.data.map(e => [+e.id, e]) ?? []), [data])
+}