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

package/src/components/conversation/message.tsx

@@ -25,7 +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, AVATAR_CONNECTOR_SPACING } from './reply_connectors'
-import { pluralize, REPLIES_FEATURE_ENABLED } from '../../utils'
+import { pluralize } from '../../utils'
 import { useConversationMessage } from '../../hooks/use_conversation_message'
 
 /** Message
@@ -36,6 +36,7 @@ interface MessageProps extends MessageResource {
   conversation_id: number
   latestReadMessageSortKey?: string
   inReplyScreen?: boolean
+  repliesEnabled?: boolean
 }
 
 export function Message({
@@ -43,6 +44,7 @@ export function Message({
   conversation_id,
   latestReadMessageSortKey,
   inReplyScreen,
+  repliesEnabled,
   ...message
 }: MessageProps) {
   const { text, reactionCounts, pending, error } = message
@@ -73,7 +75,7 @@ export function Message({
 
   const renderAuthor = (!message.mine && message.renderAuthor) || false
   const showReplyCountButton =
-    !inReplyScreen && message.replyRootId === message.id && REPLIES_FEATURE_ENABLED
+    !inReplyScreen && message.replyRootId === message.id && repliesEnabled
   const isReplyRootMessage = message.replyRootId === message.id
   const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt
 
@@ -181,7 +183,9 @@ export function Message({
             ) : (
               <View style={styles.avatarPlaceholder} />
             )}
-            <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
+            {repliesEnabled && (
+              <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
+            )}
           </View>
         )}
         <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>
@@ -282,7 +286,7 @@ export function Message({
             </View>
           )}
         </View>
-        {message.mine && (
+        {repliesEnabled && message.mine && (
           <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
         )}
       </Animated.View>

package/src/components/conversation/message_form.tsx

@@ -30,10 +30,10 @@ import { ChatContext } from '../../contexts/chat_context'
 import { Haptic, ImagePicker, ImagePickerResult } from '../../utils/native_adapters'
 import {
   MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
-  REPLIES_FEATURE_ENABLED,
   platformFontWeightMedium,
   platformPressedOpacityStyle,
 } from '../../utils'
+import { availableFeatures, useFeatures } from '../../hooks/use_features'
 import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
 import { useMessageDraft } from '../../hooks/use_message_draft'
 import {
@@ -566,9 +566,11 @@ function EditingIndicator() {
 function ReplyIndicator() {
   const { replyRootId, replyRootAuthorFirstName } = React.useContext(MessageFormContext)
   const navigation = useNavigation()
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
   const title = replyRootAuthorFirstName ? `Reply to ${replyRootAuthorFirstName}` : 'Reply'
 
-  if (!REPLIES_FEATURE_ENABLED || !replyRootId) return null
+  if (!repliesEnabled || !replyRootId) return null
 
   return (
     <FormIndicatorRow

package/src/components/conversation/reply_connectors.tsx

@@ -6,7 +6,6 @@ import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
 } from '../../utils/styles'
-import { REPLIES_FEATURE_ENABLED } from '../../utils'
 
 const MY_REPLY_CONNECTOR_WIDTH = 38
 const CONNECTOR_BORDER_WIDTH = 4
@@ -22,7 +21,6 @@ export function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConne
   const styles = useStyles()
   const { nextRendersAuthor, threadPosition, renderAuthor, isReplyShadowMessage } = message
 
-  if (!REPLIES_FEATURE_ENABLED) return null
   if (messageBubbleHeight === 0) return null // Prevents UI shifting
 
   const connectorMap: Record<string, React.ReactNode | null> = {
@@ -59,7 +57,6 @@ export function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnecto
   const { nextRendersAuthor, threadPosition, prevIsMyReply, nextIsMyReply, isReplyShadowMessage } =
     message
 
-  if (!REPLIES_FEATURE_ENABLED) return null
   if (messageBubbleHeight === 0) return null // Prevents UI shifting
 
   const connectorMap: Record<string, React.ReactNode | null> = {

package/src/components/conversations/conversation_actions.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import {
   AccessibilityActionEvent,
   Platform,
+  Pressable,
   StyleProp,
   StyleSheet,
   View,
@@ -10,7 +11,6 @@ import {
 import ReanimatedSwipeable, {
   SwipeableMethods,
 } from 'react-native-gesture-handler/ReanimatedSwipeable'
-import { Pressable } from 'react-native-gesture-handler'
 import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme, useCreateAndroidRippleColor } from '../../hooks'
 import {

package/src/hooks/use_features.ts

@@ -0,0 +1,47 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useCallback } from 'react'
+import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
+import { useApiClient } from './use_api_client'
+import type { FeatureResource } from '../types/resources/feature_resource'
+import { ApiCollection } from '../types'
+
+export function useFeatures() {
+  const apiClient = useApiClient()
+  const requestArgs = getFeaturesRequestArgs()
+
+  const { data } = useSuspenseQuery({
+    queryKey: getFeaturesQueryKey(),
+    queryFn: () => {
+      return apiClient.chat
+        .get<ApiCollection<FeatureResource>>(requestArgs)
+        .catch(() => stableEmptyFeatures)
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  })
+
+  const features = data.data
+
+  const featureEnabled = useCallback(
+    (featureName: string) =>
+      features.some(feature => feature.name === featureName && feature.enabled),
+    [features]
+  )
+
+  return {
+    features,
+    featureEnabled,
+  }
+}
+
+export const availableFeatures = {
+  threaded_replies: 'QA_MOBILE_threaded_replies',
+}
+
+const stableEmptyFeatures: ApiCollection<FeatureResource> = {
+  data: [],
+  links: {},
+  meta: {
+    count: 0,
+    totalCount: 0,
+  },
+}

package/src/screens/conversation_screen.tsx

@@ -35,7 +35,7 @@ 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'
 import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
-import { REPLIES_FEATURE_ENABLED } from '../utils'
+import { availableFeatures, useFeatures } from '../hooks/use_features'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -66,7 +66,13 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   useConversationMessagesJoltEvents({ conversationId: conversation_id })
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const messagesWithSeparators = groupMessages({ ms: messages, inReplyScreen: !!reply_root_id })
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
+  const messagesWithSeparators = groupMessages({
+    ms: messages,
+    inReplyScreen: !!reply_root_id,
+    repliesEnabled,
+  })
   const noMessages = messagesWithSeparators.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
@@ -164,6 +170,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
                   conversation_id={conversation_id}
                   latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
                   inReplyScreen={!!reply_root_id}
+                  repliesEnabled={repliesEnabled}
                 />
               )
             }}
@@ -252,9 +259,14 @@ type ReplyShadowMessage = {
 interface GroupMessagesProps {
   ms: MessageResource[]
   inReplyScreen?: boolean
+  repliesEnabled?: boolean
 }
 
-export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
+export const groupMessages = ({
+  ms,
+  inReplyScreen,
+  repliesEnabled = false,
+}: GroupMessagesProps) => {
   let enrichedMessages: (MessageResource | DateSeparator | ReplyShadowMessage)[] = []
   let encounteredOneOfMyMessages = false
 
@@ -298,7 +310,7 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
     message.nextRendersAuthor = nextMessage?.renderAuthor
     message.isReplyShadowMessage = false
     message.nextIsReplyShadowMessage =
-      REPLIES_FEATURE_ENABLED &&
+      repliesEnabled &&
       nextMessageInThread &&
       !nextMessageThreadRoot &&
       (nextMessageDifferentThread || nextMessageIsDateSeparator)
@@ -319,7 +331,7 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
 
     enrichedMessages.push(message)
 
-    if (insertReplyShadowMessage && REPLIES_FEATURE_ENABLED) {
+    if (insertReplyShadowMessage && repliesEnabled) {
       enrichedMessages.push({
         type: 'ReplyShadowMessage',
         id: `${message.id}-${message.replyRootId}`,

package/src/screens/message_actions_screen.tsx

@@ -14,7 +14,7 @@ import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../types/resources/reaction'
 import { Clipboard, Haptic } from '../utils/native_adapters'
 import { MessageResource } from '../types'
-import { REPLIES_FEATURE_ENABLED } from '../utils'
+import { availableFeatures, useFeatures } from '../hooks/use_features'
 
 export const MessageActionsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: [0.5],
@@ -76,6 +76,8 @@ function MessageActionsScreenContent({
   const navigation = useNavigation()
   const apiClient = useApiClient()
   const styles = useStyles()
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
 
   const myReactions = message?.reactionCounts
     .filter(reaction => reaction.mine)
@@ -190,7 +192,7 @@ function MessageActionsScreenContent({
         ))}
       </View>
       <View style={styles.actions}>
-        {REPLIES_FEATURE_ENABLED && !inReplyScreen && (
+        {repliesEnabled && !inReplyScreen && (
           <FormSheet.Action
             onPress={handleReplyPress}
             title="Reply to message"

package/src/types/resources/feature_resource.ts

@@ -0,0 +1,6 @@
+export interface FeatureResource {
+  type: 'Feature'
+  id: string
+  name: string
+  enabled: boolean
+}

package/src/utils/index.ts

@@ -9,4 +9,3 @@ export * from './pluralize'
 export * from './destructure_chat_group_graph_id'
 export * from './convert_attachments_for_create'
 export * from './assert_keys_are_numbers'
-export * from './replies_local_feature_flag'

package/src/utils/request/get_features.ts

@@ -0,0 +1,20 @@
+import { getRequestQueryKey } from '../../hooks/use_suspense_api'
+
+export const getFeaturesRequestArgs = () => {
+  const url = '/me/features'
+
+  return {
+    url,
+    data: {
+      perPage: 100,
+      fields: {
+        Feature: ['name', 'enabled'],
+      },
+    },
+  }
+}
+
+export const getFeaturesQueryKey = () => {
+  const requestArgs = getFeaturesRequestArgs()
+  return getRequestQueryKey(requestArgs)
+}

package/build/utils/replies_local_feature_flag.d.ts

@@ -1,2 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,3 +0,0 @@
-// 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

@@ -1 +0,0 @@
-{"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/src/utils/replies_local_feature_flag.ts

@@ -1,2 +0,0 @@
-// TODO: Replace this whole file with the flipper flag
-export const REPLIES_FEATURE_ENABLED = false