[APP-1158] Refactor email-related dialogs (#8296)

* WIP

* Update email

* Fire off confirmation email after change

* Verify step, integrate stateful control

* Remove tentative EnterCode step

* Handle token step

* Handle instructions and integrate into 2FA setting

* Fix load state when reusing same email

* Add new state

* Add 2FA screens

* Clean up state in Update step

* Clean up verify state, handle normal callback

* Normalize convetions

* Add verification reminder screen

* Improve session refresh

* Handle verification requirements for composer and convo

* Fix lint

* Do better

* Couple missing translations

* Format

* Use listeners for easier to grok logic

* Clean errors

* Move to global context

* [APP-1158] Gate features by email verification state (#8305)

* Use new hook in all locations

* Format

* Seems to work, not great duplication

* Wrap all open composer calls

* Remove unneeded spans

* Missed one

* Fix handler on Conversation

* Gate new chat in header

* Add comment

* Remove whoopsie

* Format

* add hackfix for dialog not showing

* add prompt to accept chat btn

* navigation not necessary

* send back one screen, rather than home

* Update comment

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

* Clear dialog state

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

* Update icon

* Check color

* Add 2FA warning

* Update instructions

* Fix X button

* Use an effect silly goose

* Update copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update src/components/dialaUpdate copyogs/EmailDialog/screens/Update.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update copy

* Update copy

* Update copy

* Update copy

* Update copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update copy

* Add link back to update email from verify email dialog

* Handle token field validation

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

1 files changed, 71 insertions, 0 deletions

diff --git a/src/components/dialogs/EmailDialog/index.tsx b/src/components/dialogs/EmailDialog/index.tsx
new file mode 100644
index 000000000..4bac7295a
--- /dev/null
+++ b/src/components/dialogs/EmailDialog/index.tsx
@@ -0,0 +1,71 @@
+import {useCallback, useState} from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import * as Dialog from '#/components/Dialog'
+import {type StatefulControl} from '#/components/dialogs/Context'
+import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
+import {useAccountEmailState} from '#/components/dialogs/EmailDialog/data/useAccountEmailState'
+import {Manage2FA} from '#/components/dialogs/EmailDialog/screens/Manage2FA'
+import {Update} from '#/components/dialogs/EmailDialog/screens/Update'
+import {VerificationReminder} from '#/components/dialogs/EmailDialog/screens/VerificationReminder'
+import {Verify} from '#/components/dialogs/EmailDialog/screens/Verify'
+import {type Screen, ScreenID} from '#/components/dialogs/EmailDialog/types'
+
+export type {Screen} from '#/components/dialogs/EmailDialog/types'
+export {ScreenID as EmailDialogScreenID} from '#/components/dialogs/EmailDialog/types'
+
+export function useEmailDialogControl() {
+  return useGlobalDialogsControlContext().emailDialogControl
+}
+
+export function EmailDialog() {
+  const {_} = useLingui()
+  const emailDialogControl = useEmailDialogControl()
+  const {isEmailVerified} = useAccountEmailState()
+  const onClose = useCallback(() => {
+    if (!isEmailVerified) {
+      if (emailDialogControl.value?.id === ScreenID.Verify) {
+        emailDialogControl.value.onCloseWithoutVerifying?.()
+      }
+    }
+    emailDialogControl.clear()
+  }, [isEmailVerified, emailDialogControl])
+
+  return (
+    <Dialog.Outer control={emailDialogControl.control} onClose={onClose}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner
+        label={_(msg`Make adjustments to email settings for your account`)}
+        style={[{maxWidth: 400}]}>
+        <Inner control={emailDialogControl} />
+        <Dialog.Close />
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}
+
+function Inner({control}: {control: StatefulControl<Screen>}) {
+  const [screen, showScreen] = useState(() => control.value)
+
+  if (!screen) return null
+
+  switch (screen.id) {
+    case ScreenID.Update: {
+      return <Update config={screen} showScreen={showScreen} />
+    }
+    case ScreenID.Verify: {
+      return <Verify config={screen} showScreen={showScreen} />
+    }
+    case ScreenID.VerificationReminder: {
+      return <VerificationReminder config={screen} showScreen={showScreen} />
+    }
+    case ScreenID.Manage2FA: {
+      return <Manage2FA config={screen} showScreen={showScreen} />
+    }
+    default: {
+      return null
+    }
+  }
+}