@planningcenter/chat-react-native 3.24.0-rc.2 → 3.24.0-rc.4

package/build/screens/message_report/components/message_preview.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Avatar, Text, Icon } from '../../../components';
+import { useTheme } from '../../../hooks';
+export function MessagePreview({ message, style }) {
+    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,
+        },
+    });
+};
+//# sourceMappingURL=message_preview.js.map

package/build/screens/message_report/components/message_preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_preview.js","sourceRoot":"","sources":["../../../../src/screens/message_report/components/message_preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { View, StyleSheet, ViewStyle } from 'react-native'\nimport { Avatar, Text, Icon } from '../../../components'\nimport { useTheme } from '../../../hooks'\nimport { MessageResource } from '../../../types'\n\ninterface MessagePreviewProps {\n  message: MessageResource\n  style?: ViewStyle\n}\n\nexport function MessagePreview({ message, style }: MessagePreviewProps) {\n  const styles = useStyles()\n\n  const hasImages = message.attachments.some(\n    att => att.type === 'MessageAttachment' && att.attributes?.contentType?.startsWith('image/')\n  )\n\n  return (\n    <View style={[styles.previewContainer, style]}>\n      <View style={styles.previewHeader}>\n        <Avatar sourceUri={message.author.avatar} size=\"md\" />\n        <Text style={styles.authorName}>{message.author.name}</Text>\n      </View>\n\n      <View style={styles.messageBubbleContainer}>\n        {message.text && (\n          <View style={styles.messageBubble}>\n            <Text style={styles.messageText} numberOfLines={5}>\n              {message.text}\n            </Text>\n          </View>\n        )}\n\n        {hasImages && (\n          <View style={styles.imagePlaceholder}>\n            <Icon name=\"general.image\" style={styles.placeholderIcon} />\n            <Text variant=\"secondary\" style={styles.placeholderText}>\n              Image hidden\n            </Text>\n          </View>\n        )}\n      </View>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    previewContainer: {\n      gap: 12,\n    },\n    previewHeader: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n    },\n    authorName: {\n      fontSize: 14,\n      fontWeight: '600',\n      color: colors.textColorDefaultPrimary,\n    },\n    messageBubbleContainer: {\n      gap: 8,\n    },\n    messageBubble: {\n      backgroundColor: colors.fillColorNeutral060,\n      borderRadius: 16,\n      paddingHorizontal: 16,\n      paddingVertical: 12,\n      alignSelf: 'flex-start',\n      maxWidth: '80%',\n    },\n    messageText: {\n      fontSize: 14,\n      color: colors.textColorDefaultPrimary,\n      lineHeight: 20,\n    },\n    imagePlaceholder: {\n      height: 120,\n      backgroundColor: colors.fillColorNeutral060,\n      borderRadius: 16,\n      justifyContent: 'center',\n      alignItems: 'center',\n      gap: 8,\n      maxWidth: '80%',\n      alignSelf: 'flex-start',\n    },\n    placeholderIcon: {\n      fontSize: 32,\n      color: colors.iconColorDefaultSecondary,\n    },\n    placeholderText: {\n      fontSize: 14,\n    },\n  })\n}\n"]}

package/build/screens/message_report/components/report_reason_list.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MessageReportReason } from '../../../types/resources/message_report';
+interface ReportReasonListProps {
+    selectedReason: MessageReportReason | null;
+    onReasonChange: (reason: MessageReportReason) => void;
+}
+export declare function ReportReasonList({ selectedReason, onReasonChange }: ReportReasonListProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=report_reason_list.d.ts.map

package/build/screens/message_report/components/report_reason_list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"report_reason_list.d.ts","sourceRoot":"","sources":["../../../../src/screens/message_report/components/report_reason_list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAEL,mBAAmB,EACpB,MAAM,yCAAyC,CAAA;AAOhD,UAAU,qBAAqB;IAC7B,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAA;IAC1C,cAAc,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;CACtD;AAED,wBAAgB,gBAAgB,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,qBAAqB,qBAiBzF"}

package/build/screens/message_report/components/report_reason_list.js

@@ -0,0 +1,67 @@
+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, } from '../../../types/resources/message_report';
+const MESSAGE_REPORT_REASONS_LIST = Object.entries(MESSAGE_REPORT_REASONS).map(([key, label]) => ({
+    key: key,
+    label,
+}));
+export function ReportReasonList({ selectedReason, onReasonChange }) {
+    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>);
+}
+function ReportReasonButton({ label, isSelected, onPress }) {
+    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 }) => {
+    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,
+        },
+    });
+};
+//# sourceMappingURL=report_reason_list.js.map

