[AAv2] Improve minimum age handling (#9650)

* Improve miminum age handling

* Update api sdk

* Fix bad import

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 (
-    <View style={[a.gap_sm]}>
-      {els ? (
-        <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>
-  )
+  return els ? (
+    <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>{els}</Text>
+  ) : null
 }
 
 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 {
+  isUnderAge,
+  MIN_ACCESS_AGE,
+  useAgeAssuranceRegionConfigWithFallback,
+} from '#/ageAssurance/util'
+import {
+  useDeviceGeolocationApi,
+  useIsDeviceGeolocationGranted,
+} from '#/geolocation'
 import {BackNextButtons} from '../BackNextButtons'
 
 function sanitizeDate(date: Date): Date {
@@ -57,6 +72,20 @@ 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
+    ? !isUnderAge(state.dateOfBirth.toISOString(), aaRegionConfig.minAccessAge)
+    : true
+  const isOverAppMinAccessAge = state.dateOfBirth
+    ? !isUnderAge(state.dateOfBirth.toISOString(), MIN_ACCESS_AGE)
+    : true
+  const isOverMinAdultAge = state.dateOfBirth
+    ? !isUnderAge(state.dateOfBirth.toISOString(), 18)
+    : true
+  const isDeviceGeolocationGranted = useIsDeviceGeolocationGranted()
+
   const [hasWarnedEmail, setHasWarnedEmail] = React.useState<boolean>(false)
 
   const tldtsRef = React.useRef<typeof tldts>(undefined)
@@ -76,7 +105,7 @@ export function StepInfo({
     const emailChanged = prevEmailValueRef.current !== email
     const password = passwordValueRef.current
 
-    if (!is13(state.dateOfBirth)) {
+    if (!isOverRegionMinAccessAge) {
       return
     }
 
@@ -274,16 +303,79 @@ export function StepInfo({
                 maximumDate={new Date()}
               />
             </View>
-            <Policies
-              serviceDescription={state.serviceDescription}
-              needsGuardian={!is18(state.dateOfBirth)}
-              under13={!is13(state.dateOfBirth)}
-            />
+
+            <View style={[a.gap_sm]}>
+              <Policies serviceDescription={state.serviceDescription} />
+
+              {!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}