Improve miminum age handling

src/ageAssurance/components/NoAccessScreen.tsx

@@ -177,10 +177,19 @@ export function NoAccessScreen() {
                         </Trans>
                       </Text>
 
+                      {!aa.flags.isOverRegionMinAccessAge && (
+                        <Text style={[textStyles]}>
+                          <Trans>
+                            Unfortunately, your declared age indicates that you
+                            are not old enough to access Bluesky in your region.
+                          </Trans>
+                        </Text>
+                      )}
+
                       {!isBlocked && birthdateUpdateText}
                     </View>
 
-                    <AccessSection />
+                    {aa.flags.isOverRegionMinAccessAge && <AccessSection />}
                   </>
                 ) : (
                   <View style={[a.gap_lg]}>

src/ageAssurance/debug.ts

@@ -12,12 +12,14 @@ export const enabled = (IS_DEV && false) || IS_E2E
 
 export const geolocation: Geolocation | undefined = enabled
   ? {
-      countryCode: 'AA',
+      countryCode: 'BB',
       regionCode: undefined,
     }
   : undefined
 
-export const deviceGeolocation: Geolocation | undefined = enabled
+const deviceGeolocationEnabled = false
+export const deviceGeolocation: Geolocation | undefined =
+  enabled && deviceGeolocationEnabled
     ? {
         countryCode: 'AA',
         regionCode: undefined,
@@ -29,6 +31,7 @@ export const config: AppBskyAgeassuranceDefs.Config = {
     {
       countryCode: 'AA',
       regionCode: undefined,
+      minAccessAge: 13,
       rules: [
         {
           $type: ids.Default,
@@ -36,6 +39,17 @@ export const config: AppBskyAgeassuranceDefs.Config = {
         },
       ],
     },
+    {
+      countryCode: 'BB',
+      regionCode: undefined,
+      minAccessAge: 16,
+      rules: [
+        {
+          $type: ids.Default,
+          access: 'none',
+        },
+      ],
+    },
   ],
 }
 

src/ageAssurance/index.tsx

@@ -14,7 +14,11 @@ import {
   type AgeAssuranceState,
   AgeAssuranceStatus,
 } from '#/ageAssurance/types'
-import {isUserUnderAdultAge} from '#/ageAssurance/util'
+import {
+  isUnderAge,
+  MIN_ACCESS_AGE,
+  useAgeAssuranceRegionConfigWithFallback,
+} from '#/ageAssurance/util'
 
 export {
   prefetchConfig as prefetchAgeAssuranceConfig,
@@ -24,6 +28,7 @@ export {
   usePatchServerState as usePatchAgeAssuranceServerState,
 } from '#/ageAssurance/data'
 export {logger} from '#/ageAssurance/logger'
+export {MIN_ACCESS_AGE} from '#/ageAssurance/util'
 
 const AgeAssuranceStateContext = createContext<{
   Access: typeof AgeAssuranceAccess
@@ -32,6 +37,8 @@ const AgeAssuranceStateContext = createContext<{
   flags: {
     adultContentDisabled: boolean
     chatDisabled: boolean
+    isOverRegionMinAccessAge: boolean
+    isOverAppMinAccessAge: boolean
   }
 }>({
   Access: AgeAssuranceAccess,
@@ -44,6 +51,8 @@ const AgeAssuranceStateContext = createContext<{
   flags: {
     adultContentDisabled: false,
     chatDisabled: false,
+    isOverRegionMinAccessAge: false,
+    isOverAppMinAccessAge: false,
   },
 })
 
@@ -69,6 +78,7 @@ export function Provider({children}: {children: React.ReactNode}) {
 function InnerProvider({children}: {children: React.ReactNode}) {
   const state = useAgeAssuranceState()
   const {data} = useAgeAssuranceDataContext()
+  const config = useAgeAssuranceRegionConfigWithFallback()
   const getAndRegisterPushToken = useGetAndRegisterPushToken()
 
   const handleAccessUpdate = useCallback(
@@ -89,11 +99,17 @@ function InnerProvider({children}: {children: React.ReactNode}) {
     <AgeAssuranceStateContext.Provider
       value={useMemo(() => {
         const chatDisabled = state.access !== AgeAssuranceAccess.Full
-        const isUnderage = data?.birthdate
+        const isUnderAdultAge = data?.birthdate
-          ? isUserUnderAdultAge(data.birthdate)
+          ? isUnderAge(data.birthdate, 18)
           : true
+        const isOverRegionMinAccessAge = data?.birthdate
+          ? !isUnderAge(data.birthdate, config.minAccessAge)
+          : false
+        const isOverAppMinAccessAge = data?.birthdate
+          ? !isUnderAge(data.birthdate, MIN_ACCESS_AGE)
+          : false
         const adultContentDisabled =
-          state.access !== AgeAssuranceAccess.Full || isUnderage
+          state.access !== AgeAssuranceAccess.Full || isUnderAdultAge
         return {
           Access: AgeAssuranceAccess,
           Status: AgeAssuranceStatus,
@@ -101,9 +117,11 @@ function InnerProvider({children}: {children: React.ReactNode}) {
           flags: {
             adultContentDisabled,
             chatDisabled,
+            isOverRegionMinAccessAge,
+            isOverAppMinAccessAge,
           },
         }
-      }, [state, data])}>
+      }, [state, data, config])}>
       {children}
     </AgeAssuranceStateContext.Provider>
   )

src/ageAssurance/util.ts

@@ -12,7 +12,23 @@ import {useAgeAssuranceDataContext} from '#/ageAssurance/data'
 import {AgeAssuranceAccess} from '#/ageAssurance/types'
 import {type Geolocation, useGeolocation} from '#/geolocation'
 
-const DEFAULT_MIN_AGE = 13
+export const MIN_ACCESS_AGE = 13
+const FALLBACK_REGION_CONFIG: AppBskyAgeassuranceDefs.ConfigRegion = {
+  countryCode: '*',
+  regionCode: undefined,
+  minAccessAge: MIN_ACCESS_AGE,
+  rules: [
+    {
+      $type: ids.IfDeclaredOverAge,
+      age: MIN_ACCESS_AGE,
+      access: AgeAssuranceAccess.Full,
+    },
+    {
+      $type: ids.Default,
+      access: AgeAssuranceAccess.None,
+    },
+  ],
+}
 
 /**
  * Get age assurance region config based on geolocation, with fallback to
@@ -30,23 +46,7 @@ export function getAgeAssuranceRegionConfigWithFallback(
     regionCode: geolocation.regionCode,
   })
 
-  return (
+  return region || FALLBACK_REGION_CONFIG
-    region || {
-      countryCode: '*',
-      regionCode: undefined,
-      rules: [
-        {
-          $type: ids.IfDeclaredOverAge,
-          age: DEFAULT_MIN_AGE,
-          access: AgeAssuranceAccess.Full,
-        },
-        {
-          $type: ids.Default,
-          access: AgeAssuranceAccess.None,
-        },
-      ],
-    }
-  )
 }
 
 /**
@@ -67,6 +67,14 @@ export function useAgeAssuranceRegionConfig() {
   }, [config, geolocation])
 }
 
+/**
+ * Hook to get the age assurance region config based on current geolocation.
+ * Falls back to our app defaults if no region config is found.
+ */
+export function useAgeAssuranceRegionConfigWithFallback() {
+  return useAgeAssuranceRegionConfig() || FALLBACK_REGION_CONFIG
+}
+
 /**
  * Some users may have erroneously set their birth date to the current date
  * if one wasn't set on their account. We previously didn't do validation on
@@ -78,15 +86,11 @@ export function isLegacyBirthdateBug(birthDate: string) {
 }
 
 /**
- * Returns whether the user is under the minimum age required to use the app.
+ * Returns whether the date (converted to an age as a whole integer) is under
- * This applies to all regions.
+ * the provided minimum age.
  */
-export function isUserUnderMinimumAge(birthDate: string) {
+export function isUnderAge(birthDate: string, age: number) {
-  return getAge(new Date(birthDate)) < DEFAULT_MIN_AGE
+  return getAge(new Date(birthDate)) < age
-}
-
-export function isUserUnderAdultAge(birthDate: string) {
-  return getAge(new Date(birthDate)) < 18
 }
 
 export function getBirthdateStringFromAge(age: number) {

src/geolocation/debug.ts

@@ -5,14 +5,20 @@ import {type Geolocation} from '#/geolocation/types'
 const localEnabled = false
 export const enabled = IS_DEV && (localEnabled || aaDebug.geolocation)
 export const geolocation: Geolocation = aaDebug.geolocation ?? {
-  countryCode: 'AU',
+  countryCode: 'US',
-  regionCode: undefined,
+  regionCode: 'TX',
-}
-export const deviceGeolocation: Geolocation = aaDebug.deviceGeolocation ?? {
-  countryCode: 'AU',
-  regionCode: undefined,
 }
 
+const deviceLocalEnabled = false
+export const deviceGeolocation: Geolocation | undefined =
+  aaDebug.deviceGeolocation ||
+  (deviceLocalEnabled
+    ? {
+        countryCode: 'US',
+        regionCode: 'TX',
+      }
+    : undefined)
+
 export async function resolve<T>(data: T) {
   await new Promise(y => setTimeout(y, 500)) // simulate network
   return data

src/geolocation/device.ts

@@ -46,7 +46,8 @@ const useForegroundPermissions = createPermissionHook({
 })
 
 export async function getDeviceGeolocation(): Promise<Geolocation> {
-  if (debug.enabled) return debug.resolve(debug.deviceGeolocation)
+  if (debug.enabled && debug.deviceGeolocation)
+    return debug.resolve(debug.deviceGeolocation)
 
   try {
     const geocode = await Location.getCurrentPositionAsync()
@@ -142,3 +143,8 @@ export function useSyncDeviceGeolocationOnStartup(
     })
   }, [status, sync])
 }
+
+export function useIsDeviceGeolocationGranted() {
+  const [status] = useForegroundPermissions()
+  return status?.granted === true
+}

src/geolocation/index.tsx

@@ -12,7 +12,10 @@ import {type Geolocation} from '#/geolocation/types'
 import {mergeGeolocations} from '#/geolocation/util'
 import {device, useStorage} from '#/storage'
 
-export {useRequestDeviceGeolocation} from '#/geolocation/device'
+export {
+  useIsDeviceGeolocationGranted,
+  useRequestDeviceGeolocation,
+} from '#/geolocation/device'
 export {resolve} from '#/geolocation/service'
 export * from '#/geolocation/types'
 

src/screens/Signup/StepInfo/Policies.tsx

@@ -11,12 +11,8 @@ import {Text} from '#/components/Typography'
 
 export const Policies = ({
   serviceDescription,
-  needsGuardian,
-  under13,
 }: {
   serviceDescription: ComAtprotoServerDescribeServer.OutputSchema
-  needsGuardian: boolean
-  under13: boolean
 }) => {
   const t = useTheme()
   const {_} = useLingui()
@@ -91,30 +87,9 @@ export const Policies = ({
     return null
   }
 
-  return (
+  return els ? (
-    <View style={[a.gap_sm]}>
+    <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>{els}</Text>
-      {els ? (
+  ) : null
-        <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>
-          {els}
-        </Text>
-      ) : null}
-
-      {under13 ? (
-        <Admonition type="error">
-          <Trans>
-            You must be 13 years of age or older to create an account.
-          </Trans>
-        </Admonition>
-      ) : needsGuardian ? (
-        <Admonition type="warning">
-          <Trans>
-            If you are not yet an adult according to the laws of your country,
-            your parent or legal guardian must read these Terms on your behalf.
-          </Trans>
-        </Admonition>
-      ) : undefined}
-    </View>
-  )
 }
 
 function validWebLink(url?: string): string | undefined {

src/screens/Signup/StepInfo/index.tsx

@@ -7,9 +7,13 @@ import type tldts from 'tldts'
 
 import {isEmailMaybeInvalid} from '#/lib/strings/email'
 import {logger} from '#/logger'
-import {is13, is18, useSignupContext} from '#/screens/Signup/state'
+import {isNative} from '#/platform/detection'
+import {useSignupContext} from '#/screens/Signup/state'
 import {Policies} from '#/screens/Signup/StepInfo/Policies'
 import {atoms as a, native} from '#/alf'
+import * as Admonition from '#/components/Admonition'
+import * as Dialog from '#/components/Dialog'
+import {DeviceLocationRequestDialog} from '#/components/dialogs/DeviceLocationRequestDialog'
 import * as DateField from '#/components/forms/DateField'
 import {type DateFieldRef} from '#/components/forms/DateField/types'
 import {FormError} from '#/components/forms/FormError'
@@ -18,8 +22,19 @@ import * as TextField from '#/components/forms/TextField'
 import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
 import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock'
 import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket'
+import {createStaticClick, SimpleInlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import {usePreemptivelyCompleteActivePolicyUpdate} from '#/components/PolicyUpdateOverlay/usePreemptivelyCompleteActivePolicyUpdate'
+import * as Toast from '#/components/Toast'
+import {
+  isUserUnderAge,
+  MIN_ACCESS_AGE,
+  useAgeAssuranceRegionConfigWithFallback,
+} from '#/ageAssurance/util'
+import {
+  useDeviceGeolocationApi,
+  useIsDeviceGeolocationGranted,
+} from '#/geolocation'
 import {BackNextButtons} from '../BackNextButtons'
 
 function sanitizeDate(date: Date): Date {
@@ -57,6 +72,23 @@ export function StepInfo({
   const passwordInputRef = useRef<TextInput>(null)
   const birthdateInputRef = useRef<DateFieldRef>(null)
 
+  const aaRegionConfig = useAgeAssuranceRegionConfigWithFallback()
+  const {setDeviceGeolocation} = useDeviceGeolocationApi()
+  const locationControl = Dialog.useDialogControl()
+  const isOverRegionMinAccessAge = state.dateOfBirth
+    ? !isUserUnderAge(
+        state.dateOfBirth.toISOString(),
+        aaRegionConfig.minAccessAge,
+      )
+    : true
+  const isOverAppMinAccessAge = state.dateOfBirth
+    ? !isUserUnderAge(state.dateOfBirth.toISOString(), MIN_ACCESS_AGE)
+    : true
+  const isOverMinAdultAge = state.dateOfBirth
+    ? !isUserUnderAge(state.dateOfBirth.toISOString(), 18)
+    : true
+  const isDeviceGeolocationGranted = useIsDeviceGeolocationGranted()
+
   const [hasWarnedEmail, setHasWarnedEmail] = React.useState<boolean>(false)
 
   const tldtsRef = React.useRef<typeof tldts>(undefined)
@@ -76,7 +108,7 @@ export function StepInfo({
     const emailChanged = prevEmailValueRef.current !== email
     const password = passwordValueRef.current
 
-    if (!is13(state.dateOfBirth)) {
+    if (!isOverRegionMinAccessAge) {
       return
     }
 
@@ -274,16 +306,79 @@ export function StepInfo({
                 maximumDate={new Date()}
               />
             </View>
-            <Policies
+
-              serviceDescription={state.serviceDescription}
+            <View style={[a.gap_sm]}>
-              needsGuardian={!is18(state.dateOfBirth)}
+              <Policies serviceDescription={state.serviceDescription} />
-              under13={!is13(state.dateOfBirth)}
+
+              {!isOverRegionMinAccessAge || !isOverAppMinAccessAge ? (
+                <Admonition.Outer type="error">
+                  <Admonition.Row>
+                    <Admonition.Icon />
+                    <Admonition.Content>
+                      <Admonition.Text>
+                        {!isOverAppMinAccessAge ? (
+                          <Trans>
+                            You must be {MIN_ACCESS_AGE} years of age or older
+                            to create an account.
+                          </Trans>
+                        ) : (
+                          <Trans>
+                            You must be {aaRegionConfig.minAccessAge} years of
+                            age or older to create an account in your region.
+                          </Trans>
+                        )}
+                      </Admonition.Text>
+                      {isNative &&
+                        !isDeviceGeolocationGranted &&
+                        isOverAppMinAccessAge && (
+                          <Admonition.Text>
+                            <Trans>
+                              Have we got your location wrong?{' '}
+                              <SimpleInlineLinkText
+                                label={_(
+                                  msg`Tap here to confirm your location with GPS.`,
+                                )}
+                                {...createStaticClick(() => {
+                                  locationControl.open()
+                                })}>
+                                Tap here to confirm your location with GPS.
+                              </SimpleInlineLinkText>
+                            </Trans>
+                          </Admonition.Text>
+                        )}
+                    </Admonition.Content>
+                  </Admonition.Row>
+                </Admonition.Outer>
+              ) : !isOverMinAdultAge ? (
+                <Admonition.Admonition type="warning">
+                  <Trans>
+                    If you are not yet an adult according to the laws of your
+                    country, your parent or legal guardian must read these Terms
+                    on your behalf.
+                  </Trans>
+                </Admonition.Admonition>
+              ) : undefined}
+            </View>
+
+            {isNative && (
+              <DeviceLocationRequestDialog
+                control={locationControl}
+                onLocationAcquired={props => {
+                  props.closeDialog(() => {
+                    // set this after close!
+                    setDeviceGeolocation(props.geolocation)
+                    Toast.show(_(msg`Your location has been updated.`), {
+                      type: 'success',
+                    })
+                  })
+                }}
               />
+            )}
           </>
         ) : undefined}
       </View>
       <BackNextButtons
-        hideNext={!is13(state.dateOfBirth)}
+        hideNext={!isOverRegionMinAccessAge}
         showRetry={isServerError}
         isLoading={state.isLoading}
         onBackPress={onPressBack}