Add handling for birthdate prefs write failure (#9508)

(cherry picked from commit a0c4a6b307)

src/components/dialogs/BirthDateSettings.tsx

@@ -3,7 +3,7 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {cleanError} from '#/lib/strings/errors'
+import {useCleanError} from '#/lib/hooks/useCleanError'
 import {getAge, getDateAgo} from '#/lib/strings/time'
 import {logger} from '#/logger'
 import {isIOS, isWeb} from '#/platform/detection'
@@ -110,16 +110,18 @@ function BirthdayInner({
   preferences: UsePreferencesQueryResponse
 }) {
   const {_} = useLingui()
+  const cleanError = useCleanError()
   const [date, setDate] = React.useState(
     preferences.birthDate || getDateAgo(18),
   )
-  const {
+  const {isPending, error, mutateAsync: setBirthDate} = useBirthdateMutation()
-    isPending,
-    isError,
-    error,
-    mutateAsync: setBirthDate,
-  } = useBirthdateMutation()
   const hasChanged = date !== preferences.birthDate
+  const errorMessage = React.useMemo(() => {
+    if (error) {
+      const {raw, clean} = cleanError(error)
+      return clean || raw || error.toString()
+    }
+  }, [error, cleanError])
 
   const age = getAge(new Date(date))
   const isUnder13 = age < 13
@@ -172,8 +174,8 @@ function BirthdayInner({
         </Admonition>
       )}
 
-      {isError ? (
+      {errorMessage ? (
-        <ErrorMessage message={cleanError(error)} style={[a.rounded_sm]} />
+        <ErrorMessage message={errorMessage} style={[a.rounded_sm]} />
       ) : undefined}
 
       <View style={isWeb && [a.flex_row, a.justify_end]}>

src/lib/hooks/useCleanError.ts

@@ -42,6 +42,21 @@ export function useCleanError() {
         }
       }
 
+      /**
+       * @see https://github.com/bluesky-social/atproto/blob/255cfcebb54332a7129af768a93004e22c6858e3/packages/pds/src/actor-store/preference/transactor.ts#L24
+       */
+      if (
+        raw.includes('Do not have authorization to set preferences') &&
+        raw.includes('app.bsky.actor.defs#personalDetailsPref')
+      ) {
+        return {
+          raw,
+          clean: _(
+            msg`You cannot update your birthdate while using an app password. Please sign in with your main password to update your birthdate.`,
+          ),
+        }
+      }
+
       if (raw.includes('Bad token scope') || raw.includes('Bad token method')) {
         return {
           raw,

src/lib/strings/errors.ts

@@ -18,6 +18,15 @@ export function cleanError(str: any): string {
   ) {
     return t`The server appears to be experiencing issues. Please try again in a few moments.`
   }
+  /**
+   * @see https://github.com/bluesky-social/atproto/blob/255cfcebb54332a7129af768a93004e22c6858e3/packages/pds/src/actor-store/preference/transactor.ts#L24
+   */
+  if (
+    str.includes('Do not have authorization to set preferences') &&
+    str.includes('app.bsky.actor.defs#personalDetailsPref')
+  ) {
+    return t`You cannot update your birthdate while using an app password. Please sign in with your main password to update your birthdate.`
+  }
   if (str.includes('Bad token scope') || str.includes('Bad token method')) {
     return t`This feature is not available while using an App Password. Please sign in with your main password.`
   }