good

src/pages/Payment_claimed.js

@@ -106,6 +106,12 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
               setSelectedTable(transaction.Table || { tableId: 0 })
             }
           >
+            {transaction.paymentClaimed && transaction.confirmed < 2 && (
+              <div className={styles.RibbonBanner}>
+                <img src={"https://i.imgur.com/yt6osgL.png"}></img>
+                <h1>payment claimed</h1>
+              </div>
+            )}
             <h2 className={styles["Transactions-detail"]}>
               Transaction ID: {transaction.transactionId}
             </h2>
@@ -127,7 +133,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                     transaction.Table ? transaction.Table.tableNo : "N/A"
                   }`}
             </h2>
-            {transaction.notes != null && (
+            {transaction.notes != "" && (
               <>
                 <div className={styles.NoteContainer}>
                   <span>Note :</span>

src/pages/Transaction.js

@@ -169,7 +169,11 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
               <button
                 className={styles.PayButton}
                 onClick={() => handleConfirm(transaction.transactionId)}
-                disabled={isPaymentLoading} // Disable button if confirmed (1) or declined (-1) or loading
+                disabled={
+                  transaction.confirmed === -1 ||
+                  transaction.confirmed === 3 ||
+                  isPaymentLoading
+                } // Disable button if confirmed (1) or declined (-1) or
               >
                 {isPaymentLoading ? (
                   <ColorRing height="50" width="50" color="white" />

src/pages/Transaction_confirmed.js

@@ -14,7 +14,12 @@ import { getTables } from "../helpers/tableHelper";
 import TableCanvas from "../components/TableCanvas";
 import { useSearchParams } from "react-router-dom";
 
-export default function Transactions({ propsShopId, sendParam, deviceType }) {
+export default function Transactions({
+  propsShopId,
+  sendParam,
+  deviceType,
+  paymentUrl,
+}) {
   const { shopId, tableId } = useParams();
   if (sendParam) sendParam({ shopId, tableId });
 
@@ -24,6 +29,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
   const [searchParams] = useSearchParams();
   const [transaction, setTransaction] = useState(null);
   const noteRef = useRef(null);
+  const [isPaymentOpen, setIsPaymentOpen] = useState(false);
 
   useEffect(() => {
     const transactionId = searchParams.get("transactionId") || "";
@@ -63,9 +69,14 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
     if (isPaymentLoading) return;
     setIsPaymentLoading(true);
     try {
-      const c = await confirmTransaction(transactionId);
+      const c = await handleClaimHasPaid(transactionId);
       if (c) {
-        setTransaction({ ...transaction, confirmed: c.confirmed });
+        setTransaction({
+          ...transaction,
+          confirmed: c.confirmed,
+          paymentClaimed: true,
+        });
+        console.log(transaction);
       }
     } catch (error) {
       console.error("Error processing payment:", error);
@@ -112,7 +123,14 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
             onClick={() =>
               setSelectedTable(transaction.Table || { tableId: 0 })
             }
+            style={{ overflow: isPaymentOpen ? "hidden" : "" }}
           >
+            {transaction.paymentClaimed && transaction.confirmed < 2 && (
+              <div className={styles.RibbonBanner}>
+                <img src={"https://i.imgur.com/yt6osgL.png"}></img>
+                <h1>payment claimed</h1>
+              </div>
+            )}
             <h2 className={styles["Transactions-detail"]}>
               Transaction ID: {transaction.transactionId}
             </h2>
@@ -134,14 +152,24 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                     transaction.Table ? transaction.Table.tableNo : "N/A"
                   }`}
             </h2>
