ok

src/components/Modal.js

@@ -3,11 +3,12 @@ import styles from "./Modal.module.css";
 import TablesPage from "./TablesPage.js";
 import PaymentOptions from "./PaymentOptions.js";
 import TableMaps from "../components/TableMaps";
-import Transactions from "../pages/Transactions";
+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_failed from "../pages/Transaction_failed";
+import Payment_claimed from "../pages/Payment_claimed";
 import MaterialList from "../pages/MaterialList.js";
 import MaterialMutationsPage from "../pages/MaterialMutationsPage.js";
 import Reports from "../pages/Reports.js";
@@ -26,7 +27,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
     // Prevent click event from propagating to the overlay
     event.stopPropagation();
   };
-  console.log(shop.qrPayment)
+  console.log(shop.qrPayment);
   return (
     <div onClick={handleOverlayClick} className={styles.modalOverlay}>
       <div className={styles.modalContent} onClick={handleContentClick}>
@@ -35,12 +36,15 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
         </button>
         {modalContent === "edit_tables" && <TablesPage shop={shop} />}
         {modalContent === "new_transaction" && (
-          <Transactions propsShopId={shop.cafeId} />
+          <Transaction propsShopId={shop.cafeId} />
         )}{" "}
         {modalContent === "transaction_pending" && <Transaction_pending />}
         {modalContent === "transaction_confirmed" && (
           <Transaction_confirmed paymentUrl={shop.qrPayment} />
         )}
+        {modalContent === "payment_claimed" && (
+          <Payment_claimed paymentUrl={shop.qrPayment} />
+        )}
         {modalContent === "transaction_success" && <Transaction_success />}
         {modalContent === "transaction_failed" && <Transaction_failed />}
         {modalContent === "payment_option" && (
@@ -52,9 +56,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
         {modalContent === "update_stock" && (
           <MaterialMutationsPage cafeId={shop.cafeId} />
         )}
-        {modalContent === "reports" && (
-          <Reports cafeId={shop.cafeId} />
-        )}
+        {modalContent === "reports" && <Reports cafeId={shop.cafeId} />}
       </div>
     </div>
   );