ok

src/App.js

@@ -394,14 +394,14 @@ function App() {
     console.log(transaction_info);  // Log the updated transaction_info
 
 
-    const depthh = transactionList.current.findIndex(
+    let depthh = transactionList.current.findIndex(
       item => item.transactionId.toString() === transaction_info.toString()
     );
-
+    if(depthh == 0 && transaction_info.toString() != '') depthh = 1;
     setDepth(depthh);
     console.log(transaction_info == response[0].transactionId)
     // If transaction_info is an empty string, set the modal
-    if (transaction_info == '' || transaction_info == response[0].transactionId) return false;
+    if (transaction_info.toString() == '' || transaction_info.toString() == response[0].transactionId) return false;
     else return true;
   }
 

src/components/PaymentOptions.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import jsQR from "jsqr";
+import QrScanner from "qr-scanner";  // Import qr-scanner
 import { getImageUrl } from "../helpers/itemHelper";
 import {
   getCafe,
@@ -20,6 +20,8 @@ const SetPaymentQr = ({ shopId,
   const [isQRISavailable, setIsQRISavailable] = useState(0);
   const qrPaymentInputRef = useRef(null);
   const qrCodeContainerRef = useRef(null);
+
+  const [qrCodeData, setQrCodeData] = useState(null);
   const [cafe, setCafe] = useState({});
 
   const [isConfigQRIS, setIsConfigQRIS] = useState(false);
@@ -45,12 +47,6 @@ const SetPaymentQr = ({ shopId,
     fetchCafe();
   }, [shopId]);
 
-  // Detect QR code when qrPayment updates
-  useEffect(() => {
-    if (qrPayment && isConfigQRIS) {
-      detectQRCodeFromContainer();
-    }
-  }, [qrPayment, isConfigQRIS]);
 
   // Handle file input change
   const handleFileChange = (e) => {
@@ -62,25 +58,48 @@ const SetPaymentQr = ({ shopId,
     }
   };
 
-  // Detect QR code from the container
+  useEffect(() => {
+    if (qrPayment && isConfigQRIS) {
+      detectQRCodeFromContainer();
+    }
+  }, [qrPayment, isConfigQRIS]);
+
   const detectQRCodeFromContainer = () => {
     const container = qrCodeContainerRef.current;
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
+    if (!container) return;
+
     const img = new Image();
     img.crossOrigin = "Anonymous";
-    img.onload = () => {
-      canvas.width = container.offsetWidth;
-      canvas.height = container.offsetHeight;
-      context.drawImage(img, 0, 0, canvas.width, canvas.height);
-      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-      const qrCode = jsQR(imageData.data, canvas.width, canvas.height);
-      setQrCodeDetected(!!qrCode);
-      if (qrCode) {
-        console.log("QR Code detected:", qrCode.data);
-      }
-    };
     img.src = qrPayment;
+
+    img.onload = () => {
+      // Buat canvas dari image
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d");
+      canvas.width = img.width;
+      canvas.height = img.height;
+      context.drawImage(img, 0, 0);
+
+      // Ambil data URL dari canvas (png)
+      const imageDataUrl = canvas.toDataURL();
+
+      QrScanner.scanImage(imageDataUrl, { returnDetailedScanResult: true })
+        .then(result => {
+          setQrCodeDetected(true);
+          setQrCodeData(result.data);
+          console.log("QR Code detected:", result.data);
+        })
+        .catch(() => {
+          setQrCodeDetected(false);
+          setQrCodeData(null);
+          console.log("QR Code not detected");
+        });
+    };
+
+    img.onerror = () => {
+      setQrCodeDetected(false);
+      setQrCodeData(null);
+    };
   };
 
   // Save cafe details

src/pages/Cart.js

@@ -272,6 +272,8 @@ export default function Invoice({ shopId, setModal, table, sendParam, deviceType
         socketId
       );
       localStorage.removeItem('lastTransaction')
+      // Dispatch the custom event
+      window.dispatchEvent(new Event("localStorageUpdated"));
     }
     else