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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.37.0",
+  "version": "3.37.1-qa-736.0",
   "description": "",
   "main": "build/index.js",
   "react-native": "./src/index.tsx",
@@ -26,9 +26,9 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
+    "@planningcenter/emoji-keyboard": "3.37.1-qa-736.0",
     "lodash-inflection": "^1.5.0",
-    "react-compiler-runtime": "^1.0.0",
-    "rn-emoji-keyboard": "1.7.0"
+    "react-compiler-runtime": "^1.0.0"
   },
   "peerDependencies": {
     "@planningcenter/datetime-fmt": ">=2.0.0",
@@ -72,5 +72,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "~5.9.2"
   },
-  "gitHead": "92b7794327766bd515c3f0b0f4da647b9c06207f"
+  "gitHead": "85e2929d9a7469bd305a1d534ecb401647f3d39f"
 }

package/src/__tests__/hooks/use_attachment_uploader.test.tsx

@@ -11,6 +11,16 @@ import { FileAttachment } from '../../types/resources/denormalized_attachment_re
 jest.mock('../../hooks/use_api_client')
 jest.mock('../../hooks/use_upload_client')
 jest.mock('../../hooks/use_chat_configuration')
+jest.mock('../../hooks/use_api', () => ({
+  useApiGet: jest.fn().mockReturnValue({ data: { id: 1 } }),
+}))
+const joltEventCallbacks: Record<string, (e: unknown) => void> = {}
+jest.mock('../../hooks/use_jolt', () => ({
+  useJoltChannel: jest.fn().mockReturnValue('channel-stub'),
+  useJoltEvent: jest.fn((_channel, eventName, callback) => {
+    joltEventCallbacks[eventName] = callback
+  }),
+}))
 
 const mockedUseApiClient = useApiClient as jest.MockedFunction<typeof useApiClient>
 const mockedUseUploadClient = useUploadClient as jest.MockedFunction<typeof useUploadClient>
@@ -217,4 +227,30 @@ describe('useAttachmentUploader', () => {
       expect(result.current.flaggedAttachmentCount).toBe(1)
     })
   })
+
+  describe('attachment.flagged jolt event', () => {
+    it('flips the matching attachment to flagged + error when the event fires', () => {
+      const { result } = renderUploader({
+        draftAttachments: [draftAttachment('clip.mp4')],
+      })
+
+      act(() => {
+        joltEventCallbacks['attachment.flagged']({
+          event: 'attachment.flagged',
+          data: {
+            data: {
+              attachment_id: 'att-clip.mp4',
+              conversation_id: 1,
+              content_type: 'video/mp4',
+            },
+          },
+        })
+      })
+
+      const flagged = result.current.attachments.find(a => a.id === 'att-clip.mp4')
+      expect(flagged?.flagged).toBe(true)
+      expect(flagged?.status).toBe('error')
+      expect(result.current.flaggedAttachmentCount).toBe(1)
+    })
+  })
 })

package/src/__tests__/jest.ts

@@ -4,8 +4,8 @@ describe('jestTransformPackages', () => {
   it('exports an array of package patterns', () => {
     expect(jestTransformPackages).toEqual([
       '@planningcenter/chat-react-native',
+      '@planningcenter/emoji-keyboard',
       '@fortawesome',
-      'rn-emoji-keyboard',
     ])
   })
 })

package/src/components/conversation/__tests__/message_list.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react-native'
+import { createRef } from 'react'
+import { FlatList } from 'react-native-gesture-handler'
+import { MessageList } from '../message_list'
+
+describe('MessageList', () => {
+  it('renders with the gesture-handler FlatList so overscroll cannot drag an enclosing sheet', () => {
+    const listRef = createRef<FlatList>()
+
+    const screen = render(<MessageList listRef={listRef} data={[]} renderItem={() => null} />)
+
+    expect(screen.UNSAFE_getByType(FlatList)).toBeTruthy()
+  })
+})

package/src/components/conversation/message_form.tsx

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

package/src/components/conversation/message_list.tsx

