@planningcenter/chat-react-native 4.4.1-qa-staging.3 → 4.4.1-qa-staging.5

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

@@ -0,0 +1,102 @@
+import { HeaderHeightContext } from '@react-navigation/elements'
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { QueryClientProvider, notifyManager } from '@tanstack/react-query'
+import { act, fireEvent, render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { chatQueryClient } from '../../contexts/api_provider'
+import { SendGiphyScreen, SendGiphyScreenProps } from '../../screens/send_giphy_screen'
+
+jest.mock('../../contexts/api_provider', () => {
+  const { buildTestQueryClient } = require('../../__utils__/query_client')
+  return { chatQueryClient: buildTestQueryClient() }
+})
+
+const mockPost = jest.fn()
+jest.mock('../../hooks/use_api_client', () => ({
+  useApiClient: () => ({ chat: { post: mockPost, patch: jest.fn() } }),
+}))
+
+jest.mock('../../hooks/use_current_person', () => ({
+  useCurrentPerson: () => ({ type: 'Person', id: 1, name: 'Me', avatar: null }),
+}))
+
+jest.mock('../../hooks/use_giphy', () => ({
+  useGiphy: () => ({
+    isSearching: false,
+    result: { type: 'giphy', title: 'cat', giphy: { fixed_width: { url: 'https://gif' } } },
+    nextResult: jest.fn(),
+    prevResult: jest.fn(),
+  }),
+}))
+
+const mockDispatch = jest.fn()
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({
+    dispatch: mockDispatch,
+    goBack: jest.fn(),
+    getState: () => ({
+      routes: [
+        { name: 'Conversation', params: { conversation_id: 7 } },
+        { name: 'ConversationReply', params: { conversation_id: 7, reply_root_id: '42' } },
+        { name: 'SendGiphy' },
+      ],
+    }),
+  }),
+}))
+
+notifyManager.setNotifyFunction(fn => act(fn))
+
+const safeAreaMetrics = {
+  frame: { x: 0, y: 0, width: 390, height: 844 },
+  insets: { top: 0, right: 0, bottom: 0, left: 0 },
+}
+
+describe('SendGiphyScreen', () => {
+  let finishSend: (value: unknown) => void
+
+  beforeEach(() => {
+    chatQueryClient.clear()
+    mockDispatch.mockReset()
+    mockPost.mockReset().mockReturnValue(new Promise(resolve => (finishSend = resolve)))
+  })
+
+  afterEach(async () => {
+    await act(async () => finishSend({ data: { type: 'Message', id: 'sent', mine: true } }))
+  })
+
+  it('sends from a reply thread as a reply and returns to the thread', async () => {
+    const route = {
+      params: { conversation_id: 7, reply_root_id: '42', search_term: 'cat' },
+    } as unknown as SendGiphyScreenProps['route']
+
+    render(
+      <QueryClientProvider client={chatQueryClient}>
+        <SafeAreaProvider initialMetrics={safeAreaMetrics}>
+          <ThemeProvider value={DefaultTheme}>
+            <HeaderHeightContext.Provider value={0}>
+              <SendGiphyScreen route={route} />
+            </HeaderHeightContext.Provider>
+          </ThemeProvider>
+        </SafeAreaProvider>
+      </QueryClientProvider>
+    )
+
+    await act(async () => {
+      fireEvent.press(screen.getByLabelText('Send Giphy'))
+    })
+
+    const [{ data }] = mockPost.mock.calls[0]
+    expect(data.data.attributes.reply_root).toEqual({ id: '42' })
+    expect(mockDispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'POP_TO',
+        payload: expect.objectContaining({
+          name: 'ConversationReply',
+          params: expect.objectContaining({ reply_root_id: '42', clear_input: true }),
+        }),
+      })
+    )
+  })
+})

package/src/components/conversation/attachments/giphy_attachment.tsx

