ok

src/pages/CafePage.js

@@ -20,6 +20,7 @@ import {
 } from "../helpers/localStorageHelpers";
 
 function CafePage({
+  table,
   sendParam,
   shopName,
   shopOwnerId,
@@ -34,8 +35,8 @@ function CafePage({
 }) {
   const [searchParams] = useSearchParams();
   const token = searchParams.get("token");
-  const { shopId, tableId } = useParams();
-  sendParam({ shopId, tableId });
+  const { shopId, tableCode } = useParams();
+  sendParam({ shopId, tableCode });
 
   const navigate = useNavigate();
 
@@ -103,14 +104,14 @@ function CafePage({
             shopName={shopName}
             shopOwnerId={shopOwnerId}
             shopClerks={shopClerks}
-            tableId={tableId}
+            tableCode={table.tableCode}
             user={user}
             guestSides={guestSides}
             guestSideOfClerk={guestSideOfClerk}
             removeConnectedGuestSides={removeConnectedGuestSides}
           />
           <div style={{ marginTop: "5px" }}></div>
-          <SearchInput shopId={shopId} tableId={tableId} />
+          <SearchInput shopId={shopId} tableCode={table.tableCode} />
           <div style={{ marginTop: "15px" }}></div>
           <ItemTypeLister
             user={user}

src/pages/Cart.js

@@ -9,11 +9,16 @@ 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({ sendParam, totalItemsCount, deviceType }) {
-  const { shopId, tableId } = useParams();
-  sendParam({ shopId, tableId });
+export default function Cart({
+  table,
+  sendParam,
+  totalItemsCount,
+  deviceType,
+}) {
+  const { shopId, tableCode } = useParams();
+  sendParam({ shopId, tableCode });
 
-  const { goToShop, goToInvoice } = useNavigationHelpers(shopId, tableId);
+  const { goToShop, goToInvoice } = useNavigationHelpers(shopId, tableCode);
   const [cartItems, setCartItems] = useState([]);
   const [totalPrice, setTotalPrice] = useState(0);
   const [orderType, setOrderType] = useState("serve");
@@ -84,12 +89,12 @@ export default function Cart({ sendParam, totalItemsCount, deviceType }) {
       const items = await getItemsByCafeId(shopId);
       const updatedTotalPrice = items.reduce((total, localItem) => {
         const cartItem = cartItems.find((itemType) =>
-          itemType.itemList.some((item) => item.itemId === localItem.itemId),
+          itemType.itemList.some((item) => item.itemId === localItem.itemId)
         );
 
         if (cartItem) {
           const itemDetails = cartItem.itemList.find(
-            (item) => item.itemId === localItem.itemId,
+            (item) => item.itemId === localItem.itemId
           );
           return total + localItem.qty * itemDetails.price;
         }
@@ -135,22 +140,28 @@ export default function Cart({ sendParam, totalItemsCount, deviceType }) {
     }
 
     if (orderType === "serve") {
-      if (tableNumber !== "" || tableId != null) {
-        const table = await getTable(shopId, tableNumber || tableId);
+      console.log("serve");
+      if (tableNumber !== "" && table.tableNo == undefined) {
+        console.log("getting with tableNumber");
+        const table = await getTable(shopId, tableNumber);
         if (!table) {
           setModalContent(
-            <div>Table not found. Please enter a valid table number.</div>,
+            <div>Table not found. Please enter a valid table number.</div>
           );
           setIsModalOpen(true);
         } else {
-          goToInvoice(orderType, tableNumber || tableId, email);
+          goToInvoice(orderType, table.tableNo, email);
         }
+      } else if (table.tableNo != undefined) {
+        console.log("getting with table code" + table.tableNo);
+        goToInvoice(orderType, null, email);
       } else {
         setModalContent(<div>Please enter a table number.</div>);
         setIsModalOpen(true);
       }
     } else {
-      goToInvoice(orderType, tableNumber || tableId, email);
+      console.log("getting with pickup");
+      goToInvoice(orderType, tableNumber, email);
     }
 
     setIsCheckoutLoading(false); // Stop loading animation
@@ -202,15 +213,15 @@ export default function Cart({ sendParam, totalItemsCount, deviceType }) {
             value={orderType}
             onChange={handleOrderTypeChange}
           >
-            {tableId != null && (
-              <option value="serve">Serve to table {tableId}</option>
+            {table != null && (
+              <option value="serve">Serve to table {table.tableNo}</option>
             )}
             <option value="pickup">Pickup</option>
-            {tableId == null && <option value="serve">Serve</option>}
+            {table == null && <option value="serve">Serve</option>}
 
             {/* tableId harus di check terlebih dahulu untuk mendapatkan tableNo */}
           </select>
-          {orderType === "serve" && tableId == null && (
+          {orderType === "serve" && table.length < 1 && (
             <input
               type="text"
               placeholder="Table Number"

src/pages/Invoice.js

@@ -11,9 +11,9 @@ import {
   handlePaymentFromGuestDevice,
 } from "../helpers/transactionHelpers";
 
-export default function Invoice({ sendParam, deviceType, socket }) {
-  const { shopId, tableId } = useParams();
-  sendParam({ shopId, tableId });
+export default function Invoice({ table, sendParam, deviceType, socket }) {
+  const { shopId, tableCode } = useParams();
+  sendParam({ shopId, tableCode });
 
   const location = useLocation(); // Use useLocation hook instead of useSearchParams
   const searchParams = new URLSearchParams(location.search); // Pass location.search directly
@@ -76,7 +76,7 @@ export default function Invoice({ sendParam, deviceType, socket }) {
         shopId,
         isCash ? "cash" : "cashless",
         orderType,
-        tableNumber,
+        table.tableNo || tableNumber,
         socketId
       );
     }
@@ -103,7 +103,7 @@ export default function Invoice({ sendParam, deviceType, socket }) {
         <h2 className={styles["Invoice-detail"]}>
           {orderType === "pickup"
             ? "Diambil di kasir"
-            : `Diantar ke meja nomor ${tableNumber}`}
+            : `Diantar ke meja nomor ${table.tableNo || tableNumber || "-"}`}
         </h2>
         <div className={styles.TotalContainer}>
           <span>Total:</span>

src/pages/SearchResult.js

@@ -1,3 +1,4 @@
+
 // src/CafePage.js
 import React, { useState } from "react";
 import { useParams, useSearchParams, useNavigate } from "react-router-dom";
@@ -11,9 +12,9 @@ import { updateLocalStorage } from "../helpers/localStorageHelpers";
 
 function SearchResult({ user, shopItems, sendParam }) {
   const [searchParams] = useSearchParams();
-  const { shopId, tableId } = useParams();
+  const { shopId, tableCode } = useParams();
   const navigate = useNavigate();
-  sendParam({ shopId, tableId });
+  sendParam({ shopId, tableCode });
 
   const [searchValue, setSearchValue] = useState(
     "dwadawa vvwqd21qb13 4kfawfdwa dhawldhawr dliawbdjawndlks"
@@ -47,7 +48,7 @@ function SearchResult({ user, shopItems, sendParam }) {
         <div style={{ marginTop: "5px" }}></div>
         <SearchInput
           shopId={shopId}
-          tableId={tableId}
+          tableCode={tableCode}
           autofocus={true}
           onSearchChange={handleSearchChange}
         />
@@ -68,4 +69,4 @@ function SearchResult({ user, shopItems, sendParam }) {
   );
 }
 
-export default SearchResult;
+export default SearchResult;

src/pages/Transaction_failed.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>transaction failed</h2>
+          <img
+            className={styles.expression}
+            src="https://i.imgur.com/5j3yIw6.png"
+            alt="Failed"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Transaction_success.js

@@ -17,7 +17,11 @@ export default function Transaction_pending() {
       <div className={containerStyle}>
         <div style={{ marginTop: "30px", textAlign: "center" }}>
           <h2>transaction success</h2>
-          <img src="https://ibb.co.com/X7CD2f6" alt="Success" />
+          <img
+            className={styles.expression}
+            src="https://i.imgur.com/sgvMI02.pngs"
+            alt="Success"
+          />
         </div>
       </div>
     </div>

src/pages/Transactions.js

@@ -5,6 +5,7 @@ import { ColorRing } from "react-loader-spinner";
 import {
   getTransactions,
   confirmTransaction,
+  declineTransaction,
 } from "../helpers/transactionHelpers";
 import { getTables } from "../helpers/tableHelper";
 import TableCanvas from "../components/TableCanvas";
@@ -13,8 +14,6 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
   const { shopId, tableId } = useParams();
   if (sendParam) sendParam({ shopId, tableId });
 
-  const [confirmed, setConfirmed] = useState(false);
-  const [message, setMessage] = useState("");
   const [tables, setTables] = useState([]);
   const [selectedTable, setSelectedTable] = useState(null);
   const [transactions, setTransactions] = useState([]);
@@ -56,9 +55,37 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
     setIsPaymentLoading(true);
     try {
       const c = await confirmTransaction(transactionId);
-      if (c) setMessage("success");
-      else setMessage("not confirmed");
-      setConfirmed(true);
+      if (c) {
+        // Update the confirmed status locally
+        setTransactions((prevTransactions) =>
+          prevTransactions.map((transaction) =>
+            transaction.transactionId === transactionId
+              ? { ...transaction, confirmed: 1 } // Set to confirmed
+              : transaction
+          )
+        );
+      }
+    } catch (error) {
+      console.error("Error processing payment:", error);
+    } finally {
+      setIsPaymentLoading(false);
+    }
+  };
+
+  const handleDecline = async (transactionId) => {
+    setIsPaymentLoading(true);
+    try {
+      const c = await declineTransaction(transactionId);
+      if (c) {
+        // Update the confirmed status locally
+        setTransactions((prevTransactions) =>
+          prevTransactions.map((transaction) =>
+            transaction.transactionId === transactionId
+              ? { ...transaction, confirmed: -1 } // Set to confirmed
+              : transaction
+          )
+        );
+      }
     } catch (error) {
       console.error("Error processing payment:", error);
     } finally {
@@ -113,17 +140,22 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                 <button
                   className={styles.PayButton}
                   onClick={() => handleConfirm(transaction.transactionId)}
-                  disabled={transaction.confirmed || isPaymentLoading} // Disable button if confirmed or loading
+                  disabled={transaction.confirmed !== 0 || isPaymentLoading} // Disable button if confirmed (1) or declined (-1) or loading
                 >
                   {isPaymentLoading ? (
                     <ColorRing height="50" width="50" color="white" />
-                  ) : transaction.confirmed ? (
-                    "Confirmed" // Display "Confirmed" if the transaction is confirmed
+                  ) : transaction.confirmed === 1 ? (
+                    "Confirmed" // Display "Confirmed" if the transaction is confirmed (1)
+                  ) : transaction.confirmed === -1 ? (
+                    "Declined" // Display "Declined" if the transaction is declined (-1)
                   ) : (
-                    "Confirm" // Display "Confirm" otherwise
+                    "Confirm" // Display "Confirm" if the transaction is not confirmed (0)
                   )}
                 </button>
               </div>
+              <h5 onClick={() => handleDecline(transaction.transactionId)}>
+                decline
+              </h5>
             </div>
           ))}
       </div>

src/pages/Transactions.module.css

@@ -73,3 +73,7 @@
   margin: 26px;
   background-color: #f9f9f9;
 }
+
+.expression {
+  width: 100%;
+}