[Client] A.5 Booking Management (#47)

Cassianky · Oct 30, 2023 · 2e842de · 2e842de
1 parent ba38144
commit 2e842de
Show file tree

Hide file tree

Showing 12 changed files with 1,626 additions and 20 deletions.
diff --git a/client-frontend/src/App.js b/client-frontend/src/App.js
@@ -16,6 +16,8 @@ import ShopPage from "./containers/Client/ShopPage";
 import HomePage from "./containers/HomePage";
 import LoginPage from "./containers/LoginPage";
 import SocketConnection from "./utils/SocketConnection";
+import MyBookings from "./containers/Client/Booking/MyBookings";
+import BookingsDetails from "./containers/Client/Booking/BookingsDetails";
 
 import VendorProtectedRoute from "./components/Routes/VendorProtectedRoute";
 import VendorDetails from "./containers/Client/Activity/VendorDetails";
@@ -157,6 +159,24 @@ function App() {
               </ClientProtectedRoute>
             }
           />
+          <Route
+            exact
+            path="/bookings"
+            element={
+              <ClientProtectedRoute>
+                <MyBookings />
+              </ClientProtectedRoute>
+            }
+          />
+          <Route
+            exact
+            path="/booking/:bookingId"
+            element={
+              <ClientProtectedRoute>
+                <BookingsDetails />
+              </ClientProtectedRoute>
+            }
+          />
           <Route
             path="/login"
             element={

diff --git a/client-frontend/src/components/CancelField.jsx b/client-frontend/src/components/CancelField.jsx
@@ -0,0 +1,117 @@
+import React, { useState } from "react";
+import { useTheme } from "@emotion/react";
+import useSnackbarStore from "../zustand/SnackbarStore";
+import useBookingStore from "../zustand/BookingStore";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Button,
+  TextField,
+  Typography,
+} from "@mui/material";
+
+const CancelField = ({ bookingData }) => {
+  const theme = useTheme();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [reason, setReason] = useState("");
+  const { openSnackbar } = useSnackbarStore();
+  const { cancelBookingForClient, getAllBookingsForClient } = useBookingStore();
+
+  const handleDialogOpen = (event) => {
+    event.stopPropagation();
+    setDialogOpen(true);
+  };
+
+  const handleDialogClose = () => {
+    setDialogOpen(false);
+  };
+
+  const handleConfirmCancel = async (bookingId) => {
+    try {
+      const message = await cancelBookingForClient(bookingId, reason);
+      getAllBookingsForClient();
+      openSnackbar(message);
+      setDialogOpen(false);
+    } catch (error) {
+      openSnackbar(error.message, "error");
+    }
+  };
+
+  const confirmationDisplayDetails = [
+    { label: "Client Company", value: bookingData.clientId.companyName },
+    { label: "Vendor", value: bookingData.vendorName },
+    { label: "Activity", value: bookingData.activityTitle },
+    {
+      label: "Date",
+      value: new Date(bookingData.startDateTime).toLocaleDateString(),
+    },
+    {
+      label: "Timeslot",
+      value: `${new Date(
+        bookingData.startDateTime
+      ).toLocaleTimeString()} - ${new Date(
+        bookingData.endDateTime
+      ).toLocaleTimeString()}`,
+    },
+    { label: "Total Cost", value: `$${bookingData.totalCost}` },
+  ];
+
+  return (
+    <div>
+      <Button variant="contained" color="error" onClick={handleDialogOpen}>
+        Cancel
+      </Button>
+
+      <Dialog fullWidth open={dialogOpen} onClose={handleDialogClose}>
+        <DialogTitle>Confirm Cancellation</DialogTitle>
+        <DialogContent>
+          {confirmationDisplayDetails.map((detail, index) => (
+            <div key={index}>
+              <Typography>
+                <span
+                  style={{
+                    fontWeight: "bold",
+                    color: theme.palette.dark_purple.main,
+                  }}
+                >
+                  {detail.label}:{" "}
+                </span>
+                {detail.value}
+              </Typography>
+            </div>
+          ))}
+          <DialogContentText sx={{ pt: 2 }}>
+            Please provide a reason for cancelling this booking:
+          </DialogContentText>
+          <TextField
+            autoFocus
+            margin="dense"
+            id="reason"
+            label="Reason"
+            fullWidth
+            variant="standard"
+            value={reason}
+            onChange={(e) => setReason(e.target.value)}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleDialogClose} color="primary">
+            Back
+          </Button>
+          <Button
+            onClick={async () => await handleConfirmCancel(bookingData._id)}
+            color="primary"
+            disabled={!reason.trim()}
+          >
+            Confirm
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+};
+
+export default CancelField;
diff --git a/client-frontend/src/components/NavBar.jsx b/client-frontend/src/components/NavBar.jsx
@@ -27,6 +27,7 @@ import useVendorStore from "../zustand/VendorStore.js";
 import useShopStore from "../zustand/ShopStore.js";
 import useSnackbarStore from "../zustand/SnackbarStore.js";
 import useCartStore from "../zustand/CartStore.js";
+import EventOutlinedIcon from "@mui/icons-material/EventOutlined";
 import {
   BookmarkBorderOutlined,
   LogoutOutlined,
@@ -362,6 +363,17 @@ function NavBar(props) {
                   </ListItemIcon>
                   <ListItemText>Bookmarks</ListItemText>
                 </MenuItem>
+                <MenuItem
+                  sx={{ px: "32px" }}
+                  onClick={() => {
+                    navigate("/bookings");
+                  }}
+                >
+                  <ListItemIcon>
+                    <EventOutlinedIcon />
+                  </ListItemIcon>
+                  <ListItemText>My Bookings</ListItemText>
+                </MenuItem>
                 <MenuItem sx={{ px: "32px" }} onClick={logout}>
                   <ListItemIcon>
                     <LogoutOutlined />

diff --git a/client-frontend/src/containers/ActivityDetailsPage/ActivityDetailsPage.jsx b/client-frontend/src/containers/ActivityDetailsPage/ActivityDetailsPage.jsx
@@ -210,20 +210,17 @@ const ActivityDetailsPage = () => {
 
     const weekendAddOn = calculateWeekendAddOn(
       selectedDate,
-      currentActivity.weekendPricing,
-      totalBasePrice
+      currentActivity.weekendPricing
     );
 
     const offlineAddOn = calculateOfflineAddOn(
       location,
-      currentActivity.offlinePricing,
-      totalBasePrice
+      currentActivity.offlinePricing
     );
 
     const onlineAddOn = calculateOnlineAddOn(
       location,
-      currentActivity.onlinePricing,
-      totalBasePrice
+      currentActivity.onlinePricing
     );
 
     const totalPriceCalculated =
@@ -243,18 +240,15 @@ const ActivityDetailsPage = () => {
     let totalBasePrice = calculateBasePrice(pax);
     const weekendAddOn = calculateWeekendAddOn(
       selectedDate,
-      currentActivity.weekendPricing,
-      totalBasePrice
+      currentActivity.weekendPricing
     );
     const offlineAddOn = calculateOfflineAddOn(
       location,
-      currentActivity.offlinePricing,
-      totalBasePrice
+      currentActivity.offlinePricing
     );
     const onlineAddOn = calculateOnlineAddOn(
       location,
-      currentActivity.onlinePricing,
-      totalBasePrice
+      currentActivity.onlinePricing
     );
     let activityPricingRule;
     for (const pricingRule of currentActivity?.activityPricingRules) {
@@ -630,8 +624,7 @@ const ActivityDetailsPage = () => {
                                 {""}
                                 {currentActivity?.offlinePricing?.amount?.toFixed(
                                   2
-                                )}{" "}
-                                %
+                                )}
                               </Typography>
                             </Box>
                           </Box>