fix: unify declare form flow (#8491)

* fix: titles in v2 event pages * feat: add postfix and prefix option for text input field * fix: labels for v2 inputs * feat: add dividers * upgrade toolkit
opencrvs · Jan 28, 2025 · e539616 · e539616
1 parent 1658a6f
commit e539616
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 56 deletions.
diff --git a/packages/client/src/v2-events/components/forms/FormFieldGenerator.tsx b/packages/client/src/v2-events/components/forms/FormFieldGenerator.tsx
@@ -63,6 +63,7 @@ import { Select } from '@client/v2-events/features/events/registered-fields/Sele
 import { SelectCountry } from '@client/v2-events/features/events/registered-fields/SelectCountry'
 import { SubHeader } from '@opencrvs/components'
 import { formatISO } from 'date-fns'
+import { Divider } from '@opencrvs/components'
 
 const fadeIn = keyframes`
   from { opacity: 0; }
@@ -117,7 +118,9 @@ const GeneratedInputField = React.memo(
 
     const inputFieldProps = {
       id: fieldDefinition.id,
-      label: intl.formatMessage(fieldDefinition.label),
+      label: fieldDefinition.hideLabel
+        ? undefined
+        : intl.formatMessage(fieldDefinition.label),
       // helperText: fieldDefinition.helperText,
       // tooltip: fieldDefinition.tooltip,
       // description: fieldDefinition.description,
@@ -189,7 +192,17 @@ const GeneratedInputField = React.memo(
 
     if (fieldDefinition.type === TEXT) {
       return (
-        <InputField {...inputFieldProps}>
+        <InputField
+          {...inputFieldProps}
+          prefix={
+            fieldDefinition.options?.prefix &&
+            intl.formatMessage(fieldDefinition.options?.prefix)
+          }
+          postfix={
+            fieldDefinition.options?.postfix &&
+            intl.formatMessage(fieldDefinition.options?.postfix)
+          }
+        >
           <TextInput
             type={fieldDefinition.options?.type ?? 'text'}
             {...inputProps}
@@ -213,24 +226,32 @@ const GeneratedInputField = React.memo(
       )
     }
     if (fieldDefinition.type === 'BULLET_LIST') {
-      return <BulletList {...fieldDefinition} />
+      return (
+        <InputField {...inputFieldProps}>
+          <BulletList {...fieldDefinition} />
+        </InputField>
+      )
     }
     if (fieldDefinition.type === 'SELECT') {
       return (
-        <Select
-          {...fieldDefinition}
-          value={inputProps.value as SelectFieldValue}
-          onChange={(val: string) => setFieldValue(fieldDefinition.id, val)}
-        />
+        <InputField {...inputFieldProps}>
+          <Select
+            {...fieldDefinition}
+            value={inputProps.value as SelectFieldValue}
+            onChange={(val: string) => setFieldValue(fieldDefinition.id, val)}
+          />
+        </InputField>
       )
     }
     if (fieldDefinition.type === 'COUNTRY') {
       return (
-        <SelectCountry
-          {...fieldDefinition}
-          value={inputProps.value as SelectFieldValue}
-          setFieldValue={setFieldValue}
-        />
+        <InputField {...inputFieldProps}>
+          <SelectCountry
+            {...fieldDefinition}
+            value={inputProps.value as SelectFieldValue}
+            setFieldValue={setFieldValue}
+          />
+        </InputField>
       )
     }
     if (fieldDefinition.type === 'CHECKBOX') {
@@ -244,37 +265,46 @@ const GeneratedInputField = React.memo(
     }
     if (fieldDefinition.type === 'RADIO_GROUP') {
       return (
-        <RadioGroup
-          {...fieldDefinition}
-          value={value as RadioGroupFieldValue}
-          setFieldValue={setFieldValue}
-        />
+        <InputField {...inputFieldProps}>
+          <RadioGroup
+            {...fieldDefinition}
+            value={value as RadioGroupFieldValue}
+            setFieldValue={setFieldValue}
+          />
+        </InputField>
       )
     }
     if (fieldDefinition.type === 'LOCATION') {
       if (fieldDefinition.options.type === 'HEALTH_FACILITY')
         return (
-          <LocationSearch
+          <InputField {...inputFieldProps}>
+            <LocationSearch
+              {...fieldDefinition}
+              value={value as LocationFieldValue}
+              setFieldValue={setFieldValue}
+            />
+          </InputField>
+        )
+      return (
+        <InputField {...inputFieldProps}>
+          <Location
             {...fieldDefinition}
             value={value as LocationFieldValue}
             setFieldValue={setFieldValue}
+            partOf={
+              (fieldDefinition.options?.partOf?.$data &&
+                (makeFormikFieldIdsOpenCRVSCompatible(formData)[
+                  fieldDefinition.options?.partOf.$data
+                ] as string | undefined | null)) ??
+              null
+            }
           />
-        )
-      return (
-        <Location
-          {...fieldDefinition}
-          value={value as LocationFieldValue}
-          setFieldValue={setFieldValue}
-          partOf={
-            (fieldDefinition.options?.partOf?.$data &&
-              (makeFormikFieldIdsOpenCRVSCompatible(formData)[
-                fieldDefinition.options?.partOf.$data
-              ] as string | undefined | null)) ??
-            null
-          }
-        />
+        </InputField>
       )
     }
+    if (fieldDefinition.type === 'DIVIDER') {
+      return <Divider />
+    }
     throw new Error(`Unsupported field ${fieldDefinition}`)
   }
 )

diff --git a/packages/client/src/v2-events/components/forms/utils.ts b/packages/client/src/v2-events/components/forms/utils.ts
@@ -124,7 +124,8 @@ const initialValueMapping: Record<FieldType, FieldValue | null> = {
   [FieldType.COUNTRY]: null,
   [FieldType.LOCATION]: null,
   [FieldType.SELECT]: null,
-  [FieldType.PAGE_HEADER]: null
+  [FieldType.PAGE_HEADER]: null,
+  [FieldType.DIVIDER]: null
 }
 
 export function getInitialValues(fields: FieldConfig[]) {

diff --git a/packages/client/src/v2-events/features/events/registered-fields/Select.tsx b/packages/client/src/v2-events/features/events/registered-fields/Select.tsx
@@ -16,7 +16,6 @@ import {
   SelectOption
 } from '@opencrvs/commons/client'
 import { Select as SelectComponent } from '@opencrvs/components'
-import { InputField } from '@client/components/form/InputField'
 
 export function Select({
   onChange,
@@ -36,14 +35,11 @@ export function Select({
   }))
 
   return (
-    <InputField {...props} label={intl.formatMessage(label)} touched={false}>
-      <SelectComponent
-        label={intl.formatMessage(label)}
-        options={formattedOptions}
-        value={value ?? ''}
-        onChange={onChange}
-      />
-    </InputField>
+    <SelectComponent
+      options={formattedOptions}
+      value={value ?? ''}
+      onChange={onChange}
+    />
   )
 }
 

diff --git a/packages/client/src/v2-events/layouts/form/FormHeader.tsx b/packages/client/src/v2-events/layouts/form/FormHeader.tsx
@@ -112,9 +112,7 @@ export function FormHeader({
           {modal}
         </>
       }
-      desktopTitle={intl.formatMessage(messages.newVitalEventRegistration, {
-        event: intl.formatMessage(label)
-      })}
+      desktopTitle={intl.formatMessage(label)}
       mobileLeft={<DeclarationIcon color={getDeclarationIconColor()} />}
       mobileRight={
         <>
@@ -147,9 +145,7 @@ export function FormHeader({
           {modal}
         </>
       }
-      mobileTitle={intl.formatMessage(messages.newVitalEventRegistration, {
-        event: intl.formatMessage(label)
-      })}
+      mobileTitle={intl.formatMessage(label)}
     />
   )
 }
diff --git a/packages/commons/src/events/FieldConfig.ts b/packages/commons/src/events/FieldConfig.ts
@@ -82,7 +82,8 @@ const BaseField = z.object({
     .default([])
     .optional(),
   dependsOn: z.array(FieldId).default([]).optional(),
-  label: TranslationConfig
+  label: TranslationConfig,
+  hideLabel: z.boolean().default(false).optional()
 })
 
 export type BaseField = z.infer<typeof BaseField>
@@ -99,7 +100,8 @@ export const FieldType = {
   CHECKBOX: 'CHECKBOX',
   SELECT: 'SELECT',
   COUNTRY: 'COUNTRY',
-  LOCATION: 'LOCATION'
+  LOCATION: 'LOCATION',
+  DIVIDER: 'DIVIDER'
 } as const
 
 export const fieldTypes = Object.values(FieldType)
@@ -119,12 +121,18 @@ export interface FieldValueByType {
   [FieldType.SELECT]: SelectFieldValue
 }
 
+const Divider = BaseField.extend({
+  type: z.literal(FieldType.DIVIDER)
+})
+
 const TextField = BaseField.extend({
   type: z.literal(FieldType.TEXT),
   options: z
     .object({
       maxLength: z.number().optional().describe('Maximum length of the text'),
-      type: z.enum(['text', 'email', 'password', 'number']).optional()
+      type: z.enum(['text', 'email', 'password', 'number']).optional(),
+      prefix: TranslationConfig.optional(),
+      postfix: TranslationConfig.optional()
     })
     .default({ type: 'text' })
     .optional()
@@ -239,6 +247,7 @@ export type AllFields =
   | typeof File
   | typeof Country
   | typeof Location
+  | typeof Divider
 
 export const FieldConfig = z.discriminatedUnion('type', [
   TextField,
@@ -251,7 +260,8 @@ export const FieldConfig = z.discriminatedUnion('type', [
   Checkbox,
   File,
   Country,
-  Location
+  Location,
+  Divider
 ]) as unknown as z.ZodDiscriminatedUnion<'type', AllFields[]>
 
 export type SelectField = z.infer<typeof Select>

diff --git a/packages/components/src/FormWizard/FormWizard.tsx b/packages/components/src/FormWizard/FormWizard.tsx
@@ -52,7 +52,7 @@ export const FormWizard = ({
         )}
       </Frame.SectionFormBackAction>
       <Frame.Section>
-        <Content title={pageTitle}>
+        <Content title={pageTitle} showTitleOnMobile={true}>
           <Stack direction="column" gap={16} alignItems="stretch">
             {children}
 

diff --git a/packages/events/src/service/indexing/indexing.ts b/packages/events/src/service/indexing/indexing.ts
@@ -91,8 +91,8 @@ function getElasticsearchMappingForType(field: FieldConfig) {
       return { type: 'text' }
     case 'TEXT':
     case 'PARAGRAPH':
-    case 'PAGE_HEADER':
     case 'BULLET_LIST':
+    case 'PAGE_HEADER':
       return { type: 'text' }
     case 'RADIO_GROUP':
     case 'SELECT':
@@ -109,6 +109,8 @@ function getElasticsearchMappingForType(field: FieldConfig) {
           type: { type: 'keyword' }
         }
       }
+    case 'DIVIDER':
+      return {}
 
     default:
       assertNever()

diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencrvs/toolkit",
-  "version": "0.0.31-rr",
+  "version": "0.0.32-jr",
   "description": "OpenCRVS toolkit for building country configurations",
   "license": "MPL-2.0",
   "exports": {