@planningcenter/chat-react-native 3.15.0-rc.9 → 3.16.0-rc.0

package/src/components/conversation/message.tsx

@@ -12,6 +12,7 @@ import { MessageMarkdown } from './message_markdown'
 import { DenormalizedMessageAttachmentResource } from '../../types/resources/denormalized_attachment_resource'
 import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+  MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
   platformFontWeightMedium,
 } from '../../utils/styles'
 import Animated, {
@@ -25,6 +26,7 @@ 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'
 
 /** Message
  * Component for display of a message within a conversation list
@@ -53,6 +55,7 @@ export function Message({
   const wasEdited = Boolean(message.textEditedAt)
   const isPersisted = !isNewMessage(message)
   const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)
+  const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
 
   useEffect(() => {
     if (pending) {
@@ -153,17 +156,27 @@ export function Message({
     >
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
         {!message.mine && (
-          <View style={styles.messageAuthor}>
+          <View>
             {renderAuthor ? (
-              <Avatar size={'md'} sourceUri={message.author.avatar} />
+              <Avatar
+                size={'md'}
+                sourceUri={message.author.avatar}
+                style={styles.avatar}
+                maxFontSizeMultiplier={1}
+                minFontSizeMultiplier={1}
+              />
             ) : (
               <View style={styles.avatarPlaceholder} />
             )}
+            <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
           </View>
         )}
         <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>
           {renderAuthor && <Text variant="tertiary">{message.author.name}</Text>}
-          <View style={styles.messageBubble}>
+          <View
+            style={styles.messageBubble}
+            onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}
+          >
             <ErrorBoundary>
               <MessageAttachments
                 attachments={message.attachments}
@@ -241,6 +254,9 @@ export function Message({
             </View>
           )}
         </View>
+        {message.mine && (
+          <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
+        )}
       </Animated.View>
     </Pressable>
   )
@@ -264,13 +280,11 @@ const useMessageStyles = ({ mine }: MessageResource) => {
       flex: 1,
       gap: 4,
     },
-    messageAuthor: {
-      flexDirection: 'row',
-      gap: 8,
+    avatar: {
+      marginBottom: 8,
     },
     avatarPlaceholder: {
-      width: 32, // Same width as avatar
-      height: 32, // Same height as avatar
+      width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH, // Same width as avatar
     },
     messageBubble: {
       backgroundColor: messageBubbleBackgroundColor,

package/src/components/conversation/reply_connectors.tsx

@@ -0,0 +1,192 @@
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+import { useTheme } from '../../hooks'
+import { MessageResource } from '../../types'
+import {
+  CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+  MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+} from '../../utils/styles'
+import { REPLIES_FEATURE_ENABLED } from '../../screens/conversation_screen'
+
+const MY_REPLY_CONNECTOR_WIDTH = 38
+const CONNECTOR_BORDER_WIDTH = 4
+
+interface ReplyConnectorProps {
+  message: MessageResource
+  messageBubbleHeight: number
+}
+
+export function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {
+  const styles = useStyles()
+
+  if (!REPLIES_FEATURE_ENABLED) return null
+
+  // TODO: Need to remove, just adding this to remove the lint warning about message being unused
+  console.log('message', message)
+
+  const connectorMap: Record<string, React.ReactNode | null> = {
+    shortTailCurve: <ShortTailCurveConnector height={messageBubbleHeight / 2} />,
+    verticalLine: <VerticalLineConnector />,
+    default: null,
+  }
+
+  // TODO: Currently using fake message attributes. Will need to refactor once we have the message reply logic in place.
+  const getConnectorKey = () => {
+    // TODO: if (message.previousMessageIsTheirReplyMessage && message.nextMessageIsSomeoneElseReplyMessage) return 'shortTailCurve'
+    // TODO: if (message.isRootMessage || (message.isTheirReplyMessage && message.nextMessageIsTheirReplyMessage) || (message.isTheirReplyMessage && message.nextMessageIsSomeoneElseReplyMessage && !message.nextMessageIsMyMessage)) return 'verticalLine'
+    return 'default'
+  }
+
+  const ConnectorComponent = connectorMap[getConnectorKey()]
+
+  if (!ConnectorComponent) return null
+
+  return <View style={styles.theirReplyConnectorContainer}>{ConnectorComponent}</View>
+}
+
+// TODO: Refactor how we choose the correct connector once we have the logic in place
+export function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {
+  const styles = useStyles()
+
+  if (!REPLIES_FEATURE_ENABLED) return null
+
+  // TODO: Need to remove, just adding this to remove the lint warning about message being unused
+  console.log('message', message)
+
+  const connectorMap: Record<string, React.ReactNode | null> = {
+    longTailCurve: (
+      <LongTailCurveConnector
+        height={messageBubbleHeight / 2}
+        style={styles.myReplyConnectorPosition}
+      />
+    ),
+    longHeadCurve: (
+      <LongHeadCurveConnector
+        height={messageBubbleHeight / 2}
+        style={styles.myReplyConnectorPosition}
+      />
+    ),
+    verticalLine: <VerticalLineConnector style={styles.myReplyConnectorPosition} />,
+    swirl: <SwirlConnector style={styles.myReplyConnectorPosition} />,
+    default: null,
+  }
+
+  // TODO: Currently using fake message attributes. Will need to refactor once we have the message reply logic in place.
+  const getConnectorKey = () => {
+    // TODO: if (message.currentMessageIsReply && (message.nextMessageIsNotReplyMessage || message.nextMessageIsDifferentReplyRootId)) return 'longTailCurve'
+    // TODO: if (message.currentMessageIsReplyRoot && message.nextMessageIsMyReply) return 'longHeadCurve'
+    // TODO: if (message.currentMessageIsReply && message.nextMessageIsReply) return 'verticalLine'
+    // TODO: if (message.currentMessageIsReply && message.previousMessageSomeoneElseReply && (message.nextMessageIsSomeoneElseReply || message.nextMessageIsMyReply)) return 'swirl'
+    return 'default'
+  }
+
+  const ConnectorComponent = connectorMap[getConnectorKey()]
+
+  if (!ConnectorComponent) return null
+
+  return <View style={styles.myReplyConnectorContainer}>{ConnectorComponent}</View>
+}
+
+function VerticalLineConnector({ style }: { style?: ViewStyle }) {
+  const styles = useStyles()
+  return <View style={[styles.verticalLineConnector, style]} />
+}
+
+function LongHeadCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {
+  const styles = useStyles()
+  return <View style={[styles.longHeadCurveConnector, { height, marginTop: height }, style]} />
+}
+
+function LongTailCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {
+  const styles = useStyles()
+  return <View style={[styles.longTailCurveConnector, { height }, style]} />
+}
+
+function ShortTailCurveConnector({ height }: { height: number }) {
+  const styles = useStyles()
+  return <View style={[styles.shortTailCurveConnector, { height }]} />
+}
+
+function SwirlConnector({ style }: { style?: ViewStyle }) {
+  const styles = useStyles()
+  const { colors } = useTheme()
+  const borderColor = colors.borderColorDefaultBase
+
+  return (
+    <View style={[styles.swirlConnectorContainer, style]}>
+      <View style={styles.swirlConnectorVerticalLineHead} />
+      <Svg width={27} height={34} fill="none">
+        <Path
+          stroke={borderColor}
+          strokeWidth={CONNECTOR_BORDER_WIDTH}
+          d="M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0"
+        />
+      </Svg>
+      <View style={styles.swirlConnectorVerticalLineTail} />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  const borderColor = colors.borderColorDefaultBase
+
+  return StyleSheet.create({
+    theirReplyConnectorContainer: {
+      width: '50%',
+      alignSelf: 'flex-end',
+      flex: 1,
+    },
+    myReplyConnectorContainer: {
+      width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+      position: 'absolute',
+      left: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+      top: 0,
+      bottom: 0,
+    },
+    myReplyConnectorPosition: {
+      left: '50%',
+    },
+    verticalLineConnector: {
+      flex: 1,
+      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+      borderLeftColor: borderColor,
+    },
+    longHeadCurveConnector: {
+      width: MY_REPLY_CONNECTOR_WIDTH,
+      borderColor: borderColor,
+      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+      borderTopWidth: CONNECTOR_BORDER_WIDTH,
+      borderTopLeftRadius: 16,
+      flex: 1,
+    },
+    longTailCurveConnector: {
+      width: MY_REPLY_CONNECTOR_WIDTH,
+      borderColor: borderColor,
+      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+      borderBottomWidth: CONNECTOR_BORDER_WIDTH,
+      borderBottomLeftRadius: 16,
+    },
+    shortTailCurveConnector: {
+      borderColor: borderColor,
+      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+      borderBottomWidth: CONNECTOR_BORDER_WIDTH,
+      borderBottomLeftRadius: 16,
+    },
+    swirlConnectorContainer: {
+      flex: 1,
+    },
+    swirlConnectorVerticalLineHead: {
+      backgroundColor: borderColor,
+      width: CONNECTOR_BORDER_WIDTH,
+      flex: 1,
+      marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector
+    },
+    swirlConnectorVerticalLineTail: {
+      backgroundColor: borderColor,
+      width: CONNECTOR_BORDER_WIDTH,
+      flex: 1,
+      marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector
+    },
+  })
+}

package/src/components/display/avatar.tsx

@@ -14,6 +14,7 @@ interface AvatarProps {
   fallbackIconName?: IconString
   style?: AvatarRootProps['style']
   maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
+  minFontSizeMultiplier?: AvatarRootProps['minFontSizeMultiplier']
 }
 
 export function Avatar({
@@ -24,11 +25,17 @@ export function Avatar({
   fallbackIconName = 'general.person',
   style,
   maxFontSizeMultiplier,
+  minFontSizeMultiplier,
 }: AvatarProps) {
   const shouldShowFallback = showFallback || !sourceUri
 
   return (
-    <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
+    <AvatarPrimitive.Root
+      size={size}
+      style={style}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      minFontSizeMultiplier={minFontSizeMultiplier}
+    >
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (
           <AvatarPrimitive.ImageFallback name={fallbackIconName} />

package/src/components/display/avatar_group.tsx

@@ -12,6 +12,7 @@ interface AvatarGroupDisplayProps {
   size?: AvatarRootProps['size']
   style?: AvatarRootProps['style']
   maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
+  minFontSizeMultiplier?: AvatarRootProps['minFontSizeMultiplier']
 }
 
 export function AvatarGroup({
@@ -21,11 +22,17 @@ export function AvatarGroup({
   size = 'lg',
   style,
   maxFontSizeMultiplier,
+  minFontSizeMultiplier,
 }: AvatarGroupDisplayProps) {
   const shouldShowFallback = showFallback || !sourceUris || sourceUris.length === 0
 
   return (
-    <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
+    <AvatarPrimitive.Root
+      size={size}
+      style={style}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      minFontSizeMultiplier={minFontSizeMultiplier}
+    >
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (
           <AvatarPrimitive.ImageFallback name={fallbackIconName} />

package/src/components/primitive/avatar_primitive.tsx

@@ -86,6 +86,7 @@ interface AvatarContextType {
   allImagesLoaded: boolean
   setAllImagesLoaded: React.Dispatch<React.SetStateAction<boolean>>
   maxFontSizeMultiplier: number
+  minFontSizeMultiplier?: number
 }
 
 const AvatarContext = createContext<AvatarContextType | null>(null)
@@ -107,6 +108,7 @@ interface AvatarRootProps {
   size?: AvatarSize
   style?: ViewProps['style']
   maxFontSizeMultiplier?: number
+  minFontSizeMultiplier?: number
 }
 
 function AvatarRoot({
@@ -114,13 +116,20 @@ function AvatarRoot({
   size = 'md',
   style,
   maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+  minFontSizeMultiplier = undefined,
 }: AvatarRootProps) {
   const [allImagesLoaded, setAllImagesLoaded] = useState(false)
-  const styles = useStyles({ size, maxFontSizeMultiplier })
+  const styles = useStyles({ size, maxFontSizeMultiplier, minFontSizeMultiplier })
 
   return (
     <AvatarContext.Provider
-      value={{ size, allImagesLoaded, setAllImagesLoaded, maxFontSizeMultiplier }}
+      value={{
+        size,
+        allImagesLoaded,
+        setAllImagesLoaded,
+        maxFontSizeMultiplier,
+        minFontSizeMultiplier,
+      }}
     >
       <View style={[styles.rootContainer, style]}>{children}</View>
     </AvatarContext.Provider>
@@ -136,8 +145,8 @@ AvatarRoot.displayName = 'Avatar.Root'
 type AvatarMaskProps = ViewProps
 
 function AvatarMask({ children, ...props }: AvatarMaskProps) {
-  const { maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ maxFontSizeMultiplier })
+  const { maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier })
 
   return (
     <View style={styles.mask} {...props}>
@@ -157,8 +166,8 @@ interface AvatarImageProps extends Omit<ImageProps, 'source' | 'alt'> {
 }
 
 function AvatarImage({ sourceUri, ...props }: AvatarImageProps) {
-  const { size, maxFontSizeMultiplier } = useAvatarContext()
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const scaledAvatarSize = AVATAR_PX[size] * fontScale
 
   return <Image source={{ uri: sourceUri }} loaderSize={scaledAvatarSize} {...props} alt="" />
@@ -183,9 +192,9 @@ interface AvatarImageFallbackProps {
 }
 
 function AvatarImageFallback({ name = 'general.person' }: AvatarImageFallbackProps) {
-  const { size, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ maxFontSizeMultiplier })
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const scaledIconSize = AVATAR_FALLBACK_ICON_PX[size] * fontScale
 
   return (
@@ -213,8 +222,8 @@ interface AvatarGroupProps {
 type AvatarIndex = 0 | 1 | 2 | 3
 
 function AvatarGroup({ sourceUris }: AvatarGroupProps) {
-  const { setAllImagesLoaded, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ maxFontSizeMultiplier })
+  const { setAllImagesLoaded, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const [loadingStatus, setLoadingStatus] = useState<Record<AvatarIndex, boolean>>({
     0: false,
     1: false,
@@ -323,9 +332,9 @@ AvatarGroup.displayName = 'Avatar.Group'
 // =================================
 
 function AvatarGroupLoader() {
-  const { size, allImagesLoaded, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ size, maxFontSizeMultiplier })
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const { size, allImagesLoaded, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ size, maxFontSizeMultiplier, minFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const scaledSpinnerSize = AVATAR_PX[size] * fontScale
 
   if (allImagesLoaded) return null
@@ -348,8 +357,8 @@ interface AvatarPresenceProps extends ViewProps {
 }
 
 function AvatarPresence({ presence, ...props }: AvatarPresenceProps) {
-  const { size, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ size, presence, maxFontSizeMultiplier })
+  const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ size, presence, maxFontSizeMultiplier, minFontSizeMultiplier })
 
   return <View style={styles.presence} {...props} />
 }
@@ -364,15 +373,17 @@ interface Styles {
   size?: AvatarSize
   presence?: AvatarPresenceType
   maxFontSizeMultiplier?: number
+  minFontSizeMultiplier?: number
 }
 
 const useStyles = ({
   size = 'md',
   presence = 'offline',
   maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+  minFontSizeMultiplier = undefined,
 }: Styles = {}) => {
   const { colors } = useTheme()
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const PRESENCE_COLOR = {
     online: colors.fillColorInteractionOnlineDefault,
     offline: colors.iconColorDefaultDisabled,

package/src/hooks/use_app_name.ts

@@ -0,0 +1,17 @@
+import DeviceInfo from 'react-native-device-info'
+
+export type AppName = 'chat' | 'churchcenter' | 'services'
+
+export const useAppName = (): AppName => {
+  const applicationName = DeviceInfo.getApplicationName()
+
+  if (/churchcenter/i.test(applicationName)) {
+    return 'churchcenter'
+  }
+
+  if (/services/i.test(applicationName)) {
+    return 'services'
+  }
+
+  return 'chat'
+}

package/src/hooks/use_report_bug_action.ts

@@ -1,12 +1,5 @@
 import { useMutation } from '@tanstack/react-query'
 import { useApiClient } from './use_api_client'
-import DeviceInfo from 'react-native-device-info'
-const brand = DeviceInfo.getBrand()
-const model = DeviceInfo.getModel()
-const systemName = DeviceInfo.getSystemName()
-const systemVersion = DeviceInfo.getSystemVersion()
-const readableVersion = DeviceInfo.getReadableVersion()
-const appName = DeviceInfo.getApplicationName()
 
 export const useReportBugAction = () => {
   const apiClient = useApiClient()
@@ -18,7 +11,7 @@ export const useReportBugAction = () => {
       attachmentIds,
     }: {
       description: string
-      description_json: string
+      description_json: Record<string, any>
       attachmentIds: string[]
     }) => {
       return apiClient.chat.post({
@@ -28,8 +21,7 @@ export const useReportBugAction = () => {
             type: '',
             attributes: {
               description,
-              description_json,
-              device_info: `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
+              description_json: JSON.stringify(description_json),
               attachment_ids: attachmentIds,
             },
           },

package/src/navigation/index.tsx

@@ -4,47 +4,50 @@ import {
   createNativeStackNavigator,
   NativeStackHeaderRightProps,
 } from '@react-navigation/native-stack'
+import { CardStyleInterpolators } from '@react-navigation/stack'
 import React from 'react'
+import { Platform } from 'react-native'
 import { Icon } from '../components'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import {
+  AttachmentActionsScreen,
+  AttachmentActionsScreenOptions,
+} from '../screens/attachment_actions/attachment_actions_screen'
+import { BugReportScreen, BugReportScreenOptions } from '../screens/bug_report_screen'
+import {
+  MessageReadReceiptsScreen,
+  MessageReadReceiptsScreenOptions,
+} from '../screens/conversation/message_read_receipts_screen'
 import { ConversationDetailsScreen } from '../screens/conversation_details_screen'
+import {
+  ConversationFilterReceipientsScreenOptions,
+  ConversationFilterRecipientsScreen,
+} from '../screens/conversation_filter_recipients/conversation_filter_recipients_screen'
+import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
+import {
+  ConversationFiltersScreen,
+  ConversationFiltersScreenOptions,
+} from '../screens/conversation_filters_screen'
+import { ConversationNewScreen } from '../screens/conversation_new/conversation_new_screen'
 import {
   ConversationRouteProps,
   ConversationScreen,
   ConversationScreenTitle,
 } from '../screens/conversation_screen'
-import { ConversationsScreen } from '../screens/conversations/conversations_screen'
-import { ConversationNewScreen } from '../screens/conversation_new/conversation_new_screen'
-import {
-  ConversationFilterReceipientsScreenOptions,
-  ConversationFilterRecipientsScreen,
-} from '../screens/conversation_filter_recipients/conversation_filter_recipients_screen'
+import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen'
 import { ConversationSelectRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_recipients_screen'
+import { ConversationSelectTeamsILeadRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen'
+import { ConversationsScreen } from '../screens/conversations/conversations_screen'
+import { GetHelpScreen } from '../screens/get_help_screen'
 import {
   MessageActionsScreen,
   MessageActionsScreenOptions,
 } from '../screens/message_actions_screen'
-import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
 import { NotFound } from '../screens/not_found'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
-import { ScreenLayout } from './screenLayout'
-import {
-  ConversationFiltersScreen,
-  ConversationFiltersScreenOptions,
-} from '../screens/conversation_filters_screen'
-import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
-import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen'
-import { ConversationSelectTeamsILeadRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen'
-import { AttachmentActionsScreenOptions } from '../screens/attachment_actions/attachment_actions_screen'
-import { AttachmentActionsScreen } from '../screens/attachment_actions/attachment_actions_screen'
-import { BugReportScreen, BugReportScreenOptions } from '../screens/bug_report_screen'
-import {
-  MessageReadReceiptsScreen,
-  MessageReadReceiptsScreenOptions,
-} from '../screens/conversation/message_read_receipts_screen'
-import { Platform } from 'react-native'
-import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
 import { TeamConversationScreen } from '../screens/team_conversation_screen'
-import { CardStyleInterpolators } from '@react-navigation/stack'
+import { ScreenLayout } from './screenLayout'
 
 const HEADER_BACK_BUTTON_LAYOUT_RESET_STYLES = {
   marginLeft: Platform.select({ ios: -8, default: -3 }),
@@ -231,6 +234,16 @@ export const ChatStack = createNativeStackNavigator({
       screen: BugReportScreen,
       options: BugReportScreenOptions,
     },
+    GetHelp: {
+      screen: GetHelpScreen,
+      options: ({ navigation }) => ({
+        headerTitle: 'Get help',
+        presentation: 'modal',
+        headerLeft: props => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Close" />
+        ),
+      }),
+    },
     NotFound: {
       screen: NotFound,
       options: {