ok

src/App.js

@@ -214,7 +214,10 @@ function App() {
       let permission = Notification.permission;
 
       // Check current permission
-      if (permission !== "granted") {
+      const searchParams = new URLSearchParams(location.search);
+      let searchModal = searchParams.get("modal") || ''; // Get transactionId or set it to empty string
+      
+      if (permission !== "granted" && searchModal == '') {
         setModal("req_notification");
       }
     };
@@ -315,6 +318,17 @@ function App() {
     };
   }, [socket, shopId, location]);  // Ensure location is in the dependencies to respond to changes in the URL
   
+  useEffect(() => {
+    if (user.cafeId != null && user.cafeId !== shopId) {
+      // Preserve existing query parameters
+      const currentParams = new URLSearchParams(location.search).toString();
+
+      // Navigate to the new cafeId while keeping existing params
+      navigate(`/${user.cafeId}?${currentParams}`, { replace: true });
+    }
+
+  }, [user, shopId]);
+  
   function handleMoveToTransaction(direction, from) {
     console.log(direction);
     console.log(from);

src/components/Item.js

@@ -128,6 +128,24 @@ const Item = ({
         </div>
       )}
       <div className={styles.itemDetails}>
+        {forInvoice &&
+              <svg
+                className={styles.plusNegative2}
+                onClick={onRemoveClick}
+                clipRule="evenodd"
+                fillRule="evenodd"
+                strokeLinejoin="round"
+                strokeMiterlimit="2"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+              <path
+                d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
+                fillRule="nonzero"
+              />
+              </svg>
+              
+}
         <input
           className={`${
             forInvoice ? styles.itemInvoiceName : styles.itemName

src/components/Item.module.css

@@ -17,17 +17,21 @@
   width: 100%; /* Ensure the item does not exceed the parent's width */
   overflow: hidden; /* Prevent internal overflow */
   padding-top: 10px;
-  margin-bottom: -3px;
+  margin-bottom: 5px;
 }
+
 .item:not(.itemInvoice) {
   border-top: 2px solid #00000017;
 }
+
 .itemInvoice {
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
   font-size: 18px;
-  margin-bottom: 45px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  padding-top: 0px;
 }
 
 .itemInvoice:last-child {
@@ -78,6 +82,7 @@
   flex-direction: column;
   justify-content: space-between;
   margin-left: 10px;
+  margin-right: 10px;
   flex-grow: 1;
 }
 
@@ -94,7 +99,7 @@
   font-family: "Poppins", sans-serif;
   font-style: normal;
   width: calc(100% - 15px); /* Adjust the width to prevent overflow */
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   font-weight: 500;
   margin-top: 0;
   margin: 0 5px;
@@ -106,7 +111,7 @@
 .itemInvoiceName {
   width: calc(260% - 15px);
   background-color: transparent;
-  font-size: 1.5rem;
+  font-size: 1.3rem;
   font-weight: 500;
 }
 
@@ -200,6 +205,11 @@
   margin: 2.5px 0 -0.5px 0px;
 }
 
+.plusNegative2 {
+  width: 100px;
+  height: 35px;
+  transform: rotate(45deg);
+}
 .remove {
   width: 25px;
   height: 25px;

src/components/ItemLister.module.css

@@ -38,7 +38,7 @@
     font-family: "Poppins", sans-serif;
     font-weight: 500;
     font-style: normal;
-    font-size: 22px;
+    font-size: 20px;
     color: rgba(88, 55, 50, 1);
     text-align: left;
     width: calc(70% - 10px);
@@ -71,7 +71,6 @@
 .item-list {
   display: flex;
   flex-direction: column; /* Display items in a column */
-  gap: 10px; /* Space between each item */
 }
 
 .border {

src/components/Modal.module.css

@@ -12,9 +12,11 @@
 }
 
 .modalContent {
-  width: 80%;
+  width: 80vw;
   position: relative;
   overflow: visible; /* Add this line to enable scrolling */
+  display: flex;
+  align-items: center;
 }
 
 .closeButton {

src/pages/CafePage.js

@@ -89,16 +89,6 @@ function CafePage({
     checkWelcomePageConfig();
   }, [welcomePageConfig]);
 
-  useEffect(() => {
-    if (user.cafeId != null && user.cafeId !== shopId) {
-      // Preserve existing query parameters
-      const currentParams = new URLSearchParams(location.search).toString();
-
-      // Navigate to the new cafeId while keeping existing params
-      navigate(`/${user.cafeId}?${currentParams}`, { replace: true });
-    }
-
-  }, [user, shopId]);
 
   useEffect(() => {
     function fetchData() {

src/pages/Cart.js

@@ -11,6 +11,8 @@ import {
   handlePaymentFromGuestDevice,
 } from "../helpers/transactionHelpers";
 
+import { getItemsByCafeId } from "../helpers/cartHelpers.js";
+
 export default function Invoice({ table, sendParam, deviceType, socket }) {
   const { shopId, tableCode } = useParams();
   sendParam({ shopId, tableCode });
@@ -21,6 +23,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
 
   const textareaRef = useRef(null);
   const [orderType, setOrderType] = useState("pickup");
+  const [orderMethod, setOrderMethod] = useState("cash");
   const [tableNumber, setTableNumber] = useState("");
   const [email, setEmail] = useState("");
 
@@ -39,6 +42,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
           .filter((itemType) => itemType.itemList.length > 0); // Remove empty itemTypes
 
         setCartItems(filteredItems);
+        console.log(filteredItems)
 
         // Update local storage by removing unavailable items
         const updatedLocalStorage =
@@ -140,6 +144,10 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
     setOrderType(event.target.value);
   };
 
+  const handleOrderMethodChange = (event) => {
+    setOrderMethod(event.target.value);
+  };
+
   const handleTableNumberChange = (event) => {
     setTableNumber(event.target.value);
   };
@@ -148,10 +156,24 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
     setEmail(event.target.value);
   };
   return (
-    <div className={styles.Invoice}>
+    <div className={styles.Invoice} style={{height: (getItemsByCafeId(shopId).length > 0 ? '': 'calc(100vh - 75px)'), minHeight: (getItemsByCafeId(shopId).length > 0 ? 'calc(100vh - 210px)': '') }}>
-      <div style={{ marginTop: "30px" }}></div>
+      
+      <div style={{ marginTop: "50px" }}></div>
       <h2 className={styles["Invoice-title"]}>Keranjang</h2>
-      <div style={{ marginTop: "30px" }}></div>
+      {getItemsByCafeId(shopId) < 1 ?
+      <div style={{height: '75vh', display:'flex', justifyContent: 'center', flexDirection: 'column', alignContent: 'center', alignItems: 'center'}}>
+        <div style={{width: '50%'}}>
+      <svg
+      viewBox="0 0 32 32"
+      style={{ fill: "#8F8787" }}
+    >
+      <path d="M9.79175 24.75C8.09591 24.75 6.72383 26.1375 6.72383 27.8333C6.72383 29.5292 8.09591 30.9167 9.79175 30.9167C11.4876 30.9167 12.8751 29.5292 12.8751 27.8333C12.8751 26.1375 11.4876 24.75 9.79175 24.75ZM0.541748 0.0833435V3.16668H3.62508L9.17508 14.8679L7.09383 18.645C6.84717 19.0767 6.70842 19.5854 6.70842 20.125C6.70842 21.8208 8.09591 23.2083 9.79175 23.2083H28.2917V20.125H10.4392C10.2234 20.125 10.0538 19.9554 10.0538 19.7396L10.1001 19.5546L11.4876 17.0417H22.973C24.1292 17.0417 25.1467 16.4096 25.6709 15.4538L31.1901 5.44834C31.3134 5.23251 31.3751 4.97043 31.3751 4.70834C31.3751 3.86043 30.6813 3.16668 29.8334 3.16668H7.03217L5.583 0.0833435H0.541748ZM25.2084 24.75C23.5126 24.75 22.1405 26.1375 22.1405 27.8333C22.1405 29.5292 23.5126 30.9167 25.2084 30.9167C26.9042 30.9167 28.2917 29.5292 28.2917 27.8333C28.2917 26.1375 26.9042 24.75 25.2084 24.75Z" />
+    </svg>
+    </div>
+    <h1 style={{fontSize: '120%', color :'#8F8787' }}>Tidak ada item di keranjang</h1>
+    </div>
+      :
+      <>
       <div className={styles.RoundedRectangle}>
         {cartItems.map((itemType) => (
           <ItemLister
@@ -204,32 +226,39 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
             placeholder="Tambahkan catatan..."
           />
         </div>
-        <div className={styles.TotalContainer}>
-          <span>Total:</span>
-          <span>Rp {totalPrice}</span>
-        </div>
       </div>
       <div className={styles.PaymentOption}>
         <div className={styles.TotalContainer}>
-          <span>Opsi pembayaran</span>
+          <span>Pembayaran</span>
-          <span></span>
+          <span>
+            <select
+            style={{borderRadius: '6px', fontSize: '20px'}}
+            id="orderMethod"
+            value={orderMethod}
+            onChange={handleOrderMethodChange}
+          >
+            <option value="cash">&nbsp;Tunai</option>
+            <option value="cashless">&nbsp;Non Tunai&nbsp;</option>
+          </select>
+          </span>
         </div>
-        <button className={styles.PayButton} onClick={() => handlePay(false)}>
+        <div style={{display: 'flex', paddingLeft: '25px', paddingRight: '25px'}}>
-          {isPaymentLoading ? (
+          <button className={styles.PayButton} onClick={() => handlePay(orderMethod == 'cash' ? true : false)}>
-            <ColorRing height="50" width="50" color="white" />
+            {isPaymentLoading ? (
-          ) : (
+              <ColorRing height="50" width="50" color="white" />
-            "Nontunai"
+            ) : (
-          )}
+              <div>
-        </button>
+                <span>Pesan</span>
-        <div className={styles.Pay2Button} onClick={() => handlePay(true)}>
+                
-          {isPaymentLoading ? (
+                <span>Rp{totalPrice}</span>
-            <ColorRing height="12" width="12" color="white" />
+              </div>
-          ) : (
+            )}
-            "Tunai"
+          </button>
-          )}
         </div>
       </div>
       <div className={styles.PaymentOptionMargin}></div>
+      </>
+}
     </div>
   );
 }

src/pages/Invoice.module.css

@@ -3,7 +3,7 @@
   background-color: white;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   font-size: calc(10px + 2vmin);
   color: rgba(88, 55, 50, 1);
   background-color: #e9e9e9;
@@ -13,11 +13,11 @@
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 32px;
+  font-size: 6vw;
   color: rgba(88, 55, 50, 1);
   text-align: left;
   margin-left: 20px;
-  margin-top: 17px;
+  margin-top: 7px;
 }
 
 .Invoice-detail {
@@ -58,7 +58,7 @@
   color: rgba(88, 55, 50, 1);
 
   position: relative;
-  height: 229.39px;
+  height: 180px;
 }
 
 .TotalContainer {
@@ -69,8 +69,9 @@
   font-family: "Poppins", sans-serif;
   font-weight: 600;
   font-style: normal;
-  font-size: 1.5em;
+  font-size: 1.3em;
   padding: 10px 0;
+  padding-top: 20px;
   margin-bottom: 17px;
 }
 
@@ -78,10 +79,10 @@
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 32px;
+  font-size: 20px;
 
   width: 80vw;
-  height: 18vw;
+  height: 40px;
   border-radius: 50px;
   background-color: rgba(88, 55, 50, 1);
   color: white;
@@ -91,6 +92,13 @@
   margin-bottom: 23px;
 }
 
+.PayButton div{
+  display: flex;
+  justify-content: space-between;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
 .Pay2Button {
   text-align: center;
   color: rgba(88, 55, 50, 1);
@@ -117,6 +125,7 @@
   padding-top: 5px;
   margin: 26px;
   background-color: #f9f9f9;
+  margin-bottom: -20px;
 }
 
 .EmailContainer {
@@ -155,6 +164,7 @@
   font-size: 1em;
   padding: 10px 0;
   margin-bottom: 7px;
+  font-weight: 600;
 }
 
 .NoteInput {
@@ -165,7 +175,6 @@
   padding: 10px;
   font-size: 1.2em;
   border: 1px solid rgba(88, 55, 50, 0.5);
-  margin-bottom: 27px;
   resize: none; /* Prevent resizing */
   overflow-wrap: break-word; /* Ensure text wraps */
 }

src/pages/NotificationRequest.js

@@ -25,7 +25,7 @@ export default function Transaction_pending({ setModal }) {
   };
 
   return (
-    <div className={styles.Transactions}>
+    <div className={styles.Transaction}>
         <div style={{ marginTop: "30px", textAlign: "center" }}>
           <h2>Aktifkan Notifikasi</h2>
           <img

src/pages/Payment_claimed.js

@@ -93,7 +93,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
   };
 
   return (
-    <div className={styles.Transactions}>
+    <div className={styles.Transaction}>
       <div style={{ marginTop: "30px" }}></div>
       <h2 className={styles["Transactions-title"]}>Transactions</h2>
       {/* <TableCanvas tables={tables} selectedTable={selectedTable} /> */}

src/pages/Transaction.js

@@ -107,7 +107,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
   }, [transaction?.notes]);
 
   return (
-    <div className={styles.Transactions}>
+    <div className={styles.Transaction}>
 
       <div className={styles.TransactionListContainer}>
         {transaction && (

src/pages/Transaction_confirmed.js

@@ -123,7 +123,7 @@ export default function Transactions({
   }, [transaction?.notes]);
 
   return (
-    <div className={styles.Transactions}>
+    <div className={styles.Transaction}>
       <div className={styles.TransactionListContainer}>
         {transaction && (
           <div

src/pages/Transaction_end.js

@@ -13,7 +13,7 @@ export default function Transaction_pending() {
   };
 
   return (
-    <div className={styles.Transactions}>
+    <div className={styles.Transaction}>
       <div className={containerStyle}>
         <div style={{ marginTop: "30px", textAlign: "center" }}>
           <h2>pesananmu selesai diproses nih</h2>

src/pages/Transaction_failed.js

@@ -13,7 +13,7 @@ export default function Transaction_pending() {
   };
 
   return (
-    <div className={styles.Transactions}>
+    <div className={styles.Transaction}>
       <div className={containerStyle}>
         <div style={{ marginTop: "30px", textAlign: "center" }}>
           <h2>transaction failed</h2>

src/pages/Transaction_pending.js

@@ -107,7 +107,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
   }, [transaction?.notes]);
 
   return (
-    <div className={styles.Transactions}>
+    <div className={styles.Transaction}>
 
       <div className={styles.TransactionListContainer}>
         {transaction && (
@@ -122,9 +122,13 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
             <div className={styles['receipt-header']}>
               <ColorRing className={styles['receipt-logo']} />
               <div className={styles['receipt-info']}>
-                <h3>sedang memeriksa ketersediaan</h3>
+                <h3>memeriksa ketersediaan</h3>
-                <p>Transaction ID: {transaction.transactionId}</p>
+                <p>ID Transaksi: {transaction.transactionId}</p>
-                <p>Payment Type: {transaction.payment_type}</p>
+                <p>Pembayaran: {transaction.payment_type}</p>
+                <p>{transaction.serving_type === "pickup"
+                ? "Ambil sendiri"
+                : `Diantar ke meja ${transaction.Table ? transaction.Table.tableNo : "N/A"
+                }`}</p>
               </div>
             </div>
 

src/pages/Transaction_success.js

@@ -25,7 +25,7 @@ export default function Transaction_pending({ setModal }) {
   };
 
   return (
-    <div className={styles.Transactions}>
+    <div className={styles.Transaction}>
         <div style={{ marginTop: "30px", textAlign: "center" }}>
           <h2>Transaction Success</h2>
           <img

src/pages/Transactions.js

@@ -114,18 +114,43 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                 setSelectedTable(transaction.Table || { tableId: 0 })
               }
             >
+              
+            <div className={styles['receipt-header']}>
+              <div className={styles['receipt-info']}>
+                <h3>{transaction.confirmed === 1 ? (
+                      "Silahkan cek pembayaran"
+                    ) : transaction.confirmed === -1 ? (
+                      "Declined"
+                    ) : transaction.confirmed === -2 ? (
+                      "Canceled"
+                    ) : transaction.confirmed === 2 ? (
+                      "Sedang diproses"
+                    ) : transaction.confirmed === 3 ? (
+                      "Transaction success"
+                    ) : (
+                      "Silahkan cek ketersediaan"
+                    )}</h3>
+                    
+                <p>Transaction ID: {transaction.transactionId}</p>
+                <p>Payment Type: {transaction.payment_type}</p>
+              </div>
+            </div>
+            <div className={styles['dotted-line']}>
+              <div className={styles['circle-left']}>
+                
+                  </div>
+              <div className={styles['line']} ></div>
+              <div className={styles['circle-right']} >
+                
+              </div>
+            </div>
+           
               {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>
-              <h2 className={styles["Transactions-detail"]}>
-                Payment Type: {transaction.payment_type}
-              </h2>
               <ul>
                 {transaction.DetailedTransactions.map((detail) => (
                   <li key={detail.detailedTransactionId}>
@@ -141,6 +166,23 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                       transaction.Table ? transaction.Table.tableNo : "N/A"
                     }`}
               </h2>
+              
+            {transaction.notes != "" && (
+              <>
+                <div className={styles.NoteContainer}>
+                  <span>Note :</span>
+                  <span></span>
+                </div>
+
+                <div className={styles.NoteContainer}>
+                  <textarea
+                    className={styles.NoteInput}
+                    value={transaction.notes}
+                    disabled
+                  />
+                </div>
+              </>
+            )}
               <div className={styles.TotalContainer}>
                 <span>Total:</span>
                 <span>

src/pages/Transactions.module.css

@@ -1,4 +1,4 @@
-.Transactions {
+.Transaction {
   overflow-x: hidden;
   background-color: white;
   display: flex;
@@ -8,6 +8,18 @@
   color: rgba(88, 55, 50, 1);
   background-color: #e9e9e9;
   border-radius: 15px;
+  max-height: 80vh;
+  width: 80vw;
+}
+.Transactions {
+  overflow-x: hidden;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  font-size: calc(10px + 2vmin);
+  color: rgba(88, 55, 50, 1);
+  background-color: #e9e9e9;
 }
 
 .Transactions-title {