Align copy, add notice to chat screens

src/components/ageAssurance/AgeAssuranceAccountCard.tsx

@@ -13,6 +13,7 @@ import {
   useDialogControl,
 } from '#/components/ageAssurance/AgeAssuranceInitDialog'
 import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
+import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {createStaticClick, InlineLinkText} from '#/components/Link'
@@ -35,6 +36,7 @@ function Inner({style}: ViewStyleProp & {}) {
   const appealControl = Dialog.useDialogControl()
   const getTimeAgo = useGetTimeAgo()
   const {gtPhone} = useBreakpoints()
+  const copy = useAgeAssuranceCopy()
 
   const isBlocked = status === 'blocked'
   const timeAgo = lastInitiatedAt
@@ -105,13 +107,7 @@ function Inner({style}: ViewStyleProp & {}) {
               a.align_start,
               gtPhone ? [a.flex_row, a.gap_xl] : [a.gap_md],
             ]}>
-            <Text style={[a.text_sm, a.leading_snug]}>
+            <Text style={[a.text_sm, a.leading_snug]}>{copy.notice}</Text>
-              <Trans>
-                The laws in your location require that you verify your age
-                before accessing certain features on Bluesky like adult content
-                and direct messaging.
-              </Trans>
-            </Text>
 
             {!isBlocked && (
               <Button

src/components/ageAssurance/AgeAssurancePrompt.tsx

@@ -11,6 +11,7 @@ import {
   useDialogControl,
 } from '#/components/ageAssurance/AgeAssuranceInitDialog'
 import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
+import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import type * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
@@ -40,6 +41,7 @@ function Inner({
 }: ViewStyleProp & {control: Dialog.DialogControlProps}) {
   const t = useTheme()
   const {_} = useLingui()
+  const copy = useAgeAssuranceCopy()
   const {mutate: save} = useSaveNux()
 
   return (
@@ -66,13 +68,7 @@ function Inner({
           <View style={[a.align_start, a.pb_md]}>
             <AgeAssuranceBadge />
           </View>
-          <Text style={[a.text_md, a.leading_snug]}>
+          <Text style={[a.text_md, a.leading_snug]}>{copy.notice}</Text>
-            <Trans>
-              The laws in your location require that you verify your age before
-              accessing certain features on Bluesky like adult content and
-              direct messaging.
-            </Trans>
-          </Text>
 
           <Divider
             style={[
@@ -107,7 +103,7 @@ function Inner({
                   }),
                 },
               ]}>
-              <Trans>Age verification takes only a few minutes</Trans>
+              {copy.noticeSub}
             </Text>
 
             <Button

src/components/ageAssurance/AgeRestrictedScreen.tsx

@@ -4,12 +4,14 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, select, useTheme} from '#/alf'
+import {Admonition} from '#/components/Admonition'
 import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
 import {
   AgeAssuranceInitDialog,
   useDialogControl,
 } from '#/components/ageAssurance/AgeAssuranceInitDialog'
 import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
+import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Button, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import * as Layout from '#/components/Layout'
@@ -19,13 +21,16 @@ export function AgeRestrictedScreen({
   children,
   fallback,
   screenTitle,
+  infoText,
 }: {
   children: React.ReactNode
   fallback?: React.ReactNode
   screenTitle?: string
+  infoText?: string
 }) {
   const t = useTheme()
   const {_} = useLingui()
+  const copy = useAgeAssuranceCopy()
   const control = useDialogControl()
   const screenFallback = useMemo(() => {
     return (
@@ -57,7 +62,7 @@ export function AgeRestrictedScreen({
             <Layout.Header.Slot />
           </Layout.Header.Outer>
           <Layout.Content>
-            <View style={[a.p_lg]}>
+            <View style={[a.p_lg, a.gap_lg]}>
               <View
                 style={[
                   a.p_lg,
@@ -83,11 +88,7 @@ export function AgeRestrictedScreen({
                 </View>
 
                 <Text style={[a.text_md, a.leading_snug, a.pb_sm]}>
-                  <Trans>
+                  <Trans>{copy.notice}</Trans>
-                    The laws in your location require that you verify your age
-                    before accessing certain features on Bluesky like adult
-                    content and direct messaging.
-                  </Trans>
                 </Text>
 
                 <Text style={[a.text_md, a.leading_snug]}>
@@ -116,7 +117,7 @@ export function AgeRestrictedScreen({
                         }),
                       },
                     ]}>
-                    <Trans>Age verification takes only a few minutes</Trans>
+                    {copy.noticeSub}
                   </Text>
 
                   <Button
@@ -131,6 +132,8 @@ export function AgeRestrictedScreen({
                   </Button>
                 </View>
               </View>
+
+              {infoText && <Admonition type="info">{infoText}</Admonition>}
             </View>
           </Layout.Content>
         </Layout.Screen>

src/components/ageAssurance/useAgeAssuranceCopy.ts

@@ -0,0 +1,19 @@
+import {useMemo} from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+export function useAgeAssuranceCopy() {
+  const {_} = useLingui()
+
+  return useMemo(() => {
+    return {
+      notice: _(
+        msg`The laws in your location require that you verify your age before accessing certain features on Bluesky like adult content and direct messaging.`,
+      ),
+      noticeSub: _(msg`Age verification takes only a few minutes`),
+      chatsInfoText: _(
+        msg`Don't worry! All existing messages and settings are saved and will be available after you complete age verification.`,
+      ),
+    }
+  }, [_])
+}

src/screens/Messages/ChatList.tsx

@@ -24,6 +24,7 @@ import {List, type ListRef} from '#/view/com/util/List'
 import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
+import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {type DialogControlProps, useDialogControl} from '#/components/Dialog'
 import {NewChat} from '#/components/dms/dialogs/NewChatDialog'
@@ -68,8 +69,12 @@ type Props = NativeStackScreenProps<MessagesTabNavigatorParams, 'Messages'>
 
 export function MessagesScreen(props: Props) {
   const {_} = useLingui()
+  const aaCopy = useAgeAssuranceCopy()
+
   return (
-    <AgeRestrictedScreen screenTitle={_(msg`Chats`)}>
+    <AgeRestrictedScreen
+      screenTitle={_(msg`Chats`)}
+      infoText={aaCopy.chatsInfoText}>
       <MessagesScreenInner {...props} />
     </AgeRestrictedScreen>
   )

src/screens/Messages/Conversation.tsx

@@ -33,6 +33,7 @@ import {useSetMinimalShellMode} from '#/state/shell'
 import {MessagesList} from '#/screens/Messages/components/MessagesList'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
+import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {
   EmailDialogScreenID,
   useEmailDialogControl,
@@ -50,8 +51,11 @@ type Props = NativeStackScreenProps<
 
 export function MessagesConversationScreen(props: Props) {
   const {_} = useLingui()
+  const aaCopy = useAgeAssuranceCopy()
   return (
-    <AgeRestrictedScreen screenTitle={_(msg`Conversation`)}>
+    <AgeRestrictedScreen
+      screenTitle={_(msg`Conversation`)}
+      infoText={aaCopy.chatsInfoText}>
       <MessagesConversationScreenInner {...props} />
     </AgeRestrictedScreen>
   )

src/screens/Messages/Inbox.tsx

@@ -33,6 +33,7 @@ import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
+import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus'
 import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/icons/Arrow'
@@ -49,8 +50,11 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'MessagesInbox'>
 
 export function MessagesInboxScreen(props: Props) {
   const {_} = useLingui()
+  const aaCopy = useAgeAssuranceCopy()
   return (
-    <AgeRestrictedScreen screenTitle={_(msg`Chat requests`)}>
+    <AgeRestrictedScreen
+      screenTitle={_(msg`Chat requests`)}
+      infoText={aaCopy.chatsInfoText}>
       <MessagesInboxScreenInner {...props} />
     </AgeRestrictedScreen>
   )

src/screens/Messages/Settings.tsx

@@ -13,6 +13,7 @@ import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
+import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
 import * as Layout from '#/components/Layout'
@@ -25,8 +26,12 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'MessagesSettings'>
 
 export function MessagesSettingsScreen(props: Props) {
   const {_} = useLingui()
+  const aaCopy = useAgeAssuranceCopy()
+
   return (
-    <AgeRestrictedScreen screenTitle={_(msg`Chat Settings`)}>
+    <AgeRestrictedScreen
+      screenTitle={_(msg`Chat Settings`)}
+      infoText={aaCopy.chatsInfoText}>
       <MessagesSettingsScreenInner {...props} />
     </AgeRestrictedScreen>
   )