@planningcenter/chat-react-native 3.42.3-qa-staging.7 → 3.42.3-qa-856.0

package/src/navigation/index.tsx

@@ -1,4 +1,3 @@
-import { HeaderBackButton } from '@react-navigation/elements'
 import { StaticParamList } from '@react-navigation/native'
 import {
   createNativeStackNavigator,
@@ -6,11 +5,12 @@ import {
 } 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 {
-  HeaderDoneButton,
-  HeaderTextButton,
+  composeOptions,
+  createMinimalHeaderBackButton,
+  withMinimalBack,
+  withRightClose,
+  withRightText,
 } from '../components/display/platform_modal_header_buttons'
 import { useDirectMessagesEnabled, useQualifiedByAge } from '../hooks'
 import {
@@ -81,11 +81,6 @@ import {
 import { TeamConversationScreen } from '../screens/team_conversation_screen'
 import { ScreenLayoutWithChatAccessGate } from './screenLayout'
 
-const HEADER_BACK_BUTTON_LAYOUT_RESET_STYLES = {
-  marginLeft: Platform.select({ ios: -8, default: -3 }),
-  marginRight: Platform.select({ ios: 0, default: 30 }),
-}
-
 export const NewConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationNewEntry',
   screenOptions: {
@@ -95,53 +90,54 @@ export const NewConversationStack = createNativeStackNavigator({
   screens: {
     ConversationNewEntry: {
       screen: ConversationNewEntryScreen,
-      options: ({ navigation }) => ({
-        title: 'New conversation',
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderTextButton {...props} onPress={navigation.goBack} title="Cancel" />
+      options: ({ navigation }) =>
+        composeOptions(
+          {
+            title: 'New conversation',
+            headerBackVisible: false,
+          },
+          withRightText({ text: 'Cancel', onPress: navigation.goBack })
         ),
-        headerBackVisible: false,
-      }),
     },
     ConversationSelectGroupRecipients: {
       screen: ConversationSelectGroupRecipientsScreen,
-      options: ({ navigation, route }) => ({
-        title: 'New conversation',
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderTextButton
-            {...props}
-            onPress={() => navigation.popTo('Conversations', route.params)}
-            title="Cancel"
-          />
+      options: ({ navigation, route }) =>
+        composeOptions(
+          {
+            title: 'New conversation',
+          },
+          withRightText({
+            text: 'Cancel',
+            onPress: () => navigation.popTo('Conversations', route.params),
+          })
         ),
-      }),
     },
     ConversationSelectTeamsILeadRecipients: {
       screen: ConversationSelectTeamsILeadRecipientsScreen,
-      options: ({ navigation, route }) => ({
-        title: 'New conversation',
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderTextButton
-            {...props}
-            onPress={() => navigation.popTo('Conversations', route.params)}
-            title="Cancel"
-          />
+      options: ({ navigation, route }) =>
+        composeOptions(
+          {
+            title: 'New conversation',
+          },
+          withRightText({
+            text: 'Cancel',
+            onPress: () => navigation.popTo('Conversations', route.params),
+          })
         ),
-      }),
     },
     ConversationSelectDirectMessageRecipients: {
       screen: ConversationSelectDirectMessageRecipientsScreen,
       if: useDirectMessagesEnabled,
-      options: ({ navigation, route }) => ({
-        title: 'New conversation',
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderTextButton
-            {...props}
-            onPress={() => navigation.popTo('Conversations', route.params)}
-            title="Cancel"
-          />
+      options: ({ navigation, route }) =>
+        composeOptions(
+          {
+            title: 'New conversation',
+          },
+          withRightText({
+            text: 'Cancel',
+            onPress: () => navigation.popTo('Conversations', route.params),
+          })
         ),
-      }),
     },
     ConversationFilterRecipients: {
       screen: ConversationFilterRecipientsScreen,
@@ -149,21 +145,21 @@ export const NewConversationStack = createNativeStackNavigator({
     },
     ConversationNew: {
       screen: ConversationNewScreen,
-      options: ({ navigation, route }) => ({
-        title: 'New conversation',
-        headerLeft: () => null,
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderTextButton
-            {...props}
-            onPress={() => {
+      options: ({ navigation, route }) =>
+        composeOptions(
+          {
+            title: 'New conversation',
+            headerLeft: () => null,
+          },
+          withRightText({
+            text: 'Cancel',
+            onPress: () => {
               const { chat_group_graph_id, group_source_app_name } =
                 route.params as ConversationSelectRecipientsParams
               navigation.popTo('Conversations', { chat_group_graph_id, group_source_app_name })
-            }}
-            title="Cancel"
-          />
+            },
+          })
         ),
-      }),
     },
     AvatarPicker: {
       screen: AvatarPickerScreen,
@@ -180,17 +176,14 @@ export const ChatStack = createNativeStackNavigator({
   screens: {
     Conversations: {
       screen: ConversationsScreen,
-      options: ({ route, navigation }) => ({
-        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
-        headerBackVisible: false,
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderBackButton
-            backImage={() => <Icon name="general.x" size={18} color={props.tintColor} />}
-            onPress={navigation.goBack}
-            {...props}
-          />
+      options: ({ route, navigation }) =>
+        composeOptions(
+          {
+            headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
+            headerBackVisible: false,
+          },
+          withRightClose({ onPress: navigation.goBack })
         ),
-      }),
     },
     ConversationFilters: {
       screen: ConversationFiltersScreen,
@@ -198,61 +191,48 @@ export const ChatStack = createNativeStackNavigator({
     },
     Conversation: {
       screen: ConversationScreen,
-      options: ({ route, navigation }) => ({
-        headerTitle: (props: NativeStackHeaderRightProps) => {
-          const { conversation_id, title, badge, deleted, muted } =
-            route.params as ConversationRouteProps
+      options: ({ route, navigation }) =>
+        composeOptions(
+          {
+            headerTitle: (props: NativeStackHeaderRightProps) => {
+              const { conversation_id, title, badge, deleted, muted } =
+                route.params as ConversationRouteProps
 
-          return (
-            <ConversationScreenTitle
-              conversation_id={conversation_id}
-              badge={badge}
-              deleted={deleted}
-              muted={muted}
-              {...props}
-            >
-              {title ?? 'Conversation'}
-            </ConversationScreenTitle>
-          )
-        },
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderBackButton
-            backImage={() => <Icon name="general.x" size={18} color={props.tintColor} />}
-            onPress={() => navigation.getParent()?.goBack()}
-          />
+              return (
+                <ConversationScreenTitle
+                  conversation_id={conversation_id}
+                  badge={badge}
+                  deleted={deleted}
+                  muted={muted}
+                  {...props}
+                >
+                  {title ?? 'Conversation'}
+                </ConversationScreenTitle>
+              )
+            },
+            headerLeft: createMinimalHeaderBackButton({
+              onPress: () => {
+                const params = route.params as ConversationRouteProps
+                if ((params as ConversationFiltersParams)?.chat_group_graph_id) {
+                  // Ensure that conversations with a graph id pass them back to the conversation list
+                  const { chat_group_graph_id } = params
+                  navigation.popTo('Conversations', { chat_group_graph_id })
+                } else {
+                  navigation.goBack()
+                }
+              },
+            }),
+          },
+          withRightClose({ onPress: () => navigation.getParent()?.goBack() })
         ),
-        headerLeft: props => (
-          <HeaderBackButton
-            style={HEADER_BACK_BUTTON_LAYOUT_RESET_STYLES}
-            displayMode="minimal"
-            onPress={() => {
-              const params = route.params as ConversationRouteProps
-              if ((params as ConversationFiltersParams)?.chat_group_graph_id) {
-                // Ensure that conversations with a graph id pass them back to the conversation list
-                const { chat_group_graph_id } = params
-                navigation.popTo('Conversations', { chat_group_graph_id })
-              } else {
-                navigation.goBack()
-              }
-            }}
-            {...props}
-          />
-        ),
-      }),
     },
     ConversationReply: {
       screen: ConversationScreen,
-      options: ({ route, navigation }) => ({
-        title: (route.params as ConversationRouteProps)?.title ?? 'Reply',
-        headerLeft: props => (
-          <HeaderBackButton
-            style={HEADER_BACK_BUTTON_LAYOUT_RESET_STYLES}
-            displayMode="minimal"
-            onPress={() => navigation.goBack()}
-            {...props}
-          />
+      options: ({ route, navigation }) =>
+        composeOptions(
+          { title: (route.params as ConversationRouteProps)?.title ?? 'Reply' },
+          withMinimalBack({ onPress: navigation.goBack })
         ),
-      }),
     },
     TeamConversation: {
       screen: TeamConversationScreen,
@@ -265,13 +245,14 @@ export const ChatStack = createNativeStackNavigator({
     },
     ConversationDetails: {
       screen: ConversationDetailsScreen,
-      options: ({ navigation }) => ({
-        presentation: 'modal',
-        title: 'Conversation details',
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+      options: ({ navigation }) =>
+        composeOptions(
+          {
+            presentation: 'modal',
+            title: 'Conversation details',
+          },
+          withRightText({ text: 'Done', onPress: navigation.goBack })
         ),
-      }),
     },
     AvatarPicker: {
       screen: AvatarPickerScreen,
@@ -279,23 +260,25 @@ export const ChatStack = createNativeStackNavigator({
     },
     ChatSettings: {
       screen: SettingsScreen,
-      options: ({ navigation }) => ({
-        title: 'Chat settings',
-        headerBackVisible: false,
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+      options: ({ navigation }) =>
+        composeOptions(
+          {
+            title: 'Chat settings',
+            headerBackVisible: false,
+          },
+          withRightText({ text: 'Done', onPress: navigation.goBack })
         ),
-      }),
     },
     NotificationSettings: {
       screen: NotificationSettingsScreen,
-      options: ({ navigation }) => ({
-        title: 'Chat',
-        headerBackVisible: false,
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+      options: ({ navigation }) =>
+        composeOptions(
+          {
+            title: 'Chat',
+            headerBackVisible: false,
+          },
+          withRightText({ text: 'Done', onPress: navigation.goBack })
         ),
-      }),
     },
     PreferredAppSelection: {
       screen: PreferredAppSelectionScreen,
@@ -305,12 +288,20 @@ export const ChatStack = createNativeStackNavigator({
     },
     GroupNotificationSettings: {
       screen: GroupNotificationSettingsScreen,
-      options: ({ route, navigation }) => ({
-        title: (route.params as { title?: string })?.title || 'Group Settings',
-        headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderDoneButton {...props} navigation={navigation} />
-        ),
-      }),
+      options: ({ route, navigation }) => {
+        const title = (route.params as { title?: string })?.title || 'Group Settings'
+
+        // Done only shows when this is the entry screen (e.g. deep links);
+        // deeper in the stack the back button covers dismissal.
+        return navigation.getState().index === 0
+          ? composeOptions(
+              {
+                title,
+              },
+              withRightText({ text: 'Done', onPress: navigation.goBack })
+            )
+          : { title }
+      },
     },
     GroupNotificationLevelSelect: {
       screen: GroupNotificationLevelSelectScreen,
@@ -331,17 +322,14 @@ export const ChatStack = createNativeStackNavigator({
     GroupConversationNew: {
       screen: ConversationNewScreen,
       if: useQualifiedByAge,
-      options: ({ navigation }) => ({
-        title: 'New conversation',
-        headerLeft: () => null,
-        headerRight: props => (
-          <HeaderTextButton
-            {...props}
-            onPress={() => navigation.getParent()?.goBack()}
-            title="Cancel"
-          />
+      options: ({ navigation }) =>
+        composeOptions(
+          {
+            title: 'New conversation',
+            headerLeft: () => null,
+          },
+          withRightText({ text: 'Cancel', onPress: () => navigation.getParent()?.goBack() })
         ),
-      }),
     },
     SendGiphy: {
       screen: SendGiphyScreen,
@@ -382,14 +370,15 @@ export const ChatStack = createNativeStackNavigator({
     },
     GetHelp: {
       screen: GetHelpScreen,
-      options: ({ navigation }) => ({
-        headerTitle: 'Get help',
-        headerBackVisible: false,
-        presentation: 'modal',
-        headerRight: props => (
-          <HeaderTextButton {...props} onPress={navigation.goBack} title="Close" />
+      options: ({ navigation }) =>
+        composeOptions(
+          {
+            headerTitle: 'Get help',
+            headerBackVisible: false,
+            presentation: 'modal',
+          },
+          withRightText({ text: 'Close', onPress: navigation.goBack })
         ),
-      }),
     },
     NotFound: {
       screen: NotFound,

package/src/screens/bug_report_screen.tsx

@@ -4,7 +4,7 @@ import type {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
 import { startsWith } from 'lodash'
-import React, { useCallback, useLayoutEffect, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import {
   View,
   StyleSheet,
@@ -25,8 +25,10 @@ import {
   KeyboardView,
 } from '../components'
 import {
+  composeOptions,
   HeaderDismissButton,
-  HeaderTextButton,
+  useHeaderRight,
+  withLeftText,
 } from '../components/display/platform_modal_header_buttons'
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 import { DefaultLoading } from '../components/page/loading'
@@ -55,11 +57,11 @@ enum BUG_TYPE_OPTIONS {
 
 export const BugReportScreenOptions = ({
   navigation,
-}: NativeStackScreenProps<any>): NativeStackNavigationOptions => ({
-  presentation: 'modal',
-  title: 'Report a bug',
-  headerLeft: () => <HeaderDismissButton title="Cancel" onPress={() => navigation.goBack()} />,
-})
+}: NativeStackScreenProps<any>): NativeStackNavigationOptions =>
+  composeOptions(
+    { presentation: 'modal', title: 'Report a bug' },
+    withLeftText({ text: 'Cancel', onPress: () => navigation.goBack() })
+  )
 
 interface Attachment {
   id: string
@@ -156,14 +158,7 @@ export function BugReportScreen() {
     return ImagePicker.openImageLibraryAsync().then(result => uploadImagePickerResult(result))
   }
 
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      // eslint-disable-next-line react/no-unstable-nested-components
-      headerRight: () => (
-        <HeaderTextButton title="Submit" onPress={handleSubmit} disabled={!formValid} />
-      ),
-    })
-  }, [formValid, handleSubmit, navigation])
+  useHeaderRight({ title: 'Submit', onPress: handleSubmit, disabled: !formValid })
 
   if (status === 'pending') {
     return (

package/src/screens/conversation_details_screen.tsx

@@ -38,7 +38,7 @@ import {
   type TextStyle,
 } from '../components'
 import { ConversationAvatar } from '../components/display/conversation_avatar'
-import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import { useHeaderRight } from '../components/display/platform_modal_header_buttons'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { useSuspensePaginator, useTheme } from '../hooks'
 import {
@@ -222,24 +222,17 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     [name, productName, resourceType, styles.headerTitleBadge, styles.headerTitleContainer]
   )
 
-  const HeaderRight = useCallback(() => {
-    return (
-      <HeaderTextButton
-        onPress={() => {
-          saveTitle({ title: trimmedTitle || conversation.title })
-          navigation.goBack()
-        }}
-        title="Done"
-      />
-    )
-  }, [conversation.title, navigation, saveTitle, trimmedTitle])
+  useHeaderRight({
+    title: 'Done',
+    onPress: () => {
+      saveTitle({ title: trimmedTitle || conversation.title })
+      navigation.goBack()
+    },
+  })
 
   useEffect(() => {
-    navigation.setOptions({
-      headerRight: HeaderRight,
-      headerTitle: HeaderTitle,
-    })
-  }, [HeaderRight, HeaderTitle, navigation])
+    navigation.setOptions({ headerTitle: HeaderTitle })
+  }, [HeaderTitle, navigation])
 
   const listData = [
     {

package/src/screens/conversation_filters/components/rows.tsx

@@ -59,9 +59,9 @@ export const GroupRow = ({ group, isActive }: GroupRowProps) => {
 
   return (
     <PressableRow onPress={handleFilterByGroup} isActive={isActive}>
-      {headerImage?.medium && (
+      {headerImage?.thumbnail && (
         <Image
-          source={{ uri: headerImage?.medium }}
+          source={{ uri: headerImage?.thumbnail }}
           resizeMode="cover"
           style={styles.rowImage}
           alt=""

package/src/screens/conversation_filters_screen.tsx

@@ -1,5 +1,6 @@
 import { useHeaderHeight } from '@react-navigation/elements'
-import { createComponentForStaticNavigation, RouteProp, useRoute } from '@react-navigation/native'
+import * as ReactNavigationNative from '@react-navigation/native'
+import { RouteProp, useRoute } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React, { useCallback } from 'react'
 import { LayoutChangeEvent, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
@@ -58,7 +59,26 @@ const FilterNavigator = createNativeStackNavigator<ConversationFilterStackParamL
   },
 })
 
-const Filters = createComponentForStaticNavigation(FilterNavigator, 'Filters')
+// tree.getComponent() doesn't exist on every host's installed
+// react-navigation/core — hosts on an older version would throw here.
+// Where it does exist, it's the real implementation (the "deprecated"
+// createComponentForStaticNavigation is just a console.warn wrapper around
+// the same call on current versions), so prefer it and only reach for the
+// old function on cores where getComponent() genuinely isn't there yet.
+function createStaticNavigationComponent<P extends object>(
+  tree: { getComponent?: () => React.ComponentType<P> },
+  name: string
+): React.ComponentType<P> {
+  if (typeof tree.getComponent === 'function') return tree.getComponent()
+
+  const { createComponentForStaticNavigation } = ReactNavigationNative as {
+    createComponentForStaticNavigation: (tree: unknown, name: string) => React.ComponentType<P>
+  }
+
+  return createComponentForStaticNavigation(tree, name)
+}
+
+const Filters = createStaticNavigationComponent(FilterNavigator, 'Filters')
 
 export const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps) => {
   const styles = useStyles()

package/src/screens/conversation_screen.tsx

@@ -257,7 +257,7 @@ function ConversationBottomBar({
   if (conversation.disabled)
     return (
       <ConversationDisabledBanner
-        message={conversation.disabledMessage ?? null}
+        disabledReason={conversation.disabledReason}
         messageLink={messageLink}
       />
     )

package/src/screens/conversation_select_recipients/components/groups_recipient_row.tsx

@@ -12,7 +12,7 @@ export const GroupsRecipientRow = ({ group, onPress }: GroupsRecipientRowProps)
 
   return (
     <RecipientLinkRow
-      imageUri={group.headerImage?.medium}
+      imageUri={group.headerImage?.thumbnail}
       title={group.name}
       subtitle={`${group.membershipsCount} members`}
       onPress={() => onPress(group)}

package/src/screens/conversation_select_recipients/components/restricted_group_row.tsx

@@ -29,9 +29,9 @@ export const RestrictedGroupRow = ({ group }: RestrictedGroupRowProps) => {
       accessibilityLabel={`${group.name} — ${reasonText(group.canCreateConversationReasonCode)}`}
     >
       <View style={styles.innerContainer}>
-        {group.headerImage?.medium && (
+        {group.headerImage?.thumbnail && (
           <Image
-            source={{ uri: group.headerImage.medium }}
+            source={{ uri: group.headerImage.thumbnail }}
             resizeMode="cover"
             style={styles.image}
             alt=""

package/src/screens/message_report_screen.tsx

@@ -8,8 +8,9 @@ import { View, StyleSheet, TextInput, ScrollView } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Spinner, Text, KeyboardView } from '../components'
 import {
-  HeaderDismissButton,
-  HeaderTextButton,
+  composeOptions,
+  useHeaderRight,
+  withLeftText,
 } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { useTheme } from '../hooks'
@@ -34,11 +35,10 @@ export const MessageReportScreenOptions = ({
       })
     )
 
-  return {
-    presentation: 'modal',
-    title: 'Report message',
-    headerLeft: () => <HeaderDismissButton title="Cancel" onPress={handleClose} />,
-  }
+  return composeOptions(
+    { presentation: 'modal', title: 'Report message' },
+    withLeftText({ text: 'Cancel', onPress: handleClose })
+  )
 }
 
 export type MessageReportScreenProps = StaticScreenProps<{
@@ -103,23 +103,20 @@ function MessageReportScreenContent({
     navigation.dispatch(StackActions.popTo('Conversation', { conversation_id }))
   }, [navigation, conversation_id])
 
-  const HeaderRight = useCallback(
-    () => <HeaderTextButton title="Submit" onPress={handleSubmit} disabled={!isFormValid} />,
-    [handleSubmit, isFormValid]
-  )
+  const formVisible = status !== 'pending' && status !== 'success'
+
+  useHeaderRight({
+    title: 'Submit',
+    onPress: handleSubmit,
+    disabled: !isFormValid,
+    enabled: formVisible,
+  })
 
   useLayoutEffect(() => {
-    if (status === 'pending' || status === 'success') {
-      navigation.setOptions({
-        headerRight: () => null,
-      })
-    } else {
-      navigation.setOptions({
-        headerTitle: 'Report message',
-        headerRight: HeaderRight,
-      })
+    if (formVisible) {
+      navigation.setOptions({ headerTitle: 'Report message' })
     }
-  }, [HeaderRight, navigation, status])
+  }, [formVisible, navigation])
 
   if (status === 'pending') {
     return (