package/build/screens/message_report/components/report_reason_list.js.map

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

package/build/screens/message_report_screen.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { NativeStackNavigationOptions, NativeStackScreenProps } from '@react-navigation/native-stack';
+import { StaticScreenProps } from '@react-navigation/native';
+export declare const MessageReportScreenOptions: ({ navigation, }: NativeStackScreenProps<any>) => NativeStackNavigationOptions;
+export type MessageReportScreenProps = StaticScreenProps<{
+    conversation_id: number;
+    message_id: string;
+}>;
+export declare function MessageReportScreen({ route }: MessageReportScreenProps): React.JSX.Element | null;
+//# sourceMappingURL=message_report_screen.d.ts.map

package/build/screens/message_report_screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_report_screen.d.ts","sourceRoot":"","sources":["../../src/screens/message_report_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAA;AAE9E,OAAO,KAAK,EACV,4BAA4B,EAC5B,sBAAsB,EACvB,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAA+B,MAAM,0BAA0B,CAAA;AAmBzF,eAAO,MAAM,0BAA0B,oBAEpC,sBAAsB,CAAC,GAAG,CAAC,KAAG,4BAI/B,CAAA;AAEF,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IACvD,eAAe,EAAE,MAAM,CAAA;IACvB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,EAAE,wBAAwB,4BAStE"}

package/build/screens/message_report_screen.js

@@ -0,0 +1,214 @@
+import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import { View, StyleSheet, TextInput, ScrollView } from 'react-native';
+import { 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 { 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, }) => ({
+    presentation: 'modal',
+    title: 'Report message',
+    headerLeft: () => <HeaderDismissButton title="Cancel" onPress={() => navigation.goBack()}/>,
+});
+export function MessageReportScreen({ route }) {
+    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, }) {
+    const styles = useStyles();
+    const navigation = useNavigation();
+    const [selectedReason, setSelectedReason] = useState(null);
+    const [reasonDetail, setReasonDetail] = useState('');
+    const { mutate: submitReport, status } = useReportMessage(conversation_id, message.id);
+    const handleReasonChange = useCallback((reason) => {
+        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,
+        },
+    });
+};
+//# sourceMappingURL=message_report_screen.js.map

package/build/screens/message_report_screen.js.map

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

package/build/types/resources/message_report.d.ts

@@ -0,0 +1,19 @@
+export declare const MESSAGE_REPORT_REASONS: {
+    readonly scam_or_fraud: "Scam or fraud";
+    readonly inappropriate_content: "Inappropriate or offensive content";
+    readonly harassment_or_bullying: "Harassment or bullying";
+    readonly spam: "Spam or irrelevant messages";
+    readonly private_information: "Private or sensitive information shared";
+    readonly other: "Other (please specify)";
+};
+export type MessageReportReason = keyof typeof MESSAGE_REPORT_REASONS;
+export interface MessageReportPayload {
+    data: {
+        type: 'MessageReport';
+        attributes: {
+            reason: MessageReportReason;
+            reason_detail?: string;
+        };
+    };
+}
+//# sourceMappingURL=message_report.d.ts.map

package/build/types/resources/message_report.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_report.d.ts","sourceRoot":"","sources":["../../../src/types/resources/message_report.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB;;;;;;;CAOzB,CAAA;AAEV,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,sBAAsB,CAAA;AAErE,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE;QACJ,IAAI,EAAE,eAAe,CAAA;QACrB,UAAU,EAAE;YACV,MAAM,EAAE,mBAAmB,CAAA;YAC3B,aAAa,CAAC,EAAE,MAAM,CAAA;SACvB,CAAA;KACF,CAAA;CACF"}

package/build/types/resources/message_report.js

@@ -0,0 +1,9 @@
+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)',
+};
+//# sourceMappingURL=message_report.js.map

