Merge pull request #10944 from opencrvs/ocrvs-10875

fix: ommit fields from hidden pages early on

Author: jamil314

packages/client/src/v2-events/features/events/actions/declare/Pages.interaction.stories.tsx

@@ -17,6 +17,7 @@ import {
   ActionStatus,
   ActionType,
   Draft,
+  generateEventDocument,
   generateWorkqueues,
   getCurrentEventState,
   tennisClubMembershipEvent,
@@ -437,7 +438,10 @@ export const CanSubmitValidlyFilledForm: Story = {
       'Verify that register button is enabled and that no validation errors are shown',
       async () => {
         await expect(canvas.queryByText('Required')).not.toBeInTheDocument()
-        await expect(await canvas.findByText('Register')).toBeEnabled()
+        const registerButton = await canvas.findByText('Register')
+        await expect(registerButton).toBeEnabled()
+        await userEvent.click(registerButton)
+        await userEvent.click(await canvas.findByTestId('confirm_Declare'))
       }
     )
   },
@@ -454,6 +458,64 @@ export const CanSubmitValidlyFilledForm: Story = {
         event: [
           tRPCMsw.event.get.query(() => {
             return undeclaredDraftEvent
+          }),
+          tRPCMsw.event.actions.declare.request.mutation(async (payload) => {
+            await expect(payload.declaration).not.toHaveProperty(
+              'recommender.name'
+            )
+            return generateEventDocument({
+              configuration: tennisClubMembershipEvent,
+              actions: [
+                { type: ActionType.CREATE },
+                { type: ActionType.DECLARE }
+              ]
+            })
+          }),
+          tRPCMsw.event.actions.validate.request.mutation(async (payload) => {
+            await expect(payload.declaration).not.toHaveProperty(
+              'recommender.name'
+            )
+            return generateEventDocument({
+              configuration: tennisClubMembershipEvent,
+              actions: [
+                { type: ActionType.CREATE },
+                { type: ActionType.DECLARE },
+                { type: ActionType.VALIDATE }
+              ]
+            })
+          }),
+          tRPCMsw.event.actions.register.request.mutation(async (payload) => {
+            await expect(payload.declaration).not.toHaveProperty(
+              'recommender.name'
+            )
+            return generateEventDocument({
+              configuration: tennisClubMembershipEvent,
+              actions: [
+                { type: ActionType.CREATE },
+                { type: ActionType.DECLARE },
+                { type: ActionType.VALIDATE },
+                { type: ActionType.REGISTER }
+              ]
+            })
+          }),
+          tRPCMsw.event.search.query((input) => {
+            return {
+              results: [
+                getCurrentEventState(
+                  generateEventDocument({
+                    configuration: tennisClubMembershipEvent,
+                    actions: [
+                      { type: ActionType.CREATE },
+                      { type: ActionType.DECLARE },
+                      { type: ActionType.VALIDATE },
+                      { type: ActionType.REGISTER }
+                    ]
+                  }),
+                  tennisClubMembershipEvent
+                )
+              ],
+              total: 1
+            }
           })
         ]
       }

packages/commons/src/events/test.utils.ts

@@ -254,7 +254,7 @@ function mapFieldTypeToMockValue(
   }
 }
 
-function fieldConfigsToActionPayload(
+export function fieldConfigsToActionPayload(
   fields: FieldConfig[],
   rng: () => number
 ): EventState {

packages/commons/src/events/utils.test.ts

@@ -10,15 +10,23 @@
  */
 
 import { UUID } from '../uuid'
-import { cloneDeep } from 'lodash'
+import { cloneDeep, difference } from 'lodash'
 import { Action } from './ActionDocument'
 import { ActionType } from './ActionType'
 import {
   findLastAssignmentAction,
+  getDeclaration,
+  getDeclarationFields,
   getMixedPath,
-  getPendingAction
+  getPendingAction,
+  omitHiddenPaginatedFields
 } from './utils'
 import { TokenUserType } from '../authentication'
+import {
+  createPrng,
+  fieldConfigsToActionPayload,
+  tennisClubMembershipEvent
+} from '../client'
 
 const commonAction = {
   status: 'Requested' as const,
@@ -517,3 +525,34 @@ describe('getPendingAction', () => {
     )
   })
 })
+
+describe('omitHiddenPaginatedFields', () => {
+  it('removes fields that are hidden by field conditionals when page conditional is true', () => {
+    const rng = createPrng(101)
+
+    const fields = getDeclarationFields(tennisClubMembershipEvent)
+
+    const declarationConfig = getDeclaration(tennisClubMembershipEvent)
+
+    const declaration = fieldConfigsToActionPayload(fields, rng)
+    const declarationWithoutHiddenFields = omitHiddenPaginatedFields(
+      declarationConfig,
+      declaration,
+      {}
+    )
+
+    const missingKeys = difference(
+      Object.keys(declaration),
+      Object.keys(declarationWithoutHiddenFields)
+    )
+
+    expect(missingKeys).toEqual([
+      'applicant.dob', // dobUnknown is true
+      'applicant.isRecommendedByFieldAgent', // user is not field agent
+      'senior-pass.id', // dob is not before the threshhold
+      'senior-pass.recommender', // dob is not before threshhold
+      'recommender.name', // recommender.none is true
+      'recommender.id' // recommender.none is true
+    ])
+  })
+})

packages/commons/src/events/utils.ts

@@ -54,7 +54,6 @@ import { getOrThrow } from '../utils'
 import { TokenUserType } from '../authentication'
 import { DateValue, SelectDateRangeValue } from './FieldValue'
 import { subDays, subYears, format } from 'date-fns'
-import { ConditionalType } from './Conditional'
 
 export function ageToDate(age: number, asOfDate: DateValue) {
   const date = new Date(asOfDate)
@@ -222,24 +221,23 @@ export function omitHiddenPaginatedFields(
   values: EventState,
   validatorContext: ValidatorContext
 ) {
-  // If a page has a conditional, we set it as one of the field's conditionals with ConditionalType.SHOW
-  const fields = formConfig.pages.flatMap((p) =>
-    p.fields.map((f) => {
-      if (!p.conditional) {
-        return f
-      }
+  const visibleFields = formConfig.pages
+    .filter((p) => isPageVisible(p, values, validatorContext))
+    .flatMap((p) => p.fields)
 
-      return {
-        ...f,
-        conditionals: [
-          ...(f.conditionals ?? []),
-          { type: ConditionalType.SHOW, conditional: p.conditional }
-        ]
-      }
-    })
-  )
+  const hiddenFields = formConfig.pages
+    .filter((p) => !isPageVisible(p, values, validatorContext))
+    .flatMap((p) => p.fields)
 
-  return omitHiddenFields(fields, values, validatorContext)
+  const valuesExceptHiddenPage = omitBy(values, (_, fieldId) => {
+    return hiddenFields.some((f) => f.id === fieldId)
+  })
+
+  return omitHiddenFields(
+    visibleFields,
+    valuesExceptHiddenPage,
+    validatorContext
+  )
 }
 
 /**

packages/commons/src/fixtures/forms.ts

@@ -1224,7 +1224,8 @@ export const TENNIS_CLUB_DECLARATION_FORM = defineDeclarationForm({
             id: 'event.tennis-club-membership.action.declare.form.section.recommender.field.id.label'
           }
         }
-      ]
+      ],
+      conditional: not(never()) // Intentional always-true page conditional to exercise interactions between page-level and field-level conditionals in tests
     }
   ]
 })