diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 424d73290e..1fd8dc439e 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -104,8 +104,11 @@ 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 { + EmailDialog, + EmailDialogScreenID, + useEmailDialogControl, +} from '#/components/dialogs/EmailDialog' import {router} from '#/routes' import {Referrer} from '../modules/expo-bluesky-swiss-army' @@ -738,12 +741,14 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) { const theme = useColorSchemeStyle(DefaultTheme, DarkTheme) const {currentAccount} = useSession() const prevLoggedRouteName = React.useRef(undefined) - const verifyEmailDialogControl = useDialogControl() + const emailDialogControl = useEmailDialogControl() function onReady() { prevLoggedRouteName.current = getCurrentRouteName() if (currentAccount && shouldRequestEmailConfirmation(currentAccount)) { - verifyEmailDialogControl.open() + emailDialogControl.open({ + id: EmailDialogScreenID.VerificationReminder, + }) snoozeEmailConfirmationPrompt() } } @@ -768,7 +773,7 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) { }}> {children} - + ) } diff --git a/src/components/dialogs/EmailDialog/index.tsx b/src/components/dialogs/EmailDialog/index.tsx index 52cb4d202f..3787bf9491 100644 --- a/src/components/dialogs/EmailDialog/index.tsx +++ b/src/components/dialogs/EmailDialog/index.tsx @@ -13,6 +13,7 @@ import {Manage2FA} from '#/components/dialogs/EmailDialog/screens/Manage2FA' * Steps */ import {Update} from '#/components/dialogs/EmailDialog/screens/Update' +import {VerificationReminder} from '#/components/dialogs/EmailDialog/screens/VerificationReminder' import {Verify} from '#/components/dialogs/EmailDialog/screens/Verify' import {type Screen, ScreenID} from '#/components/dialogs/EmailDialog/types' @@ -57,10 +58,13 @@ function Inner({control}: {control: StatefulControl}) { switch (screen.id) { case ScreenID.Update: { - return + return } case ScreenID.Verify: { - return + return + } + case ScreenID.VerificationReminder: { + return } case ScreenID.Manage2FA: { return diff --git a/src/components/dialogs/EmailDialog/screens/Manage2FA/index.tsx b/src/components/dialogs/EmailDialog/screens/Manage2FA/index.tsx index 739b7d4816..8a7fdcc140 100644 --- a/src/components/dialogs/EmailDialog/screens/Manage2FA/index.tsx +++ b/src/components/dialogs/EmailDialog/screens/Manage2FA/index.tsx @@ -4,18 +4,13 @@ import {Trans} from '@lingui/macro' import {useSession} from '#/state/session' import {useIsEmailVerified} from '#/components/dialogs/EmailDialog/data/useIsEmailVerified' import {Disable} from '#/components/dialogs/EmailDialog/screens/Manage2FA/Disable' -/** - * Sub-screens - */ import {Enable} from '#/components/dialogs/EmailDialog/screens/Manage2FA/Enable' -import {type Screen, ScreenID} from '#/components/dialogs/EmailDialog/types' +import { + ScreenID, + type ScreenProps, +} from '#/components/dialogs/EmailDialog/types' -export function Manage2FA({ - showScreen, -}: { - config: Extract - showScreen: (screen: Screen) => void -}) { +export function Manage2FA({showScreen}: ScreenProps) { const [requestedAction, setRequestedAction] = useState< 'enable' | 'disable' | null >(null) diff --git a/src/components/dialogs/EmailDialog/screens/Update.tsx b/src/components/dialogs/EmailDialog/screens/Update.tsx index 49ba902269..592372f895 100644 --- a/src/components/dialogs/EmailDialog/screens/Update.tsx +++ b/src/components/dialogs/EmailDialog/screens/Update.tsx @@ -15,7 +15,10 @@ import {TokenField} from '#/components/dialogs/EmailDialog/components/TokenField import {useRequestEmailUpdate} from '#/components/dialogs/EmailDialog/data/useRequestEmailUpdate' import {useRequestEmailVerification} from '#/components/dialogs/EmailDialog/data/useRequestEmailVerification' import {useUpdateEmail} from '#/components/dialogs/EmailDialog/data/useUpdateEmail' -import {type Screen} from '#/components/dialogs/EmailDialog/types' +import { + type ScreenID, + type ScreenProps, +} from '#/components/dialogs/EmailDialog/types' import {Divider} from '#/components/Divider' import * as TextField from '#/components/forms/TextField' import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' @@ -96,7 +99,7 @@ function reducer(state: State, action: Action): State { } } -export function Update(_props: {config: Exclude}) { +export function Update(_props: ScreenProps) { const t = useTheme() const {_} = useLingui() const {currentAccount} = useSession() diff --git a/src/components/dialogs/EmailDialog/screens/VerificationReminder.tsx b/src/components/dialogs/EmailDialog/screens/VerificationReminder.tsx new file mode 100644 index 0000000000..295fbf8bec --- /dev/null +++ b/src/components/dialogs/EmailDialog/screens/VerificationReminder.tsx @@ -0,0 +1,83 @@ +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {atoms as a, tokens,useBreakpoints, useTheme} from '#/alf' +import {Button, ButtonText} from '#/components/Button' +import {useDialogContext} from '#/components/Dialog' +import { + ScreenID, + type ScreenProps, +} from '#/components/dialogs/EmailDialog/types' +import {Divider} from '#/components/Divider' +import {GradientFill} from '#/components/GradientFill' +import {ShieldCheck_Stroke2_Corner0_Rounded as ShieldIcon} from '#/components/icons/Shield' +import {Text} from '#/components/Typography' + +export function VerificationReminder({ + showScreen, +}: ScreenProps) { + const t = useTheme() + const {_} = useLingui() + const {gtPhone} = useBreakpoints() + const control = useDialogContext() + + return ( + + + + + + + + + Please verify your email + + + + Your email has not yet been verified. Please verify your email in + order to enjoy all the features of Bluesky. + + + + + + + + + + + + ) +} diff --git a/src/components/dialogs/EmailDialog/screens/Verify.tsx b/src/components/dialogs/EmailDialog/screens/Verify.tsx index e95097a971..adca558ad0 100644 --- a/src/components/dialogs/EmailDialog/screens/Verify.tsx +++ b/src/components/dialogs/EmailDialog/screens/Verify.tsx @@ -14,7 +14,10 @@ import {TokenField} from '#/components/dialogs/EmailDialog/components/TokenField import {useConfirmEmail} from '#/components/dialogs/EmailDialog/data/useConfirmEmail' import {useIsEmailVerified} from '#/components/dialogs/EmailDialog/data/useIsEmailVerified' import {useRequestEmailVerification} from '#/components/dialogs/EmailDialog/data/useRequestEmailVerification' -import {type Screen} from '#/components/dialogs/EmailDialog/types' +import { + type ScreenID, + type ScreenProps, +} from '#/components/dialogs/EmailDialog/types' import {Divider} from '#/components/Divider' import {CheckThick_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' @@ -81,7 +84,7 @@ function reducer(state: State, action: Action): State { } } -export function Verify({config}: {config: Extract}) { +export function Verify({config}: ScreenProps) { const t = useTheme() const {_} = useLingui() const {currentAccount} = useSession() diff --git a/src/components/dialogs/EmailDialog/types.ts b/src/components/dialogs/EmailDialog/types.ts index da6e5e091f..daac933389 100644 --- a/src/components/dialogs/EmailDialog/types.ts +++ b/src/components/dialogs/EmailDialog/types.ts @@ -18,6 +18,9 @@ export type Screen = hideInitialCodeButton?: boolean onVerify?: () => void } + | { + id: ScreenID.VerificationReminder + } | { id: ScreenID.Manage2FA } @@ -25,5 +28,11 @@ export type Screen = export enum ScreenID { Update = 'Update', Verify = 'Verify', + VerificationReminder = 'VerificationReminder', Manage2FA = 'Manage2FA', } + +export type ScreenProps = { + config: Extract + showScreen: (screen: Screen) => void +}