Onboarding moderation improvements (#2713)

* create separate label group arrays

* render adult and other label groups separately

* animate in/out the additional settings

* improve toggle logic

* support animations on all platforms

* remove debug

* update notice, prevent running animations on mount

* reorg imports

src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx

@@ -2,19 +2,17 @@ import React from 'react'
 import {View} from 'react-native'
 import {useLingui} from '@lingui/react'
 import {msg, Trans} from '@lingui/macro'
+import {UseMutateFunction} from '@tanstack/react-query'
 
-import {isIOS} from '#/platform/detection'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {
-  usePreferencesQuery,
-  usePreferencesSetAdultContentMutation,
-} from '#/state/queries/preferences'
+import {usePreferencesQuery} from '#/state/queries/preferences'
 import {logger} from '#/logger'
 import {Text} from '#/components/Typography'
-import {InlineLink} from '#/components/Link'
 import * as Toggle from '#/components/forms/Toggle'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import * as Prompt from '#/components/Prompt'
+import {isIOS} from '#/platform/detection'
 
 function Card({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
@@ -36,16 +34,25 @@ function Card({children}: React.PropsWithChildren<{}>) {
   )
 }
 
-export function AdultContentEnabledPref() {
+export function AdultContentEnabledPref({
+  mutate,
+  variables,
+}: {
+  mutate: UseMutateFunction<void, unknown, {enabled: boolean}, unknown>
+  variables: {enabled: boolean} | undefined
+}) {
   const {_} = useLingui()
   const t = useTheme()
+  const prompt = Prompt.usePromptControl()
 
   // Reuse logic here form ContentFilteringSettings.tsx
   const {data: preferences} = usePreferencesQuery()
-  const {mutate, variables} = usePreferencesSetAdultContentMutation()
 
   const onToggleAdultContent = React.useCallback(async () => {
-    if (isIOS) return
+    if (isIOS) {
+      prompt.open()
+      return
+    }
 
     try {
       mutate({
@@ -57,15 +64,33 @@ export function AdultContentEnabledPref() {
       )
       logger.error('Failed to update preferences with server', {error: e})
     }
-  }, [variables, preferences, mutate, _])
+  }, [variables, preferences, mutate, _, prompt])
 
   if (!preferences) return null
 
-  if (isIOS) {
-    if (preferences?.adultContentEnabled === true) {
-      return null
-    } else {
-      return (
+  return (
+    <>
+      {preferences.userAge && preferences.userAge >= 18 ? (
+        <View style={[a.w_full, a.px_xs]}>
+          <Toggle.Item
+            name={_(msg`Enable adult content in your feeds`)}
+            label={_(msg`Enable adult content in your feeds`)}
+            value={variables?.enabled ?? preferences?.adultContentEnabled}
+            onChange={onToggleAdultContent}>
+            <View
+              style={[
+                a.flex_row,
+                a.w_full,
+                a.justify_between,
+                a.align_center,
+                a.py_md,
+              ]}>
+              <Text style={[a.font_bold]}>Enable Adult Content</Text>
+              <Toggle.Switch />
+            </View>
+          </Toggle.Item>
+        </View>
+      ) : (
         <Card>
           <CircleInfo size="sm" fill={t.palette.contrast_500} />
           <Text
@@ -75,61 +100,23 @@ export function AdultContentEnabledPref() {
               a.leading_snug,
               {paddingTop: 1},
             ]}>
-            <Trans>
-              Adult content can only be enabled via the Web at{' '}
-              <InlineLink style={[a.leading_snug]} to="https://bsky.app">
-                bsky.app
-              </InlineLink>
-              .
-            </Trans>
+            <Trans>You must be 18 years or older to enable adult content</Trans>
           </Text>
         </Card>
-      )
-    }
-  } else {
-    if (preferences?.userAge) {
-      if (preferences.userAge >= 18) {
-        return (
-          <View style={[a.w_full]}>
-            <Toggle.Item
-              name={_(msg`Enable adult content in your feeds`)}
-              label={_(msg`Enable adult content in your feeds`)}
-              value={variables?.enabled ?? preferences?.adultContentEnabled}
-              onChange={onToggleAdultContent}>
-              <View
-                style={[
-                  a.flex_row,
-                  a.w_full,
-                  a.justify_between,
-                  a.align_center,
-                  a.py_md,
-                ]}>
-                <Text style={[a.font_bold]}>Enable Adult Content</Text>
-                <Toggle.Switch />
-              </View>
-            </Toggle.Item>
-          </View>
-        )
-      } else {
-        return (
-          <Card>
-            <CircleInfo size="sm" fill={t.palette.contrast_500} />
-            <Text
-              style={[
-                a.flex_1,
-                t.atoms.text_contrast_700,
-                a.leading_snug,
-                {paddingTop: 1},
-              ]}>
-              <Trans>
-                You must be 18 years or older to enable adult content
-              </Trans>
-            </Text>
-          </Card>
-        )
-      }
-    }
+      )}
 
-    return null
-  }
+      <Prompt.Outer control={prompt}>
+        <Prompt.Title>Adult Content</Prompt.Title>
+        <Prompt.Description>
+          <Trans>
+            Due to Apple policies, adult content can only be enabled on the web
+            after completing sign up.
+          </Trans>
+        </Prompt.Description>
+        <Prompt.Actions>
+          <Prompt.Action onPress={prompt.close}>OK</Prompt.Action>
+        </Prompt.Actions>
+      </Prompt.Outer>
+    </>
+  )
 }