Upgraded qrcode.react to latest version (ohcnetwork#9054)

package.json

@@ -83,7 +83,7 @@
     "i18next-http-backend": "^2.6.2",
     "lodash-es": "^4.17.21",
     "postcss-loader": "^8.1.1",
-    "qrcode.react": "^3.1.0",
+    "qrcode.react": "^4.1.0",
     "raviger": "^4.1.2",
     "react": "18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
@@ -109,7 +109,6 @@
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.9.0",
-    "@types/qrcode.react": "^1.0.5",
     "@types/react": "^18.3.12",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-csv": "^1.1.10",
@@ -174,4 +173,4 @@
     "node": ">=22.11.0"
   },
   "packageManager": "[email protected]"
-}
+}

src/components/ABDM/ABHAProfileModal.tsx

@@ -1,4 +1,4 @@
-import QRCode from "qrcode.react";
+import { QRCodeSVG } from "qrcode.react";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -102,7 +102,7 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
         className="print flex flex-col gap-4 border-black sm:flex-row print:w-full print:border"
       >
         <div className="flex-1 sm:aspect-square sm:h-40 sm:flex-auto">
-          <QRCode
+          <QRCodeSVG
             className="h-full w-full border border-black p-1"
             value={JSON.stringify({
               hidn: abha?.abha_number,

src/components/Assets/AssetManage.tsx

@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import QRCode from "qrcode.react";
+import { QRCodeSVG } from "qrcode.react";
 import { navigate } from "raviger";
 import { ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -132,7 +132,7 @@ const AssetManage = (props: AssetManageProps) => {
       </div>
       <h2 className="text-center">Print Preview</h2>
       <div id="section-to-print" className="print flex justify-center">
-        <QRCode size={200} value={asset?.id ?? ""} />
+        <QRCodeSVG size={200} value={asset?.id ?? ""} />
       </div>
     </div>
   );

src/components/Shifting/ShiftDetails.tsx

@@ -1,5 +1,5 @@
 import careConfig from "@careConfig";
-import QRCode from "qrcode.react";
+import { QRCodeSVG } from "qrcode.react";
 import { Link, navigate } from "raviger";
 import { useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
@@ -429,8 +429,8 @@ export default function ShiftDetails(props: { id: string }) {
             <div className="flex">
               <div>
                 <div className="">
-                  <QRCode
-                    value={`${window.location.origin}/shifting/ data.id`}
+                  <QRCodeSVG
+                    value={`${window.location.origin}/shifting/${data.id}`}
                   />
                 </div>
               </div>