Merge pull request #4878 from Giveth/fix/email_verification

Fix modal interaction for email verification flow

lang/ca.json

@@ -400,6 +400,7 @@
 	"label.email_modal_verifying": "Verificar la teva adreça de correu electrònic assegura que puguem comunicar-nos amb tu sobre qualsevol canvi important a la plataforma. La teva adreça de correu electrònic no es compartirà públicament.",
 	"label.email_modal_to_verifying": "Per verificar la teva adreça de correu electrònic, edita el teu perfil i actualitza el teu correu electrònic.",
 	"label.email_modal_button": "Actualitza el perfil",
+	"label.email_tooltip": "Edita el teu perfil des de \"El meu compte\" i verifica la teva adreça de correu electrònic per continuar",
 	"label.enable_change": "Habilita el canvi",
 	"label.enable_recurring_donations": "Habilitar Donacions Recurrents",
 	"label.ends_on": "acaba el",

lang/en.json

@@ -400,9 +400,7 @@
 	"label.email_modal_verifying": "Verifying your email address ensures we can communicate with you about any important changes on the platform. Your email address will not be shared publicly.",
 	"label.email_modal_to_verifying": "To verify your email address edit your profile and update your email.",
 	"label.email_modal_button": "Update profile",
-
-
-
+	"label.email_tooltip": "Edit your profile from \"My Account\" and verify your email address to continue",
 	"label.enable_change": "Enable Change",
 	"label.enable_recurring_donations": "Enable Recurring Donations",
 	"label.ends_on": "ends on",

lang/es.json

@@ -400,6 +400,7 @@
 	"label.email_modal_verifying": "Verificar tu dirección de correo electrónico asegura que podamos comunicarnos contigo sobre cualquier cambio importante en la plataforma. Tu dirección de correo electrónico no se compartirá públicamente.",
 	"label.email_modal_to_verifying": "Para verificar tu dirección de correo electrónico, edita tu perfil y actualiza tu correo electrónico.",
 	"label.email_modal_button": "Actualizar perfil",
+	"label.email_tooltip": "Edita tu perfil desde \"Mi cuenta\" y verifica tu dirección de correo electrónico para continuar",
 	"label.enable_change": "Ayuda al Cambio",
 	"label.enable_recurring_donations": "Habilitar Donaciones Recurrentes",
 	"label.ends_on": "termina el",

pages/account.tsx

@@ -6,7 +6,6 @@ import WalletNotConnected from '@/components/WalletNotConnected';
 import UserNotSignedIn from '@/components/UserNotSignedIn';
 import UserProfileView from '@/components/views/userProfile/UserProfile.view';
 import { ProfileProvider } from '@/context/profile.context';
