UI for age assurance compliance (#8652)

* Add geo prop * Add prelim fetch * Add geo debug * Pass in assurance state to notifications registration * Comments * Bump git index * Add some component utils, no design, gate chat * Disable mod prefs buttons, does not yet edit mod prefs * Add initial prompt component * Refine logic for showing prompt * Add send email dialog * Hook up dialog to fake mutation * Fix geo debug bug * Move provider inside query provider * Slightly better screen gater * Ok decent fallback with isExempt * Reorg * Wrap prompt in new logic * Override mod prefs * Use real endpoints, optimistic state * Add persistent card, add time-ago, warning to dialog * Add comment * No undefined query values * Fix case in import * Wait for AA to load before registering push * Override prefs in all locations * Small refactor of notifications registration * Register push after aa state * Add retries * Update blocked screens UI * Strengthen email validation * Add intent dialog * Do service auth for init * Rug refreshJwt * Update copy * Some mobile styles, add dev mode option * Fix links on native * Clean up intent dialog on native * Don't mutate existing session, only copy * Handle email validation error from server * Clarity is better * Moar clear * Fixes * Tweaks * Add country code * Gate it * Refresh state after redirect * Re-check on window focus * Remove todo * Enable in dev * Check for did match on redirect * Add blocked state * Add appeal dialog * Copy tweaks * Inset in blue well * Nux the prompt * Copy updates * Refetch just in case * Uppercase country code * Align copy, add notice to chat screens * Tweak copy * Add test code * Add debug code * Refactor AccountCard * Big refactor * Delay post-feed queries instead * Debug code * Clean up state * Reorg * Clean up copy * Comments * Reorg * UPdate URL * Cleanup * Remove todo * Update debug code * revert unneeded changes * UPdate nux name * Revert unneeded change * Updaet storage schema * Checkpoint: cleanup * Checkpoint: almost there * isLoaded -> isReady * Rename useAgeAssurance * isUnderage -> isDeclaredUnderage * Decompose, add docblocks * Refactor * UPdate debug * Apply suggestion from @surfdude29 Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Apply suggestion from @surfdude29 Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Apply suggestion from @surfdude29 Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Apply suggestion from @surfdude29 Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Apply suggestion from @surfdude29 Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Apply suggestion from @surfdude29 Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Drop including Bluesky * Apply suggestion from @surfdude29 Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Apply suggestion from @surfdude29 Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Remove todo * Gate debug * Revert unneeded change * Fail closed * Comments * Comment * Comment * fix prettier * rm viewheader * bump sdk * prevent overlap in admonition * add age assurance intent route * Just meow Co-authored-by: Samuel Newman <mozzius@protonmail.com> * Nix callback * Fix spelling of dismissible lol * Don't compare translated string * Better KWS link labels * Hide DMs send options in menu * Add button * Fix order * Use only supported languages * Rm button * best-effort language mapping * improve typing --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> Co-authored-by: Samuel Newman <mozzius@protonmail.com>
2025-07-16 13:58:07 -05:00
parent 712c3ad421
commit 1dbc331314
50 changed files with 2204 additions and 263 deletions
@@ -7,6 +7,8 @@ export enum Nux {
  ExploreInterestsCard = 'ExploreInterestsCard',
  InitialVerificationAnnouncement = 'InitialVerificationAnnouncement',
  ActivitySubscriptions = 'ActivitySubscriptions',
+  AgeAssuranceDismissibleNotice = 'AgeAssuranceDismissibleNotice',
+  AgeAssuranceDismissibleHeaderButton = 'AgeAssuranceDismissibleHeaderButton',
 }

 export const nuxNames = new Set(Object.values(Nux))
@@ -28,6 +30,14 @@ export type AppNux = BaseNux<
      id: Nux.ActivitySubscriptions
      data: undefined
    }
+  | {
+      id: Nux.AgeAssuranceDismissibleNotice
+      data: undefined
+    }
+  | {
+      id: Nux.AgeAssuranceDismissibleHeaderButton
+      data: undefined
+    }
 >

 export const NuxSchemas: Record<Nux, zod.ZodObject<any> | undefined> = {
@@ -35,4 +45,6 @@ export const NuxSchemas: Record<Nux, zod.ZodObject<any> | undefined> = {
  [Nux.ExploreInterestsCard]: undefined,
  [Nux.InitialVerificationAnnouncement]: undefined,
  [Nux.ActivitySubscriptions]: undefined,
+  [Nux.AgeAssuranceDismissibleNotice]: undefined,
+  [Nux.AgeAssuranceDismissibleHeaderButton]: undefined,
 }
@@ -1,6 +1,6 @@
 import {useMutation, useQueryClient} from '@tanstack/react-query'

-import {AppNux, Nux} from '#/state/queries/nuxs/definitions'
+import {type AppNux, type Nux} from '#/state/queries/nuxs/definitions'
 import {parseAppNux, serializeAppNux} from '#/state/queries/nuxs/util'
 import {
  preferencesQueryKey,
@@ -40,6 +40,20 @@ export function useNuxs():
    }
  }

