Fix: download buttons

Author: brelieu05

client/src/components/invoices/InvoiceComponents.jsx

@@ -1391,7 +1391,7 @@ function InvoicesTable({ filteredInvoices, isPaidColor, seasonColor, sortKey, so
                     </Td>
                     {/* <Td>
                       <Flex ml="18px">
-                        <PDFButtonInvoice onlyIcon={true} id={invoice.id} invoiceMonth={invoice.month} invoiceYear={invoice.year} programName={invoice.eventName} />
+                        <PDFButtonInvoice onlyIcon={true} id={invoice.id} />
                       </Flex>
                     </Td> */}
                     <td>

client/src/components/invoices/PDFButtonInvoice.jsx

@@ -26,8 +26,6 @@ import { getPastDue } from "../../utils/pastDueCalc"
 const PDFButtonInvoice = ({
   id,
   onlyIcon = false,
-  hasUnsavedChanges = null,
-  handleOtherButtonClick = null,
 }) => {
   const [loading, setLoading] = useState(false);
   const [invoice, setInvoice] = useState(null);
@@ -158,16 +156,7 @@ const PDFButtonInvoice = ({
     <Box>
       {onlyIcon ? (
         <IconButton
-          onClick={(e) => {
-            e.stopPropagation();
-            if (hasUnsavedChanges) {
-              handleOtherButtonClick(() => {
-                handleDownload();
-              });
-            } else {
-              handleDownload();
-            }
-          }}
+          onClick={handleDownload}
           bg="transparent"
           icon={
             loading ? <Spinner size="sm" /> : <DownloadIcon boxSize="20px" />

client/src/components/invoices/SingleInvoice.jsx

@@ -438,8 +438,6 @@ export const SingleInvoice = () => {
             >
               <PDFButtonInvoice
                 id={id}
-                hasUnsavedChanges={hasUnsavedChanges}
-                handleOtherButtonClick={handleOtherButtonClick}
               />
               <Button
                 height={"40px"}

client/src/components/programs/ProgramComponents.jsx

@@ -350,6 +350,33 @@ export const ProgramSummary = ({
 
   const { nextSession, nextRoom } = safeBookingInfo;
 
+  const [invoiceId, setInvoiceId] = useState(null);
+  const [isLoadingInvoiceId, setIsLoadingInvoiceId] = useState(true);
+  const { id } = useParams();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const invoiceResponse = await backend.get(`/invoices/event/${id}`)
+        // Get the invoice with the most recent start_date
+        if (invoiceResponse.data && invoiceResponse.data.length > 0) {
+          const mostRecentInvoice = invoiceResponse.data.reduce((latest, current) => {
+            const latestDate = new Date(latest.startDate);
+            const currentDate = new Date(current.startDate);
+            return currentDate > latestDate ? current : latest;
+          });
+          
+          setInvoiceId(mostRecentInvoice.id);
+        }
+      } catch (err) {
+        console.error("Error fetching bookings:", err);
+      } finally {
+        setIsLoadingInvoiceId(false);
+      }
+    };
+    fetchData();
+  }, [id]);
+
   return (
     <Box
       minH="10vh"
@@ -400,12 +427,10 @@ export const ProgramSummary = ({
                 align="center"
                 gap={2}
               >
-                <PDFButton
-                  leftIcon={<Icon as={DownloadIcon} />}
-                  fontWeight={"700"}
-                >
-                  Invoice
-                </PDFButton>
+                  <PDFButtonInvoice
+                    id={invoiceId}
+                    onlyIcon={true}
+                  />
                 {!isArchived ? (
                   <EditCancelPopup
                     handleEdit={handleEdit}
@@ -2246,40 +2271,43 @@ const MyDocument = ({ bookingData }) => {
   );
 };
 
-const PDFButton = () => {
-  const { backend } = useBackendContext();
-  // const [bookingData, setBookingData] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const { id } = useParams();
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        // const response = await backend.get("/bookings");
-        // setBookingData(Array.isArray(response.data) ? response.data : []);
-
-        // console.log("id", id)
-        const eventsResponse = await backend.get(`/events/${id}`)
-        console.log("eventsResponse", eventsResponse);
-      } catch (err) {
-        console.error("Error fetching bookings:", err);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchData();
-  }, [backend]);
-
-  // if (isLoading) return <div>Loading...</div>;
-
-
-
-  return (
-    <div>
-      {/* <PDFButtonInvoice
-        id={id}
-        onlyIcon={true}
-      /> */}
-    </div>
-  );
-};
+// const PDFButton = () => {
+//   const { backend } = useBackendContext();
+//   const [invoiceId, setInvoiceId] = useState(null);
+//   // const [isLoading, setIsLoading] = useState(true);
+//   const { id } = useParams();
+
+//   useEffect(() => {
+//     const fetchData = async () => {
+//       try {
+//         const invoiceResponse = await backend.get(`/invoices/event/${id}`)
+        
+//         // Get the invoice with the most recent start_date
+//         if (invoiceResponse.data && invoiceResponse.data.length > 0) {
+//           const mostRecentInvoice = invoiceResponse.data.reduce((latest, current) => {
+//             const latestDate = new Date(latest.start_date);
+//             const currentDate = new Date(current.start_date);
+//             return currentDate > latestDate ? current : latest;
+//           });
+          
+//           setInvoiceId(mostRecentInvoice.id);
+//         }
+//       } catch (err) {
+//         console.error("Error fetching bookings:", err);
+//       }
+//     };
+//     fetchData();
+//   }, [backend, id]);
+
+//   // if (isLoading) return <div>Loading...</div>;
+
+
+
+//   return (
+//     <div>
+//       <PDFButtonInvoice
+//         id={invoiceId}
+//       />
+//     </div>
+//   );
+// };