Merge pull request #4312 from Giveth/add-delete-action-to-draft-projects

Add delete action to draft projects UI

.env.example

@@ -20,7 +20,6 @@ NEXT_PUBLIC_AUTH_BASE_ROUTE=
 NEXT_PUBLIC_NOTIFICATION_BASE_ROUTE=
 NEXT_PUBLIC_BACKEND_LINK=
 NEXT_PUBLIC_FRONTEND_LINK=
-NEXT_PUBLIC_ENABLE_SOLANA=
 
 # backup donation service
 MONGO_DONATION_URL=
@@ -29,7 +28,9 @@ MONGO_DONATION_COLLECTION=
 MONGO_DONATION_DATA_SOURCE=
 MONGO_DONATION_DATABASE=
 
+#FeatureFlags
 NEXT_PUBLIC_NOTIFICATION_CENTER_ENABLED=
+NEXT_PUBLIC_PROJECT_DELETE=
 
 # Set to 'true' to enable maintenance mode across the application 
 NEXT_PUBLIC_IS_MAINTENANCE=

lang/ca.json

@@ -28,6 +28,9 @@
 	"component.button.tweet_this": "Tweeteja-ho",
 	"component.button.your_email_address": "La teva adreça de correu electrònic",
 	"component.create_project.low_score": "La puntuació del teu projecte està per sota de la puntuació mínima de 50, afegeix més detalls al teu projecte per procedir",
+	"component.delete_project.confirmation": "Estàs segur que vols eliminar {title} permanentment?",
+	"component.delete_project.no": "No, Conserva'l",
+	"component.delete_project.yes": "Sí, Elimina el projecte",
 	"component.donation_section.100_to_the_project": "El 100% va sempre al projecte.",
 	"component.donation_section.desc": "Cada donació és de persona a persona, sense comissions ni intermediaris.",
 	"component.donation_section.learn_zero_fee": "Aprèn sobre la nostra política de zero comissions",
@@ -294,6 +297,7 @@
 	"label.deactivate_project": "Desactivar projecte",
 	"label.delete": "Esborrar",
 	"label.delete_pic": "Eliminar imatge",
+	"label.delete_project": "Esborrar projecte",
 	"label.deposit": "Dipòsit",
 	"label.depositing": "Dipositant",
 	"label.deposit_confirmed": "Dipòsit confirmat",
@@ -1253,11 +1257,11 @@
 	"page.about_us.desc.one": "Giveth és una comunitat centrada en la construcció del Futur de les Donacions utilitzant la tecnologia blockchain. La nostra intenció és donar suport i recompensar la finançament de béns públics creant accés obert, transparent i gratuït a les oportunitats de finançament innovadores en l'ecosistema d'Ethereum.",
 	"page.about_us.desc.two": "Giveth està construint una cultura de donació que capacita i recompensa als qui donen, als projectes, a la societat i al món. El nostre objectiu és inspirar la nostra comunitat a participar en un ecosistema de suport col·lectiu, d'abundància i de creació de valor. Comproveu el nostre",
 	"page.donate.bank_fees": "Comissions Bancàries",
-	"page.donate.matching_toast.bottom_valid": "Els fons de finançament es destinaran al projecte seleccionat després que acabi la ronda. Dona a més projectes per rebre més finançament!",
 	"page.donate.matching_toast.bottom_invalid_p1": "Només donacions de més de",
 	"page.donate.matching_toast.bottom_invalid_p2": "són elegibles per a l'aparellament.",
-	"page.donate.matching_toast.upper_valid": "Emparellament estimat",
+	"page.donate.matching_toast.bottom_valid": "Els fons de finançament es destinaran al projecte seleccionat després que acabi la ronda. Dona a més projectes per rebre més finançament!",
 	"page.donate.matching_toast.upper_invalid": "Fes que compti",
