@planningcenter/chat-react-native 3.42.2-qa-staging.3 → 3.42.2-qa-staging.4

package/src/hooks/direct_messages/resolve_message_available_members_link.ts

@@ -0,0 +1,42 @@
+import { ConversationResource } from '../../types'
+import { PreselectedDirectMessagePerson } from '../../types/resources/direct_message_candidate'
+import { MemberResource } from '../../types/resources/member'
+
+export type MessageAvailableMembersLink =
+  | { label: string; existingConversationId: number }
+  | { label: string; recipients: PreselectedDirectMessagePerson[] }
+
+export function resolveMessageAvailableMembersLink({
+  availableMembers,
+  existingConversations,
+  canCreateDirectMessages,
+}: {
+  availableMembers: Pick<MemberResource, 'id' | 'name' | 'avatar'>[]
+  existingConversations: Pick<ConversationResource, 'id' | 'disabled'>[] | undefined
+  canCreateDirectMessages: boolean
+}): MessageAvailableMembersLink | undefined {
+  if (availableMembers.length === 0 || !existingConversations) return undefined
+
+  const label =
+    availableMembers.length === 1
+      ? `Message ${availableMembers[0].name.split(' ')[0]}`
+      : `Message the remaining ${availableMembers.length} people`
+
+  const existingConversation = existingConversations[0]
+  if (existingConversation) {
+    return existingConversation.disabled
+      ? undefined
+      : { label, existingConversationId: Number(existingConversation.id) }
+  }
+
+  if (!canCreateDirectMessages) return undefined
+
+  return {
+    label,
+    recipients: availableMembers.map(m => ({
+      id: m.id.toString(),
+      name: m.name,
+      avatar: m.avatar,
+    })),
+  }
+}

package/src/hooks/direct_messages/use_find_or_create_direct_message_conversation.ts

@@ -1,17 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
 import { useState, useCallback } from 'react'
-import { ApiCollection, ApiResource, ConversationResource } from '../../types'
+import { ApiResource, ConversationResource } from '../../types'
 import { ApiClient, useApiClient } from '../use_api_client'
