@planningcenter/chat-react-native 4.4.0-rc.7 → 4.4.0

package/src/components/conversation/message_reaction.tsx

@@ -16,11 +16,13 @@ export function MessageReaction({
   onLongPress,
   message,
   conversationId,
+  disabled = false,
 }: {
   reaction: ReactionCountResource
   onLongPress: (_reaction: ReactionCountResource) => void
   message: MessageResource
   conversationId: number
+  disabled?: boolean
 }) {
   const styles = useReactionStyles(reaction)
   const { handleReactionToggle } = useMessageReactionToggle({
@@ -46,8 +48,11 @@ export function MessageReaction({
       testID={`reaction-${message.id}-${reaction.value}`}
       style={styles.reaction}
       onLongPress={() => onLongPress(reaction)}
-      onPress={handlePress}
-      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
+      onPress={disabled ? undefined : handlePress}
+      pressOpacity={disabled ? 1 : undefined}
+      android_ripple={
+        disabled ? undefined : { color: androidRippleColor, borderless: false, foreground: true }
+      }
     >
       <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
       <Text style={styles.reactionText}>{reaction.count}</Text>

package/src/components/conversation/messages_disabled_banners.tsx

@@ -22,38 +22,36 @@ export const MemberMessagesDisabledBanner = () => {
 
 const DEFAULT_DISABLED_TEXT = 'This conversation has been disabled.'
 
+interface BannerAction {
+  label: string
+  onPress: () => void
+  loading?: boolean
+}
+
 interface ConversationDisabledBannerProps {
   message: string | null
-  messageLink?: { label: string; onPress: () => void }
+  action?: BannerAction
 }
 
 export const ConversationDisabledBanner = ({
   message,
-  messageLink,
+  action,
 }: ConversationDisabledBannerProps) => {
   const styles = useStyles()
   const description = message ?? DEFAULT_DISABLED_TEXT
 
   return (
-    <MessagesDisabledBanner
-      description={description}
-      style={styles.memberBanner}
-      messageLink={messageLink}
-    />
+    <MessagesDisabledBanner description={description} style={styles.memberBanner} action={action} />
   )
 }
 
 interface MessagesDisabledBannerProps {
   description: string
   style?: ViewStyle
-  messageLink?: { label: string; onPress: () => void }
+  action?: BannerAction
 }
 
-const MessagesDisabledBanner = ({
-  description,
-  style,
-  messageLink,
-}: MessagesDisabledBannerProps) => {
+const MessagesDisabledBanner = ({ description, style, action }: MessagesDisabledBannerProps) => {
   const styles = useStyles()
 
   return (
@@ -61,13 +59,14 @@ const MessagesDisabledBanner = ({
       <Text style={styles.text} variant="tertiary">
         {description}
       </Text>
-      {messageLink && (
+      {action && (
         <Button
           variant="fill"
           size="lg"
-          title={messageLink.label}
-          onPress={messageLink.onPress}
-          style={styles.messageButton}
+          title={action.label}
+          onPress={action.onPress}
+          loading={action.loading}
+          style={styles.actionButton}
         />
       )}
     </View>
@@ -94,7 +93,7 @@ const useStyles = () => {
       paddingBottom: 16 + bottom,
       marginBottom: -bottom,
     },
-    messageButton: {
+    actionButton: {
       marginTop: 12,
     },
   })

package/src/components/conversation/system_message.tsx

@@ -4,6 +4,7 @@ import { Pressable, StyleSheet, View } from 'react-native'
 import Animated from 'react-native-reanimated'
 import { useAnimatedMessageBackgroundColor, useTheme } from '../../hooks'
 import { ReactionCountResource } from '../../types/resources/reaction'
+import { formatEventDateTime } from '../../utils/date'
 import { Haptic } from '../../utils/native_adapters'
 import { SystemMessageResource } from '../../utils/system_messages'
 import { Text } from '../display'
@@ -12,24 +13,32 @@ import { MessageReaction } from './message_reaction'
 interface SystemMessageProps {
   message: SystemMessageResource
   conversationId: number
+  conversationDisabled: boolean
 }
 
-export function SystemMessage({ message, conversationId }: SystemMessageProps) {
-  const { reactionCounts, systemTextParts, personIdsForSystemEvent } = message
-  const { names, overflowCount, action } = systemTextParts
+export function SystemMessage({
+  message,
+  conversationId,
+  conversationDisabled,
+}: SystemMessageProps) {
+  const { reactionCounts } = message
   const styles = useStyles()
   const navigation = useNavigation()
   const { colors } = useTheme()
-  const text = systemMessageText(names, overflowCount, action)
-  const isTruncated = overflowCount > 0
+  const text = systemMessageText(message)
+  const isTruncated =
+    message.systemTextFormat === 'people' && message.systemTextParts.overflowCount > 0
+  const pressable = isTruncated || !conversationDisabled
   const hasReactions = reactionCounts.length > 0
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
     useAnimatedMessageBackgroundColor()
 
   const handlePress = () => {
+    if (message.systemTextFormat !== 'people') return
+
     navigation.navigate('SystemMessagePeople', {
       conversation_id: conversationId,
-      person_ids: personIdsForSystemEvent,
+      person_ids: message.personIdsForSystemEvent,
     })
   }
 
@@ -54,16 +63,16 @@ export function SystemMessage({ message, conversationId }: SystemMessageProps) {
   return (
     <Pressable
       onPress={isTruncated ? handlePress : undefined}
-      onLongPress={handleLongPress}
-      onPressIn={handleMessagePressIn}
-      onPressOut={handleMessagePressOut}
-      android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
-      accessibilityRole="button"
-      accessibilityHint={
-        isTruncated
-          ? 'Tap to see people. Long press for message actions.'
-          : 'Long press for message actions.'
+      onLongPress={conversationDisabled ? undefined : handleLongPress}
+      onPressIn={pressable ? handleMessagePressIn : undefined}
+      onPressOut={pressable ? handleMessagePressOut : undefined}
+      android_ripple={
+        pressable
+          ? { color: colors.androidRippleNeutral, borderless: false, foreground: true }
+          : undefined
       }
+      accessibilityRole={pressable ? 'button' : undefined}
+      accessibilityHint={systemMessageHint(isTruncated, conversationDisabled)}
     >
       <Animated.View style={[styles.container, animatedBackgroundColor]}>
         <Text variant="tertiary" style={styles.text}>
@@ -78,6 +87,7 @@ export function SystemMessage({ message, conversationId }: SystemMessageProps) {
                 onLongPress={handleReactionLongPress}
                 message={message}
                 conversationId={conversationId}
+                disabled={conversationDisabled}
               />
             ))}
           </View>
@@ -87,7 +97,25 @@ export function SystemMessage({ message, conversationId }: SystemMessageProps) {
   )
 }
 
-function systemMessageText(names: string[], overflowCount: number, action: string): string {
+function systemMessageHint(isTruncated: boolean, conversationDisabled: boolean) {
+  if (conversationDisabled) return isTruncated ? 'Tap to see people.' : undefined
+  return isTruncated
+    ? 'Tap to see people. Long press for message actions.'
+    : 'Long press for message actions.'
+}
+
+function systemMessageText(message: SystemMessageResource): string {
+  switch (message.systemTextFormat) {
+    case 'people': {
+      const { names, overflowCount, action } = message.systemTextParts
+      return peopleSystemMessageText(names, overflowCount, action)
+    }
+    case 'actor':
+      return `${message.text} on ${formatEventDateTime(message.createdAt)}`
+  }
+}
+
+function peopleSystemMessageText(names: string[], overflowCount: number, action: string): string {
   if (overflowCount > 0) {
     const overflowLabel = `${overflowCount} ${overflowCount === 1 ? 'other' : 'others'}`
     return `${names.join(', ')}, and ${overflowLabel} ${action}`

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

@@ -0,0 +1,67 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import type { ConversationResource } from '../../../types'
+import { ConversationActions } from '../conversation_actions'
+
+jest.mock('react-native-gesture-handler/ReanimatedSwipeable', () => {
+  const { View: MockView } = jest.requireActual('react-native')
+  return {
+    __esModule: true,
+    default: ({
+      children,
+      renderLeftActions,
+    }: {
+      children: React.ReactNode
+      renderLeftActions: () => React.ReactNode
+    }) => (
+      <MockView>
+        {renderLeftActions()}
+        {children}
+      </MockView>
+    ),
+  }
+})
+jest.mock('../../../hooks/use_conversations_actions', () => ({
+  useConversationsMute: () => ({ muted: false, setMuted: jest.fn(), isPending: false }),
+  useConversationsMarkRead: () => ({ read: false, markRead: jest.fn(), isPending: false }),
+}))
+
+const createdAt = '2026-10-01T12:00:00Z'
+
+const conversation = (overrides: Partial<ConversationResource>): ConversationResource => ({
+  type: 'Conversation',
+  id: 7,
+  title: 'Youth Group',
+  conversationPreview: null,
+  createdAt,
+  lastMessageCreatedAt: createdAt,
+  muted: false,
+  repliesDisabled: false,
+  unreadCount: 1,
+  unreadReaction: false,
+  updatedAt: createdAt,
+  ...overrides,
+})
+
+const renderActions = (overrides: Partial<ConversationResource>) =>
+  render(
+    <ConversationActions conversation={conversation(overrides)} onPress={jest.fn()}>
+      <Text>Youth Group</Text>
+    </ConversationActions>
+  )
+
+describe('ConversationActions', () => {
+  it('offers mark read but not mute on an archived conversation', () => {
+    const view = renderActions({ disabled: true, disabledReason: 'archived' })
+
+    expect(view.getByText('Mark read')).toBeTruthy()
+    expect(view.queryByText('Silence')).toBeNull()
+  })
+
+  it('offers mute on a conversation disabled for another reason', () => {
+    const view = renderActions({ disabled: true, disabledReason: 'safety_check' })
+
+    expect(view.getByText('Silence')).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,105 @@
+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,
+  overrides: Partial<ConversationResource> = {}
+): ConversationResource => ({
+  type: 'Conversation',
+  id: 7,
+  title: 'Worship Team',
+  conversationPreview,
+  createdAt,
+  lastMessageCreatedAt: createdAt,
+  muted: false,
+  repliesDisabled: false,
+  unreadCount: 0,
+  unreadReaction: false,
+  updatedAt: createdAt,
+  ...overrides,
+})
+
+const messagePreview: ConversationPreviewData = {
+  kind: 'message',
+  authorName: 'Ada Lovelace',
+  value: null,
+  text: 'See you Sunday',
+  createdAt,
+}
+
+const renderPreview = (
+  preview: ConversationPreviewData,
+  overrides: Partial<ConversationResource> = {}
+) =>
+  render(
+    <ConversationPreview conversation={conversation(preview, overrides)} 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()
+  })
+
+  it('marks an archived conversation with an archive icon instead of the disabled label', () => {
+    const view = renderPreview(messagePreview, { disabled: true, disabledReason: 'archived' })
+
+    expect(
+      view.getByTestId('conversation-archived-icon', { includeHiddenElements: true })
+    ).toBeTruthy()
+    expect(view.getByLabelText(/^Select Worship Team, Archived,/)).toBeTruthy()
+  })
+
+  it('keeps the disabled label for a conversation disabled for another reason', () => {
+    const view = renderPreview(messagePreview, { disabled: true, disabledReason: 'safety_check' })
+
+    expect(
+      view.queryByTestId('conversation-archived-icon', { includeHiddenElements: true })
+    ).toBeNull()
+    expect(view.getByLabelText(/^Select Worship Team, Disabled,/)).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,93 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { ConversationFiltersParams } from '../../../screens/conversation_filters/screen_props'
+import { Conversations } from '../conversations'
+
+const mockSetParams = jest.fn()
+let mockArgs: ConversationFiltersParams = {}
+let mockFilterDropdownEnabled = false
+let mockHasNextPage = false
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ setParams: mockSetParams, navigate: jest.fn() }),
+}))
+jest.mock('../../../contexts/conversations_context', () => ({
+  useConversationsContext: () => ({
+    conversations: [{ id: 1, title: 'Youth Group' }],
+    isLoading: false,
+    isFetched: true,
+    isRefetching: false,
+    isError: false,
+    error: null,
+    hasNextPage: mockHasNextPage,
+    fetchNextPage: jest.fn(),
+    refetch: jest.fn(),
+    args: mockArgs,
+  }),
+}))
+jest.mock('../../../hooks/use_chat_permissions', () => ({
+  useCanCreateConversations: () => false,
+}))
+jest.mock('../../../hooks/use_filter_dropdown_enabled', () => ({
+  useFilterDropdownEnabled: () => mockFilterDropdownEnabled,
+}))
+jest.mock('../../../hooks/use_conversations_jolt_events', () => ({
+  useConversationsJoltEvents: () => {},
+}))
+jest.mock('../conversation_preview', () => ({
+  ConversationPreview: () => null,
+  ConversationPreviewSkeleton: () => null,
+}))
+jest.mock('../conversations_blank_state', () => ({
+  ConversationsBlankState: () => null,
+}))
+
+describe('Conversations archived footer', () => {
+  beforeEach(() => {
+    mockSetParams.mockClear()
+    mockFilterDropdownEnabled = false
+    mockHasNextPage = false
+  })
+
+  it('ends the archived list with a way back to active conversations', () => {
+    mockArgs = { show_archived: true }
+    const view = render(<Conversations />)
+
+    expect(view.getByText('You’re viewing archived results.')).toBeTruthy()
+
+    fireEvent.press(view.getByLabelText('View active conversations'))
+
+    expect(mockSetParams).toHaveBeenCalledWith({
+      title: undefined,
+      chat_group_graph_id: undefined,
+      group_source_app_name: undefined,
+      show_direct_messages: undefined,
+      show_archived: undefined,
+    })
+  })
+
+  it('shows the archived footer instead of the filtered one when the dropdown is on', () => {
+    mockArgs = { show_archived: true }
+    mockFilterDropdownEnabled = true
+    const view = render(<Conversations />)
+
+    expect(view.getByLabelText('View active conversations')).toBeTruthy()
+    expect(view.queryByText('You’re viewing filtered results')).toBeNull()
+  })
+
+  it('waits for the last page before showing the archived footer', () => {
+    mockArgs = { show_archived: true }
+    mockHasNextPage = true
+    const view = render(<Conversations />)
+
+    expect(view.queryByLabelText('View active conversations')).toBeNull()
+  })
+
+  it('leaves the active list without the archived footer', () => {
+    mockArgs = {}
+    const view = render(<Conversations />)
+
+    expect(view.queryByLabelText('View active conversations')).toBeNull()
+  })
+})

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

@@ -0,0 +1,73 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { ConversationsBlankState } from '../conversations_blank_state'
+
+const mockSetParams = jest.fn()
+const mockUseFilterDropdownEnabled = jest.fn()
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ setParams: mockSetParams }),
+}))
+
+jest.mock('../../../hooks/use_filter_dropdown_enabled', () => ({
+  useFilterDropdownEnabled: () => mockUseFilterDropdownEnabled(),
+}))
+
+describe('ConversationsBlankState', () => {
+  beforeEach(() => {
+    mockSetParams.mockClear()
+  })
+
+  describe('with the filter dropdown on', () => {
+    beforeEach(() => {
+      mockUseFilterDropdownEnabled.mockReturnValue(true)
+    })
+
+    it('offers to view all conversations when a filter is applied', () => {
+      const view = render(
+        <ConversationsBlankState isFilterApplied={true} canCreateConversations={true} />
+      )
+
+      expect(view.getByText('No matches')).toBeTruthy()
+      expect(view.queryByText('No conversations yet.')).toBeNull()
+
+      fireEvent.press(view.getByText('View all conversations'))
+
+      expect(mockSetParams).toHaveBeenCalledTimes(1)
+      expect(mockSetParams.mock.calls[0][0]).toStrictEqual({
+        title: undefined,
+        chat_group_graph_id: undefined,
+        group_source_app_name: undefined,
+        show_direct_messages: undefined,
+        show_archived: undefined,
+      })
+    })
+
+    it('keeps the compose prompt when no filter is applied', () => {
+      const view = render(
+        <ConversationsBlankState isFilterApplied={false} canCreateConversations={true} />
+      )
+
+      expect(view.getByText('No conversations yet.')).toBeTruthy()
+      expect(view.getByText('Tap the compose button to get started.')).toBeTruthy()
+      expect(view.queryByText('View all conversations')).toBeNull()
+    })
+  })
+
+  describe('with the filter dropdown off', () => {
+    beforeEach(() => {
+      mockUseFilterDropdownEnabled.mockReturnValue(false)
+    })
+
+    it('keeps the adjust-your-filters copy when a filter is applied', () => {
+      const view = render(
+        <ConversationsBlankState isFilterApplied={true} canCreateConversations={true} />
+      )
+
+      expect(view.getByText('No conversations yet.')).toBeTruthy()
+      expect(view.getByText('Adjust your filters to find conversations.')).toBeTruthy()
+      expect(view.queryByText('View all conversations')).toBeNull()
+    })
+  })
+})

package/src/components/conversations/archived_results_footer.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Text, TextInlineButton } from '../display'
+
+interface ArchivedResultsFooterProps {
+  onViewActiveConversations: () => void
+}
+
+export function ArchivedResultsFooter({ onViewActiveConversations }: ArchivedResultsFooterProps) {
+  return (
+    <View style={styles.container}>
+      <Text variant="tertiary" style={styles.text}>
+        You&rsquo;re viewing archived results.
+      </Text>
+      <TextInlineButton
+        variant="tertiary"
+        onPress={onViewActiveConversations}
+        accessibilityLabel="View active conversations"
+      >
+        View active conversations
+      </TextInlineButton>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    gap: 4,
+    paddingVertical: 24,
+    paddingHorizontal: 16,
+  },
+  text: {
+    textAlign: 'center',
+  },
+})