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

package/src/screens/bug_report_screen.tsx

@@ -1,5 +1,13 @@
 import React, { useCallback, useLayoutEffect, useState } from 'react'
-import { View, StyleSheet, TextInput, Linking, ScrollView, TouchableOpacity } from 'react-native'
+import {
+  View,
+  StyleSheet,
+  TextInput,
+  Linking,
+  ScrollView,
+  TouchableOpacity,
+  Platform,
+} from 'react-native'
 import type {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
@@ -27,19 +35,23 @@ import { DefaultLoading } from '../components/page/loading'
 import { startsWith } from 'lodash'
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 import { SafeAreaModal } from '../components/safe_area_modal'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useAppName } from '../hooks/use_app_name'
 
 const MAX_DESCRIPTION_LENGTH = 2000
 
-const BUG_TYPE_OPTIONS = [
-  'Issues sending or receiving messages',
-  'Trouble starting a new conversation',
-  "Notifications aren't working",
-  'Incorrect read receipts or unread counts',
-  'Problems with file attachments',
-  "Something isn't displaying properly",
-  'App is slow or crashes',
-  'Other',
-]
+enum BUG_TYPE_OPTIONS {
+  Chat = 'Chat',
+  FindMyChurch = 'Find my church',
+  LoggingIn = 'Logging in',
+  UsingGroups = 'Using groups (events, resources, members)',
+  CheckingIn = 'Checking in',
+  MakingADonation = 'Making a donation',
+  RegisteringForAnEvent = 'Registering for an event',
+  MyProfileAndSchedule = 'My profile and schedule',
+  Directory = 'Directory',
+  Other = 'Other',
+}
 
 export const BugReportScreenOptions = ({
   navigation,
@@ -55,57 +67,49 @@ interface Attachment {
   type: string
 }
 
+enum QualifiedMobileAppName {
+  chat = 'Chat', // There is no app name for the mobile app
+  churchcenter = 'Church Center App',
+  services = 'Services Mobile',
+}
+
 export function BugReportScreen() {
   const styles = useStyles()
   const navigation = useNavigation()
-  const [bugType, setBugType] = useState('')
+  const name = useAppName()
+  const appName = QualifiedMobileAppName[name]
+  const [bugType, setBugType] = useState<BUG_TYPE_OPTIONS>(BUG_TYPE_OPTIONS.Chat)
   const [showBugTypePicker, setShowBugTypePicker] = useState(false)
   const [whatWereDoing, setWhatWereDoing] = useState('')
   const [whatExpected, setWhatExpected] = useState('')
-  const [stepsToResolve, setStepsToResolve] = useState('')
   const uploadApi = useUploadClient()
   const [uploading, setUploading] = useState(false)
   const [attachment, setAttachment] = useState<Attachment | null>(null)
   const [uploadError, setUploadError] = useState<string | null>(null)
-  const mutation = useReportBugAction()
-  const { mutate, status } = mutation
+  const { mutate: createBugReport, status } = useReportBugAction()
   const formValid =
     bugType.trim().length > 0 &&
     whatWereDoing.trim().length > 0 &&
     whatExpected.trim().length > 0 &&
-    stepsToResolve.trim().length > 0 &&
     status === 'idle' &&
     !uploading
   const [imagePreviewURI, setImagePreviewURI] = useState<string>('')
-
   const isImageAttachment = startsWith(attachment?.type, 'image/')
 
   const handleSubmit = useCallback(() => {
-    const description = `${whatWereDoing.substring(0, 100)}
-
-## What kind of bug did you experience?
-${bugType}
-
-## What were you trying to do when you encountered the bug?
-${whatWereDoing}
-
-## What did you expect to happen? What actually happened?
-${whatExpected}
+    const description = generateBugReportDescription(bugType, whatWereDoing, whatExpected)
 
-## What steps have you tried to resolve the issue?
-${stepsToResolve}`
-
-    mutate({
+    createBugReport({
       description,
-      description_json: JSON.stringify({
+      description_json: {
         bugType,
         whatWereDoing,
         whatExpected,
-        stepsToResolve,
-      }),
+        appName: appName,
+      },
       attachmentIds: attachment ? [attachment.id] : [],
     })
-  }, [attachment, bugType, whatWereDoing, whatExpected, stepsToResolve, mutate])
+  }, [attachment, bugType, whatWereDoing, whatExpected, createBugReport, appName])
 
   const handleRemoveAttachment = useCallback(() => {
     setAttachment(null)
@@ -215,12 +219,10 @@ ${stepsToResolve}`
 
         <View style={styles.textInputContainer}>
           <Text style={styles.fieldLabel}>
-            What kind of bug did you experience? <Text style={styles.required}>*</Text>
+            Where did you experience the issue? <Text style={styles.required}>*</Text>
           </Text>
           <TouchableOpacity style={styles.pickerButton} onPress={() => setShowBugTypePicker(true)}>
-            <Text style={[styles.pickerText, !bugType && styles.pickerPlaceholder]}>
-              {bugType || 'Select the bug type'}
-            </Text>
+            <Text style={[styles.pickerText, !bugType && styles.pickerPlaceholder]}>{bugType}</Text>
             <Icon
               name="general.downChevron"
               style={styles.pickerArrow}
@@ -242,7 +244,7 @@ ${stepsToResolve}`
               <View style={styles.modalHeaderSpacer} />
             </View>
             <ScrollView style={styles.modalContent}>
-              {BUG_TYPE_OPTIONS.map(option => (
+              {Object.values(BUG_TYPE_OPTIONS).map(option => (
                 <TouchableOpacity
                   key={option}
                   style={styles.modalOption}
@@ -287,7 +289,7 @@ ${stepsToResolve}`
 
         <View style={styles.textInputContainer}>
           <Text style={styles.fieldLabel}>
-            What did you expect to happen? What actually happened?{' '}
+            What did you expect to happen? Please describe what actually happened.{' '}
             <Text style={styles.required}>*</Text>
           </Text>
           <TextInput
@@ -305,25 +307,6 @@ ${stepsToResolve}`
           )}
         </View>
 
-        <View style={styles.textInputContainer}>
-          <Text style={styles.fieldLabel}>
-            What steps have you tried to resolve the issue? <Text style={styles.required}>*</Text>
-          </Text>
-          <TextInput
-            style={styles.textInput}
-            multiline
-            placeholder="Description"
-            value={stepsToResolve}
-            onChangeText={setStepsToResolve}
-            maxLength={MAX_DESCRIPTION_LENGTH}
-          />
-          {stepsToResolve.length >= MAX_DESCRIPTION_LENGTH - 100 && (
-            <Text variant="footnote">
-              {stepsToResolve.length}/{MAX_DESCRIPTION_LENGTH}
-            </Text>
-          )}
-        </View>
-
         <View style={styles.attachmentSection}>
           <View style={styles.attachmentHeader}>
             <Text style={styles.attachmentLabel}>
@@ -349,7 +332,7 @@ ${stepsToResolve}`
             </View>
           ) : (
             <Button
-              title="Attach a screenshot"
+              title="Attach a screenshot or recording"
               accessibilityHint="Opens your device's image gallery"
               iconNameLeft="general.paperclip"
               onPress={pickImage}
@@ -359,14 +342,19 @@ ${stepsToResolve}`
               disabled={uploading || Boolean(attachment)}
             />
           )}
-        </View>
-
-        <View style={styles.footer}>
           <Text variant="footnote">
-            We can’t respond to every submission, but we may reach out if we have additional
-            questions.
+            Screenshots and screen recordings help us reproduce and fix issues faster.{' '}
+            <TextInlineButton
+              accessibilityRole="link"
+              variant="footnote"
+              onPress={() => Linking.openURL(VIDEO_RECORDING_HELP_URL)}
+            >
+              How to record your screen
+            </TextInlineButton>
           </Text>
+        </View>
 
+        <View style={styles.footer}>
           <Text variant="footnote">
             For details on how we process your data and ensure its security, please refer to our{' '}
             <TextInlineButton
@@ -384,12 +372,36 @@ ${stepsToResolve}`
   )
 }
 
+const VIDEO_RECORDING_HELP_URL = Platform.select({
+  android: 'https://support.google.com/android/answer/6241341?hl=en',
+  default: 'https://support.apple.com/en-us/HT208721',
+})
+
+const generateBugReportDescription = (
+  bugType: BUG_TYPE_OPTIONS,
+  whatWereDoing: string,
+  whatExpected: string
+) => {
+  return `${whatWereDoing.substring(0, 100)}
+
+  ## What kind of bug did you experience?
+${bugType}
+
+## What were you trying to do when you encountered the bug?
+${whatWereDoing}
+
+## What did you expect to happen? What actually happened?
+${whatExpected}
+`
+}
+
 const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
   const { colors } = useTheme()
   return StyleSheet.create({
     container: {
       padding: 16,
-      paddingBottom: 16,
+      paddingBottom: 16 + bottom,
       gap: 24,
     },
     fullHeight: {

package/src/screens/conversations/conversations_screen.tsx

@@ -1,5 +1,5 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import React from 'react'
+import React, { useCallback } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Conversations, TextButton } from '../../components'
 import { ActionButton } from '../../components/display/action_button'
@@ -54,9 +54,9 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
     })
   }
 
-  const reportABug = () => {
-    return navigation.navigate('BugReport')
-  }
+  const handleGetHelp = useCallback(() => {
+    navigation.navigate('GetHelp')
+  }, [navigation])
 
   return (
     <View style={styles.container}>
@@ -71,12 +71,12 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
         secondaryButton={
           <TextButton
             variant="tertiary"
-            onPress={reportABug}
+            onPress={handleGetHelp}
             maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
             accessibilityShowsLargeContentViewer
-            accessibilityLargeContentTitle="Report a bug"
+            accessibilityLargeContentTitle="Get help"
           >
-            Report a bug
+            Get help
           </TextButton>
         }
       />

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,
+    },
+  })
+}