@planningcenter/chat-react-native 3.16.0-rc.2 → 3.16.0-rc.4

package/build/utils/jolt/transform_message_event_data_to_message_resource.js

@@ -17,6 +17,8 @@ export function transformMessageEventDataToMessageResource({ data, currentPerson
             avatar: data.author_avatar,
         },
         reactionCounts: [],
+        replyCount: data.reply_count || 0,
+        replyRootId: data.reply_root_id || null,
     };
 }
 //# sourceMappingURL=transform_message_event_data_to_message_resource.js.map

package/build/utils/jolt/transform_message_event_data_to_message_resource.js.map

@@ -1 +1 @@
-{"version":3,"file":"transform_message_event_data_to_message_resource.js","sourceRoot":"","sources":["../../../src/utils/jolt/transform_message_event_data_to_message_resource.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,MAAM,UAAU,0CAA0C,CAAC,EACzD,IAAI,EACJ,eAAe,GAIhB;IACC,OAAO;QACL,IAAI,EAAE,SAAS;QACf,EAAE,EAAE,IAAI,CAAC,QAAQ;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,SAAS,EAAE,IAAI,CAAC,UAAU;QAC1B,SAAS,EAAE,IAAI,CAAC,UAAU;QAC1B,YAAY,EAAE,IAAI,CAAC,cAAc;QACjC,IAAI,EAAE,IAAI,CAAC,SAAS,KAAK,eAAe;QACxC,WAAW,EAAE,iBAAiB,CAAmC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;QACxF,MAAM,EAAE;YACN,IAAI,EAAE,QAAQ;YACd,EAAE,EAAE,IAAI,CAAC,SAAS;YAClB,IAAI,EAAE,IAAI,CAAC,WAAW;YACtB,MAAM,EAAE,IAAI,CAAC,aAAa;SAC3B;QACD,cAAc,EAAE,EAAE;KACnB,CAAA;AACH,CAAC","sourcesContent":["import { MessageResource } from '../../types'\nimport { MessageCreatedEvent } from '../../types/jolt_events/message_events'\nimport { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport { deepCamelCaseKeys } from '../deepCamelCaseKeys'\n\nexport function transformMessageEventDataToMessageResource({\n  data,\n  currentPersonId,\n}: {\n  data: MessageCreatedEvent['data']['data']\n  currentPersonId: number\n}): MessageResource {\n  return {\n    type: 'Message',\n    id: data.sort_key,\n    text: data.text,\n    html: data.html,\n    createdAt: data.created_at,\n    deletedAt: data.deleted_at,\n    textEditedAt: data.text_edited_at,\n    mine: data.author_id === currentPersonId,\n    attachments: deepCamelCaseKeys<DenormalizedAttachmentResource[]>(data.attachments) || [],\n    author: {\n      type: 'Person',\n      id: data.author_id,\n      name: data.author_name,\n      avatar: data.author_avatar,\n    },\n    reactionCounts: [],\n  }\n}\n"]}
+{"version":3,"file":"transform_message_event_data_to_message_resource.js","sourceRoot":"","sources":["../../../src/utils/jolt/transform_message_event_data_to_message_resource.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,MAAM,UAAU,0CAA0C,CAAC,EACzD,IAAI,EACJ,eAAe,GAIhB;IACC,OAAO;QACL,IAAI,EAAE,SAAS;QACf,EAAE,EAAE,IAAI,CAAC,QAAQ;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,SAAS,EAAE,IAAI,CAAC,UAAU;QAC1B,SAAS,EAAE,IAAI,CAAC,UAAU;QAC1B,YAAY,EAAE,IAAI,CAAC,cAAc;QACjC,IAAI,EAAE,IAAI,CAAC,SAAS,KAAK,eAAe;QACxC,WAAW,EAAE,iBAAiB,CAAmC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;QACxF,MAAM,EAAE;YACN,IAAI,EAAE,QAAQ;YACd,EAAE,EAAE,IAAI,CAAC,SAAS;YAClB,IAAI,EAAE,IAAI,CAAC,WAAW;YACtB,MAAM,EAAE,IAAI,CAAC,aAAa;SAC3B;QACD,cAAc,EAAE,EAAE;QAClB,UAAU,EAAE,IAAI,CAAC,WAAW,IAAI,CAAC;QACjC,WAAW,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI;KACxC,CAAA;AACH,CAAC","sourcesContent":["import { MessageResource } from '../../types'\nimport { MessageCreatedEvent } from '../../types/jolt_events/message_events'\nimport { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport { deepCamelCaseKeys } from '../deepCamelCaseKeys'\n\nexport function transformMessageEventDataToMessageResource({\n  data,\n  currentPersonId,\n}: {\n  data: MessageCreatedEvent['data']['data']\n  currentPersonId: number\n}): MessageResource {\n  return {\n    type: 'Message',\n    id: data.sort_key,\n    text: data.text,\n    html: data.html,\n    createdAt: data.created_at,\n    deletedAt: data.deleted_at,\n    textEditedAt: data.text_edited_at,\n    mine: data.author_id === currentPersonId,\n    attachments: deepCamelCaseKeys<DenormalizedAttachmentResource[]>(data.attachments) || [],\n    author: {\n      type: 'Person',\n      id: data.author_id,\n      name: data.author_name,\n      avatar: data.author_avatar,\n    },\n    reactionCounts: [],\n    replyCount: data.reply_count || 0,\n    replyRootId: data.reply_root_id || null,\n  }\n}\n"]}

package/build/utils/replies_local_feature_flag.d.ts

@@ -0,0 +1,2 @@
+export declare const REPLIES_FEATURE_ENABLED = false;
+//# sourceMappingURL=replies_local_feature_flag.d.ts.map

package/build/utils/replies_local_feature_flag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"replies_local_feature_flag.d.ts","sourceRoot":"","sources":["../../src/utils/replies_local_feature_flag.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,uBAAuB,QAAQ,CAAA"}

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.2",
+  "version": "3.16.0-rc.4",
   "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": "7049e04c5d4b3cc2b6d30b5869c66dba504244b1"
+  "gitHead": "9de20581feb4dbad2ab84082321718816506a330"
 }

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

@@ -5,6 +5,7 @@ import { useTheme } from '../../../hooks'
 import { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
 import { PlatformPressable } from '@react-navigation/elements'
 import { Image } from '../../display'
+import { assertKeysAreNumbers } from '../../../utils'
 
 export function GiphyAttachment({
   attachment,
@@ -46,20 +47,6 @@ export function GiphyAttachment({
   )
 }
 
-const assertKeysAreNumbers = (obj: Object): Record<any, number> => {
-  return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, assertNumber(value)]))
-}
-
-const assertNumber = (value: string): number => {
-  if (typeof value === 'number') return value
-
-  if (typeof value === 'string' && !isNaN(Number(value))) {
-    return Number(value)
-  }
-
-  return 0
-}
-
 const useStyles = ({ imageWidth, imageHeight }: { imageWidth: number; imageHeight: number }) => {
   const { colors } = useTheme()
   return StyleSheet.create({

package/src/components/conversation/message.tsx

@@ -1,9 +1,13 @@
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
-import { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
+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 { useInteractionGhostBackgroundColor, useTheme } from '../../hooks'
+import { Avatar, Icon, Spinner, Text, TextButton, TextInlineButton } from '../../components/display'
+import {
+  useAnimatedMessageBackgroundColor,
+  useInteractionGhostBackgroundColor,
+  useTheme,
+} from '../../hooks'
 import { MessageResource } from '../../types'
 import { ReactionCountResource } from '../../types/resources/reaction'
 import { MessageAttachments } from './message_attachments'
@@ -15,18 +19,13 @@ import {
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
   platformFontWeightMedium,
 } from '../../utils/styles'
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  interpolateColor,
-  Easing,
-} from 'react-native-reanimated'
+import Animated from 'react-native-reanimated'
 import { useLiveRelativeTime } from '../../hooks/use_live_relative_time'
 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
@@ -35,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
@@ -56,6 +57,8 @@ export function Message({
   const isPersisted = !isNewMessage(message)
   const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
+  const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
+    useAnimatedMessageBackgroundColor()
 
   useEffect(() => {
     if (pending) {
@@ -81,30 +84,6 @@ export function Message({
     }
   }
 
-  const bgFadeProgress = useSharedValue(0)
-  const pressedColor = Platform.select({
-    ios: colors.fillColorNeutral050Base,
-    default: 'transparent',
-  })
-  const animatedBackgroundColor = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      bgFadeProgress.value,
-      [0, 1],
-      ['transparent', pressedColor]
-    )
-    return {
-      backgroundColor,
-    }
-  })
-
-  const handlePressIn = () => {
-    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
-  }
-
-  const handlePressOut = () => {
-    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
-  }
-
   const handleMessageLongPress = () => {
     if (!isPersisted) return
 
@@ -113,6 +92,7 @@ export function Message({
       message_id: message.id,
       conversation_id,
       canDeleteNonAuthoredMessages,
+      inReplyScreen,
     })
   }
   const handleReactionLongPress = (reaction: ReactionCountResource) => {
@@ -136,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,
@@ -144,13 +132,15 @@ 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
       onLongPress={handleMessageLongPress}
       onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={handleMessagePressIn}
+      onPressOut={handleMessagePressOut}
       android_ripple={{ color: colors.androidRippleNeutral }}
       accessibilityHint="Long press to view message actions like reacting and copying."
     >
@@ -191,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 => (
@@ -301,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