ok

2025-05-13 09:42:04 +07:00
parent 5ddf09e3d9
commit bf7ea19d80
10 changed files with 238 additions and 137 deletions
--- a/src/pages/Cart.js
+++ b/src/pages/Cart.js
@@ -270,6 +270,7 @@ export default function Invoice({ shopId, setModal, table, sendParam, deviceType
        textareaRef.current.value,
        socketId
      );
+      localStorage.removeItem('lastTransaction')
    }
    else

@@ -459,7 +460,7 @@ export default function Invoice({ shopId, setModal, table, sendParam, deviceType
                {transactionData.payment_type != 'paylater' ?
                  <>
                    <div onClick={() => setModal('transaction_item', { transactionId: transactionData.transactionId })} className={styles.AddedLastTransaction}>
-                      Pesanan akan ditambahkan ke transaksi sebelumnya
+                      Pembayaran akan ditambahkan ke transaksi sebelumnya
                    </div>
                    <div className={styles.CancelAddedLastTransaction} onClick={() => { window.location.reload(); localStorage.removeItem('lastTransaction') }}>
                      <svg
--- a/src/pages/Invoice.module.css
+++ b/src/pages/Invoice.module.css
@@ -146,9 +146,8 @@
 .RoundedRectangle {
  border-radius: 20px;
  padding-top: 5px;
-  margin: 26px;
+  margin: 12px;
  background-color: #f9f9f9;
-  margin-bottom: -20px;
 }

 .EmailContainer {
--- a/src/pages/Transaction_confirmed.js
+++ b/src/pages/Transaction_confirmed.js
@@ -19,6 +19,7 @@ export default function Transactions({
  sendParam,
  deviceType,
  paymentUrl,
+  setModal
 }) {
  const { shopId, tableId } = useParams();
  if (sendParam) sendParam({ shopId, tableId });
@@ -165,7 +166,7 @@ export default function Transactions({
                <ColorRing className={styles['receipt-logo']} />
              }
              <div className={styles['receipt-info']}>
-                {transaction.payment_type == 'cashless' || transaction.payment_type == 'paylater/cashless' ? <h3>silahkan bayar dengan QRIS</h3> : transaction.payment_type == 'cash' || transaction.payment_type == 'paylater/cash' ? <h3>silahkan bayar ke kasir</h3> : transaction.DetailedTransactions.some(transaction => transaction.additionalNumber > 0) ? <h3>Item sukses ditambahkan</h3> : <h3>open bill disetujui</h3>}
+                {transaction.payment_type == 'cashless' || transaction.payment_type == 'paylater/cashless' ? <h3>Silahkan bayar dengan QRIS</h3> : transaction.payment_type == 'cash' || transaction.payment_type == 'paylater/cash' ? <h3>silahkan bayar ke kasir</h3> : transaction.DetailedTransactions.some(transaction => transaction.additionalNumber > 0) ? <h3>Item sukses ditambahkan</h3> : <h3>open bill disetujui</h3>}
                <p>Transaction ID: {transaction.transactionId}</p>
                <p>Payment Type: {transaction.payment_type}</p>
              </div>
@@ -193,9 +194,17 @@ export default function Transactions({

            {transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless' &&
              <div
-                onClick={() => {
-                  localStorage.setItem('lastTransaction', JSON.stringify(transaction));
-                }} className={styles["addNewItem"]}>Tambah pesanan</div>
+              onClick={() => {
+                localStorage.setItem('lastTransaction', JSON.stringify(transaction));
+                setModal("message", { captMessage: 'Silahkan tambahkan pesanan', descMessage: 'Pembayaran akan ditambahkan ke transaksi sebelumnya.' }, null, null);
+
+                // Dispatch the custom event
+                window.dispatchEvent(new Event("localStorageUpdated"));
+              }}
+              className={styles["addNewItem"]}
+            >
+              Tambah pesanan
+            </div>          
            }

            <h2 className={styles["Transactions-detail"]}>
--- a/src/pages/Transaction_pending.js
+++ b/src/pages/Transaction_pending.js
@@ -135,7 +135,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
            <div className={styles['receipt-header']}>
              <ColorRing className={styles['receipt-logo']} />
              <div className={styles['receipt-info']}>
-                <h3>memeriksa ketersediaan</h3>
+                <h3>Memeriksa Ketersediaan</h3>
                <p>ID Transaksi: {transaction.transactionId}</p>
                <p>Pembayaran: {transaction.payment_type}</p>
                <p>{transaction.serving_type === "pickup"
--- a/src/pages/Transactions.js
+++ b/src/pages/Transactions.js
@@ -9,6 +9,7 @@ import {
  getTransactionsFromCafe,
 } from "../helpers/transactionHelpers";
 import { getTables } from "../helpers/tableHelper";
+import ButtonWithReplica from "../components/ButtonWithReplica";
 import TableCanvas from "../components/TableCanvas";

 import dayjs from 'dayjs';
@@ -16,90 +17,79 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';


-export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType }) {
+export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType, paymentUrl }) {
  const { shopIdentifier, tableId } = useParams();
  if (sendParam) sendParam({ shopIdentifier, tableId });

  dayjs.extend(utc);
  dayjs.extend(timezone);

-  const [tables, setTables] = useState([]);
-  const [selectedTable, setSelectedTable] = useState(null);
  const [transactions, setTransactions] = useState([]);
-  const [myTransactions, setMyTransactions] = useState([]);
  const [isPaymentLoading, setIsPaymentLoading] = useState(false);
+  const [isPaymentOpen, setIsPaymentOpen] = useState(false);

  useEffect(() => {
    const fetchTransactions = async () => {
-      try {
-        let response;
-        response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
-        console.log(response)
-        if(response) {
-          setTransactions(response);
-        return;
+      if (deviceType == 'clerk') {
+        try {
+          let response;
+          response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
+          console.log(response)
+          if (response) {
+            setTransactions(response);
+            return;
+          }
+        } catch (error) {
+          console.error("Error fetching transactions:", error);
        }
-      } catch (error) {
-        console.error("Error fetching transactions:", error);
      }
-      try {
-        let response;
-        response = await getMyTransactions(shopId || propsShopId, 5);
-        console.log(response)
-        const combinedTransactions = [];
+      else {
+        try {
+          let response;
+          response = await getMyTransactions(shopId || propsShopId, 5);
+          console.log(response)
+          const combinedTransactions = [];

-        response.forEach(cafe => {
+          response.forEach(cafe => {
            const { cafeId, name: cafeName, transactions } = cafe;
-        
-            transactions.forEach(transaction => {
-                const newTransaction = {
-                    ...transaction,
-                    cafeId,
-                    cafeName,
-                    DetailedTransactions: transaction.detailedTransactions // Rename here
-                };
-                delete newTransaction.detailedTransactions; // Remove the old key
-                combinedTransactions.push(newTransaction);
-            });
-        });
-        
-        // combinedTransactions now contains all transactions with cafe info and renamed key
-        console.log(combinedTransactions)

-        // combinedTransactions now contains all transactions with cafe info
-        setTransactions(combinedTransactions);
-      } catch (error) {
-        console.error("Error fetching transactions:", error);
+            transactions.forEach(transaction => {
+              const newTransaction = {
+                ...transaction,
+                cafeId,
+                cafeName,
+                DetailedTransactions: transaction.detailedTransactions // Rename here
+              };
+              delete newTransaction.detailedTransactions; // Remove the old key
+              combinedTransactions.push(newTransaction);
+            });
+          });
+
+          // combinedTransactions now contains all transactions with cafe info and renamed key
+          console.log(combinedTransactions)
+
+          // combinedTransactions now contains all transactions with cafe info
+          setTransactions(combinedTransactions);
+        } catch (error) {
+          console.error("Error fetching transactions:", error);
+        }
      }
    };

    fetchTransactions();
-  }, [shopId || propsShopId]);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const fetchedTables = await getTables(shopId || propsShopId);
-        setTables(fetchedTables);
-      } catch (error) {
-        console.error("Error fetching tables:", error);
-      }
-    };
-
-    fetchData();
-  }, [shopId || propsShopId]);
+  }, [deviceType]);

  const calculateTotalPrice = (detailedTransactions) => {
    return detailedTransactions.reduce((total, dt) => {
      return total + dt.qty * (dt.promoPrice ? dt.promoPrice : dt.price);
    }, 0);
  };
-  
-const calculateAllTransactionsTotal = (transactions) => {
-  return transactions.reduce((grandTotal, transaction) => {
-    return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
-  }, 0);
-};
+
+  const calculateAllTransactionsTotal = (transactions) => {
+    return transactions.reduce((grandTotal, transaction) => {
+      return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
+    }, 0);
+  };

  const handleConfirm = async (transactionId) => {
    setIsPaymentLoading(true);
@@ -146,8 +136,8 @@ const calculateAllTransactionsTotal = (transactions) => {
  return (
    <div className={styles.Transactions}>
      <div style={{ marginTop: "30px" }}></div>
-      <h2 className={styles["Transactions-title"]}>Daftar transaksi 
-      Rp {calculateAllTransactionsTotal(transactions)} </h2>
+      <h2 className={styles["Transactions-title"]}>Daftar transaksi
+        Rp {calculateAllTransactionsTotal(transactions)} </h2>
      <div style={{ marginTop: "30px" }}></div>
      {/* <TableCanvas tables={tables} selectedTable={selectedTable} /> */}
      <div className={styles.TransactionListContainer} style={{ padding: '0 20px 0 20px' }}>
@@ -156,9 +146,7 @@ const calculateAllTransactionsTotal = (transactions) => {
            <div
              key={transaction.transactionId}
              className={styles.RoundedRectangle}
-              onClick={() =>
-                setSelectedTable(transaction.Table || { tableId: 0 })
-              }
+              style={{ overflow: 'hidden' }}
            >

              <div className={styles['receipt-header']}>
@@ -192,19 +180,34 @@ const calculateAllTransactionsTotal = (transactions) => {


                <div className={styles['receipt-info']}>
-                  <h3>{transaction.confirmed === 1 ? (
-                    "Silahkan cek pembayaran"
-                  ) : transaction.confirmed === -1 ? (
-                    "Dibatalkan oleh kasir"
-                  ) : transaction.confirmed === -2 ? (
-                    "Dibatalkan oleh pelanggan"
-                  ) : transaction.confirmed === 2 ? (
-                    "Sedang diproses"
-                  ) : transaction.confirmed === 3 ? (
-                    "Transaction success"
-                  ) : (
-                    "Silahkan cek ketersediaan"
-                  )}</h3>
+                  {deviceType == 'clerk' ?
+                    <h3>{transaction.confirmed === 1 ? (
+                      "Silahkan Cek Pembayaran"
+                    ) : transaction.confirmed === -1 ? (
+                      "Dibatalkan Oleh Kasir"
+                    ) : transaction.confirmed === -2 ? (
+                      "Dibatalkan Oleh Pelanggan"
+                    ) : transaction.confirmed === 2 ? (
+                      "Sedang Diproses"
+                    ) : transaction.confirmed === 3 ? (
+                      "Transaksi Sukses"
+                    ) : (
+                      "Silahkan Cek Ketersediaan"
+                    )}</h3>
+                    :
+                    <h3>{transaction.confirmed === 1 ? (
+                      "Silahkan Bayar Dengan QRIS"
+                    ) : transaction.confirmed === -1 ? (
+                      "Dibatalkan Oleh Kasir"
+                    ) : transaction.confirmed === -2 ? (
+                      "Dibatalkan Oleh Pelanggan"
+                    ) : transaction.confirmed === 2 ? (
+                      "Sedang diproses"
+                    ) : transaction.confirmed === 3 ? (
+                      "Transaksi Sukses"
+                    ) : (
+                      "Memeriksa Ketersediaan "
+                    )}</h3>}

                  <p>Transaction ID: {transaction.transactionId}</p>
                  <p>Payment Type: {transaction.payment_type}</p>
@@ -230,7 +233,7 @@ const calculateAllTransactionsTotal = (transactions) => {
              <ul>
                {transaction.DetailedTransactions.map((detail) => (
                  <li key={detail.detailedTransactionId}>
-                  <span>{detail.Item.name}</span> - {detail.qty < 1 ? 'tidak tersedia' : `${detail.qty} x Rp
+                    <span>{detail.Item.name}</span> - {detail.qty < 1 ? 'tidak tersedia' : `${detail.qty} x Rp
                  ${detail.promoPrice ? detail.promoPrice : detail.price}`}
                  </li>
                ))}
@@ -266,60 +269,95 @@ const calculateAllTransactionsTotal = (transactions) => {
                </span>
              </div>
              <div className={styles.TotalContainer}>
+                {(deviceType == 'clerk' && (transaction.confirmed == 0 || transaction.confirmed == 1 || transaction.confirmed == 2)) ||
+                  (deviceType == 'guestDevice' && (transaction.confirmed == 0))&&
+                  <button
+                    className={styles.PayButton}
+                    onClick={() => handleConfirm(transaction.transactionId)}
+                    disabled={isPaymentLoading}
+                  >
+                    {deviceType === "clerk" ? (
+                      isPaymentLoading ? (
+                        <ColorRing height="50" width="50" color="white" />
+                      ) : transaction.confirmed === 1 ? (
+                        "Konfirmasi Telah Bayar"
+                      ) : transaction.confirmed === 2 ? (
+                        "Confirm item is ready"
+                      ) : (
+                        "Confirm availability"
+                      )
+                    ) :
+                      isPaymentLoading ? (
+                        <ColorRing height="50" width="50" color="white" />
+                      ) : (
+                        "Transaction success"
+                      )}
+
+                  </button>
+                }
+
+                {transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' &&
+                  <ButtonWithReplica
+                    paymentUrl={paymentUrl}
+                    price={
+                      "Rp" + calculateTotalPrice(transaction.DetailedTransactions)
+                    }
+                    disabled={isPaymentLoading}
+                    isPaymentLoading={isPaymentLoading}
+                    handleClick={() => handleConfirm(transaction.transactionId)}
+                    Open={() => setIsPaymentOpen(transaction.transactionId)}
+                    isPaymentOpen={isPaymentOpen == transaction.transactionId}
+                  >
+                    {
+                      isPaymentLoading ? null : isPaymentOpen == transaction.transactionId ? (
+                        transaction.paymentClaimed ? (
+                          <>
+                            <div style={{ position: 'absolute', left: '15px', top: '9px' }}>
+                              <ColorRing height="20" width="20" className={styles['receipt-logo']} />
+                            </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Menunggu konfirmasi
+                          </>
+                        ) : 'Klaim telah bayar'
+                      ) : 'Tampilkan QR'
+                    }
+
+                  </ButtonWithReplica>
+                }
+              </div>
+
+              {transaction.payment_type == 'cash' ?
                <button
                  className={styles.PayButton}
-                  onClick={() => handleConfirm(transaction.transactionId)}
+                  onClick={() => handleDecline(transaction.transactionId)}
                  disabled={
-                    isPaymentLoading || // Disable if loading
-                    (deviceType === "clerk" &&
-                      transaction.confirmed !== 1 &&
-                      transaction.confirmed !== 2 &&
-                      transaction.confirmed !== 0) || // Disable for clerk when not Confirm has paid, Confirm item is ready, or Confirm availability
-                    (deviceType !== "clerk" &&
-                      transaction.confirmed !== 1 &&
-                      transaction.paymentClaimed) || // Disable for buyer when not Claim has paid
-                    transaction.confirmed === 3 || // Disable if Transaction success
-                    transaction.confirmed === -1 || // Disable if Declined
-                    transaction.confirmed === -2 || // Disable if Canceled
-                    transaction.confirmed === 2 || // Disable if In process
-                    (transaction.confirmed === 1 && transaction.paymentClaimed) // Disable if verifying payment
-                  }
+                    transaction.confirmed === -1 ||
+                    transaction.confirmed === 3 ||
+                    isPaymentLoading
+                  } // Disable button if confirmed (1) or declined (-1) or
                >
-                  {deviceType === "clerk" ? (
-                    isPaymentLoading ? (
-                      <ColorRing height="50" width="50" color="white" />
-                    ) : transaction.confirmed === 1 ? (
-                      "Confirm has paid"
-                    ) : transaction.confirmed === -1 ? (
-                      "Declined"
-                    ) : transaction.confirmed === -2 ? (
-                      "Canceled"
-                    ) : transaction.confirmed === 2 ? (
-                      "Confirm item is ready"
-                    ) : transaction.confirmed === 3 ? (
-                      "Transaction success"
-                    ) : (
-                      "Confirm availability"
-                    )
-                  ) : isPaymentLoading ? (
+                  {isPaymentLoading ? (
                    <ColorRing height="50" width="50" color="white" />
-                  ) : transaction.confirmed === 1 &&
-                    !transaction.paymentClaimed ? (
-                    "Claim has paid"
-                  ) : transaction.confirmed === 1 &&
-                    transaction.paymentClaimed ? (
-                    "Verifying your payment"
                  ) : transaction.confirmed === -1 ? (
-                    "Declined"
+                    "Ditolak" // Display "Declined" if the transaction is declined (-1)
                  ) : transaction.confirmed === -2 ? (
-                    "Canceled"
-                  ) : transaction.confirmed === 2 ? (
-                    "In process"
+                    "Dibatalkan" // Display "Declined" if the transaction is declined (-1)
                  ) : (
-                    "Transaction success"
+                    "Batalkan" // Display "Confirm availability" if the transaction is not confirmed (0)
                  )}
                </button>
-              </div>
+                :
+                ((transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless' || isPaymentOpen) &&
+                  <h5
+                    className={`${styles.DeclineButton}`}
+                    onClick={() =>
+                      isPaymentOpen
+                        ? setIsPaymentOpen(false)
+                        : handleDecline(transaction.transactionId)
+                    }
+                  >
+                    {isPaymentOpen ? "kembali" : "batalkan"}
+                  </h5>
+                )
+              }
              {transaction.confirmed == 0 && (
                <h5
                  className={styles.DeclineButton}
--- a/src/pages/Transactions.module.css
+++ b/src/pages/Transactions.module.css
@@ -134,7 +134,7 @@
  position: relative;
  border-radius: 20px;
  padding: 15px; /* Adjusted for better spacing */
-  margin: 26px;
+  margin: 12px;
  background-color: #f9f9f9;
 }