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

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/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_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/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_features.ts

@@ -41,6 +41,7 @@ export const availableFeatures = {
   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',
 } as const satisfies Record<string, `ROLLOUT_${string}`>
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

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

@@ -5,6 +5,7 @@ import { Banner, ChildNotice, Heading, Text } from '../../../components'
 import { ActionButton } from '../../../components/display/action_button'
 import { KeyboardView } from '../../../components/display/keyboard_view'
 import { useApiClient, useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'
+import { useGroupChatConversationPayload } from '../../../hooks/groups/use_group_chat_conversation_payload'
 import {
   GroupMembersForNewConversationResult,
   useGroupMembersForNewConversation,
@@ -14,6 +15,7 @@ import {
   type AvatarUpdatePayload,
   patchConversationAvatar,
 } from '../../../hooks/use_conversation_avatar_update'
+import { useConversationValidate } from '../../../hooks/use_conversation_validate'
 import { availableFeatures, useFeatures } from '../../../hooks/use_features'
 import { useMyGender } from '../../../hooks/use_my_gender'
 import { useUploadClient } from '../../../hooks/use_upload_client'
@@ -40,6 +42,7 @@ export const GroupsForm = ({ groupId, chat_group_graph_id, avatarSelection }: Gr
   const [genderFilterEnabled, setGenderFilterEnabled] = useState(false)
   const { featureEnabled } = useFeatures()
   const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
+  const safetyLockEnabled = featureEnabled(availableFeatures.conversation_safety_lock)
   const {
     isFeatureEnabled: genderFilterAvailable,
     genderId,
@@ -59,6 +62,18 @@ export const GroupsForm = ({ groupId, chat_group_graph_id, avatarSelection }: Gr
   const activeGenderId = genderFilterEnabled ? genderId : null
   const activeGenderValue = genderFilterEnabled ? genderValue : null
 
+  const { payload, isLoading: isLoadingPayload } = useGroupChatConversationPayload({
+    groupId,
+    enabled: safetyLockEnabled,
+  })
+
+  const { warnings, validationPending } = useConversationValidate({
+    payload,
+    isLoadingPayload,
+    genderId: activeGenderId,
+    enabled: safetyLockEnabled,
+  })
+
   const groupMemberships = useGroupMembersForNewConversation({
     id: groupId,
     gender: activeGenderValue,
@@ -127,10 +142,11 @@ export const GroupsForm = ({ groupId, chat_group_graph_id, avatarSelection }: Gr
         }
       />
       <ActionButton
-        disabled={!title || isPending}
+        disabled={!title || isPending || validationPending || warnings.length > 0}
         title="Start Conversation"
         onPress={() => handleSave()}
         infoText="Conversation will be automatically updated if any members are added or removed from this group."
+        warnings={warnings}
       />
     </KeyboardView>
   )

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

@@ -6,12 +6,14 @@ import { Badge, Banner, ChildNotice, Heading, Switch, TextButton } from '../../.
 import { ActionButton } from '../../../components/display/action_button'
 import { useApiClient } from '../../../hooks'
 import { useFindOrCreateServicesConversation } from '../../../hooks/services/use_find_or_create_services_conversation'
+import { useServicesChatConversationPayload } from '../../../hooks/services/use_services_chat_conversation_payload'
 import { useServicesTeams } from '../../../hooks/services/use_services_team'
 import { useTeamMembersForNewConversation } from '../../../hooks/services/use_team_members_for_new_conversation'
 import {
   type AvatarUpdatePayload,
   patchConversationAvatar,
 } from '../../../hooks/use_conversation_avatar_update'
+import { useConversationValidate } from '../../../hooks/use_conversation_validate'
 import { availableFeatures, useFeatures } from '../../../hooks/use_features'
 import { useUploadClient } from '../../../hooks/use_upload_client'
 import { MemberResource } from '../../../types'
@@ -41,6 +43,7 @@ export const ServicesForm = ({
   const uploadClient = useUploadClient()
   const { featureEnabled } = useFeatures()
   const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
+  const safetyLockEnabled = featureEnabled(availableFeatures.conversation_safety_lock)
   const [selectedPlanId, setSelectedPlanId] = useState<number | undefined>(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)
@@ -60,6 +63,20 @@ export const ServicesForm = ({
 
   const [filerByPlan, setFilterByPlan] = useState(false)
 
+  const activePlanId = filerByPlan ? selectedPlanId : undefined
+
+  const { payload, isLoading: isLoadingPayload } = useServicesChatConversationPayload({
+    teamIds: selectedTeamIds,
+    planId: activePlanId,
+    enabled: safetyLockEnabled,
+  })
+
+  const { warnings, validationPending } = useConversationValidate({
+    payload,
+    isLoadingPayload,
+    enabled: safetyLockEnabled,
+  })
+
   const { members, isError: isMemberError } = useTeamMembersForNewConversation({
     teamIds: selectedTeamIds,
     planId: selectedPlanId,
@@ -74,7 +91,7 @@ export const ServicesForm = ({
     isLoadingConversationCheck,
   } = useFindOrCreateServicesConversation({
     teamIds: selectedTeamIds,
-    planId: filerByPlan ? selectedPlanId : undefined,
+    planId: activePlanId,
     onSuccess: (conversation, { created }) => {
       navigation.getParent()?.goBack()
       navigation.dispatch(
@@ -113,11 +130,18 @@ export const ServicesForm = ({
         }
       />
       <ActionButton
-        disabled={!selectedTeamIds.length || isPending || isLoadingConversationCheck}
+        disabled={
+          !selectedTeamIds.length ||
+          isPending ||
+          isLoadingConversationCheck ||
+          validationPending ||
+          warnings.length > 0
+        }
         title={selectionHasConversation ? 'Open conversation' : 'Start conversation'}
         onPress={createConversation}
         infoText="Conversation will be automatically updated if any members are added or removed from included teams."
         loading={isLoadingConversationCheck}
+        warnings={warnings}
       />
     </View>
   )

package/src/screens/team_conversation_screen.tsx

@@ -3,10 +3,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect } from 'react'
 import { DefaultLoading } from '../components/page/loading'
 import { useApiClient } from '../hooks'
-import {
-  buildTeamAndPlanParams,
-  findOrCreateServicesConversation,
-} from '../hooks/services/use_find_or_create_services_conversation'
+import { findOrCreateServicesConversation } from '../hooks/services/use_find_or_create_services_conversation'
 
 export type TeamConversationRouteProps = {
   plan_id?: number
@@ -19,11 +16,14 @@ export const TeamConversationScreen = ({ route }: TeamConversationScreenProps) =
   const apiClient = useApiClient()
   const queryClient = useQueryClient()
   const navigation = useNavigation()
-  const teamAndPlanParams = buildTeamAndPlanParams(route.params.team_ids, route.params.plan_id)
   const { data: conversation } = useQuery({
     queryKey: ['team-conversation', route.params.team_ids, route.params.plan_id],
     queryFn: () =>
-      findOrCreateServicesConversation(apiClient, teamAndPlanParams).then(r => r.conversation),
+      findOrCreateServicesConversation({
+        apiClient,
+        teamIds: route.params.team_ids ?? [],
+        planId: route.params.plan_id,
+      }).then(r => r.conversation),
   })
 
   useEffect(() => {

package/src/types/resources/conversation_validate.ts

@@ -0,0 +1,11 @@
+import { ResourceObject } from '../api_primitives'
+
+export interface ConversationWarning {
+  attribute: string
+  fullMessage: string
+}
+
+export interface ConversationValidateResource extends ResourceObject {
+  type: 'ConversationValidate'
+  warnings: ConversationWarning[]
+}

package/src/types/resources/index.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'