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

package/src/components/display/icon.tsx

@@ -5,29 +5,17 @@ import { SvgXml } from 'react-native-svg'
 import type { XmlProps } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
 
-// @ts-ignore
 import * as accounts from '@planningcenter/icons/paths/accounts'
-// @ts-ignore
 import * as api from '@planningcenter/icons/paths/api'
-// @ts-ignore
 import * as brand from '@planningcenter/icons/paths/brand'
-// @ts-ignore
 import * as calendar from '@planningcenter/icons/paths/calendar'
-// @ts-ignore
 import * as chat from '@planningcenter/icons/paths/chat'
-// @ts-ignore
 import * as churchCenter from '@planningcenter/icons/paths/church-center'
-// @ts-ignore
 import * as general from '@planningcenter/icons/paths/general'
-// @ts-ignore
 import * as groups from '@planningcenter/icons/paths/groups'
-// @ts-ignore
 import * as logomark from '@planningcenter/icons/paths/logomark'
-// @ts-ignore
 import * as people from '@planningcenter/icons/paths/people'
-// @ts-ignore
 import * as services from '@planningcenter/icons/paths/services'
-// @ts-ignore
 import * as publishing from '@planningcenter/icons/paths/publishing'
 
 // =================================
@@ -57,7 +45,22 @@ export type IconStyle = ViewStyle & {
 }
 
 export type IconSetName = keyof typeof ICONS
-export type IconString = `${IconSetName}.${(typeof ICONS)[IconSetName]}`
+
+type IconName<T extends IconSetName> = keyof (typeof ICONS)[T] & string
+
+export type IconString =
+  | `accounts.${IconName<'accounts'>}`
+  | `api.${IconName<'api'>}`
+  | `brand.${IconName<'brand'>}`
+  | `calendar.${IconName<'calendar'>}`
+  | `chat.${IconName<'chat'>}`
+  | `churchCenter.${IconName<'churchCenter'>}`
+  | `general.${IconName<'general'>}`
+  | `groups.${IconName<'groups'>}`
+  | `logomark.${IconName<'logomark'>}`
+  | `people.${IconName<'people'>}`
+  | `services.${IconName<'services'>}`
+  | `publishing.${IconName<'publishing'>}`
 
 // =================================
 // ====== Component ================
@@ -137,7 +140,7 @@ const useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?
 const getIconPath = (name: IconString): string => {
   const [setName, iconName] = name.split('.')
 
-  return ICONS[setName as IconSetName]?.[iconName]
+  return (ICONS[setName as IconSetName] as Record<string, string>)?.[iconName]
 }
 
 // =================================

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: {

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/design_system_screen.tsx

@@ -863,7 +863,7 @@ function ImageIconsSection({ isLast }: SectionProps) {
         description="Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size."
       >
         <Row>
-          {/* @ts-expect-error - Icon name is not a string */}
+          {/* @ts-expect-error - Testing missing icon fallback */}
           <Icon name="missingIcon" size={20} />
           <Icon name="general.textMessage" size={20} />
           <Icon name="general.bell" size={20} color={colors.needsDesignPass} />

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