Add persistent card, add time-ago, warning to dialog

src/components/ageAssurance/AgeAssuranceAccountCard.tsx

@@ -0,0 +1,102 @@
+import {View} from 'react-native'
+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, useTheme, type ViewStyleProp} from '#/alf'
+import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
+import {
+  AgeAssuranceInitDialog,
+  useDialogControl,
+} from '#/components/ageAssurance/AgeAssuranceInitDialog'
+import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
+import {Button, ButtonText} from '#/components/Button'
+import {Text} from '#/components/Typography'
+
+export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
+  return (
+    <IsAgeRestricted.True>
+      <Inner style={style} />
+    </IsAgeRestricted.True>
+  )
+}
+
+function Inner({style}: ViewStyleProp & {}) {
+  const t = useTheme()
+  const {_, i18n} = useLingui()
+  const {isAgeRestricted, hasInitiated, lastInitiatedAt} =
+    useAgeAssuranceContext()
+  const control = useDialogControl()
+  const getTimeAgo = useGetTimeAgo()
+  const timeAgo = lastInitiatedAt
+    ? getTimeAgo(lastInitiatedAt, new Date())
+    : null
+
+  if (!isAgeRestricted) return null
+
+  return (
+    <>
+      <AgeAssuranceInitDialog control={control} />
+
+      <View style={style}>
+        <View
+          style={[a.p_lg, a.rounded_md, a.border, t.atoms.border_contrast_low]}>
+          <View
+            style={[
+              a.flex_row,
+              a.justify_between,
+              a.align_center,
+              a.gap_lg,
+              a.pb_md,
+              a.z_10,
+            ]}>
+            <View style={[a.align_start]}>
+              <AgeAssuranceBadge />
+            </View>
+
+            {lastInitiatedAt && (
+              <Text
+                style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]}
+                title={i18n.date(lastInitiatedAt, {
+                  dateStyle: 'medium',
+                  timeStyle: 'medium',
+                })}>
+                {timeAgo === 'now' ? (
+                  <Trans>Last initiated just {timeAgo}</Trans>
+                ) : (
+                  <Trans>Last initiated {timeAgo} ago</Trans>
+                )}
+              </Text>
+            )}
+          </View>
+
+          <View
+            style={[a.flex_row, a.justify_between, a.align_start, a.gap_xl]}>
+            <Text style={[a.text_sm, a.leading_snug]}>
+              <Trans>
+                You're accessing Bluesky from a region that requires you to
+                verify your age prior to accessing certain content and features.
+              </Trans>
+            </Text>
+
+            <Button
+              label={_(msg`Verify now`)}
+              size="small"
+              variant="solid"
+              color={hasInitiated ? 'secondary' : 'primary'}
+              onPress={() => control.open()}>
+              <ButtonText>
+                {hasInitiated ? (
+                  <Trans>Verify again</Trans>
+                ) : (
+                  <Trans>Verify now</Trans>
+                )}
+              </ButtonText>
+            </Button>
+          </View>
+        </View>
+      </View>
+    </>
+  )
+}

src/components/ageAssurance/AgeAssuranceInitDialog.tsx

@@ -5,6 +5,8 @@ import {useLingui} from '@lingui/react'
 import {validate as validateEmail} from 'email-validator'
 
 import {useCleanError} from '#/lib/hooks/useCleanError'
+import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {useAgeAssuranceContext} from '#/state/age-assurance'
 import {useLanguagePrefs} from '#/state/preferences'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme, web} from '#/alf'