package/build/types/resources/message_report.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_report.js","sourceRoot":"","sources":["../../../src/types/resources/message_report.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,aAAa,EAAE,eAAe;IAC9B,qBAAqB,EAAE,oCAAoC;IAC3D,sBAAsB,EAAE,wBAAwB;IAChD,IAAI,EAAE,6BAA6B;IACnC,mBAAmB,EAAE,yCAAyC;IAC9D,KAAK,EAAE,wBAAwB;CACvB,CAAA","sourcesContent":["export const MESSAGE_REPORT_REASONS = {\n  scam_or_fraud: 'Scam or fraud',\n  inappropriate_content: 'Inappropriate or offensive content',\n  harassment_or_bullying: 'Harassment or bullying',\n  spam: 'Spam or irrelevant messages',\n  private_information: 'Private or sensitive information shared',\n  other: 'Other (please specify)',\n} as const\n\nexport type MessageReportReason = keyof typeof MESSAGE_REPORT_REASONS\n\nexport interface MessageReportPayload {\n  data: {\n    type: 'MessageReport'\n    attributes: {\n      reason: MessageReportReason\n      reason_detail?: string\n    }\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.24.0-rc.2",
+  "version": "3.24.0-rc.4",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -58,5 +58,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "a530777e313152dfc64e169d85ea421ee16fd557"
+  "gitHead": "005e3e542270b9e411f943d44ab2b2554cdbf2c6"
 }

package/src/components/primitive/form_sheet.tsx

@@ -235,7 +235,7 @@ type FormSheetActionAppearanceUnion =
 
 interface FormSheetActionProps {
   title: string
-  iconName: IconString
+  iconName?: IconString
   onPress: () => void
   accessibilityLabel?: string
   accessibilityHint?: string
@@ -265,7 +265,9 @@ function FormSheetAction({
       style={styles.actionPressable}
       disabled={disabled}
     >
-      <Icon name={iconName} size={16} accessibilityElementsHidden style={styles.actionIcon} />
+      {iconName && (
+        <Icon name={iconName} size={16} accessibilityElementsHidden style={styles.actionIcon} />
+      )}
       <Text style={styles.actionTitle}>{title}</Text>
     </PlatformPressable>
   )

package/src/hooks/index.ts

@@ -21,3 +21,4 @@ export * from './use_submit_age_check'
 export * from './use_organization'
 export * from './use_product_analytics'
 export * from './use_people_person'
+export * from './use_new_conversation_entry'

package/src/hooks/use_features.ts

@@ -35,6 +35,7 @@ export function useFeatures() {
 
 export const availableFeatures = {
   threaded_replies: 'ROLLOUT_MOBILE_threaded_replies_v1',
+  message_reporting: 'ROLLOUT_MOBILE_message_reporting',
 }
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/hooks/use_new_conversation_entry.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useAppGrants } from './use_chat_permissions'
+
+export type NewConversationEntryMode = 'select_type' | 'groups' | 'teams' | 'none'
+
+export function useNewConversationEntry(): NewConversationEntryMode {
+  const appGrants = useAppGrants()
+
+  return useMemo(() => {
+    const canCreateGroupsConversations = appGrants.data?.some(
+      g => g.createConversations && g.appName === 'Groups'
+    )
+    const canCreateServicesConversations = appGrants.data?.some(
+      g => g.createConversations && g.appName === 'Services'
+    )
+
+    if (canCreateGroupsConversations && canCreateServicesConversations) {
+      return 'select_type'
+    }
+
+    if (canCreateGroupsConversations) {
+      return 'groups'
+    }
+
+    if (canCreateServicesConversations) {
+      return 'teams'
+    }
+
+    return 'none'
+  }, [appGrants.data])
+}

package/src/hooks/use_report_message.ts

@@ -0,0 +1,37 @@
+import { useMutation } from '@tanstack/react-query'
+import { useApiClient } from './use_api_client'
+import { Haptic } from '../utils/native_adapters'
+import { MessageReportReason, MessageReportPayload } from '../types/resources/message_report'
+
+export const useReportMessage = (conversationId: number, messageId: string) => {
+  const apiClient = useApiClient()
+
+  return useMutation({
+    mutationFn: async ({
+      reason,
+      reasonDetail,
+    }: {
+      reason: MessageReportReason
+      reasonDetail?: string
+    }) => {
+      const url = `/me/conversations/${conversationId}/messages/${messageId}/report`
+      const data: MessageReportPayload = {
+        data: {
+          type: 'MessageReport',
+          attributes: {
+            reason,
+            ...(reasonDetail && { reason_detail: reasonDetail }),
+          },
+        },
+      }
+
+      return apiClient.chat.post({ url, data })
+    },
+    onSuccess: () => {
+      Haptic.notificationSuccess()
+    },
+    onError: () => {
+      Haptic.notificationError()
+    },
+  })
+}