@planningcenter/chat-react-native 3.18.0-rc.8 → 3.18.0

package/src/components/conversation/message.tsx

@@ -1,6 +1,12 @@
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
-import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
+import {
+  AccessibilityActionEvent,
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native'
 import { MessageReaction } from '../../components/conversation/message_reaction'
 import { Avatar, Icon, Spinner, Text, TextButton, TextInlineButton } from '../../components/display'
 import {
@@ -27,6 +33,7 @@ import { Haptic } from '../../utils/native_adapters'
 import { TheirReplyConnector, MyReplyConnector, AVATAR_CONNECTOR_SPACING } from './reply_connectors'
 import { pluralize } from '../../utils'
 import { useConversationMessage } from '../../hooks/use_conversation_message'
+import { some } from 'lodash'
 import { isNewMessage } from '../../utils/cache/messages_cache'
 
 /** Message
@@ -48,7 +55,7 @@ export function Message({
   repliesEnabled,
   ...message
 }: MessageProps) {
-  const { text, reactionCounts, pending, error } = message
+  const { text, reactionCounts, pending, error, attachments, author } = message
   const styles = useMessageStyles(message)
   const navigation = useNavigation()
   const { colors } = useTheme()
@@ -70,7 +77,7 @@ export function Message({
   })
 
   const metaProps = {
-    authorName: message.author.name,
+    authorName: author.name,
     createdAt: message.createdAt,
   }
 
@@ -79,12 +86,12 @@ export function Message({
     !inReplyScreen && message.replyRootId === message.id && repliesEnabled
   const isReplyRootMessage = message.replyRootId === message.id
   const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt
+  const replyToReplyRootMessage = repliesEnabled && !isReplyRootMessage && !!message.replyRootId
 
   const replyCountText = pluralize(message.replyCount, 'reply')
   const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
-  const replyRootAuthorName = message.replyRootId
-    ? replyRootMessage?.author.name
-    : message.author.name
+  const replyRootAuthorName = message.replyRootId ? replyRootMessage?.author.name : author.name
+  const messageText = isDeletedReplyRootMessage ? 'Message deleted' : text
 
   const messageBottomMargin =
     message.lastInGroup || message.nextIsReplyShadowMessage
@@ -93,6 +100,11 @@ export function Message({
         ? 8
         : 4
 
+  const messageIsReplyLabel = replyToReplyRootMessage ? 'Reply' : ''
+  const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''
+  const replyCountLabel = isReplyRootMessage ? replyCountText : ''
+  const accessibilityLabel = `${author?.name || ''} ${messageIsReplyLabel} ${attachmentLabel} ${messageText || ''} ${timestamp} ${replyCountLabel}`
+
   useEffect(() => {
     if (pending) {
       const timer = setTimeout(() => {
@@ -159,10 +171,23 @@ export function Message({
     navigation.navigate('ConversationReply', {
       conversation_id,
       reply_root_id: message.id,
-      reply_root_author_name: message.author.name,
+      reply_root_author_name: author.name,
     })
   }
 
+  const accessibilityActions = [
+    {
+      name: 'navigateToReplies',
+      label: 'Navigate to replies',
+    },
+  ]
+
+  const handleAccessibilityAction = (event: AccessibilityActionEvent) => {
+    if (event.nativeEvent.actionName === 'navigateToReplies') {
+      handleNavigateToReplyPress()
+    }
+  }
+
   return (
     <Pressable
       onLongPress={handleMessageLongPress}
@@ -170,7 +195,11 @@ export function Message({
       onPressIn={handleMessagePressIn}
       onPressOut={handleMessagePressOut}
       android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
       accessibilityHint="Long press to view message actions like reacting and copying."
+      accessibilityActions={isReplyRootMessage ? accessibilityActions : undefined}
+      onAccessibilityAction={isReplyRootMessage ? handleAccessibilityAction : undefined}
       disabled={isDeletedReplyRootMessage}
     >
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
@@ -179,7 +208,7 @@ export function Message({
             {renderAuthor ? (
               <Avatar
                 size={'md'}
-                sourceUri={message.author.avatar}
+                sourceUri={author.avatar}
                 style={styles.avatar}
                 maxFontSizeMultiplier={1}
                 minFontSizeMultiplier={1}
@@ -197,7 +226,7 @@ export function Message({
         <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>
           {renderAuthor && !isDeletedReplyRootMessage && (
             <Text variant="footnote" style={styles.authorName}>
-              {message.author.name}
+              {author.name}
             </Text>
           )}
           <View
@@ -206,13 +235,13 @@ export function Message({
           >
             {isDeletedReplyRootMessage ? (
               <View style={styles.messageText}>
-                <Text style={styles.replyRootDeletedText}>Message deleted</Text>
+                <Text style={styles.replyRootDeletedText}>{messageText}</Text>
               </View>
             ) : (
               <>
                 <ErrorBoundary>
                   <MessageAttachments
-                    attachments={message.attachments}
+                    attachments={attachments}
                     metaProps={metaProps}
                     onMessageAttachmentLongPress={handleMessageAttachmentLongPress}
                     onMessageLongPress={handleMessageLongPress}

package/src/components/conversation/messages_disabled_banners.tsx

@@ -0,0 +1,69 @@
+import { StyleSheet, View, type ViewStyle } from 'react-native'
+import { useTheme } from '../../hooks'
+import { Text } from '../display'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useFeatures } from '../../hooks/use_features'
+import { availableFeatures } from '../../hooks/use_features'
+
+export const LeaderMessagesDisabledBanner = () => {
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
+
+  const description = repliesEnabled
+    ? 'Only leaders can send messages in this conversation.'
+    : 'Replies are frozen for everyone else.'
+
+  return <MessagesDisabledBanner description={description} />
+}
+
+export const MemberMessagesDisabledBanner = () => {
+  const styles = useStyles()
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
+
+  const description = repliesEnabled
+    ? 'Only leaders can send messages, but you can still add reactions.'
+    : 'Replies have been disabled by a leader, but you can still add reactions.'
+
+  return <MessagesDisabledBanner description={description} style={styles.memberBanner} />
+}
+
+interface MessagesDisabledBannerProps {
+  description: string
+  style?: ViewStyle
+}
+
+const MessagesDisabledBanner = ({ description, style }: MessagesDisabledBannerProps) => {
+  const styles = useStyles()
+
+  return (
+    <View style={[styles.baseBanner, style]}>
+      <Text style={styles.text} variant="tertiary">
+        {description}
+      </Text>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    baseBanner: {
+      paddingHorizontal: 16,
+      paddingVertical: 4,
+      backgroundColor: colors.statusNeutralComposedBackground,
+      borderTopWidth: 1,
+      borderTopColor: colors.borderColorDefaultBase,
+    },
+    text: {
+      textAlign: 'center',
+    },
+    memberBanner: {
+      paddingTop: 16,
+      paddingBottom: 16 + bottom,
+      marginBottom: -bottom,
+    },
+  })
+}

package/src/components/conversation/reply_shadow_message.tsx

@@ -25,6 +25,8 @@ import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
 import { assertKeysAreNumbers, pluralize } from '../../utils'
 import { useNavigation } from '@react-navigation/native'
 import { useConversationMessage } from '../../hooks/use_conversation_message'
+import { useLiveRelativeTime } from '../../hooks/use_live_relative_time'
+import { some } from 'lodash'
 
 interface ReplyShadowMessageProps extends MessageResource {
   messageId: string
@@ -61,10 +63,11 @@ interface ShadowMessageContentProps extends MessageResource {
 }
 
 function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageContentProps) {
-  const { text, deletedAt } = message
+  const { text, deletedAt, author, attachments } = message
   const styles = useStyles(message)
   const { colors } = useTheme()
   const navigation = useNavigation()
+  const timestamp = useLiveRelativeTime(message.createdAt)
 
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
@@ -82,12 +85,16 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
     })
   }
 
+  const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''
+  const accessibilityLabel = `${author?.name || ''} Reply Preview ${attachmentLabel} ${messageText || ''} ${timestamp} ${replyCountText}`
+
   return (
     <Pressable
       android_ripple={{ color: colors.androidRippleNeutral }}
       onPress={handleNavigateToReplies}
       onPressIn={handleMessagePressIn}
       onPressOut={handleMessagePressOut}
+      accessibilityLabel={accessibilityLabel}
       accessibilityHint="Navigate to reply screen for this message"
       accessibilityRole="link"
     >
@@ -112,7 +119,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
             style={styles.messageBubble}
             onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}
           >
-            <MessageAttachmentImagery attachments={message.attachments} />
+            <MessageAttachmentImagery attachments={attachments} />
             {text && (
               <Text
                 variant="footnote"

package/src/hooks/use_conversation_messages.ts

@@ -16,7 +16,9 @@ export const useConversationMessages = (
     () =>
       data
         .filter(
-          message => !message.deletedAt && (message.attachments?.length || message.text?.length)
+          message =>
+            (!message.deletedAt || message.replyRootId) &&
+            (message.attachments?.length || message.text?.length)
         )
         .sort((a, b) => -a.id.localeCompare(b.id)),
     [data]

package/src/screens/age_check/age_check_required_screen.tsx

@@ -30,7 +30,7 @@ export function AgeCheckRequiredScreen() {
   const styles = useStyles()
 
   const birthdateStamp = birthdate
-    ? formatDate(birthdate, { style: 'standard', year: true })
+    ? formatDate(birthdate, { style: 'standard', year: true, timeZone: 'UTC' })
     : 'Missing'
 
   const age = birthdate ? calculateAge(birthdate) : null

package/src/screens/age_check/components/age_check_select_birthdate_modal.tsx

@@ -65,6 +65,7 @@ function IOSBirthdateModal({
             </Text>
             <View style={styles.pickerContainer}>
               <DateTimePicker
+                timeZoneName="UTC"
                 accessibilityLabelledBy="birthdateLabel"
                 testID="age-check-date-picker"
                 mode="date"
@@ -101,6 +102,7 @@ function AndroidBirthdatePicker({
 
   return (
     <DateTimePicker
+      timeZoneName="UTC"
       testID="age-check-date-picker-android"
       mode="date"
       display="spinner"

package/src/screens/conversation_details_screen.tsx

@@ -44,6 +44,8 @@ import { HeaderTextButton } from '../components/display/platform_modal_header_bu
 import { tokens } from '../vendor/tapestry/tokens'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { GroupResource } from '../types/resources/group_resource'
+import { useFeatures } from '../hooks/use_features'
+import { availableFeatures } from '../hooks/use_features'
 
 // =========================================
 // ====== Factory Constants & Types ========
@@ -93,6 +95,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const { repliesDisabled, setRepliesDisabled } = useConversationDisableReplies(route.params)
   const { mutate: saveTitle } = useConversationUpdate(route.params)
   const { mutate: deleteConversation } = useConversationDelete(route.params)
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
 
   const trimmedTitle = title.trim()
   const emptyTitle = trimmedTitle === '' || title === null
@@ -250,8 +254,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     {
       type: canUpdate ? SectionTypes.setting : SectionTypes.hidden,
       data: {
-        title: 'Freeze conversation',
-        subtitle: 'Disables replies for everyone except leaders.',
+        title: repliesEnabled ? 'Leader messages only' : 'Freeze conversation',
+        subtitle: repliesEnabled ? undefined : 'Disables replies for everyone except leaders.',
         rightItem: (
           <Switch value={repliesDisabled} onChange={() => setRepliesDisabled(!repliesDisabled)} />
         ),

package/src/screens/conversation_screen.tsx

@@ -14,9 +14,9 @@ import { FlatList, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
 import {
-  LeaderDisabledRepliesBanner,
-  MemberDisabledRepliesBanner,
-} from '../components/conversation/disabled_replies_banners'
+  LeaderMessagesDisabledBanner,
+  MemberMessagesDisabledBanner,
+} from '../components/conversation/messages_disabled_banners'
 import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { Message } from '../components/conversation/message'
@@ -194,7 +194,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
         )}
         <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
         {!noMessages && <TypingIndicator />}
-        {showLeaderDisabledReplyBanner && <LeaderDisabledRepliesBanner />}
+        {showLeaderDisabledReplyBanner && <LeaderMessagesDisabledBanner />}
         {canReply ? (
           <MessageForm.Root
             replyRootAuthorFirstName={replyRootAuthorFirstName}
@@ -215,7 +215,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             <MessageForm.SubmitButton />
           </MessageForm.Root>
         ) : (
-          <MemberDisabledRepliesBanner />
+          <MemberMessagesDisabledBanner />
         )}
       </KeyboardView>
     </View>
@@ -310,6 +310,24 @@ export const groupMessages = ({
       message.replyRootId &&
       !threadRoot &&
       (prevMessageDifferentThread || prevMessageIsDateSeparator)
+    const lastInGroup =
+      !nextMessage ||
+      nextMessageDifferentAuthor ||
+      nextMessageMoreThan5Minutes ||
+      nextMessageDifferentThread ||
+      nextMessageIsDateSeparator
+    const renderAuthor =
+      !message.mine &&
+      (!prevMessage ||
+        prevMessageDifferentAuthor ||
+        prevMessageMoreThan5Minutes ||
+        prevMessageDifferentThread ||
+        prevMessageIsDateSeparator)
+    const nextIsReplyShadowMessage =
+      repliesEnabled &&
+      nextMessageInThread &&
+      !nextMessageThreadRoot &&
+      (nextMessageDifferentThread || nextMessageIsDateSeparator)
 
     if (message.mine && !encounteredOneOfMyMessages) {
       encounteredOneOfMyMessages = true
@@ -317,17 +335,12 @@ export const groupMessages = ({
     } else {
       message.myLatestInConversation = false
     }
-    message.lastInGroup = !nextMessage || nextMessageDifferentAuthor || nextMessageMoreThan5Minutes
-    message.renderAuthor =
-      !message.mine && (!prevMessage || prevMessageDifferentAuthor || prevMessageMoreThan5Minutes)
+    message.lastInGroup = lastInGroup
+    message.renderAuthor = renderAuthor
     message.threadPosition = null
     message.nextRendersAuthor = nextMessage?.renderAuthor
     message.isReplyShadowMessage = false
-    message.nextIsReplyShadowMessage =
-      repliesEnabled &&
-      nextMessageInThread &&
-      !nextMessageThreadRoot &&
-      (nextMessageDifferentThread || nextMessageIsDateSeparator)
+    message.nextIsReplyShadowMessage = nextIsReplyShadowMessage
 
     if (!inReplyScreen && inThread) {
       message.prevIsMyReply = prevMessage?.mine

package/build/components/conversation/disabled_replies_banners.d.ts

@@ -1,3 +0,0 @@
-export declare const LeaderDisabledRepliesBanner: () => import("react").JSX.Element;
-export declare const MemberDisabledRepliesBanner: () => import("react").JSX.Element;
-//# sourceMappingURL=disabled_replies_banners.d.ts.map

package/build/components/conversation/disabled_replies_banners.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"disabled_replies_banners.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/disabled_replies_banners.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,2BAA2B,mCAEvC,CAAA;AAED,eAAO,MAAM,2BAA2B,mCAQvC,CAAA"}

package/build/components/conversation/disabled_replies_banners.js

@@ -1,41 +0,0 @@
-import { StyleSheet, View } from 'react-native';
-import { useTheme } from '../../hooks';
-import { Text } from '../display';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-export const LeaderDisabledRepliesBanner = () => {
-    return <DisabledRepliesBanner description="Replies are frozen for everyone else."/>;
-};
-export const MemberDisabledRepliesBanner = () => {
-    const styles = useStyles();
-    return (<DisabledRepliesBanner description="Replies have been disabled by a leader, but you can still add reactions." style={styles.memberBanner}/>);
-};
-const DisabledRepliesBanner = ({ description, style }) => {
-    const styles = useStyles();
-    return (<View style={[styles.baseBanner, style]}>
-      <Text style={styles.text} variant="tertiary">
-        {description}
-      </Text>
-    </View>);
-};
-const useStyles = () => {
-    const { colors } = useTheme();
-    const { bottom } = useSafeAreaInsets();
-    return StyleSheet.create({
-        baseBanner: {
-            paddingHorizontal: 16,
-            paddingVertical: 4,
-            backgroundColor: colors.statusNeutralComposedBackground,
-            borderTopWidth: 1,
-            borderTopColor: colors.borderColorDefaultBase,
-        },
-        text: {
-            textAlign: 'center',
-        },
-        memberBanner: {
-            paddingTop: 16,
-            paddingBottom: 16 + bottom,
-            marginBottom: -bottom,
-        },
-    });
-};
-//# sourceMappingURL=disabled_replies_banners.js.map

package/build/components/conversation/disabled_replies_banners.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"disabled_replies_banners.js","sourceRoot":"","sources":["../../../src/components/conversation/disabled_replies_banners.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAElE,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,OAAO,CAAC,qBAAqB,CAAC,WAAW,CAAC,uCAAuC,EAAG,CAAA;AACtF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,OAAO,CACL,CAAC,qBAAqB,CACpB,WAAW,CAAC,0EAA0E,CACtF,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,EAC3B,CACH,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,qBAAqB,GAAG,CAAC,EAAE,WAAW,EAAE,KAAK,EAA8B,EAAE,EAAE;IACnF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CACtC;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,UAAU,CAC1C;QAAA,CAAC,WAAW,CACd;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE;YACV,iBAAiB,EAAE,EAAE;YACrB,eAAe,EAAE,CAAC;YAClB,eAAe,EAAE,MAAM,CAAC,+BAA+B;YACvD,cAAc,EAAE,CAAC;YACjB,cAAc,EAAE,MAAM,CAAC,sBAAsB;SAC9C;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,QAAQ;SACpB;QACD,YAAY,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,EAAE,GAAG,MAAM;YAC1B,YAAY,EAAE,CAAC,MAAM;SACtB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { StyleSheet, View, type ViewStyle } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Text } from '../display'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\n\nexport const LeaderDisabledRepliesBanner = () => {\n  return <DisabledRepliesBanner description=\"Replies are frozen for everyone else.\" />\n}\n\nexport const MemberDisabledRepliesBanner = () => {\n  const styles = useStyles()\n  return (\n    <DisabledRepliesBanner\n      description=\"Replies have been disabled by a leader, but you can still add reactions.\"\n      style={styles.memberBanner}\n    />\n  )\n}\n\ninterface DisabledRepliesBannerProps {\n  description: string\n  style?: ViewStyle\n}\n\nconst DisabledRepliesBanner = ({ description, style }: DisabledRepliesBannerProps) => {\n  const styles = useStyles()\n\n  return (\n    <View style={[styles.baseBanner, style]}>\n      <Text style={styles.text} variant=\"tertiary\">\n        {description}\n      </Text>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    baseBanner: {\n      paddingHorizontal: 16,\n      paddingVertical: 4,\n      backgroundColor: colors.statusNeutralComposedBackground,\n      borderTopWidth: 1,\n      borderTopColor: colors.borderColorDefaultBase,\n    },\n    text: {\n      textAlign: 'center',\n    },\n    memberBanner: {\n      paddingTop: 16,\n      paddingBottom: 16 + bottom,\n      marginBottom: -bottom,\n    },\n  })\n}\n"]}

package/src/components/conversation/disabled_replies_banners.tsx

@@ -1,58 +0,0 @@
-import { StyleSheet, View, type ViewStyle } from 'react-native'
-import { useTheme } from '../../hooks'
-import { Text } from '../display'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-
-export const LeaderDisabledRepliesBanner = () => {
-  return <DisabledRepliesBanner description="Replies are frozen for everyone else." />
-}
-
-export const MemberDisabledRepliesBanner = () => {
-  const styles = useStyles()
-  return (
-    <DisabledRepliesBanner
-      description="Replies have been disabled by a leader, but you can still add reactions."
-      style={styles.memberBanner}
-    />
-  )
-}
-
-interface DisabledRepliesBannerProps {
-  description: string
-  style?: ViewStyle
-}
-
-const DisabledRepliesBanner = ({ description, style }: DisabledRepliesBannerProps) => {
-  const styles = useStyles()
-
-  return (
-    <View style={[styles.baseBanner, style]}>
-      <Text style={styles.text} variant="tertiary">
-        {description}
-      </Text>
-    </View>
-  )
-}
-
-const useStyles = () => {
-  const { colors } = useTheme()
-  const { bottom } = useSafeAreaInsets()
-
-  return StyleSheet.create({
-    baseBanner: {
-      paddingHorizontal: 16,
-      paddingVertical: 4,
-      backgroundColor: colors.statusNeutralComposedBackground,
-      borderTopWidth: 1,
-      borderTopColor: colors.borderColorDefaultBase,
-    },
-    text: {
-      textAlign: 'center',
-    },
-    memberBanner: {
-      paddingTop: 16,
-      paddingBottom: 16 + bottom,
-      marginBottom: -bottom,
-    },
-  })
-}