implement different statuses

packages/common/src/programWhitelist.ts

@@ -1,4 +1,11 @@
-export async function getWhitelistedPrograms(): Promise<string[]> {
+export type WhitelistStatus = "Accepted" | "Rejected" | "Pending";
+
+interface ProgramData {
+  programId: string;
+  whitelistStatus: WhitelistStatus;
+}
+
+async function fetchProgramsData(): Promise<ProgramData[]> {
   try {
     const response = await fetch(
       "https://docs.google.com/spreadsheets/d/e/2PACX-1vQxC34V_N3ubt3ycs7LvMya_zYeBmAqTxPczt0yDbLSfpI-kMp6o5E08fC0BxQG4uMp7EPV5bxP-64a/pub?gid=0&single=true&output=csv"
@@ -13,8 +20,45 @@ export async function getWhitelistedPrograms(): Promise<string[]> {
       .split(/\r?\n/)
       .filter((line) => line.trim() !== "");
 
-    return stringArray;
+    const programsData = stringArray.map((line) => {
+      const [programId, whitelistStatus] = line.split(",") as [
+        string,
+        WhitelistStatus,
+      ];
+      return { programId, whitelistStatus };
+    });
+
+    return programsData;
   } catch (error) {
+    console.error("Failed to fetch or process the CSV:", error);
     return [];
   }
 }
+
+export async function getWhitelistedPrograms(): Promise<string[]> {
+  const programsData = await fetchProgramsData();
+  return programsData
+    .filter((program) => program.whitelistStatus === "Accepted")
+    .map((program) => program.programId);
+}
+
+export async function isProgramWhitelisted(
+  programId: string
+): Promise<boolean> {
+  const whitelistedPrograms = await getWhitelistedPrograms();
+  return whitelistedPrograms.includes(programId);
+}
+
+export async function getAllProgramsData(): Promise<ProgramData[]> {
+  return await fetchProgramsData();
+}
+
+export async function getProgramWhitelistStatus(
+  programId: string
+): Promise<WhitelistStatus | null> {
+  const programsData = await fetchProgramsData();
+  const program = programsData.find(
+    (program) => program.programId === programId
+  );
+  return program ? program.whitelistStatus : null;
+}

packages/round-manager/src/features/program/TabGroup.tsx

@@ -1,8 +1,12 @@
 "use client";
 
-import { Fragment, useState, Key } from "react";
+import { Fragment, useState, Key, useEffect } from "react";
 import { classNames, getStatusStyle, prettyDates3 } from "../common/Utils";
-import { PlusIcon, PlusSmIcon } from "@heroicons/react/solid";
+import {
+  ExclamationCircleIcon,
+  PlusIcon,
+  PlusSmIcon,
+} from "@heroicons/react/solid";
 import Close from "../../assets/close.svg";
 import DirectGrants from "../../assets/direct-grants.svg";
 import QuadraticFundingSVG from "../../assets/quadratic-funding.svg";
@@ -18,21 +22,28 @@ import { useRounds } from "../../context/round/RoundContext";
 import { ProgressStatus, Round } from "../api/types";
 import { Transition, Dialog } from "@headlessui/react";
 import { useAccount } from "wagmi";
+import { ReactComponent as GrantExplorerLogo } from "../../assets/explorer-black.svg";
+import ConfirmationModal from "../common/ConfirmationModal";
+import { getProgramWhitelistStatus, WhitelistStatus } from "common/src";
 
 const tabs = [
   { name: "Quadratic funding", current: true },
   { name: "Direct grants", current: false },
-  { name: "Settings", current: false},
+  { name: "Settings", current: false },
 ];
 
 export const TabGroup = () => {
   datadogLogs.logger.info("====> Route: /program/:id/TabGroup.tsx");
   datadogLogs.logger.info(`====> URL: ${window.location.href}`);
+  const [openListingModal, setOpenListingModal] = useState(false);
+  const [whitelistStatus, setWhitelistStatus] =
+    useState<WhitelistStatus | null>(null);
 
   const { chainId, id: programId } = useParams() as {
     chainId?: string;
     id: string;
   };
+
   const { chain, address } = useAccount();
   const programChainId = chainId ? Number(chainId) : chain?.id;
   const { program: programToRender } = useProgramById(programId);
@@ -47,6 +58,17 @@ export const TabGroup = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [currentTab, setCurrentTab] = useState(tabs[0].name);
 
+  useEffect(() => {
+    const getWhitelistStatus = async () => {
+      if (!whitelistStatus && programToRender) {
+        const status = await getProgramWhitelistStatus(programToRender.id!);
+        setWhitelistStatus(status);
+      }
+    };
+
+    getWhitelistStatus();
+  }, [programToRender, whitelistStatus]);
+
   const handleTabChange = (tabName: string) => {
     setCurrentTab(tabName);
   };
@@ -73,7 +95,10 @@ export const TabGroup = () => {
               status={status}
               strategyType="quadratic"
               displayBar={{
-                applicationDate: prettyDates3(round.applicationsStartTime, round.applicationsEndTime),
+                applicationDate: prettyDates3(
+                  round.applicationsStartTime,
+                  round.applicationsEndTime
+                ),
                 roundDate: prettyDates3(
                   round.roundStartTime,
                   round.roundEndTime
@@ -344,16 +369,55 @@ export const TabGroup = () => {
                     </span>
                     <span
                       onClick={() => {
-                        window.open(
-                          `https://docs.google.com/forms/d/e/1FAIpQLSeplytOjF6mbG51bLOccNMmxOUZlZIDQdyOOw3KiDu5VZkvmA/viewform?usp=pp_url&entry.658554959=${programToRender?.id}&entry.1289763714=${programToRender?.metadata?.name}`,
-                          "_blank"
-                        );
+                        if (!whitelistStatus) {
+                          setOpenListingModal(true);
+                        }
                       }}
-                      className="flex flex-row justify-between items-center hover:shadow-md p-2 rounded-lg text-sm text-grey-500 font-mono ml-auto bg-blue-100 cursor-pointer"
+                      className={`flex flex-row justify-between items-center p-2 rounded-lg text-sm font-mono ml-auto ${
+                        whitelistStatus === "Accepted"
+                          ? "bg-[#ECEDED] text-[#959C9C] cursor-not-allowed"
+                          : whitelistStatus === "Pending"
+                            ? "bg-[#F4FAEB] text-[#4B5050] cursor-not-allowed"
+                            : whitelistStatus === "Rejected"
+                              ? "bg-[#FFE8E1] text-[#4B5050] cursor-not-allowed"
+                              : "bg-[#E5F4D3] text-grey-500 hover:shadow-md cursor-pointer"
+                      }`}
                       data-testid="create-round-small-link"
                     >
-                      <span className="mr-2">Request Explorer Listing</span>
+                      {whitelistStatus === "Rejected" ? (
+                        <ExclamationCircleIcon className="h-4 w-4 inline mx-1" />
+                      ) : (
+                        <GrantExplorerLogo className="h-5 w-5 inline mx-1" />
+                      )}
+                      <span className="mr-2">
+                        {whitelistStatus === "Pending"
+                          ? "Listing request pending"
+                          : whitelistStatus === "Rejected"
+                            ? "Listing request rejected"
+                            : "Request Explorer listing"}
+                      </span>
                     </span>
+                    <ConfirmationModal
+                      title={"Request Explorer listing"}
+                      confirmButtonText={"Complete approval form"}
+                      confirmButtonAction={() => {
+                        window.open(
+                          `https://docs.google.com/forms/d/e/1FAIpQLSeplytOjF6mbG51bLOccNMmxOUZlZIDQdyOOw3KiDu5VZkvmA/viewform?usp=pp_url&entry.658554959=${programToRender?.id || ""}&entry.1289763714=${programToRender?.metadata?.name || ""}`,
+                          "_blank"
+                        );
+                        setOpenListingModal(false);
+                      }}
+                      body={
+                        <p className="text-sm text-grey-400">
+                          To help maintain a high-quality experience on the
+                          Explorer homepage, please complete a brief form to
+                          reduce spam. Once your program is approved, all rounds
+                          associated with it will be displayed on the Explorer.
+                        </p>
+                      }
+                      isOpen={openListingModal}
+                      setIsOpen={setOpenListingModal}
+                    />
                   </div>
                 )}
               </div>