Decompose, add docblocks

src/components/ageAssurance/AgeAssuranceAccountCard.tsx

@@ -38,11 +38,11 @@ function Inner({style}: ViewStyleProp & {}) {
   const {gtPhone} = useBreakpoints()
 
   const copy = useAgeAssuranceCopy()
-  const {assurance} = useAgeAssurance()
+  const {status, lastInitiatedAt} = useAgeAssurance()
-  const isBlocked = assurance.status === 'blocked'
+  const isBlocked = status === 'blocked'
-  const hasInitiated = !!assurance.lastInitiatedAt
+  const hasInitiated = !!lastInitiatedAt
-  const timeAgo = assurance.lastInitiatedAt
+  const timeAgo = lastInitiatedAt
-    ? getTimeAgo(assurance.lastInitiatedAt, new Date())
+    ? getTimeAgo(lastInitiatedAt, new Date())
     : null
 
   return (
@@ -96,10 +96,10 @@ function Inner({style}: ViewStyleProp & {}) {
                   a.align_center,
                   gtPhone ? [a.flex_row, a.gap_xl] : [a.gap_md],
                 ]}>
-                {assurance.lastInitiatedAt ? (
+                {hasInitiated ? (
                   <Text
                     style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]}
-                    title={i18n.date(assurance.lastInitiatedAt, {
+                    title={i18n.date(lastInitiatedAt, {
                       dateStyle: 'medium',
                       timeStyle: 'medium',
                     })}>

src/components/ageAssurance/AgeAssuranceDismissableNotice.tsx

@@ -12,7 +12,7 @@ import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 
 export function AgeAssuranceDismissableNotice({style}: ViewStyleProp & {}) {
   const {_} = useLingui()
-  const {isReady, isDeclaredUnderage, isAgeRestricted, assurance} =
+  const {isReady, isDeclaredUnderage, isAgeRestricted, lastInitiatedAt} =
     useAgeAssurance()
   const {nux} = useNux(Nux.AgeAssuranceDismissableNotice)
   const copy = useAgeAssuranceCopy()
@@ -22,7 +22,7 @@ export function AgeAssuranceDismissableNotice({style}: ViewStyleProp & {}) {
   if (!isReady) return null
   if (isDeclaredUnderage) return null
   if (!isAgeRestricted) return null
-  if (assurance.lastInitiatedAt) return null
+  if (lastInitiatedAt) return null
   if (hidden) return null
   if (nux && nux.completed) return null
 

src/state/ageAssurance/useAgeAssurance.ts

@@ -7,12 +7,21 @@ import {usePreferencesQuery} from '#/state/queries/preferences'
 
 const logger = Logger.create(Logger.Context.AgeAssurance)
 
-type AgeAssurance = {
+type AgeAssurance = ReturnType<typeof useAgeAssuranceContext> & {
-  isReady: boolean
+  /**
-  declaredAge: number | undefined
+   * Indicates the user is age restricted based on the requirements of their
-  isDeclaredUnderage: boolean
+   * region, and their server-provided age assurance status. Does not factor in
+   * the user's declared age.
+   */
   isAgeRestricted: boolean
-  assurance: ReturnType<typeof useAgeAssuranceContext>
+  /**
+   * The age the user has declared in their preferences, if any.
+   */
+  declaredAge: number | undefined
+  /**
+   * Indicates whether the user has declared an age under 18.
+   */
+  isDeclaredUnderage: boolean
 }
 
 /**
@@ -32,11 +41,11 @@ export function useAgeAssurance(): AgeAssurance {
     const isDeclaredUnderage = (declaredAge || 0) < 18
     const state: AgeAssurance = {
       isReady,
+      status: ctx.status,
+      lastInitiatedAt: ctx.lastInitiatedAt,
+      isAgeRestricted,
       declaredAge,
       isDeclaredUnderage,
-      isAgeRestricted,
-
-      assurance: ctx,
     }
     logger.debug(`state`, state)
     return state