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

package/src/screens/get_help_screen.tsx

@@ -0,0 +1,131 @@
+import { useNavigation } from '@react-navigation/native'
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import { useCallback } from 'react'
+import { Linking, StyleSheet, View } from 'react-native'
+import { Heading, PressableRow, Text, TextInlineButton } from '../components'
+import { useApiGet, useTheme } from '../hooks'
+import { useAppName } from '../hooks/use_app_name'
+import { ResourceObject } from '../types'
+
+type GetHelpScreenProps = NativeStackScreenProps<{}>
+
+interface OrganizationResource extends ResourceObject {
+  id: number
+  name: string
+  contactEmail: string
+  contactPhoneNumber: string
+  churchCenterChatHelpUrl: string
+  servicesChatHelpUrl: string
+}
+
+const useOrganization = () => {
+  const { data: organization } = useApiGet<OrganizationResource>({
+    url: '/',
+    data: {
+      fields: {
+        Organization: [
+          'contact_phone_number',
+          'contact_email',
+          'name',
+          'church_center_chat_help_url',
+          'services_chat_help_url',
+        ],
+      },
+    },
+  })
+
+  return organization
+}
+
+export const GetHelpScreen = ({}: GetHelpScreenProps) => {
+  const styles = useStyles()
+  const appName = useAppName()
+  const isChurchCenter = appName === 'churchcenter'
+  const navigation = useNavigation()
+  const organization = useOrganization()
+  const contactPresent = organization?.contactEmail || organization?.contactPhoneNumber
+  const getHelpLink = isChurchCenter
+    ? organization?.churchCenterChatHelpUrl
+    : organization?.servicesChatHelpUrl
+
+  const handleNavigateToBugReport = useCallback(() => {
+    navigation.navigate('BugReport')
+  }, [navigation])
+
+  return (
+    <View style={[styles.container]}>
+      <Heading variant="h2" style={[styles.heading, styles.headingBottomBorder]}>
+        How-to articles
+      </Heading>
+      <PressableRow
+        onPress={() => Linking.openURL(getHelpLink || '')}
+        text="Get help with chat"
+        isActive={true}
+        iconPath="general.newWindow"
+      />
+      {contactPresent && (
+        <Heading variant="h2" style={[styles.heading, styles.headingBottomBorder]}>
+          Contact {organization?.name}
+        </Heading>
+      )}
+      <ContactRow email={organization?.contactEmail} />
+      <ContactRow phone={organization?.contactPhoneNumber} />
+      <Heading variant="h2" style={[styles.heading]}>
+        Report a bug
+      </Heading>
+      <View style={styles.text}>
+        <Text>
+          Having an issue?{' '}
+          <TextInlineButton onPress={handleNavigateToBugReport}>
+            Submit a bug report
+          </TextInlineButton>{' '}
+          to the development team.
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+const ContactRow = ({ email, phone }: { email?: string; phone?: string }) => {
+  if (!email && !phone) return null
+
+  const contact = email || phone
+
+  return (
+    <PressableRow
+      onPress={() => {}}
+      text={contact || ''}
+      isActive={true}
+      iconPath={email ? 'services.email' : 'general.phone'}
+    />
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    text: {
+      paddingVertical: 4,
+      paddingHorizontal: 16,
+    },
+    heading: {
+      marginLeft: 16,
+      paddingTop: 24,
+      paddingBottom: 12,
+    },
+    headingBottomBorder: {
+      marginLeft: 16,
+      paddingLeft: 0,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultBase,
+    },
+    headingAux: {
+      paddingTop: 24,
+      paddingHorizontal: 16,
+    },
+  })
+}

package/src/screens/message_actions_screen.tsx

@@ -13,6 +13,7 @@ import { useConversationMessages } from '../hooks/use_conversation_messages'
 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'
 
 export const MessageActionsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: [0.5],
@@ -26,19 +27,40 @@ export type MessageActionsScreenProps = StaticScreenProps<{
 }>
 
 export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
-  const navigation = useNavigation()
   const { conversation_id, message_id, canDeleteNonAuthoredMessages } = route.params
 
-  const apiClient = useApiClient()
-  const styles = useStyles()
-
   const { messages, refetch } = useConversationMessages(
     { conversation_id },
     { refetchOnMount: false }
   )
   const message = messages.find(m => m.id === message_id)
 
-  if (!message) fail('Message not found')
+  if (!message) return null
+
+  return (
+    <MessageActionsScreenContent
+      message={message}
+      conversation_id={conversation_id}
+      canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages || false}
+      refetchMessages={refetch}
+    />
+  )
+}
+
+function MessageActionsScreenContent({
+  message,
+  conversation_id,
+  canDeleteNonAuthoredMessages,
+  refetchMessages,
+}: {
+  message: MessageResource
+  conversation_id: number
+  canDeleteNonAuthoredMessages: boolean
+  refetchMessages: () => void
+}) {
+  const navigation = useNavigation()
+  const apiClient = useApiClient()
+  const styles = useStyles()
 
   const myReactions = message?.reactionCounts
     .filter(reaction => reaction.mine)
@@ -73,15 +95,15 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
   })
 
   const deleteMessage = useCallback(() => {
-    const url = `/me/conversations/${conversation_id}/messages/${message_id}/`
+    const url = `/me/conversations/${conversation_id}/messages/${message.id}/`
 
     return apiClient.chat.delete({ url })
-  }, [apiClient, conversation_id, message_id])
+  }, [apiClient, conversation_id, message.id])
 
   const { mutate: handleDeleteMessage } = useMutation({
     mutationFn: deleteMessage,
     onSuccess: () => {
-      refetch()
+      refetchMessages()
       Haptic.notificationSuccess()
       navigation.goBack()
     },
@@ -104,24 +126,24 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
       {
         ...(targetRoute?.params || {}),
         conversation_id,
-        editing_message_id: message_id,
+        editing_message_id: message.id,
       },
       isNil
     )
     navigation.dispatch(StackActions.popTo('Conversation', params))
-  }, [navigation, conversation_id, message_id])
+  }, [navigation, conversation_id, message.id])
 
   const handleViewReadReceiptsPress = useCallback(() => {
     Haptic.impactLight()
     const params = omitBy(
       {
         conversation_id,
-        message_id,
+        message_id: message.id,
       },
       isNil
     )
     navigation.dispatch(StackActions.popTo('MessageReadReceipts', params))
-  }, [navigation, conversation_id, message_id])
+  }, [navigation, conversation_id, message.id])
 
   return (
     <FormSheet.Root style={styles.formSheetContent}>

package/src/utils/client/index.ts

@@ -1 +1,2 @@
 export * from './client'
+export * from './types'

package/src/utils/styles.ts

@@ -2,7 +2,7 @@ import { Platform } from 'react-native'
 import { tokens } from '../vendor/tapestry/tokens'
 
 export const MAX_FONT_SIZE_MULTIPLIER = 1.5
-export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3 // Use in headers, footers, toolbars, etc.
+export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers, toolbars, etc.
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 

package/src/utils/theme.ts

@@ -57,6 +57,7 @@ interface ChatColors {
   androidModalHeaderButtonTextColor: ColorValue | string | undefined
   iOSModalHeaderButtonTextColor: OpaqueColorValue | string | undefined
   androidSwitchThumbColor: string | undefined
+  conversationActionsBackground: string
   testColor: string
   statusSuccessIcon: string
   statusSuccessText: string
@@ -99,6 +100,7 @@ const colorsChatLight: ChatColors = {
   buttonEnd: undefined,
   interaction: tokens.fillColorInteractionDefault,
   androidSwitchThumbColor: undefined,
+  conversationActionsBackground: tokens.colorNeutral100White,
   testColor: 'hotpink',
   statusInfoIcon: tokens.iconColorStatusInfoPrimary,
   statusInfoText: tokens.textColorStatusInfo,
@@ -141,6 +143,7 @@ const colorsChatDark: ChatColors = {
   buttonEnd: undefined,
   interaction: tokens.fillColorInteractionDefaultDark,
   androidSwitchThumbColor: undefined,
+  conversationActionsBackground: tokens.colorNeutral7,
   testColor: 'pink',
   statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,
   statusInfoText: tokens.textColorStatusInfoDark,