Changeset e15e8d9 for my-react-app/src/components/ReservationConfirmation.js

Timestamp:

04/30/25 18:24:41 (3 weeks ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

2518b3a

Parents:

deea3c4

Message:

menu feature done

File:

• my-react-app/src/components/ReservationConfirmation.js (modified) (5 diffs)

my-react-app/src/components/ReservationConfirmation.js

@@ -3 +3 @@
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
-import {jwtDecode} from "jwt-decode";
+import { useLocation } from 'react-router-dom';
+import { jwtDecode } from "jwt-decode";
 import {request} from "../axios_helper";
 import restaurants from "./Restaurants";
@@ -10 +11 @@
     const navigate = useNavigate();
 
+    const location = useLocation();
+    const preOrderedItems = location.state?.preOrderedItems || [];
     const [restaurant, setRestaurant] = useState({});
     const [user, setUser] = useState({});
@@ -59 +62 @@
             specialRequests: specialRequests.trim(),
             paymentStatus: 'Pending',
+            preOrderedItems: preOrderedItems.map(item => `${item.itemName}:${item.quantity}:${item.price}`)
         };
 
@@ -117 +121 @@
         return `${formattedDate} - ${formattedTime}`;
     };
+
+    const grandTotal = preOrderedItems.reduce((acc, item) => acc + item.price * item.quantity, 0).toFixed(2);
+    const itemQuantityString = preOrderedItems
+        .map(item => `${item.itemName}:${item.quantity}`)
+        .join(',');
 
     return (
@@ -156 +165 @@
                                     <br />
                                 </p>
+                                {preOrderedItems.length > 0 ? (
+                                    <div className="row">
+                                        {preOrderedItems.map((item) => (
+                                            <div key={item.menuID} className="col-md-4 mb-4">
+                                                <div className="list-group shadow-sm p-3">
+                                                    <p className="item"><strong>Item:</strong> {item.itemName}</p>
+                                                    <p className="item"><strong>Price:</strong> ${item.price.toFixed(2)}</p>
+                                                    <p className="item"><strong>Quantity:</strong> {item.quantity}</p>
+                                                    <p className="item"><strong>Total:</strong> ${(item.price * item.quantity).toFixed(2)}</p>
+                                                </div>
+                                            </div>
+                                        ))}
+
+                                        <div className="col-12 mt-4">
+                                            <div className="list-group shadow-sm p-4 text-center">
+                                                <h4>Grand Total: ${grandTotal}</h4>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <p>No pre-ordered items.</p>
+                                )}
                             </div>
                             <div className="card-footer">