From be32e86f57f66ff638b0495432a5a6de73a2d85b Mon Sep 17 00:00:00 2001 From: Shiva Date: Wed, 24 Apr 2024 15:14:38 +0530 Subject: [PATCH 1/3] [INJIVER-163] UI Content Changes on v0.8.0 release build Signed-off-by: Shiva --- .../InjiStepper/DesktopStepper.tsx | 13 +++++++++++-- .../InjiStepper/index.tsx | 14 +++++++------- .../StepperContentHeader.tsx | 4 ++-- .../VerificationSection/CameraAccessDenied.tsx | 2 +- .../VerificationSection/Result/VcDisplayCard.tsx | 2 +- .../Home/VerificationSection/ScanQrCode.tsx | 2 +- inji-verify/src/types/data-types.ts | 2 +- 7 files changed, 24 insertions(+), 15 deletions(-) diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx index e967284d..f140f93d 100644 --- a/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx +++ b/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/DesktopStepper.tsx @@ -1,10 +1,19 @@ import React from 'react'; -import {Step, StepContent, StepLabel, Stepper, Typography} from "@mui/material"; +import {Step, StepLabel, Stepper} from "@mui/material"; import {VerificationStep} from "../../../../types/data-types"; import StepperIcon from "./StepperIcon"; import {StepperConnector} from "./StepperConnector"; import {StepContentContainer, StepContentDescription, StepLabelContent} from "./styles"; +const getDescriptionContent = (description: string | string[]): string | React.ReactElement => { + if (typeof description === 'string') { + return description; + } + return (<> + {description.map(point => (<>{point}
))} + ); +} + function DesktopStepper({steps, activeStep}: {steps: VerificationStep[], activeStep: number}) { return ( }> @@ -19,7 +28,7 @@ function DesktopStepper({steps, activeStep}: {steps: VerificationStep[], activeS TransitionProps={{appear: true, unmountOnExit: false}} hidden={false}> - {step.description} + {getDescriptionContent(step.description)} diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx index 67a09520..b119e79f 100644 --- a/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx +++ b/inji-verify/src/components/Home/VerificationProgressTracker/InjiStepper/index.tsx @@ -7,21 +7,21 @@ import {useActiveStepContext} from "../../../../pages/Home"; const steps: VerificationStep[] = [ { - label: 'Scan QR Code or Upload QR code', - description: 'Tap the button and display the QR code shown on your digital credentials / card', + label: 'Select ‘Scan QR Code’ or ‘Upload QR Code’ ', + description: ['Tap \'Scan QR Code\' and scan to capture the QR code shown on your digital credentials/card.', 'Tap ‘Upload QR Code’ to upload the preferred file.'], }, { label: 'Activate your device’s camera', description: - 'Activate your device camera for scanning: A notification will be prompt to activate your device camera', + 'Activate your device camera for scanning: A notification will be prompt to activate your device camera (Valid for ‘Scan QR Code’ feature only)', }, { - label: 'Verification', - description: 'Validating and verification of your digital document / card' + label: 'Verify document', + description: 'Allow Inji Verify to verify & validate the digital document / card' }, { - label: 'Result', - description: 'Credibility result of your digital document / card' + label: 'View result', + description: 'Check the validation result' } ]; diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx index 038ad9c7..e7cb0b2d 100644 --- a/inji-verify/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx +++ b/inji-verify/src/components/Home/VerificationProgressTracker/StepperContentHeader.tsx @@ -7,12 +7,12 @@ function StepperContentHeader(props: any) { return ( - Verify your credentials in 4 easy steps + Verify credentials with ease! { isTabletOrAbove && ( - 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. + Effortlessly verify credentials with Inji Verify! Just scan the QR code or upload it for instant validation, following the steps below. ) } diff --git a/inji-verify/src/components/Home/VerificationSection/CameraAccessDenied.tsx b/inji-verify/src/components/Home/VerificationSection/CameraAccessDenied.tsx index 12ebbd17..06b14fd3 100644 --- a/inji-verify/src/components/Home/VerificationSection/CameraAccessDenied.tsx +++ b/inji-verify/src/components/Home/VerificationSection/CameraAccessDenied.tsx @@ -43,7 +43,7 @@ const CameraAccessDenied = ({open, handleClose}: {open: boolean, handleClose: () - I Understand + Okay diff --git a/inji-verify/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx b/inji-verify/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx index b51a23ec..d361cff1 100644 --- a/inji-verify/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx +++ b/inji-verify/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx @@ -39,7 +39,7 @@ function VcDisplayCard({vc, setActiveStep}: {vc: any, setActiveStep: SetActiveSt { setActiveStep(VerificationSteps.ScanQrCodePrompt) }}> - Verify Another QR Code + Verify QR Code diff --git a/inji-verify/src/components/Home/VerificationSection/ScanQrCode.tsx b/inji-verify/src/components/Home/VerificationSection/ScanQrCode.tsx index ff27b9e8..a66bfb47 100644 --- a/inji-verify/src/components/Home/VerificationSection/ScanQrCode.tsx +++ b/inji-verify/src/components/Home/VerificationSection/ScanQrCode.tsx @@ -86,7 +86,7 @@ const ScanQrCode = ({setScanResult}: { } }} > - Scan the QR Code + Scan QR Code { diff --git a/inji-verify/src/types/data-types.ts b/inji-verify/src/types/data-types.ts index ac3cfe0c..46c3ffdd 100644 --- a/inji-verify/src/types/data-types.ts +++ b/inji-verify/src/types/data-types.ts @@ -17,7 +17,7 @@ export type VcStatus = { export type VerificationStep = { label: string, - description: string + description: string | string[] } export type CardPositioning = { From 28973f60fde00af70f2d68146e8753b7b300cc51 Mon Sep 17 00:00:00 2001 From: Shiva Date: Wed, 24 Apr 2024 17:39:19 +0530 Subject: [PATCH 2/3] [INJIVER-163] Update Inji verify logo Signed-off-by: Shiva --- .../images/{inji-logo.svg => inji_verify.svg} | 15 +++-- inji-verify/src/assets/inji-logo.svg | 28 --------- inji-verify/src/assets/under_construction.svg | 62 ------------------- .../VerificationProgressTracker/Navbar.tsx | 2 +- inji-verify/src/pages/Offline.tsx | 2 +- 5 files changed, 9 insertions(+), 100 deletions(-) rename inji-verify/public/assets/images/{inji-logo.svg => inji_verify.svg} (76%) delete mode 100644 inji-verify/src/assets/inji-logo.svg delete mode 100644 inji-verify/src/assets/under_construction.svg diff --git a/inji-verify/public/assets/images/inji-logo.svg b/inji-verify/public/assets/images/inji_verify.svg similarity index 76% rename from inji-verify/public/assets/images/inji-logo.svg rename to inji-verify/public/assets/images/inji_verify.svg index 963a490d..a3af3f4f 100644 --- a/inji-verify/public/assets/images/inji-logo.svg +++ b/inji-verify/public/assets/images/inji_verify.svg @@ -1,4 +1,4 @@ - + @@ -11,18 +11,17 @@ - - - + + + - + - - - + + diff --git a/inji-verify/src/assets/inji-logo.svg b/inji-verify/src/assets/inji-logo.svg deleted file mode 100644 index 963a490d..00000000 --- a/inji-verify/src/assets/inji-logo.svg +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/inji-verify/src/assets/under_construction.svg b/inji-verify/src/assets/under_construction.svg deleted file mode 100644 index 5f4933c3..00000000 --- a/inji-verify/src/assets/under_construction.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/Navbar.tsx b/inji-verify/src/components/Home/VerificationProgressTracker/Navbar.tsx index 3a5d2245..32e453d2 100644 --- a/inji-verify/src/components/Home/VerificationProgressTracker/Navbar.tsx +++ b/inji-verify/src/components/Home/VerificationProgressTracker/Navbar.tsx @@ -5,7 +5,7 @@ function Navbar(props: any) { // Logo goes here return ( - + ); } diff --git a/inji-verify/src/pages/Offline.tsx b/inji-verify/src/pages/Offline.tsx index 970cc0d6..764ba995 100644 --- a/inji-verify/src/pages/Offline.tsx +++ b/inji-verify/src/pages/Offline.tsx @@ -9,7 +9,7 @@ function Offline(props: any) { background: '#FAFBFD 0% 0% no-repeat padding-box', height: '100%' }}> - + ); From 0efe685d331171a5b6dd16fe70c128d9acdeda93 Mon Sep 17 00:00:00 2001 From: Shiva Date: Wed, 24 Apr 2024 17:53:03 +0530 Subject: [PATCH 3/3] [INJIVER-163] Set scan status if file size is not in limits Signed-off-by: Shiva --- .../src/components/Home/VerificationSection/UploadQrCode.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/inji-verify/src/components/Home/VerificationSection/UploadQrCode.tsx b/inji-verify/src/components/Home/VerificationSection/UploadQrCode.tsx index d7d237aa..58c71f07 100644 --- a/inji-verify/src/components/Home/VerificationSection/UploadQrCode.tsx +++ b/inji-verify/src/components/Home/VerificationSection/UploadQrCode.tsx @@ -74,7 +74,8 @@ export const UploadQrCode = ({setScanResult, displayMessage, setScanStatus}: if (file.size < UploadFileSizeLimits.min || file.size > UploadFileSizeLimits.max) { console.log(`File size: `, file?.size); setActiveStep(VerificationSteps.ScanQrCodePrompt); - setAlertInfo({...AlertMessages.unsupportedFileSize, open: true}) + setAlertInfo({...AlertMessages.unsupportedFileSize, open: true}); + setScanStatus("Failed"); return; } setActiveStep(VerificationSteps.Verifying);