Include a notice during account creation for under-18 users (#927)

src/state/models/ui/create-account.ts

@@ -31,13 +31,21 @@ export class CreateAccountModel {
     makeAutoObservable(this, {}, {autoBind: true})
   }
 
+  get isAge13() {
+    return getAge(this.birthDate) >= 13
+  }
+
+  get isAge18() {
+    return getAge(this.birthDate) >= 18
+  }
+
   // form state controls
   // =
 
   next() {
     this.error = ''
     if (this.step === 2) {
-      if (getAge(this.birthDate) < 13) {
+      if (!this.isAge13) {
         this.error =
           'Unfortunately, you do not meet the requirements to create an account.'
         return

src/view/com/auth/create/Policies.tsx

@@ -12,8 +12,10 @@ import {usePalette} from 'lib/hooks/usePalette'
 
 export const Policies = ({
   serviceDescription,
+  needsGuardian,
 }: {
   serviceDescription: ServiceDescription
+  needsGuardian: boolean
 }) => {
   const pal = usePalette('default')
   if (!serviceDescription) {
@@ -73,6 +75,12 @@ export const Policies = ({
       <Text style={pal.textLight}>
         By creating an account you agree to the {els}.
       </Text>
+      {needsGuardian && (
+        <Text style={[pal.textLight, s.bold]}>
+          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.
+        </Text>
+      )}
     </View>
   )
 }
@@ -85,8 +93,7 @@ function validWebLink(url?: string): string | undefined {
 
 const styles = StyleSheet.create({
   policies: {
-    flexDirection: 'row',
+    gap: 8,
-    alignItems: 'flex-start',
   },
   errorIcon: {
     borderWidth: 1,

src/view/com/auth/create/Step2.tsx

@@ -116,7 +116,10 @@ export const Step2 = observer(({model}: {model: CreateAccountModel}) => {
           </View>
 
           {model.serviceDescription && (
-            <Policies serviceDescription={model.serviceDescription} />
+            <Policies
+              serviceDescription={model.serviceDescription}
+              needsGuardian={!model.isAge18}
+            />
           )}
         </>
       )}