Merge pull request #60 from digitalaidseattle/sprint-6

Sprint 6
digitalaidseattle · Feb 15, 2025 · 8725766 · 8725766
2 parents 1b726c5 + 8784347
commit 8725766
Show file tree

Hide file tree

Showing 21 changed files with 708 additions and 600 deletions.
diff --git a/.env b/.env
@@ -3,5 +3,14 @@ VITE_AIRTABLE_TABLE_GENERAL_REFERENCE=tbl2ccW48vHQW4wUa
 VITE_AIRTABLE_TABLE_HOSPITAL_REFERENCE=tblHf3eQYVW8cMYug
 VITE_AIRTABLE_TABLE_HOSPITAL_REQUEST_REFERENCE=tbl4DJ6JLAHzw6fil
 VITE_AIRTABLE_TABLE_HOSPITAL_FUNDED_REFERENCE=tblH62AHTZqx2MpYV
+
 VITE_MAP_STYLE=https://api.maptiler.com/maps/basic-v2/style.json
+VITE_MAPTILER_API_KEY=Y1tEoaEzp2iaQLe7IHVd
+
 VITE_APP_URLS=["https://games-for-love.web.app"]
+
+VITE_FUNDRAISEUP_OVERALL_WIDGET_URL=https://cdn.fundraiseup.com/widget/AWALQQAB
+VITE_FUNDRAISEUP_HOSPITAL_WIDGET_URL=https://cdn.fundraiseup.com/widget/AWALQQAB
+
+VITE_FUNDRAISEUP_CAMPAIGN_CODE="#XWQCRFLJ"
+VITE_FUNDRAISEUP_SELECTED_HOSPITAL_CAMPAIGN_CODE="#XLGBZUGV"
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
@@ -14,8 +14,9 @@ jobs:
       - uses: actions/checkout@v4
       - run: |
           touch .env
-          echo VITE_MAPTILER_API_KEY=${{ secrets.MAPTILER_API_KEY }} >> .env
+          echo >> .env
           echo VITE_AIRTABLE_ANON_KEY=${{ secrets.AIRTABLE_ANON_KEY }} >> .env
+          echo >> .env
           npm install && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:

diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
@@ -16,8 +16,9 @@ jobs:
       - uses: actions/checkout@v4
       - run: |
           touch .env
-          echo VITE_MAPTILER_API_KEY=${{ secrets.MAPTILER_API_KEY }} >> .env
+          echo >> .env
           echo VITE_AIRTABLE_ANON_KEY=${{ secrets.AIRTABLE_ANON_KEY }} >> .env
+          echo >> .env
           npm install && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,16 +1,10 @@
 /**
- *  App.tsx
- *
- *  @copyright 2024 Digital Aid Seattle
- *
+ * App.tsx
  */
+
 import { Box } from "@mui/material";
 import { useContext, useEffect, useState } from "react";
-import {
-  ReflexContainer,
-  ReflexElement,
-  ReflexSplitter
-} from 'react-reflex';
+import { ReflexContainer, ReflexElement, ReflexSplitter } from "react-reflex";
 
 import { GFLMap } from "./components/GFLMap";
 import { HospitalCardDetails } from "./components/HospitalCardDetails";
@@ -20,41 +14,60 @@ import { HospitalsContext } from "./context/HospitalContext";
 import { hospitalService } from "./services/hospital/hospitalService";
 
 import "maplibre-gl/dist/maplibre-gl.css";
-import 'react-reflex/styles.css';
+import "react-reflex/styles.css";
 import "./App.css";
 
