Add email verification prompts throughout the app (#6174)

1 files changed, 20 insertions, 2 deletions

diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx
index b79da6d54..f654f2bd9 100644
--- a/src/view/screens/Lists.tsx
+++ b/src/view/screens/Lists.tsx
@@ -2,9 +2,11 @@ import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {AtUri} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Trans} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 
+import {useEmail} from '#/lib/hooks/useEmail'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
@@ -16,15 +18,20 @@ import {MyLists} from '#/view/com/lists/MyLists'
 import {Button} from '#/view/com/util/forms/Button'
 import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
 import {Text} from '#/view/com/util/text/Text'
+import {useDialogControl} from '#/components/Dialog'
+import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
 import * as Layout from '#/components/Layout'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Lists'>
 export function ListsScreen({}: Props) {
+  const {_} = useLingui()
   const pal = usePalette('default')
   const setMinimalShellMode = useSetMinimalShellMode()
   const {isMobile} = useWebMediaQueries()
   const navigation = useNavigation<NavigationProp>()
   const {openModal} = useModalControls()
+  const {needsEmailVerification} = useEmail()
+  const control = useDialogControl()
 
   useFocusEffect(
     React.useCallback(() => {
@@ -33,6 +40,11 @@ export function ListsScreen({}: Props) {
   )
 
   const onPressNewList = React.useCallback(() => {
+    if (needsEmailVerification) {
+      control.open()
+      return
+    }
+
     openModal({
       name: 'create-or-edit-list',
       purpose: 'app.bsky.graph.defs#curatelist',
@@ -46,7 +58,7 @@ export function ListsScreen({}: Props) {
         } catch {}
       },
     })
-  }, [openModal, navigation])
+  }, [needsEmailVerification, control, openModal, navigation])
 
   return (
     <Layout.Screen testID="listsScreen">
@@ -87,6 +99,12 @@ export function ListsScreen({}: Props) {
         </View>
       </SimpleViewHeader>
       <MyLists filter="curate" style={s.flexGrow1} />
+      <VerifyEmailDialog
+        reasonText={_(
+          msg`Before creating a list, you must first verify your email.`,
+        )}
+        control={control}
+      />
     </Layout.Screen>
   )
 }