Merge pull request #8065 from opencrvs/auto-pr-release-v1.6.1-8044-22311

🍒 Merge changes from PR #8044 to release-v1.6.1
opencrvs · Nov 26, 2024 · 2cf2a65 · 2cf2a65
2 parents bb09b70 + 718e6a9
commit 2cf2a65
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 - Maximum upload file size limit is now based on the size of the uploaded files after compression and not before. [#7840](https://github.com/opencrvs/opencrvs-core/issues/7840)
 
+### New features
+
+- Add an optional configurable field in section `canContinue` which takes an expression. Falsy value of this expression will disable the continue button in forms. This can be used to work with fetch field which has a loading state and prevent the user to get past the section while the request is still in progress.
+
 ## 1.6.0
 
 ## Improvements

diff --git a/packages/client/src/forms/index.ts b/packages/client/src/forms/index.ts
@@ -1002,6 +1002,14 @@ export interface IFormSection {
   optional?: boolean
   notice?: MessageDescriptor
   mapping?: IFormSectionMapping
+  /**
+   * used for disabling continue button conditionally on a loading value
+   * of a FETCH field
+   * example: canContinue: '!$form.fetch?.loading'
+   * above example blocks user when fetch is on loading state, preventing implications
+   * caused by the unresolved pending requests
+   */
+  canContinue?: string
 }
 
 export type ISerializedFormSectionGroup = Omit<IFormSectionGroup, 'fields'> & {

diff --git a/packages/client/src/views/RegisterForm/RegisterForm.tsx b/packages/client/src/views/RegisterForm/RegisterForm.tsx
@@ -81,7 +81,8 @@ import {
   getSectionFields,
   getNextSectionIds,
   VIEW_TYPE,
-  handleInitialValue
+  handleInitialValue,
+  evalExpressionInFieldDefinition
 } from '@client/forms/utils'
 import { messages } from '@client/i18n/messages/views/register'
 import { duplicateMessages } from '@client/i18n/messages/views/duplicates'
@@ -996,7 +997,8 @@ class RegisterFormView extends React.Component<FullProps, State> {
       activeSection,
       activeSectionGroup,
       reviewSummaryHeader,
-      userDetails
+      userDetails,
+      config
     } = this.props
 
     const nextSectionGroup = getNextSectionIds(
@@ -1012,6 +1014,17 @@ class RegisterFormView extends React.Component<FullProps, State> {
     const isDocumentUploadPage = this.props.match.params.pageId === 'documents'
     const introSection =
       findFirstVisibleSection(registerForm.sections).id === activeSection.id
+    const canContinue =
+      'canContinue' in activeSection
+        ? evalExpressionInFieldDefinition(
+            activeSection.canContinue!,
+            declaration.data[activeSection.id],
+            config,
+            declaration.data,
+            userDetails
+          )
+        : true
+
     return (
       <>
         <TimeMounted
@@ -1131,7 +1144,9 @@ class RegisterFormView extends React.Component<FullProps, State> {
                                     declaration.event.toLowerCase()
                                   )
                                 }}
-                                disabled={this.state.isFileUploading}
+                                disabled={
+                                  !canContinue || this.state.isFileUploading
+                                }
                               >
                                 {intl.formatMessage(
                                   buttonMessages.continueButton