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

package/src/components/display/icon_tile.tsx

@@ -0,0 +1,67 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useFontScale, useTheme } from '../../hooks'
+import { MAX_FONT_SIZE_MULTIPLIER } from '../../utils'
+import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
+
+const ICON_SIZE_PX = 16
+const SQUARE_BORDER_RADIUS_PX = 4
+
+interface IconTileProps {
+  icon: IconDefinition
+  shape: 'circle' | 'square'
+  size?: AvatarRootProps['size']
+  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
+  style?: AvatarRootProps['style']
+  testID?: string
+}
+
+export function IconTile({
+  icon,
+  shape,
+  size = 'lg',
+  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+  style,
+  testID,
+}: IconTileProps) {
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const styles = useStyles({ fontScale })
+
+  const tile = (
+    <View
+      style={[styles.tile, shape === 'square' && styles.square]}
+      testID={testID}
+      accessibilityElementsHidden
+    >
+      <FontAwesomeIcon icon={icon} size={ICON_SIZE_PX * fontScale} color={styles.icon.color} />
+    </View>
+  )
+
+  return (
+    <AvatarPrimitive.Root size={size} maxFontSizeMultiplier={maxFontSizeMultiplier} style={style}>
+      {shape === 'circle' ? <AvatarPrimitive.Mask>{tile}</AvatarPrimitive.Mask> : tile}
+    </AvatarPrimitive.Root>
+  )
+}
+
+const useStyles = ({ fontScale }: { fontScale: number }) => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    tile: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: colors.fillColorNeutral070,
+    },
+    square: {
+      borderRadius: SQUARE_BORDER_RADIUS_PX * fontScale,
+      overflow: 'hidden',
+    },
+    icon: {
+      color: colors.iconColorDefaultPrimary,
+    },
+  })
+}

package/src/components/display/index.ts

@@ -4,6 +4,7 @@ export * from './badge'
 export * from './conversation_avatar'
 export * from './emoji_avatar'
 export * from './icon_avatar'
+export * from './icon_tile'
 export * from './banner_collapsible'
 export * from './banner'
 export * from './button'
@@ -23,6 +24,7 @@ export * from './text_button'
 export * from './text_inline_button'
 export * from './text'
 export * from './toggle_button'
+export * from './filter_dropdown'
 export * from './keyboard_scroll_view'
 export * from './keyboard_view'
 export * from './platform_modal_header_buttons'

package/src/contexts/api_provider.tsx

@@ -11,6 +11,7 @@ import { ApiClient, useApiClient } from '../hooks/use_api_client'
 import { useAppState } from '../hooks/use_app_state'
 import { appGrantsQueryOptions } from '../hooks/use_chat_permissions'
 import { featuresQueryOptions } from '../hooks/use_features'
+import { useJoltForegroundPing } from '../hooks/use_jolt'
 import { RequestQueryKey } from '../hooks/use_suspense_api'
 import { emitAuthRefresh } from '../utils/auth_events'
 import { ResponseError } from '../utils/response_error'
