feat: QR code scanner

src/form/birth/custom-fields.ts

@@ -0,0 +1,115 @@
+import { getCustomFieldMapping } from '@countryconfig/utils/mapping/field-mapping-utils'
+import { formMessageDescriptors } from '../common/messages'
+import { Conditional, SerializedFormField } from '../types/types'
+import { genderOptions } from '../common/select-options'
+import { MessageDescriptor } from 'react-intl'
+
+/**
+ *
+ * @param event
+ * @param sectionId
+ * @returns hidden field to store QR scanned data
+ */
+export function getIDReaderField(
+  event: string,
+  sectionId: string,
+  conditionals: Conditional[],
+  label: MessageDescriptor
+): SerializedFormField {
+  const fieldName: string = 'informantIDReadeer'
+  const fieldId: string = `${event}.${sectionId}.${sectionId}-view-group.${fieldName}`
+  return {
+    name: fieldName,
+    customQuestionMappingId: fieldId,
+    custom: true,
+    required: false,
+    type: 'ID_READER',
+    label,
+    initialValue: '',
+    validator: [],
+    mapping: getCustomFieldMapping(fieldId),
+    placeholder: formMessageDescriptors.formSelectPlaceholder,
+    conditionals,
+    dividerLabel: {
+      id: 'id.divider.label',
+      defaultMessage: 'Or'
+    },
+    manualInputInstructionLabel: {
+      id: 'id.manualInputInstruction.label',
+      defaultMessage: 'Complete fields below'
+    },
+    readers: [
+      {
+        type: 'QR',
+        labels: {
+          button: {
+            id: 'id.qr.button.label',
+            defaultMessage: 'Scan ID QR code'
+          },
+          scannerDialogSupportingCopy: {
+            id: 'id.qr.scanner.supportingCopy',
+            defaultMessage:
+              "Place the Notifier's ID card in front of the camera."
+          },
+          tutorial: {
+            cameraCleanliness: {
+              id: 'id.qr.tutorial.cameraCleanliness',
+              defaultMessage: 'Ensure your camera is clean and functional.'
+            },
+            distance: {
+              id: 'id.qr.tutorial.distance',
+              defaultMessage:
+                'Hold the device steadily 6-12 inches away from the QR code.'
+            },
+            lightBalance: {
+              id: 'id.qr.tutorial.lightBalance',
+              defaultMessage:
+                'Ensure the QR code is well-lit and not damaged or blurry.'
+            }
+          }
+        }
+      },
+      {
+        name: 'redirect',
+        validator: [],
+        type: 'REDIRECT',
+        label: {
+          id: 'redirect.id',
+          defaultMessage: 'E-signet'
+        },
+        options: {
+          url: 'test',
+          callback: {
+            params: {
+              authorized: 'true'
+            },
+            trigger: 'someHTTPField'
+          }
+        }
+      }
+    ]
+  }
+}
+
+/** To bypass config validation */
+export function getGenderCustom(
+  event: string,
+  sectionId: string,
+  initialValue: { dependsOn: string[]; expression: string } | string = ''
+) {
+  const fieldName: string = 'gender'
+  const fieldId: string = `${event}.${sectionId}.${sectionId}-view-group.${fieldName}`
+  return {
+    name: fieldName,
+    type: 'SELECT_WITH_OPTIONS',
+    customQuestionMappingId: fieldId,
+    custom: true,
+    label: formMessageDescriptors.sex,
+    required: false,
+    initialValue,
+    validator: [],
+    placeholder: formMessageDescriptors.formSelectPlaceholder,
+    mapping: getCustomFieldMapping(fieldId),
+    options: genderOptions
+  } satisfies SerializedFormField
+}

src/form/birth/index.ts

@@ -79,6 +79,7 @@ import { getSectionMapping } from '@countryconfig/utils/mapping/section/birth/ma
 import { getCommonSectionMapping } from '@countryconfig/utils/mapping/field-mapping-utils'
 import { getReasonForLateRegistration } from '../custom-fields'
 import { getIDNumberFields, getIDType } from '../custom-fields'
+import { getGenderCustom, getIDReaderField } from './custom-fields'
 // import { createCustomFieldExample } from '../custom-fields'
 
 // ======================= FORM CONFIGURATION =======================
