@planningcenter/chat-react-native 3.18.0-rc.4 → 3.18.0-rc.6

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/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList } from '@shopify/flash-list'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { Heading } from '../../components'
 import { GroupsGroupResource } from '../../types'
 import { useGroupsGroups } from '../../hooks/use_groups_groups'
@@ -31,10 +30,9 @@ export const ConversationSelectGroupRecipientsScreen = ({
   }
 
   return (
-    <FlashList
+    <FlatList
       data={groupsWithCreatePermission}
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={65}
       contentContainerStyle={styles.contentContainer}
       ListHeaderComponent={
         <View style={styles.sectionHeader}>

package/src/screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList } from '@shopify/flash-list'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { Heading } from '../../components'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
@@ -30,10 +29,9 @@ export const ConversationSelectTeamsILeadRecipientsScreen = ({
   }
 
   return (
-    <FlashList
+    <FlatList
       data={serviceTypes}
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={65}
       contentContainerStyle={styles.contentContainer}
       ListHeaderComponent={
         <View style={styles.sectionHeader}>

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