ok

src/pages/Cart.js

@@ -1,13 +1,13 @@
-import React, { useRef, useEffect, useState } from 'react';
-import styles from './Cart.module.css';
-import ItemLister from '../components/ItemLister';
-import { ThreeDots, ColorRing } from 'react-loader-spinner';
-import { useParams } from 'react-router-dom';
-import { useNavigationHelpers } from '../helpers/navigationHelpers';
-import { getTable } from '../helpers/tableHelper.js';
-import { getCartDetails } from '../helpers/itemHelper.js';
-import { getItemsByCafeId } from '../helpers/cartHelpers'; // Import getItemsByCafeId
-import Modal from '../components/Modal'; // Import the reusable Modal component
+import React, { useRef, useEffect, useState } from "react";
+import styles from "./Cart.module.css";
+import ItemLister from "../components/ItemLister";
+import { ThreeDots, ColorRing } from "react-loader-spinner";
+import { useParams } from "react-router-dom";
+import { useNavigationHelpers } from "../helpers/navigationHelpers";
+import { getTable } from "../helpers/tableHelper.js";
+import { getCartDetails } from "../helpers/itemHelper.js";
+import { getItemsByCafeId } from "../helpers/cartHelpers"; // Import getItemsByCafeId
+import Modal from "../components/Modal"; // Import the reusable Modal component
 
 export default function Cart({ sendParam, totalItemsCount }) {
   const { shopId } = useParams();
@@ -16,13 +16,13 @@ export default function Cart({ sendParam, totalItemsCount }) {
   const { goToShop, goToInvoice } = useNavigationHelpers(shopId);
   const [cartItems, setCartItems] = useState([]);
   const [totalPrice, setTotalPrice] = useState(0);
-  const [orderType, setOrderType] = useState('pickup');
-  const [tableNumber, setTableNumber] = useState('');
+  const [orderType, setOrderType] = useState("pickup");
+  const [tableNumber, setTableNumber] = useState("");
   const [loading, setLoading] = useState(true);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalContent, setModalContent] = useState(null);
   const [isCheckoutLoading, setIsCheckoutLoading] = useState(false); // State for checkout button loading animation
-  const [email, setEmail] = useState('');
+  const [email, setEmail] = useState("");
 
   const textareaRef = useRef(null);
 
@@ -36,13 +36,16 @@ export default function Cart({ sendParam, totalItemsCount }) {
         if (items) setCartItems(items);
 
         const initialTotalPrice = items.reduce((total, itemType) => {
-          return total + itemType.itemList.reduce((subtotal, item) => {
-            return subtotal + (item.qty * item.price);
-          }, 0);
+          return (
+            total +
+            itemType.itemList.reduce((subtotal, item) => {
+              return subtotal + item.qty * item.price;
+            }, 0)
+          );
         }, 0);
         setTotalPrice(initialTotalPrice);
       } catch (error) {
-        console.error('Error fetching cart items:', error);
+        console.error("Error fetching cart items:", error);
       }
     };
 
@@ -51,12 +54,12 @@ export default function Cart({ sendParam, totalItemsCount }) {
     const textarea = textareaRef.current;
     if (textarea) {
       const handleResize = () => {
-        textarea.style.height = 'auto';
+        textarea.style.height = "auto";
         textarea.style.height = `${textarea.scrollHeight}px`;
       };
-      textarea.addEventListener('input', handleResize);
+      textarea.addEventListener("input", handleResize);
       handleResize();
-      return () => textarea.removeEventListener('input', handleResize);
+      return () => textarea.removeEventListener("input", handleResize);
     }
   }, [shopId]);
 
