diff --git a/src/components/ageAssurance/AgeRestrictedScreen.tsx b/src/components/ageAssurance/AgeRestrictedScreen.tsx index 1e35c19064..f3477824fc 100644 --- a/src/components/ageAssurance/AgeRestrictedScreen.tsx +++ b/src/components/ageAssurance/AgeRestrictedScreen.tsx @@ -1,3 +1,4 @@ +import {useMemo} from 'react' import {View} from 'react-native' import {Trans} from '@lingui/macro' @@ -6,11 +7,27 @@ import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted' import * as Layout from '#/components/Layout' import {Text} from '#/components/Typography' -export function AgeRestrictedScreen({children}: {children: React.ReactNode}) { +export function AgeRestrictedScreen({ + children, + fallback, +}: { + children: React.ReactNode + fallback?: React.ReactNode +}) { + const screenFallback = useMemo(() => { + return ( + fallback || ( + + + + ) + ) + }, [fallback]) + return ( <> - - + + @@ -30,7 +47,9 @@ export function AgeRestrictedScreen({children}: {children: React.ReactNode}) { - {children} + + {children} + ) } diff --git a/src/components/ageAssurance/IsAgeRestricted.tsx b/src/components/ageAssurance/IsAgeRestricted.tsx index 4d0638df86..72386dcedc 100644 --- a/src/components/ageAssurance/IsAgeRestricted.tsx +++ b/src/components/ageAssurance/IsAgeRestricted.tsx @@ -1,13 +1,37 @@ import {useAgeAssuranceContext} from '#/state/ageAssurance' -export function True({children}: {children: React.ReactNode}) { +export function True({ + children, + fallback, +}: { + children: React.ReactNode + fallback?: React.ReactNode +}) { const {isLoaded, isAgeRestricted} = useAgeAssuranceContext() - return isLoaded && isAgeRestricted ? children : null + const isDefinitelyAgeRestricted = isLoaded && isAgeRestricted + const notSureYet = isAgeRestricted + return isDefinitelyAgeRestricted + ? children + : notSureYet + ? fallback || null + : null } -export function False({children}: {children: React.ReactNode}) { +export function False({ + children, + fallback, +}: { + children: React.ReactNode + fallback?: React.ReactNode +}) { const {isLoaded, isAgeRestricted} = useAgeAssuranceContext() - return isLoaded && !isAgeRestricted ? children : null + const isDefinitelyNotAgeRestricted = isLoaded && !isAgeRestricted + const notSureYet = !isAgeRestricted + return isDefinitelyNotAgeRestricted + ? children + : notSureYet + ? fallback || null + : null } export const IsAgeRestricted = { diff --git a/src/state/ageAssurance.tsx b/src/state/ageAssurance.tsx index e9fadb0e2d..e4bfca5cf6 100644 --- a/src/state/ageAssurance.tsx +++ b/src/state/ageAssurance.tsx @@ -77,7 +77,7 @@ export function Provider({children}: {children: React.ReactNode}) { (() => ({ data: { lastInitiatedAt: new Date().toISOString(), - status: 'assured', + status: 'unknown', } as TempAgeAssuranceState, }))(), )