Improve instructions on NoAccessScreen and bday dialog (#9571)

src/ageAssurance/components/NoAccessScreen.tsx

@@ -9,12 +9,11 @@ import {
   useCreateSupportLink,
 } from '#/lib/hooks/useCreateSupportLink'
 import {dateDiff, useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
-import {isAppPassword} from '#/lib/jwt'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
 import {isNative} from '#/platform/detection'
 import {useIsBirthdateUpdateAllowed} from '#/state/birthdate'
-import {useSession, useSessionApi} from '#/state/session'
+import {useSessionApi} from '#/state/session'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog'
@@ -30,7 +29,7 @@ import {ShieldCheck_Stroke2_Corner0_Rounded as ShieldIcon} from '#/components/ic
 import {createStaticClick, SimpleInlineLinkText} from '#/components/Link'
 import {Outlet as PortalOutlet} from '#/components/Portal'
 import * as Toast from '#/components/Toast'
-import {Span, Text} from '#/components/Typography'
+import {Text} from '#/components/Typography'
 import {BottomSheetOutlet} from '#/../modules/bottom-sheet'
 import {useAgeAssurance} from '#/ageAssurance'
 import {useAgeAssuranceDataContext} from '#/ageAssurance/data'
@@ -55,9 +54,6 @@ export function NoAccessScreen() {
   const {logoutCurrentAccount} = useSessionApi()
   const createSupportLink = useCreateSupportLink()
 
-  const {currentAccount} = useSession()
-  const isUsingAppPassword = isAppPassword(currentAccount?.accessJwt || '')
-
   const aa = useAgeAssurance()
   const isBlocked = aa.state.status === aa.Status.Blocked
   const isAARegion = !!region
@@ -89,22 +85,38 @@ export function NoAccessScreen() {
     logoutCurrentAccount('AgeAssuranceNoAccessScreen')
   }, [logoutCurrentAccount])
 
-  const birthdateUpdateText = canUpdateBirthday ? (
+  const orgAdmonition = (
-    <Text style={[textStyles]}>
+    <Admonition type="tip">
       <Trans>
-        If you believe your birthdate is incorrect, you can update it by{' '}
+        For organizational accounts, use the birthdate of the person who is
-        <SimpleInlineLinkText
+        responsible for the account.
-          label={_(msg`Click here to update your birthdate`)}
-          style={[textStyles]}
-          {...createStaticClick(() => {
-            logger.metric('ageAssurance:noAccessScreen:openBirthdateDialog', {})
-            birthdateControl.open()
-          })}>
-          clicking here
-        </SimpleInlineLinkText>
-        .
       </Trans>
-    </Text>
+    </Admonition>
+  )
+
+  const birthdateUpdateText = canUpdateBirthday ? (
+    <>
+      <Text style={[textStyles]}>
+        <Trans>
+          If you believe your birthdate is incorrect, you can update it by{' '}
+          <SimpleInlineLinkText
+            label={_(msg`Click here to update your birthdate`)}
+            style={[textStyles]}
+            {...createStaticClick(() => {
+              logger.metric(
+                'ageAssurance:noAccessScreen:openBirthdateDialog',
+                {},
+              )
+              birthdateControl.open()
+            })}>
+            clicking here
+          </SimpleInlineLinkText>
+          .
+        </Trans>
+      </Text>
+
+      {orgAdmonition}
+    </>
   ) : (
     <Text style={[textStyles]}>
       <Trans>
@@ -120,15 +132,6 @@ export function NoAccessScreen() {
     </Text>
   )
 
-  const orgAdmonition = (
-    <Admonition type="tip">
-      <Trans>
-        For organizational accounts, use the birthdate of the person who is
-        responsible for the account.
-      </Trans>
-    </Admonition>
-  )
-
   return (
     <>
       <View style={[a.util_screen_outer, a.flex_1]}>
@@ -175,8 +178,6 @@ export function NoAccessScreen() {
                       </Text>
 
                       {!isBlocked && birthdateUpdateText}
-
-                      {orgAdmonition}
                     </View>
 
                     <AccessSection />
@@ -191,8 +192,6 @@ export function NoAccessScreen() {
                     </Text>
 
                     {birthdateUpdateText}
-
-                    {orgAdmonition}
                   </View>
                 )}
               </>
@@ -224,18 +223,7 @@ export function NoAccessScreen() {
                   </ButtonText>
                 </Button>
 
-                {isUsingAppPassword ? (
+                {orgAdmonition}
-                  <Admonition type="info">
-                    <Trans>
-                      Hmm, it looks like you're logged in with an{' '}
-                      <Span style={[a.italic]}>App Password</Span>. To set your
-                      birthdate, you'll need to log in with your main account
-                      password, or ask whomever controls this account to do so.
-                    </Trans>
-                  </Admonition>
-                ) : (
-                  orgAdmonition
-                )}
               </View>
             )}
 

src/components/dialogs/BirthDateSettings.tsx

@@ -4,6 +4,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useCleanError} from '#/lib/hooks/useCleanError'
+import {isAppPassword} from '#/lib/jwt'
 import {getAge, getDateAgo} from '#/lib/strings/time'
 import {logger} from '#/logger'
 import {isIOS, isWeb} from '#/platform/detection'
@@ -15,6 +16,7 @@ import {
   usePreferencesQuery,
   type UsePreferencesQueryResponse,
 } from '#/state/queries/preferences'
+import {useSession} from '#/state/session'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {atoms as a, useTheme, web} from '#/alf'
 import {Admonition} from '#/components/Admonition'
@@ -23,7 +25,7 @@ import * as Dialog from '#/components/Dialog'
 import {DateField} from '#/components/forms/DateField'
 import {SimpleInlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
-import {Text} from '#/components/Typography'
+import {Span, Text} from '#/components/Typography'
 
 export function BirthDateSettingsDialog({
   control,
@@ -34,6 +36,8 @@ export function BirthDateSettingsDialog({
   const {_} = useLingui()
   const {isLoading, error, data: preferences} = usePreferencesQuery()
   const isBirthdateUpdateAllowed = useIsBirthdateUpdateAllowed()
+  const {currentAccount} = useSession()
+  const isUsingAppPassword = isAppPassword(currentAccount?.accessJwt || '')
 
   return (
     <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
@@ -65,6 +69,15 @@ export function BirthDateSettingsDialog({
                 }
                 style={[a.rounded_sm]}
               />
+            ) : isUsingAppPassword ? (
+              <Admonition type="info">
+                <Trans>
+                  Hmm, it looks like you're logged in with an{' '}
+                  <Span style={[a.italic]}>App Password</Span>. To set your
+                  birthdate, you'll need to log in with your main account
+                  password, or ask whomever controls this account to do so.
+                </Trans>
+              </Admonition>
             ) : (
               <BirthdayInner control={control} preferences={preferences} />
             )}