131 lines
4.0 KiB
JavaScript
131 lines
4.0 KiB
JavaScript
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({}) {
|
|
const [cartItems, setCartItems] = useState([]);
|
|
const [totalPrice, setTotalPrice] = useState(0);
|
|
const [orderType, setOrderType] = useState("serve");
|
|
const [loading, setLoading] = useState(true);
|
|
const [isCheckoutLoading, setIsCheckoutLoading] = useState(false); // State for checkout button loading animation
|
|
const [email, setEmail] = useState("");
|
|
|
|
const textareaRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const fetchCartItems = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const items = await getCartDetails("8");
|
|
setLoading(false);
|
|
console.log(items);
|
|
if (items) setCartItems(items);
|
|
|
|
const initialTotalPrice = items.reduce((total, itemType) => {
|
|
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);
|
|
}
|
|
};
|
|
|
|
fetchCartItems();
|
|
|
|
const textarea = textareaRef.current;
|
|
if (textarea) {
|
|
const handleResize = () => {
|
|
textarea.style.height = "auto";
|
|
textarea.style.height = `${textarea.scrollHeight}px`;
|
|
};
|
|
textarea.addEventListener("input", handleResize);
|
|
handleResize();
|
|
return () => textarea.removeEventListener("input", handleResize);
|
|
}
|
|
}, []);
|
|
|
|
const refreshTotal = async () => {
|
|
try {
|
|
const items = await getItemsByCafeId("8");
|
|
const updatedTotalPrice = items.reduce((total, localItem) => {
|
|
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;
|
|
}
|
|
return total;
|
|
}, 0);
|
|
|
|
setTotalPrice(updatedTotalPrice);
|
|
} catch (error) {
|
|
console.error("Error refreshing total price:", error);
|
|
}
|
|
};
|
|
return (
|
|
<div className={styles.Cart}>
|
|
<div style={{ marginTop: "30px" }}></div>
|
|
<h2 className={styles["Cart-title"]}></h2>
|
|
<div style={{ marginTop: "-45px" }}></div>
|
|
{cartItems.map((itemType) => (
|
|
<ItemLister
|
|
key={itemType.itemTypeId}
|
|
refreshTotal={refreshTotal}
|
|
forCart={true}
|
|
typeName={itemType.typeName}
|
|
itemList={itemType.itemList}
|
|
/>
|
|
))}
|
|
<div className={styles.OrderTypeContainer}>
|
|
{orderType === "serve" && (
|
|
<input
|
|
type="text"
|
|
placeholder="Table Number"
|
|
className={styles.TableNumberInput}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className={styles.NoteContainer}>
|
|
<span>Note</span>
|
|
<span></span>
|
|
</div>
|
|
|
|
<textarea
|
|
ref={textareaRef}
|
|
className={styles.NoteInput}
|
|
placeholder="Add a note..."
|
|
/>
|
|
|
|
<div className={styles.TotalContainer}>
|
|
<span>Total:</span>
|
|
<span>Rp {totalPrice}</span>
|
|
</div>
|
|
<button className={styles.CheckoutButton}>
|
|
{isCheckoutLoading ? (
|
|
<ColorRing height="50" width="50" color="white" />
|
|
) : (
|
|
"Checkout"
|
|
)}
|
|
</button>
|
|
<div className={styles.BackToMenu}>Back to menu</div>
|
|
</div>
|
|
);
|
|
}
|