feat: add to cart functionality in project page

gitcoinco · Jun 11, 2024 · 9a5119c · 9a5119c
1 parent 35b0110
commit 9a5119c
Showing 1 changed file with 48 additions and 12 deletions.
diff --git a/packages/grant-explorer/src/features/projects/ViewProject.tsx b/packages/grant-explorer/src/features/projects/ViewProject.tsx
@@ -21,6 +21,7 @@ import { ReactComponent as GithubIcon } from "../../assets/github-logo.svg";
 import { ReactComponent as TwitterIcon } from "../../assets/twitter-logo.svg";
 import { ReactComponent as GlobeIcon } from "../../assets/icons/globe-icon.svg";
 import { ReactComponent as CartCircleIcon } from "../../assets/icons/cart-circle.svg";
+import { ReactComponent as CheckedCircleIcon } from "../../assets/icons/checked-circle.svg";
 import { ProjectBanner } from "../common/ProjectBanner";
 import Breadcrumb, { BreadcrumbItem } from "../common/Breadcrumb";
 import { Box, Skeleton, SkeletonText, Tab, Tabs } from "@chakra-ui/react";
@@ -33,6 +34,7 @@ import { DefaultLayout } from "../common/DefaultLayout";
 import { useProject, useProjectApplications } from "./hooks/useProject";
 import NotFoundPage from "../common/NotFoundPage";
 import { useCartStorage } from "../../store";
+import { CartProject } from "../api/types";
 
 const CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
@@ -97,7 +99,7 @@ export default function ViewProject() {
     },
     {
       name: "Projects",
-      path: `/projects/`,
+      path: `/`,
     },
     {
       name: project?.metadata.title,
@@ -386,24 +388,29 @@ function ProjectLogo({ logoImg }: { logoImg?: string }) {
 function Sidebar(props: {
   projectApplications?: ProjectApplicationWithRoundAndProgram[];
 }) {
-  const activeRoundApplications = props.projectApplications?.filter(
+  const activeQFRoundApplications = props.projectApplications?.filter(
     (projectApplication) =>
-      new Date(projectApplication.round.donationsEndTime) > new Date()
+      new Date(projectApplication.round.donationsEndTime) > new Date() &&
+      projectApplication.round.strategyName ===
+        "allov2.DonationVotingMerkleDistributionDirectTransferStrategy"
   );
-  // const { add } = useCartStorage();
+  const { projects, add, remove } = useCartStorage();
   return (
     <div className="flex flex-col">
       <div className="min-w-[320px] h-fit mb-6 rounded-3xl bg-gray-50">
         <ProjectStats projectApplications={props.projectApplications} />
       </div>
-      {activeRoundApplications && activeRoundApplications?.length > 0 && (
+      {activeQFRoundApplications && activeQFRoundApplications?.length > 0 && (
         <h4 className="text-xl font-medium">Active rounds</h4>
       )}
       <div className="mt-4 max-w-[320px] h-fit mb-6 rounded-3xl ">
-        {activeRoundApplications?.map((projectApplication) => (
+        {activeQFRoundApplications?.map((projectApplication) => (
           <ActiveRoundComponent
             key={projectApplication.id}
             projectApplication={projectApplication}
+            addToCart={add}
+            removeFromCart={remove}
+            projectsInCart={projects}
           />
         ))}
       </div>
@@ -531,6 +538,9 @@ export function RoundListItem({
 
 export function ActiveRoundComponent(props: {
   projectApplication: ProjectApplicationWithRoundAndProgram;
+  addToCart: (project: CartProject) => void;
+  removeFromCart: (project: CartProject) => void;
+  projectsInCart: CartProject[];
 }) {
   const roundName = props.projectApplication.round.roundMetadata.name;
   const roundStartDate = new Date(
@@ -547,8 +557,24 @@ export function ActiveRoundComponent(props: {
     month: "short",
     day: "numeric",
   });
+  const cartProject: CartProject = {
+    grantApplicationId: props.projectApplication.id,
+    projectRegistryId: props.projectApplication.projectId,
+    anchorAddress: props.projectApplication.anchorAddress,
+    recipient: props.projectApplication.metadata.application.recipient,
+    projectMetadata: props.projectApplication.metadata.application.project,
+    grantApplicationFormAnswers: [],
+    status: props.projectApplication.status,
+    applicationIndex: 0,
+    roundId: props.projectApplication.roundId,
+    chainId: props.projectApplication.chainId,
+    amount: "0",
+  };
   const roundLink = `https://explorer.gitcoin.co/#/round/${props.projectApplication.chainId}/${props.projectApplication.roundId}`;
   const roundChain = getChainById(props.projectApplication.chainId);
+  const isProjectInCart = props.projectsInCart.some(
+    (project) => project.projectRegistryId === cartProject.projectRegistryId
+  );
 
   return (
     <div className="p-4 bg-gray-50 rounded-3xl flex flex-col space-y-4">
@@ -570,16 +596,26 @@ export function ActiveRoundComponent(props: {
       <div className="flex justify-between gap-2">
         <a
           href={roundLink}
+          target="_blank"
           className="flex justify-center bg-green-100 text-black-500 rounded-xl px-4 py-2 w-3/4"
         >
           View round
         </a>
-        <a
-          href={"https://explorer.gitcoin.co/"}
-          className="flex text-black-500 w-1/4 justify-center"
-        >
-          <CartCircleIcon className="w-10" />
-        </a>
+        {isProjectInCart ? (
+          <div
+            onClick={() => props.removeFromCart(cartProject)}
+            className="flex text-black-500 w-1/4 justify-center cursor-pointer"
+          >
+            <CheckedCircleIcon className="w-10" />
+          </div>
+        ) : (
+          <div
+            onClick={() => props.addToCart(cartProject)}
+            className="flex text-black-500 w-1/4 justify-center cursor-pointer"
+          >
+            <CartCircleIcon className="w-10" />
+          </div>
+        )}
       </div>
     </div>
   );