@@ -0,0 +1,42 @@
+import { RefObject } from 'react'
+import { StyleSheet, type FlatListProps } from 'react-native'
+import { FlatList } from 'react-native-gesture-handler'
+import type { EnrichedMessage } from '../../utils/group_messages'
+
+const extractItemKey = (item: EnrichedMessage) => String(item.id)
+const maintainVisibleContentPosition = { minIndexForVisible: 0 }
+
+type MessageListProps = Pick<
+  FlatListProps<EnrichedMessage>,
+  | 'data'
+  | 'renderItem'
+  | 'onScroll'
+  | 'onScrollBeginDrag'
+  | 'viewabilityConfigCallbackPairs'
+  | 'onContentSizeChange'
+  | 'onScrollToIndexFailed'
+  | 'onEndReached'
+  | 'ListHeaderComponent'
+> & {
+  listRef: RefObject<FlatList | null>
+}
+
+export function MessageList({ listRef, ...props }: MessageListProps) {
+  return (
+    <FlatList
+      inverted
+      ref={listRef}
+      contentContainerStyle={styles.listContainer}
+      maintainVisibleContentPosition={maintainVisibleContentPosition}
+      keyExtractor={extractItemKey}
+      scrollEventThrottle={64}
+      {...props}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  listContainer: {
+    paddingVertical: 12,
+  },
+})

package/src/components/conversations/conversations.tsx

@@ -3,11 +3,12 @@ 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?:
@@ -28,9 +29,11 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
     isFetched,
     isError,
     error,
-    args: { chat_group_graph_id },
+    args: { chat_group_graph_id, group_source_app_name },
   } = useConversationsContext()
   const navigation = useNavigation()
+  const canCreateConversations = useCanCreateConversations()
+  const isFilterApplied = !!chat_group_graph_id || !!group_source_app_name
 
   const showBadges = !chat_group_graph_id
 
@@ -61,14 +64,10 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
         refreshing={!isFetched && isRefetching}
         ListHeaderComponent={ListHeaderComponent}
         ListEmptyComponent={
-          <View style={styles.listEmpty}>
-            <BlankState.Root>
-              <BlankState.Imagery name="general.outlinedTextMessage" />
-              <BlankState.Content>
-                <BlankState.Heading>No conversations</BlankState.Heading>
-              </BlankState.Content>
-            </BlankState.Root>
-          </View>
+          <ConversationsBlankState
+            isFilterApplied={isFilterApplied}
+            canCreateConversations={canCreateConversations}
+          />
         }
         renderItem={({ item }) => {
           if (item.type === 'loading') {
@@ -104,12 +103,6 @@ const useStyles = () => {
     container: { flex: 1 },
     contentContainer: { paddingVertical: 16 },
     listItem: { color: colors.fillColorNeutral020 },
-    listEmpty: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      paddingVertical: 32,
-    },
   })
 }
 

package/src/components/conversations/conversations_blank_state.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import BlankState from '../primitive/blank_state_primitive'
+
+interface ConversationsBlankStateProps {
+  isFilterApplied: boolean
+  canCreateConversations: boolean
+}
+
+export function ConversationsBlankState({
+  isFilterApplied,
+  canCreateConversations,
+}: ConversationsBlankStateProps) {
+  return (
+    <View style={styles.container}>
+      <BlankState.Root>
+        <BlankState.Imagery name="general.outlinedTextMessage" />
+        <BlankState.Content>
+          <BlankState.Heading>No conversations yet.</BlankState.Heading>
+          {isFilterApplied ? (
+            <BlankState.Text>Adjust your filters to find conversations.</BlankState.Text>
+          ) : canCreateConversations ? (
+            <BlankState.Text>Tap the compose button to get started.</BlankState.Text>
+          ) : (
+            <BlankState.Text>
+              When your groups or teams start chatting, you&rsquo;ll find them here.
+            </BlankState.Text>
+          )}
+        </BlankState.Content>
+      </BlankState.Root>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 32,
+  },
+})

package/src/hooks/use_attachment_uploader.ts

@@ -1,12 +1,16 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ApiResource } from '../types'
+import { ApiResource, CurrentPersonResource } from '../types'
+import { AttachmentFlaggedEvent } from '../types/jolt_events/attachment_events'
 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 {
@@ -32,6 +36,15 @@ 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_features.ts

@@ -42,6 +42,7 @@ export const availableFeatures = {
   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_upload_client.ts

@@ -2,6 +2,7 @@ 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
@@ -11,6 +12,8 @@ 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])
 
@@ -21,14 +24,25 @@ export const useUploadClient = () => {
         root: uri.baseUrl,
         defaultHeaders: uri.headers,
         onUnauthorizedResponse,
+        videoModerationEnabled,
       }),