+	"page.donate.matching_toast.upper_valid": "Emparellament estimat",
 	"page.donate.passport_toast.description.eligible": "La teva donació és elegible per ser emparellada! Després del",
 	"page.donate.passport_toast.description.eligible_2": ", totes les donacions seran revisades per a la protecció contra frau i els fons d'emparellament seran enviats als projectes. Estigues atent a les notificacions :)",
 	"page.donate.passport_toast.description.non_eligible": "Obtén el teu emparellament de donació amb finançament quadràtic!\nAugmenta la teva puntuació de Gitcoin Passport abans de",

lang/en.json

@@ -28,6 +28,9 @@
 	"component.button.tweet_this": "Tweet this",
 	"component.button.your_email_address": "Your email address",
 	"component.create_project.low_score": "Your project score is below the minimum score of 50, add more detail to your project to proceed",
+	"component.delete_project.confirmation": "Are you sure you want to remove {title} permanently?",
+	"component.delete_project.no": "No, Keep it",
+	"component.delete_project.yes": "Yes, Delete project",
 	"component.donation_section.100_to_the_project": "100% goes to the project always.",
 	"component.donation_section.desc": "Every donation is peer-to-peer, with no fees and no middlemen.",
 	"component.donation_section.learn_zero_fee": "Learn about our zero-fee policy",
@@ -294,6 +297,7 @@
 	"label.deactivate_project": "Deactivate project",
 	"label.delete": "Delete",
 	"label.delete_pic": "Delete picture",
+	"label.delete_project": "Delete Project",
 	"label.deposit": "Deposit",
 	"label.depositing": "Depositing",
 	"label.deposit_confirmed": "Deposit confirmed",
@@ -1253,11 +1257,11 @@
 	"page.about_us.desc.one": "Giveth is a community focused on Building the Future of Giving using blockchain technology. Our intention is to support and reward the funding of public goods by creating open, transparent and free access to the revolutionary funding opportunities available within the Ethereum ecosystem.",
 	"page.about_us.desc.two": "Giveth is building a culture of giving that empowers and rewards those who give -- to projects, to society, and to the world. We aim to inspire our community to participate in an ecosystem of collective support, abundance and value-creation. Check out our",
 	"page.donate.bank_fees": "Bank Fees",
-	"page.donate.matching_toast.bottom_valid": "Matching funds will be sent to the selected project after the round ends. Donate to more projects to receive higher matching!",
 	"page.donate.matching_toast.bottom_invalid_p1": "Only donations more than",
 	"page.donate.matching_toast.bottom_invalid_p2": "are eligible for matching.",
-	"page.donate.matching_toast.upper_valid": "Estimated matching",
+	"page.donate.matching_toast.bottom_valid": "Matching funds will be sent to the selected project after the round ends. Donate to more projects to receive higher matching!",
 	"page.donate.matching_toast.upper_invalid": "Make it count",
+	"page.donate.matching_toast.upper_valid": "Estimated matching",
 	"page.donate.passport_toast.description.eligible": "Your donation is eligible to be matched! After the",
 	"page.donate.passport_toast.description.eligible_2": ", all donations will be reviewed for fraud protection and matching funds will be sent to the projects.  Stay tuned for notifications :)",
 	"page.donate.passport_toast.description.non_eligible": "Get your donation matched with quadratic funding!\nIncrease your Gitcoin Passport score before",

lang/es.json

@@ -28,6 +28,9 @@
 	"component.button.tweet_this": "Tweetea esto",
 	"component.button.your_email_address": "Tu correo electrónico",
 	"component.create_project.low_score": "La puntuación de tu proyecto está por debajo de la puntuación mínima de 50, añade más detalles a tu proyecto para proceder",
