diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/StarterPack/ProfileStarterPacks.tsx | 27 | ||||
| -rw-r--r-- | src/components/dialogs/VerifyEmailDialog.tsx | 62 | ||||
| -rw-r--r-- | src/components/dms/MessageProfileButton.tsx | 56 | ||||
| -rw-r--r-- | src/components/dms/dialogs/NewChatDialog.tsx | 20 |
4 files changed, 126 insertions, 39 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> ) } diff --git a/src/components/dialogs/VerifyEmailDialog.tsx b/src/components/dialogs/VerifyEmailDialog.tsx index 8dfb9bc49..d4412b6f8 100644 --- a/src/components/dialogs/VerifyEmailDialog.tsx +++ b/src/components/dialogs/VerifyEmailDialog.tsx @@ -18,8 +18,14 @@ import {Text} from '#/components/Typography' export function VerifyEmailDialog({ control, + onCloseWithoutVerifying, + onCloseAfterVerifying, + reasonText, }: { control: Dialog.DialogControlProps + onCloseWithoutVerifying?: () => void + onCloseAfterVerifying?: () => void + reasonText?: string }) { const agent = useAgent() @@ -30,18 +36,24 @@ export function VerifyEmailDialog({ control={control} onClose={async () => { if (!didVerify) { + onCloseWithoutVerifying?.() return } try { await agent.resumeSession(agent.session!) + onCloseAfterVerifying?.() } catch (e: unknown) { logger.error(String(e)) return } }}> <Dialog.Handle /> - <Inner control={control} setDidVerify={setDidVerify} /> + <Inner + control={control} + setDidVerify={setDidVerify} + reasonText={reasonText} + /> </Dialog.Outer> ) } @@ -49,9 +61,11 @@ export function VerifyEmailDialog({ export function Inner({ control, setDidVerify, + reasonText, }: { control: Dialog.DialogControlProps setDidVerify: (value: boolean) => void + reasonText?: string }) { const {_} = useLingui() const {currentAccount} = useSession() @@ -135,26 +149,32 @@ export function Inner({ <Text style={[a.text_md, a.leading_snug]}> {currentStep === 'StepOne' ? ( <> - <Trans> - You'll receive an email at{' '} - <Text style={[a.text_md, a.leading_snug, a.font_bold]}> - {currentAccount?.email} - </Text>{' '} - to verify it's you. - </Trans>{' '} - <InlineLinkText - to="#" - label={_(msg`Change email address`)} - style={[a.text_md, a.leading_snug]} - onPress={e => { - e.preventDefault() - control.close(() => { - openModal({name: 'change-email'}) - }) - return false - }}> - <Trans>Need to change it?</Trans> - </InlineLinkText> + {!reasonText ? ( + <> + <Trans> + You'll receive an email at{' '} + <Text style={[a.text_md, a.leading_snug, a.font_bold]}> + {currentAccount?.email} + </Text>{' '} + to verify it's you. + </Trans>{' '} + <InlineLinkText + to="#" + label={_(msg`Change email address`)} + style={[a.text_md, a.leading_snug]} + onPress={e => { + e.preventDefault() + control.close(() => { + openModal({name: 'change-email'}) + }) + return false + }}> + <Trans>Need to change it?</Trans> + </InlineLinkText> + </> + ) : ( + reasonText + )} </> ) : ( uiStrings[currentStep].message diff --git a/src/components/dms/MessageProfileButton.tsx b/src/components/dms/MessageProfileButton.tsx index 932982d05..22936b4c0 100644 --- a/src/components/dms/MessageProfileButton.tsx +++ b/src/components/dms/MessageProfileButton.tsx @@ -3,14 +3,18 @@ import {View} from 'react-native' import {AppBskyActorDefs} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' +import {useEmail} from '#/lib/hooks/useEmail' +import {NavigationProp} from '#/lib/routes/types' import {logEvent} from '#/lib/statsig/statsig' import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-members' import {atoms as a, useTheme} from '#/alf' -import {ButtonIcon} from '#/components/Button' +import {Button, ButtonIcon} from '#/components/Button' import {canBeMessaged} from '#/components/dms/util' import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message' -import {Link} from '#/components/Link' +import {useDialogControl} from '../Dialog' +import {VerifyEmailDialog} from '../dialogs/VerifyEmailDialog' export function MessageProfileButton({ profile, @@ -19,15 +23,29 @@ export function MessageProfileButton({ }) { const {_} = useLingui() const t = useTheme() + const navigation = useNavigation<NavigationProp>() + const {needsEmailVerification} = useEmail() + const verifyEmailControl = useDialogControl() const {data: convo, isPending} = useMaybeConvoForUser(profile.did) const onPress = React.useCallback(() => { + if (!convo?.id) { + return + } + + if (needsEmailVerification) { + verifyEmailControl.open() + return + } + if (convo && !convo.lastMessage) { logEvent('chat:create', {logContext: 'ProfileHeader'}) } logEvent('chat:open', {logContext: 'ProfileHeader'}) - }, [convo]) + + navigation.navigate('MessagesConversation', {conversation: convo.id}) + }, [needsEmailVerification, verifyEmailControl, convo, navigation]) if (isPending) { // show pending state based on declaration @@ -53,18 +71,26 @@ export function MessageProfileButton({ if (convo) { return ( - <Link - testID="dmBtn" - size="small" - color="secondary" - variant="solid" - shape="round" - label={_(msg`Message ${profile.handle}`)} - to={`/messages/${convo.id}`} - style={[a.justify_center]} - onPress={onPress}> - <ButtonIcon icon={Message} size="md" /> - </Link> + <> + <Button + accessibilityRole="button" + testID="dmBtn" + size="small" + color="secondary" + variant="solid" + shape="round" + label={_(msg`Message ${profile.handle}`)} + style={[a.justify_center]} + onPress={onPress}> + <ButtonIcon icon={Message} size="md" /> + </Button> + <VerifyEmailDialog + reasonText={_( + msg`Before you may message another user, you must first verify your email.`, + )} + control={verifyEmailControl} + /> + </> ) } else { return null diff --git a/src/components/dms/dialogs/NewChatDialog.tsx b/src/components/dms/dialogs/NewChatDialog.tsx index e80fef2d7..f402201a2 100644 --- a/src/components/dms/dialogs/NewChatDialog.tsx +++ b/src/components/dms/dialogs/NewChatDialog.tsx @@ -2,6 +2,7 @@ import React, {useCallback} from 'react' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useEmail} from '#/lib/hooks/useEmail' import {logEvent} from '#/lib/statsig/statsig' import {logger} from '#/logger' import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members' @@ -9,6 +10,8 @@ import {FAB} from '#/view/com/util/fab/FAB' import * as Toast from '#/view/com/util/Toast' import {useTheme} from '#/alf' import * as Dialog from '#/components/Dialog' +import {useDialogControl} from '#/components/Dialog' +import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog' import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' import {SearchablePeopleList} from './SearchablePeopleList' @@ -21,6 +24,8 @@ export function NewChat({ }) { const t = useTheme() const {_} = useLingui() + const {needsEmailVerification} = useEmail() + const verifyEmailControl = useDialogControl() const {mutate: createChat} = useGetConvoForMembers({ onSuccess: data => { @@ -48,7 +53,13 @@ export function NewChat({ <> <FAB testID="newChatFAB" - onPress={control.open} + onPress={() => { + if (needsEmailVerification) { + verifyEmailControl.open() + } else { + control.open() + } + }} icon={<Plus size="lg" fill={t.palette.white} />} accessibilityRole="button" accessibilityLabel={_(msg`New chat`)} @@ -62,6 +73,13 @@ export function NewChat({ onSelectChat={onCreateChat} /> </Dialog.Outer> + + <VerifyEmailDialog + reasonText={_( + msg`Before you may message another user, you must first verify your email.`, + )} + control={verifyEmailControl} + /> </> ) } |