+const FUNDRAISEUP_OVERALL_WIDGET_URL = import.meta.env
+  .VITE_FUNDRAISEUP_OVERALL_WIDGET_URL;
+// const FUNDRAISEUP_HOSPITAL_WIDGET_URL = import.meta.env
+//   .VITE_FUNDRAISEUP_HOSPITAL_WIDGET_URL;
+import { FilterContext } from "./context/FilterContext";
+
 const HospitalList = () => {
   const { hospitals } = useContext(HospitalsContext);
   return hospitals?.map((hospital, idx: number) => (
-    <HospitalCardDetails key={`h-${idx})`} hospital={hospital} />
+    <HospitalCardDetails key={`h-${idx}`} hospital={hospital} />
   ));
 };
 
 function App() {
+  const { filters } = useContext(FilterContext);
   const { setOriginals } = useContext(HospitalsContext);
   const [windowHeight, setWindowHeight] = useState<number>(400);
 
-  const getCombinedHospital = async () => {
-    hospitalService
-      .findAll()
-      .then((res) => setOriginals(res));
-  };
-
   useEffect(() => {
-    getCombinedHospital();
-
     setWindowHeight(window.innerHeight);
-
     function handleResize() {
       setWindowHeight(window.innerHeight);
     }
     window.addEventListener("resize", handleResize);
+
+    if (
+      !document.querySelector(`script[src="${FUNDRAISEUP_OVERALL_WIDGET_URL}"]`)
+    ) {
+      const script = document.createElement("script");
+      script.src = FUNDRAISEUP_OVERALL_WIDGET_URL;
+      script.async = true;
+      script.onload = () =>
+        console.log("Fundraise Up script loaded successfully");
+      script.onerror = () =>
+        console.error("Failed to load Fundraise Up script");
+      document.head.appendChild(script);
+    }
   }, []);
 
+  useEffect(() => {
+    if (filters) {
+      hospitalService
+        .findAll(filters)
+        .then((res) => setOriginals(res));
+    }
+  }, [filters]);
+
+
   return (
     <>
       <ReflexContainer orientation="vertical">
-
         <ReflexElement>
           <Box sx={{ height: windowHeight, overflowY: "auto" }}>
             <SearchAndSort />
@@ -64,16 +77,16 @@ function App() {
           </Box>
         </ReflexElement>
 
-        <ReflexSplitter >
-          <Box height={windowHeight} width={5} ></Box>
+        <ReflexSplitter>
+          <Box height={windowHeight} width={5}></Box>
         </ReflexSplitter>
 
         <ReflexElement>
           <Box height={windowHeight} data-testid="gfl-map-box">
             <GFLMap />
           </Box>
         </ReflexElement>
-        
+
       </ReflexContainer>
     </>
   );

diff --git a/src/components/DonateOverlay.tsx b/src/components/DonateOverlay.tsx
@@ -0,0 +1,80 @@
+import { useContext } from "react";
+import { DonationContext } from "../context/DonationContext";
+import { Backdrop, Box, Theme } from "@mui/material";
+import DialogCloseButton from "../styles/DialogCloseButton";
+import { DonationHospitalContext } from "../context/SelectedHospitalContext";
+
+const FUNDRAISEUP_CAMPAIGN_CODE = import.meta.env
+  .VITE_FUNDRAISEUP_CAMPAIGN_CODE;
+
+if (!FUNDRAISEUP_CAMPAIGN_CODE) {
+  throw new Error(
+    "FUNDRAISEUP_CAMPAIGN_CODE is not set. Application cannot start."
+  );
+}
+
+const FUNDRAISEUP_SELECTED_HOSPITAL_CAMPAIGN_CODE = import.meta.env
+  .VITE_FUNDRAISEUP_SELECTED_HOSPITAL_CAMPAIGN_CODE;
+
+if (!FUNDRAISEUP_SELECTED_HOSPITAL_CAMPAIGN_CODE) {
+  throw new Error(
+    "FUNDRAISEUP_SELECTED_HOSPITAL_CAMPAIGN_CODEE is not set. Application cannot start."
+  );
+}
+
+export const DonateOverlay = () => {
+  const { donateOverlayOpen, setDonateOverlayOpen } =
+    useContext(DonationContext);
+
+  const { hospital } = useContext(DonationHospitalContext);
+
+  const handleClose = () => {
+    setDonateOverlayOpen(false);
+  };
+
+  return (
+    donateOverlayOpen && (
+      <Backdrop
+        sx={(theme) => ({
+          zIndex: theme.zIndex.drawer + 1,
+          overflowY: "auto",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        })}
+        open={donateOverlayOpen}
+      >
+        <DialogCloseButton
+          onClick={handleClose}
+          sx={{
+            backgroundColor: (theme: Theme) => theme.palette.grey[700],
+            color: "white",
+          }}
+        />
+
+        {hospital ? (
+          <Box
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            gap={2}
+            minHeight={50}
+          >
+            <h2>Donate to {hospital.name}</h2>
+            <a
+              href={FUNDRAISEUP_SELECTED_HOSPITAL_CAMPAIGN_CODE}
+              style={{ display: "none" }}
+              id="fundraise-link"
+            ></a>
+          </Box>
+        ) : (
+          <a
+            href={FUNDRAISEUP_CAMPAIGN_CODE}
+            style={{ display: "none" }}
+            id="fundraise-link"
+          ></a>
+        )}
+      </Backdrop>
+    )
+  );
+};