@kenyaemr/esm-patient-registration-app 6.0.2 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "6.0.2",
+  "version": "7.0.0",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",
@@ -18,7 +18,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts'"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

package/src/config-schema.ts

@@ -19,6 +19,11 @@ export interface FieldDefinition {
   };
   answerConceptSetUuid?: string;
   customConceptAnswers?: Array<CustomConceptAnswer>;
+  showWhenExpression?: {
+    field: string;
+    value: string;
+  };
+  renderType?: string;
 }
 export interface CustomConceptAnswer {
   uuid: string;

package/src/patient-registration/field/custom-field.component.tsx

@@ -4,6 +4,7 @@ import { type RegistrationConfig } from '../../config-schema';
 import { AddressField } from './address/custom-address-field.component';
 import { ObsField } from './obs/obs-field.component';
 import { PersonAttributeField } from './person-attributes/person-attribute-field.component';
+import { useField } from 'formik';
 
 export interface CustomFieldProps {
   name: string;
@@ -13,6 +14,11 @@ export function CustomField({ name }: CustomFieldProps) {
   const config = useConfig() as RegistrationConfig;
   const fieldDefinition = config.fieldDefinitions.filter((def) => def.id == name)[0];
 
+  const [{ value }] = useField(`attributes.${fieldDefinition.showWhenExpression?.field}`);
+  if (fieldDefinition.showWhenExpression && value !== fieldDefinition.showWhenExpression.value) {
+    return null;
+  }
+
   if (fieldDefinition.type === 'person attribute') {
     return <PersonAttributeField fieldDefinition={fieldDefinition} />;
   } else if (fieldDefinition.type === 'obs') {

package/src/patient-registration/field/dob/dob.component.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
 import { generateFormatting } from '../../date-util';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { useConfig } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { type RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
 
@@ -46,8 +46,8 @@ export const DobField: React.FC = () => {
   );
 
   const onDateChange = useCallback(
-    (birthdate: Date[]) => {
-      setFieldValue('birthdate', birthdate[0]);
+    (birthdate: Date) => {
+      setFieldValue('birthdate', birthdate);
     },
     [setFieldValue],
   );
@@ -101,17 +101,20 @@ export const DobField: React.FC = () => {
       <Layer>
         {!dobUnknown ? (
           <div className={styles.dobField}>
-            <DatePicker dateFormat={dateFormat} datePickerType="single" onChange={onDateChange} maxDate={format(today)}>
-              <DatePickerInput
-                id="birthdate"
-                {...birthdate}
-                placeholder={placeHolder}
-                labelText={t('dateOfBirthLabelText', 'Date of Birth')}
-                invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
-                invalidText={birthdateMeta.error && t(birthdateMeta.error)}
-                value={format(birthdate.value)}
-              />
-            </DatePicker>
+            <OpenmrsDatePicker
+              id="birthdate"
+              {...birthdate}
+              dateFormat={dateFormat}
+              onChange={onDateChange}
+              maxDate={today}
+              labelText={t('dateOfBirthLabelText', 'Date of Birth')}
+              invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
+              invalidText={birthdateMeta.error && t(birthdateMeta.error)}
+              value={birthdate.value}
+              carbonOptions={{
+                placeholder: placeHolder,
+              }}
+            />
           </div>
         ) : (
           <div className={styles.grid}>

package/src/patient-registration/field/dob/dob.test.tsx

@@ -19,6 +19,7 @@ jest.mock('@openmrs/esm-framework', () => {
         },
       },
     })),
+    getLocale: jest.fn().mockReturnValue('en'),
   };
 });
 

package/src/patient-registration/field/field.test.tsx

@@ -10,6 +10,7 @@ import { PatientRegistrationContext } from '../patient-registration-context';
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
   useConfig: jest.fn(),
+  getLocale: jest.fn().mockReturnValue('en'),
 }));
 
 const predefinedAddressTemplate = {

package/src/patient-registration/field/person-attributes/custom-person-attribute-field.component.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Field } from 'formik';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import { useTranslation } from 'react-i18next';
+import styles from './../field.scss';
+import classNames from 'classnames';
+
+type CustomPersonAttributeFieldProps = {
+  id: string;
+  personAttributeType: PersonAttributeTypeResponse;
+  answerConceptSetUuid: string;
+  label?: string;
+  customConceptAnswers: Array<{ uuid: string; label?: string }>;
+  required: boolean;
+};
+
+const CustomPersonAttributeField: React.FC<CustomPersonAttributeFieldProps> = ({
+  personAttributeType,
+  required,
+  id,
+  label,
+  customConceptAnswers,
+}) => {
+  const { t } = useTranslation();
+  const fieldName = `attributes.${personAttributeType.uuid}`;
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      <Layer>
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors }, meta }) => {
+            return (
+              <>
+                <Select
+                  id={id}
+                  name={`person-attribute-${personAttributeType.uuid}`}
+                  labelText={label ?? personAttributeType?.display}
+                  invalid={errors[fieldName] && touched[fieldName]}
+                  required={required}
+                  {...field}>
+                  <SelectItem value={''} text={t('selectAnOption', 'Select an option')} />
+                  {customConceptAnswers.map((answer) => (
+                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.uuid} />
+                  ))}
+                </Select>
+              </>
+            );
+          }}
+        </Field>
+      </Layer>
+    </div>
+  );
+};
+
+export default CustomPersonAttributeField;

