New Onboarding (#2596)

* Add round and square buttons

* Allow some style for buttons, add icons

* Change text selection color

* Center button text, whoops

* Outer layout, some primitive updates

* WIP

* onboarding feed prefs (#2590)

* add `style` to toggle label to modify text style

* Revert "add `style` to toggle label to modify text style"

This reverts commit 8f4b517b8585ca64a4bf44f6cb40ac070ece8932.

* following feed prefs

* remove unnecessary memo

* reusable divider component

* org imports

* add finished screen

* Theme SelectedAccountCard

* Require at least 3 interests

* Placeholder save logic

* WIP algo feeds

* Improve lineHeight handling, add RichText, improve Link by adding InlineLink

* Inherit lineHeight in heading comps

* Algo feeds mostly good

* Topical feeds ish

* Layout cleanup

* Improve button styles

* moderation prefs for onboarding (#2594)

* WIP algo feeds

* modify controlalbelgroup typing for easy .map()

* adjust padding on button

* add moderation screen

* add moderation screen

* add moderation screen

---------

Co-authored-by: Eric Bailey <git@esb.lol>

* Fix toggle button styles

* A11y props on outer portal

* Put it all on red

* New data shape

* Handle mock data

* Bulk write (not yet)

* Remove interests validation

* Clean up interests

* i18n layout and first step

* Clean up suggested follows screen

* Clean up following step

* Clean up algo feeds step

* Clean up topical feeds

* Add skeleton for feed card

* WIP moderation step

* cleanup moderation styles (#2605)

* cleanup moderation styles

* fix(?) toggle button group styles

* adjust toggle to fit any screen

* Some more cleanup

* Icons

* ToggleButton tweaks

* Reset

* Hook up data

* Better suggestions

* Bulk write

* Some logging

* Use new api

* Concat topical feeds

* Metrics

* Disable links in RichText, feedcards

* Tweak primary feed cards

* Update metrics

* Fix layout shift

* Fix ToggleButton again, whoops

* Error state

* Bump api package, ensure interests are saved

* Better fix for autofill

* i18n, button positions

* Remove unused export

* Add default prefs object

* Fix overflow in user cards

* Add 2 lines of bios to suggested accounts cards

* Nits

* Don't resolve facets by default

* Update storybook

* Disable flag for now

* Remove age dialog from moderations step

* Improvements and tweaks to new onboarding

---------

Co-authored-by: Hailey <153161762+haileyok@users.noreply.github.com>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 135 insertions, 0 deletions

diff --git a/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx b/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx
new file mode 100644
index 000000000..bc4c0387f
--- /dev/null
+++ b/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx
@@ -0,0 +1,135 @@
+import React from 'react'
+import {View} from 'react-native'
+import {useLingui} from '@lingui/react'
+import {msg, Trans} from '@lingui/macro'
+
+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 {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'
+
+function Card({children}: React.PropsWithChildren<{}>) {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.flex_row,
+        a.align_center,
+        a.gap_sm,
+        a.px_lg,
+        a.py_md,
+        a.rounded_sm,
+        a.mb_md,
+        t.atoms.bg_contrast_50,
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function AdultContentEnabledPref() {
+  const {_} = useLingui()
+  const t = useTheme()
+
+  // Reuse logic here form ContentFilteringSettings.tsx
+  const {data: preferences} = usePreferencesQuery()
+  const {mutate, variables} = usePreferencesSetAdultContentMutation()
+
+  const onToggleAdultContent = React.useCallback(async () => {
+    if (isIOS) return
+
+    try {
+      mutate({
+        enabled: !(variables?.enabled ?? preferences?.adultContentEnabled),
+      })
+    } catch (e) {
+      Toast.show(
+        _(msg`There was an issue syncing your preferences with the server`),
+      )
+      logger.error('Failed to update preferences with server', {error: e})
+    }
+  }, [variables, preferences, mutate, _])
+
+  if (!preferences) return null
+
+  if (isIOS) {
+    if (preferences?.adultContentEnabled === true) {
+      return null
+    } 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>
+              Adult content can only be enabled via the Web at{' '}
+              <InlineLink style={[a.leading_snug]} to="https://bsky.app">
+                bsky.app
+              </InlineLink>
+              .
+            </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
+  }
+}