[🙅] Disambiguation of the deactivation (#4267)

* Disambiguation of the deactivation

* Snapshot crackle pop

* Change log context

* [🙅] Add status to session state (#4269)

* Add status to session state

* [🙅] Add new deactivated screen (#4270)

* Add new deactivated screen

* Update copy, handle logout

* Remove icons, adjust padding

* [🙅] Add deactivate account dialog (#4290)

* Deactivate dialog

(cherry picked from commit 33940e2dfe0d710c0665a7f68b198b46f54db4a2)

* Factor out dialog, add to delete modal too

(cherry picked from commit 47d70f6b74e7d2ea7330fd172499fe91ba41062d)

* Update copy, icon

(cherry picked from commit e6efabbe78c3f3d9f0f8fb0a06a6a1c4fbfb70a9)

* Update copy

(cherry picked from commit abb0ce26f6747ab0548f6f12df0dee3c64464852)

* Sizing tweaks

(cherry picked from commit fc716d5716873f0fddef56496fc48af0614b2e55)

* Add a11y label

1 files changed, 53 insertions, 1 deletions

diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx
index 06f1e111a..6dd248ca7 100644
--- a/src/view/com/modals/DeleteAccount.tsx
+++ b/src/view/com/modals/DeleteAccount.tsx
@@ -18,7 +18,13 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {cleanError} from 'lib/strings/errors'
 import {colors, gradients, s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
-import {isAndroid} from 'platform/detection'
+import {isAndroid, isWeb} 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,50 @@ export function Component({}: {}) {
                 </TouchableOpacity>
               </>
             )}
+
+            <View style={[!isWeb && a.px_xl]}>
+              <View
+                style={[
+                  a.w_full,
+                  a.flex_row,
+                  a.gap_sm,
+                  a.mt_lg,
+                  a.p_lg,
+                  a.rounded_sm,
+                  t.atoms.bg_contrast_25,
+                ]}>
+                <CircleInfo
+                  size="md"
+                  style={[
+                    a.relative,
+                    {
+                      top: -1,
+                    },
+                  ]}
+                />
+
+                <NewText style={[a.leading_snug, a.flex_1]}>
+                  <Trans>
+                    You can also temporarily deactivate your account instead,
+                    and reactivate it at any time.
+                  </Trans>{' '}
+                  <InlineLinkText
+                    label={_(
+                      msg`Click here for more information on deactivating your account`,
+                    )}
+                    to="#"
+                    onPress={e => {
+                      e.preventDefault()
+                      deactivateAccountControl.open()
+                      return false
+                    }}>
+                    <Trans>Click here for more information.</Trans>
+                  </InlineLinkText>
+                </NewText>
+              </View>
+            </View>
+
+            <DeactivateAccountDialog control={deactivateAccountControl} />
           </>
         ) : (
           <>