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

package/src/__tests__/utils/native_adapters/configuration.ts

@@ -113,7 +113,7 @@ describe('ChatAdapters', () => {
   describe('document picker adapter', () => {
     it('uses the configured adapter when provided', () => {
       const documentPicker = new DocumentPickerAdapter({
-        openAsync: jest.fn(async () => ({ canceled: true as true, assets: null })),
+        openAsync: jest.fn(async () => ({ canceled: true, assets: null })),
       })
 
       ChatAdapters.configure({

package/src/__tests__/utils/system_messages.ts

@@ -11,7 +11,7 @@ const makeMessage = (overrides: Partial<MessageResource> = {}): MessageResource
   textEditedAt: null,
   mine: false,
   attachments: [],
-  author: { id: -1, type: 'Person', name: 'System', avatar: '' },
+  author: { id: -1, name: 'System', avatar: '' },
   reactionCounts: [],
   replyCount: 0,
   replyRootId: null,

package/src/__tests__/utils/uri.ts

@@ -1,4 +1,4 @@
-import { Session, Uri } from '../../utils'
+import { Uri } from '../../utils'
 
 describe('URI', () => {
   it('should be defined', () => {
@@ -7,7 +7,13 @@ describe('URI', () => {
 
   it('should create a new instance', () => {
     const uri = new Uri({
-      session: new Session({ env: 'production', type: 'OAuth' }),
+      session: {
+        env: 'production',
+        token: undefined,
+        type: 'OAuth',
+        isAuthenticated: false,
+        isChurchCenterToken: false,
+      },
     })
     expect(uri).toBeDefined()
   })
@@ -16,21 +22,39 @@ describe('URI', () => {
     describe('planning center', () => {
       it('should return the correct base URL for production', () => {
         const uri = new Uri({
-          session: new Session({ env: 'production', type: 'OAuth' }),
+          session: {
+            env: 'production',
+            token: undefined,
+            type: 'OAuth',
+            isAuthenticated: false,
+            isChurchCenterToken: false,
+          },
         })
         expect(uri.baseUrl).toBe('https://api.planningcenteronline.com')
       })
 
       it('should return the correct base URL for staging', () => {
         const uri = new Uri({
-          session: new Session({ env: 'staging', type: 'OAuth' }),
+          session: {
+            env: 'staging',
+            token: undefined,
+            type: 'OAuth',
+            isAuthenticated: false,
+            isChurchCenterToken: false,
+          },
         })
         expect(uri.baseUrl).toBe('https://api-staging.planningcenteronline.com')
       })
 
       it('should return the correct base URL for development', () => {
         const uri = new Uri({
-          session: new Session({ env: 'development', type: 'OAuth' }),
+          session: {
+            env: 'development',
+            token: undefined,
+            type: 'OAuth',
+            isAuthenticated: false,
+            isChurchCenterToken: false,
+          },
         })
         expect(uri.baseUrl).toBe('https://api.pco.test')
       })
@@ -39,7 +63,13 @@ describe('URI', () => {
     describe('church center', () => {
       it('should return the correct base URL for production', () => {
         const uri = new Uri({
-          session: new Session({ env: 'production', type: 'ChurchCenterOauth' }),
+          session: {
+            env: 'production',
+            token: undefined,
+            type: 'ChurchCenterOauth',
+            isAuthenticated: false,
+            isChurchCenterToken: true,
+          },
           graph: 'churchcenter',
         })
         expect(uri.baseUrl).toBe('https://api.churchcenter.com')
@@ -47,7 +77,13 @@ describe('URI', () => {
 
       it('should return the correct base URL for staging', () => {
         const uri = new Uri({
-          session: new Session({ env: 'staging', type: 'ChurchCenterOauth' }),
+          session: {
+            env: 'staging',
+            token: undefined,
+            type: 'ChurchCenterOauth',
+            isAuthenticated: false,
+            isChurchCenterToken: true,
+          },
           graph: 'churchcenter',
         })
         expect(uri.baseUrl).toBe('https://api.staging.churchcenter.com')
@@ -55,7 +91,13 @@ describe('URI', () => {
 
       it('should return the correct base URL for development', () => {
         const uri = new Uri({
-          session: new Session({ env: 'development', type: 'ChurchCenterOauth' }),
+          session: {
+            env: 'development',
+            token: undefined,
+            type: 'ChurchCenterOauth',
+            isAuthenticated: false,
+            isChurchCenterToken: true,
+          },
           graph: 'churchcenter',
         })
         expect(uri.baseUrl).toBe('https://api.churchcenter.test')

package/src/__utils__/handlers.ts

@@ -1,4 +1,5 @@
-import { http, HttpResponse, type JsonBodyType } from 'msw'
+import { http, HttpResponse } from 'msw'
+import { JSONAPIResponse } from '../types'
 import DefaultFixtures from './fixtures/defaults'
 
 export const BASE_URL = 'https://api.pco.test/chat/v2'
@@ -12,25 +13,25 @@ export const handlers = [
   del(BASE_URL + '/records/:id'),
 ]
 
-function get(url: string, mockedResponse: JsonBodyType, mockedStatus: number = 200) {
+function get(url: string, mockedResponse: JSONAPIResponse, mockedStatus: number = 200) {
   return http.get(url, () => {
     return HttpResponse.json(mockedResponse, { status: mockedStatus })
   })
 }
 
-function post(url: string, mockedResponse: JsonBodyType, mockedStatus: number = 200) {
+function post(url: string, mockedResponse: JSONAPIResponse, mockedStatus: number = 200) {
   return http.post(url, () => {
     return HttpResponse.json(mockedResponse, { status: mockedStatus })
   })
 }
 
-function del(url: string, mockedResponse?: JsonBodyType, mockedStatus: number = 200) {
+function del(url: string, mockedResponse?: JSONAPIResponse, mockedStatus: number = 200) {
   return http.delete(url, () => {
     return HttpResponse.json(mockedResponse, { status: mockedStatus })
   })
 }
 
-function patch(url: string, mockedResponse: JsonBodyType, mockedStatus: number = 200) {
+function patch(url: string, mockedResponse: JSONAPIResponse, mockedStatus: number = 200) {
   return http.patch(url, () => {
     return HttpResponse.json(mockedResponse, { status: mockedStatus })
   })

package/src/components/conversation/attachments/attachment_deleting_overlay.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { useTheme } from '../../../hooks'
 import { Spinner } from '../../display'
@@ -18,22 +19,14 @@ const useStyles = () => {
 
   return StyleSheet.create({
     container: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
+      ...StyleSheet.absoluteFillObject,
       justifyContent: 'center',
       alignItems: 'center',
       borderRadius: 8,
       overflow: 'hidden',
     },
     overlay: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
+      ...StyleSheet.absoluteFillObject,
       backgroundColor: colors.fillColorNeutral070,
       opacity: 0.5,
     },

package/src/components/conversation/messages_disabled_banners.tsx

@@ -3,7 +3,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
 import type { ConversationDisabledReason } from '../../types'
 import { ADULT_REQUIREMENT_BODY } from '../../utils'
-import { Text } from '../display'
+import { Button, Text } from '../display'
 
 export const LeaderMessagesDisabledBanner = () => {
   return (
@@ -31,22 +31,37 @@ const DEFAULT_DISABLED_TEXT = 'This conversation has been disabled.'
 
 interface ConversationDisabledBannerProps {
   disabledReason?: ConversationDisabledReason
+  messageLink?: { label: string; onPress: () => void }
 }
 
-export const ConversationDisabledBanner = ({ disabledReason }: ConversationDisabledBannerProps) => {
+export const ConversationDisabledBanner = ({
+  disabledReason,
+  messageLink,
+}: ConversationDisabledBannerProps) => {
   const styles = useStyles()
   const description =
     (disabledReason && DISABLED_REASON_TEXT[disabledReason]) ?? DEFAULT_DISABLED_TEXT
 
-  return <MessagesDisabledBanner description={description} style={styles.memberBanner} />
+  return (
+    <MessagesDisabledBanner
+      description={description}
+      style={styles.memberBanner}
+      messageLink={messageLink}
+    />
+  )
 }
 
 interface MessagesDisabledBannerProps {
   description: string
   style?: ViewStyle
+  messageLink?: { label: string; onPress: () => void }
 }
 
-const MessagesDisabledBanner = ({ description, style }: MessagesDisabledBannerProps) => {
+const MessagesDisabledBanner = ({
+  description,
+  style,
+  messageLink,
+}: MessagesDisabledBannerProps) => {
   const styles = useStyles()
 
   return (
@@ -54,6 +69,15 @@ const MessagesDisabledBanner = ({ description, style }: MessagesDisabledBannerPr
       <Text style={styles.text} variant="tertiary">
         {description}
       </Text>
+      {messageLink && (
+        <Button
+          variant="fill"
+          size="lg"
+          title={messageLink.label}
+          onPress={messageLink.onPress}
+          style={styles.messageButton}
+        />
+      )}
     </View>
   )
 }
@@ -78,5 +102,8 @@ const useStyles = () => {
       paddingBottom: 16 + bottom,
       marginBottom: -bottom,
     },
+    messageButton: {
+      marginTop: 12,
+    },
   })
 }

package/src/components/conversations/conversation_preview.tsx

@@ -6,8 +6,10 @@ import {
   useFontScale,
   useScalableNumberOfLines,
 } from '../../hooks'
-import { ConversationResource } from '../../types'
+import { ConversationPreviewData, ConversationResource } from '../../types'
+import { REACTION_EMOJIS, platformFontWeightBold } from '../../utils'
 import { formatDatePreview } from '../../utils/date'
+import { tokens } from '../../vendor/tapestry/tokens'
 import { AvatarGroup, ConversationAvatar, Heading, Text, Badge, type BadgeProps } from '../display'
 import { ConversationActions } from './conversation_actions'
 import { MuteIndicator } from './mute_indicator'
@@ -30,25 +32,26 @@ export const ConversationPreview = ({
 }: ConversationPreviewProps) => {
   const styles = useStyles()
   const {
-    lastMessageAuthorName,
+    conversationPreview,
     lastMessageCreatedAt,
-    lastMessageTextPreview,
     title,
     unreadCount,
     badges,
     muted,
     disabled,
+    unreadReaction,
   } = conversation
 
   const emptyConversation = !lastMessageCreatedAt
   const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'
   const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted
+  const isUnread = unreadCount > 0 || unreadReaction
 
   const numberOfLinesScaledTitle = useScalableNumberOfLines(1)
   const numberOfLinesScaledPreviewText = useScalableNumberOfLines(2)
 
-  const conversationPreviewText = lastMessageTextPreview
-    ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`
+  const conversationPreviewText = conversationPreview
+    ? formatConversationPreviewText(conversationPreview)
     : EMPTY_CONVERSATION_PREVIEW_TEXT
 
   const conversationAccessibilityLabel = getConversationAccessibilityLabel({
@@ -69,13 +72,20 @@ export const ConversationPreview = ({
         fallbackIconName={fallbackIconName}
       />
       <View style={styles.conversationBody}>
-        <Heading numberOfLines={numberOfLinesScaledTitle} variant="h3" style={styles.title}>
+        <Heading
+          numberOfLines={numberOfLinesScaledTitle}
+          variant="h3"
+          style={[styles.title, isUnread && styles.unreadTitle]}
+        >
           {title}
         </Heading>
         <Text
           variant="tertiary"
           numberOfLines={numberOfLinesScaledPreviewText}
-          style={emptyConversation && styles.emptyConversationPreviewText}
+          style={[
+            emptyConversation && styles.emptyConversationPreviewText,
+            isUnread && styles.unreadText,
+          ]}
         >
           {conversationPreviewText}
         </Text>
@@ -83,9 +93,9 @@ export const ConversationPreview = ({
       </View>
       {hasMetaContent && (
         <View style={styles.metaContainer}>
-          <Text variant="tertiary">{formatDatePreview(lastMessageCreatedAt)}</Text>
+          <Text variant="tertiary">{formatDatePreview(conversationPreview?.createdAt)}</Text>
           <View style={styles.statusContainer}>
-            <UnreadCountBadge count={unreadCount} showDot={muted} />
+            <UnreadCountBadge count={unreadCount} unreadReaction={unreadReaction} showDot={muted} />
             <MuteIndicator muted={muted} />
           </View>
         </View>
@@ -152,6 +162,30 @@ export const ConversationPreviewSkeleton = () => {
   )
 }
 
+function reactionEmoji(value: ConversationPreviewData['value']): string | null {
+  if (!value) return null
+  return REACTION_EMOJIS[value] ?? null
+}
+
+function formatConversationPreviewText(preview: ConversationPreviewData) {
+  if (preview.kind === 'reaction') {
+    const emoji = reactionEmoji(preview.value)
+    return `${preview.authorName}${emoji ? ` ${emoji}` : ' reacted'} to: "${preview.text}"`
+  }
+
+  return `${preview.authorName}: ${preview.text}`
+}
+
+function formatConversationPreviewAccessibilityLabel(preview: ConversationPreviewData) {
+  const date = formatDatePreview(preview.createdAt)
+
+  if (preview.kind === 'reaction') {
+    return `${preview.authorName} reacted to your message sent ${date} and says ${preview.text}`
+  }
+
+  return `Last message sent ${date} from ${preview.authorName} and says ${preview.text}`
+}
+
 interface GetConversationAccessibilityLabelProps {
   conversation: ConversationResource
   showBadges: boolean
@@ -160,29 +194,24 @@ const getConversationAccessibilityLabel = ({
   conversation,
   showBadges,
 }: GetConversationAccessibilityLabelProps) => {
-  const {
-    badges,
-    title,
-    lastMessageAuthorName,
-    lastMessageTextPreview,
-    muted,
-    disabled,
-    unreadCount,
-    lastMessageCreatedAt,
-  } = conversation
+  const { badges, title, conversationPreview, muted, disabled, unreadCount, unreadReaction } =
+    conversation
 
   const hasBadges = badges && showBadges
   const hasUnreadMessages = unreadCount > 0
-  const hasLastMessage = lastMessageCreatedAt
 
   const label = {
     title,
     badge: hasBadges ? `for ${badges[0]?.pcoResourceType} ${badges[0]?.text || ''}` : '',
     disabled: disabled ? 'Disabled' : '',
     muted: muted ? 'Muted' : '',
-    readStatus: hasUnreadMessages ? `${unreadCount} unread messages` : '',
-    lastMessage: hasLastMessage
-      ? `Last message sent ${formatDatePreview(lastMessageCreatedAt)} from ${lastMessageAuthorName} and says ${lastMessageTextPreview}`
+    readStatus: hasUnreadMessages
+      ? `${unreadCount} unread messages`
+      : unreadReaction
+        ? 'unread reaction'
+        : '',
+    lastMessage: conversationPreview
+      ? formatConversationPreviewAccessibilityLabel(conversationPreview)
       : EMPTY_CONVERSATION_PREVIEW_TEXT,
   }
 
@@ -222,6 +251,12 @@ const useStyles = () => {
       fontSize: 16,
       color: colors.textColorDefaultPrimary,
     },
+    unreadTitle: {
+      fontWeight: tokens.fontWeightBold,
+    },
+    unreadText: {
+      fontWeight: platformFontWeightBold,
+    },
     titleLoading: {
       width: 120,
       height: 20,

package/src/components/conversations/unread_count_badge.tsx

@@ -4,12 +4,21 @@ import { useFontScale, useTheme } from '../../hooks'
 import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../utils'
 import { Text } from '../display'
 
-export const UnreadCountBadge = ({ count, showDot }: { count: number; showDot: boolean }) => {
+export const UnreadCountBadge = ({
+  count,
+  unreadReaction,
+  showDot,
+}: {
+  count: number
+  unreadReaction: boolean
+  showDot: boolean
+}) => {
   const styles = useStyles()
   const displayCount = count > 99 ? '99+' : count
+  const isUnread = count > 0 || unreadReaction
 
-  if (count === 0) return null
-  if (showDot) return <View style={styles.dot} />
+  if (!isUnread) return null
+  if (showDot || count === 0) return <View style={styles.dot} />
 
   return (
     <View style={styles.badge}>
@@ -24,7 +33,7 @@ const useStyles = () => {
   const { colors } = useTheme()
   const dotScaleLimit = MAX_FONT_SIZE_MULTIPLIER * 1.5
   const fontScale = useFontScale({ maxFontSizeMultiplier: dotScaleLimit })
-  const size = 8 * fontScale
+  const size = 10 * fontScale
 
   return StyleSheet.create({
     badge: {

package/src/components/page/__tests__/component_error_boundary.test.tsx

@@ -4,7 +4,7 @@ import { Text } from 'react-native'
 import { Log } from '../../../utils/native_adapters/configuration'
 import { ComponentErrorBoundary } from '../component_error_boundary'
 
-function Boom({ thrown }: { thrown: unknown }): React.ReactElement {
+function Boom({ thrown }: { thrown: unknown }) {
   throw thrown
 }
 

package/src/components/page/__tests__/error_boundary.test.tsx

@@ -6,7 +6,7 @@ import { Log } from '../../../utils/native_adapters/configuration'
 import { ResponseError } from '../../../utils/response_error'
 import { ErrorBoundary } from '../error_boundary'
 
-function Boom({ thrown }: { thrown: unknown }): React.ReactElement {
+function Boom({ thrown }: { thrown: unknown }) {
   throw thrown
 }
 
@@ -46,11 +46,7 @@ describe('ErrorBoundary', () => {
   })
 
   it('does not report ResponseError — those are owned by the HTTP layer', () => {
-    const failure = {
-      status: 500,
-      statusText: 'Server Error',
-      errors: [],
-    } as unknown as FailedResponse
+    const failure = { status: 500, statusText: 'Server Error', errors: [] } as FailedResponse
 
     render(
       <ErrorBoundary fallback={null}>

package/src/components/page/__tests__/page_error_boundary.test.tsx

@@ -26,7 +26,7 @@ jest.mock('../../primitive/blank_state_primitive', () => {
   }
 })
 
-function Boom({ thrown }: { thrown: unknown }): React.ReactElement {
+function Boom({ thrown }: { thrown: unknown }) {
   throw thrown
 }
 

package/src/hooks/direct_messages/find_direct_message_conversation.ts

@@ -0,0 +1,16 @@
+import { ApiCollection, ConversationResource } from '../../types'
+import { ApiClient } from '../use_api_client'
+
+export const getFindDirectMessageConversationRequestArgs = (participantIds: string[]) => ({
+  url: '/me/conversations',
+  data: {
+    fields: { Conversation: ['title', 'disabled'] },
+    filter: 'with_exact_direct_message_participants',
+    participant_ids: participantIds.join(','),
+  },
+})
+
+export const findDirectMessageConversation = (apiClient: ApiClient, participantIds: string[]) =>
+  apiClient.chat.get(getFindDirectMessageConversationRequestArgs(participantIds)) as Promise<
+    ApiCollection<ConversationResource>
+  >

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