-    [uri, onUnauthorizedResponse]
+    [uri, onUnauthorizedResponse, videoModerationEnabled]
   )
 
   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', {
@@ -40,6 +54,10 @@ 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}>
-          Your age does not meet the minimum safety requirements to use chat.
+          Chat is only available for users 13 and older.
         </Heading>
         <Text variant="tertiary" style={styles.baseText}>
           If you submitted the wrong birthdate by accident,{` `}

package/src/screens/avatar_picker/emoji_tab.tsx

@@ -1,15 +1,11 @@
+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 = (emojiData as EmojisByCategory[]).map(category => ({
+const filteredEmojis = emojisByCategory.map(category => ({
   ...category,
   data: category.data.filter(e => !BLOCKED_EMOJIS.has(e.emoji)),
 }))

package/src/screens/conversation_screen.tsx

@@ -9,7 +9,8 @@ import {
   useRoute,
 } from '@react-navigation/native'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ActivityIndicator, FlatList, Platform, StyleSheet, View } from 'react-native'
+import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'
+import type { FlatList } from 'react-native-gesture-handler'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
@@ -17,6 +18,7 @@ import { EmptyConversationBlankState } from '../components/conversation/empty_co
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
+import { MessageList } from '../components/conversation/message_list'
 import {
   ConversationDisabledBanner,
   LeaderMessagesDisabledBanner,
@@ -85,9 +87,6 @@ export type ConversationRouteProps = {
 
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
-const extractItemKey = (item: EnrichedMessage) => String(item.id)
-const maintainVisibleContentPosition = { minIndexForVisible: 0 }
-
 export function ConversationScreen({ route }: ConversationScreenProps) {
   const { conversation_id, message_id, reply_root_id } = route.params
 
@@ -300,16 +299,11 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
         {noMessages ? (
           <EmptyConversationBlankState />
         ) : (
-          <FlatList
-            inverted
-            ref={listRef}
-            contentContainerStyle={styles.listContainer}
-            maintainVisibleContentPosition={maintainVisibleContentPosition}
+          <MessageList
+            listRef={listRef}
             data={items}
-            keyExtractor={extractItemKey}
             onScroll={onScroll}
             onScrollBeginDrag={onScrollBeginDrag}
-            scrollEventThrottle={64}
             viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs}
             onContentSizeChange={onContentSizeChange}
             onScrollToIndexFailed={onScrollToIndexFailed}
@@ -499,9 +493,6 @@ const useStyles = () => {
       backgroundColor: navigationTheme.colors.card,
       paddingBottom: bottom,
     },
-    listContainer: {
-      paddingVertical: 12,
-    },
     listHeader: {
       // Just whitespace to provide space where the typing indicator can be
       height: 16,

package/src/types/jolt_events/attachment_events.ts

@@ -0,0 +1,14 @@
+import type { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'
+
+interface AttachmentFlaggedEventData extends Record<string, unknown> {
+  data: {
+    attachment_id: string
+    conversation_id: number
+    content_type: string
+  }
+}
+
+export interface AttachmentFlaggedEvent extends CustomMessage {
+  event: 'attachment.flagged'
+  data: AttachmentFlaggedEventData
+}

package/src/types/jolt_events/index.ts

@@ -1,3 +1,4 @@
+import type { AttachmentFlaggedEvent } from './attachment_events'
 import type {
   ConversationCreatedEvent,
   ConversationDeletedEvent,
@@ -20,12 +21,14 @@ export type JoltConversationEvent =
 export type JoltMessageEvent = MessageCreatedEvent | MessageUpdatedEvent | MessageDeletedEvent
 export type JoltReactionEvent = ReactionCreatedEvent | ReactionDeletedEvent
 export type JoltTypingEvent = TypingBroadcastEvent
+export type JoltAttachmentEvent = AttachmentFlaggedEvent
 
 export type CustomJoltEvent =
   | JoltConversationEvent
   | JoltMessageEvent
   | JoltReactionEvent
   | JoltTypingEvent
+  | JoltAttachmentEvent
 
 export type JoltEventName = CustomJoltEvent['event'] | 'STREAM_USER_UPDATED'
 export type JoltSubscriptionPattern = JoltEventName | 'reaction.*'