@planningcenter/chat-react-native 4.4.1-qa-staging.16 → 4.4.1-qa-staging.18

package/src/__tests__/screens/conversation_filters/components/conversation_filters.test.tsx

@@ -0,0 +1,132 @@
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { useFilterDropdownEnabled } from '../../../../hooks/use_filter_dropdown_enabled'
+import { ConversationFilters } from '../../../../screens/conversation_filters/components/conversation_filters'
+import { FilterContext } from '../../../../screens/conversation_filters/context/conversation_filter_context'
+import { FilterTypes } from '../../../../screens/conversation_filters/filter_types'
+import { GroupResource } from '../../../../types/resources/group_resource'
+
+jest.mock('react-native-gesture-handler', () => {
+  const { FlatList } = jest.requireActual('react-native')
+  const ReactActual = jest.requireActual('react')
+
+  return {
+    FlatList: (props: object) =>
+      ReactActual.createElement(FlatList, { ...props, initialNumToRender: 50 }),
+  }
+})
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ navigate: jest.fn(), dispatch: jest.fn(), setParams: jest.fn() }),
+}))
+jest.mock('../../../../hooks/use_api_client', () => ({ useApiClient: () => ({}) }))
+jest.mock('../../../../hooks/use_can_browse_archived_conversations', () => ({
+  useCanBrowseArchivedConversations: () => false,
+}))
+jest.mock('../../../../hooks/use_filter_dropdown_enabled', () => ({
+  useFilterDropdownEnabled: jest.fn(() => false),
+}))
+jest.mock('../../../../hooks/use_direct_messages_eligible', () => ({
+  useDirectMessagesEligible: () => true,
+}))
+jest.mock('../../../../hooks/use_has_direct_messages', () => ({
+  useHasDirectMessages: () => true,
+}))
+jest.mock('../../../../hooks/services/use_services_team', () => ({
+  useServicesTeamsMap: () => ({}),
+}))
+jest.mock('../../../../screens/conversation_filters/hooks/filters', () => ({
+  useGroupsToFilter: () => ({ groups: mockGroups }),
+  useTeamsToFilter: () => ({ teams: mockTeams }),
+}))
+
+const buildGroup = (id: number, name: string): GroupResource => ({
+  id: `Groups-Group-${id}`,
+  type: 'Group',
+  links: { self: '' },
+  name,
+  sourceAppName: 'Groups',
+  sourceType: 'Group',
+})
+
+const buildTeam = (id: number, name: string): GroupResource => ({
+  id: `Services-Team-${id}`,
+  type: 'Group',
+  links: { self: '' },
+  name,
+  sourceAppName: 'Services',
+  sourceType: 'Team',
+})
+
+const mockGroups = Array.from({ length: 6 }, (_, i) => buildGroup(i + 1, `Group ${i + 1}`))
+const mockTeams = [buildTeam(1, 'Worship Team')]
+
+const mockedFilterDropdownEnabled = jest.mocked(useFilterDropdownEnabled)
+
+const safeAreaMetrics = {
+  frame: { x: 0, y: 0, width: 390, height: 844 },
+  insets: { top: 0, right: 0, bottom: 0, left: 0 },
+}
+
+const renderFilters = () =>
+  render(
+    <SafeAreaProvider initialMetrics={safeAreaMetrics}>
+      <ThemeProvider value={DefaultTheme}>
+        <FilterContext.Provider
+          value={{
+            params: {},
+            scrollOffset: 0,
+            setScrollOffset: jest.fn(),
+            setFormSheetHeaderHeight: jest.fn(),
+            resetFilter: jest.fn(),
+            setGroupFilter: jest.fn(),
+            setAppFilter: jest.fn(),
+            applyFilters: jest.fn(),
+            platformListPaddingBottom: 0,
+          }}
+        >
+          <ConversationFilters />
+        </FilterContext.Provider>
+      </ThemeProvider>
+    </SafeAreaProvider>
+  )
+
+const generalFilterLabels = [
+  'General Filters',
+  FilterTypes.All,
+  FilterTypes.Groups,
+  FilterTypes.Teams,
+  FilterTypes.DirectMessages,
+]
+
+describe('ConversationFilters', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders the General Filters section when the filter dropdown is off', () => {
+    mockedFilterDropdownEnabled.mockReturnValue(false)
+
+    const { getByText } = renderFilters()
+
+    generalFilterLabels.forEach(label => expect(getByText(label)).toBeTruthy())
+    expect(getByText('Groups')).toBeTruthy()
+    expect(getByText('Teams')).toBeTruthy()
+  })
+
+  it('hides the General Filters section but keeps Groups and Teams when the filter dropdown is on', () => {
+    mockedFilterDropdownEnabled.mockReturnValue(true)
+
+    const { getByText, queryByText, getAllByText } = renderFilters()
+
+    generalFilterLabels.forEach(label => expect(queryByText(label)).toBeNull())
+    expect(getByText('Groups')).toBeTruthy()
+    expect(getByText('Teams')).toBeTruthy()
+    expect(getByText('Group 1')).toBeTruthy()
+    expect(queryByText('Group 6')).toBeNull()
+    expect(getByText('Worship Team')).toBeTruthy()
+    expect(getAllByText('View more')).toHaveLength(1)
+  })
+})

