From 857ee41723e282de040aebae87e10e79165d54c7 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 30 May 2024 16:27:22 -0500
Subject: [PATCH] Factor out dialog, add to delete modal too

(cherry picked from commit 47d70f6b74e7d2ea7330fd172499fe91ba41062d)
---
 .../components/DeactivateAccountDialog.tsx    | 27 +++++++++++
 src/view/com/modals/DeleteAccount.tsx         | 46 +++++++++++++++++++
 src/view/screens/Settings/index.tsx           | 15 ++----
 3 files changed, 76 insertions(+), 12 deletions(-)
 create mode 100644 src/screens/Settings/components/DeactivateAccountDialog.tsx

diff --git a/src/screens/Settings/components/DeactivateAccountDialog.tsx b/src/screens/Settings/components/DeactivateAccountDialog.tsx
new file mode 100644
index 0000000000..a5c2f3b34a
--- /dev/null
+++ b/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={() => {}}
+    />
+  )
+}
diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx
index 06f1e111a0..566769c967 100644
--- a/src/view/com/modals/DeleteAccount.tsx
+++ b/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} />
           </>
         ) : (
           <>
diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx
index f5ecc86c50..49dd45aab9 100644
--- a/src/view/screens/Settings/index.tsx
+++ b/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]}