@@ -64,20 +67,22 @@ export default function Cart({ sendParam, totalItemsCount }) {
     try {
       const items = await getItemsByCafeId(shopId);
       const updatedTotalPrice = items.reduce((total, localItem) => {
-        const cartItem = cartItems.find(itemType =>
-          itemType.itemList.some(item => item.itemId === localItem.itemId)
+        const cartItem = cartItems.find((itemType) =>
+          itemType.itemList.some((item) => item.itemId === localItem.itemId),
         );
 
         if (cartItem) {
-          const itemDetails = cartItem.itemList.find(item => item.itemId === localItem.itemId);
-          return total + (localItem.qty * itemDetails.price);
+          const itemDetails = cartItem.itemList.find(
+            (item) => item.itemId === localItem.itemId,
+          );
+          return total + localItem.qty * itemDetails.price;
         }
         return total;
       }, 0);
 
       setTotalPrice(updatedTotalPrice);
     } catch (error) {
-      console.error('Error refreshing total price:', error);
+      console.error("Error refreshing total price:", error);
     }
   };
 
@@ -96,28 +101,30 @@ export default function Cart({ sendParam, totalItemsCount }) {
   const handlCloseModal = () => {
     setIsModalOpen(false);
     setIsCheckoutLoading(false);
-  }
+  };
 
   const isValidEmail = (email) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email);
-  }
+  };
 
   const handleCheckout = async () => {
     setIsCheckoutLoading(true); // Start loading animation
 
-    if (email != '' && !isValidEmail(email)) {
+    if (email != "" && !isValidEmail(email)) {
       setModalContent(<div>Please enter a valid email address.</div>);
       setIsModalOpen(true);
       setIsCheckoutLoading(false); // Stop loading animation
       return;
     }
 
-    if (orderType === 'serve') {
-      if (tableNumber !== '') {
+    if (orderType === "serve") {
+      if (tableNumber !== "") {
         const table = await getTable(shopId, tableNumber);
         if (!table) {
-          setModalContent(<div>Table not found. Please enter a valid table number.</div>);
+          setModalContent(
+            <div>Table not found. Please enter a valid table number.</div>,
+          );
           setIsModalOpen(true);
         } else {
           goToInvoice(orderType, tableNumber, email);
@@ -135,8 +142,8 @@ export default function Cart({ sendParam, totalItemsCount }) {
 
   if (loading)
     return (
-      <div className='Loader'>
-        <div className='LoaderChild'>
+      <div className="Loader">
+        <div className="LoaderChild">
           <ThreeDots />
         </div>
       </div>
@@ -144,10 +151,12 @@ export default function Cart({ sendParam, totalItemsCount }) {
   else
     return (
       <div className={styles.Cart}>
-        <div style={{ marginTop: '30px' }}></div>
-        <h2 className={styles['Cart-title']}>{totalItemsCount} {totalItemsCount !== 1 ? 'items' : 'item'} in Cart</h2>
-        <div style={{ marginTop: '-45px' }}></div>
-        {cartItems.map(itemType => (
+        <div style={{ marginTop: "30px" }}></div>
+        <h2 className={styles["Cart-title"]}>
+          {totalItemsCount} {totalItemsCount !== 1 ? "items" : "item"} in Cart
+        </h2>
+        <div style={{ marginTop: "-45px" }}></div>
+        {cartItems.map((itemType) => (
           <ItemLister
             key={itemType.itemTypeId}
             refreshTotal={refreshTotal}
@@ -170,11 +179,15 @@ export default function Cart({ sendParam, totalItemsCount }) {
         </div>
         <div className={styles.OrderTypeContainer}>
           <span htmlFor="orderType">Order Type:</span>
-          <select id="orderType" value={orderType} onChange={handleOrderTypeChange}>
+          <select
+            id="orderType"
+            value={orderType}
+            onChange={handleOrderTypeChange}
+          >
             <option value="pickup">Pickup</option>
             <option value="serve">Serve</option>
           </select>
-          {orderType === 'serve' && (
+          {orderType === "serve" && (
             <input
               type="text"
               placeholder="Table Number"
@@ -201,9 +214,15 @@ export default function Cart({ sendParam, totalItemsCount }) {
           <span>Rp {totalPrice}</span>
         </div>
         <button onClick={handleCheckout} className={styles.CheckoutButton}>
-          {isCheckoutLoading ? <ColorRing height="50" width="50" color="white" /> : 'Checkout'}
+          {isCheckoutLoading ? (
+            <ColorRing height="50" width="50" color="white" />
+          ) : (
+            "Checkout"
+          )}
         </button>
-        <div onClick={goToShop} className={styles.BackToMenu}>Back to menu</div>
+        <div onClick={goToShop} className={styles.BackToMenu}>
+          Back to menu
+        </div>
 
         <Modal isOpen={isModalOpen} onClose={() => handlCloseModal()}>
           {modalContent}