Provide age-restricted viewers the option to delete their account (#10041)

src/ageAssurance/components/NoAccessScreen.tsx

@@ -12,6 +12,8 @@ import {
 import {dateDiff, useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
 import {useIsBirthdateUpdateAllowed} from '#/state/birthdate'
 import {useSessionApi} from '#/state/session'
+import {DeactivateAccountDialog} from '#/screens/Settings/components/DeactivateAccountDialog'
+import {DeleteAccountDialog} from '#/screens/Settings/components/DeleteAccountDialog'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog'
@@ -49,6 +51,8 @@ export function NoAccessScreen() {
   const {gtPhone} = useBreakpoints()
   const insets = useSafeAreaInsets()
   const birthdateControl = useDialogControl()
+  const deactivateAccountControl = useDialogControl()
+  const deleteAccountControl = useDialogControl()
   const {data} = useAgeAssuranceDataContext()
   const region = useAgeAssuranceRegionConfig()
   const isBirthdateUpdateAllowed = useIsBirthdateUpdateAllowed()
@@ -71,6 +75,7 @@ export function NoAccessScreen() {
       hasDeclaredAge,
       canUpdateBirthday,
     })
+    // TODO This can be cleaned up with useEffectEvent once we're on 19.2
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
@@ -234,18 +239,38 @@ export function NoAccessScreen() {
               </View>
             )}
 
-            <View style={[a.pt_lg, a.gap_xl]}>
+            <View style={[a.pt_lg, a.gap_xl, {maxWidth: 280}]}>
               <Logo width={120} textFill={t.atoms.text.color} />
-              <Text style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]}>
+              <Text
+                style={[
+                  a.text_sm,
+                  a.italic,
+                  a.leading_snug,
+                  t.atoms.text_contrast_medium,
+                ]}>
                 <Trans>
                   To log out,{' '}
                   <SimpleInlineLinkText
                     label={_(msg`Click here to log out`)}
                     {...createStaticClick(() => {
                       onPressLogout()
-                    })}>
+                    })}
+                    style={[a.italic]}>
                     click here
                   </SimpleInlineLinkText>
+                  . Or if you’d prefer, you can{' '}
+                  <SimpleInlineLinkText
+                    label={_(msg`Click here to delete your account`)}
+                    {...createStaticClick(() => {
+                      ax.metric(
+                        'ageAssurance:noAccessScreen:openDeleteAccountDialog',
+                        {},
+                      )
+                      deleteAccountControl.open()
+                    })}
+                    style={[a.italic]}>
+                    delete your account
+                  </SimpleInlineLinkText>
                   .
                 </Trans>
               </Text>
@@ -255,6 +280,11 @@ export function NoAccessScreen() {
       </View>
 
       <BirthDateSettingsDialog control={birthdateControl} />
+      <DeactivateAccountDialog control={deactivateAccountControl} />
+      <DeleteAccountDialog
+        control={deleteAccountControl}
+        deactivateDialogControl={deactivateAccountControl}
+      />
 
       {/*
        * While this blocking overlay is up, other dialogs in the shell

src/analytics/metrics/types.ts

@@ -847,6 +847,7 @@ export type Events = {
     canUpdateBirthday: boolean
   }
   'ageAssurance:noAccessScreen:openBirthdateDialog': {}
+  'ageAssurance:noAccessScreen:openDeleteAccountDialog': {}
 
   /*
    * Specifically for the `BlockedGeoOverlay`

src/state/birthdate.ts

@@ -43,6 +43,7 @@ export function useIsBirthdateUpdateAllowed() {
     ])
     if (!lastUpdated) return true
     const lastUpdatedDate = new Date(lastUpdated)
+    // eslint-disable-next-line react-hooks/purity
     const diffMs = Date.now() - lastUpdatedDate.getTime()
     const diffHours = diffMs / (1000 * 60 * 60)
     return diffHours >= BIRTHDATE_DELAY_HOURS
@@ -66,7 +67,7 @@ export function useBirthdateMutation() {
        * Also patch the age assurance other required data with the new
        * birthdate, which may change the user's age assurance access level.
        */
-      patchOtherRequiredData({birthdate: bday})
+      void patchOtherRequiredData({birthdate: bday})
       snoozeBirthdateUpdateAllowedForDid(agent.sessionManager.did!)
     },
   })