@planningcenter/chat-react-native 3.23.0 → 3.23.1-qa-544.0

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

@@ -0,0 +1,99 @@
+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 styles = useStyles()
+
+  const hasImages = message.attachments.some(
+    att => att.type === 'MessageAttachment' && att.attributes?.contentType?.startsWith('image/')
+  )
+
+  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.messageBubbleContainer}>
+        {message.text && (
+          <View style={styles.messageBubble}>
+            <Text style={styles.messageText} numberOfLines={5}>
+              {message.text}
+            </Text>
+          </View>
+        )}
+
+        {hasImages && (
+          <View style={styles.imagePlaceholder}>
+            <Icon name="general.image" style={styles.placeholderIcon} />
+            <Text variant="secondary" style={styles.placeholderText}>
+              Image hidden
+            </Text>
+          </View>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    previewContainer: {
+      gap: 12,
+    },
+    previewHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+    },
+    authorName: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: colors.textColorDefaultPrimary,
+    },
+    messageBubbleContainer: {
+      gap: 8,
+    },
+    messageBubble: {
+      backgroundColor: colors.fillColorNeutral060,
+      borderRadius: 16,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      alignSelf: 'flex-start',
+      maxWidth: '80%',
+    },
+    messageText: {
+      fontSize: 14,
+      color: colors.textColorDefaultPrimary,
+      lineHeight: 20,
+    },
+    imagePlaceholder: {
+      height: 120,
+      backgroundColor: colors.fillColorNeutral060,
+      borderRadius: 16,
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: 8,
+      maxWidth: '80%',
+      alignSelf: 'flex-start',
+    },
+    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,
+    },
+  })
+}

package/src/screens/notification_settings/hooks/groups.ts

@@ -0,0 +1,101 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { getRequestQueryKey, useApiClient } from '../../../hooks'
+import { useSuspenseGet, useSuspensePaginator } from '../../../hooks'
+import { ApiResource } from '../../../types'
+import { GroupMembership, GroupResourceWithMembership } from '../../../types/resources'
+import { throwResponseError } from '../../../utils/response_error'
+
+export const getGroupsRequestArgs = () => ({
+  url: '/me/groups',
+  data: {
+    perPage: 100,
+    include: ['my_group_membership'],
+    filter: 'user_settable_notification_level',
+    fields: {
+      Group: [],
+      GroupMembership: ['notification_level', 'notification_level_description'],
+    },
+    order: 'name',
+  },
+})
+
+export const getGroupRequestArgs = ({ groupId }: { groupId: number | string }) => ({
+  url: `/me/groups/${groupId}`,
+  data: {
+    include: ['my_group_membership'],
+    fields: {
+      Group: ['name', 'source_app_name', 'source_type', 'my_group_membership'],
+      GroupMembership: ['notification_level', 'notification_level_description'],
+    },
+  },
+})
+
+export const useGroups = () => {
+  const args = getGroupsRequestArgs()
+
+  return useSuspensePaginator<GroupResourceWithMembership>(args)
+}
+
+export const useGroup = ({ groupId }: { groupId: number | string }) => {
+  const args = getGroupRequestArgs({ groupId })
+
+  return useSuspenseGet<GroupResourceWithMembership>(args)
+}
+
+export const useGroupMembershipUpdate = ({ groupId }: { groupId: number | string }) => {
+  const apiClient = useApiClient()
+  const queryClient = useQueryClient()
+  const requestArgs = getGroupRequestArgs({ groupId })
+  const queryKey = getRequestQueryKey(requestArgs)
+
+  return useMutation({
+    throwOnError: true,
+    onMutate: notificationLevel => {
+      queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(queryKey, groupData => {
+        if (!groupData?.data.myGroupMembership) return groupData
+
+        return {
+          ...groupData,
+          data: {
+            ...groupData.data,
+            myGroupMembership: {
+              ...groupData.data.myGroupMembership,
+              notificationLevel,
+            },
+          },
+        }
+      })
+    },
+    onSuccess: response => {
+      queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(queryKey, groupData => {
+        if (!groupData?.data.myGroupMembership) return groupData
+
+        return {
+          ...groupData,
+          data: {
+            ...groupData.data,
+            myGroupMembership: {
+              ...groupData.data.myGroupMembership,
+              ...response.data,
+            },
+          },
+        }
+      })
+    },
+    mutationFn: (notificationLevel: string) => {
+      return apiClient.chat
+        .patch<ApiResource<GroupMembership>>({
+          url: `/me/groups/${groupId}/my_group_membership`,
+          data: {
+            data: {
+              type: 'GroupMembership',
+              attributes: {
+                notification_level: notificationLevel,
+              },
+            },
+          },
+        })
+        .catch(throwResponseError)
+    },
+  })
+}