Fallback change email dialog

src/components/dialogs/VerifyEmailDialog.tsx

@@ -14,6 +14,7 @@ import * as TextField from '#/components/forms/TextField'
 import {InlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
+import {ChangeEmailDialog} from './ChangeEmailDialog'
 
 export function VerifyEmailDialog({
   control,
@@ -26,13 +27,20 @@ export function VerifyEmailDialog({
   onCloseWithoutVerifying?: () => void
   onCloseAfterVerifying?: () => void
   reasonText?: string
-  changeEmailControl: Dialog.DialogControlProps
+  /**
+   * if a changeEmailControl for a ChangeEmailDialog is not provided,
+   * this component will create one for you. Using this prop
+   * helps reduce duplication, since these dialogs are often used together.
+   */
+  changeEmailControl?: Dialog.DialogControlProps
 }) {
   const agent = useAgent()
+  const fallbackChangeEmailControl = Dialog.useDialogControl()
 
   const [didVerify, setDidVerify] = React.useState(false)
 
   return (
+    <>
       <Dialog.Outer
         control={control}
         onClose={async () => {
@@ -53,9 +61,16 @@ export function VerifyEmailDialog({
         <Inner
           setDidVerify={setDidVerify}
           reasonText={reasonText}
-        changeEmailControl={changeEmailControl}
+          changeEmailControl={changeEmailControl ?? fallbackChangeEmailControl}
         />
       </Dialog.Outer>
+      {!changeEmailControl && (
+        <ChangeEmailDialog
+          control={fallbackChangeEmailControl}
+          verifyEmailControl={control}
+        />
+      )}
+    </>
   )
 }