@planningcenter/chat-react-native 3.36.1 → 3.36.2-qa-726.0

package/src/components/page/error_boundary.tsx

@@ -1,137 +1,53 @@
-import { useNavigation } from '@react-navigation/native'
-import { useQueryErrorResetBoundary } from '@tanstack/react-query'
-import React, { PropsWithChildren, useCallback, useEffect, useMemo } from 'react'
-import { onAuthRefresh } from '../../utils/auth_events'
+import React, { PropsWithChildren } from 'react'
+import { Log } from '../../utils/native_adapters/configuration'
+import { ReportErrorScope } from '../../utils/native_adapters/log'
 import { ResponseError } from '../../utils/response_error'
-import BlankState from '../primitive/blank_state_primitive'
+
+export type ErrorBoundaryFallback =
+  | React.ReactNode
+  | ((error: Error, reset: () => void) => React.ReactNode)
+
+export type ErrorBoundaryProps = {
+  scope?: ReportErrorScope
+  screenName?: string
+  fallback?: ErrorBoundaryFallback
+}
 
 type ErrorBoundaryState = {
-  error: ResponseError | Error | TypeError | null
-  unsubscriber: () => void
+  error: Error | null
 }
 
-class ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {
-  state: ErrorBoundaryState = {
-    error: null,
-    unsubscriber: () => {},
-  }
+export class ErrorBoundary extends React.Component<
+  PropsWithChildren<ErrorBoundaryProps>,
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { error: null }
 
-  componentDidCatch(error: any) {
-    this.handleError(error)
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error }
   }
 
-  handleError(error: any) {
-    this.setState({ error })
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    if (error instanceof ResponseError) return
+
+    Log.reportError(error, {
+      componentStack: errorInfo.componentStack ?? undefined,
+      scope: this.props.scope,
+      screenName: this.props.screenName,
+      tags: { team: 'chat', package: 'chat-react-native' },
+    })
   }
 
   handleReset = () => {
-    this.props.onReset?.()
     this.setState({ error: null })
   }
 
   render() {
-    if (this.state.error) {
-      return <ErrorView error={this.state.error} onReset={this.handleReset} />
-    } else {
-      return this.props.children
-    }
-  }
-}
+    if (!this.state.error) return this.props.children
 
-function ErrorView({ error, onReset }: { error: Error | ResponseError; onReset: () => void }) {
-  const { reset } = useQueryErrorResetBoundary()
+    const { fallback } = this.props
+    if (fallback === undefined) return null
 
-  const handleReset = useCallback(() => {
-    reset()
-    onReset()
-  }, [reset, onReset])
-
-  useEffect(() => handleReset, [handleReset])
-
-  if (error instanceof ResponseError) {
-    return <ResponseErrorView response={error.response} onReset={handleReset} />
-  }
-
-  if (isNetworkError(error)) {
-    return (
-      <ErrorContent
-        heading={'Problem connecting!'}
-        body={'Check your internet connection and try again.'}
-      />
-    )
+    return typeof fallback === 'function' ? fallback(this.state.error, this.handleReset) : fallback
   }
-
-  return <ErrorContent heading={'Oops!'} body={'Something unexpected happened.'} />
 }
-
-function isNetworkError(error: ResponseError | Error | TypeError | null) {
-  const isError = error instanceof Error
-  const networkFailedMessages = [
-    'Network request failed',
-    'Network request timed out',
-    'Failed to fetch',
-  ]
-
-  if (!isError) return false
-
-  return new RegExp(networkFailedMessages.join('|'), 'i').test(error.message)
-}
-
-function ResponseErrorView({ response, onReset }: { response: Response; onReset: () => void }) {
-  const { status } = response
-
-  const heading = useMemo(() => {
-    switch (status) {
-      case 403:
-        return 'Permission required'
-      case 404:
-        return 'Content not found'
-      default:
-        return 'Oops!'
-    }
-  }, [status])
-
-  const body = useMemo(() => {
-    switch (status) {
-      case 403:
-        return 'Contact your administrator for access.'
-      case 404:
-        return 'If you believe something should be here, please reach out to your administrator.'
-      default:
-        return 'Something unexpected happened.'
-    }
-  }, [status])
-
-  useEffect(() => {
-    if (status !== 401) return
-
-    return onAuthRefresh(onReset)
-  }, [status, onReset])
-
-  return <ErrorContent heading={heading} body={body} />
-}
-
-function ErrorContent({ heading, body }: { heading: string; body: string }) {
-  const navigation = useNavigation()
-
-  return (
-    <BlankState.Root>
-      <BlankState.Imagery name="people.noTextMessage" />
-      <BlankState.Content>
-        <BlankState.Heading>{heading}</BlankState.Heading>
-        <BlankState.Text>{body}</BlankState.Text>
-      </BlankState.Content>
-      <BlankState.Button
-        title="Go back"
-        onPress={navigation.goBack}
-        size="md"
-        accessibilityRole="link"
-      />
-      <BlankState.TextButton onPress={() => navigation.navigate('BugReport')}>
-        Report a bug
-      </BlankState.TextButton>
-    </BlankState.Root>
-  )
-}
-
-export default ErrorBoundary