-            {transaction.notes != "" && (
+            {(transaction.notes !== "" || isPaymentOpen) && (
               <>
-                <div className={styles.NoteContainer}>
+                <div
+                  className={styles.NoteContainer}
+                  style={{
+                    visibility: transaction.notes == "" ? "hidden" : "visible",
+                  }}
+                >
                   <span>Note :</span>
                   <span></span>
                 </div>
 
-                <div className={styles.NoteContainer}>
+                <div
+                  className={styles.NoteContainer}
+                  style={{
+                    visibility: transaction.notes == "" ? "hidden" : "visible",
+                  }}
+                >
                   <textarea
                     className={styles.NoteInput}
                     value={transaction.notes}
@@ -159,29 +187,36 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
             </div>
             <div className={styles.PaymentContainer}>
               <ButtonWithReplica
+                paymentUrl={paymentUrl}
+                price={
+                  "Rp" + calculateTotalPrice(transaction.DetailedTransactions)
+                }
                 disabled={isPaymentLoading}
-                onClick={() => handleConfirm(transaction.transactionId)}
+                isPaymentLoading={isPaymentLoading}
+                handleClick={() => handleConfirm(transaction.transactionId)}
+                Open={() => setIsPaymentOpen(true)}
+                isPaymentOpen={isPaymentOpen}
               >
                 {isPaymentLoading ? (
                   <ColorRing height="50" width="50" color="white" />
-                ) : transaction.confirmed === 1 ? (
-                  "Show payment" // 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)
+                ) : isPaymentOpen ? (
+                  "Claim has paid" // Display "Confirm has paid" if the transaction is confirmed (1)
                 ) : (
-                  "Confirm availability" // Display "Confirm availability" if the transaction is not confirmed (0)
+                  "Show payment" // Display "Confirm availability" if the transaction is not confirmed (0)
                 )}
               </ButtonWithReplica>
             </div>
             <h5
-              className={styles.DeclineButton}
-              onClick={() => handleDecline(transaction.transactionId)}
+              className={`${styles.DeclineButton} ${
+                isPaymentOpen ? styles.active : ""
+              }`}
+              onClick={() =>
+                isPaymentOpen
+                  ? setIsPaymentOpen(false)
+                  : handleDecline(transaction.transactionId)
+              }
             >
-              cancel
+              {isPaymentOpen ? "back" : "cancel"}
             </h5>
           </div>
         )}

src/pages/Transactions.js

@@ -9,7 +9,6 @@ import {
 } from "../helpers/transactionHelpers";
 import { getTables } from "../helpers/tableHelper";
 import TableCanvas from "../components/TableCanvas";
-import ButtonWithReplica from "../components/ButtonWithReplica";
 
 export default function Transactions({ propsShopId, sendParam, deviceType }) {
   const { shopId, tableId } = useParams();
@@ -110,7 +109,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                 setSelectedTable(transaction.Table || { tableId: 0 })
               }
             >
-              {transaction.paymentClaimed && (
+              {transaction.paymentClaimed && transaction.confirmed < 2 && (
                 <div className={styles.RibbonBanner}>
                   <img src={"https://i.imgur.com/yt6osgL.png"}></img>
                   <h1>payment claimed</h1>
@@ -144,11 +143,14 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                 </span>
               </div>
               <div className={styles.TotalContainer}>
-                <ButtonWithReplica />
                 <button
                   className={styles.PayButton}
                   onClick={() => handleConfirm(transaction.transactionId)}
-                  disabled={transaction.confirmed !== 0 || isPaymentLoading} // Disable button if confirmed (1) or declined (-1) or loading
+                  disabled={
+                    transaction.confirmed === -1 ||
+                    transaction.confirmed === 3 ||
+                    isPaymentLoading
+                  } // Disable button if confirmed (1) or declined (-1) or loading
                 >
                   {isPaymentLoading ? (
                     <ColorRing height="50" width="50" color="white" />

src/pages/Transactions.module.css

@@ -98,6 +98,24 @@
   text-align: center; /* Center the text within the button */
   margin-bottom: 23px; /* Space at the bottom to match the PayButton */
 }
+
+.DeclineButton.active {
+  position: relative;
+  z-index: 201;
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 20px;
+  padding: 12px 24px; /* Add some padding for spacing */
+  color: rgba(88, 55, 50, 1);
+  background-color: transparent; /* No background */
+  border: none; /* No border */
+  margin: 0 auto; /* Center horizontally */
+  cursor: pointer;
+  display: block; /* Center the text horizontally */
+  text-align: center; /* Center the text within the button */
+  margin-bottom: 23px; /* Space at the bottom to match the PayButton */
+}
 .RoundedRectangle {
   position: relative;
   border-radius: 20px;