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

package/src/screens/group_notification_settings_screen.tsx

@@ -0,0 +1,92 @@
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React, { useEffect } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Heading, Switch, Text } from '../components'
+import { useTheme } from '../hooks'
+import { platformFontWeightBold } from '../utils/styles'
+import { useGroup, useGroupMembershipUpdate } from './notification_settings/hooks/groups'
+
+export type GroupNotificationSettingsScreenProps = StaticScreenProps<{
+  groupId: number | string
+  title: string
+}>
+
+export function GroupNotificationSettingsScreen({ route }: GroupNotificationSettingsScreenProps) {
+  const { groupId, title } = route.params
+  const navigation = useNavigation()
+  const styles = useStyles()
+  const { data: group } = useGroup({ groupId })
+  const { mutate: updateNotificationLevel } = useGroupMembershipUpdate({ groupId })
+
+  const notificationsEnabled = group.myGroupMembership?.notificationLevel === 'everything'
+
+  useEffect(() => {
+    if (!group.name || title === group.name) return
+
+    navigation.setOptions({ title: group.name })
+  }, [group.name, title, navigation])
+
+  const handleToggle = (value: boolean) => {
+    const notificationLevel = value ? 'everything' : 'nothing'
+    updateNotificationLevel(notificationLevel)
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.sectionOuter}>
+        <View style={styles.sectionInner}>
+          <Heading variant="h3" style={styles.sectionHeading}>
+            Group notification settings
+          </Heading>
+          <Text variant="tertiary" style={styles.sectionSubtitle}>
+            The settings are applied to all conversations in{' '}
+            <Text style={styles.groupNameBold}>{group.name || title}</Text>
+          </Text>
+        </View>
+      </View>
+      <View style={styles.settingRow}>
+        <Text>Enable notifications</Text>
+        <Switch value={notificationsEnabled} onValueChange={handleToggle} />
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.surfaceColor100,
+    },
+    sectionOuter: {
+      paddingLeft: 16,
+      backgroundColor: colors.surfaceColor100,
+    },
+    sectionInner: {
+      paddingRight: 16,
+      paddingTop: 16,
+      paddingBottom: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultBase,
+    },
+    sectionHeading: {
+      paddingBottom: 4,
+    },
+    sectionSubtitle: {
+      color: colors.textColorDefaultSecondary,
+    },
+    groupNameBold: {
+      fontWeight: platformFontWeightBold,
+    },
+    settingRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      backgroundColor: colors.surfaceColor100,
+    },
+  })
+}

package/src/screens/index.ts

@@ -2,9 +2,12 @@ export * from './design_system_screen'
 export * from './conversation_details_screen'
 export * from './conversation_screen'
 export * from './conversation_new/conversation_new_screen'
+export * from './notification_settings_screen'
+export * from './preferred_app_selection_screen'
+export * from './group_notification_settings_screen'
 export * from './conversation_filter_recipients/conversation_filter_recipients_screen'
-export * from './conversation_select_recipients/conversation_select_recipients_screen'
 export * from './message_actions_screen'
+export * from './message_report_screen'
 export * from './send_giphy_screen'
 export * from './not_found'
 export * from './reactions_screen'

package/src/screens/message_actions_screen.tsx

