Merge pull request #1053 from opencrvs/develop

feat: add the new required review/preview section (#137)

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 1.6.0 (TBD)
 
 - Remove `splitView` option from DOCUMENT_UPLOADER_WITH_OPTION field
+- New required sections preview & review added. Signature field definitions are now part of these two sections same as normal form fields.
 
 ## [1.5.0]
 

src/form/birth/index.ts

@@ -70,7 +70,12 @@ import {
   exactDateOfBirthUnknownConditional,
   hideIfNidIntegrationEnabled
 } from '../common/default-validation-conditionals'
-import { documentsSection, registrationSection } from './required-sections'
+import {
+  documentsSection,
+  registrationSection,
+  previewSection,
+  reviewSection
+} from './required-sections'
 import { certificateHandlebars } from './certificate-handlebars'
 import { getSectionMapping } from '@countryconfig/utils/mapping/section/birth/mapping-utils'
 import { getCommonSectionMapping } from '@countryconfig/utils/mapping/field-mapping-utils'
@@ -464,6 +469,8 @@ export const birthForm: ISerializedForm = {
       ],
       mapping: getSectionMapping('father')
     },
-    documentsSection // REQUIRED SECTION FOR DOCUMENT ATTACHMENTS
+    documentsSection, // REQUIRED SECTION FOR DOCUMENT ATTACHMENTS
+    previewSection, // REQUIRED SECTION TO PREVIEW DECLARATION BEFORE SUBMIT
+    reviewSection // REQUIRED SECTION TO REVIEW SUBMITTED DECLARATION
   ]
 }

src/form/birth/required-sections.ts

@@ -2,6 +2,7 @@ import { getSectionMapping } from '@countryconfig/utils/mapping/section/birth/ma
 import { formMessageDescriptors } from '../common/messages'
 import { ISerializedFormSection } from '../types/types'
 import { getFieldMapping } from '@countryconfig/utils/mapping/field-mapping-utils'
+import { informantsSignature } from '../common/common-optional-fields'
 
 export const registrationSection = {
   id: 'registration', // A hidden 'registration' section must be included to store identifiers in a form draft that are used in certificates
@@ -201,4 +202,30 @@ export const documentsSection = {
       ]
     }
   ]
-} as ISerializedFormSection
+} satisfies ISerializedFormSection
+
+export const previewSection = {
+  id: 'preview',
+  viewType: 'preview',
+  name: formMessageDescriptors.previewName,
+  title: formMessageDescriptors.previewTitle,
+  groups: [
+    {
+      id: 'preview-view-group',
+      fields: [informantsSignature]
+    }
+  ]
+} satisfies ISerializedFormSection
+
+export const reviewSection = {
+  id: 'review',
+  viewType: 'review',
+  name: formMessageDescriptors.reviewName,
+  title: formMessageDescriptors.reviewTitle,
+  groups: [
+    {
+      id: 'review-view-group',
+      fields: [informantsSignature]
+    }
+  ]
+} satisfies ISerializedFormSection

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

@@ -200,3 +200,24 @@ export const getEducation = (
   options: educationalAttainmentOptions,
   mapping: getFieldMapping('educationalAttainment', certificateHandlebar)
 })
+
+export const informantsSignature = {
+  name: 'informantSignature',
+  label: {
+    defaultMessage: 'Signature of informant',
+    description: 'Label for informants signature input',
+    id: 'review.inputs.informantsSignature'
+  },
+  validator: [],
+  type: 'SIGNATURE',
+  mapping: {
+    mutation: {
+      operation: 'fieldValueSectionExchangeTransformer',
+      parameters: ['registration', 'informantsSignature']
+    },
+    query: {
+      operation: 'fieldValueSectionExchangeTransformer',
+      parameters: ['registration', 'informantsSignature']
+    }
+  }
+} satisfies SerializedFormField

src/form/common/messages.ts

@@ -326,6 +326,26 @@ export const formMessageDescriptors = {
     description: 'Label for form field: Nationality',
     id: 'form.field.label.nationality'
   },
