Add email verification prompts throughout the app (#6174)

1 files changed, 25 insertions, 2 deletions

diff --git a/src/components/StarterPack/ProfileStarterPacks.tsx b/src/components/StarterPack/ProfileStarterPacks.tsx
index 00afbdcfe..5f58a19df 100644
--- a/src/components/StarterPack/ProfileStarterPacks.tsx
+++ b/src/components/StarterPack/ProfileStarterPacks.tsx
@@ -14,6 +14,7 @@ import {InfiniteData, UseInfiniteQueryResult} from '@tanstack/react-query'
 
 import {useGenerateStarterPackMutation} from '#/lib/generate-starterpack'
 import {useBottomBarOffset} from '#/lib/hooks/useBottomBarOffset'
+import {useEmail} from '#/lib/hooks/useEmail'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {NavigationProp} from '#/lib/routes/types'
 import {parseStarterPackUri} from '#/lib/strings/starter-pack'
@@ -27,6 +28,7 @@ import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
 import {Default as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
+import {VerifyEmailDialog} from '../dialogs/VerifyEmailDialog'
 import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '../icons/Plus'
 
 interface SectionRef {
@@ -186,6 +188,9 @@ function Empty() {
   const followersDialogControl = useDialogControl()
   const errorDialogControl = useDialogControl()
 
+  const {needsEmailVerification} = useEmail()
+  const verifyEmailControl = useDialogControl()
+
   const [isGenerating, setIsGenerating] = React.useState(false)
 
   const {mutate: generateStarterPack} = useGenerateStarterPackMutation({
@@ -249,7 +254,13 @@ function Empty() {
           color="primary"
           size="small"
           disabled={isGenerating}
-          onPress={confirmDialogControl.open}
+          onPress={() => {
+            if (needsEmailVerification) {
+              verifyEmailControl.open()
+            } else {
+              confirmDialogControl.open()
+            }
+          }}
           style={{backgroundColor: 'transparent'}}>
           <ButtonText style={{color: 'white'}}>
             <Trans>Make one for me</Trans>
@@ -262,7 +273,13 @@ function Empty() {
           color="primary"
           size="small"
           disabled={isGenerating}
-          onPress={() => navigation.navigate('StarterPackWizard')}
+          onPress={() => {
+            if (needsEmailVerification) {
+              verifyEmailControl.open()
+            } else {
+              navigation.navigate('StarterPackWizard')
+            }
+          }}
           style={{
             backgroundColor: 'white',
             borderColor: 'white',
@@ -318,6 +335,12 @@ function Empty() {
         onConfirm={generate}
         confirmButtonCta={_(msg`Retry`)}
       />
+      <VerifyEmailDialog
+        reasonText={_(
+          msg`Before creating a starter pack, you must first verify your email.`,
+        )}
+        control={verifyEmailControl}
+      />
     </LinearGradientBackground>
   )
 }