fix: fetch custom validators before deserializing

CHANGELOG.md

@@ -35,6 +35,10 @@
 
 - Internally we were storing the `family` name field as a required property which was limiting what how you could capture the name of a person in the forms. Now we are storing it as an optional property which would make more flexible.
 
+## Bug fixes
+
+- Custom form field validators from country config will work offline. [#7478](https://github.com/opencrvs/opencrvs-core/issues/7478)
+
 ### Breaking changes
 
 - **Gateways searchEvents API updated** `operationHistories` only returns `operationType` & `operatedOn` due to the other fields being unused in OpenCRVS

packages/client/src/declarations/submissionMiddleware.test.ts

@@ -12,8 +12,8 @@ import { ApolloError } from '@apollo/client'
 import { SubmissionAction } from '@client/forms'
 import {
   ACTION_STATUS_MAP,
-  createTestStore,
-  mockDeclarationData
+  mockDeclarationData,
+  mockOfflineDataDispatch
 } from '@client/tests/util'
 import { createClient } from '@client/utils/apolloClient'
 import { Event } from '@client/utils/gateway'
@@ -24,6 +24,8 @@ import {
   declarationReadyForStatusChange,
   submissionMiddleware
 } from './submissionMiddleware'
+import { createStore } from '@client/store'
+import { offlineDataReady } from '@client/offline/actions'
 
 describe('Submission middleware', () => {
   const dispatch = vi.fn()
@@ -37,7 +39,8 @@ describe('Submission middleware', () => {
   })(next)
 
   beforeEach(async () => {
-    const { store } = await createTestStore()
+    const { store } = createStore()
+    store.dispatch(offlineDataReady(mockOfflineDataDispatch))
     const client = createClient(store)
     getState.mockImplementation(() => store.getState())
     mutateSpy = vi

packages/client/src/forms/register/reducer.ts

@@ -8,11 +8,11 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
-import { LoopReducer, Loop } from 'redux-loop'
+import { LoopReducer, Loop, Cmd, loop } from 'redux-loop'
 import { IForm } from '@client/forms'
 import * as offlineActions from '@client/offline/actions'
 import { deserializeForm } from '@client/forms/deserializer/deserializer'
-import { validators } from '@client/forms/validators'
+import { initValidators, validators } from '@client/forms/validators'
 
 export type IRegisterFormState =
   | {
@@ -46,6 +46,19 @@ export const registerFormReducer: LoopReducer<IRegisterFormState, Action> = (
   switch (action.type) {
     case offlineActions.READY:
     case offlineActions.FORMS_LOADED:
+      return loop(
+        state,
+        Cmd.run(
+          async () => {
+            await initValidators()
+            return action.payload
+          },
+          {
+            successActionCreator: offlineActions.CustomValidatorsSuccess
+          }
+        )
+      )
+    case offlineActions.CUSTOM_VALIDATORS_LOADED:
       const { forms } = action.payload
 
       const birth = deserializeForm(forms.birth, validators)

packages/client/src/forms/register/reviewReducer.ts

@@ -8,11 +8,11 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
-import { LoopReducer, Loop } from 'redux-loop'
+import { LoopReducer, Loop, loop, Cmd } from 'redux-loop'
 import { IForm } from '@client/forms'
 import * as offlineActions from '@client/offline/actions'
 import { deserializeForm } from '@client/forms/deserializer/deserializer'
-import { validators } from '@client/forms/validators'
+import { initValidators, validators } from '@client/forms/validators'
 
 export type IReviewFormState =
   | {
@@ -46,6 +46,19 @@ export const reviewReducer: LoopReducer<IReviewFormState, Action> = (
   switch (action.type) {
     case offlineActions.READY:
     case offlineActions.FORMS_LOADED:
+      return loop(
+        state,
+        Cmd.run(
+          async () => {
+            await initValidators()
+            return action.payload
+          },
+          {
+            successActionCreator: offlineActions.CustomValidatorsSuccess
+          }
+        )
+      )
+    case offlineActions.CUSTOM_VALIDATORS_LOADED:
       const { forms } = action.payload
 
       const birth = deserializeForm(forms.birth, validators)

packages/client/src/offline/actions.ts

@@ -68,6 +68,12 @@ export type FormsLoadedAction = {
   payload: LoadFormsResponse
 }
 
+export const CUSTOM_VALIDATORS_LOADED = 'OFFLINE/CUSTOM_VALIDATORS_LOADED'
+export type CustomValidatorsLoadedLoadedAction = {
+  type: typeof CUSTOM_VALIDATORS_LOADED
+  payload: LoadFormsResponse
+}
+
 export const FORMS_FAILED = 'OFFLINE/FORMS_FAILED'
 export type FormsFailedAction = {
   type: typeof FORMS_FAILED
@@ -188,6 +194,14 @@ export const formsLoaded = (payload: LoadFormsResponse): FormsLoadedAction => ({
   payload: payload
 })
 
+export const CustomValidatorsSuccess = (
+  forms: LoadFormsResponse
+): CustomValidatorsLoadedLoadedAction => {
+  return {
+    type: CUSTOM_VALIDATORS_LOADED,
+    payload: forms
+  }
+}
 export const formsFailed = (error: Error): FormsFailedAction => ({
   type: FORMS_FAILED,
   payload: error
@@ -333,6 +347,7 @@ export type Action =
   | LocationsLoadedAction
   | FormsFailedAction
   | FormsLoadedAction
+  | CustomValidatorsLoadedLoadedAction
   | SetOfflineData
   | IGetOfflineDataSuccessAction
   | IGetOfflineDataFailedAction

packages/client/src/tests/util.tsx

@@ -848,7 +848,8 @@ export const mockOfflineDataDispatch = {
 
 export async function createTestStore() {
   const { store, history } = createStore()
-  await store.dispatch(offlineDataReady(mockOfflineDataDispatch))
+  store.dispatch(offlineDataReady(mockOfflineDataDispatch))
+  await flushPromises() // This is to resolve the `referenceApi.importValidators()` promise
   return { store, history }
 }
 
@@ -867,7 +868,8 @@ export async function createTestComponent(
   },
   options?: MountRendererProps
 ) {
-  await store.dispatch(offlineDataReady(mockOfflineDataDispatch))
+  store.dispatch(offlineDataReady(mockOfflineDataDispatch))
+  await flushPromises() // This is to resolve the `referenceApi.importValidators()` promise
 
   const withGraphQL = (node: JSX.Element) => {
     if (apolloClient) {

packages/client/src/views/CorrectionForm/CorrectionSummary.test.tsx

@@ -170,8 +170,9 @@ const { store, history } = createStore()
 describe('Correction summary', () => {
   describe('for a birth declaration', () => {
     beforeEach(async () => {
-      store.dispatch(storeDeclaration(birthDeclaration))
       store.dispatch(getOfflineDataSuccess(JSON.stringify(mockOfflineData)))
+      await flushPromises()
+      store.dispatch(storeDeclaration(birthDeclaration))
       const form = await getRegisterFormFromStore(store, Event.Birth)
       wrapper = await createTestComponent(
         <CorrectionForm

packages/client/src/views/PrintCertificate/ReviewCertificateAction.test.tsx

@@ -63,14 +63,15 @@ describe('when user wants to review death certificate', () => {
 
     loginAsFieldAgent(store)
 
-    // @ts-ignore
-    store.dispatch(storeDeclaration(deathDeclaration))
-
     const component = await createTestComponent(<ReviewCertificate />, {
       store,
       history
     })
 
+    // @ts-ignore
+    store.dispatch(storeDeclaration(deathDeclaration))
+    component.update()
+
     const confirmBtn = component.find('#confirm-print')
     const confirmBtnExist = !!confirmBtn.hostNodes().length
     expect(confirmBtnExist).toBe(true)