Feat/ocrvs 7955/qr code scanner poc

src/form/birth/custom-fields.ts

@@ -0,0 +1,59 @@
+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'
+
+/**
+ *
+ * @param event
+ * @param sectionId
+ * @returns hidden field to store QR scanned data
+ */
+export function getQRCodeField(
+  event: string,
+  sectionId: string,
+  conditionals: Conditional[]
+): SerializedFormField {
+  const fieldName: string = 'qrCode'
+  const fieldId: string = `${event}.${sectionId}.${sectionId}-view-group.${fieldName}`
+  return {
+    name: fieldName,
+    customQuestionMappingId: fieldId,
+    custom: true,
+    required: false,
+    type: 'QR_SCANNER',
+    label: {
+      id: 'form.field.label.empty',
+      description: 'empty string',
+      defaultMessage: ''
+    },
+    initialValue: '',
+    validator: [],
+    mapping: getCustomFieldMapping(fieldId),
+    placeholder: formMessageDescriptors.formSelectPlaceholder,
+    conditionals
+  }
+}
+
+/** 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

@@ -80,6 +80,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, getQRCodeField } from './custom-fields'
 // import { createCustomFieldExample } from '../custom-fields'
 
 // ======================= FORM CONFIGURATION =======================
@@ -220,20 +221,44 @@ export const birthForm: ISerializedForm = {
           fields: [
             informantType, // Required field.
             otherInformantType(Event.Birth), // Required field.
+            getQRCodeField(
+              'birth',
+              'informant',
+              informantFirstNameConditionals
+                .concat(hideIfInformantMotherOrFather)
+                .concat([
+                  {
+                    action: 'disable',
+                    expression: 'Boolean($form.qrCode)'
+                  }
+                ])
+            ),
             getFirstNameField(
               'informantNameInEnglish',
               informantFirstNameConditionals.concat(
                 hideIfInformantMotherOrFather
               ),
-              certificateHandlebars.informantFirstName
+              certificateHandlebars.informantFirstName,
+              {
+                dependsOn: ['qrCode'],
+                expression: '$form.qrCode?.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: ['qrCode'],
+                expression: '$form.qrCode?.lastName?.[0].value'
+              }
             ), // Required field.
+            getGenderCustom('birth', 'informant', {
+              dependsOn: ['qrCode'],
+              expression: '$form.qrCode?.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/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,7 @@ export const NID_VERIFICATION_BUTTON = 'NID_VERIFICATION_BUTTON'
 export const DIVIDER = 'DIVIDER'
 export const HEADING3 = 'HEADING3'
 export const SIGNATURE = 'SIGNATURE'
+export const QR_SCANNER = 'QR_SCANNER'
 
 export enum RadioSize {
   LARGE = 'large',
@@ -492,6 +494,9 @@ export interface ISignatureFormField extends IFormFieldBase {
   )[]
 }
 
+export interface IQRScannerFormField extends IFormFieldBase {
+  type: typeof QR_SCANNER
+}
 export type IFormField =
   | ITextFormField
   | ITelFormField
@@ -525,6 +530,8 @@ export type IFormField =
   | IDividerField
   | IHeading3Field
   | ISignatureFormField
+  | IHiddenFormField
+  | IQRScannerFormField
 
 export interface SelectComponentOption {
   value: string
@@ -740,6 +747,10 @@ export type SerializedFormField = UnionOmit<
   mapping?: IFormFieldMapping
 }
 
+interface IHiddenFormField extends IFormFieldBase {
+  type: typeof HIDDEN
+}
+
 export type IFormSectionQueryMapFunction = (
   transFormedData: IFormData,
   queryData: any,