Development

frontend/package.json

@@ -25,13 +25,15 @@
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
+    "uuid": "^9.0.0",
     "web-vitals": "^2.1.4",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/lodash.get": "^4.4.7",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^9.0.1",
     "@vitejs/plugin-react": "^3.1.0",
     "typescript": "^4.9.3",
     "vite": "^4.2.0"

frontend/src/components/Cart/ShoppinCartDetails.tsx

@@ -3,11 +3,17 @@ import { Button, Stack } from "react-bootstrap";
 import { useShoppingCart } from "../../hooks/UseShoppingCart";
 import { calculateTotalOrderAmount } from "../../utility/utils";
 import { QtyButton } from "../MenuItems/addItemButton";
+import { useNavigate } from "react-router-dom";
+import { CallToAction } from "../Utilities/modal";
 
 export const ShoppingCartDetails = () => {
+  const navigate = useNavigate();
   const [isEdit, setIsEdit] = useState<boolean>(false);
   const [itemQty, setItemQty] = useState<number>(1);
-  const { GetOrderSummary } = useShoppingCart();
+  const { GetOrderSummary, resetCart, closeCart } = useShoppingCart();
+  const [showModal, setShowModal] = useState(false);
+  const handleCloseModal = () => setShowModal(false);
+  const handleShowModal = () => setShowModal(true);
   const orderSummary = GetOrderSummary();
 
   const handleIncreaseQty = () => {
@@ -26,6 +32,17 @@ export const ShoppingCartDetails = () => {
     setIsEdit(true);
   };
 
+  const displayModal = () => {
+    handleShowModal();
+  };
+
+  const clearOrderSummary = () => {
+    handleCloseModal();
+    resetCart();
+    closeCart();
+    navigate("/");
+  };
+
   return (
     <div>
       <div>
@@ -43,7 +60,7 @@ export const ShoppingCartDetails = () => {
           ) : (
             <>
               <span className="ms-auto">
-                <Button size="sm" variant="outline-success">
+                <Button onClick={displayModal} size="sm" variant="outline-success">
                   <small>CLEAR ALL</small>
                 </Button>
               </span>
@@ -74,36 +91,42 @@ export const ShoppingCartDetails = () => {
                   </span>
                 </Stack>
                 <div style={{ marginTop: "-15px" }}>
-                  {summary.menus[0].selectedItems
-                    ? summary.menus[0].selectedItems.map((addon, i) => (
-                        <div key={i}>
-                          <div>
-                            <small
-                              style={{
-                                fontSize: "12.8px",
-                                lineHeight: "19.2px",
-                              }}
-                            >
-                              x{addon.quantity} {addon.name}
-                            </small>
-                          </div>
+                  {summary.menus[0].selectedItems ? (
+                    summary.menus[0].selectedItems.map((addon, i) => (
+                      <div key={i}>
+                        <div>
+                          <small
+                            style={{
+                              fontSize: "12.8px",
+                              lineHeight: "19.2px",
+                            }}
+                          >
+                            x{addon.quantity} {addon.name}
+                          </small>
                         </div>
-                      ))
-                    : ""}
-                  <Stack direction="horizontal" gap={3} style={{ marginLeft: "-6px", marginTop: "5px" }}>
-                    <div>
-                      <QtyButton sign={"decrement"} onClick={handleDecreaseQty} />
-                    </div>
-                    <div> {itemQty} </div>
-                    <div>
-                      <QtyButton sign={"increment"} onClick={handleIncreaseQty} />
-                    </div>
-                    <div>
-                      <Button style={{ borderRadius: "30px" }} size="sm" variant="outline-success">
-                        <small>EDIT</small>
-                      </Button>
-                    </div>
-                  </Stack>
+                      </div>
+                    ))
+                  ) : (
+                    <></>
+                  )}
+                  {isEdit === true ? (
+                    <Stack direction="horizontal" gap={3} style={{ marginLeft: "-6px", marginTop: "5px" }}>
+                      <div>
+                        <QtyButton sign={"decrement"} onClick={handleDecreaseQty} />
+                      </div>
+                      <div> {itemQty} </div>
+                      <div>
+                        <QtyButton sign={"increment"} onClick={handleIncreaseQty} />
+                      </div>
+                      <div>
+                        <Button style={{ borderRadius: "30px" }} size="sm" variant="outline-success">
+                          <small>EDIT</small>
+                        </Button>
+                      </div>
+                    </Stack>
+                  ) : (
+                    <></>
+                  )}
                   <hr />
                 </div>
               </div>
@@ -125,6 +148,14 @@ export const ShoppingCartDetails = () => {
           PLACE ORDER RM{handleCalculateTotalOrder()}
         </Button>
       </div>
+      <CallToAction
+        handleAction={clearOrderSummary}
+        handleClose={handleCloseModal}
+        show={showModal}
+        header=""
+        body="Are you sure you want to clear the cart ?"
+        action="OK"
+      />
     </div>
   );
 };

frontend/src/components/Utilities/modal.tsx

@@ -0,0 +1,32 @@
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+
+export type ModalProps = {
+  handleClose(): void;
+  show: boolean;
+  header: string;
+  body: string;
+  action: string;
+  handleAction: any;
+};
+
+export const CallToAction = ({ handleClose, show, header, body, action, handleAction }: ModalProps) => {
+  return (
+    <>
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>{header}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>{body}</Modal.Body>
+        <Modal.Footer>
+          <Button variant="inline-secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="success" onClick={handleAction}>
+            {action}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};

frontend/src/contexts/shoppingCartContext.tsx

@@ -4,7 +4,7 @@ import { menuToMenuStateMapper, selectedItemToMenuMapper } from "../application/
 import { ShoppingCart } from "../components/ShoppingCart";
 import { CartActionsType, CartItem, OrderSummary, cartReducer, initialCartState, selectedItem } from "../reducers";
 import { IMenuData } from "../models/menu.model";
-import crypto from "crypto";
+import { v4 as uuidv4 } from "uuid";
 
 type shoppingCartProviderProps = {
   children: React.ReactNode;
@@ -293,15 +293,13 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
     };
 
     const addMenuToCart = (menu: IMenuData) => {
-      const id = crypto.randomBytes(16).toString("hex");
-
-      console.log(id);
       if (!state.menus.length) {
         state.menus = menuToMenuStateMapper(menu);
         state.quantity = 1;
       }
       let { menus, quantity, orderSummary } = state;
       const orderInfo: OrderSummary = {
+        id: uuidv4(),
         menus,
         quantity,
       };

frontend/src/reducers/cartReducer.tsx

@@ -13,6 +13,7 @@ export enum CartActionsType {
 }
 
 export type OrderSummary = {
+  id: string;
   menus: Partial<CartItem & { menuName?: string }>[];
   quantity: number;
 };