@@ -73,6 +74,7 @@ export function ApiProvider({ children }: ViewProps) {
   return (
     <QueryClientProvider client={chatQueryClient}>
       {session.isAuthenticated && <PrefetchQueries />}
+      <JoltForegroundPing />
       {children}
     </QueryClientProvider>
   )
@@ -90,6 +92,12 @@ const PrefetchQueries = () => {
   return null
 }
 
+const JoltForegroundPing = () => {
+  useJoltForegroundPing()
+
+  return null
+}
+
 export function useFocusManager() {
   const appState = useAppState()
 

package/src/contexts/conversations_context.tsx

@@ -45,13 +45,14 @@ export const ConversationsContextProvider = ({
   opts?: ApiGetQueryOptions
 }>) => {
   const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
-  const { chat_group_graph_id, group_source_app_name, show_direct_messages } = args
+  const { chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived } = args
 
   const query = useConversations(
     {
       chat_group_graph_id,
       group_source_app_name,
       show_direct_messages,
+      show_archived,
     },
     paginatorOptions
   )

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

@@ -0,0 +1,152 @@
+import { QueryClientProvider, useQuery } from '@tanstack/react-query'
+import { act, renderHook, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { Alert } from 'react-native'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { getConversationsRequestArgs } from '../../utils/request/conversation'
+import { getConversationRequestArgs, useConversationArchive } from '../use_conversation'
+import { currentPersonQueryKey } from '../use_current_person'
+import { getRequestQueryKey } from '../use_suspense_api'
+
+const mockPost = jest.fn()
+jest.mock('../use_api_client', () => ({
+  useApiClient: () => ({ chat: { post: mockPost } }),
+}))
+
+const conversation_id = 7
+const conversationKey = getRequestQueryKey(getConversationRequestArgs({ conversation_id }))
+const conversationsKey = getRequestQueryKey(getConversationsRequestArgs({ gids: 'all' }))
+
+const buildQueryClient = () =>
+  buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
+
+let queryClient = buildQueryClient()
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+
+const isInvalidated = (queryKey: unknown[]) =>
+  queryClient.getQueryCache().find({ queryKey, exact: true })?.state.isInvalidated
+
+describe('useConversationArchive', () => {
+  beforeEach(() => {
+    queryClient = buildQueryClient()
+    queryClient.setQueryData(conversationKey, { data: { id: conversation_id } })
+    queryClient.setQueryData(conversationsKey, { data: [] })
+    queryClient.setQueryData(currentPersonQueryKey, {
+      data: { id: 1, canBrowseArchivedConversations: false },
+    })
+    mockPost.mockReset()
+    jest.spyOn(Alert, 'alert').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  it.each([
+    [true, 'archive'],
+    [false, 'unarchive'],
+  ])(
+    'posts archived=%s to the %s action, then invalidates the conversation and list',
+    async (archived, action) => {
+      mockPost.mockResolvedValue({ data: { id: conversation_id } })
+      const { result } = renderHook(() => useConversationArchive({ conversation_id }), { wrapper })
+
+      await act(() => result.current.mutateAsync(archived))
+
+      expect(mockPost).toHaveBeenCalledWith({
+        url: `/me/conversations/7/${action}`,
+        data: { data: { type: 'Conversation', attributes: {} } },
+      })
+      expect(isInvalidated(conversationKey)).toBe(true)
+      expect(isInvalidated(conversationsKey)).toBe(true)
+      expect(isInvalidated(currentPersonQueryKey)).toBe(false)
+    }
+  )
+
+  it.each([
+    [true, true],
+    [false, false],
+  ])(
+    'sets archive access in the person cache to %s after archived=%s',
+    async (archived, canBrowse) => {
+      mockPost.mockResolvedValue({ data: { id: conversation_id } })
+      const { result } = renderHook(() => useConversationArchive({ conversation_id }), { wrapper })
+
+      await act(() => result.current.mutateAsync(archived))
+
+      expect(queryClient.getQueryData(currentPersonQueryKey)).toEqual({
+        data: { id: 1, canBrowseArchivedConversations: canBrowse },
+      })
+    }
+  )
+
+  it('stays pending until the conversation refetch finishes', async () => {
+    mockPost.mockResolvedValue({ data: { id: conversation_id } })
+    let finishRefetch = () => {}
+    const { result } = renderHook(
+      () => {
+        useQuery({
+          queryKey: conversationKey,
+          queryFn: () =>
+            new Promise(resolve => {
+              finishRefetch = () => resolve({ data: { id: conversation_id } })
+            }),
+          staleTime: Infinity,
+        })
+        return useConversationArchive({ conversation_id })
+      },
+      { wrapper }
+    )
+
+    let archiving = Promise.resolve()
+    await act(async () => {
+      archiving = result.current.mutateAsync(true).then(() => {})
+    })
+
+    await waitFor(() => expect(result.current.isPending).toBe(true))
+
+    await act(async () => {
+      finishRefetch()
+      await archiving
+    })
+
+    await waitFor(() => expect(result.current.isPending).toBe(false))
+  })
+
+  it("doesn't wait on the list refetch", async () => {
+    mockPost.mockResolvedValue({ data: { id: conversation_id } })
+    const { result } = renderHook(
+      () => {
+        useQuery({
+          queryKey: conversationsKey,
+          queryFn: () => new Promise(() => {}),
+          staleTime: Infinity,
+        })
+        return useConversationArchive({ conversation_id })
+      },
+      { wrapper }
+    )
+
+    await act(() => result.current.mutateAsync(true))
+
+    expect(result.current.isPending).toBe(false)
+  })
+
+  it.each([
+    [true, 'archive'],
+    [false, 'unarchive'],
+  ])('alerts when archived=%s fails', async (archived, action) => {
+    mockPost.mockRejectedValue(new Error('nope'))
+    const { result } = renderHook(() => useConversationArchive({ conversation_id }), { wrapper })
+
+    await act(() => result.current.mutateAsync(archived).catch(() => {}))
+
+    expect(Alert.alert).toHaveBeenCalledWith(
+      'Oops',
+      `Couldn't ${action} this conversation. Please try again.`
+    )
+  })
+})

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

@@ -0,0 +1,74 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import type { ApiResource, ConversationResource } from '../../types'
+import { getConversationRequestArgs } from '../use_conversation'
+import { useConversationJoltEvents } from '../use_conversation_jolt_events'
+import { getRequestQueryKey } from '../use_suspense_api'
+
+const handlers: Record<string, (event: unknown) => void> = {}
+jest.mock('../use_jolt', () => ({
+  useJoltChannel: () => 'channel',
+  useJoltEvent: (_channel: unknown, name: string, handler: (event: unknown) => void) => {
+    handlers[name] = handler
+  },
+}))
+jest.mock('../use_current_person', () => ({ useCurrentPerson: () => ({ id: 1 }) }))
+jest.mock('../use_api_client', () => ({ useApiClient: () => ({ chat: {} }) }))
+
+const conversationId = 7
+const queryKey = getRequestQueryKey(getConversationRequestArgs({ conversation_id: conversationId }))
+let queryClient: QueryClient
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+
+const archivedAttributes = {
+  disabled: true,
+  disabled_reason: 'archived',
+  disabled_message: 'This conversation is archived.',
+}
+const activeAttributes = { disabled: false, disabled_reason: null, disabled_message: null }
+
+const seed = (conversation: Partial<ConversationResource>) =>
+  queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, {
+    data: { type: 'Conversation', id: conversationId, title: 'Youth', ...conversation },
+  } as ApiResource<ConversationResource>)
+
+const cached = () => queryClient.getQueryData<ApiResource<ConversationResource>>(queryKey)!.data
+
+const conversationUpdated = (attributes: Record<string, unknown>) =>
+  handlers['conversation.updated']({
+    event: 'conversation.updated',
+    data: { data: { id: conversationId, ...attributes } },
+  })
+
+beforeEach(() => {
+  queryClient = buildTestQueryClient()
+  renderHook(() => useConversationJoltEvents({ conversationId }), { wrapper })
+})
+
+describe('useConversationJoltEvents on conversation.updated', () => {
+  it('switches the cached conversation into the archived state', () => {
+    seed({ disabled: false, disabledReason: null, disabledMessage: null })
+
+    conversationUpdated(archivedAttributes)
+
+    expect(cached()).toMatchObject({
+      title: 'Youth',
+      disabled: true,
+      disabledReason: 'archived',
+      disabledMessage: 'This conversation is archived.',
+    })
+  })
+
+  it('switches the cached conversation back out of the archived state', () => {
+    seed({ disabled: true, disabledReason: 'archived', disabledMessage: 'Archived' })
+
+    conversationUpdated(activeAttributes)
+
+    expect(cached()).toMatchObject({ disabled: false, disabledReason: null, disabledMessage: null })
+  })
+})

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

@@ -101,8 +101,8 @@ describe('useConversationMessages', () => {
     await waitFor(() => expect(result.current.messages.map(m => m.id)).toContain(anchor))
   })
 
-  it('reuses a cached window that already holds the anchor', async () => {
-    seed(livePageParam, ['Z', anchor])
+  it('reuses a cached window that was opened at the anchor', async () => {
+    seed(anchoredPageParam(anchor), ['Z', anchor], behindMeta)
 
     const { result } = render({ conversation_id, anchor })
 
@@ -110,6 +110,14 @@ describe('useConversationMessages', () => {
     expect(mockGet).not.toHaveBeenCalled()
   })
 
+  it('refetches around the anchor when a live window still holds a stale copy of it', async () => {
+    seed(livePageParam, ['Z', anchor])
+
+    render({ conversation_id, anchor })
+
+    await waitFor(() => expect(requestedWhere()).toEqual([{ id_around: anchor }]))
+  })
+
   it('keeps a deleted anchor so the list can mark where it was', async () => {
     const deleted = {
       ...message(anchor),

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

@@ -1,12 +1,15 @@
+import JoltClient from '@planningcenter/jolt-client'
+import { JoltSubscription } from '@planningcenter/jolt-client/dist/types/JoltSubscription'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { render, waitFor } from '@testing-library/react-native'
 import React, { PropsWithChildren, Suspense } from 'react'
+import { AppState, AppStateStatus } from 'react-native'
 import { buildTestQueryClient } from '../../__utils__/query_client'
 import { ChatContext, ChatContextValue } from '../../contexts/chat_context'
 import { Session } from '../../utils'
 import { Client } from '../../utils/client'
 import { ResponseError } from '../../utils/response_error'
-import { useJoltClient } from '../use_jolt'
+import { useJoltClient, useJoltForegroundPing } from '../use_jolt'
 
 let caught: unknown
 
@@ -68,3 +71,99 @@ describe('useJoltClient', () => {
     expect((caught as ResponseError).status).toBe(401)
   })
 })
+
+describe('useJoltForegroundPing', () => {
+  const addEventListener = AppState.addEventListener as jest.Mock
+  const confirmedSubscription = {} as JoltSubscription
+
+  const PingProbe = () => {
+    useJoltForegroundPing()
+    return null
+  }
+
+  const renderForegroundPing = (joltClient: Partial<JoltClient>, { mounts = 1 } = {}) => {
+    const queryClient = buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
+    queryClient.setQueryData(['jolt-client', 'wss://jolt.test', 'a-real-token'], joltClient)
+
+    const result = render(
+      <QueryClientProvider client={queryClient}>
+        {Array.from({ length: mounts }, (_, index) => (
+          <PingProbe key={index} />
+        ))}
+      </QueryClientProvider>
+    )
+
+    const [, onChange] = addEventListener.mock.calls.at(-1) as [
+      string,
+      (_state: AppStateStatus) => void,
+    ]
+
+    return { onChange, unmount: result.unmount }
+  }
+
+  beforeEach(() => {
+    addEventListener.mockClear()
+  })
+
+  it('pings the jolt client once when the app returns to the foreground', () => {
+    const ping = jest.fn()
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+
+    onChange('background')
+    onChange('active')
+
+    expect(ping).toHaveBeenCalledTimes(1)
+  })
+
+  it('registers one listener and pings once no matter how many providers mount it', () => {
+    const ping = jest.fn()
+    const remove = jest.fn()
+    addEventListener.mockReturnValueOnce({ remove })
+    const { onChange, unmount } = renderForegroundPing(
+      { ping, subscriptions: [confirmedSubscription] },
+      { mounts: 3 }
+    )
+
+    onChange('background')
+    onChange('active')
+
+    expect(addEventListener).toHaveBeenCalledTimes(1)
+    expect(ping).toHaveBeenCalledTimes(1)
+
+    unmount()
+
+    expect(remove).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not ping when there are no confirmed subscriptions', () => {
+    const ping = jest.fn()
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [] })
+
+    onChange('background')
+    onChange('active')
+
+    expect(ping).not.toHaveBeenCalled()
+  })
+
+  it('does not ping when the app leaves the foreground', () => {
+    const ping = jest.fn()
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+
+    onChange('inactive')
+    onChange('background')
+
+    expect(ping).not.toHaveBeenCalled()
+  })
+
+  it('swallows errors from pinging a closed socket', () => {
+    const ping = jest.fn(() => {
+      throw new Error('No WebSocket')
+    })
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+
+    onChange('background')
+
+    expect(() => onChange('active')).not.toThrow()
+    expect(ping).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-native'
+import { act, renderHook } from '@testing-library/react-native'
 import type { ConversationResource } from '../../types'
 import { useMarkLatestMessageRead } from '../use_mark_latest_message_read'
 
@@ -19,15 +19,29 @@ describe('useMarkLatestMessageRead', () => {
     expect(mockMarkRead).toHaveBeenCalledTimes(1)
   })
 
-  it('waits while disabled and marks read once enabled', () => {
-    const { rerender } = renderHook<void, { enabled: boolean }>(
-      ({ enabled }) => useMarkLatestMessageRead({ conversation, messages: [], enabled }),
-      { initialProps: { enabled: false } }
+  it('marks read once on mount even while disabled', () => {
+    renderHook(() => useMarkLatestMessageRead({ conversation, messages: [], enabled: false }))
+
+    expect(mockMarkRead).toHaveBeenCalledTimes(1)
+  })
+
+  it('ignores unread bumps while disabled and marks read once enabled', () => {
+    jest.useFakeTimers()
+    const { rerender } = renderHook<void, { conversation: ConversationResource; enabled: boolean }>(
+      props => useMarkLatestMessageRead({ ...props, messages: [] }),
+      { initialProps: { conversation: { ...conversation, unreadCount: 0 }, enabled: false } }
     )
-    expect(mockMarkRead).not.toHaveBeenCalled()
+    expect(mockMarkRead).toHaveBeenCalledTimes(1)
 
-    rerender({ enabled: true })
+    rerender({ conversation: { ...conversation, unreadCount: 2 }, enabled: false })
+    act(() => jest.advanceTimersByTime(1000))
 
     expect(mockMarkRead).toHaveBeenCalledTimes(1)
+
+    rerender({ conversation: { ...conversation, unreadCount: 2 }, enabled: true })
+    act(() => jest.advanceTimersByTime(1000))
+
+    expect(mockMarkRead).toHaveBeenCalledTimes(2)
+    jest.useRealTimers()
   })
 })

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

@@ -0,0 +1,61 @@
+import { act, renderHook, waitFor } from '@testing-library/react-native'
+import { AccessibilityInfo, EmitterSubscription } from 'react-native'
+import * as Reanimated from 'react-native-reanimated'
+import { useReduceMotion } from '../use_reduce_motion'
+
+type ReduceMotionListener = (enabled: boolean) => void
+
+describe('useReduceMotion', () => {
+  let listener: ReduceMotionListener | undefined
+  const remove = jest.fn()
+
+  beforeEach(() => {
+    listener = undefined
+    remove.mockClear()
+    jest.spyOn(Reanimated, 'useReducedMotion').mockReturnValue(false)
+    jest.spyOn(AccessibilityInfo, 'isReduceMotionEnabled').mockResolvedValue(true)
+    const addEventListener: typeof AccessibilityInfo.addEventListener = (_event, handler) => {
+      listener = handler as ReduceMotionListener
+      return { remove } as unknown as EmitterSubscription
+    }
+    jest.spyOn(AccessibilityInfo, 'addEventListener').mockImplementation(addEventListener)
+  })
+
+  afterEach(() => jest.restoreAllMocks())
+
+  it('seeds synchronously from the launch-time setting', async () => {
+    jest.spyOn(Reanimated, 'useReducedMotion').mockReturnValue(true)
+    jest.mocked(AccessibilityInfo.isReduceMotionEnabled).mockResolvedValue(false)
+
+    const { result } = renderHook(() => useReduceMotion())
+
+    expect(result.current).toBe(true)
+    await waitFor(() => expect(result.current).toBe(false))
+  })
+
+  it('updates to the live setting once it resolves', async () => {
+    const { result } = renderHook(() => useReduceMotion())
+
+    expect(result.current).toBe(false)
+    await waitFor(() => expect(result.current).toBe(true))
+  })
+
+  it('follows reduceMotionChanged while mounted', async () => {
+    const { result } = renderHook(() => useReduceMotion())
+    await waitFor(() => expect(result.current).toBe(true))
+
+    act(() => listener?.(false))
+    expect(result.current).toBe(false)
+
+    act(() => listener?.(true))
+    expect(result.current).toBe(true)
+  })
+
+  it('removes the listener on unmount', () => {
+    const { unmount } = renderHook(() => useReduceMotion())
+
+    expect(remove).not.toHaveBeenCalled()
+    unmount()
+    expect(remove).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -0,0 +1,67 @@
+import { act, renderHook } from '@testing-library/react-native'
+import type { ConversationResource } from '../../types'
+import { availableFeatures } from '../use_features'
+import { useUnarchiveConversationAction } from '../use_unarchive_conversation_action'
+
+const mockSetArchived = jest.fn()
+jest.mock('../use_conversation', () => ({
+  useConversationArchive: () => ({ setArchived: mockSetArchived, isPending: false }),
+}))
+
+let mockEnabledFeatures: string[] = []
+jest.mock('../use_features', () => ({
+  ...jest.requireActual('../use_features'),
+  useFeatures: () => ({
+    features: [],
+    featureEnabled: (name: string) => mockEnabledFeatures.includes(name),
+  }),
+}))
+
+const conversation = ({
+  disabledReason = 'archived',
+  canUnarchive = true,
+}: {
+  disabledReason?: string | null
+  canUnarchive?: boolean
+} = {}) =>
+  ({
+    type: 'Conversation',
+    id: 7,
+    disabled: !!disabledReason,
+    disabledReason,
+    memberAbility: { type: 'MemberAbility', canUnarchive },
+  }) as unknown as ConversationResource
+
+const renderAction = (resource: ConversationResource) =>
+  renderHook(() => useUnarchiveConversationAction(resource)).result.current
+
+describe('useUnarchiveConversationAction', () => {
+  beforeEach(() => {
+    mockEnabledFeatures = [availableFeatures.manual_archiving_rollout]
+    jest.clearAllMocks()
+  })
+
+  it('unarchives an archived conversation the person can unarchive', () => {
+    const action = renderAction(conversation())
+
+    expect(action?.label).toBe('Unarchive')
+
+    act(() => action?.onPress())
+
+    expect(mockSetArchived).toHaveBeenCalledWith(false)
+  })
+
+  it.each([
+    ['neither mobile flag is on', () => (mockEnabledFeatures = []), conversation()],
+    ['the person cannot unarchive', () => {}, conversation({ canUnarchive: false })],
+    [
+      'the conversation is disabled for another reason',
+      () => {},
+      conversation({ disabledReason: 'safety_check' }),
+    ],
+  ])('offers nothing when %s', (_case, setup, resource) => {
+    setup()
+
+    expect(renderAction(resource)).toBeUndefined()
+  })
+})