package/src/__tests__/screens/conversation_filters_screen.test.tsx

@@ -0,0 +1,76 @@
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { Platform } from 'react-native'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { FilterContext } from '../../screens/conversation_filters/context/conversation_filter_context'
+import { ConversationFiltersHeader } from '../../screens/conversation_filters_screen'
+
+const mockGoBack = jest.fn()
+
+jest.mock('@react-navigation/elements', () => ({
+  ...jest.requireActual('@react-navigation/elements'),
+  useHeaderHeight: () => 0,
+}))
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ goBack: mockGoBack }),
+  useRoute: () => ({ params: {} }),
+}))
+jest.mock('../../hooks/use_filter_dropdown_enabled', () => ({
+  useFilterDropdownEnabled: () => true,
+}))
+
+const safeAreaMetrics = {
+  frame: { x: 0, y: 0, width: 390, height: 844 },
+  insets: { top: 0, right: 0, bottom: 0, left: 0 },
+}
+
+const renderHeader = () =>
+  render(
+    <SafeAreaProvider initialMetrics={safeAreaMetrics}>
+      <ThemeProvider value={DefaultTheme}>
+        <FilterContext.Provider
+          value={{
+            params: {},
+            scrollOffset: 0,
+            setScrollOffset: jest.fn(),
+            setFormSheetHeaderHeight: jest.fn(),
+            resetFilter: jest.fn(),
+            setGroupFilter: jest.fn(),
+            setAppFilter: jest.fn(),
+            applyFilters: jest.fn(),
+            platformListPaddingBottom: 0,
+          }}
+        >
+          <ConversationFiltersHeader />
+        </FilterContext.Provider>
+      </ThemeProvider>
+    </SafeAreaProvider>
+  )
+
+describe('ConversationFiltersHeader', () => {
+  afterEach(() => {
+    jest.restoreAllMocks()
+    mockGoBack.mockClear()
+  })
+
+  it('shows a back button that dismisses the sheet on Android', async () => {
+    jest.replaceProperty(Platform, 'OS', 'android')
+
+    renderHeader()
+
+    fireEvent.press(screen.getByLabelText('Back'))
+
+    await waitFor(() => expect(mockGoBack).toHaveBeenCalledTimes(1))
+  })
+
+  it('does not show a back button on iOS', () => {
+    jest.replaceProperty(Platform, 'OS', 'ios')
+
+    renderHeader()
+
+    expect(screen.getByText('More filters')).toBeTruthy()
+    expect(screen.queryByLabelText('Back')).toBeNull()
+  })
+})

package/src/__tests__/screens/conversation_new/components/services_form.test.tsx

@@ -9,6 +9,7 @@ import { ServicesForm } from '../../../../screens/conversation_new/components/se
 jest.mock('react-native-reanimated', () => ({
   ...jest.requireActual('react-native-reanimated/mock'),
   LayoutAnimationConfig: ({ children }: { children: React.ReactNode }) => children,
+  useReducedMotion: () => false,
 }))
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),

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

