@planningcenter/chat-react-native 3.23.0 → 3.23.1-qa-538.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/types/resources/conversation.ts

@@ -1,5 +1,6 @@
 import type { AnalyticsMetadataResource } from './analytics_metadata'
 import { ConversationBadgeResource } from './conversation_badge'
+import { ConversationMembershipResource } from './conversation_membership'
 import { GroupResource } from './group_resource'
 import { MemberAbilityResource } from './member_ability'
 
@@ -8,9 +9,7 @@ export interface ConversationResource {
   id: number
   badges?: ConversationBadgeResource[]
   analyticsMetadata?: AnalyticsMetadataResource
-  conversationMembership?: {
-    lastReadMessageSortKey: string
-  }
+  conversationMembership?: ConversationMembershipResource
   createdAt: string
   deleted?: boolean
   groups?: GroupResource[]

package/src/types/resources/conversation_membership.ts

@@ -0,0 +1,15 @@
+import { ResourceObject } from '../api_primitives'
+
+export type NotificationLevelValue = 'everything' | 'nothing'
+export type NotificationLevelDescription = string
+
+export interface ConversationMembershipResource extends ResourceObject {
+  type: 'ConversationMembership'
+  lastReadMessageSortKey: string
+  notificationLevel: NotificationLevelValue
+  notificationLevelDescription: NotificationLevelDescription
+  notificationLevelOptions: Array<{
+    description: NotificationLevelDescription
+    value: NotificationLevelValue
+  }>
+}

package/src/types/resources/index.ts

@@ -1,5 +1,6 @@
 export * from './analytics_metadata'
 export * from './conversation'
+export * from './conversation_membership'
 export * from './member'
 export * from './message'
 export * from './oauth_token'

package/src/types/resources/message_report.ts

@@ -0,0 +1,20 @@
+export const MESSAGE_REPORT_REASONS = {
+  scam_or_fraud: 'Scam or fraud',
+  inappropriate_content: 'Inappropriate or offensive content',
+  harassment_or_bullying: 'Harassment or bullying',
+  spam: 'Spam or irrelevant messages',
+  private_information: 'Private or sensitive information shared',
+  other: 'Other (please specify)',
+} as const
+
+export type MessageReportReason = keyof typeof MESSAGE_REPORT_REASONS
+
+export interface MessageReportPayload {
+  data: {
+    type: 'MessageReport'
+    attributes: {
+      reason: MessageReportReason
+      reason_detail?: string
+    }
+  }
+}

package/src/utils/deep_snake_case_keys.ts

@@ -0,0 +1,16 @@
+import { isArray, isObject, mapKeys, mapValues, snakeCase } from 'lodash'
+
+type ObjType = Record<string, unknown> | unknown[] | unknown
+
+export function deepSnakeCaseKeys<T extends ObjType>(obj: T): T {
+  if (isArray(obj)) {
+    return obj.map(deepSnakeCaseKeys) as T
+  } else if (isObject(obj)) {
+    return mapValues(
+      // @ts-ignore This mutates the object, but we don't care about the type here
+      mapKeys(obj, (_value: string, key: string) => snakeCase(key)),
+      deepSnakeCaseKeys
+    ) as T
+  }
+  return obj
+}

package/build/screens/conversation_select_recipients/conversation_select_recipients_screen.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ConversationSelectRecipientsScreenProps } from './types/screen_props';
-export declare const ConversationSelectRecipientsScreen: ({ route, }: ConversationSelectRecipientsScreenProps) => React.JSX.Element;
-//# sourceMappingURL=conversation_select_recipients_screen.d.ts.map

package/build/screens/conversation_select_recipients/conversation_select_recipients_screen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"conversation_select_recipients_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,EAAE,uCAAuC,EAAE,MAAM,sBAAsB,CAAA;AAa9E,eAAO,MAAM,kCAAkC,eAE5C,uCAAuC,sBAwJzC,CAAA"}