@planningcenter/chat-react-native 3.16.0-rc.3 → 3.16.0-rc.5

package/build/utils/replies_local_feature_flag.js

@@ -0,0 +1,3 @@
+// TODO: Replace this whole file with the flipper flag
+export const REPLIES_FEATURE_ENABLED = false;
+//# sourceMappingURL=replies_local_feature_flag.js.map

package/build/utils/replies_local_feature_flag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"replies_local_feature_flag.js","sourceRoot":"","sources":["../../src/utils/replies_local_feature_flag.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,KAAK,CAAA","sourcesContent":["// TODO: Replace this whole file with the flipper flag\nexport const REPLIES_FEATURE_ENABLED = false\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.16.0-rc.3",
+  "version": "3.16.0-rc.5",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "41458eebf252d441367b1c30a6b35e5422486bf2"
+  "gitHead": "fbd2ce7be47ac372eb6bcd876c7db571681c7219"
 }

package/src/components/conversation/message.tsx

@@ -2,7 +2,7 @@ import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
 import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { MessageReaction } from '../../components/conversation/message_reaction'
-import { Avatar, Icon, Spinner, Text, TextInlineButton } from '../../components/display'
+import { Avatar, Icon, Spinner, Text, TextButton, TextInlineButton } from '../../components/display'
 import {
   useAnimatedMessageBackgroundColor,
   useInteractionGhostBackgroundColor,
@@ -25,6 +25,7 @@ import { MessageReadReceipts } from './message_read_receipts'
 import { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
 import { Haptic } from '../../utils/native_adapters'
 import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
+import { REPLIES_FEATURE_ENABLED } from '../../utils'
 
 /** Message
  * Component for display of a message within a conversation list
@@ -33,12 +34,14 @@ interface MessageProps extends MessageResource {
   canDeleteNonAuthoredMessages: boolean
   conversation_id: number
   latestReadMessageSortKey?: string
+  inReplyScreen?: boolean
 }
 
 export function Message({
   canDeleteNonAuthoredMessages,
   conversation_id,
   latestReadMessageSortKey,
+  inReplyScreen,
   ...message
 }: MessageProps) {
   const { text, reactionCounts, pending, error } = message
@@ -89,6 +92,7 @@ export function Message({
       message_id: message.id,
       conversation_id,
       canDeleteNonAuthoredMessages,
+      inReplyScreen,
     })
   }
   const handleReactionLongPress = (reaction: ReactionCountResource) => {
@@ -112,6 +116,14 @@ export function Message({
     })
   }
 
+  const handleNavigateToReplyPress = () => {
+    navigation.navigate('ConversationReply', {
+      conversation_id,
+      reply_root_id: message.id,
+      // TODO: Add a way to pass the reply root author's name
+    })
+  }
+
   const metaProps = {
     authorName: message.author.name,
     createdAt: message.createdAt,
@@ -120,6 +132,8 @@ export function Message({
   const renderAuthor = (!message.mine && message.renderAuthor) || false
   const messageBottomMargin = message.lastInGroup ? 12 : hasReactions || showMessageMeta ? 8 : 4
   const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
+  const showReplyCountButton =
+    !inReplyScreen && message.replyRootId === message.id && REPLIES_FEATURE_ENABLED
 
   return (
     <Pressable
@@ -127,7 +141,7 @@ export function Message({
       onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}
       onPressIn={handleMessagePressIn}
       onPressOut={handleMessagePressOut}
-      android_ripple={{ color: colors.androidRippleNeutral }}
+      android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
       accessibilityHint="Long press to view message actions like reacting and copying."
     >
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
@@ -167,6 +181,17 @@ export function Message({
               </View>
             )}
           </View>
+          {showReplyCountButton && (
+            <TextButton
+              variant="footnote"
+              onPress={handleNavigateToReplyPress}
+              style={styles.messageReplyCount}
+              accessibilityHint="Navigates to reply screen for this message"
+              accessibilityRole="link"
+            >
+              {message.replyCount} replies
+            </TextButton>
+          )}
           {hasReactions && (
             <View style={styles.messageReactions}>
               {reactionCounts.map(reaction => (
@@ -277,6 +302,9 @@ const useMessageStyles = ({ mine }: MessageResource) => {
       gap: 4,
       justifyContent: mine ? 'flex-end' : 'flex-start',
     },
+    messageReplyCount: {
+      alignSelf: mine ? 'flex-end' : 'flex-start',
+    },
     messageMeta: {
       flexDirection: 'row',
       alignItems: 'center',

package/src/components/conversation/message_form.tsx

@@ -15,11 +15,12 @@ import {
   ViewProps,
   Keyboard,
 } from 'react-native'
-import { Icon, IconButton, Text, TextButton } from '../../components'
+import { Heading, Icon, IconButton, IconString, Text, TextButton } from '../../components'
 import {
   useCreateAndroidRippleColor,
   useTheme,
   useInteractionGhostBackgroundColor,
+  useScalableNumberOfLines,
 } from '../../hooks'
 import { ConversationResource, MessageResource } from '../../types'
 
@@ -27,7 +28,12 @@ import { ConversationScreenProps } from '../../screens/conversation_screen'
 
 import { ChatContext } from '../../contexts/chat_context'
 import { Haptic, ImagePicker, ImagePickerResult } from '../../utils/native_adapters'
-import { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils'
+import {
+  MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
+  REPLIES_FEATURE_ENABLED,
+  platformFontWeightMedium,
+  platformPressedOpacityStyle,
+} from '../../utils'
 import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
 import { useMessageDraft } from '../../hooks/use_message_draft'
 import {
@@ -53,6 +59,7 @@ export const MessageForm = {
 interface MessagesFormRootProps extends ViewProps {
   conversation: ConversationResource
   currentlyEditingMessage?: MessageResource | null
+  replyRootId?: string
 }
 
 const MessageFormContext = React.createContext<{
@@ -66,6 +73,7 @@ const MessageFormContext = React.createContext<{
   attachmentUploader?: ReturnType<typeof useAttachmentUploader>
   currentlyEditingMessage?: MessageResource | null
   reset: () => void
+  replyRootId?: string
 }>({
   text: '',
   setText: (_text: string) => {},
@@ -76,6 +84,7 @@ const MessageFormContext = React.createContext<{
   setUsingGiphy: (_usingGiphy: boolean) => {},
   currentlyEditingMessage: null,
   reset: () => {},
+  replyRootId: undefined,
 })
 
 const GIPHY_MAX_LENGTH = 50
@@ -85,6 +94,7 @@ function MessageFormRoot({
   conversation,
   currentlyEditingMessage,
   children,
+  replyRootId,
 }: MessagesFormRootProps) {
   const { giphyApiKey } = useContext(ChatContext)
   const canGiphy = !!giphyApiKey && !currentlyEditingMessage
@@ -105,6 +115,7 @@ function MessageFormRoot({
   } = useMessageCreateOrUpdate({
     conversationId: conversation.id,
     message: currentlyEditingMessage || undefined,
+    replyRootId,
   })
   const attachmentUploader = useAttachmentUploader({
     conversationId: conversation.id,
@@ -236,10 +247,12 @@ function MessageFormRoot({
         attachmentUploader,
         currentlyEditingMessage,
         reset,
+        replyRootId,
       }}
     >
       <View style={styles.container}>
         <EditingIndicator />
+        <ReplyIndicator />
         <View style={styles.textInputContainer}>{children}</View>
       </View>
     </MessageFormContext.Provider>
@@ -529,25 +542,76 @@ function MessageFormCommands() {
 
 function EditingIndicator() {
   const { currentlyEditingMessage, reset } = React.useContext(MessageFormContext)
-  const styles = useMessageFormStyles()
 
   if (!currentlyEditingMessage) {
     return null
   }
 
   return (
-    <View style={styles.editingIndicator}>
-      <View style={styles.editingIndicatorTitleContainer}>
-        <Icon name="accounts.editor" size={16} />
-        <Text variant="tertiary" style={styles.editingIndicatorTitle}>
-          Editing message
-        </Text>
+    <FormIndicatorRow
+      title="Editing message"
+      buttonText="Cancel"
+      accessibilityHint="Exit message editing mode without saving"
+      iconName="accounts.editor"
+      onPress={() => reset()}
+    />
+  )
+}
+
+function ReplyIndicator() {
+  const { replyRootId } = React.useContext(MessageFormContext)
+  const navigation = useNavigation()
+
+  if (!REPLIES_FEATURE_ENABLED || !replyRootId) return null
+
+  return (
+    <FormIndicatorRow
+      title="Reply" // TODO: Get root reply author
+      buttonText="Exit replies"
+      accessibilityHint="Return to the main conversation"
+      iconName="registrations.undo"
+      onPress={() => navigation.goBack()}
+    />
+  )
+}
+
+interface FormIndicatorRowProps {
+  title: string
+  buttonText: string
+  accessibilityHint: string
+  onPress: () => void
+  iconName: IconString
+}
+
+function FormIndicatorRow({
+  title,
+  buttonText,
+  accessibilityHint,
+  iconName,
+  onPress,
+}: FormIndicatorRowProps) {
+  const styles = useMessageFormStyles()
+  const scalableNumberOfLines = useScalableNumberOfLines(1)
+
+  return (
+    <View style={styles.formIndicatorRow}>
+      <View style={styles.formIndicatorRowTitleContainer}>
+        <Icon name={iconName} size={16} style={styles.formIndicatorRowIcon} />
+        <Heading
+          variant="h4"
+          style={styles.formIndicatorRowTitle}
+          numberOfLines={scalableNumberOfLines}
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+        >
+          {title}
+        </Heading>
       </View>
       <TextButton
-        onPress={() => reset()}
-        accessibilityHint="Exit message editing mode without saving"
+        onPress={onPress}
+        accessibilityHint={accessibilityHint}
+        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
       >
-        Cancel
+        {buttonText}
       </TextButton>
     </View>
   )
@@ -681,20 +745,26 @@ const useMessageFormStyles = () => {
       paddingHorizontal: 16,
       paddingVertical: 4,
     },
-    editingIndicator: {
+    formIndicatorRow: {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
       gap: 8,
       paddingBottom: 12,
     },
-    editingIndicatorTitleContainer: {
+    formIndicatorRowTitleContainer: {
       flexDirection: 'row',
       alignItems: 'center',
       gap: 8,
+      flex: 1,
+    },
+    formIndicatorRowIcon: {
+      color: theme.colors.iconColorDefaultSecondary,
     },
-    editingIndicatorTitle: {
+    formIndicatorRowTitle: {
       fontWeight: platformFontWeightMedium,
+      textTransform: 'none',
+      flexShrink: 1,
     },
   })
 }

package/src/components/conversation/reply_connectors.tsx

@@ -6,7 +6,7 @@ import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
 } from '../../utils/styles'
-import { REPLIES_FEATURE_ENABLED } from '../../screens/conversation_screen'
+import { REPLIES_FEATURE_ENABLED } from '../../utils'
 
 const MY_REPLY_CONNECTOR_WIDTH = 38
 const CONNECTOR_BORDER_WIDTH = 4

package/src/components/conversation/shadow_message.tsx

@@ -23,22 +23,29 @@ import {
 import Animated from 'react-native-reanimated'
 import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
 import { assertKeysAreNumbers } from '../../utils'
+import { useNavigation } from '@react-navigation/native'
 
-interface ShadowMessageProps extends MessageResource {}
+interface ShadowMessageProps extends MessageResource {
+  conversation_id: number
+}
 
-export function ShadowMessage({ ...message }: ShadowMessageProps) {
+export function ShadowMessage({ conversation_id, ...message }: ShadowMessageProps) {
   const { text } = message
   const styles = useStyles(message)
   const { colors } = useTheme()
+  const navigation = useNavigation()
+
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
     useAnimatedMessageBackgroundColor()
   const scalableNumberOfLines = useScalableNumberOfLines(2)
 
-  const replyCount = 0 // TODO: Get reply count from message object
-
   const handleNavigateToReplies = () => {
-    console.log('Navigate to replies') // TODO: Implement navigate to a reply screen
+    navigation.navigate('ConversationReply', {
+      conversation_id,
+      reply_root_id: message.id,
+      // TODO: Add a way to pass the reply root author's name
+    })
   }
 
   return (
@@ -47,7 +54,8 @@ export function ShadowMessage({ ...message }: ShadowMessageProps) {
       onPress={handleNavigateToReplies}
       onPressIn={handleMessagePressIn}
       onPressOut={handleMessagePressOut}
-      accessibilityHint="Navigate to all replies for this message."
+      accessibilityHint="Navigate to reply screen for this message"
+      accessibilityRole="link"
     >
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
         {!message.mine && (
@@ -81,7 +89,7 @@ export function ShadowMessage({ ...message }: ShadowMessageProps) {
           </View>
           <View style={styles.messageMeta}>
             <Text variant="footnote" style={styles.replyCountText}>
-              {replyCount} replies
+              {message.replyCount} replies
             </Text>
           </View>
         </View>

package/src/components/display/icon.tsx

@@ -17,6 +17,7 @@ import * as logomark from '@planningcenter/icons/paths/logomark'
 import * as people from '@planningcenter/icons/paths/people'
 import * as services from '@planningcenter/icons/paths/services'
 import * as publishing from '@planningcenter/icons/paths/publishing'
+import * as registrations from '@planningcenter/icons/paths/registrations'
 
 // =================================
 // ====== Constants ================
@@ -37,6 +38,7 @@ const ICONS = {
   people,
   services,
   publishing,
+  registrations,
 } as const
 
 export type IconStyle = ViewStyle & {
@@ -61,6 +63,7 @@ export type IconString =
   | `people.${IconName<'people'>}`
   | `services.${IconName<'services'>}`
   | `publishing.${IconName<'publishing'>}`
+  | `registrations.${IconName<'registrations'>}`
 
 // =================================
 // ====== Component ================

package/src/hooks/use_conversation_messages.ts

@@ -7,14 +7,14 @@ import {
 } from './use_suspense_api'
 
 export const useConversationMessages = (
-  { conversation_id }: { conversation_id: number },
+  { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string },
   opts?: SuspensePaginatorOptions
 ) => {
   const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>(
-    getMessagesRequestArgs({ conversation_id }),
+    getMessagesRequestArgs({ conversation_id, reply_root_id }),
     opts
   )
-  const queryKey = getMessagesQueryKey({ conversation_id })
+  const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
   const messages = useMemo(
     () =>
       data
@@ -28,29 +28,49 @@ export const useConversationMessages = (
   return { messages, refetch, isRefetching, fetchNextPage, queryKey }
 }
 
-export const getMessagesRequestArgs = ({ conversation_id }: { conversation_id: number }) => ({
-  url: `/me/conversations/${conversation_id}/messages`,
-  data: {
-    perPage: 25,
-    fields: {
-      Message: [
-        'text',
-        'text_edited_at',
-        'mine',
-        'attachments',
-        'created_at',
-        'deleted_at',
-        'author',
-        'reaction_counts',
-      ],
-      Person: ['name', 'avatar'],
-      ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],
+export const getMessagesRequestArgs = ({
+  conversation_id,
+  reply_root_id,
+}: {
+  conversation_id: number
+  reply_root_id?: string
+}) => {
+  const url = reply_root_id
+    ? `/me/conversations/${conversation_id}/messages/${reply_root_id}/replies`
+    : `/me/conversations/${conversation_id}/messages`
+
+  return {
+    url,
+    data: {
+      perPage: 25,
+      fields: {
+        Message: [
+          'text',
+          'text_edited_at',
+          'mine',
+          'attachments',
+          'created_at',
+          'deleted_at',
+          'author',
+          'reaction_counts',
+          'reply_count',
+          'reply_root',
+        ],
+        Person: ['name', 'avatar'],
+        ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],
+      },
+      include: ['author', 'reaction_counts'],
     },
-    include: ['author', 'reaction_counts'],
-  },
-})
+  }
+}
 
-export const getMessagesQueryKey = ({ conversation_id }: { conversation_id: number }) => {
-  const requestArgs = getMessagesRequestArgs({ conversation_id })
+export const getMessagesQueryKey = ({
+  conversation_id,
+  reply_root_id,
+}: {
+  conversation_id: number
+  reply_root_id?: string
+}) => {
+  const requestArgs = getMessagesRequestArgs({ conversation_id, reply_root_id })
   return getRequestQueryKey(requestArgs)
 }

package/src/hooks/use_message_create_or_update.ts

@@ -18,9 +18,10 @@ import { startMessageCreationTracking } from '../utils/performance_tracking'
 interface Props {
   conversationId: number
   message?: MessageResource
+  replyRootId?: string
 }
 
-export function useMessageCreateOrUpdate({ conversationId, message }: Props) {
+export function useMessageCreateOrUpdate({ conversationId, message, replyRootId }: Props) {
   const messageId = message?.id || null
   const isEditing = !isNewMessage(message)
   const apiClient = useApiClient()
@@ -38,7 +39,11 @@ export function useMessageCreateOrUpdate({ conversationId, message }: Props) {
       const fieldsWithValueJoined = Object.fromEntries(
         Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
       )
-      let attributes: any = { text, ...(attachments ? { attachments } : {}) }
+      let attributes: any = {
+        text,
+        ...(attachments ? { attachments } : {}),
+        ...(replyRootId ? { reply_root: { id: replyRootId } } : {}),
+      }
       if (!isEditing) {
         const idempotentKey = insecureUUID()
         attributes.idempotent_key = idempotentKey

package/src/hooks/use_suspense_api.ts

@@ -14,6 +14,7 @@ import { ResponseError } from '../utils/response_error'
 
 interface SuspenseGetOptions extends GetRequest {
   app?: App
+  reply_root_id?: string
 }
 
 export type SuspenseGetQueryOptions<T extends ResourceObject | ResourceObject[]> = Omit<
@@ -114,10 +115,12 @@ export type RequestQueryKey = [
   SuspenseGetOptions['data'],
   SuspenseGetOptions['headers'],
   SuspenseGetOptions['app'],
+  SuspenseGetOptions['reply_root_id'],
 ]
 export const getRequestQueryKey = (args: SuspenseGetOptions): RequestQueryKey => [
   args.url,
   args.data,
   args.headers,
   args.app || 'chat',
+  args.reply_root_id,
 ]

package/src/navigation/index.tsx

@@ -184,6 +184,12 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    ConversationReply: {
+      screen: ConversationScreen,
+      options: {
+        title: 'Reply', // TODO: Get root reply author
+      },
+    },
     TeamConversation: {
       screen: TeamConversationScreen,
       options: {

package/src/screens/conversation_screen.tsx

@@ -35,10 +35,10 @@ import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 
-export const REPLIES_FEATURE_ENABLED = false
-
 export type ConversationRouteProps = {
   conversation_id: number
+  reply_root_id?: string
+  replyRootAuthor?: string
   chat_group_graph_id?: string
   clear_input?: boolean
   editing_message_id?: number | null
@@ -53,10 +53,11 @@ export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 export function ConversationScreen({ route }: ConversationScreenProps) {
   const styles = useStyles()
   const navigation = useNavigation()
-  const { conversation_id, editing_message_id } = route.params
+  const { conversation_id, editing_message_id, reply_root_id } = route.params
   const { data: conversation } = useConversation(route.params)
   const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
     conversation_id,
+    reply_root_id,
   })
   useConversationJoltEvents({ conversationId: conversation_id })
   useConversationMessagesJoltEvents({ conversationId: conversation_id })
@@ -86,12 +87,14 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   }, [])
 
   useEffect(() => {
+    if (reply_root_id) return
+
     navigation.setParams({
       title: title,
       badge: badges?.[0],
       deleted: conversation?.deleted,
     })
-  }, [navigation, title, badges, conversation?.deleted])
+  }, [navigation, title, badges, conversation?.deleted, reply_root_id])
 
   if (!conversation || conversation.deleted) {
     return (
@@ -139,6 +142,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
                   canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
                   conversation_id={conversation_id}
                   latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
+                  inReplyScreen={!!reply_root_id}
                 />
               )
             }}
@@ -152,6 +156,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
         {canReply ? (
           <MessageForm.Root
             conversation={conversation}
+            replyRootId={reply_root_id}
             currentlyEditingMessage={currentlyEditingMessage}
             // We use a separate key so that it remounts component when switching between new
             // and edit message. This simplifies internal state handling.