+	"component.delete_project.confirmation": "¿Estás seguro de que quieres eliminar {project.title} permanentemente?",
+	"component.delete_project.no": "No, Conservarlo",
+	"component.delete_project.yes": "Sí, Eliminar proyecto",
 	"component.donation_section.100_to_the_project": "El 100% va al proyecto siempre.",
 	"component.donation_section.desc": "Cada donación es de persona a persona, sin tarifas y sin intermediarios.",
 	"component.donation_section.learn_zero_fee": "Conoce nuestra política de tarifas cero",
@@ -294,6 +297,7 @@
 	"label.deactivate_project": "Desactivar proyecto",
 	"label.delete": "Borrar",
 	"label.delete_pic": "Borrar imagen",
+	"label.delete_project": "Eliminar Proyecto",
 	"label.deposit": "Depósito",
 	"label.depositing": "Depositando",
 	"label.deposit_confirmed": "Depósito confirmado",
@@ -1253,11 +1257,11 @@
 	"page.about_us.desc.one": "Giveth es una comunidad enfocada en construir el Futuro de las Donaciones utilizando la tecnología blockchain. Nuestra intención es apoyar y recompensar la financiación de bienes públicos creando un acceso abierto, transparente y gratuito a las oportunidades de financiación innovadoras en el ecosistema de Ethereum.",
 	"page.about_us.desc.two": "Giveth está construyendo una cultura de donación que empodera y recompensa a los que donan, a los proyectos, a la sociedad y al mundo. Nuestro objetivo es inspirar a nuestra comunidad a participar en un ecosistema de apoyo colectivo, de abundancia y creación de valor. Echa un vistazo a nuestro",
 	"page.donate.bank_fees": "Comisiones Bancarias",
-	"page.donate.matching_toast.bottom_valid": "Los fondos de emparejamiento se enviarán al proyecto seleccionado después de que termine la ronda. ¡Dona a más proyectos para recibir un mayor emparejamiento!",
 	"page.donate.matching_toast.bottom_invalid_p1": "Sólo las donaciones superiores a",
 	"page.donate.matching_toast.bottom_invalid_p2": "son subvencionables.",
-	"page.donate.matching_toast.upper_valid": "Estimado del monto complementado",
+	"page.donate.matching_toast.bottom_valid": "Los fondos de emparejamiento se enviarán al proyecto seleccionado después de que termine la ronda. ¡Dona a más proyectos para recibir un mayor emparejamiento!",
 	"page.donate.matching_toast.upper_invalid": "Haz que cuente",
+	"page.donate.matching_toast.upper_valid": "Estimado del monto complementado",
 	"page.donate.passport_toast.description.eligible": "¡Tu donación es elegible para ser complementada! Después de la",
 	"page.donate.passport_toast.description.eligible_2": ", todas las donaciones serán revisadas para protección contra fraudes y los fondos de complementarios se enviarán a los proyectos. ¡Mantente atento a las notificaciones! :)",
 	"page.donate.passport_toast.description.non_eligible": "¡Haz que tu donación sea complementada con financiamiento cuadrático! Aumenta tu puntaje de Gitcoin Passport antes de",

src/components/views/userProfile/projectsTab/DeleteProjectModal.tsx