-import VerifyEmailBanner from '@/components/views/userProfile/VerifyEmailBanner';
 
 const AccountRoute = () => {
 	const { isSignedIn, isEnabled, userData, isLoading } = useAppSelector(
@@ -28,7 +27,6 @@ const AccountRoute = () => {
 				<title>{userData?.name} | Giveth</title>
 			</Head>
 			<ProfileProvider user={userData!} myAccount>
-				{!userData?.isEmailVerified && <VerifyEmailBanner />}
 				<UserProfileView />
 			</ProfileProvider>
 		</>

src/components/modals/EditUserModal.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import Image from 'next/image';
+import { useRouter } from 'next/router';
 import { useMutation } from '@apollo/client';
 import { Button, brandColors, FlexCenter } from '@giveth/ui-design-system';
 import { captureException } from '@sentry/nextjs';
@@ -43,6 +44,7 @@ const EditUserModal = ({
 	user,
 	setShowProfilePicModal,
 }: IEditUserModal) => {
+	const router = useRouter();
 	const { formatMessage } = useIntl();
 	const [isLoading, setIsLoading] = useState(false);
 	const { onDelete } = useUpload();
@@ -106,6 +108,16 @@ const EditUserModal = ({
 					title: 'Success',
 				});
 				closeModal();
+
+				// Reset router query
+				router.push(
+					{
+						pathname: router.pathname,
+						query: {},
+					},
+					undefined,
+					{ shallow: true },
+				);
 			} else {
 				throw 'Update User Failed.';
 			}

src/components/views/project/ProjectGIVbackToast.tsx

@@ -353,7 +353,7 @@ const ProjectGIVbackToast = () => {
 	}, [isUserLoading, router]);
 
 	return (
-		<>
+		<ContentWrapper>
 			<Wrapper $isverified={isAdminEmailVerified}>
 				<Content>
 					{icon}
@@ -384,7 +384,12 @@ const ProjectGIVbackToast = () => {
 			{showVerification && (
 				<VerificationModal onClose={() => setShowVerification(false)} />
 			)}
-		</>
+			{!isAdminEmailVerified && (
+				<TooltipWrapper>
+					{formatMessage({ id: 'label.email_tooltip' })}
+				</TooltipWrapper>
+			)}
+		</ContentWrapper>
 	);
 };
 
@@ -430,6 +435,32 @@ const Content = styled(Flex)`
 	}
 `;
 
+const TooltipWrapper = styled.div`
+	position: absolute;
+	bottom: 100%;
+	left: 50%;
+	transform: translateX(-50%);
+	background: #1a1a1a;
+	color: #fff;
+	padding: 8px 12px;
+	border-radius: 4px;
+	font-size: 12px;
+	white-space: nowrap;
+	opacity: 0;
+	visibility: hidden;
+	transition:
+		opacity 0.2s ease-in-out,
+		visibility 0.2s ease-in-out;
+`;
+
+const ContentWrapper = styled.div`
+	position: relative;
+	&:hover ${TooltipWrapper} {
+		visibility: visible;
+		opacity: 1;
+	}
+`;
+
 const Wrapper = styled(Flex)<{ $isverified: boolean }>`
 	justify-content: space-between;
 	align-items: center;
@@ -442,6 +473,7 @@ const Wrapper = styled(Flex)<{ $isverified: boolean }>`
 	${mediaQueries.laptopL} {
 		flex-direction: row;
 	}
+	pointer-events: ${({ $isverified }) => ($isverified ? 'auto' : 'none')};
 	opacity: ${({ $isverified }) => ($isverified ? '1' : '0.75')};
 `;
 

src/components/views/userProfile/UserProfile.view.tsx

@@ -43,6 +43,7 @@ import { buildUsersPfpInfoQuery } from '@/lib/subgraph/pfpQueryBuilder';
 import { IGiverPFPToken } from '@/apollo/types/types';
 import { useProfileContext } from '@/context/profile.context';
 import { useGeneralWallet } from '@/providers/generalWalletProvider';
+import VerifyEmailBanner from './VerifyEmailBanner';
 
 export interface IUserProfileView {}
 
@@ -123,6 +124,9 @@ const UserProfileView: FC<IUserProfileView> = () => {
 		);
 	return (
 		<>
+			{!user?.isEmailVerified && (
+				<VerifyEmailBanner setShowModal={setShowModal} />
+			)}
 			<ProfileHeader>
 				<Container>
 					{showCompleteProfile && (

src/components/views/userProfile/VerifyEmailBanner.tsx

@@ -4,7 +4,11 @@ import { brandColors, FlexCenter } from '@giveth/ui-design-system';
 import { FormattedMessage } from 'react-intl';
 import Routes from '@/lib/constants/Routes';
 
-const VerifyEmailBanner = () => {
+const VerifyEmailBanner = ({
+	setShowModal,
+}: {
+	setShowModal?: (value: boolean) => void;
+}) => {
 	const router = useRouter();
 	return (
 		<Wrapper>
@@ -16,14 +20,21 @@ const VerifyEmailBanner = () => {
 							<button
 								type='button'
 								onClick={() => {
-									router.push(
-										{
-											pathname: Routes.MyAccount,
-											query: { opencheck: 'true' },
-										},
-										undefined,
-										{ shallow: true },
-									);
+									if (
+										router.pathname === Routes.MyAccount &&
+										router.query.opencheck === 'true'
+									) {
+										setShowModal?.(true);
+									} else {
+										router.push(
+											{
+												pathname: Routes.MyAccount,
+												query: { opencheck: 'true' },
+											},
+											undefined,
+											{ shallow: true },
+										);
+									}
 								}}
 							>
 								{chunks}