Feat/issue 4612

lang/ca.json

@@ -1300,6 +1300,8 @@
 	"label.we_need_a_bit_more_info": "Necessitem una mica més d'informació!",
 	"label.passport_connected": "Passaport connectat",
 	"label.increase_passport_score": "Augmenta la puntuació del passaport",
+	"label.project_owner_address_detected": "Adreça del propietari del projecte detectada",
+    "label.project_owner_cant_donate_to_own_project": "No pots donar a un projecte del qual ets propietari. Hi ha milers de projectes a Giveth que busquen el teu suport! Si us plau, tria un altre projecte per donar.",
 	"label.qf_donor_eligibility.banner.check_eligibility": "Fes que les teves donacions es igualin! Verifica la teva unicitat amb un clic.",
 	"label.qf_donor_eligibility.banner.recheck_eligibility": "Fes que les teves donacions es igualin! Augmenta la teva puntuació de Gitcoin Passport abans de",
 	"label.qf_donor_eligibility.banner.more_info_needed": "Necessitem una mica més d'informació per verificar la teva elegibilitat per QF!",

lang/en.json

@@ -1304,6 +1304,8 @@
 	"label.we_need_a_bit_more_info": "We need a bit more info!",
 	"label.passport_connected": "Passport connected",
 	"label.increase_passport_score": "Increase Passport score",
+	"label.project_owner_address_detected": "Project Owner Address Detected",
+	"label.project_owner_cant_donate_to_own_project": "You cannot donate to a project you are the owner of. There are thousands of projects on Giveth looking for your support! Please choose another project to donate to.",
 	"label.qf_donor_eligibility.banner.check_eligibility": "Get your donations matched! Verify your uniqueness with one click.",
 	"label.qf_donor_eligibility.banner.recheck_eligibility": "Get your donations matched! Increase your Gitcoin Passport score before",
 	"label.qf_donor_eligibility.banner.more_info_needed": "We need a bit more information to verify your QF Eligibility!",

lang/es.json

@@ -1300,6 +1300,8 @@
 	"label.we_need_a_bit_more_info": "¡Necesitamos un poco más de información!",
 	"label.passport_connected": "Pasaporte conectado",
 	"label.increase_passport_score": "Aumentar la puntuación del pasaporte",
+	"label.project_owner_address_detected": "Dirección del propietario del proyecto detectada",
+	"label.project_owner_cant_donate_to_own_project": "No puedes donar a un proyecto del que eres propietario. ¡Hay miles de proyectos en Giveth que buscan tu apoyo! Por favor, elige otro proyecto para donar.",
 	"label.qf_donor_eligibility.banner.check_eligibility": "¡Haz que tus donaciones sean igualadas! Verifica tu unicidad con un clic.",
 	"label.qf_donor_eligibility.banner.recheck_eligibility": "¡Haz que tus donaciones sean igualadas! Aumenta tu puntuación de Gitcoin Passport antes de",
 	"label.qf_donor_eligibility.banner.more_info_needed": "¡Necesitamos un poco más de información para verificar tu elegibilidad para QF!",