@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+import { type FC } from 'react';
+import { Button, Flex, IconTrash32, P } from '@giveth/ui-design-system';
+import { useIntl } from 'react-intl';
+import { IProject } from '@/apollo/types/types';
+import { Modal } from '@/components/modals/Modal';
+import { IModal } from '@/types/common';
+import { useModalAnimation } from '@/hooks/useModalAnimation';
+
+interface IDeleteProjectModal extends IModal {
+	project: IProject;
+}
+
+const DeleteProjectModal: FC<IDeleteProjectModal> = ({
+	setShowModal,
+	project,
+}) => {
+	const { formatMessage } = useIntl();
+	const { isAnimating, closeModal } = useModalAnimation(setShowModal);
+
+	return (
+		<Modal
+			closeModal={closeModal}
+			isAnimating={isAnimating}
+			headerTitle='Confirm Project Removal'
+			headerIcon={<IconTrash32 />}
+			headerTitlePosition='left'
+		>
+			<ModalContainer>
+				<P>
+					{formatMessage(
+						{
+							id: 'component.delete_project.confirmation',
+						},
+						{
+							title: project.title,
+						},
+					)}
+				</P>
+				<Flex gap='24px' $flexDirection='column' $alignItems='center'>
+					<Button
+						buttonType='primary'
+						label={formatMessage({
+							id: 'component.delete_project.yes',
+						})}
+						size='small'
+						onClick={() => setShowModal(true)}
+					/>
+					<Button
+						buttonType='texty-gray'
+						label={formatMessage({
+							id: 'component.delete_project.no',
+						})}
+						size='small'
+						onClick={() => setShowModal(false)}
+					/>
+				</Flex>
+			</ModalContainer>
+		</Modal>
+	);
+};
+
+const ModalContainer = styled(Flex)`
+	padding: 24px;
+	min-width: 450px;
+	flex-direction: column;
+	gap: 36px;
+`;
+
+export default DeleteProjectModal;

src/components/views/userProfile/projectsTab/ProfileProjectsTab.tsx

@@ -143,10 +143,6 @@ const ProfileProjectsTab: FC<IUserProfileView> = () => {
 	);
 };
 
-const ProjectsTableWrapper = styled.div`
-	overflow: auto;
-`;
-
 export const ProjectsContainer = styled.div`
 	margin-bottom: 40px;
 `;

src/components/views/userProfile/projectsTab/ProjectActions.tsx

@@ -3,45 +3,47 @@ import {
 	IconArrowDownCircle16,
 	IconEdit16,
 	IconEye16,
+	IconTrash16,
 	IconUpdate16,
 	IconWalletOutline16,
 	neutralColors,
+	semanticColors,
 } from '@giveth/ui-design-system';
 import styled from 'styled-components';
-import React, { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, type FC, SetStateAction, useState } from 'react';
 import { useIntl } from 'react-intl';
 import router from 'next/router';
 import { useAccount, useSwitchChain } from 'wagmi';
 import { IProject } from '@/apollo/types/types';
 import { EProjectStatus } from '@/apollo/types/gqlEnums';
-import { Dropdown, IOption } from '@/components/Dropdown';
+import { Dropdown, EOptionType, IOption } from '@/components/Dropdown';
 import { idToProjectEdit, slugToProjectView } from '@/lib/routeCreators';
 import { capitalizeAllWords } from '@/lib/helpers';
-import config from '@/configuration';
+import config, { isDeleteProjectEnabled } from '@/configuration';
 import { findAnchorContractAddress } from '@/helpers/superfluid';
 
 interface IProjectActions {
 	project: IProject;
 	setSelectedProject: Dispatch<SetStateAction<IProject | undefined>>;
 	setShowAddressModal: Dispatch<SetStateAction<boolean>>;
 	setShowClaimModal?: Dispatch<SetStateAction<boolean>>;
+	setShowDeleteModal: Dispatch<SetStateAction<boolean>>;
 	className?: string;
 }
 