package/src/components/page/page_error_boundary.tsx

@@ -0,0 +1,112 @@
+import { useNavigation } from '@react-navigation/native'
+import { useQueryErrorResetBoundary } from '@tanstack/react-query'
+import React, { PropsWithChildren, useCallback, useEffect, useMemo } from 'react'
+import { onAuthRefresh } from '../../utils/auth_events'
+import { ResponseError } from '../../utils/response_error'
+import BlankState from '../primitive/blank_state_primitive'
+import { ErrorBoundary, ErrorBoundaryFallback, ErrorBoundaryProps } from './error_boundary'
+
+const renderPageFallback: ErrorBoundaryFallback = (error, reset) => (
+  <ErrorView error={error} reset={reset} />
+)
+
+export function PageErrorBoundary({ children, ...props }: PropsWithChildren<ErrorBoundaryProps>) {
+  return (
+    <ErrorBoundary scope="screen" fallback={renderPageFallback} {...props}>
+      {children}
+    </ErrorBoundary>
+  )
+}
+
+function ErrorView({ error, reset }: { error: Error; reset: () => void }) {
+  const { reset: resetQueries } = useQueryErrorResetBoundary()
+
+  const handleReset = useCallback(() => {
+    resetQueries()
+    reset()
+  }, [resetQueries, reset])
+
+  useEffect(() => handleReset, [handleReset])
+
+  if (error instanceof ResponseError) {
+    return <ResponseErrorView response={error.response} onReset={handleReset} />
+  }
+
+  if (isNetworkError(error)) {
+    return (
+      <ErrorContent
+        heading={'Problem connecting!'}
+        body={'Check your internet connection and try again.'}
+      />
+    )
+  }
+
+  return <ErrorContent heading={'Oops!'} body={'Something unexpected happened.'} />
+}
+
+function isNetworkError(error: Error) {
+  const networkFailedMessages = [
+    'Network request failed',
+    'Network request timed out',
+    'Failed to fetch',
+  ]
+
+  return new RegExp(networkFailedMessages.join('|'), 'i').test(error.message)
+}
+
+function ResponseErrorView({ response, onReset }: { response: Response; onReset: () => void }) {
+  const { status } = response
+
+  const heading = useMemo(() => {
+    switch (status) {
+      case 403:
+        return 'Permission required'
+      case 404:
+        return 'Content not found'
+      default:
+        return 'Oops!'
+    }
+  }, [status])
+
+  const body = useMemo(() => {
+    switch (status) {
+      case 403:
+        return 'Contact your administrator for access.'
+      case 404:
+        return 'If you believe something should be here, please reach out to your administrator.'
+      default:
+        return 'Something unexpected happened.'
+    }
+  }, [status])
+
+  useEffect(() => {
+    if (status !== 401) return
+
+    return onAuthRefresh(onReset)
+  }, [status, onReset])
+
+  return <ErrorContent heading={heading} body={body} />
+}
+
+function ErrorContent({ heading, body }: { heading: string; body: string }) {
+  const navigation = useNavigation()
+
+  return (
+    <BlankState.Root>
+      <BlankState.Imagery name="people.noTextMessage" />
+      <BlankState.Content>
+        <BlankState.Heading>{heading}</BlankState.Heading>
+        <BlankState.Text>{body}</BlankState.Text>
+      </BlankState.Content>
+      <BlankState.Button
+        title="Go back"
+        onPress={navigation.goBack}
+        size="md"
+        accessibilityRole="link"
+      />
+      <BlankState.TextButton onPress={() => navigation.navigate('BugReport')}>
+        Report a bug
+      </BlankState.TextButton>
+    </BlankState.Root>
+  )
+}

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/index.ts

@@ -1,6 +1,7 @@
 export * from './use_animated_message_background_color'
-export * from './use_api_client'
+export { useApiClient } from './use_api_client'
 export * from './use_api'
+export * from './use_app_state'
 export * from './use_async_storage'
 export * from './use_at_font_scale_breakpoint'
 export * from './use_chat_permissions'

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])
+}

package/src/hooks/use_features.ts

@@ -5,6 +5,8 @@ import type { FeatureResource } from '../types/resources/feature_resource'
 import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
 import { useApiClient } from './use_api_client'
 
+type FeatureName = (typeof availableFeatures)[keyof typeof availableFeatures]
+
 export function useFeatures() {
   const apiClient = useApiClient()
   const requestArgs = getFeaturesRequestArgs()
@@ -22,7 +24,7 @@ export function useFeatures() {
   const features = data.data
 
   const featureEnabled = useCallback(
-    (featureName: string) =>
+    (featureName: FeatureName) =>
       features.some(feature => feature.name === featureName && feature.enabled),
     [features]
   )
@@ -39,7 +41,8 @@ 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> = {
   data: [],