From ef219db6386855e995e489bfa61631d4a2bb2732 Mon Sep 17 00:00:00 2001
From: Gk <76690271+gk-4VII@users.noreply.github.com>
Date: Mon, 19 Aug 2024 15:30:17 +0530
Subject: [PATCH] [ES-1410] Handled QR-Code click event functionality for Inji
 login. (#848)

Signed-off-by: Gk <76690271+gk-4VII@users.noreply.github.com>
---
 oidc-ui/src/components/LoginQRCode.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/oidc-ui/src/components/LoginQRCode.js b/oidc-ui/src/components/LoginQRCode.js
index 1be573bc6..5cccb670f 100644
--- a/oidc-ui/src/components/LoginQRCode.js
+++ b/oidc-ui/src/components/LoginQRCode.js
@@ -36,7 +36,8 @@ export default function LoginQRCode({
   const [error, setError] = useState(null);
   const [qrCodeTimeOut, setQrCodeTimeout] = useState();
   const [errorBanner, setErrorBanner] = useState(null);
-
+  const [qrRedirectUrl, setQrRedirectUrl] = useState("");
+  
   const linkedTransactionExpireInSec =
     openIDConnectService.getEsignetConfiguration(
       configurationKeys.linkedTransactionExpireInSecs
@@ -79,6 +80,8 @@ export default function LoginQRCode({
       response.expireDateTime
     );
 
+    setQrRedirectUrl(text);
+    
     const canvas = document.createElement("canvas");
     QRCode.toCanvas(
       canvas,
@@ -436,6 +439,11 @@ export default function LoginQRCode({
     setErrorBanner(null);
   };
 
+  const handleQRCode = () => {
+    window.onbeforeunload = null;
+    window.location.href = qrRedirectUrl;
+  };
+  
   return (
     <>
       <div className="grid grid-cols-8 items-center">
@@ -475,8 +483,8 @@ export default function LoginQRCode({
         )}
         {qr && (
           <div className="w-full flex justify-center">
-            <div className="border border-4 qrcode-border rounded-3xl p-2">
-              <img id="wallet-qr-code" src={qr} style={{ height: "186px", width: "186px" }} />
+            <div className="border border-4 qrcode-border rounded-3xl p-2 hover:cursor-pointer onClick={handleQRCode}">
+              <img id="wallet-qr-code" src={qr} style={{ height: "186px", width: "186px" }} alt="wallet-qr-code"/>
             </div>
           </div>
         )}