@planningcenter/chat-react-native 4.4.1-qa-staging.13 → 4.4.1-qa-staging.15

package/src/components/conversation/reply_shadow_message.tsx

@@ -31,6 +31,7 @@ import { Avatar, Icon, IconProps, Image, Text } from '../display'
 import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
 
 const SPACE_BELOW_MESSAGE = 12
+const SPACE_BELOW_PRESSABLE = SPACE_BELOW_MESSAGE - MESSAGE_BACKGROUND_OUTSET
 
 interface ReplyShadowMessageProps extends MessageResource {
   messageId: string
@@ -99,6 +100,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
 
   return (
     <Pressable
+      style={styles.pressable}
       android_ripple={{ color: colors.androidRippleNeutral }}
       onPress={handleNavigateToReplies}
       onPressIn={handleMessagePressIn}
@@ -107,8 +109,8 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
       accessibilityHint="Navigate to reply screen for this message"
       accessibilityRole="link"
     >
+      <Animated.View style={[StyleSheet.absoluteFill, animatedBackgroundColor]} />
       <View style={styles.message}>
-        <Animated.View style={[styles.background, animatedBackgroundColor]} />
         {!message.mine && (
           <View>
             <View style={[styles.avatarWrapper, !isDeleted && styles.avatarOpacity]}>
@@ -286,17 +288,16 @@ const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}
   const tabletWidth = width >= 744 // Smallest iPad Mini's width
 
   return StyleSheet.create({
+    pressable: {
+      marginTop: -MESSAGE_BACKGROUND_OUTSET,
+      paddingTop: MESSAGE_BACKGROUND_OUTSET,
+      marginBottom: SPACE_BELOW_PRESSABLE,
+    },
     message: {
       gap: 8,
       flexDirection: mine ? 'row-reverse' : 'row',
       paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
-    },
-    background: {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      top: -MESSAGE_BACKGROUND_OUTSET,
-      bottom: SPACE_BELOW_MESSAGE - MESSAGE_BACKGROUND_OUTSET,
+      marginBottom: -SPACE_BELOW_PRESSABLE,
     },
     messageContent: {
       flex: 1,

package/src/components/conversation/system_message.tsx

@@ -13,9 +13,14 @@ import { MessageReaction } from './message_reaction'
 interface SystemMessageProps {
   message: SystemMessageResource
   conversationId: number
+  conversationDisabled: boolean
 }
 
-export function SystemMessage({ message, conversationId }: SystemMessageProps) {
+export function SystemMessage({
+  message,
+  conversationId,
+  conversationDisabled,
+}: SystemMessageProps) {
   const { reactionCounts } = message
   const styles = useStyles()
   const navigation = useNavigation()
@@ -23,6 +28,7 @@ export function SystemMessage({ message, conversationId }: SystemMessageProps) {
   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()
@@ -57,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}>
@@ -81,6 +87,7 @@ export function SystemMessage({ message, conversationId }: SystemMessageProps) {
                 onLongPress={handleReactionLongPress}
                 message={message}
                 conversationId={conversationId}
+                disabled={conversationDisabled}
               />
             ))}
           </View>
@@ -90,6 +97,13 @@ export function SystemMessage({ message, conversationId }: SystemMessageProps) {
   )
 }
 
+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': {

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

@@ -0,0 +1,106 @@
+import { fireEvent, render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { Pressable, Text } from 'react-native'
+import {
+  AudioAdapter,
+  ChatAdapters,
+  ClipboardAdapter,
+  ImagePickerAdapter,
+  MenuAction,
+  MenuAdapter,
+  MenuViewProps,
+  VideoAdapter,
+} from '../../../utils/native_adapters'
+import { FilterDropdown } from '../filter_dropdown'
+
+// Stands in for the host's native menu: every action, inline sections
+// included, becomes a pressable menu item.
+const FakeMenuView = ({ actions, onPressAction, children }: MenuViewProps) => {
+  const flatten = (items: MenuAction[]): MenuAction[] =>
+    items.flatMap(item => (item.displayInline && item.subactions ? item.subactions : [item]))
+
+  return (
+    <>
+      {children}
+      {flatten(actions).map(action => (
+        <Pressable
+          key={action.id}
+          accessibilityRole="menuitem"
+          accessibilityState={{ selected: action.state === 'on' }}
+          onPress={() => onPressAction?.({ nativeEvent: { event: action.id ?? action.title } })}
+        >
+          <Text>{action.title}</Text>
+        </Pressable>
+      ))}
+    </>
+  )
+}
+
+beforeAll(() => {
+  ChatAdapters.configure({
+    clipboard: new ClipboardAdapter({
+      getStringAsync: async () => '',
+      setStringAsync: async () => {},
+    }),
+    audio: new AudioAdapter({ useAudio: () => ({}) as any }),
+    video: new VideoAdapter({ Player: (() => null) as any }),
+    imagePicker: new ImagePickerAdapter({
+      openCameraAsync: async () => ({ canceled: true, assets: null }),
+      openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
+    }),
+    menu: new MenuAdapter({ View: FakeMenuView }),
+  })
+})
+
+const options = [
+  { id: 'all', label: 'All' },
+  { id: 'groups', label: 'Groups' },
+  { id: 'teams', label: 'Teams' },
+]
+
+const renderFilterDropdown = () => {
+  const onSelect = jest.fn()
+  const onMoreFilters = jest.fn()
+
+  render(
+    <FilterDropdown
+      options={options}
+      selectedId="groups"
+      onSelect={onSelect}
+      onMoreFilters={onMoreFilters}
+      triggerLabel="Groups"
+    />
+  )
+
+  return { onSelect, onMoreFilters }
+}
+
+describe('FilterDropdown', () => {
+  it('hands the menu every option, the selected one checked, then More filters', () => {
+    renderFilterDropdown()
+
+    expect(screen.getByRole('button', { name: 'Groups' })).toBeTruthy()
+    expect(
+      screen.getAllByRole('menuitem').map(item => [item.props.accessibilityState.selected])
+    ).toEqual([[false], [true], [false], [false]])
+    expect(screen.getByRole('menuitem', { name: 'More filters' })).toBeTruthy()
+  })
+
+  it('calls onSelect with the id of the pressed option', () => {
+    const { onSelect, onMoreFilters } = renderFilterDropdown()
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'Teams' }))
+
+    expect(onSelect).toHaveBeenCalledWith('teams')
+    expect(onMoreFilters).not.toHaveBeenCalled()
+  })
+
+  it('calls onMoreFilters for the More filters action', () => {
+    const { onSelect, onMoreFilters } = renderFilterDropdown()
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'More filters' }))
+
+    expect(onMoreFilters).toHaveBeenCalledTimes(1)
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+})

package/src/components/display/filter_dropdown.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+import {
+  MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
+  Menu,
+  MenuAction,
+  MenuActionEvent,
+  platformFontWeightBold,
+} from '../../utils'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { Icon } from './icon'
+import { Text } from './text'
+
+// =================================
+// ====== Constants ================
+// =================================
+
+const MORE_FILTERS_ID = 'more_filters'
+const MORE_FILTERS_LABEL = 'More filters'
+
+// =================================
+// ====== Component ================
+// =================================
+
+export interface FilterDropdownOption {
+  id: string
+  label: string
+}
+
+export interface FilterDropdownProps {
+  options: FilterDropdownOption[]
+  selectedId: string
+  onSelect: (id: string) => void
+  onMoreFilters: () => void
+  triggerLabel: string
+}
+
+export function FilterDropdown({
+  options,
+  selectedId,
+  onSelect,
+  onMoreFilters,
+  triggerLabel,
+}: 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 handlePressAction = ({ nativeEvent }: MenuActionEvent) => {
+    if (nativeEvent.event === MORE_FILTERS_ID) {
+      onMoreFilters()
+    } else {
+      onSelect(nativeEvent.event)
+    }
+  }
+
+  return (
+    <Menu.View actions={actions} onPressAction={handlePressAction} style={styles.container}>
+      <View
+        style={styles.trigger}
+        accessible
+        accessibilityRole="button"
+        accessibilityHint="Opens filter options"
+      >
+        <Text
+          style={styles.triggerLabel}
+          numberOfLines={1}
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+        >
+          {triggerLabel}
+        </Text>
+        <Icon
+          name="general.downChevron"
+          style={styles.triggerIcon}
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          accessibilityElementsHidden
+        />
+      </View>
+    </Menu.View>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      alignSelf: 'flex-start',
+    },
+    trigger: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+      paddingVertical: 4,
+    },
+    triggerLabel: {
+      flexShrink: 1,
+      fontWeight: platformFontWeightBold,
+      color: colors.textColorDefaultPrimary,
+    },
+    triggerIcon: {
+      fontSize: tokens.fontSizeSm,
+      color: colors.iconColorDefaultPrimary,
+    },
+  })
+}

package/src/components/display/index.ts

@@ -23,6 +23,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/hooks/__tests__/use_conversation_archive.test.tsx

@@ -0,0 +1,130 @@
+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 { 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: [] })
+    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)
+    }
+  )
+
+  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_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()
+  })
+})