Add error state in case of config failure

src/ageAssurance/state.ts

@@ -35,13 +35,14 @@ export function useAgeAssuranceState(): AgeAssuranceState {
      * The query handler will try it again, but if it continues to fail, of
      * course we won't have config.
      *
-     * In this case, fail open (unknown status/access) to avoid blocking users.
+     * In this case, fail open to avoid blocking users.
      */
     if (!config) {
       logger.warn('useAgeAssuranceState: missing config')
       return {
         status: AgeAssuranceStatus.Unknown,
-        access: AgeAssuranceAccess.Unknown,
+        access: AgeAssuranceAccess.Safe,
+        error: 'config',
       }
     }
 

src/ageAssurance/types.ts

@@ -18,6 +18,7 @@ export type AgeAssuranceState = {
   lastInitiatedAt?: string
   status: AgeAssuranceStatus
   access: AgeAssuranceAccess
+  error?: 'config' // maybe other specific cases in the future
 }
 
 export function parseStatusFromString(raw: string) {

src/components/ageAssurance/AgeAssuranceAccountCard.tsx

@@ -8,6 +8,7 @@ import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog'
 import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
+import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
 import {
   AgeAssuranceInitDialog,
   useDialogControl,
@@ -27,6 +28,13 @@ import {useDeviceGeolocationApi} from '#/geolocation'
 export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
   const aa = useAgeAssurance()
   if (aa.state.access === aa.Access.Full) return null
+  if (aa.state.error === 'config') {
+    return (
+      <View style={style}>
+        <AgeAssuranceConfigUnavailableError />
+      </View>
+    )
+  }
   return <Inner style={style} />
 }
 

src/components/ageAssurance/AgeAssuranceAdmonition.tsx

@@ -3,6 +3,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, select, useTheme, type ViewStyleProp} from '#/alf'
+import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
 import {useDialogControl} from '#/components/ageAssurance/AgeAssuranceInitDialog'
 import type * as Dialog from '#/components/Dialog'
 import {ShieldCheck_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
@@ -19,6 +20,9 @@ export function AgeAssuranceAdmonition({
   const aa = useAgeAssurance()
 
   if (aa.state.access === aa.Access.Full) return null
+  if (aa.state.error === 'config') {
+    return <AgeAssuranceConfigUnavailableError style={[a.pr_4xl]} />
+  }
 
   return (
     <Inner style={style} control={control}>

src/components/ageAssurance/AgeAssuranceDismissibleFeedBanner.tsx

@@ -23,6 +23,7 @@ export function useInternalState() {
   const visible = useMemo(() => {
     if (aa.state.access === aa.Access.Full) return false
     if (aa.state.lastInitiatedAt) return false
+    if (aa.state.error === 'config') return false
     if (hidden) return false
     if (nux && nux.completed) return false
     return true

src/components/ageAssurance/AgeAssuranceErrors.tsx

@@ -0,0 +1,16 @@
+import {Trans} from '@lingui/macro'
+
+import {type ViewStyleProp} from '#/alf'
+import {Admonition} from '#/components/Admonition'
+
+export function AgeAssuranceConfigUnavailableError(props: ViewStyleProp) {
+  return (
+    <Admonition type="error" style={props.style}>
+      <Trans>
+        We were unable to load age assurance configuration for your region,
+        probably due to a network error. Some content and features may be
+        unavailable temporarily. Please try again later.
+      </Trans>
+    </Admonition>
+  )
+}

src/components/ageAssurance/AgeRestrictedScreen.tsx

@@ -5,6 +5,7 @@ import {useLingui} from '@lingui/react'
 import {atoms as a} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
+import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
 import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {ButtonIcon, ButtonText} from '#/components/Button'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
@@ -44,6 +45,12 @@ export function AgeRestrictedScreen({
       </Layout.Header.Outer>
       <Layout.Content>
         <View style={[a.p_lg]}>
+          {aa.state.error === 'config' && (
+            <View style={[a.pb_lg]}>
+              <AgeAssuranceConfigUnavailableError />
+            </View>
+          )}
+
           <View style={[a.align_start, a.pb_lg]}>
             <AgeAssuranceBadge />
           </View>