ok

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);

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} />

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);
   }

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>

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>
+  );
+}

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>