Development (#477)

* include restaurant information as part of the menu response (#471)

* include restaurant information as part of the menu response

* fix build errors

* fix build errors

---------

Co-authored-by: Olasunkanmi Oyinlola <[email protected]>

* 349 place order (#473)

* include restaurant information as part of the menu response

* fix build errors

* fix build errors

* fix the create order flow, from frontend to backend

---------

Co-authored-by: Olasunkanmi Oyinlola <[email protected]>

* 349 place order (#476)

---------

Co-authored-by: Olasunkanmi Oyinlola <[email protected]>

frontend/package.json

@@ -19,6 +19,7 @@
     "crypto-js": "^4.1.1",
     "lodash": "^4.17.21",
     "lodash.get": "4.4.2",
+    "lottie-react": "^2.4.0",
     "nanoid": "^4.0.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.0",

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import { Col, Container } from "react-bootstrap";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { ShoppingCartProvider } from "./contexts/shoppingCartContext";
-import { About, FoodMenu, Home, SignUp } from "./pages";
+import { About, FoodMenu, Home, SignUp, Login } from "./pages";
 import { CheckOutOrAddToCart } from "./components/Utilities/Conditional";
 import { Navigation } from "./components/Utilities/Navbar";
 
@@ -25,7 +25,7 @@ function App() {
                 <Route path="/about" element={<About />} />
                 <Route path="menu/:id" element={<FoodMenu />} />
                 <Route path="/register" element={<SignUp />} />
-                <Route path="/register" element={<SignUp />} />
+                <Route path="/login" element={<Login />} />
                 <Route path="*" element={<Navigate to=".." />} />
               </Route>
             </Routes>

frontend/src/apis/orderApi.ts

@@ -2,6 +2,7 @@ import { OrderSummary, SelectedItem } from "./../reducers/cartReducer";
 import { useShoppingCart } from "../hooks/UseShoppingCart";
 import { IcartItems } from "../models/order.model";
 import { ICreateOrderDTO } from "../dto/order";
+import { calculateServiceCharge, calculateTotalOrderAmount } from "../utility/utils";
 
 export const OrderApi = () => {
   const getOrderSummary = () => {
@@ -17,7 +18,7 @@ export const OrderApi = () => {
         state: "CREATED",
         type: "DINE_IN",
         singleClientId: "63d78441a6fda119c09b1930",
-        total: calculateOrderTotalPrice(orderSummary) ?? 0,
+        total: calculateOrderTotalPrice(orderSummary) + serviceCharge,
         cartItems: cartItemsMapper(orderSummary),
       };
     }
@@ -30,6 +31,8 @@ export const OrderApi = () => {
     }, 0);
   };
 
+  const serviceCharge = calculateServiceCharge(calculateTotalOrderAmount());
+
   const calculateCartItemsTotalPrice = (selectedItems: SelectedItem[]) => {
     let totalSelectedItemsPrice = 0;
     if (selectedItems?.length) {
@@ -39,7 +42,8 @@ export const OrderApi = () => {
     }
     return totalSelectedItemsPrice;
   };
-
+
+
   const cartItemsMapper = (orderSummary: OrderSummary[]): IcartItems[] => {
     const menus = orderSummary.flatMap((summary) => summary.menus);
     const cartItems = menus.map((menu) => {

frontend/src/components/Cart/ShoppinCartDetails.tsx

@@ -12,9 +12,11 @@ import { CartSelectedItems } from "./CartSelectedItems";
 import { UpgradeShoppingCartItem } from "./ShoppingCartSelectedItemUpdate";
 import { OrderApi } from "../../apis/orderApi";
 import useAxiosPrivate from "../../hooks/useAxiosPrivate";
-import { handleAxiosError } from "../../utility/axios-error-handler";
 import { useMutation } from "react-query";
 import { ICreateOrderDTO } from "../../dto/order";
+import Lottie from "lottie-react";
+import groovyWalkAnimation from "../../assets/animations/1704611321528.json";
+import success from "../../assets/animations/1704612008454.json";
 
 export const ShoppingCartDetails = () => {
   const navigate = useNavigate();
@@ -83,8 +85,10 @@ export const ShoppingCartDetails = () => {
   };
 
   const handleCreateOrder: any = useMutation({
-    mutationFn: (order: ICreateOrderDTO) => {
-      return axios.post("orders/create", order);
+    mutationFn: async (order: ICreateOrderDTO) => {
+      const response = await axios.post("orders/create", order);
+      const x = response.data;
+      return response;
     },
   });
 

frontend/src/contexts/shoppingCartContext.tsx

@@ -5,7 +5,7 @@ import { menuToMenuStateMapper, selectedItemToMenuMapper } from "../application/
 import { ShoppingCart } from "../components/Cart/ShoppingCart";
 import { IMenuData } from "../models/menu.model";
 import { CartActionsType, CartItem, OrderSummary, cartReducer, initialCartState, SelectedItem } from "../reducers";
-import { getLocalStorageData, setLocalStorageData } from "../utility/utils";
+import { cartExpiry, getLocalStorageData, setLocalStorageData } from "../utility/utils";
 import { shoppingCartProps, shoppingCartProviderProps } from "./shoppingCartTypes";
 
 export const shoppingCartContext = createContext({} as shoppingCartProps);
@@ -24,8 +24,13 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   useEffect(() => {
+    const cartExpiryDate = getLocalStorageData("expiry", true);
     const storedCart = getLocalStorageData("cart", true);
     if (storedCart) {
+      if (cartExpiryDate && cartExpiry(cartExpiryDate)) {
+        setLocalStorageData("cart", "", false);
+        setLocalStorageData("expiry", "", false);
+      }
       dispatch({ type: CartActionsType.LOAD_CART, payload: JSON.parse(storedCart) });
     }
   }, []);
@@ -45,7 +50,7 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
     const AddMoreMenu = (id: string): number | undefined => {
       const menu = state.menus.find((menu) => menu.id === id);
       if (menu) {
-        if (menu.selectedItems?.length) {
+        if (menu?.selectedItems?.length) {
           const menuPrice = calculateMenuTotalPriceFromMenuItems(id)! * menu.quantity!;
           menu.menuTotalPrice = menuPrice;
         } else {
@@ -342,6 +347,7 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
       console.log(state);
       navigate("/");
       setLocalStorageData("cart", JSON.stringify(state), true);
+      setLocalStorageData("expiry", new Date().toISOString(), true);
       dispatch({
         type: CartActionsType.ADD_MENU_TO_CART,
       });

frontend/src/index.css

@@ -175,5 +175,9 @@ small {
   --bs-btn-border-color: none;
   --bs-btn-hover-bg: none;
   --bs-btn-hover-border-color: none;
+}
 
+.sucess-animation {
+  width: 150px;
+  height: 150px;
 }

frontend/src/pages/Login.tsx

@@ -1,3 +1,9 @@
+import { LoginForm } from "../components/AppForms/SignInForm";
+
 export const Login = () => {
-  return {};
+  return (
+    <>
+      <LoginForm />
+    </>
+  );
 };

frontend/src/pages/OrderSuccess.tsx

@@ -0,0 +1 @@
+export const OrderSuccess = () => {};

frontend/src/pages/index.tsx

@@ -3,3 +3,4 @@ export * from "./Store";
 export * from "./Home";
 export * from "./SignUp";
 export * from "./FoodMenu";
+export * from "./Login";

frontend/src/utility/utils.ts

@@ -72,3 +72,11 @@ export const wordWrap = (text: string, wordLimit: number) => {
 export const calculateServiceCharge = (amount: number) => {
   return Math.floor(Math.round(amount / 10));
 };
+
+export const cartExpiry = (date: string): boolean => {
+  const specifiedDate: Date = new Date(date);
+  const timeDifferenceMs: number = new Date().getTime() - specifiedDate.getTime();
+  const hoursDifference: number = timeDifferenceMs / (1000 * 60 * 60);
+  console.log(hoursDifference);
+  return hoursDifference > 1;
+};