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

package/src/components/conversations/conversation_preview.tsx

@@ -7,10 +7,19 @@ import {
   useScalableNumberOfLines,
 } from '../../hooks'
 import { ConversationPreviewData, ConversationResource } from '../../types'
-import { REACTION_EMOJIS, platformFontWeightBold } from '../../utils'
+import { REACTION_EMOJIS, isArchivedConversation, platformFontWeightBold } from '../../utils'
 import { formatDatePreview } from '../../utils/date'
+import { faBoxArchive } from '../../vendor/font_awesome_pro_solid_icons'
 import { tokens } from '../../vendor/tapestry/tokens'
-import { AvatarGroup, ConversationAvatar, Heading, Text, Badge, type BadgeProps } from '../display'
+import {
+  AvatarGroup,
+  ConversationAvatar,
+  Heading,
+  IconTile,
+  Text,
+  Badge,
+  type BadgeProps,
+} from '../display'
 import { ConversationActions } from './conversation_actions'
 import { MuteIndicator } from './mute_indicator'
 import { UnreadCountBadge } from './unread_count_badge'
@@ -42,6 +51,7 @@ export const ConversationPreview = ({
     unreadReaction,
   } = conversation
 
+  const archived = isArchivedConversation(conversation)
   const emptyConversation = !lastMessageCreatedAt
   const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'
   const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted
@@ -57,25 +67,30 @@ export const ConversationPreview = ({
   const conversationAccessibilityLabel = getConversationAccessibilityLabel({
     conversation,
     showBadges,
+    archived,
   })
 
   return (
     <ConversationActions
       conversation={conversation}
-      style={[styles.previewRow, disabled && styles.disabled, style]}
+      style={[styles.previewRow, disabled && !archived && styles.disabled, style]}
       onPress={onPress}
       accessibilityLabel={conversationAccessibilityLabel}
     >
-      <ConversationAvatar
-        conversation={conversation}
-        size="lg"
-        fallbackIconName={fallbackIconName}
-      />
+      {archived ? (
+        <IconTile icon={faBoxArchive} size="lg" testID="conversation-archived-icon" />
+      ) : (
+        <ConversationAvatar
+          conversation={conversation}
+          size="lg"
+          fallbackIconName={fallbackIconName}
+        />
+      )}
       <View style={styles.conversationBody}>
         <Heading
           numberOfLines={numberOfLinesScaledTitle}
           variant="h3"
-          style={[styles.title, isUnread && styles.unreadTitle]}
+          style={[styles.title, archived && styles.archivedTitle, isUnread && styles.unreadTitle]}
         >
           {title}
         </Heading>
@@ -193,10 +208,12 @@ function formatConversationPreviewAccessibilityLabel(preview: ConversationPrevie
 interface GetConversationAccessibilityLabelProps {
   conversation: ConversationResource
   showBadges: boolean
+  archived: boolean
 }
 const getConversationAccessibilityLabel = ({
   conversation,
   showBadges,
+  archived,
 }: GetConversationAccessibilityLabelProps) => {
   const { badges, title, conversationPreview, muted, disabled, unreadCount, unreadReaction } =
     conversation
@@ -207,7 +224,7 @@ const getConversationAccessibilityLabel = ({
   const label = {
     title,
     badge: hasBadges ? `for ${badges[0]?.pcoResourceType} ${badges[0]?.text || ''}` : '',
-    disabled: disabled ? 'Disabled' : '',
+    disabled: archived ? 'Archived' : disabled ? 'Disabled' : '',
     muted: muted ? 'Muted' : '',
     readStatus: hasUnreadMessages
       ? `${unreadCount} unread messages`
@@ -255,6 +272,9 @@ const useStyles = () => {
       fontSize: 16,
       color: colors.textColorDefaultPrimary,
     },
+    archivedTitle: {
+      color: colors.textColorDefaultSecondary,
+    },
     unreadTitle: {
       fontWeight: tokens.fontWeightBold,
     },

package/src/components/conversations/conversations.tsx

@@ -4,10 +4,14 @@ 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 { useClearConversationFilters } from '../../hooks/use_clear_conversation_filters'
 import { useConversationsJoltEvents } from '../../hooks/use_conversations_jolt_events'
+import { useFilterDropdownEnabled } from '../../hooks/use_filter_dropdown_enabled'
 import { ConversationResource } from '../../types'
+import { ArchivedResultsFooter } from './archived_results_footer'
 import { ConversationPreview, ConversationPreviewSkeleton } from './conversation_preview'
 import { ConversationsBlankState } from './conversations_blank_state'
+import { FilteredResultsFooter } from './filtered_results_footer'
 
 interface ConversationsProps {
   ListHeaderComponent?:
@@ -26,11 +30,23 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
     refetch,
     isRefetching,
     isFetched,
-    args: { chat_group_graph_id, group_source_app_name },
+    hasNextPage,
+    args: { chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived },
   } = useConversationsContext()
   const navigation = useNavigation()
   const canCreateConversations = useCanCreateConversations()
-  const isFilterApplied = !!chat_group_graph_id || !!group_source_app_name
+  const clearFilters = useClearConversationFilters()
+  const filterDropdownEnabled = useFilterDropdownEnabled()
+  const isFilterApplied =
+    !!chat_group_graph_id || !!group_source_app_name || !!show_direct_messages || !!show_archived
+  const showArchivedResultsFooter = !!show_archived && !isLoading
+  const showFilteredResultsFooter =
+    filterDropdownEnabled &&
+    isFilterApplied &&
+    !show_archived &&
+    !hasNextPage &&
+    !isLoading &&
+    conversations.length > 0
 
   const showBadges = !chat_group_graph_id
 
@@ -62,6 +78,13 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
             canCreateConversations={canCreateConversations}
           />
         }
+        ListFooterComponent={
+          showArchivedResultsFooter ? (
+            <ArchivedResultsFooter onViewActiveConversations={clearFilters} />
+          ) : showFilteredResultsFooter ? (
+            <FilteredResultsFooter />
+          ) : null
+        }
         renderItem={({ item }) => {
           if (item.type === 'loading') {
             return <ConversationPreviewSkeleton />

package/src/components/conversations/conversations_blank_state.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
+import { useClearConversationFilters } from '../../hooks/use_clear_conversation_filters'
+import { useFilterDropdownEnabled } from '../../hooks/use_filter_dropdown_enabled'
 import BlankState from '../primitive/blank_state_primitive'
 
 interface ConversationsBlankStateProps {
@@ -11,6 +13,25 @@ export function ConversationsBlankState({
   isFilterApplied,
   canCreateConversations,
 }: ConversationsBlankStateProps) {
+  const filterDropdownEnabled = useFilterDropdownEnabled()
+  const clearFilters = useClearConversationFilters()
+
+  if (filterDropdownEnabled && isFilterApplied) {
+    return (
+      <View style={styles.container}>
+        <BlankState.Root>
+          <BlankState.Imagery name="general.outlinedTextMessage" />
+          <BlankState.Content>
+            <BlankState.Heading>No matches</BlankState.Heading>
+          </BlankState.Content>
+          <BlankState.TextButton onPress={clearFilters}>
+            View all conversations
+          </BlankState.TextButton>
+        </BlankState.Root>
+      </View>
+    )
+  }
+
   return (
     <View style={styles.container}>
       <BlankState.Root>

package/src/components/conversations/filtered_results_footer.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+import { useClearConversationFilters } from '../../hooks/use_clear_conversation_filters'
+import { Text, TextButton } from '../display'
+
+export function FilteredResultsFooter() {
+  const styles = useStyles()
+  const clearFilters = useClearConversationFilters()
+
+  return (
+    <View style={styles.container}>
+      <Text variant="tertiary" style={styles.text}>
+        You&rsquo;re viewing filtered results
+      </Text>
+      <TextButton variant="tertiary" onPress={clearFilters}>
+        View all conversations
+      </TextButton>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      gap: 8,
+      paddingHorizontal: 16,
+      paddingVertical: 24,
+    },
+    text: {
+      textAlign: 'center',
+      color: colors.textColorDefaultSecondary,
+    },
+  })
+}

package/src/components/display/__tests__/filter_dropdown.test.tsx

@@ -58,7 +58,7 @@ const options = [
   { id: 'teams', label: 'Teams' },
 ]
 
-const renderFilterDropdown = () => {
+const renderFilterDropdown = ({ showMoreFilters }: { showMoreFilters?: boolean } = {}) => {
   const onSelect = jest.fn()
   const onMoreFilters = jest.fn()
 
@@ -69,6 +69,7 @@ const renderFilterDropdown = () => {
       onSelect={onSelect}
       onMoreFilters={onMoreFilters}
       triggerLabel="Groups"
+      showMoreFilters={showMoreFilters}
     />
   )
 
@@ -95,6 +96,13 @@ describe('FilterDropdown', () => {
     expect(onMoreFilters).not.toHaveBeenCalled()
   })
 
+  it('leaves More filters out when showMoreFilters is false', () => {
+    renderFilterDropdown({ showMoreFilters: false })
+
+    expect(screen.queryByRole('menuitem', { name: 'More filters' })).toBeNull()
+    expect(screen.getAllByRole('menuitem')).toHaveLength(options.length)
+  })
+
   it('calls onMoreFilters for the More filters action', () => {
     const { onSelect, onMoreFilters } = renderFilterDropdown()
 

package/src/components/display/filter_dropdown.tsx

@@ -34,6 +34,7 @@ export interface FilterDropdownProps {
   onSelect: (id: string) => void
   onMoreFilters: () => void
   triggerLabel: string
+  showMoreFilters?: boolean
 }
 
 export function FilterDropdown({
@@ -42,22 +43,22 @@ export function FilterDropdown({
   onSelect,
   onMoreFilters,
   triggerLabel,
+  showMoreFilters = true,
 }: FilterDropdownProps) {
   const styles = useStyles()
 
-  const actions: MenuAction[] = [
-    ...options.map(option => ({
-      id: option.id,
-      title: option.label,
-      state: option.id === selectedId ? ('on' as const) : ('off' as const),
-    })),
-    {
-      id: MORE_FILTERS_ID,
-      title: '',
-      displayInline: true,
-      subactions: [{ id: MORE_FILTERS_ID, title: MORE_FILTERS_LABEL }],
-    },
-  ]
+  const optionActions: MenuAction[] = options.map(option => ({
+    id: option.id,
+    title: option.label,
+    state: option.id === selectedId ? ('on' as const) : ('off' as const),
+  }))
+  const moreFiltersAction: MenuAction = {
+    id: MORE_FILTERS_ID,
+    title: '',
+    displayInline: true,
+    subactions: [{ id: MORE_FILTERS_ID, title: MORE_FILTERS_LABEL }],
+  }
+  const actions = showMoreFilters ? [...optionActions, moreFiltersAction] : optionActions
 
   const handlePressAction = ({ nativeEvent }: MenuActionEvent) => {
     if (nativeEvent.event === MORE_FILTERS_ID) {

package/src/components/display/icon_tile.tsx

@@ -0,0 +1,54 @@
+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
+
+interface IconTileProps {
+  icon: IconDefinition
+  size?: AvatarRootProps['size']
+  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
+  style?: AvatarRootProps['style']
+  testID?: string
+}
+
+export function IconTile({
+  icon,
+  size = 'lg',
+  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+  style,
+  testID,
+}: IconTileProps) {
+  const styles = useStyles()
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
+
+  return (
+    <AvatarPrimitive.Root size={size} maxFontSizeMultiplier={maxFontSizeMultiplier} style={style}>
+      <AvatarPrimitive.Mask>
+        <View style={styles.tile} testID={testID} accessibilityElementsHidden>
+          <FontAwesomeIcon icon={icon} size={ICON_SIZE_PX * fontScale} color={styles.icon.color} />
+        </View>
+      </AvatarPrimitive.Mask>
+    </AvatarPrimitive.Root>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    tile: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: colors.fillColorNeutral070,
+    },
+    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'

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

@@ -5,6 +5,7 @@ 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()
@@ -33,6 +34,9 @@ describe('useConversationArchive', () => {
     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(() => {})
   })
@@ -58,6 +62,24 @@ describe('useConversationArchive', () => {
       })
       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 },
+      })
     }
   )
 

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

@@ -81,13 +81,15 @@ describe('useJoltForegroundPing', () => {
     return null
   }
 
-  const renderForegroundPing = (joltClient: Partial<JoltClient>) => {
+  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)
 
-    render(
+    const result = render(
       <QueryClientProvider client={queryClient}>
-        <PingProbe />
+        {Array.from({ length: mounts }, (_, index) => (
+          <PingProbe key={index} />
+        ))}
       </QueryClientProvider>
     )
 
@@ -96,7 +98,7 @@ describe('useJoltForegroundPing', () => {
       (_state: AppStateStatus) => void,
     ]
 
-    return onChange
+    return { onChange, unmount: result.unmount }
   }
 
   beforeEach(() => {
@@ -105,7 +107,7 @@ describe('useJoltForegroundPing', () => {
 
   it('pings the jolt client once when the app returns to the foreground', () => {
     const ping = jest.fn()
-    const onChange = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
 
     onChange('background')
     onChange('active')
@@ -113,9 +115,29 @@ describe('useJoltForegroundPing', () => {
     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: [] })
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [] })
 
     onChange('background')
     onChange('active')
@@ -125,7 +147,7 @@ describe('useJoltForegroundPing', () => {
 
   it('does not ping when the app leaves the foreground', () => {
     const ping = jest.fn()
-    const onChange = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
 
     onChange('inactive')
     onChange('background')
@@ -137,7 +159,7 @@ describe('useJoltForegroundPing', () => {
     const ping = jest.fn(() => {
       throw new Error('No WebSocket')
     })
-    const onChange = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+    const { onChange } = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
 
     onChange('background')
 

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

@@ -1,5 +1,6 @@
 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
@@ -11,6 +12,7 @@ describe('useReduceMotion', () => {
   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
@@ -21,7 +23,17 @@ describe('useReduceMotion', () => {
 
   afterEach(() => jest.restoreAllMocks())
 
-  it('seeds from the system setting', async () => {
+  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)

package/src/hooks/index.ts

@@ -3,6 +3,7 @@ export { useApiClient } from './use_api_client'
 export * from './use_api'
 export * from './use_app_state'
 export * from './use_async_storage'
+export * from './use_can_browse_archived_conversations'
 export * from './use_at_font_scale_breakpoint'
 export * from './use_chat_permissions'
 export * from './use_create_android_ripple_color'
@@ -16,6 +17,7 @@ export * from './use_groups_groups'
 export * from './use_groups'
 export * from './use_selected_chip_background_color'
 export * from './use_interaction_tinted_background_color'
+export * from './use_manual_archiving_enabled'
 export * from './use_message_reaction_toggle'
 export * from './use_new_conversation_entry'
 export * from './use_organization'

package/src/hooks/use_can_browse_archived_conversations.ts

@@ -0,0 +1,17 @@
+import { CurrentPersonResource } from '../types'
+import { FIVE_MINUTES } from '../utils/time'
+import { useApiGet } from './use_api'
+import { currentPersonRequestArgs } from './use_current_person'
+import { useManualArchivingEnabled } from './use_manual_archiving_enabled'
+
+export const useCanBrowseArchivedConversations = (): boolean => {
+  const manualArchivingEnabled = useManualArchivingEnabled()
+  const { data: person, isFetched } = useApiGet<CurrentPersonResource>(currentPersonRequestArgs, {
+    enabled: manualArchivingEnabled,
+    staleTime: FIVE_MINUTES,
+  })
+
+  if (!manualArchivingEnabled || !isFetched) return false
+
+  return person?.canBrowseArchivedConversations ?? false
+}

package/src/hooks/use_clear_conversation_filters.ts

@@ -0,0 +1,16 @@
+import { useNavigation } from '@react-navigation/native'
+import { useCallback } from 'react'
+
+export function useClearConversationFilters() {
+  const navigation = useNavigation()
+
+  return useCallback(() => {
+    navigation.setParams({
+      title: undefined,
+      chat_group_graph_id: undefined,
+      group_source_app_name: undefined,
+      show_direct_messages: undefined,
+      show_archived: undefined,
+    })
+  }, [navigation])
+}

package/src/hooks/use_conversation.ts

@@ -6,6 +6,7 @@ import { transformGetToPost } from '../utils/client/request_helpers'
 import { Haptic } from '../utils/native_adapters'
 import { getConversationsRequestArgs } from '../utils/request/conversation'
 import { useApiClient } from './use_api_client'
+import { useCurrentPersonCache } from './use_current_person'
 import { getRequestQueryKey, SuspenseGetQueryOptions, useSuspenseGet } from './use_suspense_api'
 
 export const getConversationRequestArgs = ({ conversation_id }: { conversation_id: number }) => ({
@@ -188,6 +189,7 @@ export const useConversationDelete = ({ conversation_id }: { conversation_id: nu
 export const useConversationArchive = ({ conversation_id }: { conversation_id: number }) => {
   const apiClient = useApiClient()
   const queryClient = useQueryClient()
+  const currentPersonCache = useCurrentPersonCache()
   const conversationQueryKey = getRequestQueryKey(getConversationRequestArgs({ conversation_id }))
   const { url } = getConversationsRequestArgs()
 
@@ -201,8 +203,9 @@ export const useConversationArchive = ({ conversation_id }: { conversation_id: n
         data: { data: { type: 'Conversation', attributes: {} } },
       })
     },
-    onSuccess: () => {
+    onSuccess: (_response, archived) => {
       Haptic.notificationSuccess()
+      if (archived) currentPersonCache.update({ canBrowseArchivedConversations: true })
       queryClient.invalidateQueries({ queryKey: [url] })
       return queryClient.invalidateQueries({ queryKey: conversationQueryKey })
     },

package/src/hooks/use_current_person.ts

@@ -18,6 +18,7 @@ export const currentPersonRequestArgs = {
         'age_qualification_status',
         'direct_messages_disabled',
         'direct_messages_eligible',
+        'can_browse_archived_conversations',
         'under_18',
       ],
     },