@@ -19,7 +19,10 @@ jest.mock('../conversation_actions', () => ({
 
 const createdAt = '2026-03-04T15:30:00Z'
 
-const conversation = (conversationPreview: ConversationPreviewData): ConversationResource => ({
+const conversation = (
+  conversationPreview: ConversationPreviewData,
+  overrides: Partial<ConversationResource> = {}
+): ConversationResource => ({
   type: 'Conversation',
   id: 7,
   title: 'Worship Team',
@@ -31,10 +34,24 @@ const conversation = (conversationPreview: ConversationPreviewData): Conversatio
   unreadCount: 0,
   unreadReaction: false,
   updatedAt: createdAt,
+  ...overrides,
 })
 
-const renderPreview = (preview: ConversationPreviewData) =>
-  render(<ConversationPreview conversation={conversation(preview)} onPress={jest.fn()} />)
+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', () => {
@@ -67,4 +84,22 @@ describe('ConversationPreview', () => {
       )
     ).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,82 @@
+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
+
+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,
+    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
+  })
+
+  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('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',
+  },
+})

package/src/components/conversations/conversation_actions.tsx

@@ -18,7 +18,7 @@ import {
   useConversationsMute,
 } from '../../hooks/use_conversations_actions'
 import { ConversationResource } from '../../types'
-import { platformPressedOpacityStyle } from '../../utils'
+import { isArchivedConversation, platformPressedOpacityStyle } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { SwipeableToggleButton } from './swipeable_toggle_button'
 
@@ -53,6 +53,7 @@ export function ConversationActions({
   })
 
   const isConversationEmpty = conversation.lastMessageCreatedAt === null
+  const canMute = !isArchivedConversation(conversation)
 
   const handleSwipeableClose = useCallback(() => {
     setDisabled(false)
@@ -88,13 +89,16 @@ export function ConversationActions({
       ]
     : []
 
-  const accessibilityActions = [
-    {
-      name: muted ? 'unmute' : 'mute',
-      label: muted ? 'Enable' : 'Silence',
-    },
-    ...readAccessibilityAction,
-  ]
+  const muteAccessibilityAction = canMute
+    ? [
+        {
+          name: muted ? 'unmute' : 'mute',
+          label: muted ? 'Enable' : 'Silence',
+        },
+      ]
+    : []
+
+  const accessibilityActions = [...muteAccessibilityAction, ...readAccessibilityAction]
 
   const handleAccessibilityAction = useCallback(
     (event: AccessibilityActionEvent) => {
@@ -136,6 +140,7 @@ export function ConversationActions({
       renderLeftActions={() => (
         <LeftActions
           isConversationEmpty={isConversationEmpty}
+          canMute={canMute}
           handleMute={handleMute}
           handleLatestMessageUnread={handleLatestMessageUnread}
           muted={muted}
@@ -163,6 +168,7 @@ export function ConversationActions({
 
 interface LeftActionsProps {
   isConversationEmpty: boolean
+  canMute: boolean
   handleMute: () => void
   handleLatestMessageUnread: () => void
   muted: boolean
@@ -173,6 +179,7 @@ interface LeftActionsProps {
 
 function LeftActions({
   isConversationEmpty,
+  canMute,
   handleMute,
   handleLatestMessageUnread,
   muted,
@@ -180,7 +187,7 @@ function LeftActions({
   isMutedPending,
   isMarkReadPending,
 }: LeftActionsProps) {
-  const styles = useStyles()
+  const styles = useStyles({ actionButtonCount: canMute ? 2 : 1 })
 
   const muteToggleContent = {
     true: { iconName: 'general.bell', label: 'Enable' },
@@ -202,21 +209,22 @@ function LeftActions({
         toggleContent={latestMessageUnreadToggleContent}
         backgroundColor={tokens.fillColorInteractionSwipeDefault}
       />
-      <SwipeableToggleButton
-        loading={isMutedPending}
-        toggled={muted}
-        onPress={handleMute}
-        toggleContent={muteToggleContent}
-        backgroundColor={tokens.fillColorInteractionSwipeSecondary}
-      />
+      {canMute && (
+        <SwipeableToggleButton
+          loading={isMutedPending}
+          toggled={muted}
+          onPress={handleMute}
+          toggleContent={muteToggleContent}
+          backgroundColor={tokens.fillColorInteractionSwipeSecondary}
+        />
+      )}
     </View>
   )
 }
 
 const ACTION_BUTTON_WIDTH = 120
-const ACTION_BUTTON_COUNT = 2
 
-const useStyles = () => {
+const useStyles = ({ actionButtonCount = 2 }: { actionButtonCount?: number } = {}) => {
   const { colors } = useTheme()
   return StyleSheet.create({
     swipeableChildContainer: {
@@ -225,7 +233,7 @@ const useStyles = () => {
     actionButtonContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-      width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,
+      width: ACTION_BUTTON_WIDTH * actionButtonCount,
       alignContent: 'stretch',
     },
     swipeableContainer: {