diff --git a/src/Navigation.tsx b/src/Navigation.tsx index d4fdc4797a..424d73290e 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -33,7 +33,6 @@ import {attachRouteToLogEvents, logEvent} from '#/lib/statsig/statsig' import {bskyTitle} from '#/lib/strings/headings' import {logger} from '#/logger' import {isNative, isWeb} from '#/platform/detection' -import {useModalControls} from '#/state/modals' import {useUnreadNotifications} from '#/state/queries/notifications/unread' import {useSession} from '#/state/session' import { @@ -80,33 +79,35 @@ import {ProfileFeedScreen} from '#/screens/Profile/ProfileFeed' import {ProfileFollowersScreen} from '#/screens/Profile/ProfileFollowers' import {ProfileFollowsScreen} from '#/screens/Profile/ProfileFollows' import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy' +import {ProfileSearchScreen} from '#/screens/Profile/ProfileSearch' import {SearchScreen} from '#/screens/Search' +import {AboutSettingsScreen} from '#/screens/Settings/AboutSettings' +import {AccessibilitySettingsScreen} from '#/screens/Settings/AccessibilitySettings' +import {AccountSettingsScreen} from '#/screens/Settings/AccountSettings' import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings' import {AppIconSettingsScreen} from '#/screens/Settings/AppIconSettings' +import {AppPasswordsScreen} from '#/screens/Settings/AppPasswords' +import {ContentAndMediaSettingsScreen} from '#/screens/Settings/ContentAndMediaSettings' +import {ExternalMediaPreferencesScreen} from '#/screens/Settings/ExternalMediaPreferences' +import {FollowingFeedPreferencesScreen} from '#/screens/Settings/FollowingFeedPreferences' +import {LanguageSettingsScreen} from '#/screens/Settings/LanguageSettings' import {NotificationSettingsScreen} from '#/screens/Settings/NotificationSettings' +import {PrivacyAndSecuritySettingsScreen} from '#/screens/Settings/PrivacyAndSecuritySettings' +import {SettingsScreen} from '#/screens/Settings/Settings' import {SettingsInterests} from '#/screens/Settings/SettingsInterests' +import {ThreadPreferencesScreen} from '#/screens/Settings/ThreadPreferences' import { StarterPackScreen, StarterPackScreenShort, } from '#/screens/StarterPack/StarterPackScreen' 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 {router} from '#/routes' import {Referrer} from '../modules/expo-bluesky-swiss-army' -import {ProfileSearchScreen} from './screens/Profile/ProfileSearch' -import {AboutSettingsScreen} from './screens/Settings/AboutSettings' -import {AccessibilitySettingsScreen} from './screens/Settings/AccessibilitySettings' -import {AccountSettingsScreen} from './screens/Settings/AccountSettings' -import {AppPasswordsScreen} from './screens/Settings/AppPasswords' -import {ContentAndMediaSettingsScreen} from './screens/Settings/ContentAndMediaSettings' -import {ExternalMediaPreferencesScreen} from './screens/Settings/ExternalMediaPreferences' -import {FollowingFeedPreferencesScreen} from './screens/Settings/FollowingFeedPreferences' -import {LanguageSettingsScreen} from './screens/Settings/LanguageSettings' -import {PrivacyAndSecuritySettingsScreen} from './screens/Settings/PrivacyAndSecuritySettings' -import {SettingsScreen} from './screens/Settings/Settings' -import {ThreadPreferencesScreen} from './screens/Settings/ThreadPreferences' -import TopicScreen from './screens/Topic' const navigationRef = createNavigationContainerRef() @@ -736,36 +737,39 @@ const LINKING = { function RoutesContainer({children}: React.PropsWithChildren<{}>) { const theme = useColorSchemeStyle(DefaultTheme, DarkTheme) const {currentAccount} = useSession() - const {openModal} = useModalControls() const prevLoggedRouteName = React.useRef(undefined) + const verifyEmailDialogControl = useDialogControl() function onReady() { prevLoggedRouteName.current = getCurrentRouteName() if (currentAccount && shouldRequestEmailConfirmation(currentAccount)) { - openModal({name: 'verify-email', showReminder: true}) + verifyEmailDialogControl.open() snoozeEmailConfirmationPrompt() } } return ( - { - logger.metric('router:navigate', { - from: prevLoggedRouteName.current, - }) - prevLoggedRouteName.current = getCurrentRouteName() - }} - onReady={() => { - attachRouteToLogEvents(getCurrentRouteName) - logModuleInitTime() - onReady() - logger.metric('router:navigate', {}) - }}> - {children} - + <> + { + logger.metric('router:navigate', { + from: prevLoggedRouteName.current, + }) + prevLoggedRouteName.current = getCurrentRouteName() + }} + onReady={() => { + attachRouteToLogEvents(getCurrentRouteName) + logModuleInitTime() + onReady() + logger.metric('router:navigate', {}) + }}> + {children} + + + ) } diff --git a/src/components/dialogs/VerifyEmailDialog.tsx b/src/components/dialogs/VerifyEmailDialog.tsx index 489b4c3d68..eb49c12323 100644 --- a/src/components/dialogs/VerifyEmailDialog.tsx +++ b/src/components/dialogs/VerifyEmailDialog.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import {useState} from 'react' import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -7,10 +7,11 @@ import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' import {useAgent, useSession} from '#/state/session' import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' -import {atoms as a, useBreakpoints, web} from '#/alf' +import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import * as TextField from '#/components/forms/TextField' +import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeIcon} from '#/components/icons/Envelope' import {InlineLinkText} from '#/components/Link' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' @@ -22,6 +23,7 @@ export function VerifyEmailDialog({ onCloseAfterVerifying, reasonText, changeEmailControl, + reminder, }: { control: Dialog.DialogControlProps onCloseWithoutVerifying?: () => void @@ -33,11 +35,12 @@ export function VerifyEmailDialog({ * helps reduce duplication, since these dialogs are often used together. */ changeEmailControl?: Dialog.DialogControlProps + reminder?: boolean }) { const agent = useAgent() const fallbackChangeEmailControl = Dialog.useDialogControl() - const [didVerify, setDidVerify] = React.useState(false) + const [didVerify, setDidVerify] = useState(false) return ( <> @@ -62,6 +65,7 @@ export function VerifyEmailDialog({ setDidVerify={setDidVerify} reasonText={reasonText} changeEmailControl={changeEmailControl ?? fallbackChangeEmailControl} + reminder={reminder} /> {!changeEmailControl && ( @@ -78,25 +82,34 @@ export function Inner({ setDidVerify, reasonText, changeEmailControl, + reminder, }: { setDidVerify: (value: boolean) => void reasonText?: string changeEmailControl: Dialog.DialogControlProps + reminder?: boolean }) { const control = Dialog.useDialogContext() const {_} = useLingui() const {currentAccount} = useSession() const agent = useAgent() const {gtMobile} = useBreakpoints() + const t = useTheme() - const [currentStep, setCurrentStep] = React.useState< - 'StepOne' | 'StepTwo' | 'StepThree' - >('StepOne') - const [confirmationCode, setConfirmationCode] = React.useState('') - const [isProcessing, setIsProcessing] = React.useState(false) - const [error, setError] = React.useState('') + const [currentStep, setCurrentStep] = useState< + 'Reminder' | 'StepOne' | 'StepTwo' | 'StepThree' + >(reminder ? 'Reminder' : 'StepOne') + const [confirmationCode, setConfirmationCode] = useState('') + const [isProcessing, setIsProcessing] = useState(false) + const [error, setError] = useState('') const uiStrings = { + Reminder: { + title: _(msg`Please Verify Your Email`), + message: _( + msg`Your email has not yet been verified. This is an important security step which we recommend.`, + ), + }, StepOne: { title: _(msg`Verify Your Email`), message: '', @@ -151,6 +164,17 @@ export function Inner({ style={web({maxWidth: 450})}> + {currentStep === 'Reminder' && ( + + + + )} {uiStrings[currentStep].title} @@ -233,7 +257,32 @@ export function Inner({ ) : null} - {currentStep === 'StepOne' ? ( + {currentStep === 'Reminder' ? ( + <> + + + + ) : currentStep === 'StepOne' ? ( <> ) : currentStep === 'StepThree' ? (