@@ -219,20 +220,68 @@ export const birthForm: ISerializedForm = {
           fields: [
             informantType, // Required field.
             otherInformantType(Event.Birth), // Required field.
+            getIDReaderField(
+              'birth',
+              'informant',
+              informantFirstNameConditionals
+                .concat(hideIfInformantMotherOrFather)
+                .concat([
+                  {
+                    action: 'disable',
+                    expression: 'Boolean($form.qrCode1)'
+                  }
+                ]),
+              {
+                id: 'form.field.label.qrScanner.0',
+                defaultMessage: 'Scan QR code with Scanner 1'
+              }
+            ),
+            {
+              name: 'someHTTPField',
+              type: 'HTTP',
+              custom: true,
+              label: {
+                id: 'messages.empty',
+                defaultMessage: ' '
+              },
+              validator: [],
+              options: {
+                url: 'someRoute',
+                headers: {
+                  'Content-type': 'application/json'
+                },
+                method: 'GET'
+              }
+            },
             getFirstNameField(
               'informantNameInEnglish',
               informantFirstNameConditionals.concat(
                 hideIfInformantMotherOrFather
               ),
-              certificateHandlebars.informantFirstName
-            ), // Required field.
+              certificateHandlebars.informantFirstName,
+              {
+                dependsOn: ['qrCode1', 'qrCode2'],
+                expression:
+                  '$form.qrCode1?.firstName?.[0].value || $form.qrCode2?.firstName?.[0].value'
+              }
+            ), // Required field. In Farajaland, we have built the option to integrate with MOSIP. So we have different conditionals for each name to check MOSIP responses.  You could always refactor firstNamesEng for a basic setup
             getFamilyNameField(
               'informantNameInEnglish',
               informantFamilyNameConditionals.concat(
                 hideIfInformantMotherOrFather
               ),
-              certificateHandlebars.informantFamilyName
+              certificateHandlebars.informantFamilyName,
+              {
+                dependsOn: ['qrCode1', 'qrCode2'],
+                expression:
+                  '$form.qrCode1?.lastName?.[0].value || $form.qrCode2?.lastName?.[0].value'
+              }
             ), // Required field.
+            getGenderCustom('birth', 'informant', {
+              dependsOn: ['qrCode1', 'qrCode2'],
+              expression:
+                '$form.qrCode1?.gender?.[0].value?.toLowerCase() || $form.qrCode2?.gender?.[0].value?.toLowerCase()'
+            }),
             getBirthDate(
               'informantBirthDate',
               informantBirthDateConditionals.concat(

src/form/common/common-required-fields.ts

@@ -48,7 +48,8 @@ export const getGender = (certificateHandlebar: string) =>
 export const getFamilyNameField = (
   previewGroup: string,
   conditionals: Conditional[],
-  certificateHandlebar: string
+  certificateHandlebar: string,
+  initialValue: string | { dependsOn: string[]; expression: string } = ''
 ) =>
   ({
     name: 'familyNameEng', // A field with this name MUST exist
@@ -58,7 +59,7 @@ export const getFamilyNameField = (
     label: formMessageDescriptors.familyName,
     maxLength: 32,
     required: true,
-    initialValue: '',
+    initialValue,
     validator: [
       {
         operation: 'englishOnlyNameFormat'
@@ -70,7 +71,8 @@ export const getFamilyNameField = (
 export const getFirstNameField = (
   previewGroup: string,
   conditionals: Conditional[],
-  certificateHandlebar: string
+  certificateHandlebar: string,
+  initialValue: string | { dependsOn: string[]; expression: string } = ''
 ) =>
   ({
     name: 'firstNamesEng', // A field with this name MUST exist
@@ -84,7 +86,7 @@ export const getFirstNameField = (
     conditionals,
     maxLength: 32,
     required: true,
-    initialValue: '',
+    initialValue,
     validator: [
       {
         operation: 'englishOnlyNameFormat'

src/form/death/index.ts

@@ -61,7 +61,8 @@
   spouseBirthDateConditionals,
   spouseFamilyNameConditionals,
   spouseFirstNameConditionals,
-  hideIfInformantSpouse
+  hideIfInformantSpouse,
+  hideIfDeceasedAddressNotAvailable
 } from '../common/default-validation-conditionals'
 import {
   documentsSection,

src/form/types/types.ts

@@ -115,6 +115,7 @@ export const TEL = 'TEL'
 export const NUMBER = 'NUMBER'
 export const BIG_NUMBER = 'BIG_NUMBER'
 export const RADIO_GROUP = 'RADIO_GROUP'
+export const HIDDEN = 'HIDDEN'
 export const INFORMATIVE_RADIO_GROUP = 'INFORMATIVE_RADIO_GROUP'
 export const CHECKBOX_GROUP = 'CHECKBOX_GROUP'
 export const CHECKBOX = 'CHECKBOX'
@@ -142,6 +143,9 @@ export const NID_VERIFICATION_BUTTON = 'NID_VERIFICATION_BUTTON'
 export const DIVIDER = 'DIVIDER'
 export const HEADING3 = 'HEADING3'
 export const SIGNATURE = 'SIGNATURE'
+export const REDIRECT = 'REDIRECT'
+export const ID_READER = 'ID_READER'
+export const HTTP = 'HTTP'
 
 export enum RadioSize {
   LARGE = 'large',
@@ -491,6 +495,48 @@ export interface ISignatureFormField extends IFormFieldBase {
   )[]
 }
 
+export interface IHttpFormField extends IFormFieldBase {
+  type: typeof HTTP
+  options: {
+    url: string
+    method?: string
+    headers: Record<string, string>
+    body?: Record<string, any>
+  }
+}
+
+export interface IRedirectFormField extends IFormFieldBase {
+  type: typeof REDIRECT
+  options: {
+    url: string
+    callback: {
+      trigger: string
+      params: Record<string, string>
+    }
+  }
+}
+
+export interface QRReaderType {
+  type: 'QR'
+  labels: {
+    button: MessageDescriptor
+    scannerDialogSupportingCopy: MessageDescriptor
+    tutorial: {
+      cameraCleanliness: MessageDescriptor
+      distance: MessageDescriptor
+      lightBalance: MessageDescriptor
+    }
+  }
+}
+
+type ReaderType = QRReaderType | IRedirectFormField
+export interface IIDReaderFormField extends IFormFieldBase {
+  type: typeof ID_READER
+  dividerLabel: MessageDescriptor
+  manualInputInstructionLabel: MessageDescriptor
+  readers: [ReaderType, ...ReaderType[]]
+}
+
 export type IFormField =
   | ITextFormField
   | ITelFormField
@@ -524,6 +570,10 @@ export type IFormField =
   | IDividerField
   | IHeading3Field
   | ISignatureFormField
+  | IHiddenFormField
+  | IIDReaderFormField
+  | IRedirectFormField
+  | IHttpFormField
 
 export interface SelectComponentOption {
   value: string
@@ -739,6 +789,10 @@ export type SerializedFormField = UnionOmit<
   mapping?: IFormFieldMapping
 }
 
+interface IHiddenFormField extends IFormFieldBase {
+  type: typeof HIDDEN
+}
+
 export type IFormSectionQueryMapFunction = (
   transFormedData: IFormData,
   queryData: any,