diff --git a/src/components/Header.js b/src/components/Header.js index f3be504..e3cfff9 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -211,6 +211,7 @@ const Child = styled.div` const Header = ({ HeaderText, shopId, + showProfile, user, isEdit, isLogout, diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js index bd5b6b6..02c325b 100644 --- a/src/pages/CafePage.js +++ b/src/pages/CafePage.js @@ -82,6 +82,7 @@ function CafePage({
setIsModalOpen(true)} isLogout={handleLogout} shopId={shopId} diff --git a/src/pages/Cart.js b/src/pages/Cart.js index d6e3ad6..c97c8f8 100644 --- a/src/pages/Cart.js +++ b/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(
Please enter a valid email address.
); 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(
Table not found. Please enter a valid table number.
); + setModalContent( +
Table not found. Please enter a valid table number.
, + ); setIsModalOpen(true); } else { goToInvoice(orderType, tableNumber, email); @@ -135,8 +142,8 @@ export default function Cart({ sendParam, totalItemsCount }) { if (loading) return ( -
-
+
+
@@ -144,10 +151,12 @@ export default function Cart({ sendParam, totalItemsCount }) { else return (
-
-

{totalItemsCount} {totalItemsCount !== 1 ? 'items' : 'item'} in Cart

-
- {cartItems.map(itemType => ( +
+

+ {totalItemsCount} {totalItemsCount !== 1 ? "items" : "item"} in Cart +

+
+ {cartItems.map((itemType) => (
Order Type: - - {orderType === 'serve' && ( + {orderType === "serve" && ( Rp {totalPrice}
-
Back to menu
+
+ Back to menu +
handlCloseModal()}> {modalContent}