@planningcenter/chat-react-native 4.4.1-qa-staging.8 → 4.4.1-qa-staging.10

package/src/components/conversations/__tests__/conversation_preview.test.tsx

@@ -0,0 +1,70 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import type { ConversationPreviewData, ConversationResource } from '../../../types'
+import { formatDatePreview } from '../../../utils/date'
+import { ConversationPreview } from '../conversation_preview'
+
+jest.mock('../conversation_actions', () => ({
+  ConversationActions: ({
+    children,
+    accessibilityLabel,
+  }: {
+    children: React.ReactNode
+    accessibilityLabel?: string
+  }) => {
+    const { View: MockView } = jest.requireActual('react-native')
+    return <MockView accessibilityLabel={accessibilityLabel}>{children}</MockView>
+  },
+}))
+
+const createdAt = '2026-03-04T15:30:00Z'
+
+const conversation = (conversationPreview: ConversationPreviewData): ConversationResource => ({
+  type: 'Conversation',
+  id: 7,
+  title: 'Worship Team',
+  conversationPreview,
+  createdAt,
+  lastMessageCreatedAt: createdAt,
+  muted: false,
+  repliesDisabled: false,
+  unreadCount: 0,
+  unreadReaction: false,
+  updatedAt: createdAt,
+})
+
+const renderPreview = (preview: ConversationPreviewData) =>
+  render(<ConversationPreview conversation={conversation(preview)} onPress={jest.fn()} />)
+
+describe('ConversationPreview', () => {
+  it('prefixes message previews with the author', () => {
+    const view = renderPreview({
+      kind: 'message',
+      authorName: 'Ada Lovelace',
+      value: null,
+      text: 'See you Sunday',
+      createdAt,
+    })
+
+    expect(view.getByText('Ada Lovelace: See you Sunday')).toBeTruthy()
+  })
+
+  it('shows system previews as their text alone', () => {
+    const text = 'This conversation was unarchived by Ada Lovelace'
+    const view = renderPreview({
+      kind: 'system',
+      authorName: 'System',
+      value: null,
+      text,
+      createdAt,
+    })
+
+    expect(view.getByText(text)).toBeTruthy()
+    expect(view.queryByText('System', { exact: false })).toBeNull()
+    expect(
+      view.getByLabelText(
+        `Select Worship Team, Latest activity: ${text} at ${formatDatePreview(createdAt)}`
+      )
+    ).toBeTruthy()
+  })
+})

package/src/components/conversations/conversation_preview.tsx

