@kenyaemr/esm-patient-registration-app 6.0.1-pre.1.0.6 → 7.0.0

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"6.0.1-local.0"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"6.0.1-pre.1.0.6"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "6.0.1-pre.1.0.6",
+  "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/form-manager.ts

@@ -189,7 +189,6 @@ export class FormManager {
         );
       } else {
         const encounterToSave: Encounter = {
-          encounterDatetime: new Date(),
           patient: savePatientResponse.data.uuid,
           encounterType: config.registrationObs.encounterTypeUuid,
           location: currentLocation,

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/src/patient-registration/section/patient-relationships/relationships-section.component.tsx

@@ -177,7 +177,11 @@ export const RelationshipsSection = () => {
           uuid: type.uuid,
           direction: 'bIsToA',
         };
-        aIsToB.display === bIsToA.display ? tmp.push(aIsToB) : tmp.push(aIsToB, bIsToA);
+        aIsToB.display === bIsToA.display
+          ? tmp.push(aIsToB)
+          : bIsToA.display === 'Patient'
+            ? tmp.push(aIsToB, { display: `Patient (${aIsToB.display})`, uuid: type.uuid, direction: 'bIsToA' })
+            : tmp.push(aIsToB, bIsToA);
       });
       setDisplayRelationshipTypes(tmp);
     }

package/src/patient-verification/assets/verification-assets.ts

@@ -7,5 +7,5 @@ export const countries = [
 export const verificationIdentifierTypes = [
   { name: 'National ID', value: 'national-id' },
   { name: 'Passport', value: 'passport' },
-  { name: 'Birth certificate number', value: 'birth-certificate-number' },
+  { name: 'Birth certificate number', value: 'birth-certificate' },
 ];

package/src/patient-verification/patient-verification.component.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tile, ComboBox, Layer, Button, Search, InlineLoading } from '@carbon/react';
+import { Tile, ComboBox, Layer, Button, Search, InlineLoading, InlineNotification } from '@carbon/react';
 import styles from './patient-verification.scss';
 import { countries, verificationIdentifierTypes } from './assets/verification-assets';
 import { searchClientRegistry, useGlobalProperties } from './patient-verification-hook';
@@ -48,13 +48,6 @@ const PatientVerification: React.FC<PatientVerificationProps> = ({ props }) => {
     }
   };
 
-  if (error) {
-    return (
-      <Tile className={styles.errorWrapper}>
-        <p>Error occurred while reaching the client registry, please proceed with registration and try again later</p>
-      </Tile>
-    );
-  }
   return (
     <div id={'patientVerification'}>
       <h3 className={styles.productiveHeading02} style={{ color: '#161616' }}>
@@ -64,6 +57,20 @@ const PatientVerification: React.FC<PatientVerificationProps> = ({ props }) => {
         <Layer>
           {isLoading && <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />}
         </Layer>
+        {error && (
+          <InlineNotification
+            className={styles.errorWrapper}
+            aria-label="closes notification"
+            kind="error"
+            lowContrast
+            statusIconDescription="notification"
+            subtitle={t(
+              'clientRegistryErrorSubtitle',
+              'Please proceed with registration contact system admin and  try again later',
+            )}
+            title={t('clientRegistryError', 'Error occurred while reaching the client registry')}
+          />
+        )}
         <Tile className={styles.verificationWrapper}>
           <Layer>
             <ComboBox
@@ -75,7 +82,7 @@ const PatientVerification: React.FC<PatientVerificationProps> = ({ props }) => {
               titleText={t('selectCountry', 'Select country')}
               initialSelectedItem={countries[0]}
               onChange={({ selectedItem }) =>
-                setVerificationCriteria({ ...verificationCriteria, countryCode: selectedItem.initials })
+                setVerificationCriteria({ ...verificationCriteria, countryCode: selectedItem?.initials })
               }
             />
           </Layer>
@@ -88,7 +95,7 @@ const PatientVerification: React.FC<PatientVerificationProps> = ({ props }) => {
               label="Select identifier type"
               titleText={t('selectIdentifierType', 'Select identifier type')}
               onChange={({ selectedItem }) =>
-                setVerificationCriteria({ ...verificationCriteria, identifierType: selectedItem.value })
+                setVerificationCriteria({ ...verificationCriteria, identifierType: selectedItem?.value })
               }
             />
           </Layer>

package/src/patient-verification/patient-verification.scss

@@ -21,9 +21,5 @@
 }
 
 .errorWrapper {
-  color: colors.$red-50;
   margin: 0 0 1rem 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }

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",

package/translations/zh.json

@@ -45,7 +45,7 @@
   "givenNameLabelText": "名字",
   "givenNameRequired": "名字是必填项",
   "identifierValueRequired": "ID标识是必填项",
-  "idFieldLabelText": "ID标识",
+  "idFieldLabelText": "ID",
   "IDInstructions": "选择您想为该患者添加的ID标识：",
   "incompleteForm": "表单未填完",
   "invalidEmail": "需要提供一个有效的电子邮件地址",

package/translations/zh_CN.json

@@ -45,7 +45,7 @@
   "givenNameLabelText": "名字",
   "givenNameRequired": "名字是必填项",
   "identifierValueRequired": "ID标识是必填项",
-  "idFieldLabelText": "ID标识",
+  "idFieldLabelText": "ID",
   "IDInstructions": "选择您想为该患者添加的ID标识：",
   "incompleteForm": "表单未填完",
   "invalidEmail": "需要提供一个有效的电子邮件地址",