Add verification reminder screen

src/Navigation.tsx

@@ -104,8 +104,11 @@ import {Wizard} from '#/screens/StarterPack/Wizard'
 import TopicScreen from '#/screens/Topic'
 import {VideoFeed} from '#/screens/VideoFeed'
 import {useTheme} from '#/alf'
-import {useDialogControl} from '#/components/Dialog'
-import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
+import {
+  EmailDialog,
+  EmailDialogScreenID,
+  useEmailDialogControl,
+} from '#/components/dialogs/EmailDialog'
 import {router} from '#/routes'
 import {Referrer} from '../modules/expo-bluesky-swiss-army'
 
@@ -738,12 +741,14 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
   const theme = useColorSchemeStyle(DefaultTheme, DarkTheme)
   const {currentAccount} = useSession()
   const prevLoggedRouteName = React.useRef<string | undefined>(undefined)
-  const verifyEmailDialogControl = useDialogControl()
+  const emailDialogControl = useEmailDialogControl()
 
   function onReady() {
     prevLoggedRouteName.current = getCurrentRouteName()
     if (currentAccount && shouldRequestEmailConfirmation(currentAccount)) {
-      verifyEmailDialogControl.open()
+      emailDialogControl.open({
+        id: EmailDialogScreenID.VerificationReminder,
+      })
       snoozeEmailConfirmationPrompt()
     }
   }
@@ -768,7 +773,7 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
         }}>
         {children}
       </NavigationContainer>
-      <VerifyEmailDialog control={verifyEmailDialogControl} reminder />
+      <EmailDialog control={emailDialogControl} />
     </>
   )
 }

src/components/dialogs/EmailDialog/index.tsx

@@ -13,6 +13,7 @@ import {Manage2FA} from '#/components/dialogs/EmailDialog/screens/Manage2FA'
  * Steps
  */
 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'
 