-const ProjectActions = (props: IProjectActions) => {
-	const {
-		project,
-		setSelectedProject,
-		setShowAddressModal,
-		setShowClaimModal,
-		className,
-	} = props;
-	const status = project.status.name;
-	const isCancelled = status === EProjectStatus.CANCEL;
-
+const ProjectActions: FC<IProjectActions> = ({
+	project,
+	setSelectedProject,
+	setShowAddressModal,
+	setShowClaimModal,
+	setShowDeleteModal,
+	className,
+}) => {
+	const [isHover, setIsHover] = useState(false);
 	const { formatMessage } = useIntl();
 
-	const [isHover, setIsHover] = useState(false);
+	const status = project.status.name;
+	const isCancelled = status === EProjectStatus.CANCEL;
 
 	const anchorContractAddress = findAnchorContractAddress(
 		project.anchorContracts,
@@ -80,24 +82,43 @@ const ProjectActions = (props: IProjectActions) => {
 		},
 	];
 
-	const recurringDonationOption: IOption = {
-		label: formatMessage({
-			id: 'label.claim_recurring_donation',
-		}),
-		icon: <IconArrowDownCircle16 />,
-		cb: () => {
-			if (chainId !== config.OPTIMISM_NETWORK_NUMBER) {
-				switchChain({
-					chainId: config.OPTIMISM_NETWORK_NUMBER,
-				});
-			} else {
+	if (anchorContractAddress) {
+		const recurringDonationOption: IOption = {
+			label: formatMessage({
+				id: 'label.claim_recurring_donation',
+			}),
+			icon: <IconArrowDownCircle16 />,
+			cb: () => {
+				if (chainId !== config.OPTIMISM_NETWORK_NUMBER) {
+					switchChain({
+						chainId: config.OPTIMISM_NETWORK_NUMBER,
+					});
+				} else {
+					setSelectedProject(project);
+					setShowClaimModal && setShowClaimModal(true);
+				}
+			},
+		};
+		options.push(recurringDonationOption);
+	}
+	if (
+		isDeleteProjectEnabled &&
+		project.status.name === EProjectStatus.DRAFT
+	) {
+		const deleteProjectOption: IOption = {
+			label: formatMessage({
+				id: 'label.delete_project',
+			}),
+			icon: <IconTrash16 />,
+			color: semanticColors.punch[500],
+			cb: () => {
 				setSelectedProject(project);
-				setShowClaimModal && setShowClaimModal(true);
-			}
-		},
-	};
-
-	anchorContractAddress && options.push(recurringDonationOption);
+				setShowDeleteModal(true);
+			},
+		};
+		options.push({ type: EOptionType.SEPARATOR });
+		options.push(deleteProjectOption);
+	}
 
 	const dropdownStyle = {
 		padding: '4px 16px',

src/components/views/userProfile/projectsTab/ProjectItem.tsx

@@ -23,6 +23,7 @@ import ProjectQFStatus from './ProjectQFStatus';
 import ProjectListedStatus from './ProjectListedStatus';
 import { formatDonation } from '@/helpers/number';
 import VerificationBadge from '@/components/VerificationBadge';
+import DeleteProjectModal from './DeleteProjectModal';
 
 interface IProjectItem {
 	project: IProject;
@@ -34,6 +35,7 @@ const ProjectItem = ({ project, setProjects }: IProjectItem) => {
 	const [showAddressModal, setShowAddressModal] = useState(false);
 	const [selectedProject, setSelectedProject] = useState<IProject>();
 	const [showClaimModal, setShowClaimModal] = useState(false);
+	const [showDeleteModal, setShowDeleteModal] = useState(false);
 
 	return (
 		<ProjectContainer>
@@ -63,6 +65,7 @@ const ProjectItem = ({ project, setProjects }: IProjectItem) => {
 					setShowAddressModal={setShowAddressModal}
 					project={project}
 					setShowClaimModal={setShowClaimModal}
+					setShowDeleteModal={setShowDeleteModal}
 				/>
 			</ProjectInfoContainer>
 			<HorizontalDivider />
@@ -144,6 +147,12 @@ const ProjectItem = ({ project, setProjects }: IProjectItem) => {
 					project={project}
 				/>
 			)}
+			{showDeleteModal && selectedProject && (
+				<DeleteProjectModal
+					setShowModal={setShowDeleteModal}
+					project={selectedProject}
+				/>
+			)}
 		</ProjectContainer>
 	);
 };
@@ -173,7 +182,9 @@ const ProjectInfoContainer = styled(Flex)`
 `;
 
 const ProjectStatusesContainer = styled(Flex)`
-	width: 330px;
+	${mediaQueries.tablet} {
+		width: 330px;
+	}
 `;
 
 export default ProjectItem;