From 762bee40bbe10b9c1553950ddc445c4f6f4e9ba3 Mon Sep 17 00:00:00 2001
From: frontend perkafean
 <165241731+frontendperkafean@users.noreply.github.com>
Date: Sun, 8 Sep 2024 11:54:34 +0000
Subject: [PATCH] ok

---
 src/App.js                        |  5 +++++
 src/components/Modal.js           |  2 ++
 src/helpers/transactionHelpers.js |  4 ++--
 src/pages/Transaction.js          | 25 ++++++++++++-------------
 src/pages/Transaction_end.js      | 29 +++++++++++++++++++++++++++++
 src/pages/Transactions.js         |  8 ++++++--
 6 files changed, 56 insertions(+), 17 deletions(-)
 create mode 100644 src/pages/Transaction_end.js

diff --git a/src/App.js b/src/App.js
index 0161a64..92e49ae 100644
--- a/src/App.js
+++ b/src/App.js
@@ -138,6 +138,11 @@ function App() {
       setModal("transaction_success", data);
     });
 
+    socket.on("transaction_end", async (data) => {
+      console.log("transaction notification");
+      setModal("transaction_end", data);
+    });
+
     socket.on("payment_claimed", async (data) => {
       console.log(data);
       setModal("payment_claimed", data);
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 0411edc..3555ec0 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -7,6 +7,7 @@ import Transaction from "../pages/Transaction";
 import Transaction_pending from "../pages/Transaction_pending";
 import Transaction_confirmed from "../pages/Transaction_confirmed";
 import Transaction_success from "../pages/Transaction_success";
+import Transaction_end from "../pages/Transaction_end";
 import Transaction_failed from "../pages/Transaction_failed";
 import Payment_claimed from "../pages/Payment_claimed";
 import MaterialList from "../pages/MaterialList.js";
@@ -46,6 +47,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
           <Payment_claimed paymentUrl={shop.qrPayment} />
         )}
         {modalContent === "transaction_success" && <Transaction_success />}
+        {modalContent === "transaction_end" && <Transaction_end />}
         {modalContent === "transaction_failed" && <Transaction_failed />}
         {modalContent === "payment_option" && (
           <PaymentOptions paymentUrl={shop.qrPayment} shopId={shop.cafeId} />
diff --git a/src/helpers/transactionHelpers.js b/src/helpers/transactionHelpers.js
index c9b0dd1..703be3f 100644
--- a/src/helpers/transactionHelpers.js
+++ b/src/helpers/transactionHelpers.js
@@ -15,12 +15,12 @@ export async function confirmTransaction(transactionId) {
         },
       }
     );
-
     if (!response.ok) {
       return false;
     }
 
-    return true;
+    const res = await response.json();
+    return res;
   } catch (error) {
     console.error("Error:", error);
   }
diff --git a/src/pages/Transaction.js b/src/pages/Transaction.js
index 2046c2a..2bdd9a2 100644
--- a/src/pages/Transaction.js
+++ b/src/pages/Transaction.js
@@ -56,19 +56,13 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
   };
 
   const handleConfirm = async (transactionId) => {
+    if (isPaymentLoading) return;
     setIsPaymentLoading(true);
     try {
       const c = await confirmTransaction(transactionId);
-      // if (c) {
-      //   // Update the confirmed status locally
-      //   setTransactions((prevTransactions) =>
-      //     prevTransactions.map((transaction) =>
-      //       transaction.transactionId === transactionId
-      //         ? { ...transaction, confirmed: 1 } // Set to confirmed
-      //         : transaction
-      //     )
-      //   );
-      // }
+      if (c) {
+        setTransaction({ ...transaction, confirmed: c.confirmed });
+      }
     } catch (error) {
       console.error("Error processing payment:", error);
     } finally {
@@ -77,6 +71,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
   };
 
   const handleDecline = async (transactionId) => {
+    if (isPaymentLoading) return;
     setIsPaymentLoading(true);
     try {
       const c = await declineTransaction(transactionId);
@@ -143,16 +138,20 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
               <button
                 className={styles.PayButton}
                 onClick={() => handleConfirm(transaction.transactionId)}
-                disabled={transaction.confirmed !== 0 || isPaymentLoading} // Disable button if confirmed (1) or declined (-1) or loading
+                disabled={isPaymentLoading} // Disable button if confirmed (1) or declined (-1) or loading
               >
                 {isPaymentLoading ? (
                   <ColorRing height="50" width="50" color="white" />
                 ) : transaction.confirmed === 1 ? (
-                  "Confirm has paid" // Display "Confirmed" if the transaction is confirmed (1)
+                  "Confirm has paid" // Display "Confirm has paid" if the transaction is confirmed (1)
                 ) : transaction.confirmed === -1 ? (
                   "Declined" // Display "Declined" if the transaction is declined (-1)
+                ) : transaction.confirmed === 2 ? (
+                  "Confirm item has ready" // Display "Item ready" if the transaction is ready (2)
+                ) : transaction.confirmed === 3 ? (
+                  "Transaction success" // Display "Item ready" if the transaction is ready (2)
                 ) : (
-                  "Confirm availability" // Display "Confirm" if the transaction is not confirmed (0)
+                  "Confirm availability" // Display "Confirm availability" if the transaction is not confirmed (0)
                 )}
               </button>
             </div>
diff --git a/src/pages/Transaction_end.js b/src/pages/Transaction_end.js
new file mode 100644
index 0000000..995f60f
--- /dev/null
+++ b/src/pages/Transaction_end.js
@@ -0,0 +1,29 @@
+import React from "react";
+import { ColorRing } from "react-loader-spinner";
+import styles from "./Transactions.module.css";
+
+export default function Transaction_pending() {
+  const containerStyle = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%", // This makes the container stretch to the bottom of the viewport
+    backgroundColor: "#000", // Optional: Set a background color if you want to see the color ring clearly
+  };
+
+  return (
+    <div className={styles.Transactions}>
+      <div className={containerStyle}>
+        <div style={{ marginTop: "30px", textAlign: "center" }}>
+          <h2>pesananmu selesai diproses nih</h2>
+          <img
+            className={styles.expression}
+            src="https://i.imgur.com/nTokiWH.png"
+            alt="Success"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Transactions.js b/src/pages/Transactions.js
index 96e46bd..8ba21ec 100644
--- a/src/pages/Transactions.js
+++ b/src/pages/Transactions.js
@@ -145,11 +145,15 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                   {isPaymentLoading ? (
                     <ColorRing height="50" width="50" color="white" />
                   ) : transaction.confirmed === 1 ? (
-                    "Confirm has paid" // Display "Confirmed" if the transaction is confirmed (1)
+                    "Confirm has paid" // Display "Confirm has paid" if the transaction is confirmed (1)
                   ) : transaction.confirmed === -1 ? (
                     "Declined" // Display "Declined" if the transaction is declined (-1)
+                  ) : transaction.confirmed === 2 ? (
+                    "Confirm item has ready" // Display "Item ready" if the transaction is ready (2)
+                  ) : transaction.confirmed === 3 ? (
+                    "Transaction success" // Display "Item ready" if the transaction is ready (2)
                   ) : (
-                    "Confirm availability" // Display "Confirm" if the transaction is not confirmed (0)
+                    "Confirm availability" // Display "Confirm availability" if the transaction is not confirmed (0)
                   )}
                 </button>
               </div>