@@ -120,6 +120,14 @@ function MessageActionsScreenContent({
     navigation.goBack()
   }
 
+  const handleReportPress = useCallback(() => {
+    Haptic.impactLight()
+    navigation.navigate('MessageReport', {
+      conversation_id,
+      message_id: message.id,
+    })
+  }, [navigation, conversation_id, message.id])
+
   const { handleReactionToggle, isPending } = useMessageReactionToggle({
     conversation_id,
     message,
@@ -212,6 +220,9 @@ function MessageActionsScreenContent({
     ])
   }, [handleRemoveLinkPreview])
 
+  const showReportMessageAction =
+    !message?.mine && featureEnabled(availableFeatures.message_reporting)
+
   return (
     <FormSheet.Root style={styles.formSheetContent}>
       <View style={styles.reactionList}>
@@ -246,6 +257,14 @@ function MessageActionsScreenContent({
           iconName="services.fileCopy"
           accessibilityHint="Copies text and links to clipboard"
         />
+        {showReportMessageAction && (
+          <FormSheet.Action
+            onPress={handleReportPress}
+            title="Report message"
+            iconName="chat.reportMessageO"
+            accessibilityHint="Opens a form to report this message"
+          />
+        )}
         {message?.mine && (
           <FormSheet.Action
             onPress={() => handleEditPress()}
@@ -306,7 +325,9 @@ const Reaction = ({
       android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
       onPress={onPress}
     >
-      <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
+      <Text style={styles.reactionEmoji} allowFontScaling={false}>
+        {REACTION_EMOJIS[reaction.value]}
+      </Text>
     </PlatformPressable>
   )
 }
@@ -316,7 +337,7 @@ const useStyles = () => {
   const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })
 
   const btnBorderWidth = 1
-  const baseSize = 46 * fontScale
+  const baseSize = 46 * Math.max(1, fontScale)
   const reactionBtnSize = Platform.select({
     ios: baseSize,
     android: baseSize + btnBorderWidth * 2,
@@ -346,6 +367,7 @@ const useStyles = () => {
     },
     reactionEmoji: {
       fontSize: 24,
+      textAlign: 'center',
     },
     actions: {
       paddingTop: 4,

package/src/screens/message_report/components/message_preview.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { View, StyleSheet, ViewStyle } from 'react-native'
+import { Avatar, Text, Icon } from '../../../components'
+import { useTheme } from '../../../hooks'
+import { MessageResource } from '../../../types'
+
+interface MessagePreviewProps {
+  message: MessageResource
+  style?: ViewStyle
+}
+
+export function MessagePreview({ message, style }: MessagePreviewProps) {
+  const hasImages = message.attachments.some(
+    att => att.type === 'MessageAttachment' && att.attributes?.contentType?.startsWith('image/')
+  )
+
+  const imageOnly = hasImages && !message.text
+  const styles = useStyles({ imageOnly })
+
+  return (
+    <View style={[styles.previewContainer, style]}>
+      <View style={styles.previewHeader}>
+        <Avatar sourceUri={message.author.avatar} size="md" />
+        <Text style={styles.authorName}>{message.author.name}</Text>
+      </View>
+
+      <View style={styles.messageBubble}>
+        {hasImages && (
+          <View style={styles.imagePlaceholder}>
+            <Icon name="general.image" style={styles.placeholderIcon} />
+            <Text variant="secondary" style={styles.placeholderText}>
+              Image hidden
+            </Text>
+          </View>
+        )}
+
+        {message.text && (
+          <Text style={styles.messageText} numberOfLines={5}>
+            {message.text}
+          </Text>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const useStyles = ({ imageOnly }: { imageOnly: boolean }) => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    previewContainer: {
+      gap: 12,
+    },
+    previewHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+    },
+    authorName: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: colors.textColorDefaultPrimary,
+    },
+    messageBubble: {
+      backgroundColor: colors.fillColorNeutral060,
+      borderRadius: 16,
+      overflow: 'hidden',
+      alignSelf: 'flex-start',
+      maxWidth: imageOnly ? '40%' : '80%',
+    },
+    messageText: {
+      fontSize: 14,
+      color: colors.textColorDefaultPrimary,
+      lineHeight: 20,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+    },
+    imagePlaceholder: {
+      height: 120,
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: 8,
+    },
+    placeholderIcon: {
+      fontSize: 32,
+      color: colors.iconColorDefaultSecondary,
+    },
+    placeholderText: {
+      fontSize: 14,
+    },
+  })
+}

package/src/screens/message_report/components/report_reason_list.tsx

@@ -0,0 +1,106 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { PlatformPressable } from '@react-navigation/elements'
+import { Text } from '../../../components'
+import { useTheme, useCreateAndroidRippleColor } from '../../../hooks'
+import { Haptic } from '../../../utils/native_adapters'
+import {
+  MESSAGE_REPORT_REASONS,
+  MessageReportReason,
+} from '../../../types/resources/message_report'
+
+const MESSAGE_REPORT_REASONS_LIST = Object.entries(MESSAGE_REPORT_REASONS).map(([key, label]) => ({
+  key: key as MessageReportReason,
+  label,
+}))
+
+interface ReportReasonListProps {
+  selectedReason: MessageReportReason | null
+  onReasonChange: (reason: MessageReportReason) => void
+}
+
+export function ReportReasonList({ selectedReason, onReasonChange }: ReportReasonListProps) {
+  return (
+    <View>
+      {MESSAGE_REPORT_REASONS_LIST.map(({ key, label }) => (
+        <ReportReasonButton
+          key={key}
+          reason={key}
+          label={label}
+          isSelected={selectedReason === key}
+          onPress={() => {
+            Haptic.impactLight()
+            onReasonChange(key)
+          }}
+        />
+      ))}
+    </View>
+  )
+}
+
+interface ReportReasonButtonProps {
+  reason: MessageReportReason
+  label: string
+  isSelected: boolean
+  onPress: () => void
+}
+
+function ReportReasonButton({ label, isSelected, onPress }: ReportReasonButtonProps) {
+  const styles = useStyles({ isSelected })
+  const { colors } = useTheme()
+  const androidRippleColor = useCreateAndroidRippleColor({ color: colors.fillColorNeutral060 })
+
+  return (
+    <PlatformPressable
+      onPress={onPress}
+      style={styles.pressable}
+      android_ripple={{ color: androidRippleColor }}
+      accessibilityRole="radio"
+      accessibilityState={{ selected: isSelected }}
+      accessibilityLabel={label}
+    >
+      <View style={styles.row}>
+        <View style={styles.radioButton}>
+          {isSelected && <View style={styles.radioButtonInner} />}
+        </View>
+        <Text style={styles.label}>{label}</Text>
+      </View>
+    </PlatformPressable>
+  )
+}
+
+const useStyles = ({ isSelected }: { isSelected: boolean }) => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    pressable: {
+      paddingVertical: 16,
+      paddingHorizontal: 16,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+    },
+    radioButton: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      borderWidth: 2,
+      borderColor: isSelected ? colors.interaction : colors.borderColorDefaultBase,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    radioButtonInner: {
+      width: 10,
+      height: 10,
+      borderRadius: 5,
+      backgroundColor: colors.interaction,
+    },
+    label: {
+      fontSize: 16,
+      color: colors.textColorDefaultPrimary,
+      flex: 1,
+    },
+  })
+}

package/src/screens/message_report_screen.tsx

@@ -0,0 +1,278 @@
+import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react'
+import { View, StyleSheet, TextInput, ScrollView } from 'react-native'
+import type {
+  NativeStackNavigationOptions,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack'
+import { StaticScreenProps, useNavigation, StackActions } from '@react-navigation/native'
+import { Spinner, Text, KeyboardView } from '../components'
+import BlankState from '../components/primitive/blank_state_primitive'
+import { useTheme } from '../hooks'
+import { useReportMessage } from '../hooks/use_report_message'
+import {
+  HeaderDismissButton,
+  HeaderTextButton,
+} from '../components/display/platform_modal_header_buttons'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useConversationMessages } from '../hooks/use_conversation_messages'
+import { MessageResource } from '../types'
+import { MessageReportReason } from '../types/resources/message_report'
+import { MessagePreview } from './message_report/components/message_preview'
+import { ReportReasonList } from './message_report/components/report_reason_list'
+import { platformFontWeightBold } from '../utils'
+
+const MAX_DETAIL_LENGTH = 500
+
+export const MessageReportScreenOptions = ({
+  navigation,
+}: NativeStackScreenProps<any>): NativeStackNavigationOptions => ({
+  presentation: 'modal',
+  title: 'Report message',
+  headerLeft: () => <HeaderDismissButton title="Cancel" onPress={() => navigation.goBack()} />,
+})
+
+export type MessageReportScreenProps = StaticScreenProps<{
+  conversation_id: number
+  message_id: string
+}>
+
+export function MessageReportScreen({ route }: MessageReportScreenProps) {
+  const { conversation_id, message_id } = route.params
+
+  const { messages } = useConversationMessages({ conversation_id }, { refetchOnMount: false })
+  const message = messages.find(m => m.id === message_id)
+
+  if (!message) return null
+
+  return <MessageReportScreenContent message={message} conversation_id={conversation_id} />
+}
+
+function MessageReportScreenContent({
+  message,
+  conversation_id,
+}: {
+  message: MessageResource
+  conversation_id: number
+}) {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const [selectedReason, setSelectedReason] = useState<MessageReportReason | null>(null)
+  const [reasonDetail, setReasonDetail] = useState('')
+  const { mutate: submitReport, status } = useReportMessage(conversation_id, message.id)
+
+  const handleReasonChange = useCallback((reason: MessageReportReason) => {
+    setSelectedReason(reason)
+
+    if (reason !== 'other') {
+      setReasonDetail('')
+    }
+  }, [])
+
+  const isFormValid = useMemo(() => {
+    if (selectedReason === null) return false
+
+    if (selectedReason === 'other' && reasonDetail.trim().length === 0) {
+      return false
+    }
+
+    if (status === 'pending') return false
+
+    return true
+  }, [selectedReason, reasonDetail, status])
+
+  const handleSubmit = useCallback(() => {
+    if (!isFormValid || !selectedReason) return
+
+    submitReport({
+      reason: selectedReason,
+      reasonDetail: selectedReason === 'other' ? reasonDetail : undefined,
+    })
+  }, [isFormValid, selectedReason, reasonDetail, submitReport])
+
+  const handleClose = useCallback(() => {
+    navigation.dispatch(StackActions.popTo('Conversation', { conversation_id }))
+  }, [navigation, conversation_id])
+
+  const HeaderRight = useCallback(
+    () => <HeaderTextButton title="Submit" onPress={handleSubmit} disabled={!isFormValid} />,
+    [handleSubmit, isFormValid]
+  )
+
+  useLayoutEffect(() => {
+    if (status === 'pending' || status === 'success') {
+      navigation.setOptions({
+        headerRight: () => null,
+      })
+    } else {
+      navigation.setOptions({
+        headerTitle: 'Report message',
+        headerRight: HeaderRight,
+      })
+    }
+  }, [HeaderRight, navigation, status])
+
+  if (status === 'pending') {
+    return (
+      <View style={styles.fullScreenContainer}>
+        <Spinner />
+        <Text style={styles.loadingText}>Submitting report...</Text>
+      </View>
+    )
+  }
+
+  if (status === 'success') {
+    return (
+      <View style={styles.fullScreenContainer}>
+        <BlankState.Root>
+          <BlankState.Imagery name="general.checkCircle" style={styles.successIcon} />
+          <BlankState.Content>
+            <BlankState.Heading style={styles.successTitle}>Message reported</BlankState.Heading>
+            <BlankState.Text style={styles.successSubtitle}>
+              The message has been reported and a church leader will be contacted.
+            </BlankState.Text>
+          </BlankState.Content>
+          <BlankState.Button title="Close" onPress={handleClose} size="lg" variant="fill" />
+        </BlankState.Root>
+      </View>
+    )
+  }
+
+  if (status === 'error') {
+    return (
+      <BlankState.Root>
+        <BlankState.Imagery name="general.exclamationTriangle" />
+        <BlankState.Content>
+          <BlankState.Heading>Unable to submit report</BlankState.Heading>
+          <BlankState.Text>
+            We were unable to report this message. Please try again.
+          </BlankState.Text>
+        </BlankState.Content>
+        <BlankState.Button title="Close" onPress={handleClose} size="lg" variant="outline" />
+      </BlankState.Root>
+    )
+  }
+
+  return (
+    <KeyboardView>
+      <ScrollView contentContainerStyle={styles.container}>
+        <Text style={styles.warningText}>
+          Reporting this message will notify a church leader. The person you are reporting will not
+          receive a notification from Church Center. If someone is in immediate danger, call local
+          emergency services. Don&apos;t wait.
+        </Text>
+
+        <MessagePreview message={message} />
+
+        <View style={styles.reasonSection}>
+          <Text style={styles.fieldLabel}>
+            What best describes the problem? <Text style={styles.required}>*</Text>
+          </Text>
+
+          <View style={styles.reasonListContainer}>
+            <ReportReasonList selectedReason={selectedReason} onReasonChange={handleReasonChange} />
+          </View>
+        </View>
+
+        {selectedReason === 'other' && (
+          <View style={styles.detailSection}>
+            <Text style={styles.fieldLabel}>
+              Please provide more details <Text style={styles.required}>*</Text>
+            </Text>
+            <TextInput
+              style={styles.textInput}
+              multiline
+              placeholder="Describe the issue..."
+              value={reasonDetail}
+              onChangeText={setReasonDetail}
+              maxLength={MAX_DETAIL_LENGTH}
+              accessibilityLabel="Additional details"
+              accessibilityHint="Provide more information about why you're reporting this message"
+            />
+            {reasonDetail.length >= MAX_DETAIL_LENGTH - 100 && (
+              <Text variant="footnote">
+                {reasonDetail.length}/{MAX_DETAIL_LENGTH}
+              </Text>
+            )}
+          </View>
+        )}
+      </ScrollView>
+    </KeyboardView>
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      padding: 16,
+      paddingBottom: 16 + bottom,
+      gap: 24,
+    },
+    fullHeight: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    fullScreenContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: colors.surfaceColor100,
+    },
+    loadingText: {
+      marginTop: 16,
+      fontSize: 16,
+      fontWeight: '600',
+      color: colors.textColorDefaultPrimary,
+    },
+    warningText: {
+      fontSize: 14,
+      lineHeight: 20,
+      color: colors.textColorDefaultSecondary,
+    },
+    reasonSection: {
+      gap: 8,
+    },
+    fieldLabel: {
+      fontSize: 16,
+      fontWeight: platformFontWeightBold,
+      color: colors.textColorDefaultPrimary,
+    },
+    required: {
+      color: colors.statusErrorText,
+    },
+    reasonListContainer: {
+      backgroundColor: colors.surfaceColor100,
+    },
+    detailSection: {
+      gap: 8,
+    },
+    textInput: {
+      color: colors.textColorDefaultPrimary,
+      fontSize: 16,
+      textAlignVertical: 'top',
+      minHeight: 120,
+      maxHeight: 200,
+      borderWidth: 1,
+      borderColor: colors.borderColorDefaultBase,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      backgroundColor: colors.surfaceColor100,
+    },
+    successIcon: {
+      color: colors.statusSuccessIcon,
+      fontSize: 48,
+    },
+    successTitle: {
+      fontSize: 24,
+      marginBottom: 4,
+    },
+    successSubtitle: {
+      fontSize: 16,
+      marginBottom: 4,
+    },
+  })
+}