Release

frontend/src/components/Forms/input.tsx

@@ -12,9 +12,9 @@ export type InputProps = {
 } & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "size">;
 
 export const Input: any = forwardRef<HTMLInputElement, InputProps>(
-  ({ id, name, type = "text", size = "medium", className = "", placeholder, ...props }, ref) => {
+  ({ id, name, type = "text", size = "medium", className, placeholder, ...props }, ref) => {
     return (
-      <input id={id} ref={ref} name={name} type={type} placeholder={placeholder} className="form-control" {...props} />
+      <input id={id} ref={ref} name={name} type={type} placeholder={placeholder} className={className} {...props} />
     );
   }
 );

frontend/src/components/MenuItems/FoodItemList.tsx

@@ -1,7 +1,7 @@
 import { Stack } from "react-bootstrap";
 import { useShoppingCart } from "../../hooks/UseShoppingCart";
-import { QtyButton } from "./addItemButton";
 import { storeItemProps } from "./StoreItem";
+import { QtyButton } from "./addItemButton";
 
 type foodItem = storeItemProps & { itemId: string; itemPrice: number };
 

frontend/src/components/MenuItems/NoMenuItems.tsx

@@ -0,0 +1,20 @@
+import { Form, Stack } from "react-bootstrap";
+
+type NoItems = {
+  handleCheck: (event: React.MouseEvent<HTMLElement>) => void;
+  isChecked: boolean;
+};
+
+export const NoMenuItems = ({ handleCheck, isChecked }: NoItems) => {
+  return (
+    <div style={{ marginBottom: "-14px" }} className="pt-1 elBg">
+      <Stack direction="horizontal" gap={3}>
+        <div style={{ marginLeft: "4px" }}>
+          <Form.Check onClick={handleCheck} className="mr-2" type="checkbox" checked={isChecked} readOnly />
+        </div>
+        <div style={{ marginLeft: "4px", marginTop: "5px" }}>None</div>
+      </Stack>
+      <hr></hr>
+    </div>
+  );
+};

frontend/src/components/MenuItems/StoreItem.tsx

@@ -1,6 +1,8 @@
 import { Card, Col, Row } from "react-bootstrap";
 import { Item } from "../../reducers";
 import { FoodItemList } from "./FoodItemList";
+import { useState } from "react";
+import { NoMenuItems } from "./NoMenuItems";
 
 export type storeItemProps = {
   id: string;
@@ -13,6 +15,16 @@ export type storeItemProps = {
 };
 
 export const StoreItem = ({ id, name, description, imageUrl, basePrice, items, quantity }: storeItemProps) => {
+  const [isChecked, setIsChecked] = useState(false);
+  const handleCheck = () => {
+    setIsChecked(true);
+  };
+  const handleUnCheck = () => {
+    if (isChecked) {
+      setIsChecked(!isChecked);
+    }
+  };
+
   return (
     <>
       <Row>
@@ -38,7 +50,10 @@ export const StoreItem = ({ id, name, description, imageUrl, basePrice, items, q
               <i style={{ backgroundColor: "#f7a278", color: "#fff", padding: "4px" }}>More Portion</i>
             </p>
           </div>
-          <div className="pt-2 elBg">
+          <div>
+            <NoMenuItems handleCheck={handleCheck} isChecked={isChecked} />
+          </div>
+          <div onClick={handleUnCheck} className="pt-2 elBg">
             {items.map((item) => (
               <div key={item.id}>
                 <FoodItemList

frontend/src/contexts/shoppingCartContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useMemo, useReducer, useState } from "react";
 import { selectedItemToMenuMapper } from "../application/mappers/MenuItem.mapper";
-import { CartActionsType, CartItem, cartReducer, initialCartState, selectedItem } from "../reducers";
+import { CartActionsType, CartItem, OrderSummary, cartReducer, initialCartState, selectedItem } from "../reducers";
 import { ShoppingCart } from "../components/ShoppingCart";
 
 type shoppingCartProviderProps = {
@@ -15,14 +15,15 @@ export type shoppingCartProps = {
   quantity: number;
   openCart(): void;
   closeCart(): void;
-  IncreaseMenuQuantity(payload: Partial<CartItem>): void;
+  increaseMenuQuantity(payload: Partial<CartItem>): void;
   removeMenuFromCart(cartItem: Partial<CartItem>): void;
   addItemToCart(menuItem: selectedItem): void;
   removeItemFromCart(menuItem: selectedItem): void;
   getMenuQuantity(id: string): number;
   calculateMenuTotalPriceFromMenuItems(id: string): number | undefined;
   itemPrice(id: string): number | undefined;
   AddMoreMenu(id: string): number | undefined;
+  addMenuToCart(): void;
 };
 
 export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) => {
@@ -46,7 +47,7 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
       return menu!.menuTotalPrice;
     };
 
-    const IncreaseMenuQuantity = (payload: CartItem) => {
+    const increaseMenuQuantity = (payload: CartItem) => {
       console.log(state);
       let menus: Partial<CartItem>[] = state.menus;
 
@@ -73,7 +74,7 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
       }
       state.totalPrice = AddMoreMenu(payload.id)!;
       dispatch({
-        type: CartActionsType.ADD_MENU_TO_CART,
+        type: CartActionsType.INCREASE_MENU_QUANTITY,
       });
     };
 
@@ -86,7 +87,7 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
             menuQty = menu.quantity;
             menuQty -= 1;
             const onePortion = menu.menuTotalPrice! / menu.quantity;
-            menu.menuTotalPrice! = menu.menuTotalPrice! - onePortion;
+            menu.menuTotalPrice = menu.menuTotalPrice! - onePortion;
             if (menu.menuTotalPrice < menu.menuPrice! && menu.selectedItems?.length) {
               menu.selectedItems = [];
               menu.menuTotalPrice = menu.menuPrice;
@@ -123,12 +124,12 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
       const menu = state.menus.find((menu) => menu.id === menuItem.menuId);
       if (menu && menu.menuTotalPrice) {
         let { menus } = state;
-        const menuItems: selectedItem[] = [];
+        let menuItems: selectedItem[] = [];
 
         for (const menu of menus) {
           if (menu.id === menuItem.menuId) {
             if (menu.selectedItems && menu.selectedItems.length) {
-              menuItems.push(...menu.selectedItems);
+              menuItems = menu.selectedItems;
             }
           }
         }
@@ -138,7 +139,11 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
             if (menuItem.id === item.id) {
               if (item.quantity && item.quantity >= 1) {
                 item.quantity -= 1;
-                menu.menuTotalPrice -= item.price * menu.quantity!;
+                if (!menu.quantity) {
+                  menu.menuTotalPrice -= item.price;
+                } else {
+                  menu.menuTotalPrice -= item.price * menu.quantity;
+                }
                 state.totalPrice = menu.menuTotalPrice;
               } else {
                 item.quantity = 0;
@@ -257,11 +262,25 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
       return quantity;
     };
 
+    const addMenuToCart = () => {
+      let { menus, quantity, orderSummary } = state;
+      const orderInfo: OrderSummary = {
+        menus,
+        quantity,
+      };
+      orderSummary.push(orderInfo);
+      state.menus[0].quantity = 1;
+      state.menus = [];
+      console.log(state);
+      return state;
+    };
+    const resetMenuState = () => {};
+
     const value: shoppingCartProps = {
       totalPrice: state.totalPrice,
       menus: state.menus,
       quantity: state.quantity,
-      IncreaseMenuQuantity,
+      increaseMenuQuantity,
       removeMenuFromCart,
       addItemToCart,
       removeItemFromCart,
@@ -271,6 +290,7 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
       calculateMenuTotalPriceFromMenuItems,
       itemPrice,
       AddMoreMenu,
+      addMenuToCart,
     };
     return value;
   }, [state]);

frontend/src/index.css

@@ -81,4 +81,20 @@ hr {
 
 .offcanvas-end {
   right: 0;
+}
+
+.form-check-input {
+  width: 2em;
+  height: 2em;
+  border-radius: 100% !important;
+  background-color: #efefef;
+  border-color: #e5e0e0
+}
+
+.form-check-input:checked {
+  width: 2em;
+  height: 2em;
+  border-radius: 100% !important;
+  background-color: #21c579;
+  border-color: #f7a2;
 }

frontend/src/pages/FoodMenu.tsx

@@ -27,7 +27,8 @@ export const FoodMenu = () => {
   let response;
   if (id) {
     const { isLoading, data: menu } = getMenuById(id);
-    const { IncreaseMenuQuantity, quantity, totalPrice, removeMenuFromCart, getMenuQuantity } = useShoppingCart();
+    const { increaseMenuQuantity, quantity, totalPrice, removeMenuFromCart, getMenuQuantity, addMenuToCart } =
+      useShoppingCart();
     const items = mapItems(menu?.data?.items!);
     if (isLoading) {
       response = <p>...Loading</p>;
@@ -53,8 +54,8 @@ export const FoodMenu = () => {
                 basePrice={basePrice}
                 id={id}
                 quantity={getMenuQuantity(id)}
-                handleInCreaseQty={() => IncreaseMenuQuantity({ id, name, basePrice, quantity, items })}
-                onAddMenuToCart={() => IncreaseMenuQuantity({ id, name, basePrice, quantity, items })}
+                handleInCreaseQty={() => increaseMenuQuantity({ id, name, basePrice, quantity, items })}
+                onAddMenuToCart={() => increaseMenuQuantity({ id, name, basePrice, quantity, items })}
                 amount={totalPrice > 0 ? totalPrice : basePrice}
                 onRemoveMenuFromCart={() => removeMenuFromCart({ id, name, basePrice, quantity, items })}
               />

frontend/src/reducers/cartReducer.tsx

@@ -9,6 +9,11 @@ export enum CartActionsType {
   INCREASE_MENU_QUANTITY = "INCREASE_MENU_QUANTITY",
 }
 
+export type OrderSummary = {
+  menus: Partial<CartItem>[];
+  quantity: number;
+};
+
 export type Item = {
   id: string;
   name: string;
@@ -43,19 +48,15 @@ export type CartAction = {
 export const initialCartState: cartState = {
   totalPrice: 0,
   quantity: 0,
-  menuPrice: 0,
   menus: [],
-  items: [],
   orderSummary: [],
 };
 
 export type cartState = {
   totalPrice: number;
   quantity: number;
   menus: Partial<CartItem>[];
-  items: Item[] | undefined;
-  orderSummary: CartItem[];
-  menuPrice: number;
+  orderSummary: OrderSummary[];
 };
 
 export const cartReducer = (state = initialCartState, action: CartAction): cartState => {