Merge pull request #7537 from thedevildude/fix#7505

Replace react-qr-reader with @yudiel/react-qr-scanner package

package.json

@@ -61,6 +61,7 @@
     "@rescript/react": "^0.11.0",
     "@sentry/browser": "^7.57.0",
     "@yaireo/ui-range": "^2.1.15",
+    "@yudiel/react-qr-scanner": "^2.0.0-beta.3",
     "axios": "^1.4.0",
     "browser-image-compression": "^2.0.2",
     "cross-env": "^7.0.3",
@@ -90,7 +91,6 @@
     "react-markdown": "^8.0.7",
     "react-pdf": "^7.7.1",
     "react-player": "^2.13.0",
-    "react-qr-reader": "^2.2.1",
     "react-redux": "^8.1.1",
     "react-transition-group": "^4.4.5",
     "react-webcam": "^7.1.1",
@@ -186,4 +186,4 @@
     "node": ">=20.12.0"
   },
   "packageManager": "[email protected]"
-}
+}

src/Components/ABDM/LinkABHANumberModal.tsx

@@ -183,7 +183,7 @@ const ScanABHAQRSection = ({
           }
           setQrValue(value);
         }}
-        parse={async (value: string) => {
+        parse={async (value: string | null) => {
           if (!value) return;
           setIsLoading(true);
 

src/Components/Assets/AssetsList.tsx

@@ -1,4 +1,4 @@
-import QrReader from "react-qr-reader";
+import { Scanner } from "@yudiel/react-qr-scanner";
 import * as Notification from "../../Utils/Notifications.js";
 import { listAssets } from "../../Redux/actions";
 import { assetClassProps, AssetData } from "./AssetTypes";
@@ -156,20 +156,21 @@ const AssetsList = () => {
           <CareIcon icon="l-times" className="mr-1 text-lg" />
           Close Scanner
         </button>
-        <QrReader
-          delay={300}
-          onScan={async (value: string | null) => {
-            if (value) {
-              const assetId = await getAssetIdFromQR(value);
-              checkValidAssetId(assetId ?? value);
+        <Scanner
+          onResult={async (text) => {
+            if (text) {
+              const assetId = await getAssetIdFromQR(text);
+              checkValidAssetId(assetId ?? text);
             }
           }}
-          onError={(e) =>
+          onError={(e) => {
             Notification.Error({
               msg: e.message,
-            })
-          }
-          style={{ width: "100%" }}
+            });
+          }}
+          options={{
+            delayBetweenScanAttempts: 300,
+          }}
         />
         <h2 className="self-center text-center text-lg">Scan Asset QR!</h2>
       </div>

src/Components/Common/QRScanner.tsx

@@ -2,14 +2,14 @@ import * as Notification from "../../Utils/Notifications.js";
 
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import DialogModal from "./Dialog";
-import QrReader from "react-qr-reader";
 import TextFormField from "../Form/FormFields/TextFormField.js";
 import { useState } from "react";
+import { Scanner } from "@yudiel/react-qr-scanner";
 
 interface IQRScannerModalProps {
   show: boolean;
   onClose: () => void;
-  onScan: (scannedValue: any) => any;
+  onScan: (scannedValue: string | null) => void;
   description?: string;
   disabled?: boolean;
 }
@@ -32,15 +32,16 @@ const QRScannerModal = ({
         <h2 className="mb-4 self-center text-center text-lg">
           {description || "Scan QR code!"}
         </h2>
-        <QrReader
-          delay={300}
-          onScan={onScan}
-          onError={(e: any) =>
+        <Scanner
+          onResult={onScan}
+          onError={(e) =>
             Notification.Error({
               msg: e.message,
             })
           }
-          style={{ width: "100%" }}
+          options={{
+            delayBetweenScanAttempts: 300,
+          }}
         />
       </div>
     </DialogModal>
@@ -50,7 +51,7 @@ const QRScannerModal = ({
 interface IProps {
   value: string;
   onChange: (value: string) => void;
-  parse?: (scannedValue: any) => any;
+  parse?: (scannedValue: string | null) => void;
   className?: string;
   error?: string;
   label?: string;
@@ -92,8 +93,8 @@ const QRScanner = ({
         show={showScanner}
         disabled={disabled}
         onClose={() => setShowScanner(false)}
-        onScan={async (scannedValue: any) => {
-          const parsedValue = (await parse?.(scannedValue)) ?? null;
+        onScan={async (scannedValue) => {
+          const parsedValue = parse?.(scannedValue) ?? null;
           if (parsedValue) {
             onChange(parsedValue);
             setShowScanner(false);

src/Components/Facility/AssetCreate.tsx

@@ -18,7 +18,7 @@ import { FieldErrorText, FieldLabel } from "../Form/FormFields/FormField";
 import { LocationSelect } from "../Common/LocationSelect";
 import Page from "../Common/components/Page";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
-import QrReader from "react-qr-reader";
+import { Scanner } from "@yudiel/react-qr-scanner";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import SwitchV2 from "../Common/components/Switch";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
@@ -418,15 +418,16 @@ const AssetCreate = (props: AssetProps) => {
           <CareIcon icon="l-times" className="mr-2 text-lg" />
           {t("close_scanner")}
         </button>
-        <QrReader
-          delay={300}
-          onScan={(assetId: any) => (assetId ? parseAssetId(assetId) : null)}
-          onError={(e: any) =>
+        <Scanner
+          onResult={(assetId) => (assetId ? parseAssetId(assetId) : null)}
+          onError={(e) =>
             Notification.Error({
               msg: e.message,
             })
           }
-          style={{ width: "100%" }}
+          options={{
+            delayBetweenScanAttempts: 300,
+          }}
         />
         <h2 className="self-center text-center text-lg">
           {t("scan_asset_qr")}