Update birthday setting dialog (#8910)

* update birthday setting dialog

* Update src/components/dialogs/BirthDateSettings.tsx

Co-authored-by: Eric Bailey <git@esb.lol>

---------

Co-authored-by: Eric Bailey <git@esb.lol>

1 files changed, 63 insertions, 28 deletions

diff --git a/src/components/dialogs/BirthDateSettings.tsx b/src/components/dialogs/BirthDateSettings.tsx
index fecfc43bc..0b8dfb540 100644
--- a/src/components/dialogs/BirthDateSettings.tsx
+++ b/src/components/dialogs/BirthDateSettings.tsx
@@ -4,21 +4,23 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {cleanError} from '#/lib/strings/errors'
-import {getDateAgo} from '#/lib/strings/time'
+import {getAge, getDateAgo} from '#/lib/strings/time'
 import {logger} from '#/logger'
 import {isIOS, isWeb} from '#/platform/detection'
 import {
   usePreferencesQuery,
-  UsePreferencesQueryResponse,
+  type UsePreferencesQueryResponse,
   usePreferencesSetBirthDateMutation,
 } from '#/state/queries/preferences'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
+import {Admonition} from '#/components/Admonition'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DateField} from '#/components/forms/DateField'
+import {InlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
-import {Button, ButtonIcon, ButtonText} from '../Button'
 
 export function BirthDateSettingsDialog({
   control,
@@ -32,31 +34,35 @@ export function BirthDateSettingsDialog({
   return (
     <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
-      <Dialog.ScrollableInner label={_(msg`My Birthday`)}>
-        <View style={[a.gap_sm, a.pb_lg]}>
-          <Text style={[a.text_2xl, a.font_bold]}>
+      <Dialog.ScrollableInner
+        label={_(msg`My Birthday`)}
+        style={web({maxWidth: 400})}>
+        <View style={[a.gap_sm]}>
+          <Text style={[a.text_xl, a.font_bold]}>
             <Trans>My Birthday</Trans>
           </Text>
-          <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
-            <Trans>This information is not shared with other users.</Trans>
+          <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>
+            <Trans>
+              This information is private and not shared with other users.
+            </Trans>
           </Text>
-        </View>
 
-        {isLoading ? (
-          <Loader size="xl" />
-        ) : error || !preferences ? (
-          <ErrorMessage
-            message={
-              error?.toString() ||
-              _(
-                msg`We were unable to load your birth date preferences. Please try again.`,
-              )
-            }
-            style={[a.rounded_sm]}
-          />
-        ) : (
-          <BirthdayInner control={control} preferences={preferences} />
-        )}
+          {isLoading ? (
+            <Loader size="xl" />
+          ) : error || !preferences ? (
+            <ErrorMessage
+              message={
+                error?.toString() ||
+                _(
+                  msg`We were unable to load your birth date preferences. Please try again.`,
+                )
+              }
+              style={[a.rounded_sm]}
+            />
+          ) : (
+            <BirthdayInner control={control} preferences={preferences} />
+          )}
+        </View>
 
         <Dialog.Close />
       </Dialog.ScrollableInner>
@@ -72,7 +78,9 @@ function BirthdayInner({
   preferences: UsePreferencesQueryResponse
 }) {
   const {_} = useLingui()
-  const [date, setDate] = React.useState(preferences.birthDate || new Date())
+  const [date, setDate] = React.useState(
+    preferences.birthDate || getDateAgo(18),
+  )
   const {
     isPending,
     isError,
@@ -81,6 +89,10 @@ function BirthdayInner({
   } = usePreferencesSetBirthDateMutation()
   const hasChanged = date !== preferences.birthDate
 
+  const age = getAge(new Date(date))
+  const isUnder13 = age < 13
+  const isUnder18 = age >= 13 && age < 18
+
   const onSave = React.useCallback(async () => {
     try {
       // skip if date is the same
@@ -102,10 +114,32 @@ function BirthdayInner({
           onChangeDate={newDate => setDate(new Date(newDate))}
           label={_(msg`Birthday`)}
           accessibilityHint={_(msg`Enter your birth date`)}
-          maximumDate={getDateAgo(13)}
         />
       </View>
 
+      {isUnder18 && hasChanged && (
+        <Admonition type="info">
+          <Trans>
+            The birthdate you've entered means you are under 18 years old.
+            Certain content and features may be unavailable to you.
+          </Trans>
+        </Admonition>
+      )}
+
+      {isUnder13 && (
+        <Admonition type="error">
+          <Trans>
+            You must be at least 13 years old to use Bluesky. Read our{' '}
+            <InlineLinkText
+              to="https://bsky.social/about/support/tos"
+              label={_(msg`Terms of Service`)}>
+              Terms of Service
+            </InlineLinkText>{' '}
+            for more information.
+          </Trans>
+        </Admonition>
+      )}
+
       {isError ? (
         <ErrorMessage message={cleanError(error)} style={[a.rounded_sm]} />
       ) : undefined}
@@ -116,7 +150,8 @@ function BirthdayInner({
           size="large"
           onPress={onSave}
           variant="solid"
-          color="primary">
+          color="primary"
+          disabled={isUnder13}>
           <ButtonText>
             {hasChanged ? <Trans>Save</Trans> : <Trans>Done</Trans>}
           </ButtonText>