ok

src/pages/WelcomePageEditorr.js

@@ -0,0 +1,130 @@
+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>
+  );
+}