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

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

@@ -16,6 +16,7 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'created_at',
         'badges',
         'conversation_membership',
+        'conversation_preview',
         'gender_option',
         'groups',
         'last_message_author_id',
@@ -36,6 +37,7 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'replies_disabled',
         'title',
         'unread_count',
+        'unread_reaction',
         'updated_at',
       ],
       AnalyticsMetadata: ['metadata'],
@@ -45,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/hooks/use_conversation_jolt_events.ts

@@ -63,7 +63,7 @@ export function useConversationJoltEvents({ conversationId }: Props) {
           data: {
             ...prev.data,
             latestReadMessageSortKey: latest_read_message_sort_key,
-            unreadReactionCount: 0,
+            unreadReaction: false,
           },
         }
       })
@@ -87,25 +87,9 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
   const handleReactionJoltEvent = useCallback(
     (event: JoltReactionEvent) => {
-      queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
-        if (!prev?.data) return prev
+      if (event.data.data.author_id === currentPersonId) return
 
-        if (event.data.data.author_id === currentPersonId) {
-          return prev
-        }
-
-        return {
-          ...prev,
-          data: {
-            ...prev.data,
-            // Not a real count, just a derived value from Jolt events so we can
-            // determine if we should mark the conversation as read
-            unreadReactionCount: prev.data.unreadReactionCount
-              ? prev.data.unreadReactionCount + 1
-              : 1,
-          },
-        }
-      })
+      queryClient.invalidateQueries({ queryKey })
     },
     [queryClient, queryKey, currentPersonId]
   )

package/src/hooks/use_conversation_messages.ts

@@ -7,11 +7,10 @@ export const useConversationMessages = (
   { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string | null },
   opts?: SuspensePaginatorOptions
 ) => {
-  const { data, refetch, isRefetching, fetchNextPage, hasNextPage } =
-    useSuspensePaginator<MessageResource>(
-      getMessagesRequestArgs({ conversation_id, reply_root_id }),
-      opts
-    )
+  const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>(
+    getMessagesRequestArgs({ conversation_id, reply_root_id }),
+    opts
+  )
   const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
   const messages = useMemo(
     () =>
@@ -25,5 +24,5 @@ export const useConversationMessages = (
     [data]
   )
 
-  return { messages, refetch, isRefetching, fetchNextPage, hasNextPage, queryKey }
+  return { messages, refetch, isRefetching, fetchNextPage, queryKey }
 }

package/src/hooks/use_conversations_actions.ts

@@ -20,7 +20,7 @@ export const useConversationsMarkRead = ({
     currentPersonCache.update({}, person => {
       const currentUnread = person.unreadCount
       const updatedUnread = read ? Math.max(currentUnread - 1, 0) : currentUnread + 1
-      return { ...person, unreadCount: updatedUnread, unreadReactionCount: 0 }
+      return { ...person, unreadCount: updatedUnread }
     })
   }
 
@@ -29,6 +29,7 @@ export const useConversationsMarkRead = ({
       update({
         ...conversation,
         unreadCount: read ? 0 : 1,
+        ...(read ? { unreadReaction: false } : {}),
       })
       handlePersonUnreadCount(read)
     },
@@ -106,6 +107,7 @@ export const useMarkAllRead = () => {
     onMutate: () => {
       updateAll({
         unreadCount: 0,
+        unreadReaction: false,
       })
     },
     mutationKey: ['markAllRead', args],

package/src/hooks/use_mark_latest_message_read.ts

@@ -17,9 +17,9 @@ export function useMarkLatestMessageRead({ conversation }: Props) {
     [markRead]
   )
   const unreadCount = conversation.unreadCount
-  const unreadReactionCount = conversation.unreadReactionCount || 0
+  const unreadReaction = conversation.unreadReaction
 
-  const shouldMarkRead = Boolean(unreadCount >= 1 || unreadReactionCount > 0 || !firedOnce.current)
+  const shouldMarkRead = Boolean(unreadCount >= 1 || unreadReaction || !firedOnce.current)
   const appState = useAppState()
   const isActive = appState === 'active'
 
@@ -29,6 +29,5 @@ export function useMarkLatestMessageRead({ conversation }: Props) {
     firedOnce.current = true
 
     debouncedMarkRead(true)
-    // keeping unreadReactionCount in the dependency array to watch for changes
-  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReactionCount])
+  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReaction])
 }