+  previewName: {
+    defaultMessage: 'Preview',
+    description: 'Form section name for Preview',
+    id: 'register.form.section.preview.name'
+  },
+  previewTitle: {
+    defaultMessage: 'Preview',
+    description: 'Form section title for Preview',
+    id: 'register.form.section.preview.title'
+  },
+  reviewName: {
+    defaultMessage: 'Review',
+    description: 'Form section name for Review',
+    id: 'review.form.section.review.name'
+  },
+  reviewTitle: {
+    defaultMessage: 'Review',
+    description: 'Form section title for Review',
+    id: 'review.form.section.review.title'
+  },
   placeOfBirthPreview: {
     defaultMessage: 'Place of delivery',
     description: 'Title for place of birth sub section',

src/form/death/index.ts

@@ -65,7 +65,12 @@ import {
   hideIfNidIntegrationEnabled,
   hideIfDeceasedAddressNotAvailable
 } from '../common/default-validation-conditionals'
-import { documentsSection, registrationSection } from './required-sections'
+import {
+  documentsSection,
+  previewSection,
+  registrationSection,
+  reviewSection
+} from './required-sections'
 import {
   deceasedNameInEnglish,
   informantNameInEnglish /*,
@@ -516,6 +521,8 @@ export const deathForm = {
       ],
       mapping: getSectionMapping('father')
     },*/
-    documentsSection
+    documentsSection,
+    previewSection,
+    reviewSection
   ]
 } satisfies ISerializedForm

src/form/death/required-sections.ts

@@ -2,6 +2,7 @@ import { getSectionMapping } from '@countryconfig/utils/mapping/section/death/ma
 import { formMessageDescriptors } from '../common/messages'
 import { ISerializedFormSection } from '../types/types'
 import { getFieldMapping } from '@countryconfig/utils/mapping/field-mapping-utils'
+import { informantsSignature } from '../common/common-optional-fields'
 
 export const registrationSection = {
   id: 'registration',
@@ -171,3 +172,29 @@ export const documentsSection = {
     }
   ]
 } satisfies ISerializedFormSection
+
+export const previewSection = {
+  id: 'preview',
+  viewType: 'preview',
+  name: formMessageDescriptors.previewName,
+  title: formMessageDescriptors.previewTitle,
+  groups: [
+    {
+      id: 'preview-view-group',
+      fields: [informantsSignature]
+    }
+  ]
+} satisfies ISerializedFormSection
+
+export const reviewSection = {
+  id: 'review',
+  viewType: 'review',
+  name: formMessageDescriptors.reviewName,
+  title: formMessageDescriptors.reviewTitle,
+  groups: [
+    {
+      id: 'review-view-group',
+      fields: [informantsSignature]
+    }
+  ]
+} satisfies ISerializedFormSection

src/form/marriage/index.ts

@@ -48,7 +48,12 @@ import {
   hideIfInformantBrideOrGroom,
   brideOrGroomBirthDateValidators
 } from '../common/default-validation-conditionals'
-import { documentsSection, registrationSection } from './required-sections'
+import {
+  documentsSection,
+  previewSection,
+  registrationSection,
+  reviewSection
+} from './required-sections'
 import {
   brideNameInEnglish,
   groomNameInEnglish,
@@ -320,6 +325,8 @@ export const marriageForm: ISerializedForm = {
       ],
       mapping: getCommonSectionMapping('informant')
     },
-    documentsSection
+    documentsSection,
+    previewSection,
+    reviewSection
   ]
 }

src/form/marriage/required-sections.ts

@@ -1,7 +1,11 @@
 import { getSectionMapping } from '@countryconfig/utils/mapping/section/marriage/mapping-utils'
 import { getInformantConditionalForMarriageDocUpload } from '../common/default-validation-conditionals'
 import { formMessageDescriptors } from '../common/messages'
-import { ISelectOption, ISerializedFormSection } from '../types/types'
+import {
+  ISelectOption,
+  ISerializedFormSection,
+  SerializedFormField
+} from '../types/types'
 import { getDocUploaderForMarriage } from './required-fields'
 
 export const registrationSection = {
@@ -93,3 +97,123 @@ export const documentsSection = {
     }
   ]
 } as ISerializedFormSection
