diff --git a/src/components/ageAssurance/AgeAssuranceAccountCard.tsx b/src/components/ageAssurance/AgeAssuranceAccountCard.tsx index 80dc965120..42c9fa8a74 100644 --- a/src/components/ageAssurance/AgeAssuranceAccountCard.tsx +++ b/src/components/ageAssurance/AgeAssuranceAccountCard.tsx @@ -5,6 +5,7 @@ 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 {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge' import { AgeAssuranceInitDialog, @@ -25,14 +26,16 @@ export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) { function Inner({style}: ViewStyleProp & {}) { const t = useTheme() const {_, i18n} = useLingui() - const {isAgeRestricted, hasInitiated, lastInitiatedAt} = + const {status, isAgeRestricted, hasInitiated, lastInitiatedAt} = useAgeAssuranceContext() const control = useDialogControl() const getTimeAgo = useGetTimeAgo() + const {gtPhone} = useBreakpoints() + + const isBlocked = status === 'blocked' const timeAgo = lastInitiatedAt ? getTimeAgo(lastInitiatedAt, new Date()) : null - const {gtPhone} = useBreakpoints() if (!isAgeRestricted) return null @@ -72,6 +75,18 @@ function Inner({style}: ViewStyleProp & {}) { )} + {isBlocked && ( + + + + You are currently unable to access Bluesky's Age Assurance + flow. Please contact our moderation team if you believe this + is an error. + + + + )} + - + {!isBlocked && ( + + )}