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

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_details_screen.tsx

@@ -148,7 +148,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     const memberSectionStyle = memberSectionStyleMap[memberPosition]
 
     return {
-      type: data.child ? SectionTypes.hidden : SectionTypes.members,
+      type: SectionTypes.members,
       data,
       sectionInnerStyle: memberSectionStyle,
     }

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'