Handle verification requirements for composer and convo

src/components/dialogs/EmailDialog/index.tsx

@@ -7,6 +7,7 @@ import {
   type StatefulControl,
   useStatefulDialogControl,
 } from '#/components/dialogs/Context'
+import {useIsEmailVerified} from '#/components/dialogs/EmailDialog/data/useIsEmailVerified'
 import {Manage2FA} from '#/components/dialogs/EmailDialog/screens/Manage2FA'
 import {Update} from '#/components/dialogs/EmailDialog/screens/Update'
 import {VerificationReminder} from '#/components/dialogs/EmailDialog/screens/VerificationReminder'
@@ -23,7 +24,14 @@ export function useEmailDialogControl() {
 
 export function EmailDialog({control}: {control: StatefulControl<Screen>}) {
   const {_} = useLingui()
-  const onClose = useCallback(() => {}, [])
+  const {isEmailVerified} = useIsEmailVerified()
+  const onClose = useCallback(() => {
+    if (!isEmailVerified) {
+      if (control.value?.id === ScreenID.Verify) {
+        control.value.onCloseWithoutVerifying?.()
+      }
+    }
+  }, [isEmailVerified, control, ,])
 
   return (
     <Dialog.Outer control={control.control} onClose={onClose}>

src/components/dialogs/EmailDialog/types.ts

@@ -15,8 +15,8 @@ export type Screen =
   | {
       id: ScreenID.Verify
       instructions?: ReactNode[]
-      hideInitialCodeButton?: boolean
       onVerify?: () => void
+      onCloseWithoutVerifying?: () => void
     }
   | {
       id: ScreenID.VerificationReminder

src/screens/Messages/Conversation.tsx

@@ -5,7 +5,7 @@ import {
   moderateProfile,
   type ModerationDecision,
 } from '@atproto/api'
-import {msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {
   type RouteProp,
@@ -31,8 +31,11 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {MessagesList} from '#/screens/Messages/components/MessagesList'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
-import {useDialogControl} from '#/components/Dialog'
-import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
+import {
+  EmailDialog,
+  EmailDialogScreenID,
+  useEmailDialogControl,
+} from '#/components/dialogs/EmailDialog'
 import {MessagesListBlockedFooter} from '#/components/dms/MessagesListBlockedFooter'
 import {MessagesListHeader} from '#/components/dms/MessagesListHeader'
 import {Error} from '#/components/Error'
@@ -183,19 +186,29 @@ function InnerReady({
   hasScrolled: boolean
   setHasScrolled: React.Dispatch<React.SetStateAction<boolean>>
 }) {
-  const {_} = useLingui()
   const convoState = useConvo()
   const navigation = useNavigation<NavigationProp>()
   const {params} =
     useRoute<RouteProp<CommonNavigatorParams, 'MessagesConversation'>>()
-  const verifyEmailControl = useDialogControl()
   const {needsEmailVerification} = useEmail()
+  const emailDialogControl = useEmailDialogControl()
 
   React.useEffect(() => {
     if (needsEmailVerification) {
-      verifyEmailControl.open()
+      emailDialogControl.open({
+        id: EmailDialogScreenID.Verify,
+        instructions: [
+          <Trans key="pre-compose">
+            Before you may message another user, you must first verify your
+            email.
+          </Trans>,
+        ],
+        onCloseWithoutVerifying: () => {
+          navigation.navigate('Home')
+        },
+      })
     }
-  }, [needsEmailVerification, verifyEmailControl])
+  }, [needsEmailVerification, emailDialogControl, navigation])
 
   return (
     <>
@@ -216,15 +229,7 @@ function InnerReady({
           }
         />
       )}
-      <VerifyEmailDialog
-        reasonText={_(
-          msg`Before you may message another user, you must first verify your email.`,
-        )}
-        control={verifyEmailControl}
-        onCloseWithoutVerifying={() => {
-          navigation.navigate('Home')
-        }}
-      />
+      <EmailDialog control={emailDialogControl} />
     </>
   )
 }

src/view/com/composer/Composer.tsx

@@ -120,8 +120,11 @@ import * as Toast from '#/view/com/util/Toast'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {useDialogControl} from '#/components/Dialog'
-import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
+import {
+  EmailDialog,
+  EmailDialogScreenID,
+  useEmailDialogControl,
+} from '#/components/dialogs/EmailDialog'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
@@ -332,13 +335,23 @@ export const ComposePost = ({
   }, [onPressCancel, closeAllDialogs, closeAllModals])
 
   const {needsEmailVerification} = useEmail()
-  const emailVerificationControl = useDialogControl()
+  const emailDialogControl = useEmailDialogControl()
 
   useEffect(() => {
     if (needsEmailVerification) {
-      emailVerificationControl.open()
+      emailDialogControl.open({
+        id: EmailDialogScreenID.Verify,
+        instructions: [
+          <Trans key="pre-compose">
+            Before creating a post, you must first verify your email.
+          </Trans>,
+        ],
+        onCloseWithoutVerifying: () => {
+          onClose()
+        },
+      })
     }
-  }, [needsEmailVerification, emailVerificationControl])
+  }, [needsEmailVerification, emailDialogControl, onClose])
 
   const missingAltError = useMemo(() => {
     if (!requireAltTextEnabled) {
@@ -620,15 +633,7 @@ export const ComposePost = ({
   const isWebFooterSticky = !isNative && thread.posts.length > 1
   return (
     <BottomSheetPortalProvider>
-      <VerifyEmailDialog
-        control={emailVerificationControl}
-        onCloseWithoutVerifying={() => {
-          onClose()
-        }}
-        reasonText={_(
-          msg`Before creating a post, you must first verify your email.`,
-        )}
-      />
+      <EmailDialog control={emailDialogControl} />
       <KeyboardAvoidingView
         testID="composePostView"
         behavior={isIOS ? 'padding' : 'height'}