@planningcenter/chat-react-native 3.37.1-qa-736.0 → 3.37.1-qa-747.0

package/src/components/conversation/message_form.tsx

@@ -31,7 +31,6 @@ import { ConversationResource, MessageResource } from '../../types'
 import {
   DenormalizedAttachmentResourceForCreate,
   DenormalizedMessageAttachmentResourceForCreate,
-  FileAttachment,
 } from '../../types/resources/denormalized_attachment_resource_for_create'
 import {
   MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
@@ -341,28 +340,15 @@ function MessageFormAttachments() {
   )
 }
 
-function getFileType(attachments: FileAttachment[]): 'image' | 'video' | 'file' {
-  const kinds = new Set(
-    attachments.map(({ file }) => {
-      if (file.type.startsWith('image/')) return 'image'
-      if (file.type.startsWith('video/')) return 'video'
-      return 'file'
-    })
-  )
-  return kinds.size === 1 ? [...kinds][0] : 'file'
-}
-
 function FlaggedContentBanner() {
   const styles = useMessageFormStyles()
   const { attachmentUploader } = React.useContext(MessageFormContext)
-  const flaggedAttachments = attachmentUploader?.attachments.filter(a => a.flagged) ?? []
-  const flaggedCount = flaggedAttachments.length
+  const flaggedCount = attachmentUploader?.flaggedAttachmentCount || 0
 
   if (flaggedCount === 0) return null
 
   const isSingular = flaggedCount === 1
-  const fileType = getFileType(flaggedAttachments)
-  const buttonTitle = isSingular ? `Remove flagged ${fileType}` : `Remove flagged ${fileType}s`
+  const buttonTitle = isSingular ? 'Remove flagged image' : 'Remove flagged images'
 
   return (
     <View style={styles.flaggedBannerContainer}>
@@ -370,7 +356,7 @@ function FlaggedContentBanner() {
         <BannerPrimitive.StaticLayout>
           <BannerPrimitive.StatusIcon />
           <BannerPrimitive.Content>
-            <BannerMessage isSingular={isSingular} fileType={fileType} />
+            <BannerMessage isSingular={isSingular} />
             <View style={styles.flaggedBannerButtonRow}>
               <Button
                 title={buttonTitle}
@@ -387,7 +373,7 @@ function FlaggedContentBanner() {
   )
 }
 
-function BannerMessage({ isSingular, fileType }: { isSingular: boolean; fileType: string }) {
+function BannerMessage({ isSingular }: { isSingular: boolean }) {
   const styles = useMessageFormStyles()
 
   const contentGuidelinesLink = (
@@ -406,13 +392,13 @@ function BannerMessage({ isSingular, fileType }: { isSingular: boolean; fileType
 
   return isSingular ? (
     <Text style={styles.flaggedBannerText}>
-      An uploaded {fileType} was flagged because it doesn't meet our {contentGuidelinesLink}. Please
+      An uploaded image was flagged because it doesn't meet our {contentGuidelinesLink}. Please
       remove before proceeding.
     </Text>
   ) : (
     <Text style={styles.flaggedBannerText}>
-      Some uploaded {fileType}s were flagged because they don't meet our {contentGuidelinesLink}.
-      Please remove them before proceeding.
+      Some uploaded images were flagged because they don't meet our {contentGuidelinesLink}. Please
+      remove them before proceeding.
     </Text>
   )
 }

package/src/components/conversation/reply_shadow_message.tsx

@@ -28,7 +28,7 @@ import {
 import { Avatar, Icon, IconProps, Image, Text } from '../display'
 import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
 
-interface ReplyShadowMessageProps {
+interface ReplyShadowMessageProps extends MessageResource {
   messageId: string
   conversation_id: number
   inReplyScreen?: boolean

package/src/components/conversations/conversations.tsx

@@ -3,12 +3,11 @@ import React, { useMemo } from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
 import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
-import { useCanCreateConversations } from '../../hooks/use_chat_permissions'
 import { useConversationsJoltEvents } from '../../hooks/use_conversations_jolt_events'
 import { ConversationResource } from '../../types'
 import { throwResponseError } from '../../utils/response_error'
+import BlankState from '../primitive/blank_state_primitive'
 import { ConversationPreview, ConversationPreviewSkeleton } from './conversation_preview'
-import { ConversationsBlankState } from './conversations_blank_state'
 
 interface ConversationsProps {
   ListHeaderComponent?:
@@ -29,11 +28,9 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
     isFetched,
     isError,
     error,
-    args: { chat_group_graph_id, group_source_app_name },
+    args: { chat_group_graph_id },
   } = useConversationsContext()
   const navigation = useNavigation()
-  const canCreateConversations = useCanCreateConversations()
-  const isFilterApplied = !!chat_group_graph_id || !!group_source_app_name
 
   const showBadges = !chat_group_graph_id
 
@@ -64,10 +61,14 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
         refreshing={!isFetched && isRefetching}
         ListHeaderComponent={ListHeaderComponent}
         ListEmptyComponent={
-          <ConversationsBlankState
-            isFilterApplied={isFilterApplied}
-            canCreateConversations={canCreateConversations}
-          />
+          <View style={styles.listEmpty}>
+            <BlankState.Root>
+              <BlankState.Imagery name="general.outlinedTextMessage" />
+              <BlankState.Content>
+                <BlankState.Heading>No conversations</BlankState.Heading>
+              </BlankState.Content>
+            </BlankState.Root>
+          </View>
         }
         renderItem={({ item }) => {
           if (item.type === 'loading') {
@@ -103,6 +104,12 @@ const useStyles = () => {
     container: { flex: 1 },
     contentContainer: { paddingVertical: 16 },
     listItem: { color: colors.fillColorNeutral020 },
+    listEmpty: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: 32,
+    },
   })
 }
 

package/src/contexts/conversation_context.tsx

@@ -1,59 +1,31 @@
-import React, { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react'
+import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react'
 
 interface ConversationContextValue {
   conversationId: number
   currentPageReplyRootId: string | null
-  initialMessageId: string | null
-  setInitialMessageId: (id: string | null) => void
-  initialMessageIdIsAnchor: boolean
-  atEndOfMessageHistory: boolean
-  setAtEndOfMessageHistory: (atEnd: boolean) => void
 }
 
 interface ConversationContextProviderProps extends PropsWithChildren {
   conversationId: number
   currentPageReplyRootId: string | null
-  initialMessageId?: string | null
-  initialMessageIdIsAnchor?: boolean
 }
 
 const ConversationContext = createContext<ConversationContextValue>({
   conversationId: 0,
   currentPageReplyRootId: null,
-  initialMessageId: null,
-  setInitialMessageId: () => {},
-  initialMessageIdIsAnchor: false,
-  atEndOfMessageHistory: false,
-  setAtEndOfMessageHistory: () => {},
 })
 
 export const ConversationContextProvider = ({
   children,
   conversationId,
   currentPageReplyRootId,
-  initialMessageId: initialMessageIdProp = null,
-  initialMessageIdIsAnchor = false,
 }: ConversationContextProviderProps) => {
-  const [initialMessageId, setInitialMessageId] = useState(initialMessageIdProp)
-  const [atEndOfMessageHistory, setAtEndOfMessageHistory] = useState(false)
-
   const value = useMemo(
     () => ({
       conversationId,
       currentPageReplyRootId,
-      initialMessageId,
-      setInitialMessageId,
-      initialMessageIdIsAnchor,
-      atEndOfMessageHistory,
-      setAtEndOfMessageHistory,
     }),
-    [
-      conversationId,
-      currentPageReplyRootId,
-      initialMessageId,
-      initialMessageIdIsAnchor,
-      atEndOfMessageHistory,
-    ]
+    [conversationId, currentPageReplyRootId]
   )
 
   return <ConversationContext.Provider value={value}>{children}</ConversationContext.Provider>

package/src/hooks/use_attachment_uploader.ts

@@ -1,16 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ApiResource, CurrentPersonResource } from '../types'
-import { AttachmentFlaggedEvent } from '../types/jolt_events/attachment_events'
+import { ApiResource } from '../types'
 import {
   FileAttachment,
   FileUploadState,
   NativeAttachmentFile,
 } from '../types/resources/denormalized_attachment_resource_for_create'
-import { useApiGet } from './use_api'
 import { useApiClient } from './use_api_client'
 import { useChatConfiguration } from './use_chat_configuration'
-import { currentPersonRequestArgs } from './use_current_person'
-import { useJoltChannel, useJoltEvent } from './use_jolt'
 import { useUploadClient } from './use_upload_client'
 
 export interface FileError {
@@ -36,15 +32,6 @@ export function useAttachmentUploader({
   const numberOfAttachments = attachments.length
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
-  const { data: currentPerson } = useApiGet<CurrentPersonResource>(currentPersonRequestArgs)
-  const joltChannel = useJoltChannel(`chat.people.${currentPerson?.id}`, Boolean(currentPerson?.id))
-  useJoltEvent(joltChannel, 'attachment.flagged', (e: AttachmentFlaggedEvent) => {
-    const flaggedId = e.data.data.attachment_id
-    setAttachments(prev =>
-      prev.map(a => (a.id === flaggedId ? { ...a, flagged: true, status: 'error' } : a))
-    )
-  })
-
   const handleFilesAttached = useCallback(
     (files: NativeAttachmentFile[]) => {
       const fileErrors = {} as FileError

package/src/hooks/use_conversation_messages.ts

@@ -1,128 +1,28 @@
-import {
-  AnyUseSuspenseInfiniteQueryOptions,
-  InfiniteData,
-  useQueryClient,
-  useSuspenseInfiniteQuery,
-  useSuspenseQueries,
-} from '@tanstack/react-query'
-import { useCallback, useMemo } from 'react'
-import { useConversationContext } from '../contexts/conversation_context'
-import { ApiCollection, MessageResource } from '../types'
-import {
-  anchoredSeedPageParams,
-  MessagesPageParam,
-  newerPageParam,
-  olderPageParam,
-  sortAndFilterMessages,
-} from '../utils/conversation_messages'
+import { useMemo } from 'react'
+import { MessageResource } from '../types'
 import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
-import { useApiClient } from './use_api_client'
-import { throwResponseError } from './use_suspense_api'
-
-type Args = { conversation_id: number; reply_root_id?: string | null }
-
-export type ConversationMessagesOptions = Omit<
-  AnyUseSuspenseInfiniteQueryOptions,
-  | 'getNextPageParam'
-  | 'getPreviousPageParam'
-  | 'initialData'
-  | 'initialPageParam'
-  | 'queryFn'
-  | 'queryKey'
->
+import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
 
 export const useConversationMessages = (
-  { conversation_id, reply_root_id }: Args,
-  opts?: ConversationMessagesOptions
+  { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string | null },
+  opts?: SuspensePaginatorOptions
 ) => {
-  const apiClient = useApiClient()
-  const { initialMessageId } = useConversationContext()
-  const anchored = !reply_root_id && !!initialMessageId
-
-  const requestArgs = useMemo(
-    () => getMessagesRequestArgs({ conversation_id, reply_root_id }),
-    [conversation_id, reply_root_id]
+  const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>(
+    getMessagesRequestArgs({ conversation_id, reply_root_id }),
+    opts
   )
-  const queryKey = useMemo(
-    () => getMessagesQueryKey({ conversation_id, reply_root_id }),
-    [conversation_id, reply_root_id]
-  )
-
-  const fetchPage = (pageParam: MessagesPageParam) => {
-    const data = {
-      ...requestArgs.data,
-      ...(pageParam.where ? { where: pageParam.where } : {}),
-      ...(pageParam.order ? { order: pageParam.order } : {}),
-    }
-    return apiClient.chat
-      .get<ApiCollection<MessageResource>>({ url: requestArgs.url, data })
-      .catch(throwResponseError)
-  }
-
-  const seedPageParams = anchored ? anchoredSeedPageParams(initialMessageId) : []
-  const seedQueries = useSuspenseQueries({
-    queries: seedPageParams.map((pageParam, index) => ({
-      queryKey: [...queryKey, 'seed', index],
-      queryFn: () => fetchPage(pageParam),
-      staleTime: Infinity,
-      gcTime: 0,
-    })),
-  })
-
-  const initialData: InfiniteData<ApiCollection<MessageResource>, MessagesPageParam> | undefined =
-    anchored
-      ? {
-          pages: seedQueries.map(q => q.data),
-          pageParams: seedPageParams,
-        }
-      : undefined
-
-  const initialPageParam: MessagesPageParam = anchored ? seedPageParams[0] : {}
-
-  const {
-    data,
-    refetch,
-    isRefetching,
-    fetchNextPage,
-    hasNextPage,
-    fetchPreviousPage,
-    hasPreviousPage,
-    isFetchingPreviousPage,
-  } = useSuspenseInfiniteQuery<
-    ApiCollection<MessageResource>,
-    Response,
-    InfiniteData<ApiCollection<MessageResource>, MessagesPageParam>,
-    typeof queryKey,
-    MessagesPageParam
-  >({
-    queryKey,
-    queryFn: ({ pageParam }) => fetchPage(pageParam),
-    initialPageParam,
-    initialData,
-    getNextPageParam: olderPageParam,
-    getPreviousPageParam: anchored ? newerPageParam : () => undefined,
-    ...(opts || {}),
-    ...(anchored ? { staleTime: Infinity, refetchOnMount: false } : {}),
-  })
-
-  const messages = useMemo(() => sortAndFilterMessages(data.pages), [data.pages])
-
-  const queryClient = useQueryClient()
-  const cancelFetchNewerMessages = useCallback(
-    () => queryClient.cancelQueries({ queryKey }),
-    [queryClient, queryKey]
+  const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
+  const messages = useMemo(
+    () =>
+      data
+        .filter(
+          message =>
+            (!message.deletedAt || message.replyRootId) &&
+            (message.attachments?.length || message.text?.length)
+        )
+        .sort((a, b) => -a.id.localeCompare(b.id)),
+    [data]
   )
 
-  return {
-    messages,
-    refetch,
-    isRefetching,
-    fetchOlderMessages: fetchNextPage,
-    hasMoreOlderMessages: hasNextPage,
-    fetchNewerMessages: fetchPreviousPage,
-    hasMoreNewerMessages: hasPreviousPage,
-    isFetchingNewerMessages: isFetchingPreviousPage,
-    cancelFetchNewerMessages,
-    queryKey,
-  }
+  return { messages, refetch, isRefetching, fetchNextPage, queryKey }
 }

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -12,7 +12,6 @@ import {
   updateCacheWithIndividualMessage,
   updateCacheWithReaction,
   getThreadedMessagesQueryKey,
-  hasUnloadedNewerPages,
 } from '../utils/cache/messages_cache'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
 import { completeMessageCreationTracking } from '../utils/performance_tracking'
@@ -53,10 +52,10 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       }
     }
 
-    if (e.event === 'message.updated' || !hasUnloadedNewerPages(queryClient, messagesQueryKey)) {
-      updateCacheWithMessage(queryClient, messagesQueryKey, message, e.event)
-    }
+    // Update the main conversation cache
+    updateCacheWithMessage(queryClient, messagesQueryKey, message, e.event)
 
+    // If message has a reply_root_id, also update the threaded cache
     if (data.reply_root_id) {
       const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
         conversationId,

package/src/hooks/use_conversations_actions.ts

@@ -98,21 +98,6 @@ export const useConversationsMute = ({ conversation }: { conversation: Conversat
   }
 }
 
-export const useConversationsMarkReadUpTo = ({ conversationId }: { conversationId: number }) => {
-  const apiClient = useApiClient()
-
-  return useMutation({
-    mutationKey: ['markReadUpTo', conversationId],
-    mutationFn: async ({ sortKey }: { sortKey: string }) =>
-      apiClient.chat.post({
-        url: `/me/conversations/${conversationId}/mark_read_up_to`,
-        data: {
-          data: { type: 'Conversation', attributes: { sort_key: sortKey } },
-        },
-      }),
-  })
-}
-
 export const useMarkAllRead = () => {
   const apiClient = useApiClient()
   const { args } = useConversationsContext()

package/src/hooks/use_features.ts

@@ -40,9 +40,7 @@ export const availableFeatures = {
   message_reporting: 'ROLLOUT_MOBILE_message_reporting',
   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',
-  video_moderation: 'ROLLOUT_MOBILE_video_moderation',
 } as const satisfies Record<string, `ROLLOUT_${string}`>
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/hooks/use_mark_latest_message_read.ts

@@ -1,19 +1,15 @@
 import { debounce } from 'lodash'
 import { useEffect, useMemo, useRef } from 'react'
-import { useConversationContext } from '../contexts/conversation_context'
 import { ConversationResource, MessageResource } from '../types'
 import { useAppState } from './use_app_state'
 import { useConversationsMarkRead } from './use_conversations_actions'
-import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
 
 interface Props {
   conversation: ConversationResource
-  messages?: MessageResource[]
+  messages: MessageResource[]
 }
 
 export function useMarkLatestMessageRead({ conversation }: Props) {
-  const { jumpToUnreadActive } = useJumpToUnreadGates()
-  const { currentPageReplyRootId, atEndOfMessageHistory } = useConversationContext()
   const firedOnce = useRef<boolean>(false)
   const { markRead } = useConversationsMarkRead({ conversation })
   const debouncedMarkRead = useMemo(
@@ -29,20 +25,10 @@ export function useMarkLatestMessageRead({ conversation }: Props) {
 
   useEffect(() => {
     if (!isActive || !shouldMarkRead) return
-    if (currentPageReplyRootId) return
-    if (jumpToUnreadActive && !atEndOfMessageHistory) return
 
     firedOnce.current = true
 
     debouncedMarkRead(true)
     // keeping unreadReactionCount in the dependency array to watch for changes
-  }, [
-    debouncedMarkRead,
-    isActive,
-    shouldMarkRead,
-    unreadReactionCount,
-    currentPageReplyRootId,
-    jumpToUnreadActive,
-    atEndOfMessageHistory,
-  ])
+  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReactionCount])
 }

package/src/hooks/use_suspense_api.ts

@@ -90,7 +90,7 @@ export const useSuspensePaginator = <T extends ResourceObject>(
   return { ...query, data, totalCount }
 }
 
-export const throwResponseError = (error: unknown) => {
+const throwResponseError = (error: unknown) => {
   if (error instanceof Response) {
     throw new ResponseError(error as FailedResponse)
   }

package/src/hooks/use_upload_client.ts

@@ -2,7 +2,6 @@ import { useContext, useMemo } from 'react'
 import { ChatContext } from '../contexts/chat_context'
 import { Client } from '../utils'
 import { UploadUri } from '../utils/upload_uri'
-import { availableFeatures, useFeatures } from './use_features'
 
 export interface FileForUploadClient {
   uri: string
@@ -12,8 +11,6 @@ export interface FileForUploadClient {
 
 export const useUploadClient = () => {
   const { session, onUnauthorizedResponse } = useContext(ChatContext)
-  const { featureEnabled } = useFeatures()
-  const videoModerationEnabled = featureEnabled(availableFeatures.video_moderation)
 
   const uri = useMemo(() => new UploadUri({ session }), [session])
 
@@ -24,25 +21,14 @@ export const useUploadClient = () => {
         root: uri.baseUrl,
         defaultHeaders: uri.headers,
         onUnauthorizedResponse,
-        videoModerationEnabled,
       }),
-    [uri, onUnauthorizedResponse, videoModerationEnabled]
+    [uri, onUnauthorizedResponse]
   )
 
   return api
 }
 
 class UploadClient extends Client {
-  private videoModerationEnabled: boolean
-
-  constructor({
-    videoModerationEnabled,
-    ...rest
-  }: ConstructorParameters<typeof Client>[0] & { videoModerationEnabled: boolean }) {
-    super(rest)
-    this.videoModerationEnabled = videoModerationEnabled
-  }
-
   async uploadFile(file: FileForUploadClient): Promise<UploadedResource> {
     const formData = new FormData()
     formData.append('file', {
@@ -54,10 +40,6 @@ class UploadClient extends Client {
     const headers: RequestInit['headers'] = { ...this.headers }
     delete headers['Content-Type']
 
-    if (this.videoModerationEnabled && file.type.startsWith('video/')) {
-      headers['X-PCO-Moderate-Video'] = 'true'
-    }
-
     const response = await fetch(`${this.root}/v2/files`, {
       method: 'POST',
       headers,

package/src/jest.ts

@@ -16,6 +16,6 @@
  */
 export const jestTransformPackages = [
   '@planningcenter/chat-react-native',
-  '@planningcenter/emoji-keyboard',
   '@fortawesome',
+  'rn-emoji-keyboard',
 ]

package/src/screens/age_check/age_check_underage_screen.tsx

@@ -31,7 +31,7 @@ export function AgeCheckUnderageScreen({ contactEmail }: AgeCheckUnderageScreenP
 
       <View style={styles.content}>
         <Heading variant="h3" style={styles.baseText}>
-          Chat is only available for users 13 and older.
+          Your age does not meet the minimum safety requirements to use chat.
         </Heading>
         <Text variant="tertiary" style={styles.baseText}>
           If you submitted the wrong birthdate by accident,{` `}

package/src/screens/avatar_picker/emoji_tab.tsx

@@ -1,11 +1,15 @@
-import { EmojiKeyboard, emojisByCategory, type EmojiType } from '@planningcenter/emoji-keyboard'
 import React, { useCallback } from 'react'
 import { StyleSheet, View } from 'react-native'
+import { EmojiKeyboard, type EmojiType, type EmojisByCategory } from 'rn-emoji-keyboard'
+// rn-emoji-keyboard exposes no public exclusion API, so we reach into its
+// internal src/ tree for the emoji JSON. Version is pinned in package.json
+// — verify this path still resolves before bumping rn-emoji-keyboard.
+import emojiData from 'rn-emoji-keyboard/src/assets/emojis.json'
 import { useTheme } from '../../hooks'
 
 const BLOCKED_EMOJIS = new Set(['🖕'])
 
-const filteredEmojis = emojisByCategory.map(category => ({
+const filteredEmojis = (emojiData as EmojisByCategory[]).map(category => ({
   ...category,
   data: category.data.filter(e => !BLOCKED_EMOJIS.has(e.emoji)),
 }))