package/src/index.tsx

@@ -12,8 +12,7 @@ export { default as Event } from './polyfills/events/Event'
 export * from './screens'
 export { AgeCheckUnderageScreen } from './screens/age_check/age_check_underage_screen' // TODO: add to barrel
 export * from './types'
-export { platformFontWeightBold, Session, Uri } from './utils'
-export type { ENV, TemporaryDefaultColorsType } from './utils'
+export { ENV, platformFontWeightBold, Session, TemporaryDefaultColorsType, Uri } from './utils'
 export * from './utils/client'
 export * from './utils/host_bridge'
 export * from './utils/native_adapters'

package/src/polyfills/events/EventTarget.ts

@@ -142,7 +142,7 @@ export default class EventTarget {
 
   removeEventListener(
     type: string,
-    callback: EventListener | null,
+    callback: EventListener,
     optionsOrUseCapture: EventListenerOptions | boolean = {}
   ): void {
     if (arguments.length < 2) {

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'
@@ -89,7 +90,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
     route.params
   const { data: conversation } = useConversation(route.params)
-  const { messages, fetchNextPage, hasNextPage } = useConversationMessages({
+  const { messages, fetchNextPage } = useConversationMessages({
     conversation_id,
     reply_root_id,
   })
@@ -181,9 +182,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             onScroll={trackScroll}
             scrollEventThrottle={10}
             ListFooterComponent={
-              hasNextPage ? null : (
-                <ConversationStartBanner conversation={conversation} hasMessages={true} />
-              )
+              <ConversationStartBanner conversation={conversation} hasMessages={true} />
             }
             renderItem={({ item }) => {
               if (item.type === 'DateSeparator') {
@@ -251,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/screens/conversations/components/list_header_component.tsx

@@ -158,12 +158,6 @@ export const ListHeaderComponent = () => {
           </TextButton>
         </View>
         <View style={styles.actionsContainer}>
-          <ListHeaderActionButton
-            name="general.cog"
-            onPress={handleChatSettings}
-            accessibilityLabel="Chat settings"
-            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
-          />
           {canCreateConversations && (
             <ListHeaderActionButton
               name="churchCenter.signups"
@@ -173,6 +167,12 @@ export const ListHeaderComponent = () => {
               maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
             />
           )}
+          <ListHeaderActionButton
+            name="general.cog"
+            onPress={handleChatSettings}
+            accessibilityLabel="Chat settings"
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          />
           {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps} />}
         </View>
       </View>

package/src/types/resources/conversation.ts

@@ -3,15 +3,25 @@ import { ConversationBadgeResource } from './conversation_badge'
 import { ConversationMembershipResource } from './conversation_membership'
 import { GroupResource } from './group_resource'
 import { MemberAbilityResource } from './member_ability'
+import { ReactionCountResource } from './reaction'
 
 export type ConversationDisabledReason = 'safety_check' | 'direct_messages_disabled'
 
+export interface ConversationPreviewData {
+  kind: 'reaction' | 'message'
+  authorName: string
+  value: ReactionCountResource['value'] | null
+  text: string
+  createdAt: string
+}
+
 export interface ConversationResource {
   type: 'Conversation'
   id: number
   badges?: ConversationBadgeResource[]
   analyticsMetadata?: AnalyticsMetadataResource
   conversationMembership?: Partial<ConversationMembershipResource>
+  conversationPreview: ConversationPreviewData | null
   createdAt: string
   deleted?: boolean
   directMessage?: boolean
@@ -34,6 +44,6 @@ export interface ConversationResource {
   repliesDisabled: boolean
   title: string
   unreadCount: number
-  unreadReactionCount?: number // Derived from Jolt events
+  unreadReaction: boolean
   updatedAt: string
 }

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
 }

package/src/utils/__tests__/response_error.test.ts

@@ -7,10 +7,14 @@ const fetchResponseLike = (status: number) => ({
   ok: status >= 200 && status < 300,
   statusText: 'unauthorized',
   url: 'https://api.planningcenteronline.com/chat/v2/me',
+  redirected: false,
+  headers: {},
   clone() {
     return this
   },
   json: async () => ({ errors: [] }),
+  text: async () => '',
+  arrayBuffer: async () => new ArrayBuffer(0),
 })
 
 describe('isResponseLike', () => {
@@ -25,6 +29,9 @@ describe('isResponseLike', () => {
     expect(isResponseLike(new Error('boom'))).toBe(false)
     expect(isResponseLike(new ResponseError({ status: 401 } as never))).toBe(false)
     expect(isResponseLike({ status: 401 })).toBe(false)
+    expect(isResponseLike({ status: 401, ok: false, clone() {}, json: async () => ({}) })).toBe(
+      false
+    )
   })
 })
 

package/src/utils/request/conversation.ts

@@ -38,6 +38,7 @@ export const getConversationsRequestArgs = ({
         Conversation: [
           'created_at',
           'badges',
+          'conversation_preview',
           'disabled',
           'disabled_reason',
           'groups',
@@ -55,6 +56,7 @@ export const getConversationsRequestArgs = ({
           'replies_disabled',
           'title',
           'unread_count',
+          'unread_reaction',
           'updated_at',
         ],
         AnalyticsMetadata: ['metadata'],

package/src/utils/response_error.ts

@@ -19,13 +19,24 @@ export class ResponseError extends Error {
 // Detect a fetch Response by shape, not `instanceof`: Expo's winter runtime
 // swaps in a `fetch` whose `FetchResponse` isn't an instance of the global
 // `Response`, so `instanceof` silently misses it under Expo.
-export const isResponseLike = (value: unknown): value is Response =>
-  typeof value === 'object' &&
-  value !== null &&
-  typeof (value as Response).status === 'number' &&
-  typeof (value as Response).ok === 'boolean' &&
-  typeof (value as Response).clone === 'function' &&
-  typeof (value as Response).json === 'function'
+export const isResponseLike = (value: unknown): value is Response => {
+  if (typeof value !== 'object' || value === null) return false
+
+  const candidate = value as Record<string, unknown>
+  return (
+    typeof candidate.status === 'number' &&
+    typeof candidate.statusText === 'string' &&
+    typeof candidate.ok === 'boolean' &&
+    typeof candidate.redirected === 'boolean' &&
+    typeof candidate.url === 'string' &&
+    typeof candidate.headers === 'object' &&
+    candidate.headers !== null &&
+    typeof candidate.clone === 'function' &&
+    typeof candidate.json === 'function' &&
+    typeof candidate.text === 'function' &&
+    typeof candidate.arrayBuffer === 'function'
+  )
+}
 
 export const throwResponseError = (error: unknown) => {
   if (isResponseLike(error)) {

package/src/utils/sha_256.ts

@@ -113,7 +113,7 @@ function preprocessMessage(message: number[]): Uint32Array {
   const words = new Uint32Array(message.length / 4)
   for (let i = 0; i < message.length; i += 4) {
     words[i / 4] =
-      (message[i]! << 24) | (message[i + 1]! << 16) | (message[i + 2]! << 8) | message[i + 3]!
+      (message[i] << 24) | (message[i + 1] << 16) | (message[i + 2] << 8) | message[i + 3]
   }
 
   return words
@@ -125,25 +125,25 @@ function processChunk(chunk: Uint32Array, hash: number[]): void {
 
   // Prepare message schedule
   for (let t = 0; t < 16; t++) {
-    W[t] = chunk[t]!
+    W[t] = chunk[t]
   }
   for (let t = 16; t < 64; t++) {
-    W[t] = (gamma1(W[t - 2]!) + W[t - 7]! + gamma0(W[t - 15]!) + W[t - 16]!) >>> 0
+    W[t] = (gamma1(W[t - 2]) + W[t - 7] + gamma0(W[t - 15]) + W[t - 16]) >>> 0
   }
 
   // Initialize working variables
-  let a = hash[0]!
-  let b = hash[1]!
-  let c = hash[2]!
-  let d = hash[3]!
-  let e = hash[4]!
-  let f = hash[5]!
-  let g = hash[6]!
-  let h = hash[7]!
+  let a = hash[0]
+  let b = hash[1]
+  let c = hash[2]
+  let d = hash[3]
+  let e = hash[4]
+  let f = hash[5]
+  let g = hash[6]
+  let h = hash[7]
 
   // Main loop
   for (let t = 0; t < 64; t++) {
-    const T1 = (h + sigma1(e) + ch(e, f, g) + K[t]! + W[t]!) >>> 0
+    const T1 = (h + sigma1(e) + ch(e, f, g) + K[t] + W[t]) >>> 0
     const T2 = (sigma0(a) + maj(a, b, c)) >>> 0
     h = g
     g = f
@@ -156,14 +156,14 @@ function processChunk(chunk: Uint32Array, hash: number[]): void {
   }
 
   // Add compressed chunk to current hash value
-  hash[0] = (hash[0]! + a) >>> 0
-  hash[1] = (hash[1]! + b) >>> 0
-  hash[2] = (hash[2]! + c) >>> 0
-  hash[3] = (hash[3]! + d) >>> 0
-  hash[4] = (hash[4]! + e) >>> 0
-  hash[5] = (hash[5]! + f) >>> 0
-  hash[6] = (hash[6]! + g) >>> 0
-  hash[7] = (hash[7]! + h) >>> 0
+  hash[0] = (hash[0] + a) >>> 0
+  hash[1] = (hash[1] + b) >>> 0
+  hash[2] = (hash[2] + c) >>> 0
+  hash[3] = (hash[3] + d) >>> 0
+  hash[4] = (hash[4] + e) >>> 0
+  hash[5] = (hash[5] + f) >>> 0
+  hash[6] = (hash[6] + g) >>> 0
+  hash[7] = (hash[7] + h) >>> 0
 }
 
 /** Compute SHA-256 hash and return as byte array */
@@ -181,10 +181,10 @@ function sha256Raw(message: string): number[] {
   // Convert hash to byte array
   const result: number[] = []
   for (let i = 0; i < 8; i++) {
-    result.push((hash[i]! >>> 24) & 0xff)
-    result.push((hash[i]! >>> 16) & 0xff)
-    result.push((hash[i]! >>> 8) & 0xff)
-    result.push(hash[i]! & 0xff)
+    result.push((hash[i] >>> 24) & 0xff)
+    result.push((hash[i] >>> 16) & 0xff)
+    result.push((hash[i] >>> 8) & 0xff)
+    result.push(hash[i] & 0xff)
   }
 
   return result

package/src/utils/system_messages.ts

@@ -1,4 +1,4 @@
-import type { MessageResource } from '../types'
+import { MessageResource } from '../types'
 
 const SYSTEM_MESSAGE_TYPES = ['user_joined'] as const
 

package/src/utils/theme.ts

@@ -1,5 +1,4 @@
-import { PlatformColor } from 'react-native'
-import type { ColorSchemeName, ColorValue, OpaqueColorValue } from 'react-native'
+import { ColorSchemeName, ColorValue, OpaqueColorValue, PlatformColor } from 'react-native'
 import { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'
 import { tokens } from '../vendor/tapestry/tokens'
 
@@ -31,7 +30,7 @@ export interface DefaultTheme {
   showBadgeProductLogo: boolean
 }
 
-export const defaultTheme = (colorScheme: ColorSchemeName | null): ChatTheme => {
+export const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {
   const scheme: 'light' | 'dark' = colorScheme === 'dark' ? 'dark' : 'light'
 
   const defaultColors = {