@@ -168,6 +168,8 @@ function reactionEmoji(value: ConversationPreviewData['value']): string | null {
 }
 
 function formatConversationPreviewText(preview: ConversationPreviewData) {
+  if (preview.kind === 'system') return preview.text
+
   if (preview.kind === 'reaction') {
     const emoji = reactionEmoji(preview.value)
     return `${preview.authorName}${emoji ? ` ${emoji}` : ' reacted'} to: "${preview.text}"`
@@ -179,6 +181,8 @@ function formatConversationPreviewText(preview: ConversationPreviewData) {
 function formatConversationPreviewAccessibilityLabel(preview: ConversationPreviewData) {
   const date = formatDatePreview(preview.createdAt)
 
+  if (preview.kind === 'system') return `Latest activity: ${preview.text} at ${date}`
+
   if (preview.kind === 'reaction') {
     return `${preview.authorName} reacted to your message sent ${date} and says ${preview.text}`
   }

package/src/hooks/use_features.ts

@@ -57,6 +57,8 @@ export const availableFeatures = {
   dm_search_clear_fix: 'ROLLOUT_MOBILE_dm_search_clear_fix',
   search: 'QA_MOBILE_search',
   search_rollout: 'ROLLOUT_MOBILE_search',
+  filter_dropdown: 'QA_MOBILE_filter_dropdown',
+  filter_dropdown_rollout: 'ROLLOUT_MOBILE_filter_dropdown',
   manual_archiving: 'QA_MOBILE_manual_archiving',
   manual_archiving_rollout: 'ROLLOUT_MOBILE_manual_archiving',
 } as const satisfies Record<string, `${'QA' | 'ROLLOUT'}_${string}`>

package/src/hooks/use_filter_dropdown_enabled.ts

@@ -0,0 +1,10 @@
+import { availableFeatures, useFeatures } from './use_features'
+
+export function useFilterDropdownEnabled() {
+  const { featureEnabled } = useFeatures()
+
+  return (
+    featureEnabled(availableFeatures.filter_dropdown) ||
+    featureEnabled(availableFeatures.filter_dropdown_rollout)
+  )
+}

package/src/types/jolt_events/message_events.ts

@@ -1,5 +1,6 @@
 import type { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'
 import { DenormalizedAttachmentResource } from '../resources/denormalized_attachment_resource'
+import type { SystemTextFormat } from '../resources/message'
 
 interface BaseMessageEventData extends Record<string, unknown> {
   data: {
@@ -21,6 +22,7 @@ interface BaseMessageEventData extends Record<string, unknown> {
     message_type: string
     system_event_person_ids: number[] | null
     system_text_parts: { names: string[]; overflow_count: number; action: string } | null
+    system_text_format: SystemTextFormat | null
   }
 }
 

package/src/types/resources/conversation.ts

@@ -6,7 +6,7 @@ import { MemberAbilityResource } from './member_ability'
 import { ReactionCountResource } from './reaction'
 
 export interface ConversationPreviewData {
-  kind: 'reaction' | 'message'
+  kind: 'reaction' | 'message' | 'system'
   authorName: string
   value: ReactionCountResource['value'] | null
   text: string

package/src/types/resources/message.ts

@@ -3,6 +3,8 @@ import { DenormalizedAttachmentResourceForCreate } from './denormalized_attachme
 import type { PersonResource } from './person'
 import type { ReactionCountResource } from './reaction'
 
+export type SystemTextFormat = 'people' | 'actor'
+
 export interface MessageResource {
   type: 'Message'
   id: string
@@ -22,6 +24,7 @@ export interface MessageResource {
   messageType: string
   personIdsForSystemEvent?: number[] | null
   systemTextParts?: { names: string[]; overflowCount: number; action: string } | null
+  systemTextFormat?: SystemTextFormat | null
 
   // Custom Local Properties we set for rendering
   renderAuthor?: boolean

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

@@ -0,0 +1,19 @@
+import { formatEventDateTime } from '../date'
+
+describe('formatEventDateTime', () => {
+  beforeEach(() => {
+    jest.useFakeTimers({ now: new Date(2026, 5, 15, 12, 0) })
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('leaves out the year for dates in the current year', () => {
+    expect(formatEventDateTime(new Date(2026, 1, 3, 14, 18))).toBe('Feb 3 at 2:18pm')
+  })
+
+  it('includes the year for dates in other years', () => {
+    expect(formatEventDateTime(new Date(2025, 1, 3, 14, 18))).toBe('Feb 3, 2025 at 2:18pm')
+  })
+})

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

@@ -206,6 +206,7 @@ describe('groupMessages — system messages', () => {
     const messages = [
       message('sys', {
         messageType: 'user_joined',
+        systemTextFormat: 'people',
         systemTextParts: { names: ['A'], overflowCount: 0, action: 'joined' },
         personIdsForSystemEvent: [1],
       }),

package/src/utils/date.ts

@@ -1,4 +1,4 @@
-import { date as formatDate } from '@planningcenter/datetime-fmt'
+import { date as formatDate, time as formatTime } from '@planningcenter/datetime-fmt'
 import dayjs from './dayjs'
 
 export type DateProps = string | number | Date
@@ -61,3 +61,10 @@ export function relativeTime(date: DateProps): string {
     return dayjs(date).format('h:mma')
   }
 }
+
+export function formatEventDateTime(date: DateProps) {
+  const { isThisYear } = getRelativeDateStatus(date)
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  const day = formatDate(date, { style: 'abbreviated', year: !isThisYear, timeZone })
+  return `${day} at ${formatTime(date, { timeZone })}`
+}

package/src/utils/jolt/__tests__/transform_message_event_data_to_message_resource.test.ts

@@ -0,0 +1,35 @@
+import type { MessageCreatedEvent } from '../../../types/jolt_events/message_events'
+import { isSystemMessage } from '../../system_messages'
+import { transformMessageEventDataToMessageResource } from '../transform_message_event_data_to_message_resource'
+
+const archivedEventData: MessageCreatedEvent['data']['data'] = {
+  author_avatar: '',
+  author_id: 1,
+  author_name: 'Wes',
+  conversation_id: 1,
+  created_at: '2026-01-01T00:00:00Z',
+  deleted_at: null,
+  organization_id: 1,
+  sort_key: '01J0000000000000000000001',
+  text: 'This conversation was archived by Wes',
+  text_edited_at: null,
+  html: '',
+  attachments: [],
+  reply_count: 0,
+  reply_root_id: null,
+  message_type: 'conversation_archived',
+  system_event_person_ids: [1],
+  system_text_parts: null,
+  system_text_format: 'actor',
+}
+
+describe('transformMessageEventDataToMessageResource', () => {
+  it('keeps the system text format so realtime archive events render as system messages', () => {
+    const message = transformMessageEventDataToMessageResource({
+      data: archivedEventData,
+      currentPersonId: 2,
+    })
+
+    expect(isSystemMessage(message)).toBe(true)
+  })
+})

package/src/utils/jolt/transform_message_event_data_to_message_resource.ts

@@ -39,5 +39,6 @@ export function transformMessageEventDataToMessageResource({
           action: data.system_text_parts.action,
         }
       : null,
+    systemTextFormat: data.system_text_format,
   }
 }

package/src/utils/request/messages_data_options.ts

@@ -14,6 +14,7 @@ export const getMessageFields = {
     'message_type',
     'person_ids_for_system_event',
     'system_text_parts',
+    'system_text_format',
   ],
   Person: ['name', 'avatar'],
   ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],

package/src/utils/system_messages.ts

@@ -1,16 +1,25 @@
 import type { MessageResource } from '../types'
 
-const SYSTEM_MESSAGE_TYPES = ['user_joined'] as const
-
-type SystemMessageType = (typeof SYSTEM_MESSAGE_TYPES)[number]
-
-export interface SystemMessageResource extends MessageResource {
-  messageType: SystemMessageType
+export interface PeopleSystemMessageResource extends MessageResource {
+  systemTextFormat: 'people'
   systemTextParts: { names: string[]; overflowCount: number; action: string }
   personIdsForSystemEvent: number[]
 }
 
-export const isSystemMessage = (message: MessageResource): message is SystemMessageResource =>
-  SYSTEM_MESSAGE_TYPES.includes(message.messageType as SystemMessageType) &&
-  message.systemTextParts != null &&
-  message.personIdsForSystemEvent != null
+export interface ActorSystemMessageResource extends MessageResource {
+  systemTextFormat: 'actor'
+  text: string
+}
+
+export type SystemMessageResource = PeopleSystemMessageResource | ActorSystemMessageResource
+
+export const isSystemMessage = (message: MessageResource): message is SystemMessageResource => {
+  switch (message.systemTextFormat) {
+    case 'people':
+      return message.systemTextParts != null && message.personIdsForSystemEvent != null
+    case 'actor':
+      return !!message.text
+    default:
+      return false
+  }
+}