ok

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