package/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx

@@ -6,6 +6,7 @@ import { usePersonAttributeType } from './person-attributes.resource';
 import { TextPersonAttributeField } from './text-person-attribute-field.component';
 import { useTranslation } from 'react-i18next';
 import styles from '../field.scss';
+import CustomPersonAttributeField from './custom-person-attribute-field.component';
 
 export interface PersonAttributeFieldProps {
   fieldDefinition: FieldDefinition;
@@ -22,13 +23,26 @@ export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldPr
     switch (personAttributeType.format) {
       case 'java.lang.String':
         return (
-          <TextPersonAttributeField
-            personAttributeType={personAttributeType}
-            validationRegex={fieldDefinition.validation?.matches ?? ''}
-            label={fieldDefinition.label}
-            required={fieldDefinition.validation?.required ?? false}
-            id={fieldDefinition?.id}
-          />
+          <>
+            {fieldDefinition.renderType === 'select' ? (
+              <CustomPersonAttributeField
+                personAttributeType={personAttributeType}
+                answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
+                label={fieldDefinition.label}
+                id={fieldDefinition?.id}
+                customConceptAnswers={fieldDefinition.customConceptAnswers ?? []}
+                required={fieldDefinition.validation?.required ?? false}
+              />
+            ) : (
+              <TextPersonAttributeField
+                personAttributeType={personAttributeType}
+                validationRegex={fieldDefinition.validation?.matches ?? ''}
+                label={fieldDefinition.label}
+                required={fieldDefinition.validation?.required ?? false}
+                id={fieldDefinition?.id}
+              />
+            )}
+          </>
         );
       case 'org.openmrs.Concept':
         return (

package/src/patient-registration/patient-registration.test.tsx

@@ -405,7 +405,7 @@ describe('Updating an existing patient record', () => {
     expect(givenNameInput.value).toBe('John');
     expect(familyNameInput.value).toBe('Wilson');
     expect(middleNameInput.value).toBeFalsy();
-    expect(dateOfBirthInput.value).toBe('4/4/1972');
+    expect(dateOfBirthInput.value).toBe('04/04/1972');
     expect(genderInput.value).toBe('male');
 
     // do some edits

package/src/patient-registration/section/demographics/demographics-section.test.tsx

@@ -15,6 +15,7 @@ jest.mock('@openmrs/esm-framework', () => {
     useConfig: jest.fn().mockImplementation(() => ({
       fieldConfigurations: { dateOfBirth: { useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 } } },
     })),
+    getLocale: jest.fn().mockReturnValue('en'),
   };
 });
 

package/translations/en.json

@@ -10,6 +10,8 @@
   "cancel": "Cancel",
   "causeOfDeathInputLabel": "Cause of Death",
   "clientRegistryEmpty": "Create & Post Patient",
+  "clientRegistryError": "Error occurred while reaching the client registry",
+  "clientRegistryErrorSubtitle": "Please proceed with registration contact system admin and  try again later",
   "clientVerificationWithClientRegistry": "Client verification with client registry",
   "closeOverlay": "Close overlay",
   "codedPersonAttributeAnswerSetEmpty": "The coded person attribute field '{{codedPersonAttributeFieldId}}' has been defined with an answer concept set UUID '{{answerConceptSetUuid}}' that does not have any concept answers.",
@@ -65,7 +67,7 @@
   "negativeYears": "Negative years",
   "no": "No",
   "numberInNameDubious": "Number in name is dubious",
-  "NUPI": "",
+  "nupi": "NUPI",
   "obsFieldUnknownDatatype": "Concept for obs field '{{fieldDefinitionId}}' has unknown datatype '{{datatypeName}}'",
   "optional": "optional",
   "other": "Other",
@@ -97,7 +99,7 @@
   "selectCountry": "Select country",
   "selectIdentifierType": "Select identifier type",
   "sexFieldLabelText": "Sex",
-  "SHA Number": "",
+  "shaNumber": "SHA Number",
   "source": "Source",
   "stroke": "Stroke",
   "submitting": "Submitting",