diff --git a/src/components/ageAssurance/AgeAssuranceAccountCard.tsx b/src/components/ageAssurance/AgeAssuranceAccountCard.tsx
index 3c6080ac01..1686bb8e1e 100644
--- a/src/components/ageAssurance/AgeAssuranceAccountCard.tsx
+++ b/src/components/ageAssurance/AgeAssuranceAccountCard.tsx
@@ -3,7 +3,6 @@ import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
-import {useAgeAssuranceContext} from '#/state/age-assurance'
import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog'
@@ -12,39 +11,39 @@ import {
AgeAssuranceInitDialog,
useDialogControl,
} from '#/components/ageAssurance/AgeAssuranceInitDialog'
-import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
+import {useAgeInfo} from '#/components/ageAssurance/useAgeInfo'
import {Button, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
+import {Divider} from '#/components/Divider'
import {createStaticClick, InlineLinkText} from '#/components/Link'
import {Text} from '#/components/Typography'
export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
- return (
-
-
-
- )
+ const {isLoaded, assurance, declaredAge} = useAgeInfo()
+
+ if (!isLoaded) return null
+ if (declaredAge < 18) return null
+ if (!assurance.isAgeRestricted) return null
+
+ return
}
function Inner({style}: ViewStyleProp & {}) {
const t = useTheme()
const {_, i18n} = useLingui()
- const {status, isAgeRestricted, hasInitiated, lastInitiatedAt} =
- useAgeAssuranceContext()
const control = useDialogControl()
const appealControl = Dialog.useDialogControl()
const getTimeAgo = useGetTimeAgo()
const {gtPhone} = useBreakpoints()
+
const copy = useAgeAssuranceCopy()
-
- const isBlocked = status === 'blocked'
- const timeAgo = lastInitiatedAt
- ? getTimeAgo(lastInitiatedAt, new Date())
+ const {assurance} = useAgeInfo()
+ const isBlocked = assurance.status === 'blocked'
+ const timeAgo = assurance.lastInitiatedAt
+ ? getTimeAgo(assurance.lastInitiatedAt, new Date())
: null
- if (!isAgeRestricted) return null
-
return (
<>
@@ -65,67 +64,73 @@ function Inner({style}: ViewStyleProp & {}) {
-
- {lastInitiatedAt && (
-
- {timeAgo === 'now' ? (
- Last initiated just {timeAgo}
- ) : (
- Last initiated {timeAgo} ago
- )}
-
- )}
- {isBlocked && (
-
-
-
- You are currently unable to access Bluesky's Age Assurance
- flow. Please{' '}
- {
- appealControl.open()
- })}>
- contact our moderation team
- {' '}
- if you believe this is an error.
-
-
-
- )}
-
-
+
{copy.notice}
-
- {!isBlocked && (
-
- )}
+
+ {isBlocked ? (
+
+
+ You are currently unable to access Bluesky's Age Assurance flow.
+ Please{' '}
+ {
+ appealControl.open()
+ })}>
+ contact our moderation team
+ {' '}
+ if you believe this is an error.
+
+
+ ) : (
+ <>
+
+
+ {assurance.lastInitiatedAt ? (
+
+ {timeAgo === 'now' ? (
+ Last initiated just {timeAgo}
+ ) : (
+ Last initiated {timeAgo} ago
+ )}
+
+ ) : (
+
+ {copy.noticeSub}
+
+ )}
+
+
+ >
+ )}
>
diff --git a/src/components/ageAssurance/useAgeInfo.ts b/src/components/ageAssurance/useAgeInfo.ts
new file mode 100644
index 0000000000..b168100496
--- /dev/null
+++ b/src/components/ageAssurance/useAgeInfo.ts
@@ -0,0 +1,19 @@
+import {useMemo} from 'react'
+
+import {useAgeAssuranceContext} from '#/state/age-assurance'
+import {usePreferencesQuery} from '#/state/queries/preferences'
+
+export function useAgeInfo() {
+ const ctx = useAgeAssuranceContext()
+ const {isFetched: preferencesLoaded, data: preferences} =
+ usePreferencesQuery()
+ const declaredAge = useMemo(() => preferences?.userAge || -1, [preferences])
+
+ return useMemo(() => {
+ return {
+ isLoaded: ctx.isLoaded && preferencesLoaded,
+ declaredAge,
+ assurance: ctx,
+ }
+ }, [ctx, preferencesLoaded, declaredAge])
+}