[🙅] Integrate deactivate (#4308)

* Update types

(cherry picked from commit 27deac1f367825771ba76fa098ec1b0a62dcf64a)

* Integrate into deactivate dialog

(cherry picked from commit 84f299a447259cc1fbfc7be607e28197779e4ec1)

* Integrate into Deactivated screen

(cherry picked from commit 29193f34822ecdf11e2a407197fa230285dfe846)

* Bump api sdk

(cherry picked from commit 738c622d3e5a23bfbb0d3bdce3a6bdf01e54ca60)

* Update permalink

(cherry picked from commit c10bf5c071d76c3054bc4ce9d313c10b1820f038)

* Bump sdk pkg

* Update types to match backend

* Loosen types for forwards compat

* Hydrate status from persisted data

* Refresh session when re-activating, clear query cache

* Show app password error

* Refactor dialog to clear state when closed

* Add app password error to Deactivated screen

src/screens/Deactivated.tsx

@@ -4,18 +4,27 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
+import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
-import {type SessionAccount, useSession, useSessionApi} from '#/state/session'
+import {
+  type SessionAccount,
+  useAgent,
+  useSession,
+  useSessionApi,
+} from '#/state/session'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {ScrollView} from '#/view/com/util/Views'
 import {Logo} from '#/view/icons/Logo'
 import {atoms as a, useTheme} from '#/alf'
 import {AccountList} from '#/components/AccountList'
-import {Button, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 
 const COL_WIDTH = 400
@@ -30,6 +39,10 @@ export function Deactivated() {
   const hasOtherAccounts = accounts.length > 1
   const setMinimalShellMode = useSetMinimalShellMode()
   const {logout} = useSessionApi()
+  const agent = useAgent()
+  const [pending, setPending] = React.useState(false)
+  const [error, setError] = React.useState<string | undefined>()
+  const queryClient = useQueryClient()
 
   useFocusEffect(
     React.useCallback(() => {
@@ -62,6 +75,34 @@ export function Deactivated() {
     logout('Deactivated')
   }, [logout])
 
+  const handleActivate = React.useCallback(async () => {
+    try {
+      setPending(true)
+      await agent.com.atproto.server.activateAccount()
+      await queryClient.resetQueries()
+      await agent.resumeSession(agent.session!)
+    } catch (e: any) {
+      switch (e.message) {
+        case 'Bad token scope':
+          setError(
+            _(
+              msg`You're logged in with an App Password. Please log in with your main password to continue deactivating your account.`,
+            ),
+          )
+          break
+        default:
+          setError(_(msg`Something went wrong, please try again`))
+          break
+      }
+
+      logger.error(e, {
+        context: 'Failed to activate account',
+      })
+    } finally {
+      setPending(false)
+    }
+  }, [_, agent, setPending, setError, queryClient])
+
   return (
     <View style={[a.h_full_vh, a.flex_1, t.atoms.bg]}>
       <ScrollView
@@ -104,10 +145,11 @@ export function Deactivated() {
                     size="medium"
                     variant="solid"
                     color="primary"
-                    onPress={() => setShowLoggedOut(true)}>
+                    onPress={handleActivate}>
                     <ButtonText>
                       <Trans>Yes, reactivate my account</Trans>
                     </ButtonText>
+                    {pending && <ButtonIcon icon={Loader} position="right" />}
                   </Button>
                   <Button
                     label={_(msg`Cancel reactivation and log out`)}
@@ -120,6 +162,21 @@ export function Deactivated() {
                     </ButtonText>
                   </Button>
                 </View>
+
+                {error && (
+                  <View
+                    style={[
+                      a.flex_row,
+                      a.gap_sm,
+                      a.mt_md,
+                      a.p_md,
+                      a.rounded_sm,
+                      t.atoms.bg_contrast_25,
+                    ]}>
+                    <CircleInfo size="md" fill={t.palette.negative_400} />
+                    <Text style={[a.flex_1, a.leading_snug]}>{error}</Text>
+                  </View>
+                )}
               </View>
 
               <View style={[a.pb_3xl]}>