Merge pull request #8 from shiva-beehyv/add-data-test-ids-and-respons…

…iveness Add support for scanning qr from images/pdfs
mosip · Apr 4, 2024 · 09396e7 · 09396e7
2 parents 87adaf3 + ac6144c
commit 09396e7
Show file tree

Hide file tree

Showing 29 changed files with 404 additions and 162 deletions.
diff --git 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/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/inji-verify/package-lock.json b/inji-verify/package-lock.json
diff --git a/inji-verify/package.json b/inji-verify/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",

diff --git a/inji-verify/public/index.html b/inji-verify/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/inji-verify/public/inji-logo.png b/inji-verify/public/inji-logo.png
diff --git a/inji-verify/src/assets/qr.svg b/inji-verify/src/assets/qr.svg
diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper.tsx
diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx
@@ -0,0 +1,26 @@
+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: InjiStepperStep[], 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;
diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/MobileStepper.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {Step, StepLabel, Stepper, Typography} from "@mui/material";
+import {InjiStepperStep} from "../../../../types/data-types";
+
+function MobileStepper({steps, activeStep}: {steps: InjiStepperStep[], activeStep: number}) {
+    return (
+        <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>
+    );
+}
+
+export default MobileStepper;
diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx
@@ -0,0 +1,41 @@
+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: InjiStepperStep[] = [
+    {
+        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}) => {
+    const isDesktop = useMediaQuery('@media (min-width:768px)');
+
+    return (
+        <Box style={{marginTop: '30px'}}>
+            {
+                isDesktop
+                    ? (<DesktopStepper steps={steps} activeStep={activeStep}/>)
+                    : (<MobileStepper steps={steps} activeStep={activeStep}/>)
+            }
+        </Box>
+    );
+}
+
+export default InjiStepper;
diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/QrScanner.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/QrScanner.tsx
@@ -1,8 +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]);
 
@@ -46,8 +47,7 @@ function QrScanner({setVerifying, setActiveStep, setQrData}: any) {
                 video: {
                     zIndex: 1000
                 }
-            }
-        }
+            }}
         />
     );
 }

diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx
@@ -1,7 +1,8 @@
 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)");
     return (
         <Box>
             <Typography variant='h4' style={{
@@ -10,12 +11,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/inji-verify/src/components/Home/VerificationProgressTracker/styles.ts b/inji-verify/src/components/Home/VerificationProgressTracker/styles.ts
@@ -7,5 +7,4 @@ export const VerificationProgressTrackerContainer = styled(Box)`
     margin-top: 0;
     height: 100vh;
     max-height: 100vh;
-    overflow-y: scroll;
 `;
diff --git a/inji-verify/src/components/Home/VerificationSection/ImportFromFile.tsx b/inji-verify/src/components/Home/VerificationSection/ImportFromFile.tsx
@@ -0,0 +1,33 @@
+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"}}>
+            <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",
+                    display: "none"
+                }}
+                onChange={e => {
+                    const file = e?.target?.files && e?.target?.files[0];
+                    if (!file) return;
+                    scanFilesForQr(file)
+                        .then(scanResult => {
+                            setScanResult(scanResult);
+                        });
+                }}
+            />
+        </div>);
+}
diff --git a/inji-verify/src/components/Home/VerificationSection/Result/ResultSummary.tsx b/inji-verify/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>