ok

src/pages/Payment_claimed.js

@@ -0,0 +1,99 @@
+import React, { useState, useEffect, useRef } from "react";
+import { ColorRing } from "react-loader-spinner";
+import jsQR from "jsqr";
+import QRCode from "qrcode.react";
+import styles from "./Transactions.module.css";
+import { getImageUrl } from "../helpers/itemHelper";
+import { useSearchParams } from "react-router-dom";
+import {
+  getTransaction,
+  handleConfirmHasPaid,
+} from "../helpers/transactionHelpers";
+
+export default function Transaction_pending() {
+  const [searchParams] = useSearchParams();
+  const [transaction, setTransaction] = useState(null);
+
+  useEffect(() => {
+    const transactionId = searchParams.get("transactionId") || "";
+
+    const fetchData = async () => {
+      try {
+        const fetchedTransaction = await getTransaction(transactionId);
+        setTransaction(fetchedTransaction);
+        console.log(transaction);
+      } catch (error) {
+        console.error("Error fetching transaction:", error);
+      }
+    };
+    fetchData();
+  }, [searchParams]);
+
+  const calculateTotalPrice = (detailedTransactions) => {
+    if (!Array.isArray(detailedTransactions)) return 0;
+
+    return detailedTransactions.reduce((total, dt) => {
+      if (
+        dt.Item &&
+        typeof dt.Item.price === "number" &&
+        typeof dt.qty === "number"
+      ) {
+        return total + dt.Item.price * dt.qty;
+      }
+      return total;
+    }, 0);
+  };
+
+  return (
+    <div className={styles.Transactions}>
+      <div style={{ marginTop: "30px" }}></div>
+      <h2 className={styles["Transactions-title"]}>Payment Claimed</h2>
+      <div style={{ marginTop: "30px" }}></div>
+      <div className={styles.TransactionListContainer}>
+        {transaction && (
+          <div
+            key={transaction.transactionId}
+            className={styles.RoundedRectangle}
+          >
+            <h2 className={styles["Transactions-detail"]}>
+              Transaction ID: {transaction.transactionId}
+            </h2>
+            <h2 className={styles["Transactions-detail"]}>
+              Payment Type: {transaction.payment_type}
+            </h2>
+            <ul>
+              {transaction.DetailedTransactions.map((detail) => (
+                <li key={detail.detailedTransactionId}>
+                  <span>{detail.Item.name}</span> - {detail.qty} x Rp{" "}
+                  {detail.Item.price}
+                </li>
+              ))}
+            </ul>
+            <h2 className={styles["Transactions-detail"]}>
+              {transaction.serving_type === "pickup"
+                ? "Self pickup"
+                : `Serve to ${
+                    transaction.Table ? transaction.Table.tableNo : "N/A"
+                  }`}
+            </h2>
+            <div className={styles.TotalContainer}>
+              <span>Total:</span>
+              <span>
+                Rp {calculateTotalPrice(transaction.DetailedTransactions)}
+              </span>
+            </div>
+            <div className={styles.TotalContainer}>
+              <button
+                className={styles.PayButton}
+                onClick={() => handleConfirmHasPaid(transaction.transactionId)}
+              ></button>
+            </div>
+            {transaction.confirmed == 0 && (
+              <h5 className={styles.DeclineButton}>decline</h5>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}