+
+/*
+ * In this reference configuration the signature
+ * fields for both the preview & review section are same
+ * but they can potentially be different e.g. it could be
+ * made such that the signatures are only required when
+ * registering a submitted declaration
+ */
+const signatureFields = [
+  {
+    name: 'brideSignature',
+    label: {
+      defaultMessage: 'Signature of Bride',
+      description: "Label for bride's signature input",
+      id: 'review.inputs.brideSignature'
+    },
+    required: true,
+    validator: [],
+    type: 'SIGNATURE',
+    mapping: {
+      mutation: {
+        operation: 'fieldValueSectionExchangeTransformer',
+        parameters: ['registration', 'brideSignature']
+      },
+      query: {
+        operation: 'fieldValueSectionExchangeTransformer',
+        parameters: ['registration', 'brideSignature']
+      }
+    }
+  },
+  {
+    name: 'groomSignature',
+    label: {
+      defaultMessage: 'Signature of groom',
+      description: "Label for groom's signature input",
+      id: 'review.inputs.groomSignature'
+    },
+    required: true,
+    validator: [],
+    type: 'SIGNATURE',
+    mapping: {
+      mutation: {
+        operation: 'fieldValueSectionExchangeTransformer',
+        parameters: ['registration', 'groomSignature']
+      },
+      query: {
+        operation: 'fieldValueSectionExchangeTransformer',
+        parameters: ['registration', 'groomSignature']
+      }
+    }
+  },
+  {
+    name: 'witnessOneSignature',
+    label: {
+      defaultMessage: 'Signature of witnessOne',
+      description: "Label for witnessOne's signature input",
+      id: 'review.inputs.witnessOneSignature'
+    },
+    required: true,
+    validator: [],
+    type: 'SIGNATURE',
+    mapping: {
+      mutation: {
+        operation: 'fieldValueSectionExchangeTransformer',
+        parameters: ['registration', 'witnessOneSignature']
+      },
+      query: {
+        operation: 'fieldValueSectionExchangeTransformer',
+        parameters: ['registration', 'witnessOneSignature']
+      }
+    }
+  },
+  {
+    name: 'witnessTwoSignature',
+    label: {
+      defaultMessage: 'Signature of witnessTwo',
+      description: "Label for witnessTwo's signature input",
+      id: 'review.inputs.witnessTwoSignature'
+    },
+    required: true,
+    validator: [],
+    type: 'SIGNATURE',
+    mapping: {
+      mutation: {
+        operation: 'fieldValueSectionExchangeTransformer',
+        parameters: ['registration', 'witnessTwoSignature']
+      },
+      query: {
+        operation: 'fieldValueSectionExchangeTransformer',
+        parameters: ['registration', 'witnessTwoSignature']
+      }
+    }
+  }
+] satisfies SerializedFormField[]
+
+export const previewSection = {
+  id: 'preview',
+  viewType: 'preview',
+  name: formMessageDescriptors.previewName,
+  title: formMessageDescriptors.previewTitle,
+  groups: [
+    {
+      id: 'preview-view-group',
+      fields: signatureFields
+    }
+  ]
+} satisfies ISerializedFormSection
+
+export const reviewSection = {
+  id: 'review',
+  viewType: 'review',
+  name: formMessageDescriptors.reviewName,
+  title: formMessageDescriptors.reviewTitle,
+  groups: [
+    {
+      id: 'review-view-group',
+      fields: signatureFields
+    }
+  ]
+} satisfies ISerializedFormSection

src/form/types/types.ts

@@ -141,6 +141,8 @@ export const TIME = 'TIME'
 export const NID_VERIFICATION_BUTTON = 'NID_VERIFICATION_BUTTON'
 export const DIVIDER = 'DIVIDER'
 export const HEADING3 = 'HEADING3'
+export const SIGNATURE = 'SIGNATURE'
+
 export enum RadioSize {
   LARGE = 'large',
   NORMAL = 'normal'
@@ -483,6 +485,12 @@ export interface IHeading3Field extends IFormFieldBase {
   type: typeof HEADING3
 }
 
+export interface ISignatureFormField extends IFormFieldBase {
+  type: typeof SIGNATURE
+  maxSizeMb?: number
+  allowedFileFormats?: ('png' | 'jpg' | 'jpeg' | 'svg')[]
+}
+
 export type IFormField =
   | ITextFormField
   | ITelFormField
@@ -515,6 +523,7 @@ export type IFormField =
   | INidVerificationButton
   | IDividerField
   | IHeading3Field
+  | ISignatureFormField
 
 export interface SelectComponentOption {
   value: string