From 4cb3e291e1eb9b1ee917399cb7a9e4a28e93eee9 Mon Sep 17 00:00:00 2001
From: Shiva <shivakumar@beehyv.com>
Date: Tue, 2 Apr 2024 11:13:45 +0530
Subject: [PATCH 01/10] Adding responsiveness Signed-off-by: Shiva
 <shivakumar@beehyv.com>

---
 src/assets/qr.svg                             | 14 ++++++
 .../InjiStepper.tsx                           | 47 -------------------
 .../InjiStepper/DesktopStepper.tsx            | 25 ++++++++++
 .../InjiStepper/MobileStepper.tsx             |  9 ++++
 .../InjiStepper/index.tsx                     | 34 ++++++++++++++
 .../VerificationProgressTracker/QrScanner.tsx |  4 +-
 .../Home/VerificationSection/ScanQrCode.tsx   | 27 +++++++++--
 .../commons/StyledButton.tsx                  | 11 +++--
 8 files changed, 117 insertions(+), 54 deletions(-)
 create mode 100644 src/assets/qr.svg
 delete mode 100644 src/components/Home/VerificationProgressTracker/InjiStepper.tsx
 create mode 100644 src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
 create mode 100644 src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
 create mode 100644 src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx

diff --git a/src/assets/qr.svg b/src/assets/qr.svg
new file mode 100644
index 00000000..8f943b9d
--- /dev/null
+++ b/src/assets/qr.svg
@@ -0,0 +1,14 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+    <g id="SVGRepo_iconCarrier">
+        <rect x="3" y="3" width="7" height="7" rx="1" stroke="rgb(255, 127, 0)" stroke-width="2"></rect>
+        <rect x="3" y="14" width="7" height="7" rx="1" stroke="rgb(255, 127, 0)" stroke-width="2"></rect>
+        <rect x="14" y="3" width="7" height="7" rx="1" stroke="rgb(255, 127, 0)" stroke-width="2"></rect>
+        <rect x="13" y="13" width="3" height="3" rx="0.5" fill="rgb(255, 127, 0)"></rect>
+        <rect x="16" y="16" width="3" height="3" rx="0.5" fill="rgb(255, 127, 0)"></rect>
+        <rect x="19" y="13" width="3" height="3" rx="0.5" fill="rgb(255, 127, 0)"></rect>
+        <rect x="19" y="19" width="3" height="3" rx="0.5" fill="rgb(255, 127, 0)"></rect>
+        <rect x="13" y="19" width="3" height="3" rx="0.5" fill="rgb(255, 127, 0)"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper.tsx
deleted file mode 100644
index 448aea86..00000000
--- a/src/components/Home/VerificationProgressTracker/InjiStepper.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import {Box, Step, StepContent, StepLabel, Stepper, Typography} from "@mui/material";
-
-const steps = [
-    {
-        label: 'Scan QR Code',
-        description: 'Tap the button and display the QR code shown on your digital certificate / card',
-    },
-    {
-        label: 'Activate your device’s camera',
-        description:
-            'A notification will prompt to activate your device’s camera',
-    },
-    {
-        label: 'Verification',
-        description: 'Validating and verification of your digital document / card'
-    },
-    {
-        label: 'Result',
-        description: 'Credibility result of your digital document / card'
-    }
-];
-
-const InjiStepper = ({activeStep}: any) => {
-    return (
-        <Box style={{ marginTop: '30px' }}>
-            <Stepper activeStep={activeStep} orientation="vertical">
-                {steps.map((step, index) => (
-                    <Step key={step.label} style={{alignContent: 'start'}}>
-                        <StepLabel>
-                            <Typography style={{font: 'normal normal bold 16px/20px Inter'}}>
-                                {step.label}
-                            </Typography>
-                        </StepLabel>
-                        <StepContent
-                            TransitionProps={{appear: true, unmountOnExit: false}}
-                            hidden={false} style={{borderColor: '#FF7F00', display: 'block'}}>
-                            <Typography>{step.description}</Typography>
-                        </StepContent>
-                    </Step>
-                ))}
-            </Stepper>
-        </Box>
-    );
-}
-
-export default InjiStepper;
diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
new file mode 100644
index 00000000..e5c7a0dc
--- /dev/null
+++ b/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import {Box, Step, StepContent, StepLabel, Stepper, Typography} from "@mui/material";
+
+function DesktopStepper({steps, activeStep}: {steps: {label: string, description: string}[], activeStep: number}) {
+    return (
+        <Stepper activeStep={activeStep} orientation="vertical">
+            {steps.map((step, index) => (
+                <Step key={step.label} style={{alignContent: 'start'}}>
+                    <StepLabel>
+                        <Typography style={{font: 'normal normal bold 16px/20px Inter'}}>
+                            {step.label}
+                        </Typography>
+                    </StepLabel>
+                    <StepContent
+                        TransitionProps={{appear: true, unmountOnExit: false}}
+                        hidden={false} style={{borderColor: '#FF7F00', display: 'block'}}>
+                        <Typography>{step.description}</Typography>
+                    </StepContent>
+                </Step>
+            ))}
+        </Stepper>
+    );
+}
+
+export default DesktopStepper;
\ No newline at end of file
diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
new file mode 100644
index 00000000..b578226c
--- /dev/null
+++ b/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+function MobileStepper({steps, activeStep}: {steps: {label: string, description: string}[], activeStep: number}) {
+    return (
+        <div></div>
+    );
+}
+
+export default MobileStepper;
diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
new file mode 100644
index 00000000..43052356
--- /dev/null
+++ b/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {Box, Step, StepContent, StepLabel, Stepper, Typography, useMediaQuery} from "@mui/material";
+import DesktopStepper from "./DesktopStepper";
+
+const steps = [
+    {
+        label: 'Scan QR Code',
+        description: 'Tap the button and display the QR code shown on your digital certificate / card',
+    },
+    {
+        label: 'Activate your device’s camera',
+        description:
+            'A notification will prompt to activate your device’s camera',
+    },
+    {
+        label: 'Verification',
+        description: 'Validating and verification of your digital document / card'
+    },
+    {
+        label: 'Result',
+        description: 'Credibility result of your digital document / card'
+    }
+];
+
+const InjiStepper = ({activeStep}: {activeStep: number}) => {
+
+    return (
+        <Box style={{marginTop: '30px'}}>
+            <DesktopStepper steps={steps} activeStep={activeStep}/>
+        </Box>
+    );
+}
+
+export default InjiStepper;
diff --git a/src/components/Home/VerificationProgressTracker/QrScanner.tsx b/src/components/Home/VerificationProgressTracker/QrScanner.tsx
index 527e00e0..3db11855 100644
--- a/src/components/Home/VerificationProgressTracker/QrScanner.tsx
+++ b/src/components/Home/VerificationProgressTracker/QrScanner.tsx
@@ -6,6 +6,7 @@ function QrScanner({setVerifying, setActiveStep, setQrData}: any) {
     const [dataRead, setDataRead] = useState(false)
     const isDataRead = useCallback(() => dataRead, [dataRead]);
 
+
     return (
         <Scanner
             enabled={!dataRead}
@@ -45,7 +46,8 @@ function QrScanner({setVerifying, setActiveStep, setQrData}: any) {
                 },
                 video: {
                     zIndex: 1000
-                }
+                },
+                finderBorder: 10
             }
         }
         />
diff --git a/src/components/Home/VerificationSection/ScanQrCode.tsx b/src/components/Home/VerificationSection/ScanQrCode.tsx
index 5c92d565..0360be94 100644
--- a/src/components/Home/VerificationSection/ScanQrCode.tsx
+++ b/src/components/Home/VerificationSection/ScanQrCode.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import {Box, Button, Grid, Typography} from "@mui/material";
-import scanQr from "../../../assets/scanner-ouline.svg";
 import StyledButton from "./commons/StyledButton";
 