@@ -1,9 +1,9 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import React from 'react'
-import { Text, StyleSheet, Linking } from 'react-native'
+import { Text, StyleSheet } from 'react-native'
 import { useTheme } from '../../../hooks'
 import { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
-import { assertKeysAreNumbers } from '../../../utils'
+import { assertKeysAreNumbers, Linking } from '../../../utils'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { Image } from '../../display'
 
@@ -22,7 +22,6 @@ export function GiphyAttachment({
 
   function handlePress() {
     if (titleLink) {
-      // Open Giphy link in the default web browser
       Linking.openURL(titleLink)
     }
   }

package/src/components/conversation/message_form.tsx

@@ -1,7 +1,6 @@
 import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'
 import {
-  Linking,
   Platform,
   Pressable,
   ScrollView,
@@ -34,6 +33,7 @@ import {
   FileAttachment,
 } from '../../types/resources/denormalized_attachment_resource_for_create'
 import {
+  Linking,
   Log,
   MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
   platformFontWeightMedium,
@@ -214,18 +214,20 @@ function MessageFormRoot({
     if (!Keyboard.isVisible() || Platform.OS === 'ios') {
       navigation.navigate('SendGiphy', {
         conversation_id: conversation.id,
+        reply_root_id: replyRootId,
         search_term: text,
       })
     } else {
       const keyboardListener = Keyboard.addListener('keyboardDidHide', () => {
         navigation.navigate('SendGiphy', {
           conversation_id: conversation.id,
+          reply_root_id: replyRootId,
           search_term: text,
         })
         keyboardListener?.remove()
       })
     }
-  }, [conversation.id, navigation, text])
+  }, [conversation.id, navigation, replyRootId, text])
 
   const catchingUp = useRef(false)
 

package/src/components/conversation/system_message.tsx

@@ -21,7 +21,7 @@ export function SystemMessage({ message, conversationId }: SystemMessageProps) {
   const navigation = useNavigation()
   const { colors } = useTheme()
   const text = systemMessageText(names, overflowCount, action)
-  const hasPeople = personIdsForSystemEvent.length > 0
+  const isTruncated = overflowCount > 0
   const hasReactions = reactionCounts.length > 0
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
     useAnimatedMessageBackgroundColor()
@@ -53,14 +53,14 @@ export function SystemMessage({ message, conversationId }: SystemMessageProps) {
 
   return (
     <Pressable
-      onPress={hasPeople ? handlePress : undefined}
+      onPress={isTruncated ? handlePress : undefined}
       onLongPress={handleLongPress}
       onPressIn={handleMessagePressIn}
       onPressOut={handleMessagePressOut}
       android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
       accessibilityRole="button"
       accessibilityHint={
-        hasPeople
+        isTruncated
           ? 'Tap to see people. Long press for message actions.'
           : 'Long press for message actions.'
       }

package/src/hooks/use_features.ts

@@ -57,6 +57,8 @@ export const availableFeatures = {
   dm_search_clear_fix: 'ROLLOUT_MOBILE_dm_search_clear_fix',
   search: 'QA_MOBILE_search',
   search_rollout: 'ROLLOUT_MOBILE_search',
+  manual_archiving: 'QA_MOBILE_manual_archiving',
+  manual_archiving_rollout: 'ROLLOUT_MOBILE_manual_archiving',
 } as const satisfies Record<string, `${'QA' | 'ROLLOUT'}_${string}`>
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/screens/age_check/age_check_underage_screen.tsx

@@ -1,9 +1,10 @@
 import { useRoute, RouteProp } from '@react-navigation/native'
 import React from 'react'
-import { Linking, StyleSheet, View, ScrollView } from 'react-native'
+import { Linking as RNLinking, StyleSheet, View, ScrollView } from 'react-native'
 import { Heading } from '../../components'
 import { Icon, Text, TextInlineButton } from '../../components/display'
 import { useTheme } from '../../hooks'
+import { Linking } from '../../utils'
 import type { AgeCheckParams } from './screen_props'
 
 export interface AgeCheckUnderageScreenProps {
@@ -18,7 +19,7 @@ export function AgeCheckUnderageScreen({ contactEmail }: AgeCheckUnderageScreenP
 
   const openChurchAdminHelp = () => {
     if (!email) return
-    Linking.openURL(`mailto:${email}`)
+    RNLinking.openURL(`mailto:${email}`)
   }
 
   const openTerms = () => {

package/src/screens/bug_report_screen.tsx

@@ -5,15 +5,7 @@ import type {
 } from '@react-navigation/native-stack'
 import { startsWith } from 'lodash'
 import React, { useCallback, useState } from 'react'
-import {
-  View,
-  StyleSheet,
-  TextInput,
-  Linking,
-  ScrollView,
-  TouchableOpacity,
-  Platform,
-} from 'react-native'
+import { View, StyleSheet, TextInput, ScrollView, TouchableOpacity, Platform } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import {
   Button,
@@ -38,7 +30,7 @@ import { useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
 import { useReportBugAction } from '../hooks/use_report_bug_action'
 import { useUploadClient } from '../hooks/use_upload_client'
-import { ImagePicker, ImagePickerResult, platformFontWeightBold } from '../utils'
+import { ImagePicker, ImagePickerResult, Linking, platformFontWeightBold } from '../utils'
 
 const MAX_DESCRIPTION_LENGTH = 2000
 

package/src/screens/get_help_screen.tsx

@@ -1,12 +1,12 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { useCallback, useMemo } from 'react'
-import { Alert, Linking, StyleSheet, View } from 'react-native'
+import { Alert, Linking as RNLinking, StyleSheet, View } from 'react-native'
 import { Heading, PressableRow, Text, TextInlineButton } from '../components'
 import { useApiGet, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
 import { useOrganization } from '../hooks/use_organization'
 import { ResourceObject } from '../types'
-import { Clipboard } from '../utils'
+import { Clipboard, Linking } from '../utils'
 
 type GetHelpScreenRouteProps = {
   type?: 'chat' | 'general'
@@ -119,7 +119,7 @@ export function sendEmail(email: string) {
 
   const url = encodeURI(`mailto:${email}`)
 
-  Linking.openURL(url).catch(() => {
+  RNLinking.openURL(url).catch(() => {
     Alert.alert('Oops', `Unable to open: ${email}`, [
       { text: 'Copy to clipboard', onPress: () => Clipboard.setStringAsync(email) },
       { text: 'OK' },
@@ -132,7 +132,7 @@ export function placePhoneCall(phoneNumber: string) {
 
   const url = encodeURI(`tel:${phoneNumber}`)
 
-  Linking.openURL(url).catch(() => {
+  RNLinking.openURL(url).catch(() => {
     Alert.alert('Oops', `Unable to open: ${phoneNumber}`, [
       { text: 'Copy to clipboard', onPress: () => Clipboard.setStringAsync(phoneNumber) },
       { text: 'OK' },

package/src/screens/send_giphy_screen.tsx

@@ -17,16 +17,18 @@ export const SendGiphyScreenOptions = getFormSheetScreenOptions({
 
 export type SendGiphyScreenProps = StaticScreenProps<{
   conversation_id: number
+  reply_root_id?: string | null
   search_term: string
 }>
 
 export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
-  const { conversation_id, search_term } = route.params
+  const { conversation_id, reply_root_id, search_term } = route.params
   const styles = useStyles()
   const navigation = useNavigation()
 
   const { isPending, mutate } = useMessageCreateOrUpdate({
     conversationId: conversation_id,
+    replyRootId: reply_root_id,
   })
   const { isSearching, result, nextResult, prevResult } = useGiphy(search_term)
   const disabled = isPending || isSearching
@@ -53,11 +55,12 @@ export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
 
   function goBack({ clearInput = false }) {
     if (clearInput) {
+      const routeName = reply_root_id ? 'ConversationReply' : 'Conversation'
       const routes = navigation.getState()?.routes || []
-      const conversationParams = routes.find(r => r.name === 'Conversation')?.params || {}
+      const conversationParams = routes.findLast(r => r.name === routeName)?.params || {}
 
       navigation.dispatch(
-        StackActions.popTo('Conversation', {
+        StackActions.popTo(routeName, {
           ...conversationParams,
           conversation_id,
           clear_input: true,