feat: id verification status handling, QR code validation, and error handling

packages/client/src/components/form/ReaderGenerator.tsx

@@ -30,6 +30,7 @@ import {
   tutorialMessages
 } from '@client/i18n/messages/views/qr-reader'
 import { useIntl } from 'react-intl'
+import { JSONSchema, validate } from '@opencrvs/commons/client'
 
 interface ReaderGeneratorProps {
   readers: ReaderType[]
@@ -53,6 +54,13 @@ export const ReaderGenerator = ({
       {readers.map((reader) => {
         const { type } = reader
         if (isReaderQR(reader)) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const validator = (data: any) => {
+            const result = validate(reader.validation.rule as JSONSchema, data)
+            if (!result) {
+              return intl.formatMessage(reader.validation.errorMessage)
+            }
+          }
           return (
             <QRReader
               key={type}
@@ -71,12 +79,10 @@ export const ReaderGenerator = ({
                   )
                 }
               }}
+              validator={validator}
               onScan={(data) => {
                 setFieldValue(field.name, data)
               }}
-              // Error handling to be handled in OCRVS-8330
-              // eslint-disable-next-line no-console
-              onError={(error) => console.error(error)}
             />
           )
         } else if (isReaderLinkButton(reader)) {

packages/client/src/forms/index.ts

@@ -754,6 +754,10 @@ export interface ILinkButtonFormField extends IFormFieldBase {
 
 export interface QRReaderType {
   type: 'QR'
+  validation: {
+    rule: unknown
+    errorMessage: MessageDescriptor
+  }
 }
 
 export type ReaderType = QRReaderType | ILinkButtonFormField

packages/components/.storybook/main.ts

@@ -32,7 +32,7 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@storybook/addon-docs'
   ],
-  staticDirs: ['../public'],
+  staticDirs: ['../public', '../static'],
   framework: {
     name: '@storybook/react-vite',
     options: {}

packages/components/src/DateField/DateField.tsx

@@ -61,7 +61,7 @@ export const DateField = ({
   const { dd, mm, yyyy } = date
 
   useEffect(() => {
-    if (initialValue && typeof initialValue === 'string') {
+    if (typeof initialValue === 'string') {
       const dateSegmentVals = initialValue?.split('-') || []
       setDate({
         yyyy: dateSegmentVals[0] || '',

packages/components/src/IDReader/IDReader.stories.tsx

@@ -12,6 +12,9 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { IDReader } from '.'
 import React from 'react'
 import { QRReader } from './readers/QRReader/QRReader'
+import { Stack } from '../Stack'
+import { Text } from '../Text'
+import { ScannableQRReader } from './types'
 
 const meta: Meta<typeof IDReader> = {
   title: 'Controls/IDReader',
@@ -22,12 +25,13 @@ export default meta
 
 type Story = StoryObj<typeof IDReader>
 
-const IDReaderWithAlertFeedback = (args: any) => (
+const IDReaderComponent = (qrReaderProps: Partial<ScannableQRReader>) => (
   <IDReader
     dividerLabel="Or"
     manualInputInstructionLabel="Complete fields below"
   >
     <QRReader
+      {...qrReaderProps}
       labels={{
         button: 'Scan ID QR code',
         scannerDialogSupportingCopy:
@@ -41,11 +45,86 @@ const IDReaderWithAlertFeedback = (args: any) => (
         }
       }}
       onScan={(data) => alert(JSON.stringify(data))}
-      onError={(error) => console.error(error)}
+      onError={(type, error) =>
+        // eslint-disable-next-line no-console
+        console.error(`Error: ${type} - ${error.message}`)
+      }
     />
   </IDReader>
 )
 
-export const IDReaderWithAlertFeedbackStory: Story = {
-  render: (args) => <IDReaderWithAlertFeedback {...args} />
+export const IDReaderWithAlertFeedback: Story = {
+  render: () => <IDReaderComponent />
+}
+
+export const IDReaderWithValidator: Story = {
+  render: () => (
+    <Stack direction="column" gap={4} alignItems="stretch">
+      <IDReaderComponent
+        validator={(data: unknown) => {
+          if (
+            typeof data === 'object' &&
+            data !== null &&
+            'firstName' in data &&
+            'lastName' in data &&
+            !!data['firstName'] &&
+            !!data['lastName']
+          ) {
+            return undefined
+          } else return 'Invalid QR code'
+        }}
+      />
+      <Text element="h5" variant="h4">
+        This reader is provided with a validator function having such rule that
+        it will show alert only if the QR code has the below structure:
+      </Text>
+      <code
+        style={{
+          whiteSpace: 'pre-wrap',
+          padding: '16px',
+          background: '#f5f5f5'
+        }}
+      >
+        {JSON.stringify({ firstName: 'John', lastName: 'Doe' }, null, 2)}
+      </code>
+      <Text element="h5" variant="h4">
+        Otherwise it will show an error message in the scanner dialog
+      </Text>
+      <Text element="h2" variant="h2">
+        Example
+      </Text>
+      <Text element="p" variant="reg16">
+        Scan the below QR code with the scanner above and you should see an
+        alert as the data of the QR code is valid
+      </Text>
+      <Stack>
+        <img src="./static/valid_qr.png" alt="valid_qr" />
+        <code
+          style={{
+            whiteSpace: 'pre-wrap',
+            padding: '16px',
+            background: '#f5f5f5'
+          }}
+        >
+          {JSON.stringify({ firstName: 'John', lastName: 'Doe' }, null, 2)}
+        </code>
+      </Stack>
+      <Text element="p" variant="reg16">
+        You will see an error message in the scanner dialog if you scan the
+        below QR code as the data of the QR code is invalid
+      </Text>
+      <Stack>
+        <img src="./static/invalid_qr.png" alt="invalid_qr" />
+        <code
+          style={{
+            whiteSpace: 'pre-wrap',
+            padding: '16px',
+            background: '#f5f5f5'
+          }}
+        >
+          {JSON.stringify({ firstName: 'John', lastName: '' }, null, 2)}
+        </code>
+      </Stack>
+    </Stack>
+  )
 }

packages/components/src/IDReader/readers/QRReader/QRReader.tsx

@@ -8,7 +8,7 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { Button } from '../../../Button'
 import { Icon } from '../../../Icon'
 import styled from 'styled-components'
@@ -18,7 +18,7 @@ import Scanner from './Scanner'
 import { Box } from '../../../Box'
 import { Stack } from '../../../Stack'
 import { Text } from '../../../Text'
-import { ScannableQRReader } from '../../../IDReader/types'
+import { ErrorHandler, ScannableQRReader } from '../../../IDReader/types'
 import { useWindowSize } from '../../../hooks'
 import { getTheme } from '../../../theme'
 
@@ -32,17 +32,31 @@ const Info = styled(Stack)`
 `
 
 export const QRReader = (props: ScannableQRReader) => {
-  const { labels } = props
+  const { labels, validator, onScan, onError } = props
   const [isScannerDialogOpen, setScannerDialogOpen] = useState(false)
   const windowSize = useWindowSize()
   const theme = getTheme()
   const isSmallDevice = windowSize.width <= theme.grid.breakpoints.md
-  const handleScanSuccess = (
-    data: Parameters<ScannableQRReader['onScan']>[0]
-  ) => {
-    props.onScan(data)
-    setScannerDialogOpen(false)
-  }
+  const [error, setError] = useState('')
+  const handleScanSuccess = useCallback(
+    (data: Parameters<ScannableQRReader['onScan']>[0]) => {
+      onScan(data)
+      setError('')
+      setScannerDialogOpen(false)
+    },
+    [onScan]
+  )
+  const handleScanError: ErrorHandler = useCallback(
+    (type, error) => {
+      if (type === 'invalid' || type === 'parse') {
+        setError(error.message)
+      }
+      if (onError) {
+        onError(type, error)
+      }
+    },
+    [onError]
+  )
   return (
     <>
       <Button
@@ -65,8 +79,17 @@ export const QRReader = (props: ScannableQRReader) => {
           {labels.scannerDialogSupportingCopy}
         </Text>
         <ScannerBox>
-          <Scanner onScan={handleScanSuccess} onError={props.onError} />
+          <Scanner
+            onScan={handleScanSuccess}
+            validator={validator}
+            onError={handleScanError}
+          />
         </ScannerBox>
+        {error && (
+          <Text element="p" variant="bold16" color="redDark">
+            {error}
+          </Text>
+        )}
         <Info
           gap={16}
           justifyContent="space-between"

packages/components/src/IDReader/readers/QRReader/Scanner.tsx

@@ -8,13 +8,16 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import QRScanner from 'qr-scanner'
 import styled from 'styled-components'
+import { ErrorHandler, Validator } from '../../../IDReader/types'
+import { throttle } from 'lodash'
 
 interface ScannerProps {
-  onError: (error: 'mount' | 'parse') => void
+  onError: ErrorHandler
   onScan: (data: Record<string, unknown>) => void
+  validator?: Validator
 }
 
 const QRReader = styled.div`
@@ -37,34 +40,55 @@ const Scanner = (props: ScannerProps) => {
   const scanner = useRef<QRScanner>()
   const videoElement = useRef<HTMLVideoElement>(null)
   const [qrOn, setQrOn] = useState(true)
-  const { onError, onScan } = props
+  const { onError, onScan, validator } = props
+  const onScanSuccess = useCallback(
+    (result: QRScanner.ScanResult) => {
+      if (result.data) {
+        try {
+          const data = JSON.parse(result.data)
+          const validationError = validator && validator(data)
+          if (validationError) {
+            onError('invalid', new Error(validationError))
+            return
+          }
+          onScan(data)
+        } catch (error) {
+          // log detailed error message to console for debugging
+          // eslint-disable-next-line no-console
+          console.error(error)
+          onError('parse', new Error('Invalid JSON format'))
+        }
+      }
+    },
+    [onScan, onError, validator]
+  )
+  const onScanError = useCallback(
+    (error: Error) => {
+      onError('parse', error)
+    },
+    [onError]
+  )
 
   useEffect(() => {
     const currentVideoElement = videoElement?.current
     if (currentVideoElement && !scanner.current) {
-      scanner.current = new QRScanner(
-        currentVideoElement,
-        (result) => {
-          if (result.data) {
-            // TODO: handle parse error
-            onScan(JSON.parse(result.data))
-          }
-        },
-        {
-          // TODO: improve error handling
-          onDecodeError: () => onError('parse'),
-          preferredCamera: 'environment',
-          highlightCodeOutline: true,
-          highlightScanRegion: false
-        }
-      )
+      // implementation does not support the deprecated constructor overloads
+      // but supports the current signature. TS is throwing error. Need to have a closer
+      // look why TS is not able to detect the correct signature
+      // @ts-ignore
+      scanner.current = new QRScanner(currentVideoElement, onScanSuccess, {
+        onDecodeError: throttle(onScanError, 5000),
+        preferredCamera: 'environment',
+        highlightCodeOutline: true,
+        highlightScanRegion: false
+      })
 
       scanner?.current
         ?.start()
         .then(() => setQrOn(true))
-        .catch((err) => {
-          if (err) {
-            onError('mount')
+        .catch((error) => {
+          if (error) {
+            setQrOn(false)
           }
         })
     }
@@ -76,16 +100,17 @@ const Scanner = (props: ScannerProps) => {
       } else {
         scanner?.current?.stop()
       }
+      scanner.current?.destroy()
     }
-  }, [onScan, onError])
+  }, [onScan, onError, validator, onScanSuccess, onScanError])
 
   useEffect(() => {
-    if (!qrOn) alert('Could not scan')
+    if (!qrOn) alert('Please allow camera access to scan QR code')
   }, [qrOn])
 
   return (
     <QRReader>
-      <Video ref={videoElement}></Video>
+      <Video ref={videoElement} />
     </QRReader>
   )
 }