+import scanQr from "../../../assets/scanner-ouline.svg";
+import qrImage from "../../../assets/qr.svg";
+
 const ScanQrCode = ({setActiveStep}: {
     setActiveStep: (activeStep: number) => void
 }) => {
@@ -13,10 +15,29 @@ const ScanQrCode = ({setActiveStep}: {
                 marginBottom: "44px"
             }}>Scan QR Code</Grid>
             <Grid item xs={12}>
-                <img src={scanQr} width={350}/>
+                <Box style={{
+                    backgroundImage: `url(${scanQr})`,
+                    backgroundSize: 'cover',
+                    width: '300px',
+                    height: '300px',
+                    padding: '24px',
+                    margin: "auto"
+                }}>
+                    <div style={{
+                        width: '100%',
+                        height: '100%',
+                        borderRadius: '12px',
+                        display: "grid",
+                        placeContent: "center",
+                        opacity: 0.05,
+                        backgroundColor: '#FF7F00',
+                    }}>
+                        <img src={qrImage} width={'100px'}/>
+                    </div>
+                </Box>
             </Grid>
             <Grid item xs={12}>
-                <StyledButton style={{margin: "40px 0"}} onClick={() => setActiveStep(1)}>
+                <StyledButton style={{margin: "40px 0"}} fill onClick={() => setActiveStep(1)}>
                     Scan the QR Code
                 </StyledButton>
             </Grid>
diff --git a/src/components/Home/VerificationSection/commons/StyledButton.tsx b/src/components/Home/VerificationSection/commons/StyledButton.tsx
index 45cdb8b7..f2634d6b 100644
--- a/src/components/Home/VerificationSection/commons/StyledButton.tsx
+++ b/src/components/Home/VerificationSection/commons/StyledButton.tsx
@@ -1,16 +1,21 @@
 import React from 'react';
-import {Button, ButtonProps, Typography} from "@mui/material";
+import {Button, ButtonProps} from "@mui/material";
 
-function StyledButton(props: ButtonProps) {
+type StyledButtonProps = ButtonProps & {
+    fill?: boolean
+}
+
+function StyledButton(props: StyledButtonProps) {
     return (
         <Button
             {...props}
             style={{
-                background: '#FFFFFF 0% 0% no-repeat padding-box',
+                background: `${props.fill ? '#FF7F00' : '#FFFFFF'} 0% 0% no-repeat padding-box`,
                 border: '2px solid #FF7F00',
                 borderRadius: '9999px',
                 opacity: 1,
                 padding: '18px 28px',
+                color: props.fill ? '#FFFFFF' : '#FF7F00',
                 ...props.style
             }}
         >

From f2edb08500c535fe9213f79487f7f46121e48ab3 Mon Sep 17 00:00:00 2001
From: Shiva <shivakumar@beehyv.com>
Date: Tue, 2 Apr 2024 13:26:24 +0530
Subject: [PATCH 02/10] Adding responsiveness Signed-off-by: Shiva
 <shivakumar@beehyv.com>

---
 .../InjiStepper/DesktopStepper.tsx                         | 7 +------
 src/components/Home/VerificationSection/Result/index.tsx   | 1 -
 src/components/Home/VerificationSection/index.tsx          | 5 ++++-
 src/pages/Home.tsx                                         | 4 ++--
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
index e5c7a0dc..7503b19a 100644
--- a/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
+++ b/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
@@ -3,7 +3,7 @@ import {Box, Step, StepContent, StepLabel, Stepper, Typography} from "@mui/mater
 
 function DesktopStepper({steps, activeStep}: {steps: {label: string, description: string}[], activeStep: number}) {
     return (
-        <Stepper activeStep={activeStep} orientation="vertical">
+        <Stepper activeStep={activeStep} orientation="horizontal" alternativeLabel>
             {steps.map((step, index) => (
                 <Step key={step.label} style={{alignContent: 'start'}}>
                     <StepLabel>
@@ -11,11 +11,6 @@ function DesktopStepper({steps, activeStep}: {steps: {label: string, description
                             {step.label}
                         </Typography>
                     </StepLabel>
-                    <StepContent
-                        TransitionProps={{appear: true, unmountOnExit: false}}
-                        hidden={false} style={{borderColor: '#FF7F00', display: 'block'}}>
-                        <Typography>{step.description}</Typography>
-                    </StepContent>
                 </Step>
             ))}
         </Stepper>
diff --git a/src/components/Home/VerificationSection/Result/index.tsx b/src/components/Home/VerificationSection/Result/index.tsx
index 596dc228..22cabfb4 100644
--- a/src/components/Home/VerificationSection/Result/index.tsx
+++ b/src/components/Home/VerificationSection/Result/index.tsx
@@ -34,7 +34,6 @@ const Result = ({vc, setActiveStep, vcStatus}: {
     useEffect(() => {
         if (resultSectionRef?.current && !(!!vcDisplayCardPositioning.top)) {
             let positioning = getPositioning(resultSectionRef);
-            console.log("Positioning: ", positioning);
             setVcDisplayCardPositioning(positioning);
         }
     }, [resultSectionRef]);
diff --git a/src/components/Home/VerificationSection/index.tsx b/src/components/Home/VerificationSection/index.tsx
index 516ca2a2..dd0bb742 100644
--- a/src/components/Home/VerificationSection/index.tsx
+++ b/src/components/Home/VerificationSection/index.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import ScanQrCode from "./ScanQrCode";
 import Verification from "./Verification";
 import Result from "./Result";
@@ -8,6 +8,9 @@ const DisplayActiveStep = ({activeStep, setActiveStep}: {
 }) => {
     const [vc, setVc] = useState(null);
     const [vcStatus, setVcStatus] = useState(null);
+    useEffect(() => {
+        console.log({vc, vcStatus})
+    }, [vc, vcStatus]);
     switch (activeStep) {
         case 0:
             return (<ScanQrCode setActiveStep={setActiveStep}/>);
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index ecc0e736..8c7925e7 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -7,10 +7,10 @@ function Home(props: any) {
     const [activeStep, setActiveStep] = useState(0);
     return (
         <Grid container>
-            <Grid item xs={6}>
+            <Grid item xs={12} md={6}>
                 <VerificationProgressTracker activeStep={activeStep}/>
             </Grid>
-            <Grid item xs={6}>
+            <Grid item xs={12} md={6}>
                 <VerificationSection activeStep={activeStep} setActiveStep={setActiveStep}/>
             </Grid>
         </Grid>

From ae509442c0b20abd8d1203213aa1a2fcd57b037d Mon Sep 17 00:00:00 2001
From: Shiva <shivakumar@beehyv.com>
Date: Tue, 2 Apr 2024 18:23:11 +0530
Subject: [PATCH 03/10] Added code to read qr from image Signed-off-by: Shiva
 <shivakumar@beehyv.com>

---
 README.md                                     | 17 ++++++++
 package-lock.json                             |  6 +++
 package.json                                  |  1 +
 .../VerificationProgressTracker/QrScanner.tsx |  8 +---
 .../Home/VerificationSection/FileReader.tsx   | 43 +++++++++++++++++++
 .../Home/VerificationSection/ScanQrCode.tsx   | 34 +++++----------
 6 files changed, 79 insertions(+), 30 deletions(-)
 create mode 100644 src/components/Home/VerificationSection/FileReader.tsx

diff --git a/README.md b/README.md
index 4d053260..1f3269ad 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,19 @@
 # inji-verify
 Repository host the source code, documentation, and other related files for the Inji Verify project.
+
+# Project Setup - Development
+
+Prerequisites:
+* Node 18 - Can be installed using [nvm](https://github.com/nvm-sh/nvm). Run following command to install node
+
+    ```curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash```
+
+    ```nvm install 18```
+
+Run following commands to start the application
+
+```npm install```
+
+```npm start```
+
+
diff --git a/package-lock.json b/package-lock.json
index dcc1dada..4cbc3b06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@types/react": "^18.2.73",
         "@types/react-dom": "^18.2.23",
         "@yudiel/react-qr-scanner": "^2.0.0-beta.3",
+        "jsqr": "^1.4.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-qr-scanner": "^1.0.0-alpha.11",
@@ -12962,6 +12963,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
diff --git a/package.json b/package.json
index 5c53cbc3..7b572740 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.23",
     "@yudiel/react-qr-scanner": "^2.0.0-beta.3",
+    "jsqr": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-qr-scanner": "^1.0.0-alpha.11",
diff --git a/src/components/Home/VerificationProgressTracker/QrScanner.tsx b/src/components/Home/VerificationProgressTracker/QrScanner.tsx
index 3db11855..55327f16 100644
--- a/src/components/Home/VerificationProgressTracker/QrScanner.tsx
+++ b/src/components/Home/VerificationProgressTracker/QrScanner.tsx
@@ -1,12 +1,10 @@
 import React, {useCallback, useState} from 'react';
 import {Scanner} from '@yudiel/react-qr-scanner';
 
-
 function QrScanner({setVerifying, setActiveStep, setQrData}: any) {
     const [dataRead, setDataRead] = useState(false)
     const isDataRead = useCallback(() => dataRead, [dataRead]);
 
-
     return (
         <Scanner
             enabled={!dataRead}
@@ -46,10 +44,8 @@ function QrScanner({setVerifying, setActiveStep, setQrData}: any) {
                 },
                 video: {
                     zIndex: 1000
-                },
-                finderBorder: 10
-            }
-        }
+                }
+            }}
         />
     );
 }
diff --git a/src/components/Home/VerificationSection/FileReader.tsx b/src/components/Home/VerificationSection/FileReader.tsx
new file mode 100644
index 00000000..9f7266ae
--- /dev/null
+++ b/src/components/Home/VerificationSection/FileReader.tsx
@@ -0,0 +1,43 @@
+import QrReader from "jsqr";
+
+function onImageLoad ({image, setQrData}: any) {
+    const canvas: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement;
+    const ctx = canvas?.getContext('2d');
+    canvas.width = image.width;
+    canvas.height = image.height;
+    ctx?.drawImage(image, 0, 0);
+    const imageData = ctx?.getImageData(0, 0, canvas.width, canvas.height);
+    if (!imageData) return;
+    const qrData = QrReader(imageData.data, imageData.width, imageData.height);
+    setQrData(qrData?.data?.toString());
+};
+
+function onFileReaderLoad (e: ProgressEvent<FileReader>, setQrData: any) {
+    const image = new Image();
+    image.onload = (ev) => onImageLoad({image, setQrData})
+    image.src = e?.target?.result?.toString() || "";
+};
+
+export const ImportFromFile = ({setQrData}: {setQrData: (qrData?: string) => void}) => {
+    return (
+        <div style={{margin: "12px auto", display: "grid", placeContent: "center"}}>
+            <label htmlFor={"upload-qr"} style={{font: 'normal normal normal 16px/21px Inter'}}>Upload your certificate</label><br/>
+            <input
+                type="file"
+                id="upload-qr"
+                name="upload-qr"
+                accept="image/png, image/jpeg"
+                style={{
+                    margin: "8px auto"
+                }}
+                onChange={e => {
+                    const file = e?.target?.files && e?.target?.files[0];
+                    if (!file) return;
+                    const reader = new FileReader();
+                    reader.onload = (ev: ProgressEvent<FileReader>) => onFileReaderLoad(ev, setQrData)
+                    reader.readAsDataURL(file);
+                }}
+            />
+            <canvas id="canvas" style={{"display": "none"}}></canvas>
+        </div>);
+}
diff --git a/src/components/Home/VerificationSection/ScanQrCode.tsx b/src/components/Home/VerificationSection/ScanQrCode.tsx
index 0360be94..44b18966 100644
--- a/src/components/Home/VerificationSection/ScanQrCode.tsx
+++ b/src/components/Home/VerificationSection/ScanQrCode.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import {Box, Button, Grid, Typography} from "@mui/material";
-import StyledButton from "./commons/StyledButton";
-
 import scanQr from "../../../assets/scanner-ouline.svg";
-import qrImage from "../../../assets/qr.svg";
+import StyledButton from "./commons/StyledButton";
+import {ImportFromFile} from "./FileReader";
 
 const ScanQrCode = ({setActiveStep}: {
     setActiveStep: (activeStep: number) => void
@@ -15,32 +14,19 @@ const ScanQrCode = ({setActiveStep}: {
                 marginBottom: "44px"
             }}>Scan QR Code</Grid>
             <Grid item xs={12}>
-                <Box style={{
-                    backgroundImage: `url(${scanQr})`,
-                    backgroundSize: 'cover',
-                    width: '300px',
-                    height: '300px',
-                    padding: '24px',
-                    margin: "auto"
-                }}>
-                    <div style={{
-                        width: '100%',
-                        height: '100%',
-                        borderRadius: '12px',
-                        display: "grid",
-                        placeContent: "center",
-                        opacity: 0.05,
-                        backgroundColor: '#FF7F00',
-                    }}>
-                        <img src={qrImage} width={'100px'}/>
-                    </div>
-                </Box>
+                <img src={scanQr} width={350}/>
             </Grid>
             <Grid item xs={12}>
-                <StyledButton style={{margin: "40px 0"}} fill onClick={() => setActiveStep(1)}>
+                <StyledButton style={{margin: "40px 0 10px 0"}} onClick={() => setActiveStep(1)}>
                     Scan the QR Code
                 </StyledButton>
             </Grid>
+            <Grid item xs={12}>
+                OR
+            </Grid>
+            <Grid item xs={12}>
+                <ImportFromFile setQrData={(qrData) => {console.log(qrData)}}/>
+            </Grid>
         </Grid>
     );
 }

From aa8710c966d1a9b53697de742e1256ead265e52d Mon Sep 17 00:00:00 2001
From: Shiva <shivakumar@beehyv.com>
Date: Wed, 3 Apr 2024 11:14:10 +0530
Subject: [PATCH 04/10] Responsiveness in stepper Signed-off-by: Shiva
 <shivakumar@beehyv.com>

---
 .../InjiStepper/DesktopStepper.tsx            |  2 +-
 .../StepperContentHeader.tsx                  | 20 ++++++++++++-------
 .../VerificationProgressTracker/styles.ts     |  3 +++
 .../Home/VerificationSection/ScanQrCode.tsx   |  2 +-
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
index 7503b19a..f2317837 100644
--- a/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
+++ b/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
@@ -3,7 +3,7 @@ import {Box, Step, StepContent, StepLabel, Stepper, Typography} from "@mui/mater
 
 function DesktopStepper({steps, activeStep}: {steps: {label: string, description: string}[], activeStep: number}) {
     return (
-        <Stepper activeStep={activeStep} orientation="horizontal" alternativeLabel>
+        <Stepper style={{maxHeight: '350px'}} activeStep={activeStep} orientation="horizontal" alternativeLabel>
             {steps.map((step, index) => (
                 <Step key={step.label} style={{alignContent: 'start'}}>
                     <StepLabel>
diff --git a/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx b/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx
index bf7e54f3..53e82229 100644
--- a/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx
+++ b/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
-import {Box, Typography} from "@mui/material";
+import {Box, Typography, useMediaQuery} from "@mui/material";
 
 function StepperContentHeader(props: any) {
+    const isTabletOrAbove = useMediaQuery("@media(min-width:600px)");
+    console.log("Is tablet: ", isTabletOrAbove);
     return (
         <Box>
             <Typography variant='h4' style={{
@@ -10,12 +12,16 @@ function StepperContentHeader(props: any) {
             }}>
                 Verify your credentials in <span style={{color: '#FF7F00'}}>4 easy steps</span>
             </Typography>
-            <Typography variant='body1' style={{
-                font: 'normal normal normal 16px/21px Inter',
-                margin: '6px 0'
-            }}>
-                Credentials are digitally signed documents with tamper-evident QR codes. These QR codes can be easily verified using the Inji Verify app. Simply scan the QR code with your smartphone camera or use the dedicated verification tool on this page.
-            </Typography>
+            {
+                isTabletOrAbove && (
+                    <Typography variant='body1' style={{
+                        font: 'normal normal normal 16px/21px Inter',
+                        margin: '6px 0'
+                    }}>
+                        Credentials are digitally signed documents with tamper-evident QR codes. These QR codes can be easily verified using the Inji Verify app. Simply scan the QR code with your smartphone camera or use the dedicated verification tool on this page.
+                    </Typography>
+                )
+            }
         </Box>
     );
 }
diff --git a/src/components/Home/VerificationProgressTracker/styles.ts b/src/components/Home/VerificationProgressTracker/styles.ts
index ebb144dc..340bdc73 100644
--- a/src/components/Home/VerificationProgressTracker/styles.ts
+++ b/src/components/Home/VerificationProgressTracker/styles.ts
@@ -8,4 +8,7 @@ export const VerificationProgressTrackerContainer = styled(Box)`
     height: 100vh;
     max-height: 100vh;
     overflow-y: scroll;
+    @media (max-width: 600px) {
+        max-height: 430px;
+    }
 `;
diff --git a/src/components/Home/VerificationSection/ScanQrCode.tsx b/src/components/Home/VerificationSection/ScanQrCode.tsx
index 44b18966..89aa2c7b 100644
--- a/src/components/Home/VerificationSection/ScanQrCode.tsx
+++ b/src/components/Home/VerificationSection/ScanQrCode.tsx
@@ -14,7 +14,7 @@ const ScanQrCode = ({setActiveStep}: {
                 marginBottom: "44px"
             }}>Scan QR Code</Grid>
             <Grid item xs={12}>
-                <img src={scanQr} width={350}/>
+                <img src={scanQr} style={{width: "calc(min(45vw, 350px))"}}/>
             </Grid>
             <Grid item xs={12}>
                 <StyledButton style={{margin: "40px 0 10px 0"}} onClick={() => setActiveStep(1)}>

From 122394ce705c735088935d6dfed7aa5476b7b383 Mon Sep 17 00:00:00 2001
From: Shiva <shivakumar@beehyv.com>
Date: Thu, 4 Apr 2024 06:30:13 +0530
Subject: [PATCH 05/10] Responsiveness in stepper Signed-off-by: Shiva
 <shivakumar@beehyv.com>

---
 .../InjiStepper/DesktopStepper.tsx                  |  7 ++++++-
 .../InjiStepper/MobileStepper.tsx                   | 13 ++++++++++++-
 .../InjiStepper/index.tsx                           |  8 +++++++-
 .../{FileReader.tsx => ImportFromFile.tsx}          |  3 ++-
 .../Home/VerificationSection/ScanQrCode.tsx         |  2 +-
 5 files changed, 28 insertions(+), 5 deletions(-)
 rename src/components/Home/VerificationSection/{FileReader.tsx => ImportFromFile.tsx} (95%)

diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
index f2317837..e5c7a0dc 100644
--- a/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
+++ b/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
@@ -3,7 +3,7 @@ import {Box, Step, StepContent, StepLabel, Stepper, Typography} from "@mui/mater
 
 function DesktopStepper({steps, activeStep}: {steps: {label: string, description: string}[], activeStep: number}) {
     return (
-        <Stepper style={{maxHeight: '350px'}} activeStep={activeStep} orientation="horizontal" alternativeLabel>
+        <Stepper activeStep={activeStep} orientation="vertical">
             {steps.map((step, index) => (
                 <Step key={step.label} style={{alignContent: 'start'}}>
                     <StepLabel>
@@ -11,6 +11,11 @@ function DesktopStepper({steps, activeStep}: {steps: {label: string, description
                             {step.label}
                         </Typography>
                     </StepLabel>
+                    <StepContent
+                        TransitionProps={{appear: true, unmountOnExit: false}}
+                        hidden={false} style={{borderColor: '#FF7F00', display: 'block'}}>
+                        <Typography>{step.description}</Typography>
+                    </StepContent>
                 </Step>
             ))}
         </Stepper>
diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
index b578226c..5086b86f 100644
--- a/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
+++ b/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
@@ -1,8 +1,19 @@
 import React from 'react';
+import {Step, StepLabel, Stepper, Typography} from "@mui/material";
 
 function MobileStepper({steps, activeStep}: {steps: {label: string, description: string}[], activeStep: number}) {
     return (
-        <div></div>
+        <Stepper style={{maxHeight: '350px'}} activeStep={activeStep} orientation="horizontal" alternativeLabel>
+            {steps.map((step, index) => (
+                <Step key={step.label} style={{alignContent: 'start'}}>
+                    <StepLabel>
+                        <Typography style={{font: 'normal normal bold 16px/20px Inter'}}>
+                            {step.label}
+                        </Typography>
+                    </StepLabel>
+                </Step>
+            ))}
+        </Stepper>
     );
 }
 
diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
index 43052356..134f3957 100644
--- a/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
+++ b/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Box, Step, StepContent, StepLabel, Stepper, Typography, useMediaQuery} from "@mui/material";
 import DesktopStepper from "./DesktopStepper";
+import MobileStepper from "./MobileStepper";
 
 const steps = [
     {
@@ -23,10 +24,15 @@ const steps = [
 ];
 
 const InjiStepper = ({activeStep}: {activeStep: number}) => {
+    const isDesktop = useMediaQuery('@media (min-width:768px)');
 
     return (
         <Box style={{marginTop: '30px'}}>
-            <DesktopStepper steps={steps} activeStep={activeStep}/>
+            {
+                isDesktop
+                    ? (<DesktopStepper steps={steps} activeStep={activeStep}/>)
+                    : (<MobileStepper steps={steps} activeStep={activeStep}/>)
+            }
         </Box>
     );
 }
diff --git a/src/components/Home/VerificationSection/FileReader.tsx b/src/components/Home/VerificationSection/ImportFromFile.tsx
similarity index 95%
rename from src/components/Home/VerificationSection/FileReader.tsx
rename to src/components/Home/VerificationSection/ImportFromFile.tsx
index 9f7266ae..869fa2df 100644
--- a/src/components/Home/VerificationSection/FileReader.tsx
+++ b/src/components/Home/VerificationSection/ImportFromFile.tsx
@@ -26,7 +26,7 @@ export const ImportFromFile = ({setQrData}: {setQrData: (qrData?: string) => voi
                 type="file"
                 id="upload-qr"
                 name="upload-qr"
-                accept="image/png, image/jpeg"
+                accept=".png, .jpeg"
                 style={{
                     margin: "8px auto"
                 }}
@@ -36,6 +36,7 @@ export const ImportFromFile = ({setQrData}: {setQrData: (qrData?: string) => voi
                     const reader = new FileReader();
                     reader.onload = (ev: ProgressEvent<FileReader>) => onFileReaderLoad(ev, setQrData)
                     reader.readAsDataURL(file);
+                    console.log({file, reader})
                 }}
             />
             <canvas id="canvas" style={{"display": "none"}}></canvas>
diff --git a/src/components/Home/VerificationSection/ScanQrCode.tsx b/src/components/Home/VerificationSection/ScanQrCode.tsx
index 89aa2c7b..2dd5ac65 100644
--- a/src/components/Home/VerificationSection/ScanQrCode.tsx
+++ b/src/components/Home/VerificationSection/ScanQrCode.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Box, Button, Grid, Typography} from "@mui/material";
 import scanQr from "../../../assets/scanner-ouline.svg";
 import StyledButton from "./commons/StyledButton";
-import {ImportFromFile} from "./FileReader";
+import {ImportFromFile} from "./ImportFromFile";
 
 const ScanQrCode = ({setActiveStep}: {
     setActiveStep: (activeStep: number) => void

From 57e7bceaca53f719f0e44b34e9ddc3611bddd5ee Mon Sep 17 00:00:00 2001
From: Shiva <shivakumar@beehyv.com>
Date: Thu, 4 Apr 2024 07:41:22 +0530
Subject: [PATCH 06/10] Added support to read qr from pdf and image
 Signed-off-by: Shiva <shivakumar@beehyv.com>

---
 package-lock.json                             | 34 ++++++++++++++-
 package.json                                  |  2 +-
 .../VerificationSection/ImportFromFile.tsx    | 33 ++++-----------
 .../Home/VerificationSection/Result/index.tsx | 10 +----
 .../Home/VerificationSection/ScanQrCode.tsx   |  8 ++--
 .../Home/VerificationSection/Verification.tsx | 30 ++-----------
 .../Home/VerificationSection/index.tsx        | 42 ++++++++++++++++---
 src/types/types.ts                            | 14 +++++++
 src/utils/qr-utils.js                         | 18 ++++++++
 9 files changed, 121 insertions(+), 70 deletions(-)
 create mode 100644 src/types/types.ts
 create mode 100644 src/utils/qr-utils.js

diff --git a/package-lock.json b/package-lock.json
index 4cbc3b06..ffae729b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@emotion/styled": "^11.11.5",
         "@mui/material": "^5.15.14",
         "@mui/styled-engine": "^5.15.14",
+        "@openhealthnz-credentials/pdf-image-qr-scanner": "^1.0.2",
         "@sunbird-rc/verification-sdk": "^0.1.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
@@ -21,7 +22,6 @@
         "@types/react": "^18.2.73",
         "@types/react-dom": "^18.2.23",
         "@yudiel/react-qr-scanner": "^2.0.0-beta.3",
-        "jsqr": "^1.4.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-qr-scanner": "^1.0.0-alpha.11",
@@ -3832,6 +3832,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@openhealthnz-credentials/pdf-image-qr-scanner": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@openhealthnz-credentials/pdf-image-qr-scanner/-/pdf-image-qr-scanner-1.0.2.tgz",
+      "integrity": "sha512-GA4TQqWVoldNRLOru/Z+V2xIBFUkBueRz/QUfBC65UfkKeVg5J5d8exrQATGbI2ZMu+iaFFNV/Q7AEPKNqJ/oQ==",
+      "dependencies": {
+        "jsqr": "^1.4.0",
+        "pdfjs-dist": "^2.12.313"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -7736,6 +7745,12 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dommatrix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz",
+      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==",
+      "deprecated": "dommatrix is no longer maintained. Please use @thednp/dommatrix."
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -14056,6 +14071,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/pdfjs-dist": {
+      "version": "2.16.105",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.16.105.tgz",
+      "integrity": "sha512-J4dn41spsAwUxCpEoVf6GVoz908IAA3mYiLmNxg8J9kfRXc2jxpbUepcP0ocp0alVNLFthTAM8DZ1RaHh8sU0A==",
+      "dependencies": {
+        "dommatrix": "^1.0.3",
+        "web-streams-polyfill": "^3.2.1"
+      },
+      "peerDependencies": {
+        "worker-loader": "^3.0.8"
+      },
+      "peerDependenciesMeta": {
+        "worker-loader": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
diff --git a/package.json b/package.json
index 7b572740..39e1895f 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@emotion/styled": "^11.11.5",
     "@mui/material": "^5.15.14",
     "@mui/styled-engine": "^5.15.14",
+    "@openhealthnz-credentials/pdf-image-qr-scanner": "^1.0.2",
     "@sunbird-rc/verification-sdk": "^0.1.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -16,7 +17,6 @@
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.23",
     "@yudiel/react-qr-scanner": "^2.0.0-beta.3",
-    "jsqr": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-qr-scanner": "^1.0.0-alpha.11",
diff --git a/src/components/Home/VerificationSection/ImportFromFile.tsx b/src/components/Home/VerificationSection/ImportFromFile.tsx
index 869fa2df..f81f0ce3 100644
--- a/src/components/Home/VerificationSection/ImportFromFile.tsx
+++ b/src/components/Home/VerificationSection/ImportFromFile.tsx
@@ -1,24 +1,7 @@
-import QrReader from "jsqr";
+import {scanFilesForQr} from "../../../utils/qr-utils";
+import {QrScanResult} from "../../../types/types";
 
-function onImageLoad ({image, setQrData}: any) {
-    const canvas: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement;
-    const ctx = canvas?.getContext('2d');
-    canvas.width = image.width;
-    canvas.height = image.height;
-    ctx?.drawImage(image, 0, 0);
-    const imageData = ctx?.getImageData(0, 0, canvas.width, canvas.height);
-    if (!imageData) return;
-    const qrData = QrReader(imageData.data, imageData.width, imageData.height);
-    setQrData(qrData?.data?.toString());
-};
-
-function onFileReaderLoad (e: ProgressEvent<FileReader>, setQrData: any) {
-    const image = new Image();
-    image.onload = (ev) => onImageLoad({image, setQrData})
-    image.src = e?.target?.result?.toString() || "";
-};
-
-export const ImportFromFile = ({setQrData}: {setQrData: (qrData?: string) => void}) => {
+export const ImportFromFile = ({setScanResult}: {setScanResult: (result: QrScanResult) => void}) => {
     return (
         <div style={{margin: "12px auto", display: "grid", placeContent: "center"}}>
             <label htmlFor={"upload-qr"} style={{font: 'normal normal normal 16px/21px Inter'}}>Upload your certificate</label><br/>
@@ -26,17 +9,17 @@ export const ImportFromFile = ({setQrData}: {setQrData: (qrData?: string) => voi
                 type="file"
                 id="upload-qr"
                 name="upload-qr"
-                accept=".png, .jpeg"
+                accept=".png, .jpeg, .jpg, .pdf"
                 style={{
                     margin: "8px auto"
                 }}
                 onChange={e => {
                     const file = e?.target?.files && e?.target?.files[0];
                     if (!file) return;
-                    const reader = new FileReader();
-                    reader.onload = (ev: ProgressEvent<FileReader>) => onFileReaderLoad(ev, setQrData)
-                    reader.readAsDataURL(file);
-                    console.log({file, reader})
+                    scanFilesForQr(file)
+                        .then(scanResult => {
+                            setScanResult(scanResult);
+                        });
                 }}
             />
             <canvas id="canvas" style={{"display": "none"}}></canvas>
diff --git a/src/components/Home/VerificationSection/Result/index.tsx b/src/components/Home/VerificationSection/Result/index.tsx
index 22cabfb4..65d3fcc0 100644
--- a/src/components/Home/VerificationSection/Result/index.tsx
+++ b/src/components/Home/VerificationSection/Result/index.tsx
@@ -3,6 +3,7 @@ import ResultSummary from "./ResultSummary";
 import VcDisplayCard from "./VcDisplayCard";
 import {Box} from "@mui/material";
 import StyledButton from "../commons/StyledButton";
+import {VcStatus} from "../../../../types/types";
 
 const getPositioning = (resultSectionRef: React.RefObject<HTMLDivElement>) => {
     // top = 340 - it is precalculated based in the xd design
@@ -18,14 +19,7 @@ const getPositioning = (resultSectionRef: React.RefObject<HTMLDivElement>) => {
 }
 
 const Result = ({vc, setActiveStep, vcStatus}: {
-    vc: any, setActiveStep: (activeStep: number) => void, vcStatus: {
-        status: "OK" | "NOK", checks: {
-            "active": string | null,
-            "revoked": "OK" | "NOK",
-            "expired": "OK" | "NOK",
-            "proof": "OK" | "NOK"
-        }[]
-    } | null
+    vc: any, setActiveStep: (activeStep: number) => void, vcStatus: VcStatus | null
 }) => {
     const initialPositioning: { top?: number, right?: number } = {};
     const resultSectionRef = React.createRef<HTMLDivElement>();
diff --git a/src/components/Home/VerificationSection/ScanQrCode.tsx b/src/components/Home/VerificationSection/ScanQrCode.tsx
index 2dd5ac65..75e26638 100644
--- a/src/components/Home/VerificationSection/ScanQrCode.tsx
+++ b/src/components/Home/VerificationSection/ScanQrCode.tsx
@@ -3,9 +3,11 @@ import {Box, Button, Grid, Typography} from "@mui/material";
 import scanQr from "../../../assets/scanner-ouline.svg";
 import StyledButton from "./commons/StyledButton";
 import {ImportFromFile} from "./ImportFromFile";
+import {QrScanResult} from "../../../types/types";
 
-const ScanQrCode = ({setActiveStep}: {
-    setActiveStep: (activeStep: number) => void
+const ScanQrCode = ({setActiveStep, setScanResult}: {
+    setActiveStep: (activeStep: number) => void,
+    setScanResult: (result: QrScanResult) => void
 }) => {
     return (
         <Grid container style={{padding: "104px", textAlign: "center"}}>
@@ -25,7 +27,7 @@ const ScanQrCode = ({setActiveStep}: {
                 OR
             </Grid>
             <Grid item xs={12}>
-                <ImportFromFile setQrData={(qrData) => {console.log(qrData)}}/>
+                <ImportFromFile setScanResult={setScanResult}/>
             </Grid>
         </Grid>
     );
diff --git a/src/components/Home/VerificationSection/Verification.tsx b/src/components/Home/VerificationSection/Verification.tsx
index 7a94f815..38e1fd14 100644
--- a/src/components/Home/VerificationSection/Verification.tsx
+++ b/src/components/Home/VerificationSection/Verification.tsx
@@ -5,36 +5,12 @@ import Loader from "../../commons/Loader";
 import QrScanner from "../VerificationProgressTracker/QrScanner";
 import {verify} from "../../../utils/verification-utils";
 
-const Verification = ({setVc, setVcStatus, setActiveStep}: {
-    setVc: (vc: any) => void, setVcStatus: (status: any) => void, setActiveStep: (activeStep: number) => void
+const Verification = ({setQrData, setActiveStep}: {
+    setQrData: (data: string) => void, setActiveStep: (activeStep: number) => void
 }) => {
     const [verifying, setVerifying] = useState(false);
-    const [qrData, setQrData] = useState("");
 
-    useEffect(() => {
-        if (qrData === "") return;
-        try {
-            let vc = JSON.parse(qrData);
-            verify(vc)
-                .then(status => {
-                    setVc(vc);
-                    setVcStatus(status);
-                    setActiveStep(3);
-                })
-                .catch(error => {
-                    console.error("Error occurred while verifying the VC: ", error);
-                    setVc(null);
-                    setVcStatus({status: "NOK"});
-                });
-        } catch (error) {
-            console.error("Error occurred while reading the qrData: ", error);
-            setVc(null);
-            setVcStatus({status: "NOK"});
-        } finally {
-            setQrData("");
-            setActiveStep(3);
-        }
-    }, [qrData]);
+
 
     return (
         <Grid container style={{padding: "104px", textAlign: "center", placeContent: "center"}}>
diff --git a/src/components/Home/VerificationSection/index.tsx b/src/components/Home/VerificationSection/index.tsx
index dd0bb742..767b5bd9 100644
--- a/src/components/Home/VerificationSection/index.tsx
+++ b/src/components/Home/VerificationSection/index.tsx
@@ -2,21 +2,53 @@ import React, {useEffect, useState} from 'react';
 import ScanQrCode from "./ScanQrCode";
 import Verification from "./Verification";
 import Result from "./Result";
+import {verify} from "../../../utils/verification-utils";
+import {QrScanResult, VcStatus} from "../../../types/types";
 
 const DisplayActiveStep = ({activeStep, setActiveStep}: {
     activeStep: number, setActiveStep: (activeStep: number) => void
 }) => {
+    const [qrData, setQrData] = useState("");
     const [vc, setVc] = useState(null);
-    const [vcStatus, setVcStatus] = useState(null);
+    const [vcStatus, setVcStatus] = useState({status: "Verifying", checks: []} as VcStatus);
     useEffect(() => {
-        console.log({vc, vcStatus})
-    }, [vc, vcStatus]);
+        if (qrData === "") return;
+        try {
+            let vc = JSON.parse(qrData);
+            verify(vc)
+                .then(status => {
+                    setVc(vc);
+                    setVcStatus(status);
+                    setActiveStep(3);
+                })
+                .catch(error => {
+                    console.error("Error occurred while verifying the VC: ", error);
+                    setVc(null);
+                    setVcStatus({status: "NOK", checks: []});
+                });
+        } catch (error) {
+            console.error("Error occurred while reading the qrData: ", error);
+            setVc(null);
+            setVcStatus({status: "NOK", checks: []});
+        } finally {
+            setQrData("");
+            setActiveStep(3);
+        }
+    }, [qrData]);
+
+    const setScanResult = (result: QrScanResult) => {
+        if (!!qrData) {
+            // show error message in snackbar
+        }
+        setQrData(result.data || "");
+    }
+
     switch (activeStep) {
         case 0:
-            return (<ScanQrCode setActiveStep={setActiveStep}/>);
+            return (<ScanQrCode setActiveStep={setActiveStep} setScanResult={setScanResult}/>);
         case 1:
         case 2:
-            return (<Verification setActiveStep={setActiveStep} setVc={setVc} setVcStatus={setVcStatus}/>);
+            return (<Verification setActiveStep={setActiveStep} setQrData={setQrData}/>);
         case 3:
             return (<Result setActiveStep={setActiveStep} vc={vc} vcStatus={vcStatus}/>);
         default:
diff --git a/src/types/types.ts b/src/types/types.ts
new file mode 100644
index 00000000..9a6b23e8
--- /dev/null
+++ b/src/types/types.ts
@@ -0,0 +1,14 @@
+export type QrScanResult = {
+    data: string | null,
+    error: string | null
+}
+
+export type VcStatus = {
+    status: "OK" | "NOK" | "Verifying";
+    checks: {
+        active: string | null;
+        revoked: "OK" | "NOK";
+        expired: "OK" | "NOK";
+        proof: "OK" | "NOK";
+    }[];
+}
diff --git a/src/utils/qr-utils.js b/src/utils/qr-utils.js
new file mode 100644
index 00000000..894c8d4d
--- /dev/null
+++ b/src/utils/qr-utils.js
@@ -0,0 +1,18 @@
+import { scanFile } from "@openhealthnz-credentials/pdf-image-qr-scanner";
+
+export const scanFilesForQr = async (selectedFile) => {
+    let scanResult = { data: null, error: null };
+    try {
+        scanResult.data = await scanFile(selectedFile);
+    } catch (e) {
+        // Example Error Handling
+        if (e?.name === "InvalidPDFException") {
+            scanResult.error = "Invalid PDF";
+        } else if (e instanceof Event) {
+            scanResult.error = "Invalid Image";
+        } else {
+            scanResult.error = "Unknown error:" + e;
+        }
+    }
+    return scanResult;
+}

From 939e7c9af8a8396a92d8d588d022bd5042c8f248 Mon Sep 17 00:00:00 2001
From: Shiva <shivakumar@beehyv.com>
Date: Thu, 4 Apr 2024 08:36:15 +0530
Subject: [PATCH 07/10] Added types Signed-off-by: Shiva
 <shivakumar@beehyv.com>

---
 .../InjiStepper/DesktopStepper.tsx                   |  3 ++-
 .../InjiStepper/MobileStepper.tsx                    |  3 ++-
 .../InjiStepper/index.tsx                            |  3 ++-
 .../Home/VerificationProgressTracker/QrScanner.tsx   |  4 +++-
 .../StepperContentHeader.tsx                         |  1 -
 .../Home/VerificationSection/ImportFromFile.tsx      |  8 ++++----
 .../VerificationSection/Result/ResultSummary.tsx     |  3 ++-
 .../VerificationSection/Result/VcDisplayCard.tsx     |  2 +-
 .../Home/VerificationSection/Result/index.tsx        |  9 +++++----
 .../Home/VerificationSection/ScanQrCode.tsx          |  7 ++++---
 .../Home/VerificationSection/Verification.tsx        |  5 ++---
 src/components/Home/VerificationSection/index.tsx    |  6 ++++--
 src/types/{types.ts => data-types.ts}                | 12 ++++++++++++
 src/types/function-types.ts                          |  6 ++++++
 src/utils/common-utils.ts                            |  2 +-
 src/utils/did-utils.ts                               |  2 +-
 src/utils/verification-utils.js                      |  2 +-
 17 files changed, 52 insertions(+), 26 deletions(-)
 rename src/types/{types.ts => data-types.ts} (60%)
 create mode 100644 src/types/function-types.ts

diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
index e5c7a0dc..71284c01 100644
--- a/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
+++ b/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import {Box, Step, StepContent, StepLabel, Stepper, Typography} from "@mui/material";
+import {InjiStepperStep} from "../../../../types/data-types";
 
-function DesktopStepper({steps, activeStep}: {steps: {label: string, description: string}[], activeStep: number}) {
+function DesktopStepper({steps, activeStep}: {steps: InjiStepperStep[], activeStep: number}) {
     return (
         <Stepper activeStep={activeStep} orientation="vertical">
             {steps.map((step, index) => (
diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
index 5086b86f..6192b713 100644
--- a/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
+++ b/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import {Step, StepLabel, Stepper, Typography} from "@mui/material";
+import {InjiStepperStep} from "../../../../types/data-types";
 
-function MobileStepper({steps, activeStep}: {steps: {label: string, description: string}[], activeStep: number}) {
+function MobileStepper({steps, activeStep}: {steps: InjiStepperStep[], activeStep: number}) {
     return (
         <Stepper style={{maxHeight: '350px'}} activeStep={activeStep} orientation="horizontal" alternativeLabel>
             {steps.map((step, index) => (
diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx b/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
index 134f3957..21823ee5 100644
--- a/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
+++ b/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import {Box, Step, StepContent, StepLabel, Stepper, Typography, useMediaQuery} from "@mui/material";
 import DesktopStepper from "./DesktopStepper";
 import MobileStepper from "./MobileStepper";
+import {InjiStepperStep} from "../../../../types/data-types";
 
-const steps = [
+const steps: InjiStepperStep[] = [
     {
         label: 'Scan QR Code',
         description: 'Tap the button and display the QR code shown on your digital certificate / card',
diff --git a/src/components/Home/VerificationProgressTracker/QrScanner.tsx b/src/components/Home/VerificationProgressTracker/QrScanner.tsx
index 55327f16..d331b6e6 100644
--- a/src/components/Home/VerificationProgressTracker/QrScanner.tsx
+++ b/src/components/Home/VerificationProgressTracker/QrScanner.tsx
@@ -1,7 +1,9 @@
 import React, {useCallback, useState} from 'react';
 import {Scanner} from '@yudiel/react-qr-scanner';
 
-function QrScanner({setVerifying, setActiveStep, setQrData}: any) {
+function QrScanner({setVerifying, setActiveStep, setQrData}: {
+    setVerifying: (verifying: boolean) => void, setQrData: (data: string) => void, setActiveStep: (activeStep: number) => void
+}) {
     const [dataRead, setDataRead] = useState(false)
     const isDataRead = useCallback(() => dataRead, [dataRead]);
 
diff --git a/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx b/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx
index 53e82229..6db0a8ec 100644
--- a/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx
+++ b/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx
@@ -3,7 +3,6 @@ import {Box, Typography, useMediaQuery} from "@mui/material";
 
 function StepperContentHeader(props: any) {
     const isTabletOrAbove = useMediaQuery("@media(min-width:600px)");
-    console.log("Is tablet: ", isTabletOrAbove);
     return (
         <Box>
             <Typography variant='h4' style={{
diff --git a/src/components/Home/VerificationSection/ImportFromFile.tsx b/src/components/Home/VerificationSection/ImportFromFile.tsx
index f81f0ce3..1065a38f 100644
--- a/src/components/Home/VerificationSection/ImportFromFile.tsx
+++ b/src/components/Home/VerificationSection/ImportFromFile.tsx
@@ -1,7 +1,8 @@
 import {scanFilesForQr} from "../../../utils/qr-utils";
-import {QrScanResult} from "../../../types/types";
+import {QrScanResult} from "../../../types/data-types";
+import {SetScanResultFunction} from "../../../types/function-types";
 
-export const ImportFromFile = ({setScanResult}: {setScanResult: (result: QrScanResult) => void}) => {
+export const ImportFromFile = ({setScanResult}: {setScanResult: SetScanResultFunction}) => {
     return (
         <div style={{margin: "12px auto", display: "grid", placeContent: "center"}}>
             <label htmlFor={"upload-qr"} style={{font: 'normal normal normal 16px/21px Inter'}}>Upload your certificate</label><br/>
@@ -21,7 +22,6 @@ export const ImportFromFile = ({setScanResult}: {setScanResult: (result: QrScanR
                             setScanResult(scanResult);
                         });
                 }}
-            />
-            <canvas id="canvas" style={{"display": "none"}}></canvas>
+            />`
         </div>);
 }
diff --git a/src/components/Home/VerificationSection/Result/ResultSummary.tsx b/src/components/Home/VerificationSection/Result/ResultSummary.tsx
index 8e2a9ce4..6f192849 100644
--- a/src/components/Home/VerificationSection/Result/ResultSummary.tsx
+++ b/src/components/Home/VerificationSection/Result/ResultSummary.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import {Grid, Typography} from "@mui/material";
 import {ReactComponent as VerificationSuccessIcon} from "../../../../assets/verification-success-icon.svg";
 import {ReactComponent as VerificationFailedIcon} from "../../../../assets/verification-failed-icon.svg";
+import {SetActiveStepFunction} from "../../../../types/function-types";
 
 const ResultSummary = ({success, vc, setActiveStep}: {
     success: boolean,
     vc: any,
-    setActiveStep: (activeStep: number) => void
+    setActiveStep: SetActiveStepFunction
 }) => {
     return (
         <Grid container>
diff --git a/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx b/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx
index d3189c88..9e7ded8d 100644
--- a/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx
+++ b/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Grid, Typography} from '@mui/material';
 import {convertToTitleCase, getDisplayValue} from "../../../../utils/common-utils";
 
-function VcDisplayCard({vc}: any) {
+function VcDisplayCard({vc}: {vc: any}) {
     return (
         <Grid container style={{
             width: "calc(min(340px, 100vw))",
diff --git a/src/components/Home/VerificationSection/Result/index.tsx b/src/components/Home/VerificationSection/Result/index.tsx
index 65d3fcc0..03b7c9ff 100644
--- a/src/components/Home/VerificationSection/Result/index.tsx
+++ b/src/components/Home/VerificationSection/Result/index.tsx
@@ -3,9 +3,10 @@ import ResultSummary from "./ResultSummary";
 import VcDisplayCard from "./VcDisplayCard";
 import {Box} from "@mui/material";
 import StyledButton from "../commons/StyledButton";
-import {VcStatus} from "../../../../types/types";
+import {CardPositioning, VcStatus} from "../../../../types/data-types";
+import {SetActiveStepFunction} from "../../../../types/function-types";
 
-const getPositioning = (resultSectionRef: React.RefObject<HTMLDivElement>) => {
+const getPositioning = (resultSectionRef: React.RefObject<HTMLDivElement>): CardPositioning => {
     // top = 340 - it is precalculated based in the xd design
     const positioning = {top: 212, right: 0};
     if (!!resultSectionRef?.current) {
@@ -19,9 +20,9 @@ const getPositioning = (resultSectionRef: React.RefObject<HTMLDivElement>) => {
 }
 
 const Result = ({vc, setActiveStep, vcStatus}: {
-    vc: any, setActiveStep: (activeStep: number) => void, vcStatus: VcStatus | null
+    vc: any, setActiveStep: SetActiveStepFunction, vcStatus: VcStatus | null
 }) => {
-    const initialPositioning: { top?: number, right?: number } = {};
+    const initialPositioning: CardPositioning = {};
     const resultSectionRef = React.createRef<HTMLDivElement>();
     const [vcDisplayCardPositioning, setVcDisplayCardPositioning] = useState(initialPositioning);
 
diff --git a/src/components/Home/VerificationSection/ScanQrCode.tsx b/src/components/Home/VerificationSection/ScanQrCode.tsx
index 75e26638..4b31e3d5 100644
--- a/src/components/Home/VerificationSection/ScanQrCode.tsx
+++ b/src/components/Home/VerificationSection/ScanQrCode.tsx
@@ -3,11 +3,12 @@ import {Box, Button, Grid, Typography} from "@mui/material";
 import scanQr from "../../../assets/scanner-ouline.svg";
 import StyledButton from "./commons/StyledButton";
 import {ImportFromFile} from "./ImportFromFile";
-import {QrScanResult} from "../../../types/types";
+import {QrScanResult} from "../../../types/data-types";
+import {SetActiveStepFunction, SetScanResultFunction} from "../../../types/function-types";
 
 const ScanQrCode = ({setActiveStep, setScanResult}: {
-    setActiveStep: (activeStep: number) => void,
-    setScanResult: (result: QrScanResult) => void
+    setActiveStep: SetActiveStepFunction,
+    setScanResult: SetScanResultFunction
 }) => {
     return (
         <Grid container style={{padding: "104px", textAlign: "center"}}>
diff --git a/src/components/Home/VerificationSection/Verification.tsx b/src/components/Home/VerificationSection/Verification.tsx
index 38e1fd14..6b4e3e11 100644
--- a/src/components/Home/VerificationSection/Verification.tsx
+++ b/src/components/Home/VerificationSection/Verification.tsx
@@ -4,14 +4,13 @@ import scanQr from "../../../assets/scanner-ouline.svg";
 import Loader from "../../commons/Loader";
 import QrScanner from "../VerificationProgressTracker/QrScanner";
 import {verify} from "../../../utils/verification-utils";
+import {SetActiveStepFunction, SetQrDataFunction} from "../../../types/function-types";
 
 const Verification = ({setQrData, setActiveStep}: {
-    setQrData: (data: string) => void, setActiveStep: (activeStep: number) => void
+    setQrData: SetQrDataFunction, setActiveStep: SetActiveStepFunction
 }) => {
     const [verifying, setVerifying] = useState(false);
 
-
-
     return (
         <Grid container style={{padding: "104px", textAlign: "center", placeContent: "center"}}>
             <Grid item xs={12} style={{
diff --git a/src/components/Home/VerificationSection/index.tsx b/src/components/Home/VerificationSection/index.tsx
index 767b5bd9..35a1e91b 100644
--- a/src/components/Home/VerificationSection/index.tsx
+++ b/src/components/Home/VerificationSection/index.tsx
@@ -3,10 +3,11 @@ import ScanQrCode from "./ScanQrCode";
 import Verification from "./Verification";
 import Result from "./Result";
 import {verify} from "../../../utils/verification-utils";
-import {QrScanResult, VcStatus} from "../../../types/types";
+import {SetActiveStepFunction} from "../../../types/function-types";
+import {QrScanResult, VcStatus} from "../../../types/data-types";
 
 const DisplayActiveStep = ({activeStep, setActiveStep}: {
-    activeStep: number, setActiveStep: (activeStep: number) => void
+    activeStep: number, setActiveStep: SetActiveStepFunction
 }) => {
     const [qrData, setQrData] = useState("");
     const [vc, setVc] = useState(null);
@@ -15,6 +16,7 @@ const DisplayActiveStep = ({activeStep, setActiveStep}: {
         if (qrData === "") return;
         try {
             let vc = JSON.parse(qrData);
+            // TODO: is it a vc? - check format
             verify(vc)
                 .then(status => {
                     setVc(vc);
diff --git a/src/types/types.ts b/src/types/data-types.ts
similarity index 60%
rename from src/types/types.ts
rename to src/types/data-types.ts
index 9a6b23e8..be35719c 100644
--- a/src/types/types.ts
+++ b/src/types/data-types.ts
@@ -12,3 +12,15 @@ export type VcStatus = {
         proof: "OK" | "NOK";
     }[];
 }
+
+export type InjiStepperStep = {
+    label: string,
+    description: string
+}
+
+export type CardPositioning = {
+    top?: number,
+    right?: number,
+    bottom?: number,
+    left?: number
+}
diff --git a/src/types/function-types.ts b/src/types/function-types.ts
new file mode 100644
index 00000000..b65cc05b
--- /dev/null
+++ b/src/types/function-types.ts
@@ -0,0 +1,6 @@
+import {QrScanResult} from "./data-types";
+
+export type SetActiveStepFunction = (activeStep: number) => void;
+export type SetVcStatusFunction = (vc: any) => void;
+export type SetQrDataFunction = (qrData: string) => void;
+export type SetScanResultFunction = (result: QrScanResult) => void;
diff --git a/src/utils/common-utils.ts b/src/utils/common-utils.ts
index fbe8c74e..5e6bd82d 100644
--- a/src/utils/common-utils.ts
+++ b/src/utils/common-utils.ts
@@ -13,7 +13,7 @@ export const convertToTitleCase = (text: string): string => {
         .replace(lowercaseStartRegex, (match) => match.toUpperCase());
 };
 
-export const getDisplayValue = (data:any): string => {
+export const getDisplayValue = (data: any): string => {
     if (data instanceof Array && data?.length > 0) {
         let displayValue = "";
         data.forEach(value => {
diff --git a/src/utils/did-utils.ts b/src/utils/did-utils.ts
index 276a2991..f6d4ede5 100644
--- a/src/utils/did-utils.ts
+++ b/src/utils/did-utils.ts
@@ -4,7 +4,7 @@ import {SUPPORTED_DID_METHODS} from "./config";
 
 const getDIDMethod = (did: string) => {
     const regex = /^did:([^:]+):/;
-    const match = did.match(regex);
+    const match = did?.match(regex);
     return match ? match[1] : "";
 }
 
diff --git a/src/utils/verification-utils.js b/src/utils/verification-utils.js
index 88bbaff6..280db0c8 100644
--- a/src/utils/verification-utils.js
+++ b/src/utils/verification-utils.js
@@ -4,7 +4,7 @@ import {resolveDid} from "./did-utils";
 let revocationList = [];
 
 const verify = async (credential) => {
-    let resolutionResult = await resolveDid(credential.proof.verificationMethod);
+    let resolutionResult = await resolveDid(credential?.proof?.verificationMethod);
     if (resolutionResult.didResolutionMetadata.error) {
         throw new Error(resolutionResult.didResolutionMetadata.error)
     }

From c0116f0fdab36519a11a9d33f4f0ae63f438be52 Mon Sep 17 00:00:00 2001
From: Shiva <shivakumar@beehyv.com>
Date: Thu, 4 Apr 2024 09:03:44 +0530
Subject: [PATCH 08/10] Fix issue with scan qr button in the result summary
 screen Signed-off-by: Shiva <shivakumar@beehyv.com>

---
 public/index.html                             |   2 +-
 public/inji-logo.png                          | Bin 0 -> 4567 bytes
 .../VerificationProgressTracker/styles.ts     |   4 -
 .../Result/VcDisplayCard.tsx                  |  79 +++++++++++-------
 .../Home/VerificationSection/Result/index.tsx |  29 ++++---
 src/pages/Home.tsx                            |   4 +-
 6 files changed, 68 insertions(+), 50 deletions(-)
 create mode 100644 public/inji-logo.png

diff --git a/public/index.html b/public/index.html
index 6b2a9446..28d900f4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/inji-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
diff --git a/public/inji-logo.png b/public/inji-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9dacc690626a8c1edaae2b0085e732360619fba
GIT binary patch
literal 4567
zcmeI0X;f238^>>u?Xb2iB1<I=SSXexAdxkMLfB*pfd~jn!4OCSBs2*oguQiTD+&Qc
zK&XfiWGSG?BGe+NAS5iQ0!5TXmMF*~i-0uvdTPJCAN=rsc+YXpxp(f&^Pm5n`OSQI
z&Ybgbca)dWkO2Td-q{K5DXL9GkCwEg=nXxSS1qc}v2nf(&mbl^l12?7g%iMx=tu&X
zz#@eJ0Bh)QdYAkzBWd(J?!3}k>fJ2mBTb$bPV0AtX-ciT<fOZ8?r%i(;URLiDRVPD
z5=vz}rF^xH?>dcR1nnbkhe&Cwt|cz4mB38}&{N`z5uVLSQ*G<Izuv%`xO=7>b3>Lm
zn=YFggDp9~N%5uDIt-PZDmJqKKt_xtnv}1bs|B7K0SyYK9w$Iq5s{+V0)Q2Y6&ZvN
zBQU_n385qk5;EV^3IUUXkq{q*8{93@jzA<iv1tS^wmS~b4#S%VLr~T-RxAsVK?H#j
z1ZG8qQ|J~fB;>uXh3I>y8wLTtmoUPR5MMVBupN~~0GmKfpm0Nb7U_gB#99VyMGFqG
z@I*U&un@J75F&#SX#s;VnM^420F+7#g&CQfo5SG7Fk@pwk;0H3O<@GF3@LP-9gF{X
zpb2z5jTFfsQ7PaZ&!FSfC<YP&5yinD%y%~6A9o7<0|XHc*iHmy1ck%?EoYEI{)>Dk
z@=?As*usOvB82;*Nf87JT{HzG1Y!K%>tpc9zk<eQ?}Ix&7S0htp#&dNFoXEdppX4d
z1X3tbw2Xfbz|cqp(fW5*ii8+JU^^6HA25n`1@_Oj?6CRYm(M@>B*vd{ea7`k1U^ap
z`E-58^+^OiN&NYA{eR(-`Iy)dD57kRDN5VY8*^`pQa*9ItuszqRAQxr&jNs?&>8(b
z&bO`I_gI+LlxqCb!6>1}{UJA9bFxgnt!zY5Fb;k@sbf4~rKA(~db))F1s__+9e+YR
z>E(EHm}pOyxict$WiY(hUUiM!yB@s0fRou{h<j$fw2;TUZ%yRW3j%I1nNJ5fUgR%%
z-SE7n0&{KNI$OSFB6Jmll283!H8>Ma)!taYa<wgs+Tw~I<Njc_I8kmSy=T`K#K{5I
z*5#B|6Gfr+`nG=qq4hN<XYo4cwH6@r`=0(zqxv5Ue=-CdB@#i-KnZxl@8}zzN~o|x
zO{wU9!tya}C`b|%Q_#~4G65;?jhU({x65c+$&^Vl7i#$?tmk(hI78;oAx5tn;U8LS
zwl5N?uL72K8I&KZ7(_m;KYp*?Ncd3sQOM-0cXzA4w7UF4&)4$Z+@CL#8dg!$Qh)+r
zwYGNufJ(zT-Lk2rMs?W6sqe<yIQ6#4xbGzn1BY!Sc$>Q~sqdSA()0%4rkS*2<@Z)L
ztEPJzmygy$CV)iju|gRqiG2%;PF60@7JmtO5S)Z0NX<*4z2zE8At{C7*Jk3P-9w$u
zp=s8o@+sOiuLIY+1En1duGKZ4*-!OWIC-==wlgZx|69IIB2~5P@#Q-c%-3t#N#8C{
z>kh-+&Ai|F6K?zF(df@C0-sJVF-LEXPYP=f&O5`-9L@jz;#R^XXf}1ZD>`N!M@&3b
zXC-B}L|bRa>D#80`HGgR1Ho5A<p8s{rQ$X4LfL^*ROcQ*KfB6QVxxs?lKNF|;a2a%
z<n9<9rL&5h6Mijr;T>Ii8~WInhfCR(h8TU>t6yIq!+QFjuDq`PU?MzMfzw{M>Y%B5
zbD9w=C<Ym@r;03ApRJ<gY8=$hEA@4x?AGcfH@{S6FXGG&6w0P@wSO?5kyl4^OkEAm
z+nZ?E{ITCg;MR|*%FY>AMApX%{Ldx`^S?6YUOj*#`A^xGFC6A!miAuRj&ZZ^<ePZj
zqZbqo<d`Pth!NV7i)XSNR3xILs+~OYevy1S>e5^{h0ApKP3vZ#q^2X))5L`D*S!2Q
zmoN~6%}m5_PGGD{;oPtVRo)_H;W5@8F<1?e$ah&HUch}9hsG#6I*Av`1)h%%w|Moo
zHHW1lLVjA~o_74`>48`ktom}$ez8)O493B6e(i8u0JKo|)w^w+%);b+x1828kL{;z
z_hYTGR`unKxUPz!T!vy8OzHyFZ+R<Ld^Tce>w2!Y7?3=*{hLB(cup0pDp6-68`};i
zC*2sV0L6E-d576hcwH|%vQFE@&J4$a+EcC!lqIW-q_xdAW{Ww6*hH-M)D8!hFHl?X
zcC%X;a$)7r;=TUAbSxEdv!uAv6ByU)j%rwENg6+-L+8Zg0~1ttl&ybnf@7ih&r4!l
z75zr_GnHWr0c$=s56FH6MZpG~Tj6mRAA-hg(8%s0_BRU^<ZEO-2)bwPWM#gd+IDTF
zL2dPhds4@Z_M$L+v;VI#?qp34UxDxOHJPyNj4^Q1RW8!<sDCRb7*-gue%a9$k_M^o
zw@sa;X*Fht-WN5qIE>MvWW9-8LhO_9J2jDA^hA<fV|%swAU^%=r50lULnD__Z2wA6
zJ9Pk5a1b8I1j>H-;cXqN=l*kHfiz`hdc@SP;b?s0o`V%5p;Lbd5%@=gAnl;Uq4J!$
zNAb_o5o0JwUO{uL-fZ77pJMucw}dx+*F%VA`!cH^4>Sr~H}hq^I7vS9=!^i)EJp5B
zaV<)`Y(a5O{1B;l5{q~ey)6`kYS8BpK1w657~vt(aw-UT^^#XSQyiX_cT3ND?S{L+
zP!<ZITh6<!bj`0#^2oYshGrgjg13A5y7@fRN?Bj^^Bi%@Da?(CD>2=?#Zgqkap;fB
z-{52q=K0nLlX?j6TH~Mnq;}?%ZOxSwo6I?crm~BrH>QC}`8C9*Jo1YhZqSi>aMb+f
z$<VAQ0B_f=5w3A@FK(;%vYt;z&fKc}khSUDE+@;Xd{pl3_G*DfvWJ>?#ct(G>Z#v~
zl`5o7Wx5Q5^yQnDjh_@Gv~#^PbLw>tjrlK1ZbA>odTc$4f5U+F3F?f13^2)0;C=G~
zqQh7k_@?R>B*S{&5k%+WJr2*YQhGh^E&mbC;mGaPa@!1!o&u5^9>g-&dPC79MAK%L
ziuO^-Wdhvna3KYIL9nS@p*4&6bEFSznuAh0uXUg#CIz3G1md}FQkeQR!>v{?c9j%Q
z@cK3})C7uV<gxUL{a!8=Q;mJ>%9w_jYgN$<Un%oHo8~~(tg)+(&(+M@cvBnW$LZV}
zCUKR<i|b|8GfX0XCsUE$7YEBa1LR@T=2@5fo31re2OeddEwP?!hU0-}t>B{A)ksrK
R*PW{mXM1;arETC(e*-q~fY1N{

literal 0
HcmV?d00001

diff --git a/src/components/Home/VerificationProgressTracker/styles.ts b/src/components/Home/VerificationProgressTracker/styles.ts
index 340bdc73..68f4c1f6 100644
--- a/src/components/Home/VerificationProgressTracker/styles.ts
+++ b/src/components/Home/VerificationProgressTracker/styles.ts
@@ -7,8 +7,4 @@ export const VerificationProgressTrackerContainer = styled(Box)`
     margin-top: 0;
     height: 100vh;
     max-height: 100vh;
-    overflow-y: scroll;
-    @media (max-width: 600px) {
-        max-height: 430px;
-    }
 `;
diff --git a/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx b/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx
index 9e7ded8d..b9751142 100644
--- a/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx
+++ b/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx
@@ -1,39 +1,54 @@
 import React from 'react';
-import {Grid, Typography} from '@mui/material';
+import {Box, Grid, Typography} from '@mui/material';
 import {convertToTitleCase, getDisplayValue} from "../../../../utils/common-utils";
+import StyledButton from "../commons/StyledButton";
+import {SAMPLE_VERIFIABLE_CREDENTIAL} from "../../../../utils/samples";
+import {SetActiveStepFunction} from "../../../../types/function-types";
 
-function VcDisplayCard({vc}: {vc: any}) {
+function VcDisplayCard({vc, setActiveStep}: {vc: any, setActiveStep: SetActiveStepFunction}) {
     return (
-        <Grid container style={{
-            width: "calc(min(340px, 100vw))",
-            margin: "auto",
-            background: "white",
-            borderRadius: "12px",
-            padding: "5px 15px",
-            boxShadow: "0px 3px 15px #0000000F",
-            maxHeight: "420px",
-            overflowY: "scroll"
-        }}>
-            {
-                vc && Object.keys(vc.credentialSubject)
-                    .filter(key => key?.toLowerCase() !== "id" && key?.toLowerCase() !== "type")
-                    .map(key => (
-                    <Grid item xs={12} lg={6} key={key} style={{
-                        padding: "10px 4px"
-                    }}>
-                        <Typography style={{
-                            font: "normal normal normal 11px/14px Inter",
-                            marginBottom: "4px"
-                        }}>
-                            {convertToTitleCase(key)}
-                        </Typography>
-                        <Typography style={{font: "normal normal 600 12px/15px Inter"}}>
-                            {getDisplayValue(vc.credentialSubject[key])}
-                        </Typography>
-                    </Grid>
-                ))
-            }
-        </Grid>
+        <Box>
+            <Grid container style={{
+                width: "calc(min(340px, 100vw))",
+                margin: "auto",
+                background: "white",
+                borderRadius: "12px",
+                padding: "5px 15px",
+                boxShadow: "0px 3px 15px #0000000F",
+                maxHeight: "320px",
+                overflowY: "scroll"
+            }}>
+                {
+                    vc && Object.keys(vc.credentialSubject)
+                        .filter(key => key?.toLowerCase() !== "id" && key?.toLowerCase() !== "type")
+                        .map(key => (
+                            <Grid item xs={12} lg={6} key={key} style={{
+                                padding: "10px 4px"
+                            }}>
+                                <Typography style={{
+                                    font: "normal normal normal 11px/14px Inter",
+                                    marginBottom: "4px"
+                                }}>
+                                    {convertToTitleCase(key)}
+                                </Typography>
+                                <Typography style={{font: "normal normal 600 12px/15px Inter"}}>
+                                    {getDisplayValue(vc.credentialSubject[key])}
+                                </Typography>
+                            </Grid>
+                        ))
+                }
+            </Grid>
+            <Box style={{
+                display: 'grid',
+                placeContent: 'center'
+            }}>
+                <StyledButton style={{margin: "24px auto"}} onClick={() => {
+                    setActiveStep(0)
+                }}>
+                    Scan Another QR Code
+                </StyledButton>
+            </Box>
+        </Box>
     );
 }
 
diff --git a/src/components/Home/VerificationSection/Result/index.tsx b/src/components/Home/VerificationSection/Result/index.tsx
index 03b7c9ff..b3345131 100644
--- a/src/components/Home/VerificationSection/Result/index.tsx
+++ b/src/components/Home/VerificationSection/Result/index.tsx
@@ -5,6 +5,7 @@ import {Box} from "@mui/material";
 import StyledButton from "../commons/StyledButton";
 import {CardPositioning, VcStatus} from "../../../../types/data-types";
 import {SetActiveStepFunction} from "../../../../types/function-types";
+import {SAMPLE_VERIFIABLE_CREDENTIAL} from "../../../../utils/samples";
 
 const getPositioning = (resultSectionRef: React.RefObject<HTMLDivElement>): CardPositioning => {
     // top = 340 - it is precalculated based in the xd design
@@ -50,19 +51,23 @@ const Result = ({vc, setActiveStep, vcStatus}: {
                 top: `${vcDisplayCardPositioning.top ?? 212}px`,
                 right: `${vcDisplayCardPositioning.right ?? 0}px`
             }}>
-                {vc && <VcDisplayCard vc={vc}/>}
-            </Box>
-            <Box style={{
-                height: 'calc(100vh - 340px)',
-                display: 'grid',
-                placeContent: 'center'
-            }}>
-                <StyledButton style={{margin: "24px auto"}} onClick={() => {
-                    setActiveStep(0)
-                }}>
-                    Scan Another QR Code
-                </StyledButton>
+                {vc && <VcDisplayCard vc={vc} setActiveStep={setActiveStep}/>}
             </Box>
+            {
+                !vc && (
+                    <Box style={{
+                        height: 'calc(100vh - 340px)',
+                        display: 'grid',
+                        placeContent: 'center'
+                    }}>
+                        <StyledButton style={{margin: "24px auto"}} onClick={() => {
+                            setActiveStep(0)
+                        }}>
+                            Scan Another QR Code
+                        </StyledButton>
+                    </Box>
+                )
+            }
         </Box>
     );
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 8c7925e7..07ec99af 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -7,7 +7,9 @@ function Home(props: any) {
     const [activeStep, setActiveStep] = useState(0);
     return (
         <Grid container>
-            <Grid item xs={12} md={6}>
+            <Grid item xs={12} md={6} style={{
+                background: '#FAFBFD 0 0 no-repeat padding-box'
+            }}>
                 <VerificationProgressTracker activeStep={activeStep}/>
             </Grid>
             <Grid item xs={12} md={6}>

From dd4ee9c558823de1dd77f0cbab84a9119eb30b4a Mon Sep 17 00:00:00 2001
From: Shiva <shivakumar@beehyv.com>
Date: Thu, 4 Apr 2024 09:20:09 +0530
Subject: [PATCH 09/10] Update folder structure to resolve merge conflicts
 Signed-off-by: Shiva <shivakumar@beehyv.com>

---
 .gitignore                                          |   2 +-
 package-lock.json => inji-verify/package-lock.json  |   0
 package.json => inji-verify/package.json            |   0
 {public => inji-verify/public}/favicon.ico          | Bin
 {public => inji-verify/public}/index.html           |   0
 {public => inji-verify/public}/inji-logo.png        | Bin
 {public => inji-verify/public}/logo192.png          | Bin
 {public => inji-verify/public}/logo512.png          | Bin
 {public => inji-verify/public}/manifest.json        |   0
 {public => inji-verify/public}/robots.txt           |   0
 {src => inji-verify/src}/App.css                    |   0
 {src => inji-verify/src}/App.tsx                    |   0
 {src => inji-verify/src}/assets/inji-logo.png       | Bin
 {src => inji-verify/src}/assets/logo.svg            |   0
 {src => inji-verify/src}/assets/qr.svg              |   0
 {src => inji-verify/src}/assets/scan-qr.png         | Bin
 {src => inji-verify/src}/assets/scanner-ouline.svg  |   0
 .../src}/assets/verification-failed-icon.svg        |   0
 .../src}/assets/verification-success-icon.svg       |   0
 .../Home/VerificationProgressTracker/Footer.tsx     |   0
 .../InjiStepper/DesktopStepper.tsx                  |   0
 .../InjiStepper/MobileStepper.tsx                   |   0
 .../InjiStepper/index.tsx                           |   0
 .../Home/VerificationProgressTracker/Navbar.tsx     |   0
 .../Home/VerificationProgressTracker/QrScanner.tsx  |   0
 .../StepperContentHeader.tsx                        |   0
 .../Home/VerificationProgressTracker/index.tsx      |   0
 .../Home/VerificationProgressTracker/styles.ts      |   0
 .../Home/VerificationSection/ImportFromFile.tsx     |   0
 .../VerificationSection/Result/ResultSummary.tsx    |   0
 .../VerificationSection/Result/VcDisplayCard.tsx    |   0
 .../Home/VerificationSection/Result/index.tsx       |   0
 .../Home/VerificationSection/ScanQrCode.tsx         |   0
 .../Home/VerificationSection/Verification.tsx       |   0
 .../VerificationSection/commons/StyledButton.tsx    |   0
 .../components/Home/VerificationSection/index.tsx   |   0
 .../src}/components/commons/Loader.tsx              |   0
 {src => inji-verify/src}/index.css                  |   0
 {src => inji-verify/src}/index.tsx                  |   0
 {src => inji-verify/src}/pages/Home.tsx             |   0
 {src => inji-verify/src}/react-app-env.d.ts         |   0
 {src => inji-verify/src}/reportWebVitals.ts         |   0
 {src => inji-verify/src}/setupTests.ts              |   0
 {src => inji-verify/src}/types/data-types.ts        |   0
 {src => inji-verify/src}/types/function-types.ts    |   0
 {src => inji-verify/src}/utils/common-utils.ts      |   0
 {src => inji-verify/src}/utils/config.ts            |   0
 {src => inji-verify/src}/utils/did-utils.ts         |   0
 {src => inji-verify/src}/utils/inji-theme.ts        |   0
 {src => inji-verify/src}/utils/qr-utils.js          |   0
 {src => inji-verify/src}/utils/samples.ts           |   0
 .../src}/utils/verification-utils.js                |   0
 tsconfig.json => inji-verify/tsconfig.json          |   0
 53 files changed, 1 insertion(+), 1 deletion(-)
 rename package-lock.json => inji-verify/package-lock.json (100%)
 rename package.json => inji-verify/package.json (100%)
 rename {public => inji-verify/public}/favicon.ico (100%)
 rename {public => inji-verify/public}/index.html (100%)
 rename {public => inji-verify/public}/inji-logo.png (100%)
 rename {public => inji-verify/public}/logo192.png (100%)
 rename {public => inji-verify/public}/logo512.png (100%)
 rename {public => inji-verify/public}/manifest.json (100%)
 rename {public => inji-verify/public}/robots.txt (100%)
 rename {src => inji-verify/src}/App.css (100%)
 rename {src => inji-verify/src}/App.tsx (100%)
 rename {src => inji-verify/src}/assets/inji-logo.png (100%)
 rename {src => inji-verify/src}/assets/logo.svg (100%)
 rename {src => inji-verify/src}/assets/qr.svg (100%)
 rename {src => inji-verify/src}/assets/scan-qr.png (100%)
 rename {src => inji-verify/src}/assets/scanner-ouline.svg (100%)
 rename {src => inji-verify/src}/assets/verification-failed-icon.svg (100%)
 rename {src => inji-verify/src}/assets/verification-success-icon.svg (100%)
 rename {src => inji-verify/src}/components/Home/VerificationProgressTracker/Footer.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationProgressTracker/InjiStepper/index.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationProgressTracker/Navbar.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationProgressTracker/QrScanner.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationProgressTracker/StepperContentHeader.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationProgressTracker/index.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationProgressTracker/styles.ts (100%)
 rename {src => inji-verify/src}/components/Home/VerificationSection/ImportFromFile.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationSection/Result/ResultSummary.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationSection/Result/VcDisplayCard.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationSection/Result/index.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationSection/ScanQrCode.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationSection/Verification.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationSection/commons/StyledButton.tsx (100%)
 rename {src => inji-verify/src}/components/Home/VerificationSection/index.tsx (100%)
 rename {src => inji-verify/src}/components/commons/Loader.tsx (100%)
 rename {src => inji-verify/src}/index.css (100%)
 rename {src => inji-verify/src}/index.tsx (100%)
 rename {src => inji-verify/src}/pages/Home.tsx (100%)
 rename {src => inji-verify/src}/react-app-env.d.ts (100%)
 rename {src => inji-verify/src}/reportWebVitals.ts (100%)
 rename {src => inji-verify/src}/setupTests.ts (100%)
 rename {src => inji-verify/src}/types/data-types.ts (100%)
 rename {src => inji-verify/src}/types/function-types.ts (100%)
 rename {src => inji-verify/src}/utils/common-utils.ts (100%)
 rename {src => inji-verify/src}/utils/config.ts (100%)
 rename {src => inji-verify/src}/utils/did-utils.ts (100%)
 rename {src => inji-verify/src}/utils/inji-theme.ts (100%)
 rename {src => inji-verify/src}/utils/qr-utils.js (100%)
 rename {src => inji-verify/src}/utils/samples.ts (100%)
 rename {src => inji-verify/src}/utils/verification-utils.js (100%)
 rename tsconfig.json => inji-verify/tsconfig.json (100%)

diff --git a/.gitignore b/.gitignore
index 4d29575d..600c0930 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+./inji-verify/node_modules
 /.pnp
 .pnp.js
 
diff --git a/package-lock.json b/inji-verify/package-lock.json
similarity index 100%
rename from package-lock.json
rename to inji-verify/package-lock.json
diff --git a/package.json b/inji-verify/package.json
similarity index 100%
rename from package.json
rename to inji-verify/package.json
diff --git a/public/favicon.ico b/inji-verify/public/favicon.ico
similarity index 100%
rename from public/favicon.ico
rename to inji-verify/public/favicon.ico
diff --git a/public/index.html b/inji-verify/public/index.html
similarity index 100%
rename from public/index.html
rename to inji-verify/public/index.html
diff --git a/public/inji-logo.png b/inji-verify/public/inji-logo.png
similarity index 100%
rename from public/inji-logo.png
rename to inji-verify/public/inji-logo.png
diff --git a/public/logo192.png b/inji-verify/public/logo192.png
similarity index 100%
rename from public/logo192.png
rename to inji-verify/public/logo192.png
diff --git a/public/logo512.png b/inji-verify/public/logo512.png
similarity index 100%
rename from public/logo512.png
rename to inji-verify/public/logo512.png
diff --git a/public/manifest.json b/inji-verify/public/manifest.json
similarity index 100%
rename from public/manifest.json
rename to inji-verify/public/manifest.json
diff --git a/public/robots.txt b/inji-verify/public/robots.txt
similarity index 100%
rename from public/robots.txt
rename to inji-verify/public/robots.txt
diff --git a/src/App.css b/inji-verify/src/App.css
similarity index 100%
rename from src/App.css
rename to inji-verify/src/App.css
diff --git a/src/App.tsx b/inji-verify/src/App.tsx
similarity index 100%
rename from src/App.tsx
rename to inji-verify/src/App.tsx
diff --git a/src/assets/inji-logo.png b/inji-verify/src/assets/inji-logo.png
similarity index 100%
rename from src/assets/inji-logo.png
rename to inji-verify/src/assets/inji-logo.png
diff --git a/src/assets/logo.svg b/inji-verify/src/assets/logo.svg
similarity index 100%
rename from src/assets/logo.svg
rename to inji-verify/src/assets/logo.svg
diff --git a/src/assets/qr.svg b/inji-verify/src/assets/qr.svg
similarity index 100%
rename from src/assets/qr.svg
rename to inji-verify/src/assets/qr.svg
diff --git a/src/assets/scan-qr.png b/inji-verify/src/assets/scan-qr.png
similarity index 100%
rename from src/assets/scan-qr.png
rename to inji-verify/src/assets/scan-qr.png
diff --git a/src/assets/scanner-ouline.svg b/inji-verify/src/assets/scanner-ouline.svg
similarity index 100%
rename from src/assets/scanner-ouline.svg
rename to inji-verify/src/assets/scanner-ouline.svg
diff --git a/src/assets/verification-failed-icon.svg b/inji-verify/src/assets/verification-failed-icon.svg
similarity index 100%
rename from src/assets/verification-failed-icon.svg
rename to inji-verify/src/assets/verification-failed-icon.svg
diff --git a/src/assets/verification-success-icon.svg b/inji-verify/src/assets/verification-success-icon.svg
similarity index 100%
rename from src/assets/verification-success-icon.svg
rename to inji-verify/src/assets/verification-success-icon.svg
diff --git a/src/components/Home/VerificationProgressTracker/Footer.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/Footer.tsx
similarity index 100%
rename from src/components/Home/VerificationProgressTracker/Footer.tsx
rename to inji-verify/src/components/Home/VerificationProgressTracker/Footer.tsx
diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
similarity index 100%
rename from src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
rename to inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
similarity index 100%
rename from src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
rename to inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
diff --git a/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
similarity index 100%
rename from src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
rename to inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
diff --git a/src/components/Home/VerificationProgressTracker/Navbar.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/Navbar.tsx
similarity index 100%
rename from src/components/Home/VerificationProgressTracker/Navbar.tsx
rename to inji-verify/src/components/Home/VerificationProgressTracker/Navbar.tsx
diff --git a/src/components/Home/VerificationProgressTracker/QrScanner.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/QrScanner.tsx
similarity index 100%
rename from src/components/Home/VerificationProgressTracker/QrScanner.tsx
rename to inji-verify/src/components/Home/VerificationProgressTracker/QrScanner.tsx
diff --git a/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx
similarity index 100%
rename from src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx
rename to inji-verify/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx
diff --git a/src/components/Home/VerificationProgressTracker/index.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/index.tsx
similarity index 100%
rename from src/components/Home/VerificationProgressTracker/index.tsx
rename to inji-verify/src/components/Home/VerificationProgressTracker/index.tsx
diff --git a/src/components/Home/VerificationProgressTracker/styles.ts b/inji-verify/src/components/Home/VerificationProgressTracker/styles.ts
similarity index 100%
rename from src/components/Home/VerificationProgressTracker/styles.ts
rename to inji-verify/src/components/Home/VerificationProgressTracker/styles.ts
diff --git a/src/components/Home/VerificationSection/ImportFromFile.tsx b/inji-verify/src/components/Home/VerificationSection/ImportFromFile.tsx
similarity index 100%
rename from src/components/Home/VerificationSection/ImportFromFile.tsx
rename to inji-verify/src/components/Home/VerificationSection/ImportFromFile.tsx
diff --git a/src/components/Home/VerificationSection/Result/ResultSummary.tsx b/inji-verify/src/components/Home/VerificationSection/Result/ResultSummary.tsx
similarity index 100%
rename from src/components/Home/VerificationSection/Result/ResultSummary.tsx
rename to inji-verify/src/components/Home/VerificationSection/Result/ResultSummary.tsx
diff --git a/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx b/inji-verify/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx
similarity index 100%
rename from src/components/Home/VerificationSection/Result/VcDisplayCard.tsx
rename to inji-verify/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx
diff --git a/src/components/Home/VerificationSection/Result/index.tsx b/inji-verify/src/components/Home/VerificationSection/Result/index.tsx
similarity index 100%
rename from src/components/Home/VerificationSection/Result/index.tsx
rename to inji-verify/src/components/Home/VerificationSection/Result/index.tsx
diff --git a/src/components/Home/VerificationSection/ScanQrCode.tsx b/inji-verify/src/components/Home/VerificationSection/ScanQrCode.tsx
similarity index 100%
rename from src/components/Home/VerificationSection/ScanQrCode.tsx
rename to inji-verify/src/components/Home/VerificationSection/ScanQrCode.tsx
diff --git a/src/components/Home/VerificationSection/Verification.tsx b/inji-verify/src/components/Home/VerificationSection/Verification.tsx
similarity index 100%
rename from src/components/Home/VerificationSection/Verification.tsx
rename to inji-verify/src/components/Home/VerificationSection/Verification.tsx
diff --git a/src/components/Home/VerificationSection/commons/StyledButton.tsx b/inji-verify/src/components/Home/VerificationSection/commons/StyledButton.tsx
similarity index 100%
rename from src/components/Home/VerificationSection/commons/StyledButton.tsx
rename to inji-verify/src/components/Home/VerificationSection/commons/StyledButton.tsx
diff --git a/src/components/Home/VerificationSection/index.tsx b/inji-verify/src/components/Home/VerificationSection/index.tsx
similarity index 100%
rename from src/components/Home/VerificationSection/index.tsx
rename to inji-verify/src/components/Home/VerificationSection/index.tsx
diff --git a/src/components/commons/Loader.tsx b/inji-verify/src/components/commons/Loader.tsx
similarity index 100%
rename from src/components/commons/Loader.tsx
rename to inji-verify/src/components/commons/Loader.tsx
diff --git a/src/index.css b/inji-verify/src/index.css
similarity index 100%
rename from src/index.css
rename to inji-verify/src/index.css
diff --git a/src/index.tsx b/inji-verify/src/index.tsx
similarity index 100%
rename from src/index.tsx
rename to inji-verify/src/index.tsx
diff --git a/src/pages/Home.tsx b/inji-verify/src/pages/Home.tsx
similarity index 100%
rename from src/pages/Home.tsx
rename to inji-verify/src/pages/Home.tsx
diff --git a/src/react-app-env.d.ts b/inji-verify/src/react-app-env.d.ts
similarity index 100%
rename from src/react-app-env.d.ts
rename to inji-verify/src/react-app-env.d.ts
diff --git a/src/reportWebVitals.ts b/inji-verify/src/reportWebVitals.ts
similarity index 100%
rename from src/reportWebVitals.ts
rename to inji-verify/src/reportWebVitals.ts
diff --git a/src/setupTests.ts b/inji-verify/src/setupTests.ts
similarity index 100%
rename from src/setupTests.ts
rename to inji-verify/src/setupTests.ts
diff --git a/src/types/data-types.ts b/inji-verify/src/types/data-types.ts
similarity index 100%
rename from src/types/data-types.ts
rename to inji-verify/src/types/data-types.ts
diff --git a/src/types/function-types.ts b/inji-verify/src/types/function-types.ts
similarity index 100%
rename from src/types/function-types.ts
rename to inji-verify/src/types/function-types.ts
diff --git a/src/utils/common-utils.ts b/inji-verify/src/utils/common-utils.ts
similarity index 100%
rename from src/utils/common-utils.ts
rename to inji-verify/src/utils/common-utils.ts
diff --git a/src/utils/config.ts b/inji-verify/src/utils/config.ts
similarity index 100%
rename from src/utils/config.ts
rename to inji-verify/src/utils/config.ts
diff --git a/src/utils/did-utils.ts b/inji-verify/src/utils/did-utils.ts
similarity index 100%
rename from src/utils/did-utils.ts
rename to inji-verify/src/utils/did-utils.ts
diff --git a/src/utils/inji-theme.ts b/inji-verify/src/utils/inji-theme.ts
similarity index 100%
rename from src/utils/inji-theme.ts
rename to inji-verify/src/utils/inji-theme.ts
diff --git a/src/utils/qr-utils.js b/inji-verify/src/utils/qr-utils.js
similarity index 100%
rename from src/utils/qr-utils.js
rename to inji-verify/src/utils/qr-utils.js
diff --git a/src/utils/samples.ts b/inji-verify/src/utils/samples.ts
similarity index 100%
rename from src/utils/samples.ts
rename to inji-verify/src/utils/samples.ts
diff --git a/src/utils/verification-utils.js b/inji-verify/src/utils/verification-utils.js
similarity index 100%
rename from src/utils/verification-utils.js
rename to inji-verify/src/utils/verification-utils.js
diff --git a/tsconfig.json b/inji-verify/tsconfig.json
similarity index 100%
rename from tsconfig.json
rename to inji-verify/tsconfig.json

From ac6144c6a30f7763b58f0f90b07761a2016f30e3 Mon Sep 17 00:00:00 2001
From: Shiva <shivakumar@beehyv.com>
Date: Thu, 4 Apr 2024 09:53:20 +0530
Subject: [PATCH 10/10] Add styling to upload button Signed-off-by: Shiva
 <shivakumar@beehyv.com>

---
 .../Home/VerificationSection/ImportFromFile.tsx      | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/inji-verify/src/components/Home/VerificationSection/ImportFromFile.tsx b/inji-verify/src/components/Home/VerificationSection/ImportFromFile.tsx
index 1065a38f..5529b184 100644
--- a/inji-verify/src/components/Home/VerificationSection/ImportFromFile.tsx
+++ b/inji-verify/src/components/Home/VerificationSection/ImportFromFile.tsx
@@ -1,18 +1,24 @@
 import {scanFilesForQr} from "../../../utils/qr-utils";
 import {QrScanResult} from "../../../types/data-types";
 import {SetScanResultFunction} from "../../../types/function-types";
+import StyledButton from "./commons/StyledButton";
 
 export const ImportFromFile = ({setScanResult}: {setScanResult: SetScanResultFunction}) => {
     return (
         <div style={{margin: "12px auto", display: "grid", placeContent: "center"}}>
-            <label htmlFor={"upload-qr"} style={{font: 'normal normal normal 16px/21px Inter'}}>Upload your certificate</label><br/>
+            <StyledButton>
+                <label htmlFor={"upload-qr"}>
+                    Upload your certificate</label>
+            </StyledButton>
+            <br/>
             <input
                 type="file"
                 id="upload-qr"
                 name="upload-qr"
                 accept=".png, .jpeg, .jpg, .pdf"
                 style={{
-                    margin: "8px auto"
+                    margin: "8px auto",
+                    display: "none"
                 }}
                 onChange={e => {
                     const file = e?.target?.files && e?.target?.files[0];
@@ -22,6 +28,6 @@ export const ImportFromFile = ({setScanResult}: {setScanResult: SetScanResultFun
                             setScanResult(scanResult);
                         });
                 }}
-            />`
+            />
         </div>);
 }