Update report modal to use new groupings (close [APP-567]) (#533)

src/view/com/modals/ReportAccount.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, {useState, useMemo} from 'react'
 import {
   ActivityIndicator,
   StyleSheet,
@@ -15,12 +15,7 @@ import * as Toast from '../util/Toast'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {cleanError} from 'lib/strings/errors'
 import {usePalette} from 'lib/hooks/usePalette'
-
-const ITEMS: RadioGroupItem[] = [
-  {key: 'spam', label: 'Spam or excessive repeat posts'},
-  {key: 'abuse', label: 'Abusive, rude, or hateful'},
-  {key: 'illegal', label: 'Posts illegal content'},
-]
+import {isDesktopWeb} from 'platform/detection'
 
 export const snapPoints = ['50%']
 
@@ -31,6 +26,39 @@ export function Component({did}: {did: string}) {
   const [error, setError] = useState<string>('')
   const [issue, setIssue] = useState<string>('')
   const onSelectIssue = (v: string) => setIssue(v)
+
+  const ITEMS: RadioGroupItem[] = useMemo(
+    () => [
+      {
+        key: ComAtprotoModerationDefs.REASONMISLEADING,
+        label: (
+          <View>
+            <Text style={pal.text} type="md-bold">
+              Misleading Account
+            </Text>
+            <Text style={pal.textLight}>
+              Impersonation or false claims about identity or affiliation
+            </Text>
+          </View>
+        ),
+      },
+      {
+        key: ComAtprotoModerationDefs.REASONSPAM,
+        label: (
+          <View>
+            <Text style={pal.text} type="md-bold">
+              Frequently Posts Unwanted Content
+            </Text>
+            <Text style={pal.textLight}>
+              Spam; excessive mentions or replies
+            </Text>
+          </View>
+        ),
+      },
+    ],
+    [pal],
+  )
+
   const onPress = async () => {
     setError('')
     if (!issue) {
@@ -38,15 +66,8 @@ export function Component({did}: {did: string}) {
     }
     setIsProcessing(true)
     try {
-      // NOTE: we should update the lexicon of reasontype to include more options -prf
-      let reasonType = ComAtprotoModerationDefs.REASONOTHER
-      if (issue === 'spam') {
-        reasonType = ComAtprotoModerationDefs.REASONSPAM
-      }
-      const reason = ITEMS.find(item => item.key === issue)?.label || ''
       await store.agent.com.atproto.moderation.createReport({
-        reasonType,
-        reason,
+        reasonType: issue,
         subject: {
           $type: 'com.atproto.admin.defs#repoRef',
           did,
@@ -61,11 +82,11 @@ export function Component({did}: {did: string}) {
     }
   }
   return (
-    <View
-      testID="reportAccountModal"
-      style={[s.flex1, s.pl10, s.pr10, pal.view]}>
-      <Text style={[pal.text, styles.title]}>Report account</Text>
-      <Text style={[pal.textLight, styles.description]}>
+    <View testID="reportAccountModal" style={[styles.container, pal.view]}>
+      <Text type="title-xl" style={[pal.text, styles.title]}>
+        Report account
+      </Text>
+      <Text type="xl" style={[pal.text, styles.description]}>
         What is the issue with this account?
       </Text>
       <RadioGroup
@@ -73,6 +94,9 @@ export function Component({did}: {did: string}) {
         items={ITEMS}
         onSelect={onSelectIssue}
       />
+      <Text type="sm" style={[pal.text, styles.description, s.pt10]}>
+        For other issues, please report specific posts.
+      </Text>
       {error ? (
         <View style={s.mt10}>
           <ErrorMessage message={error} />
@@ -101,15 +125,17 @@ export function Component({did}: {did: string}) {
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: isDesktopWeb ? 0 : 10,
+  },
   title: {
     textAlign: 'center',
     fontWeight: 'bold',
-    fontSize: 24,
     marginBottom: 12,
   },
   description: {
     textAlign: 'center',
-    fontSize: 17,
     paddingHorizontal: 22,
     marginBottom: 10,
   },

src/view/com/modals/ReportPost.tsx

@@ -1,6 +1,7 @@
-import React, {useState} from 'react'
+import React, {useState, useMemo} from 'react'
 import {
   ActivityIndicator,
+  Linking,
   StyleSheet,
   TouchableOpacity,
   View,
@@ -16,14 +17,9 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
 import {cleanError} from 'lib/strings/errors'
 import {usePalette} from 'lib/hooks/usePalette'
 
-const ITEMS: RadioGroupItem[] = [
-  {key: 'spam', label: 'Spam or excessive repeat posts'},
-  {key: 'abuse', label: 'Abusive, rude, or hateful'},
-  {key: 'copyright', label: 'Contains copyrighted material'},
-  {key: 'illegal', label: 'Contains illegal content'},
-]
+const DMCA_LINK = 'https://bsky.app/support/copyright'
 
-export const snapPoints = ['50%']
+export const snapPoints = [500]
 
 export function Component({
   postUri,
@@ -38,6 +34,74 @@ export function Component({
   const [error, setError] = useState<string>('')
   const [issue, setIssue] = useState<string>('')
   const onSelectIssue = (v: string) => setIssue(v)
+
+  const ITEMS: RadioGroupItem[] = useMemo(
+    () => [
+      {
+        key: ComAtprotoModerationDefs.REASONSPAM,
+        label: (
+          <View>
+            <Text style={pal.text} type="md-bold">
+              Spam
+            </Text>
+            <Text style={pal.textLight}>Excessive mentions or replies</Text>
+          </View>
+        ),
+      },
+      {
+        key: ComAtprotoModerationDefs.REASONSEXUAL,
+        label: (
+          <View>
+            <Text style={pal.text} type="md-bold">
+              Unwanted Sexual Content
+            </Text>
+            <Text style={pal.textLight}>
+              Nudity or pornography not labeled as such
+            </Text>
+          </View>
+        ),
+      },
+      {
+        key: '__copyright__',
+        label: (
+          <View>
+            <Text style={pal.text} type="md-bold">
+              Copyright Violation
+            </Text>
+            <Text style={pal.textLight}>Contains copyrighted material</Text>
+          </View>
+        ),
+      },
+      {
+        key: ComAtprotoModerationDefs.REASONVIOLATION,
+        label: (
+          <View>
+            <Text style={pal.text} type="md-bold">
+              Illegal and Urgent
+            </Text>
+            <Text style={pal.textLight}>
+              Glaring violations of law or terms of service
+            </Text>
+          </View>
+        ),
+      },
+      {
+        key: ComAtprotoModerationDefs.REASONOTHER,
+        label: (
+          <View>
+            <Text style={pal.text} type="md-bold">
+              Other
+            </Text>
+            <Text style={pal.textLight}>
+              An issue not included in these options
+            </Text>
+          </View>
+        ),
+      },
+    ],
+    [pal],
+  )
+
   const onPress = async () => {
     setError('')
     if (!issue) {
@@ -45,15 +109,11 @@ export function Component({
     }
     setIsProcessing(true)
     try {
-      // NOTE: we should update the lexicon of reasontype to include more options -prf
-      let reasonType = ComAtprotoModerationDefs.REASONOTHER
-      if (issue === 'spam') {
-        reasonType = ComAtprotoModerationDefs.REASONSPAM
-      }
-      const reason = ITEMS.find(item => item.key === issue)?.label || ''
+      if (issue === '__copyright__') {
+        Linking.openURL(DMCA_LINK)
+      } else {
         await store.agent.createModerationReport({
-        reasonType,
-        reason,
+          reasonType: issue,
           subject: {
             $type: 'com.atproto.repo.strongRef',
             uri: postUri,
@@ -61,6 +121,7 @@ export function Component({
           },
         })
         Toast.show("Thank you for your report! We'll look into it promptly.")
+      }
       store.shell.closeModal()
       return
     } catch (e: any) {

src/view/com/util/forms/RadioButton.tsx

@@ -15,7 +15,7 @@ export function RadioButton({
 }: {
   testID?: string
   type?: ButtonType
-  label: string
+  label: string | JSX.Element
   isSelected: boolean
   style?: StyleProp<ViewStyle>
   onPress: () => void
@@ -47,7 +47,7 @@ export function RadioButton({
       borderColor: theme.palette.default.border,
     },
     'default-light': {
-      borderColor: theme.palette.default.border,
+      borderColor: theme.palette.default.borderDark,
     },
   })
   const circleFillStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(
@@ -128,9 +128,13 @@ export function RadioButton({
             <View style={[circleFillStyle, styles.circleFill]} />
           ) : undefined}
         </View>
+        {typeof label === 'string' ? (
           <Text type="button" style={[labelStyle, styles.label]}>
             {label}
           </Text>
+        ) : (
+          <View style={styles.label}>{label}</View>
+        )}
       </View>
     </Button>
   )

src/view/com/util/forms/RadioGroup.tsx

@@ -5,7 +5,7 @@ import {ButtonType} from './Button'
 import {s} from 'lib/styles'
 
 export interface RadioGroupItem {
-  label: string
+  label: string | JSX.Element
   key: string
 }