fix: unify declare form flow

package.json

@@ -64,7 +64,7 @@
     "@hapi/boom": "^9.1.1",
     "@hapi/hapi": "^20.0.1",
     "@hapi/inert": "^6.0.3",
-    "@opencrvs/toolkit": "0.0.31-rr",
+    "@opencrvs/toolkit": "0.0.32-jr",
     "@types/chalk": "^2.2.0",
     "@types/csv2json": "^1.4.0",
     "@types/fhir": "^0.0.30",

src/form/v2/birth/forms/child.ts

@@ -11,7 +11,11 @@
 
 import { defineFormPage, TranslationConfig } from '@opencrvs/toolkit/events'
 import { field } from '@opencrvs/toolkit/conditionals'
-import { appendConditionalsToFields, createSelectOptions } from '../../utils'
+import {
+  appendConditionalsToFields,
+  createSelectOptions,
+  emptyMessage
+} from '../../utils'
 import { AddressType, getAddressFields } from '../../person/address'
 
 const GenderTypes = {
@@ -222,6 +226,11 @@ export const childPage = defineFormPage({
         id: 'event.birth.action.declare.form.section.child.field.dob.label'
       }
     },
+    {
+      id: 'child.placeOfBirth.divider.start',
+      type: 'DIVIDER',
+      label: emptyMessage
+    },
     {
       id: 'child.placeOfBirth',
       type: 'SELECT',
@@ -233,7 +242,6 @@ export const childPage = defineFormPage({
       },
       options: placeOfBirthOptions
     },
-
     {
       id: 'child.birthLocation',
       type: 'LOCATION',
@@ -278,6 +286,11 @@ export const childPage = defineFormPage({
         }
       ]
     }),
+    {
+      id: 'child.placeOfBirth.divider.end',
+      type: 'DIVIDER',
+      label: emptyMessage
+    },
     {
       id: 'child.attendantAtBirth',
       type: 'SELECT',
@@ -310,7 +323,12 @@ export const childPage = defineFormPage({
         id: 'event.birth.action.declare.form.section.child.field.weightAtBirth.label'
       },
       options: {
-        type: 'number'
+        type: 'number',
+        postfix: {
+          defaultMessage: 'Kilograms (kg)',
+          description: 'This is the postfix for the weight field',
+          id: 'event.birth.action.declare.form.section.child.field.weightAtBirth.postfix'
+        }
       }
     }
   ]

src/form/v2/birth/forms/declare.ts

@@ -10,10 +10,10 @@
  */
 
 import { defineForm } from '@opencrvs/toolkit/events'
-import { and, field } from '@opencrvs/toolkit/conditionals'
+import { and, field, or } from '@opencrvs/toolkit/conditionals'
 import { childPage } from './child'
 import { informantPage, InformantTypes } from './informant'
-import { appendConditionalsToFields } from '../../utils'
+import { appendConditionalsToFields, emptyMessage } from '../../utils'
 import { getPersonInputFields, PersonType } from '../../person'
 
 export const BIRTH_DECLARE_FORM = defineForm({
@@ -56,6 +56,7 @@ export const BIRTH_DECLARE_FORM = defineForm({
             defaultMessage: 'Birth Information',
             description: 'Label for the birth information bullet list'
           },
+          hideLabel: true,
           items: [
             {
               defaultMessage:
@@ -96,24 +97,34 @@ export const BIRTH_DECLARE_FORM = defineForm({
         id: 'form.section.mother.title'
       },
       fields: [
-        {
-          id: 'mother.detailsNotAvailable',
-          type: 'CHECKBOX',
-          required: true,
-          label: {
-            defaultMessage: "Mother's details not available",
-            description: 'This is the label for the field',
-            id: `event.birth.action.declare.form.section.mother.field.detailsNotAvailable.label`
-          },
-          conditionals: [
+        ...appendConditionalsToFields({
+          inputFields: [
+            {
+              id: 'mother.detailsNotAvailable',
+              type: 'CHECKBOX',
+              required: true,
+              label: {
+                defaultMessage: "Mother's details are not available",
+                description: 'This is the label for the field',
+                id: `event.birth.action.declare.form.section.mother.field.detailsNotAvailable.label`
+              }
+            },
+            {
+              id: 'mother.details.divider',
+              type: 'DIVIDER',
+              label: emptyMessage
+            }
+          ],
+          newConditionals: [
             {
               type: 'HIDE',
               conditional: field('informant.relation')
                 .inArray([InformantTypes.MOTHER])
                 .apply()
             }
           ]
-        },
+        }),
+
         {
           id: 'mother.reason',
           type: 'TEXT',
@@ -126,8 +137,13 @@ export const BIRTH_DECLARE_FORM = defineForm({
           conditionals: [
             {
               type: 'HIDE',
-              conditional: field('mother.detailsNotAvailable').or((field) =>
-                field.isUndefined().inArray(['false'])
+              conditional: or(
+                field('mother.detailsNotAvailable')
+                  .or((field) => field.isUndefined().inArray(['false']))
+                  .apply(),
+                field('informant.relation')
+                  .inArray([InformantTypes.MOTHER])
+                  .apply()
               )
             }
           ]
@@ -171,24 +187,33 @@ export const BIRTH_DECLARE_FORM = defineForm({
         id: 'form.section.father.title'
       },
       fields: [
-        {
-          id: 'father.detailsNotAvailable',
-          type: 'CHECKBOX',
-          required: true,
-          label: {
-            defaultMessage: "Father's details not available",
-            description: 'This is the label for the field',
-            id: `event.birth.action.declare.form.section.father.field.detailsNotAvailable.label`
-          },
-          conditionals: [
+        ...appendConditionalsToFields({
+          inputFields: [
+            {
+              id: 'father.detailsNotAvailable',
+              type: 'CHECKBOX',
+              required: true,
+              label: {
+                defaultMessage: "Father's details are not available",
+                description: 'This is the label for the field',
+                id: `event.birth.action.declare.form.section.father.field.detailsNotAvailable.label`
+              }
+            },
+            {
+              id: 'father.details.divider',
+              type: 'DIVIDER',
+              label: emptyMessage
+            }
+          ],
+          newConditionals: [
             {
               type: 'HIDE',
               conditional: field('informant.relation')
                 .inArray([InformantTypes.FATHER])
                 .apply()
             }
           ]
-        },
+        }),
         {
           id: 'father.reason',
           type: 'TEXT',
@@ -201,9 +226,14 @@ export const BIRTH_DECLARE_FORM = defineForm({
           conditionals: [
             {
               type: 'HIDE',
-              conditional: field('father.detailsNotAvailable')
-                .or((field) => field.isUndefined().inArray(['false']))
-                .apply()
+              conditional: or(
+                field('father.detailsNotAvailable')
+                  .or((field) => field.isUndefined().inArray(['false']))
+                  .apply(),
+                field('informant.relation')
+                  .inArray([InformantTypes.FATHER])
+                  .apply()
+              )
             }
           ]
         },

src/form/v2/birth/forms/informant.ts

@@ -11,7 +11,11 @@
 
 import { defineFormPage, TranslationConfig } from '@opencrvs/toolkit/events'
 import { field } from '@opencrvs/toolkit/conditionals'
-import { appendConditionalsToFields, createSelectOptions } from '../../utils'
+import {
+  appendConditionalsToFields,
+  createSelectOptions,
+  emptyMessage
+} from '../../utils'
 import { getPersonInputCommonFields, PersonType } from '../../person'
 import { getAddressFields } from '../../person/address'
 
@@ -116,7 +120,13 @@ export const informantPage = defineFormPage({
     ...appendConditionalsToFields({
       inputFields: [
         ...getPersonInputCommonFields(PersonType.informant),
-        ...getAddressFields(PersonType.informant)
+        ...getAddressFields(PersonType.informant),
+
+        {
+          id: 'informant.address.divider.end',
+          type: 'DIVIDER',
+          label: emptyMessage
+        }
       ],
       newConditionals: [
         {
@@ -125,7 +135,7 @@ export const informantPage = defineFormPage({
             .or((field) =>
               field
                 .isUndefined()
-                .not.inArray([InformantTypes.MOTHER, InformantTypes.FATHER])
+                .inArray([InformantTypes.MOTHER, InformantTypes.FATHER])
             )
             .apply()
         }

src/form/v2/person/address.ts

@@ -143,13 +143,13 @@ export const getAddressFields = (person: AddressType): FieldConfig[] => {
       }
     },
     {
-      id: `${prefix}.village`,
+      id: `${prefix}.street`,
       type: 'TEXT',
       required: false,
       label: {
-        defaultMessage: 'Area / Ward / Mouja / Village',
+        defaultMessage: 'Street',
         description: 'This is the label for the field',
-        id: `event.action.declare.form.section.person.field.address.village.label`
+        id: `event.action.declare.form.section.person.field.address.street.label`
       }
     },
     {
@@ -214,15 +214,16 @@ export const getAddressFields = (person: AddressType): FieldConfig[] => {
         defaultMessage: 'Urban or Rural',
         description: 'This is the label for the field',
         id: `event.birth.action.declare.form.section.${person}.field.address.urbanOrRural.label`
-      }
+      },
+      hideLabel: true
     },
     ...appendConditionalsToFields({
       inputFields: urbanAddressFields,
       newConditionals: [
         {
           type: 'HIDE',
           conditional: field(`${prefix}.urbanOrRural`)
-            .or((field) => field.isUndefined().not.inArray(['RURAL']))
+            .or((field) => field.isUndefined().inArray(['RURAL']))
             .apply()
         }
       ]
@@ -240,7 +241,7 @@ export const getAddressFields = (person: AddressType): FieldConfig[] => {
         {
           type: 'HIDE',
           conditional: field(`${prefix}.urbanOrRural`)
-            .or((field) => field.isUndefined().inArray(['RURAL']))
+            .or((field) => field.isUndefined().not.inArray(['RURAL']))
             .apply()
         }
       ]

src/form/v2/person/index.ts

@@ -12,7 +12,11 @@
 import { FieldConfig, TranslationConfig } from '@opencrvs/toolkit/events'
 import { field } from '@opencrvs/toolkit/conditionals'
 import { getAddressFields } from './address'
-import { appendConditionalsToFields, createSelectOptions } from '../utils'
+import {
+  appendConditionalsToFields,
+  createSelectOptions,
+  emptyMessage
+} from '../utils'
 
 export const PersonType = {
   father: 'father',
@@ -297,6 +301,13 @@ export const getPersonInputCommonFields = (
       description: 'This is the label for the field',
       id: `event.birth.action.declare.form.section.${person}.field.age.label`
     },
+    options: {
+      postfix: {
+        defaultMessage: 'years',
+        description: 'This is the postfix for age field',
+        id: `event.birth.action.declare.form.section.${person}.field.age.postfix`
+      }
+    },
     conditionals: [
       {
         type: 'HIDE',
@@ -317,6 +328,11 @@ export const getPersonInputCommonFields = (
     }
   },
   ...getIdFields(person),
+  {
+    id: `${person}.address.divider.start`,
+    type: 'DIVIDER',
+    label: emptyMessage
+  },
   {
     id: `${person}.addressHelper`,
     type: 'PARAGRAPH',
@@ -325,23 +341,13 @@ export const getPersonInputCommonFields = (
       description: 'This is the label for the field',
       id: `event.birth.action.declare.form.section.${person}.field.addressHelper.label`
     },
-    options: { fontVariant: 'h2' }
+    options: { fontVariant: 'h3' }
   }
 ]
 
 const fatherAddressFields = [
   ...appendConditionalsToFields({
     inputFields: [
-      {
-        id: `${PersonType.father}.addressSameAsHelper`,
-        type: 'PARAGRAPH',
-        label: {
-          defaultMessage: "Same as mother's usual place of residence?",
-          description: 'This is the label for the field',
-          id: `event.birth.action.declare.form.section.${PersonType.father}.field.addressSameAsHelper.label`
-        },
-        options: { fontVariant: 'reg16' }
-      },
       {
         id: `${PersonType.father}.addressSameAs`,
         type: 'RADIO_GROUP',
@@ -381,6 +387,11 @@ export const getPersonInputFields = (person: PersonType): FieldConfig[] => {
   return [
     ...getPersonInputCommonFields(person),
     ...(isFather ? fatherAddressFields : getAddressFields(person)),
+    {
+      id: `${person}.address.divider.end`,
+      type: 'DIVIDER',
+      label: emptyMessage
+    },
     {
       id: `${person}.maritalStatus`,
       type: 'SELECT',

src/form/v2/utils.ts

@@ -39,3 +39,9 @@ export const createSelectOptions = <
     value,
     label: messageDescriptors[key as keyof T]
   }))
+
+export const emptyMessage = {
+  defaultMessage: '',
+  description: 'empty string',
+  id: 'messages.emptyString'
+}