+  // if (__DEV__) {
+  //   const queryClient = useQueryClient()
+  //   const agent = useAgent()
+
+  //   // @ts-ignore
+  //   window.clearNux = async (ids: string[]) => {
+  //     await agent.bskyAppRemoveNuxs(ids)
+  //     // triggers a refetch
+  //     await queryClient.invalidateQueries({
+  //       queryKey: preferencesQueryKey,
+  //     })
+  //   }
+  // }
+
  return {
    nuxs: undefined,
    status,
@@ -8,6 +8,7 @@ import {
  type BskyAgent,
  moderatePost,
  type ModerationDecision,
+  type ModerationPrefs,
 } from '@atproto/api'
 import {
  type InfiniteData,
@@ -31,6 +32,7 @@ import {FeedTuner, type FeedTunerFn} from '#/lib/api/feed-manip'
 import {DISCOVER_FEED_URI} from '#/lib/constants'
 import {BSKY_FEED_OWNER_DIDS} from '#/lib/constants'
 import {logger} from '#/logger'
+import {useAgeAssuranceContext} from '#/state/ageAssurance'
 import {STALE} from '#/state/queries'
 import {DEFAULT_LOGGED_OUT_PREFERENCES} from '#/state/queries/preferences/const'
 import {useAgent} from '#/state/session'
@@ -134,8 +136,18 @@ export function usePostFeedQuery(
  const feedTuners = useFeedTuners(feedDesc)
  const moderationOpts = useModerationOpts()
  const {data: preferences} = usePreferencesQuery()
+  /**
+   * Load bearing: we need to await AA state or risk FOUC. This marginally
+   * delays feeds, but AA state is fetched immediately on load and is then
+   * available for the remainder of the session, so this delay only affects cold
+   * loads. -esb
+   */
+  const {isReady: isAgeAssuranceReady} = useAgeAssuranceContext()
  const enabled =
-    opts?.enabled !== false && Boolean(moderationOpts) && Boolean(preferences)
+    opts?.enabled !== false &&
+    Boolean(moderationOpts) &&
+    Boolean(preferences) &&
+    isAgeAssuranceReady
  const userInterests = aggregateUserInterests(preferences)
  const followingPinnedIndex =
    preferences?.savedFeeds?.findIndex(
@@ -206,7 +218,11 @@ export function usePostFeedQuery(
         * some not.
         */
        if (!agent.session) {
-          assertSomePostsPassModeration(res.feed)
+          assertSomePostsPassModeration(
+            res.feed,
+            preferences?.moderationPrefs ||
+              DEFAULT_LOGGED_OUT_PREFERENCES.moderationPrefs,
+          )
        }

        return {
@@ -596,7 +612,10 @@ export function* findAllProfilesInQueryData(
  }
 }

-function assertSomePostsPassModeration(feed: AppBskyFeedDefs.FeedViewPost[]) {
+function assertSomePostsPassModeration(
+  feed: AppBskyFeedDefs.FeedViewPost[],
+  moderationPrefs: ModerationPrefs,
+) {
  // no posts in this feed
  if (feed.length === 0) return true

@@ -606,7 +625,7 @@ function assertSomePostsPassModeration(feed: AppBskyFeedDefs.FeedViewPost[]) {
  for (const item of feed) {
    const moderation = moderatePost(item.post, {
      userDid: undefined,
-      prefs: DEFAULT_LOGGED_OUT_PREFERENCES.moderationPrefs,
+      prefs: moderationPrefs,
    })

    if (!moderation.ui('contentList').filter) {
@@ -1,3 +1,4 @@
+import {useCallback} from 'react'
 import {
  type AppBskyActorDefs,
  type BskyFeedViewPreference,
@@ -9,6 +10,8 @@ import {PROD_DEFAULT_FEED} from '#/lib/constants'
 import {replaceEqualDeep} from '#/lib/functions'
 import {getAge} from '#/lib/strings/time'
 import {logger} from '#/logger'
+import {useAgeAssuranceContext} from '#/state/ageAssurance'
+import {AGE_RESTRICTED_MODERATION_PREFS} from '#/state/ageAssurance/const'
 import {STALE} from '#/state/queries'
 import {
  DEFAULT_HOME_FEED_PREFS,
@@ -31,6 +34,8 @@ export const preferencesQueryKey = [preferencesQueryKeyRoot]

 export function usePreferencesQuery() {
  const agent = useAgent()
+  const {isAgeRestricted} = useAgeAssuranceContext()
+
  return useQuery({
    staleTime: STALE.SECONDS.FIFTEEN,
    structuralSharing: replaceEqualDeep,
@@ -68,6 +73,16 @@ export function usePreferencesQuery() {
        return preferences
      }
    },
+    select: useCallback(
+      (data: UsePreferencesQueryResponse) => {
+        const isUnderage = (data.userAge || 0) < 18
+        if (isUnderage || isAgeRestricted) {
+          data.moderationPrefs = AGE_RESTRICTED_MODERATION_PREFS
+        }
+        return data
+      },
+      [isAgeRestricted],
+    ),
  })
 }