@planningcenter/chat-react-native 4.4.1-qa-staging.12 → 4.4.1-qa-staging.14

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/action_button.tsx

@@ -7,7 +7,7 @@ import Animated, {
   ReduceMotion,
 } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { useTheme } from '../../hooks'
+import { useReduceMotion, useTheme } from '../../hooks'
 import { ConversationWarning } from '../../types'
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import { Banner } from './banner'
@@ -37,13 +37,14 @@ export const ActionButton = ({
   warnings?: ConversationWarning[]
 }) => {
   const styles = useStyles()
+  const reduceMotion = useReduceMotion() ? ReduceMotion.Always : ReduceMotion.Never
 
   return (
     <LayoutAnimationConfig skipEntering>
       {visible && (
         <Animated.View
-          entering={FadeIn.duration(300).reduceMotion(ReduceMotion.System)}
-          exiting={FadeOut.duration(300).reduceMotion(ReduceMotion.System)}
+          entering={FadeIn.duration(300).reduceMotion(reduceMotion)}
+          exiting={FadeOut.duration(300).reduceMotion(reduceMotion)}
           style={styles.container}
         >
           {warnings.length > 0 && (

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_reduce_motion.test.tsx

@@ -0,0 +1,49 @@
+import { act, renderHook, waitFor } from '@testing-library/react-native'
+import { AccessibilityInfo, EmitterSubscription } from 'react-native'
+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(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 from the system setting', 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()
+  })
+})

package/src/hooks/index.ts

@@ -23,6 +23,7 @@ export * from './use_people_person'
 export * from './use_preview_avatar_diameter'
 export * from './use_product_analytics'
 export * from './use_qualified_by_age'
+export * from './use_reduce_motion'
 export * from './use_scalable_number_of_lines'
 export * from './use_submit_age_check'
 export * from './use_suspense_api'

package/src/hooks/use_animated_message_background_color.ts

@@ -10,6 +10,7 @@ import {
   Easing,
   ReduceMotion,
 } from 'react-native-reanimated'
+import { useReduceMotion } from './use_reduce_motion'
 import { useTheme } from './use_theme'
 
 const FLASH_IN_MS = 150
@@ -18,10 +19,12 @@ const FLASH_OUT_MS = 1500
 
 export function useAnimatedMessageBackgroundColor() {
   const { colors } = useTheme()
+  const reduceMotion = useReduceMotion()
   const pressProgress = useSharedValue(0)
   const flashProgress = useSharedValue(0)
 
-  const tintColor = colors.fillColorNeutral050Base
+  const tintColor =
+    colors.name === 'dark' ? colors.fillColorNeutral040 : colors.fillColorNeutral050Base
   const tintsOnPress = Platform.OS === 'ios'
 
   const animatedBackgroundColor = useAnimatedStyle(() => {
@@ -53,12 +56,12 @@ export function useAnimatedMessageBackgroundColor() {
         withTiming(0, {
           duration: FLASH_OUT_MS,
           easing: Easing.out(Easing.ease),
-          reduceMotion: ReduceMotion.System,
+          reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never,
         }),
         ReduceMotion.Never
       )
     )
-  }, [flashProgress])
+  }, [flashProgress, reduceMotion])
 
   return {
     animatedBackgroundColor,