-
-const findDirectMessageConversation = (apiClient: ApiClient, participantIds: string[]) =>
-  apiClient.chat.get({
-    url: '/me/conversations',
-    data: {
-      fields: { Conversation: ['title'] },
-      filter: 'with_exact_direct_message_participants',
-      participant_ids: participantIds.join(','),
-    },
-  }) as Promise<ApiCollection<ConversationResource>>
+import { findDirectMessageConversation } from './find_direct_message_conversation'
 
 const createDirectMessageConversation = (apiClient: ApiClient, ids: string[]) =>
   apiClient.chat.post({

package/src/hooks/direct_messages/use_message_available_members.ts

@@ -0,0 +1,65 @@
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { ConversationResource } from '../../types'
+import { MemberResource } from '../../types/resources/member'
+import { useApiGet } from '../use_api'
+import { useApiClient } from '../use_api_client'
+import { useCurrentPerson } from '../use_current_person'
+import { getRequestQueryKey } from '../use_suspense_api'
+import {
+  findDirectMessageConversation,
+  getFindDirectMessageConversationRequestArgs,
+} from './find_direct_message_conversation'
+import {
+  MessageAvailableMembersLink,
+  resolveMessageAvailableMembersLink,
+} from './resolve_message_available_members_link'
+
+export function useMessageAvailableMembers(
+  conversation: ConversationResource,
+  { enabled }: { enabled: boolean }
+): MessageAvailableMembersLink | undefined {
+  const apiClient = useApiClient()
+  const currentPerson = useCurrentPerson()
+
+  const { data: members } = useApiGet<MemberResource[]>(
+    {
+      url: `/me/conversations/${conversation.id}/members`,
+      data: { fields: { Member: ['name', 'avatar', 'direct_messages_disabled'] } },
+    },
+    { enabled }
+  )
+
+  const availableMembers = useMemo(() => {
+    if (!enabled || !members) return []
+
+    const currentMember = members.find(m => m.id === currentPerson.id)
+    if (currentMember?.directMessagesDisabled) return []
+
+    return members.filter(m => m.id !== currentPerson.id && !m.directMessagesDisabled)
+  }, [enabled, members, currentPerson.id])
+
+  const availablePersonIds = useMemo(() => availableMembers.map(m => m.id), [availableMembers])
+
+  const { data: existingDirectMessageData } = useQuery({
+    queryKey: getRequestQueryKey(
+      getFindDirectMessageConversationRequestArgs(availablePersonIds.map(String))
+    ),
+    queryFn: () => findDirectMessageConversation(apiClient, availablePersonIds.map(String)),
+    enabled: availablePersonIds.length > 0,
+  })
+
+  return useMemo(
+    () =>
+      resolveMessageAvailableMembersLink({
+        availableMembers,
+        existingConversations: existingDirectMessageData?.data,
+        canCreateDirectMessages: !!conversation.memberAbility?.canCreateDirectMessages,
+      }),
+    [
+      availableMembers,
+      existingDirectMessageData,
+      conversation.memberAbility?.canCreateDirectMessages,
+    ]
+  )
+}

package/src/hooks/direct_messages/use_message_available_members_action.ts

@@ -0,0 +1,34 @@
+import { StackActions, useNavigation } from '@react-navigation/native'
+import { ConversationResource } from '../../types'
+import { useMessageAvailableMembers } from './use_message_available_members'
+
+export function useMessageAvailableMembersAction(conversation: ConversationResource) {
+  const navigation = useNavigation()
+  const isDmDisabled =
+    !!conversation.disabled && conversation.disabledReason === 'direct_messages_disabled'
+  const messageAvailableMembersLink = useMessageAvailableMembers(conversation, {
+    enabled: isDmDisabled,
+  })
+
+  if (!messageAvailableMembersLink) return undefined
+
+  return {
+    label: messageAvailableMembersLink.label,
+    onPress: () => {
+      if ('existingConversationId' in messageAvailableMembersLink) {
+        // replace instead of navigate/push so the disabled conversation isn't
+        // left in the back stack as a dead end
+        navigation.dispatch(
+          StackActions.replace('Conversation', {
+            conversation_id: messageAvailableMembersLink.existingConversationId,
+          })
+        )
+      } else {
+        navigation.navigate('New', {
+          screen: 'ConversationSelectDirectMessageRecipients',
+          params: { preselected_people: messageAvailableMembersLink.recipients },
+        })
+      }
+    },
+  }
+}

package/src/hooks/use_conversation.ts

@@ -47,6 +47,7 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'leader',
         'can_reply',
         'can_delete_non_authored_messages',
+        'can_create_direct_messages',
       ],
       ConversationMembership: [
         'last_read_message_sort_key',

package/src/screens/conversation_screen.tsx

@@ -28,6 +28,7 @@ import { KeyboardView } from '../components/display/keyboard_view'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { ConversationContextProvider } from '../contexts/conversation_context'
 import { useTheme } from '../hooks'
+import { useMessageAvailableMembersAction } from '../hooks/direct_messages/use_message_available_members_action'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
@@ -249,8 +250,15 @@ function ConversationBottomBar({
   currentlyEditingMessage,
   onFlaggedInMessageForm,
 }: ConversationBottomBarProps) {
+  const messageLink = useMessageAvailableMembersAction(conversation)
+
   if (conversation.disabled)
-    return <ConversationDisabledBanner disabledReason={conversation.disabledReason} />
+    return (
+      <ConversationDisabledBanner
+        disabledReason={conversation.disabledReason}
+        messageLink={messageLink}
+      />
+    )
   if (!canReply) return <MemberMessagesDisabledBanner />
   return (
     <MessageForm.Root

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -17,16 +17,30 @@ import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
 
 const MAX_RECIPIENTS = 9
 
-export function ConversationSelectDirectMessageRecipientsScreen(
-  _props: ConversationSelectRecipientsScreenProps
-) {
+export function ConversationSelectDirectMessageRecipientsScreen({
+  route,
+}: ConversationSelectRecipientsScreenProps) {
+  const { preselected_people = [] } = route.params ?? {}
   const styles = useStyles()
   const navigation = useNavigation()
   const { featureEnabled } = useFeatures()
   const [searchTerm, setSearchTerm] = useState('')
   const [debouncedTerm, setDebouncedTerm] = useState('')
   const [selectedPeople, setSelectedPeople] = useState<Map<string, DirectMessageCandidateResource>>(
-    new Map()
+    () =>
+      new Map(
+        preselected_people.map(person => [
+          person.id,
+          {
+            ...person,
+            type: 'DirectMessageCandidate' as const,
+            groups: [],
+            teams: [],
+            under_18: false,
+            directMessagesDisabled: false,
+          },
+        ])
+      )
   )
   const searchInputRef = useRef<TextInput>(null)
 

package/src/screens/conversation_select_recipients/types/screen_props.tsx

@@ -1,10 +1,12 @@
 import { StaticScreenProps } from '@react-navigation/native'
 import { AppName } from '../../../types/resources/app_name'
+import { PreselectedDirectMessagePerson } from '../../../types/resources/direct_message_candidate'
 import { GraphId } from '../../../types/resources/group_resource'
 
 export type ConversationSelectRecipientsParams = {
   chat_group_graph_id?: GraphId
   group_source_app_name?: AppName
+  preselected_people?: PreselectedDirectMessagePerson[]
 }
 
 export type ConversationSelectRecipientsScreenProps =

package/src/types/resources/direct_message_candidate.ts

@@ -10,3 +10,8 @@ export interface DirectMessageCandidateResource extends ResourceObject {
   under_18: boolean
   directMessagesDisabled: boolean
 }
+
+export type PreselectedDirectMessagePerson = Pick<
+  DirectMessageCandidateResource,
+  'id' | 'name' | 'avatar'
+>

package/src/types/resources/member.ts

@@ -5,6 +5,7 @@ export interface MemberResource {
   avatar: string
   badges: MemberBadge[]
   child: boolean
+  directMessagesDisabled?: boolean
   gender: string | null
   role?: string
 }

package/src/types/resources/member_ability.ts

@@ -5,4 +5,5 @@ export interface MemberAbilityResource {
   canDeleteNonAuthoredMessages: boolean
   leader: boolean
   canReply: boolean
+  canCreateDirectMessages: boolean
 }