Factor out dialog, add to delete modal too

(cherry picked from commit 47d70f6b74e7d2ea7330fd172499fe91ba41062d)

src/screens/Settings/components/DeactivateAccountDialog.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {DialogOuterProps} from '#/components/Dialog'
+import * as Prompt from '#/components/Prompt'
+
+export function DeactivateAccountDialog({
+  control,
+}: {
+  control: DialogOuterProps['control']
+}) {
+  const {_} = useLingui()
+
+  return (
+    <Prompt.Basic
+      control={control}
+      title={_(msg`Deactivate account`)}
+      description={_(
+        msg`Are you sure you want to deactivate your account? You won't be able to interact on the network using this account, and users won't be able to see your profile or posts.`,
+      )}
+      confirmButtonCta={_(msg`Yes, deactivate my account`)}
+      confirmButtonColor="negative"
+      onConfirm={() => {}}
+    />
+  )
+}

src/view/com/modals/DeleteAccount.tsx

@@ -19,6 +19,12 @@ import {cleanError} from 'lib/strings/errors'
 import {colors, gradients, s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
 import {isAndroid} from 'platform/detection'
+import {DeactivateAccountDialog} from '#/screens/Settings/components/DeactivateAccountDialog'
+import {atoms as a, useTheme as useNewTheme} from '#/alf'
+import {useDialogControl} from '#/components/Dialog'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {InlineLinkText} from '#/components/Link'
+import {Text as NewText} from '#/components/Typography'
 import {resetToTab} from '../../../Navigation'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {Text} from '../util/text/Text'
@@ -30,6 +36,7 @@ export const snapPoints = isAndroid ? ['90%'] : ['55%']
 export function Component({}: {}) {
   const pal = usePalette('default')
   const theme = useTheme()
+  const t = useNewTheme()
   const {currentAccount} = useSession()
   const agent = useAgent()
   const {removeAccount} = useSessionApi()
@@ -41,6 +48,7 @@ export function Component({}: {}) {
   const [password, setPassword] = React.useState<string>('')
   const [isProcessing, setIsProcessing] = React.useState<boolean>(false)
   const [error, setError] = React.useState<string>('')
+  const deactivateAccountControl = useDialogControl()
   const onPressSendEmail = async () => {
     setError('')
     setIsProcessing(true)
@@ -168,6 +176,44 @@ export function Component({}: {}) {
                 </TouchableOpacity>
               </>
             )}
+
+            <View
+              style={[
+                a.flex_row,
+                a.gap_sm,
+                a.mt_lg,
+                a.p_lg,
+                a.rounded_sm,
+                t.atoms.bg_contrast_25,
+              ]}>
+              <CircleInfo
+                size="xl"
+                style={[
+                  a.relative,
+                  {
+                    top: -5,
+                  },
+                ]}
+              />
+
+              <NewText style={[a.leading_snug]}>
+                <Trans>
+                  You can also temporarily deactivate your account instead, and
+                  reactivate it at any time.
+                </Trans>{' '}
+                <InlineLinkText
+                  to="#"
+                  onPress={e => {
+                    e.preventDefault()
+                    deactivateAccountControl.open()
+                    return false
+                  }}>
+                  <Trans>Click here for more information.</Trans>
+                </InlineLinkText>
+              </NewText>
+            </View>
+
+            <DeactivateAccountDialog control={deactivateAccountControl} />
           </>
         ) : (
           <>

src/view/screens/Settings/index.tsx

@@ -60,10 +60,10 @@ import {Text} from 'view/com/util/text/Text'
 import * as Toast from 'view/com/util/Toast'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {ScrollView} from 'view/com/util/Views'
+import {DeactivateAccountDialog} from '#/screens/Settings/components/DeactivateAccountDialog'
 import {useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
-import * as Prompt from '#/components/Prompt'
 import {navigate, resetToTab} from '#/Navigation'
 import {Email2FAToggle} from './Email2FAToggle'
 import {ExportCarDialog} from './ExportCarDialog'
@@ -307,7 +307,7 @@ export function SettingsScreen({}: Props) {
     Toast.show(_(msg`Legacy storage cleared, you need to restart the app now.`))
   }, [_])
 
-  const deactivateAccountControl = Prompt.usePromptControl()
+  const deactivateAccountControl = useDialogControl()
   const onPressDeactivateAccount = React.useCallback(() => {
     deactivateAccountControl.open()
   }, [deactivateAccountControl])
@@ -817,16 +817,7 @@ export function SettingsScreen({}: Props) {
             <Trans>Deactivate my account</Trans>
           </Text>
         </TouchableOpacity>
-        <Prompt.Basic
-          control={deactivateAccountControl}
-          title={_(msg`Deactivate account`)}
-          description={_(
-            msg`Are you sure you want to deactivate your account? You won't be able to interact on the network using this account, and users won't be able to see your profile or posts.`,
-          )}
-          confirmButtonCta={_(msg`Yes, deactivate my account`)}
-          confirmButtonColor="negative"
-          onConfirm={() => {}}
-        />
+        <DeactivateAccountDialog control={deactivateAccountControl} />
 
         <TouchableOpacity
           style={[pal.view, styles.linkCard]}