diff --git a/src/components/ageAssurance/AgeRestrictedScreen.tsx b/src/components/ageAssurance/AgeRestrictedScreen.tsx
index f3477824fc..71ee8de60b 100644
--- a/src/components/ageAssurance/AgeRestrictedScreen.tsx
+++ b/src/components/ageAssurance/AgeRestrictedScreen.tsx
@@ -18,6 +18,12 @@ export function AgeRestrictedScreen({
return (
fallback || (
+
+
+
+
+
+
)
diff --git a/src/components/ageAssurance/IsAgeRestricted.tsx b/src/components/ageAssurance/IsAgeRestricted.tsx
index 72386dcedc..6108ca838e 100644
--- a/src/components/ageAssurance/IsAgeRestricted.tsx
+++ b/src/components/ageAssurance/IsAgeRestricted.tsx
@@ -7,9 +7,15 @@ export function True({
children: React.ReactNode
fallback?: React.ReactNode
}) {
- const {isLoaded, isAgeRestricted} = useAgeAssuranceContext()
+ const {isLoaded, isAgeRestricted, isExempt} = useAgeAssuranceContext()
+ /**
+ * For the true case, if the user is exempt, return nothing
+ */
+ if (isExempt) return null
+
const isDefinitelyAgeRestricted = isLoaded && isAgeRestricted
const notSureYet = isAgeRestricted
+
return isDefinitelyAgeRestricted
? children
: notSureYet
@@ -24,9 +30,16 @@ export function False({
children: React.ReactNode
fallback?: React.ReactNode
}) {
- const {isLoaded, isAgeRestricted} = useAgeAssuranceContext()
+ const {isLoaded, isAgeRestricted, isExempt} = useAgeAssuranceContext()
+
+ /**
+ * For the false case, if the user is exempt, return children
+ */
+ if (isExempt) return children
+
const isDefinitelyNotAgeRestricted = isLoaded && !isAgeRestricted
const notSureYet = !isAgeRestricted
+
return isDefinitelyNotAgeRestricted
? children
: notSureYet
diff --git a/src/state/ageAssurance.tsx b/src/state/ageAssurance.tsx
index e4bfca5cf6..1c16544d08 100644
--- a/src/state/ageAssurance.tsx
+++ b/src/state/ageAssurance.tsx
@@ -12,7 +12,9 @@ import {useGeolocation} from '#/state/geolocation'
import {useAgent} from '#/state/session'
const logger = Logger.create(Logger.Context.AgeAssurance)
-const ageAssuranceQueryKey = ['ageAssurance'] as const
+export const ageAssuranceQueryKeyRoot = 'ageAssurance' as const
+export const createAgeAssuranceQueryKey = (did: string) =>
+ [ageAssuranceQueryKeyRoot, did] as const
const DEFAULT_AGE_ASSURANCE_STATE: TempAgeAssuranceState = {
status: 'unknown',
}
@@ -29,10 +31,7 @@ export type AgeAssuranceContextType = {
* age assurance state retrieved from the server.
*/
isAgeRestricted: boolean
- /**
- * The current age assurance status retrieved from the server.
- */
- status: TempAgeAssuranceState['status']
+ isExempt: boolean
/**
* The last time the age assurance state was attempted by the user.
*/
@@ -53,7 +52,7 @@ export type AgeAssuranceAPIContextType = {
const AgeAssuranceContext = createContext({
isLoaded: false,
isAgeRestricted: false,
- status: 'unknown',
+ isExempt: false,
lastInitiatedAt: undefined,
hasInitiated: false,
})
@@ -69,7 +68,8 @@ export function Provider({children}: {children: React.ReactNode}) {
const {geolocation} = useGeolocation()
const {data, refetch} = useQuery({
- queryKey: ageAssuranceQueryKey,
+ enabled: !!agent.session,
+ queryKey: createAgeAssuranceQueryKey(agent.session?.did ?? 'never'),
async queryFn() {
try {
const {data} = await wait(
@@ -99,15 +99,15 @@ export function Provider({children}: {children: React.ReactNode}) {
})
const ageAssuranceContext = useMemo(() => {
+ const isLoaded = Boolean(data)
+ const isAgeRestrictedGeo = !!geolocation?.isAgeRestrictedGeo
const {status, lastInitiatedAt} = data || DEFAULT_AGE_ASSURANCE_STATE
const ctx: AgeAssuranceContextType = {
- isLoaded: !!data,
- status,
+ isLoaded,
lastInitiatedAt,
hasInitiated: !!lastInitiatedAt,
- isAgeRestricted: Boolean(
- geolocation?.isAgeRestrictedGeo && status !== 'assured',
- ),
+ isExempt: !isAgeRestrictedGeo,
+ isAgeRestricted: Boolean(isAgeRestrictedGeo && status !== 'assured'),
}
logger.debug(`context`, ctx)