Big refactor

.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
           'P',
           'Admonition',
           'Admonition.Admonition',
+          'AgeAssuranceAdmonition',
           'Span',
         ],
         impliedTextProps: [],

src/components/ageAssurance/AgeAssuranceAccountCard.tsx

@@ -23,7 +23,7 @@ export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
   const {isLoaded, assurance, declaredAge} = useAgeInfo()
 
   if (!isLoaded) return null
-  if (declaredAge < 18) return null
+  if (declaredAge && declaredAge < 18) return null
   if (!assurance.isAgeRestricted) return null
 
   return <Inner style={style} />

src/components/ageAssurance/AgeAssuranceAdmonition.tsx

@@ -0,0 +1,100 @@
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {atoms as a, select, useTheme, type ViewStyleProp} from '#/alf'
+import {useDialogControl} from '#/components/ageAssurance/AgeAssuranceInitDialog'
+import {useAgeInfo} from '#/components/ageAssurance/useAgeInfo'
+import type * as Dialog from '#/components/Dialog'
+import {ShieldCheck_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
+import {InlineLinkText} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+export function AgeAssuranceAdmonition({
+  children,
+  style,
+}: ViewStyleProp & {children: React.ReactNode}) {
+  const control = useDialogControl()
+  const {isLoaded, isUnderage, assurance} = useAgeInfo()
+
+  if (!isLoaded) return null
+  if (isUnderage) return null
+  if (!assurance.isAgeRestricted) return null
+
+  return (
+    <Inner style={style} control={control}>
+      {children}
+    </Inner>
+  )
+}
+
+function Inner({
+  children,
+  style,
+}: ViewStyleProp & {
+  children: React.ReactNode
+  control: Dialog.DialogControlProps
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  return (
+    <>
+      <View style={style}>
+        <View
+          style={[
+            a.p_md,
+            a.rounded_md,
+            a.border,
+            a.flex_row,
+            a.align_start,
+            a.gap_sm,
+            {
+              backgroundColor: select(t.name, {
+                light: t.palette.primary_25,
+                dark: t.palette.primary_25,
+                dim: t.palette.primary_25,
+              }),
+              borderColor: select(t.name, {
+                light: t.palette.primary_100,
+                dark: t.palette.primary_100,
+                dim: t.palette.primary_100,
+              }),
+            },
+          ]}>
+          <View
+            style={[
+              a.align_center,
+              a.justify_center,
+              a.rounded_full,
+              {
+                width: 32,
+                height: 32,
+                backgroundColor: select(t.name, {
+                  light: t.palette.primary_100,
+                  dark: t.palette.primary_100,
+                  dim: t.palette.primary_100,
+                }),
+              },
+            ]}>
+            <Shield size="md" />
+          </View>
+          <View style={[a.flex_1, a.gap_xs]}>
+            <Text style={[a.text_sm, a.leading_snug]}>{children} </Text>
+            <Text style={[a.text_sm, a.leading_snug, a.font_bold]}>
+              <Trans>
+                Learn more in your{' '}
+                <InlineLinkText
+                  label={_(msg`Go to account settings`)}
+                  to={'/settings/account'}
+                  style={[a.text_sm, a.leading_snug, a.font_bold]}>
+                  account settings.
+                </InlineLinkText>
+              </Trans>
+            </Text>
+          </View>
+        </View>
+      </View>
+    </>
+  )
+}

src/components/ageAssurance/AgeAssuranceDismissableNotice.tsx

@@ -0,0 +1,58 @@
+import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs'
+import {atoms as a, type ViewStyleProp} from '#/alf'
+import {AgeAssuranceAdmonition} from '#/components/ageAssurance/AgeAssuranceAdmonition'
+import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
+import {useAgeInfo} from '#/components/ageAssurance/useAgeInfo'
+import {Button, ButtonIcon} from '#/components/Button'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
+
+export function AgeAssuranceDismissableNotice({style}: ViewStyleProp & {}) {
+  const {_} = useLingui()
+  const {isLoaded, isUnderage, assurance} = useAgeInfo()
+  const {nux} = useNux(Nux.AgeAssurancePrompt)
+  const copy = useAgeAssuranceCopy()
+  const {mutate: save, variables} = useSaveNux()
+  const hidden = !!variables
+
+  if (!isLoaded) return null
+  if (isUnderage) return null
+  if (!assurance.isAgeRestricted) return null
+  if (assurance.lastInitiatedAt) return null
+  if (hidden) return null
+  if (nux && nux.completed) return null
+
+  return (
+    <View style={style}>
+      <View style={[a.relative]}>
+        <AgeAssuranceAdmonition>{copy.notice}</AgeAssuranceAdmonition>
+
+        <Button
+          label={_(msg`Don't show again`)}
+          size="tiny"
+          variant="solid"
+          color="secondary_inverted"
+          shape="round"
+          onPress={() =>
+            save({
+              id: Nux.AgeAssurancePrompt,
+              completed: true,
+              data: undefined,
+            })
+          }
+          style={[
+            a.absolute,
+            {
+              top: 12,
+              right: 12,
+            },
+          ]}>
+          <ButtonIcon icon={X} />
+        </Button>
+      </View>
+    </View>
+  )
+}

src/components/ageAssurance/AgeAssurancePrompt.tsx

@@ -1,147 +0,0 @@
-import {View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useAgeAssuranceContext} from '#/state/age-assurance'
-import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs'
-import {atoms as a, select, useTheme, type ViewStyleProp} from '#/alf'
-import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
-import {
-  AgeAssuranceInitDialog,
-  useDialogControl,
-} from '#/components/ageAssurance/AgeAssuranceInitDialog'
-import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
-import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import type * as Dialog from '#/components/Dialog'
-import {Divider} from '#/components/Divider'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import {Text} from '#/components/Typography'
-
-export function AgeAssurancePrompt({style}: ViewStyleProp & {}) {
-  const control = useDialogControl()
-  const {hasInitiated} = useAgeAssuranceContext()
-  const {nux} = useNux(Nux.AgeAssurancePrompt)
-
-  if (nux && nux.completed) return null
-
-  return (
-    <>
-      <IsAgeRestricted.True>
-        {!hasInitiated && <Inner style={style} control={control} />}
-        <AgeAssuranceInitDialog control={control} />
-      </IsAgeRestricted.True>
-    </>
-  )
-}
-
-function Inner({
-  style,
-  control,
-}: ViewStyleProp & {control: Dialog.DialogControlProps}) {
-  const t = useTheme()
-  const {_} = useLingui()
-  const copy = useAgeAssuranceCopy()
-  const {mutate: save} = useSaveNux()
-
-  return (
-    <>
-      <View style={style}>
-        <View
-          style={[
-            a.p_lg,
-            a.rounded_md,
-            a.border,
-            {
-              backgroundColor: select(t.name, {
-                light: t.palette.primary_25,
-                dark: t.palette.primary_25,
-                dim: t.palette.primary_25,
-              }),
-              borderColor: select(t.name, {
-                light: t.palette.primary_100,
-                dark: t.palette.primary_100,
-                dim: t.palette.primary_100,
-              }),
-            },
-          ]}>
-          <View style={[a.align_start, a.pb_md]}>
-            <AgeAssuranceBadge />
-          </View>
-          <Text style={[a.text_md, a.leading_snug]}>{copy.notice}</Text>
-
-          <Divider
-            style={[
-              a.mt_lg,
-              {
-                borderColor: select(t.name, {
-                  light: t.palette.primary_100,
-                  dark: t.palette.primary_100,
-                  dim: t.palette.primary_100,
-                }),
-              },
-            ]}
-          />
-
-          <View
-            style={[
-              a.flex_row,
-              a.justify_between,
-              a.align_center,
-              a.pt_md,
-              a.gap_lg,
-            ]}>
-            <Text
-              style={[
-                a.leading_snug,
-                a.flex_1,
-                {
-                  color: select(t.name, {
-                    light: t.palette.primary_800,
-                    dark: t.palette.primary_800,
-                    dim: t.palette.primary_800,
-                  }),
-                },
-              ]}>
-              {copy.noticeSub}
-            </Text>
-
-            <Button
-              label={_(msg`Verify now`)}
-              size="small"
-              variant="solid"
-              color="primary"
-              onPress={() => control.open()}>
-              <ButtonText>
-                <Trans>Verify now</Trans>
-              </ButtonText>
-            </Button>
-          </View>
-
-          <Button
-            label={_(msg`Don't show again`)}
-            size="tiny"
-            variant="solid"
-            color="secondary_inverted"
-            shape="round"
-            onPress={() =>
-              save({
-                id: Nux.AgeAssurancePrompt,
-                completed: true,
-                data: undefined,
-              })
-            }
-            style={[
-              a.absolute,
-              {
-                top: 12,
-                right: 12,
-              },
-            ]}>
-            <ButtonIcon icon={X} />
-          </Button>
-        </View>
-      </View>
-    </>
-  )
-}

src/components/ageAssurance/AgeRestrictedScreen.tsx

@@ -1,147 +1,94 @@
-import {useMemo} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {atoms as a, select, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
-import {
-  AgeAssuranceInitDialog,
-  useDialogControl,
-} from '#/components/ageAssurance/AgeAssuranceInitDialog'
-import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
 import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
-import {Button, ButtonText} from '#/components/Button'
-import {Divider} from '#/components/Divider'
+import {useAgeInfo} from '#/components/ageAssurance/useAgeInfo'
+import {ButtonIcon, ButtonText} from '#/components/Button'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
 import * as Layout from '#/components/Layout'
+import {Link} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
 export function AgeRestrictedScreen({
   children,
-  fallback,
   screenTitle,
   infoText,
 }: {
   children: React.ReactNode
-  fallback?: React.ReactNode
   screenTitle?: string
   infoText?: string
 }) {
-  const t = useTheme()
   const {_} = useLingui()
   const copy = useAgeAssuranceCopy()
-  const control = useDialogControl()
-  const screenFallback = useMemo(() => {
+  const {isLoaded, assurance} = useAgeInfo()
+
+  if (assurance.isExempt) return children
+  if (!isLoaded) {
     return (
-      fallback || (
-        <Layout.Screen>
-          <Layout.Header.Outer>
-            <Layout.Header.Content>
-              <Layout.Header.TitleText> </Layout.Header.TitleText>
-            </Layout.Header.Content>
-            <Layout.Header.Slot />
-          </Layout.Header.Outer>
-          <Layout.Content />
-        </Layout.Screen>
-      )
+      <Layout.Screen>
+        <Layout.Header.Outer>
+          <Layout.Header.Content>
+            <Layout.Header.TitleText> </Layout.Header.TitleText>
+          </Layout.Header.Content>
+          <Layout.Header.Slot />
+        </Layout.Header.Outer>
+        <Layout.Content />
+      </Layout.Screen>
     )
-  }, [fallback])
+  }
+  if (!assurance.isAgeRestricted) return children
 
   return (
-    <>
-      <IsAgeRestricted.True fallback={screenFallback}>
-        <Layout.Screen>
-          <Layout.Header.Outer>
-            <Layout.Header.BackButton />
-            <Layout.Header.Content>
-              <Layout.Header.TitleText>
-                {screenTitle ?? <Trans>Unavailable</Trans>}
-              </Layout.Header.TitleText>
-            </Layout.Header.Content>
-            <Layout.Header.Slot />
-          </Layout.Header.Outer>
-          <Layout.Content>
-            <View style={[a.p_lg, a.gap_lg]}>
-              <View
-                style={[
-                  a.p_lg,
-                  a.rounded_md,
-                  a.border,
-                  {
-                    backgroundColor: select(t.name, {
-                      light: t.palette.primary_25,
-                      dark: t.palette.primary_25,
-                      dim: t.palette.primary_25,
-                    }),
-                    borderColor: select(t.name, {
-                      light: t.palette.primary_100,
-                      dark: t.palette.primary_100,
-                      dim: t.palette.primary_100,
-                    }),
-                  },
-                ]}>
-                <AgeAssuranceInitDialog control={control} />
+    <Layout.Screen>
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          <Layout.Header.TitleText>
+            {screenTitle ?? <Trans>Unavailable</Trans>}
+          </Layout.Header.TitleText>
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <Layout.Content>
+        <View style={[a.p_lg]}>
+          <View style={[a.align_start, a.pb_lg]}>
+            <AgeAssuranceBadge />
+          </View>
 
-                <View style={[a.align_start, a.pb_md]}>
-                  <AgeAssuranceBadge />
-                </View>
+          <View style={[a.gap_sm, a.pb_lg]}>
+            <Text style={[a.text_xl, a.leading_snug, a.font_heavy]}>
+              <Trans>
+                You must verify your age in order to access this screen.
+              </Trans>
+            </Text>
 
-                <Text style={[a.text_md, a.leading_snug, a.pb_sm]}>
-                  <Trans>{copy.notice}</Trans>
-                </Text>
+            <Text style={[a.text_md, a.leading_snug]}>
+              <Trans>{copy.notice}</Trans>
+            </Text>
+          </View>
 
-                <Text style={[a.text_md, a.leading_snug]}>
-                  <Trans>
-                    You must complete age verification to access this screen.
-                  </Trans>
-                </Text>
+          <View
+            style={[a.flex_row, a.justify_between, a.align_center, a.pb_xl]}>
+            <Link
+              label={_(msg`Go to account settings`)}
+              to="/settings/account"
+              size="small"
+              variant="solid"
+              color="primary">
+              <ButtonText>
+                <Trans>Go to account settings</Trans>
+              </ButtonText>
+              <ButtonIcon icon={ChevronRight} position="right" />
+            </Link>
+          </View>
 
-                <Divider style={[a.mt_lg]} />
-
-                <View
-                  style={[
-                    a.flex_row,
-                    a.justify_between,
-                    a.align_center,
-                    a.pt_md,
-                    a.gap_lg,
-                  ]}>
-                  <Text
-                    style={[
-                      {
-                        color: select(t.name, {
-                          light: t.palette.primary_800,
-                          dark: t.palette.primary_800,
-                          dim: t.palette.primary_800,
-                        }),
-                      },
-                    ]}>
-                    {copy.noticeSub}
-                  </Text>
-
-                  <Button
-                    label={_(msg`Verify now`)}
-                    size="small"
-                    variant="solid"
-                    color="primary"
-                    onPress={() => control.open()}>
-                    <ButtonText>
-                      <Trans>Verify now</Trans>
-                    </ButtonText>
-                  </Button>
-                </View>
-              </View>
-
-              {infoText && <Admonition type="info">{infoText}</Admonition>}
-            </View>
-          </Layout.Content>
-        </Layout.Screen>
-      </IsAgeRestricted.True>
-
-      <IsAgeRestricted.False fallback={screenFallback}>
-        {children}
-      </IsAgeRestricted.False>
-    </>
+          {infoText && <Admonition type="tip">{infoText}</Admonition>}
+        </View>
+      </Layout.Content>
+    </Layout.Screen>
   )
 }

src/components/ageAssurance/IsAgeRestricted.tsx

@@ -1,53 +0,0 @@
-import {useAgeAssuranceContext} from '#/state/age-assurance'
-
-export function True({
-  children,
-  fallback,
-}: {
-  children: React.ReactNode
-  fallback?: React.ReactNode
-}) {
-  const {isLoaded, isAgeRestricted, isExempt} = useAgeAssuranceContext()
-  /**
-   * For the true case, if the user is exempt, return nothing
-   */
-  if (isExempt) return null
-
-  const isDefinitelyAgeRestricted = isLoaded && isAgeRestricted
-  const notSureYet = isAgeRestricted
-
-  return isDefinitelyAgeRestricted
-    ? children
-    : notSureYet
-      ? fallback || null
-      : null
-}
-
-export function False({
-  children,
-  fallback,
-}: {
-  children: React.ReactNode
-  fallback?: React.ReactNode
-}) {
-  const {isLoaded, isAgeRestricted, isExempt} = useAgeAssuranceContext()
-
-  /**
-   * For the false case, if the user is exempt, return children
-   */
-  if (isExempt) return children
-
-  const isDefinitelyNotAgeRestricted = isLoaded && !isAgeRestricted
-  const notSureYet = !isAgeRestricted
-
-  return isDefinitelyNotAgeRestricted
-    ? children
-    : notSureYet
-      ? fallback || null
-      : null
-}
-
-export const IsAgeRestricted = {
-  True,
-  False,
-}

src/components/ageAssurance/useAgeInfo.ts

@@ -7,12 +7,13 @@ export function useAgeInfo() {
   const ctx = useAgeAssuranceContext()
   const {isFetched: preferencesLoaded, data: preferences} =
     usePreferencesQuery()
-  const declaredAge = useMemo(() => preferences?.userAge || -1, [preferences])
+  const declaredAge = useMemo(() => preferences?.userAge, [preferences])
 
   return useMemo(() => {
     return {
       isLoaded: ctx.isLoaded && preferencesLoaded,
       declaredAge,
+      isUnderage: ctx.isAgeRestricted && (declaredAge || 0) < 18,
       assurance: ctx,
     }
   }, [ctx, preferencesLoaded, declaredAge])

src/screens/Moderation/index.tsx

@@ -23,7 +23,8 @@ import {isNonConfigurableModerationAuthority} from '#/state/session/additional-m
 import {useSetMinimalShellMode} from '#/state/shell'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
-import {AgeAssurancePrompt} from '#/components/ageAssurance/AgeAssurancePrompt'
+import {AgeAssuranceAdmonition} from '#/components/ageAssurance/AgeAssuranceAdmonition'
+import {useAgeInfo} from '#/components/ageAssurance/useAgeInfo'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
@@ -86,8 +87,9 @@ export function ModerationScreen(
     error: preferencesError,
     data: preferences,
   } = usePreferencesQuery()
+  const {isLoaded: isAgeInfoLoaded} = useAgeInfo()
 
-  const isLoading = isPreferencesLoading
+  const isLoading = isPreferencesLoading || !isAgeInfoLoaded
   const error = preferencesError
 
   return (
@@ -160,6 +162,7 @@ export function ModerationScreenInner({
     error: labelersError,
   } = useMyLabelersQuery()
   const {isAgeRestricted} = useAgeAssuranceContext()
+  const {declaredAge, isUnderage, assurance: ageAssurance} = useAgeInfo()
 
   useFocusEffect(
     useCallback(() => {
@@ -173,8 +176,6 @@ export function ModerationScreenInner({
     (optimisticAdultContent && optimisticAdultContent.enabled) ||
     (!optimisticAdultContent && preferences.moderationPrefs.adultContentEnabled)
   )
-  const ageNotSet = !preferences.userAge
-  const isUnderage = (preferences.userAge || 0) < 18
 
   const onToggleAdultContentEnabled = useCallback(
     async (selected: boolean) => {
@@ -309,10 +310,15 @@ export function ModerationScreenInner({
         <Trans>Content filters</Trans>
       </Text>
 
-      <AgeAssurancePrompt style={[a.pb_md]} />
+      <AgeAssuranceAdmonition style={[a.pb_md]}>
+        <Trans>
+          You must complete age verification in order to access the settings
+          below.
+        </Trans>
+      </AgeAssuranceAdmonition>
 
       <View style={[a.gap_md]}>
-        {ageNotSet && (
+        {declaredAge === undefined && ageAssurance.isAgeRestricted && (
           <>
             <Button
               label={_(msg`Confirm your birthdate`)}
@@ -341,7 +347,7 @@ export function ModerationScreenInner({
             a.overflow_hidden,
             t.atoms.bg_contrast_25,
           ]}>
-          {!ageNotSet && !isUnderage && (
+          {!isUnderage && (
             <>
               <View
                 style={[
@@ -394,18 +400,19 @@ export function ModerationScreenInner({
                 </View>
               )}
               <Divider />
-            </>
-          )}
-          {!isUnderage && adultContentEnabled && (
-            <>
-              <GlobalLabelPreference labelDefinition={LABELS.porn} />
-              <Divider />
-              <GlobalLabelPreference labelDefinition={LABELS.sexual} />
-              <Divider />
-              <GlobalLabelPreference
-                labelDefinition={LABELS['graphic-media']}
-              />
-              <Divider />
+
+              {adultContentEnabled && (
+                <>
+                  <GlobalLabelPreference labelDefinition={LABELS.porn} />
+                  <Divider />
+                  <GlobalLabelPreference labelDefinition={LABELS.sexual} />
+                  <Divider />
+                  <GlobalLabelPreference
+                    labelDefinition={LABELS['graphic-media']}
+                  />
+                  <Divider />
+                </>
+              )}
             </>
           )}
           <GlobalLabelPreference

src/screens/Settings/Settings.tsx

@@ -32,7 +32,7 @@ import * as Toast from '#/view/com/util/Toast'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import * as SettingsList from '#/screens/Settings/components/SettingsList'
 import {atoms as a, platform, tokens, useBreakpoints, useTheme} from '#/alf'
-import {AgeAssurancePrompt} from '#/components/ageAssurance/AgeAssurancePrompt'
+import {AgeAssuranceDismissableNotice} from '#/components/ageAssurance/AgeAssuranceDismissableNotice'
 import {AvatarStackWithFetch} from '#/components/AvatarStack'
 import {useDialogControl} from '#/components/Dialog'
 import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
@@ -97,7 +97,7 @@ export function SettingsScreen({}: Props) {
       </Layout.Header.Outer>
       <Layout.Content>
         <SettingsList.Container>
-          <AgeAssurancePrompt style={[a.px_lg, a.pt_xs, a.pb_xl]} />
+          <AgeAssuranceDismissableNotice style={[a.px_lg, a.pt_xs, a.pb_xl]} />
 
           <View
             style={[

src/state/age-assurance/index.tsx

@@ -65,7 +65,7 @@ export function Provider({children}: {children: React.ReactNode}) {
         //   (() => ({
         //     data: {
         //       lastInitiatedAt: new Date().toISOString(),
-        //       status: 'blocked',
+        //       status: 'pending',
         //     } as AppBskyUnspeccedDefs.AgeAssuranceState,
         //   }))(),
         // )