src/components/modals/DonationByProjectOwner.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import {
+	brandColors,
+	Button,
+	IconAlertTriangleFilled32,
+	Lead,
+	neutralColors,
+} from '@giveth/ui-design-system';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { useRouter } from 'next/router';
+import { Modal } from '@/components/modals/Modal';
+import Routes from '@/lib/constants/Routes';
+import { mediaQueries } from '@/lib/constants/constants';
+import { useModalAnimation } from '@/hooks/useModalAnimation';
+
+// Define the props interface
+interface DonationByProjectOwnerProps {
+	setShowDonationByProjectOwner: (
+		showDonationByProjectOwner: boolean,
+	) => void;
+}
+
+export const DonationByProjectOwner: React.FC<DonationByProjectOwnerProps> = ({
+	setShowDonationByProjectOwner,
+}) => {
+	const { formatMessage } = useIntl();
+	const router = useRouter();
+	const { closeModal } = useModalAnimation(setShowDonationByProjectOwner);
+
+	const navigateToAllProjects = () => {
+		router.push(Routes.AllProjects);
+		closeModal();
+	};
+
+	return (
+		<Modal
+			closeModal={closeModal}
+			isAnimating={false}
+			headerTitle={formatMessage({
+				id: 'label.project_owner_address_detected',
+			})}
+			headerTitlePosition='left'
+			hiddenClose={true}
+			headerIcon={<IconAlertTriangleFilled32 size={32} />}
+			doNotCloseOnClickOutside
+		>
+			<ModalContainer>
+				<ModalBox>
+					<Lead>
+						{formatMessage({
+							id: 'label.project_owner_cant_donate_to_own_project',
+						})}
+					</Lead>
+				</ModalBox>
+				<Buttons>
+					<ModalButton
+						buttonType='primary'
+						disabled={false}
+						label={formatMessage({
+							id: 'label.view_all_projects',
+						})}
+						onClick={navigateToAllProjects} // Navigate to the All Projects route
+					/>
+				</Buttons>
+			</ModalContainer>
+		</Modal>
+	);
+};
+
+const ModalContainer = styled.div`
+	background: white;
+	color: black;
+	padding: 24px 24px 38px;
+	margin: 0;
+	width: 100%;
+
+	${mediaQueries.tablet} {
+		width: 494px;
+	}
+`;
+
+const ModalBox = styled.div`
+	color: ${brandColors.deep[900]};
+
+	> :first-child {
+		margin-bottom: 8px;
+	}
+
+	h3 {
+		margin-top: -5px;
+	}
+
+	h6 {
+		color: ${neutralColors.gray[700]};
+		margin-top: -5px;
+	}
+
+	> :last-child {
+		margin: 12px 0 32px 0;
+
+		> span {
+			font-weight: 500;
+		}
+	}
+`;
+
+const ModalButton = styled(Button)`
+	background: ${props =>
+		props.disabled ? brandColors.giv[200] : brandColors.giv[500]};
+
+	&:hover:enabled {
+		background: ${brandColors.giv[700]};
+	}
+
+	:disabled {
+		cursor: not-allowed;
+	}
+
+	> :first-child > div {
+		border-top: 3px solid ${brandColors.giv[200]};
+		animation-timing-function: linear;
+	}
+
+	text-transform: uppercase;
+`;
+
+const Buttons = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+
+	> :first-child {
+		margin: 15px 0;
+	}
+`;
+
+export default DonationByProjectOwner;

src/components/views/donate/DonateIndex.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import {
 	Col,
@@ -45,6 +45,7 @@ import { useQRCodeDonation } from '@/hooks/useQRCodeDonation';
 import EndaomentProjectsInfo from '@/components/views/project/EndaomentProjectsInfo';
 import { IDraftDonation } from '@/apollo/types/gqlTypes';
 import StorageLabel from '@/lib/localStorage';
+import DonationByProjectOwner from '@/components/modals/DonationByProjectOwner';
 
 const DonateIndex: FC = () => {
 	const { formatMessage } = useIntl();
@@ -66,12 +67,14 @@ const DonateIndex: FC = () => {
 	const { isSignedIn, isEnabled } = useAppSelector(state => state.user);
 
 	const alreadyDonated = useAlreadyDonatedToProject(project);
+	const { userData } = useAppSelector(state => state.user);
+	const [showDonationByProjectOwner, setShowDonationByProjectOwner] =
+		useState<boolean | undefined>(false);
 	const dispatch = useAppDispatch();
 	const isSafeEnv = useIsSafeEnvironment();
 	const { isOnSolana } = useGeneralWallet();
 	const router = useRouter();
 	const { chainId } = useAccount();
-
 	const [showQRCode, setShowQRCode] = React.useState(
 		!!router.query.draft_donation,
 	);
@@ -84,6 +87,12 @@ const DonateIndex: FC = () => {
 		};
 	}, [dispatch]);
 
+	useEffect(() => {
+		setShowDonationByProjectOwner(
+			userData?.id !== undefined && userData?.id === project.adminUser.id,
+		);
+	}, [userData?.id, project.adminUser]);
+
 	useEffect(() => {
 		const fetchDonation = async () => {
 			if (qrDonationStatus === 'success') {
@@ -212,6 +221,13 @@ const DonateIndex: FC = () => {
 		<>
 			<DonateHeader />
 			<DonateContainer>
+				{showDonationByProjectOwner && (
+					<DonationByProjectOwner
+						setShowDonationByProjectOwner={
+							setShowDonationByProjectOwner
+						}
+					/>
+				)}
 				{alreadyDonated && (
 					<AlreadyDonatedWrapper>
 						<IconDonation24 />