@@ -57,6 +59,12 @@ function Inner() {
   const langPrefs = useLanguagePrefs()
   const cleanError = useCleanError()
   const {close} = Dialog.useDialogContext()
+  const {lastInitiatedAt} = useAgeAssuranceContext()
+  const getTimeAgo = useGetTimeAgo()
+
+  const wasRecentlyInitiated =
+    lastInitiatedAt &&
+    new Date(lastInitiatedAt).getTime() > Date.now() - 5 * 60 * 1000 // 5 minutes
 
   const [success, setSuccess] = useState(false)
   const [email, setEmail] = useState(currentAccount?.email || '')
@@ -146,6 +154,17 @@ function Inner() {
             <Divider />
 
             <View style={[a.w_full, a.pt_xl, a.gap_md]}>
+              {wasRecentlyInitiated && (
+                <Admonition type="tip">
+                  <Trans>
+                    You initiated this flow already,{' '}
+                    {getTimeAgo(lastInitiatedAt, new Date(), {format: 'long'})}{' '}
+                    ago. It may take up to 5 minutes for emails to reach your
+                    inbox. Consider waiting a few minutes before trying again.
+                  </Trans>
+                </Admonition>
+              )}
+
               <View>
                 <TextField.LabelText>
                   <Trans>Your email</Trans>

src/screens/Settings/AccountSettings.tsx

@@ -1,3 +1,4 @@
+import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {type NativeStackScreenProps} from '@react-navigation/native-stack'
@@ -7,6 +8,7 @@ import {useModalControls} from '#/state/modals'
 import {useSession} from '#/state/session'
 import * as SettingsList from '#/screens/Settings/components/SettingsList'
 import {atoms as a, useTheme} from '#/alf'
+import {AgeAssuranceAccountCard} from '#/components/AgeAssurance/AgeAssuranceAccountCard'
 import {useDialogControl} from '#/components/Dialog'
 import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
 import {
@@ -113,7 +115,6 @@ export function AccountSettingsScreen({}: Props) {
             </SettingsList.ItemText>
             <SettingsList.Chevron />
           </SettingsList.PressableItem>
-          <SettingsList.Divider />
           <SettingsList.Item>
             <SettingsList.ItemIcon icon={BirthdayCakeIcon} />
             <SettingsList.ItemText>
@@ -124,6 +125,12 @@ export function AccountSettingsScreen({}: Props) {
               onPress={() => birthdayControl.open()}
             />
           </SettingsList.Item>
+
+          <View style={[a.px_xl, a.pt_xs, a.pb_md]}>
+            <AgeAssuranceAccountCard />
+          </View>
+
+          <SettingsList.Divider />
           <SettingsList.PressableItem
             label={_(msg`Password`)}
             onPress={() => openModal({name: 'change-password'})}>

src/state/age-assurance/index.tsx

@@ -1,4 +1,5 @@
 import {createContext, useContext, useMemo} from 'react'
+import {type AppBskyUnspeccedDefs} from '@atproto/api'
 import {useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {wait} from '#/lib/async/wait'
@@ -7,7 +8,6 @@ import {Logger} from '#/logger'
 import {
   type AgeAssuranceAPIContextType,
   type AgeAssuranceContextType,
-  type AppBskyUnspeccedDefs,
 } from '#/state/age-assurance/types'
 import {useGeolocation} from '#/state/geolocation'
 import {preferencesQueryKey} from '#/state/queries/preferences'
@@ -21,6 +21,7 @@ const DEFAULT_AGE_ASSURANCE_STATE: AppBskyUnspeccedDefs.AgeAssuranceState = {
   status: 'unknown',
 }
 const AgeAssuranceContext = createContext<AgeAssuranceContextType>({
+  status: 'unknown',
   isLoaded: false,
   isAgeRestricted: false,
   isExempt: false,
@@ -67,6 +68,7 @@ export function Provider({children}: {children: React.ReactNode}) {
     const isAgeRestrictedGeo = !!geolocation?.isAgeRestrictedGeo
     const {status, lastInitiatedAt} = data || DEFAULT_AGE_ASSURANCE_STATE
     const ctx: AgeAssuranceContextType = {
+      status,
       isLoaded: isFetched,
       lastInitiatedAt,
       hasInitiated: !!lastInitiatedAt,

src/state/age-assurance/types.ts

@@ -1,14 +1,9 @@
+import {type AppBskyUnspeccedDefs} from '@atproto/api'
 import {type QueryObserverBaseResult} from '@tanstack/react-query'
 
-export namespace AppBskyUnspeccedDefs {
-  export type AgeAssuranceState = {
-    lastInitiatedAt?: string
-    status: 'unknown' | 'pending' | 'assured'
-  }
-}
-
 export type AgeAssuranceContextType = {
   isLoaded: boolean
+  status: AppBskyUnspeccedDefs.AgeAssuranceState['status']
   /**
    * Whether the current user is age-restricted based on their geolocation and
    * age assurance state retrieved from the server.