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]) +}