ok

src/pages/CafePage.js

@@ -46,6 +46,8 @@ function CafePage({
   const [isSpotifyNeedLogin, setNeedSpotifyLogin] = useState(true);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const [isEditMode, setIsEditMode] = useState(false);
+
   useEffect(() => {
     if (user.cafeId != null && user.cafeId != shopId) {
       navigate("/" + user.cafeId);
@@ -109,6 +111,7 @@ function CafePage({
             guestSides={guestSides}
             guestSideOfClerk={guestSideOfClerk}
             removeConnectedGuestSides={removeConnectedGuestSides}
+            setIsEditMode={(e) => setIsEditMode(e)}
           />
           <div style={{ marginTop: "5px" }}></div>
           <SearchInput shopId={shopId} tableCode={table.tableCode} />
@@ -137,6 +140,7 @@ function CafePage({
               itemTypeId={itemType.itemTypeId}
               typeName={itemType.name}
               itemList={itemType.itemList}
+              isEditMode={isEditMode}
             />
           ))}
         </body>

src/pages/Transaction.js

@@ -120,6 +120,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
               setSelectedTable(transaction.Table || { tableId: 0 })
             }
           >
+            <div className={styles.RibbonBanner}></div>
             <h2 className={styles["Transactions-detail"]}>
               Transaction ID: {transaction.transactionId}
             </h2>
@@ -176,6 +177,8 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                   "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 ? (
+                  "Canceled" // 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 ? (

src/pages/Transaction_confirmed.js

@@ -5,6 +5,7 @@ import { ColorRing } from "react-loader-spinner";
 import {
   getTransaction,
   confirmTransaction,
+  handleClaimHasPaid,
   declineTransaction,
   cancelTransaction,
 } from "../helpers/transactionHelpers";

src/pages/Transactions.js

@@ -109,6 +109,12 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                 setSelectedTable(transaction.Table || { tableId: 0 })
               }
             >
+              {transaction.paymentClaimed && (
+                <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>
@@ -148,6 +154,8 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                     "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 ? (
+                    "Canceled" // 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 ? (

src/pages/Transactions.module.css

@@ -54,7 +54,7 @@
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 24px; /* Adjusted for better readability */
+  font-size: 70%; /* Adjusted for better readability */
   padding: 12px 24px; /* Added padding for a better look */
   border-radius: 50px;
   background-color: rgba(88, 55, 50, 1);
@@ -81,6 +81,7 @@
   margin-bottom: 23px; /* Space at the bottom to match the PayButton */
 }
 .RoundedRectangle {
+  position: relative;
   border-radius: 20px;
   padding: 15px; /* Adjusted for better spacing */
   margin: 26px;
@@ -116,3 +117,28 @@
   resize: none; /* Prevent resizing */
   overflow-wrap: break-word; /* Ensure text wraps */
 }
+
+.RibbonBanner {
+  position: absolute;
+  top: 0;
+  width: 200px;
+  height: 200px;
+  left: -18px;
+}
+
+.RibbonBanner img {
+  object-fit: contain;
+  width: 100%;
+  height: auto;
+}
+
+.RibbonBanner h1 {
+  margin: 0; /* Remove default margin */
+  font-size: 20px; /* Adjust font size as needed */
+  transform: rotate(-44.7deg); /* Rotate the text */
+  transform-origin: center; /* Rotate around its center */
+  white-space: nowrap; /* Prevent text wrapping */
+  position: absolute;
+  top: 60px;
+  left: -15px;
+}