Bbrf frontend

client/package.json

@@ -38,9 +38,11 @@
     "@material-ui/icons": "^4.11.2",
     "@mui/material": "^5.5.3",
     "@mui/system": "^5.5.2",
+    "@mui/x-date-pickers": "^7.22.2",
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^1.1.2",
     "cross-env": "^7.0.3",
+    "dayjs": "^1.11.13",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

client/src/App.tsx

@@ -24,6 +24,8 @@ import AlertPopup from './components/AlertPopup.tsx';
 import InviteRegisterPage from './Authentication/InviteRegisterPage.tsx';
 import Landing from './Landing/Landing.tsx';
 import TempAdminDashboardPage from './AdminDashboard/TempAdminDashboardPage.tsx';
+import BirthdayBoxRequestForm from './components/BirthdayBoxRequestForm/BirthdayBoxRequestForm.tsx';
+import SuccessPage from './components/BirthdayBoxRequestForm/SuccessPage.tsx';
 import ChapterDashboardPage from './Chapters/ChapterDashboardPage.tsx';
 
 function App() {
@@ -42,6 +44,11 @@ function App() {
                     <Route path="/login" element={<LoginPage />} />
                     {/* <Route path="/admin" element={<TempAdminDashboardPage />} /> */}
                     {/* <Route path="/admin" element={<TempAdminDashboardPage />} /> */}
+                    <Route
+                      path="/request-form/:chapterId"
+                      element={<BirthdayBoxRequestForm />}
+                    />
+                    <Route path="/success" element={<SuccessPage />} />
                     <Route
                       path="/verify-account/:token"
                       element={<VerifyAccountPage />}

client/src/Home/LandingPage.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   Button,
   Dialog,
@@ -113,7 +114,7 @@ const stateChapters: StateChapters = {
     acceptingRequests: true,
     chapters: [
       { city: 'Columbia County', id: 'wi-1' },
-      { city: 'DeForest', id: 'wi-2' },
+      { city: 'DeForest', id: '67156b8f624d2639a91ee518' },
       { city: 'Madison', id: 'wi-3' },
       { city: 'Sun Prairie', id: 'wi-4' },
       { city: 'Poynette', id: 'wi-5' },
@@ -124,6 +125,7 @@ const stateChapters: StateChapters = {
 export default function LandingPage() {
   const [selectedState, setSelectedState] = useState<StateData | null>(null);
   const [hoveredChapter, setHoveredChapter] = useState<Chapter | null>(null);
+  const navigate = useNavigate();
 
   const mapHandler = (event: any) => {
     const stateData = stateChapters[event.target.dataset.name];
@@ -147,7 +149,7 @@ export default function LandingPage() {
   };
 
   const handleRequestClick = (chapter: Chapter): void => {
-    console.log('Navigate to request form for:', chapter);
+    navigate(`/request-form/${chapter.id}`);
   };
 
   const handleClose = (): void => {
@@ -270,7 +272,8 @@ export default function LandingPage() {
                                 bgcolor: '#DB2777',
                               },
                             }}
-                            onClick={() => handleRequestClick(chapter)}
+                            onClick={() => 
+                              handleRequestClick(chapter)}
                           >
                             Request Form
                           </Button>

client/src/Landing/LandingMap.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import USAMap from 'react-usa-map';
@@ -11,6 +12,7 @@ import {
 } from '../util/constants/map.ts';
 
 export default function LandingMap() {
+  const navigate = useNavigate();
   const [stateData, setStateData] = useState<Chapter[] | null>(null);
   const [chosenState, setChosenState] = useState<StateAbbreviation | null>(
     null,
@@ -192,11 +194,9 @@ export default function LandingMap() {
                                     width: '100px',
                                     borderRadius: '20px',
                                   }}
-                                  onClick={() =>
-                                    console.log(
-                                      `redirecting to ${chapter.city}'s form`,
-                                    )
-                                  }
+                                  onClick={() => {
+                                    navigate(`/request-form/${chapter.id}`);
+                                  }}
                                 >
                                   VIEW FORM
                                 </Button>