@@ -57,10 +58,13 @@ function Inner({control}: {control: StatefulControl<Screen>}) {
 
   switch (screen.id) {
     case ScreenID.Update: {
-      return <Update config={screen} />
+      return <Update config={screen} showScreen={showScreen} />
     }
     case ScreenID.Verify: {
-      return <Verify config={screen} />
+      return <Verify config={screen} showScreen={showScreen} />
+    }
+    case ScreenID.VerificationReminder: {
+      return <VerificationReminder config={screen} showScreen={showScreen} />
     }
     case ScreenID.Manage2FA: {
       return <Manage2FA config={screen} showScreen={showScreen} />

src/components/dialogs/EmailDialog/screens/Manage2FA/index.tsx

@@ -4,18 +4,13 @@ import {Trans} from '@lingui/macro'
 import {useSession} from '#/state/session'
 import {useIsEmailVerified} from '#/components/dialogs/EmailDialog/data/useIsEmailVerified'
 import {Disable} from '#/components/dialogs/EmailDialog/screens/Manage2FA/Disable'
-/**
- * Sub-screens
- */
 import {Enable} from '#/components/dialogs/EmailDialog/screens/Manage2FA/Enable'
-import {type Screen, ScreenID} from '#/components/dialogs/EmailDialog/types'
+import {
+  ScreenID,
+  type ScreenProps,
+} from '#/components/dialogs/EmailDialog/types'
 
-export function Manage2FA({
-  showScreen,
-}: {
-  config: Extract<Screen, {id: 'Manage2FA'}>
-  showScreen: (screen: Screen) => void
-}) {
+export function Manage2FA({showScreen}: ScreenProps<ScreenID.Manage2FA>) {
   const [requestedAction, setRequestedAction] = useState<
     'enable' | 'disable' | null
   >(null)

src/components/dialogs/EmailDialog/screens/Update.tsx

@@ -15,7 +15,10 @@ import {TokenField} from '#/components/dialogs/EmailDialog/components/TokenField
 import {useRequestEmailUpdate} from '#/components/dialogs/EmailDialog/data/useRequestEmailUpdate'
 import {useRequestEmailVerification} from '#/components/dialogs/EmailDialog/data/useRequestEmailVerification'
 import {useUpdateEmail} from '#/components/dialogs/EmailDialog/data/useUpdateEmail'
-import {type Screen} from '#/components/dialogs/EmailDialog/types'
+import {
+  type ScreenID,
+  type ScreenProps,
+} from '#/components/dialogs/EmailDialog/types'
 import {Divider} from '#/components/Divider'
 import * as TextField from '#/components/forms/TextField'
 import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At'
@@ -96,7 +99,7 @@ function reducer(state: State, action: Action): State {
   }
 }
 
-export function Update(_props: {config: Exclude<Screen, {id: 'Verify'}>}) {
+export function Update(_props: ScreenProps<ScreenID.Update>) {
   const t = useTheme()
   const {_} = useLingui()
   const {currentAccount} = useSession()

src/components/dialogs/EmailDialog/screens/VerificationReminder.tsx

@@ -0,0 +1,83 @@
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {atoms as a, tokens,useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import {useDialogContext} from '#/components/Dialog'
+import {
+  ScreenID,
+  type ScreenProps,
+} from '#/components/dialogs/EmailDialog/types'
+import {Divider} from '#/components/Divider'
+import {GradientFill} from '#/components/GradientFill'
+import {ShieldCheck_Stroke2_Corner0_Rounded as ShieldIcon} from '#/components/icons/Shield'
+import {Text} from '#/components/Typography'
+
+export function VerificationReminder({
+  showScreen,
+}: ScreenProps<ScreenID.VerificationReminder>) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {gtPhone} = useBreakpoints()
+  const control = useDialogContext()
+
+  return (
+    <View style={[a.gap_lg]}>
+      <View
+        style={[
+          a.rounded_sm,
+          a.align_center,
+          a.justify_center,
+          a.overflow_hidden,
+          t.atoms.bg_contrast_100,
+          {height: 150},
+        ]}>
+        <GradientFill gradient={tokens.gradients.primary} />
+        <ShieldIcon width={64} fill="white" style={[a.z_10]} />
+      </View>
+
+      <View style={[a.gap_sm]}>
+        <Text style={[a.text_xl, a.font_heavy]}>
+          <Trans>Please verify your email</Trans>
+        </Text>
+        <Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
+          <Trans>
+            Your email has not yet been verified. Please verify your email in
+            order to enjoy all the features of Bluesky.
+          </Trans>
+        </Text>
+      </View>
+
+      <Divider />
+
+      <View style={[a.gap_sm, gtPhone && [a.flex_row_reverse]]}>
+        <Button
+          label={_(msg`Get started`)}
+          variant="solid"
+          color="primary"
+          size="large"
+          onPress={() =>
+            showScreen({
+              id: ScreenID.Verify,
+            })
+          }>
+          <ButtonText>
+            <Trans>Get started</Trans>
+          </ButtonText>
+        </Button>
+        <Button
+          label={_(msg`Maybe later`)}
+          accessibilityHint={_(msg`Snoozes the reminder`)}
+          variant="ghost"
+          color="secondary"
+          size="large"
+          onPress={() => control.close()}>
+          <ButtonText>
+            <Trans>Maybe later</Trans>
+          </ButtonText>
+        </Button>
+      </View>
+    </View>
+  )
+}

src/components/dialogs/EmailDialog/screens/Verify.tsx

@@ -14,7 +14,10 @@ import {TokenField} from '#/components/dialogs/EmailDialog/components/TokenField
 import {useConfirmEmail} from '#/components/dialogs/EmailDialog/data/useConfirmEmail'
 import {useIsEmailVerified} from '#/components/dialogs/EmailDialog/data/useIsEmailVerified'
 import {useRequestEmailVerification} from '#/components/dialogs/EmailDialog/data/useRequestEmailVerification'
-import {type Screen} from '#/components/dialogs/EmailDialog/types'
+import {
+  type ScreenID,
+  type ScreenProps,
+} from '#/components/dialogs/EmailDialog/types'
 import {Divider} from '#/components/Divider'
 import {CheckThick_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
@@ -81,7 +84,7 @@ function reducer(state: State, action: Action): State {
   }
 }
 
-export function Verify({config}: {config: Extract<Screen, {id: 'Verify'}>}) {
+export function Verify({config}: ScreenProps<ScreenID.Verify>) {
   const t = useTheme()
   const {_} = useLingui()
   const {currentAccount} = useSession()

src/components/dialogs/EmailDialog/types.ts

@@ -18,6 +18,9 @@ export type Screen =
       hideInitialCodeButton?: boolean
       onVerify?: () => void
     }
+  | {
+      id: ScreenID.VerificationReminder
+    }
   | {
       id: ScreenID.Manage2FA
     }
@@ -25,5 +28,11 @@ export type Screen =
 export enum ScreenID {
   Update = 'Update',
   Verify = 'Verify',
+  VerificationReminder = 'VerificationReminder',
   Manage2FA = 'Manage2FA',
 }
+
+export type ScreenProps<T extends ScreenID> = {
+  config: Extract<Screen, {id: T}>
+  showScreen: (screen: Screen) => void
+}