@kenyaemr/esm-patient-registration-app 4.4.2 → 4.5.0

package/src/patient-registration/input/combo-input/combo-input.component.tsx

@@ -1,76 +1,114 @@
-import React, { useState } from 'react';
-import { ComboBox, ComboBoxProps, Layer } from '@carbon/react';
-import { useField } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { performAdressHierarchyWithParentSearch } from '../../../resource';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { TextInput, Layer } from '@carbon/react';
+import SelectionTick from './selection-tick.component';
+import styles from '../input.scss';
 
-interface ComboInputProps extends Omit<ComboBoxProps, 'items'> {
+interface ComboInputProps {
+  entries: Array<string>;
   name: string;
-  labelText: string;
-  placeholder?: string;
-  setSelectedValue: any;
-  selected: string;
-  textFieldName: string;
-  required?: boolean;
+  fieldProps: {
+    value: string;
+    labelText: string;
+    [x: string]: any;
+  };
+  handleInputChange: (newValue: string) => void;
+  handleSelection: (newSelection) => void;
 }
 
-export const ComboInput: React.FC<ComboInputProps> = ({
-  name,
-  labelText,
-  placeholder,
-  setSelectedValue,
-  selected,
-  textFieldName,
-  required,
-}) => {
-  const { t } = useTranslation();
-  const [field, _, helpers] = useField(name);
-  const [listItems, setListItems] = useState([]);
-  const [error, setError] = useState<Error>();
-  const { setValue } = helpers;
-  const comboLabelText = !required ? `${labelText} (${t('optional', 'optional')})` : labelText;
-  const comboBoxEvent = (text, id) => {
-    if (text == '') {
-    } else {
-      performAdressHierarchyWithParentSearch(textFieldName.replace(' ', ''), selected, text)
-        .then((value) => {
-          setListItems(value.data.map((parent1) => ({ id: parent1['uuid'], text: parent1['name'] })));
-        })
-        .catch((err) => {
-          setError(err);
-        });
+const ComboInput: React.FC<ComboInputProps> = ({ entries, fieldProps, handleInputChange, handleSelection }) => {
+  const [highlightedEntry, setHighlightedEntry] = useState(-1);
+  const { value = '' } = fieldProps;
+  const [showEntries, setShowEntries] = useState(false);
+  const comboInputRef = useRef(null);
+
+  const handleFocus = useCallback(() => {
+    setShowEntries(true);
+    setHighlightedEntry(-1);
+  }, [setShowEntries, setHighlightedEntry]);
+
+  const handleBlur = useCallback(
+    (e) => {
+      // This check is in place to not hide the entries when an entry is clicked
+      // Else the onClick of the entry will not be counted.
+      if (!comboInputRef?.current?.contains(e.target)) {
+        setShowEntries(false);
+      }
+      setHighlightedEntry(-1);
+    },
+    [setShowEntries, setHighlightedEntry],
+  );
+
+  const filteredEntries = useMemo(() => {
+    if (!entries) {
+      return [];
     }
-  };
+    if (!value) {
+      return entries;
+    }
+    return entries.filter((entry) => entry.toLowerCase().includes(value.toLowerCase()));
+  }, [entries, value]);
 
-  if (error) {
-    return <span>{t(`${error.message}`)}</span>;
-  }
+  const handleOptionClick = useCallback(
+    (newSelection: string, e: KeyboardEvent = null) => {
+      e?.preventDefault();
+      handleSelection(newSelection);
+      setShowEntries(false);
+    },
+    [handleSelection, setShowEntries],
+  );
+
+  const handleKeyPress = useCallback(
+    (e: KeyboardEvent) => {
+      const totalResults = filteredEntries.length ?? 0;
+      if (e.key === 'ArrowUp') {
+        setHighlightedEntry((prev) => Math.max(-1, prev - 1));
+      } else if (e.key === 'ArrowDown') {
+        setHighlightedEntry((prev) => Math.min(totalResults - 1, prev + 1));
+      } else if (e.key === 'Enter' && highlightedEntry > -1) {
+        handleOptionClick(filteredEntries[highlightedEntry], e);
+      }
+    },
+    [highlightedEntry, handleOptionClick, filteredEntries, setHighlightedEntry],
+  );
 
   return (
-    <div style={{ marginBottom: '1rem' }}>
+    <div className={styles.comboInput} ref={comboInputRef}>
       <Layer>
-        <ComboBox
-          id={name}
-          onInputChange={(event) => {
-            comboBoxEvent(event, name);
-            setValue(event);
-          }}
-          items={listItems}
-          itemToString={(item) => item?.text ?? ''}
-          {...field}
-          onChange={(e) => {
-            if (Boolean(e.selectedItem)) {
-              setSelectedValue(e.selectedItem.id);
-              setValue(e.selectedItem.text);
-            } else {
-              setSelectedValue(undefined);
-              setValue(undefined);
-            }
-          }}
-          placeholder={placeholder}
-          titleText={comboLabelText}
+        <TextInput
+          {...fieldProps}
+          onChange={(e) => handleInputChange(e.target.value)}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          autoComplete={'off'}
+          onKeyDown={handleKeyPress}
         />
       </Layer>
+      <div className={styles.comboInputEntries}>
+        {showEntries && (
+          <div id="downshift-1-menu" style={{ height: filteredEntries.length > 5 && "15rem" }} className="cds--list-box__menu" role="listbox">
+            {filteredEntries.map((entry, indx) => (
+              <div
+                key={indx}
+                id="downshift-1-item-0"
+                role="option"
+                className={`cds--list-box__menu-item ${indx === highlightedEntry && 'cds--list-box__menu-item--highlighted'
+                  }`}
+                tabIndex={-1}
+                aria-selected="true"
+                onClick={() => handleOptionClick(entry)}>
+                <div
+                  className={`cds--list-box__menu-item__option ${entry === value && 'cds--list-box__menu-item--active'
+                    }`}>
+                  {entry}
+                  {entry === value && <SelectionTick />}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
 };
+
+export default ComboInput;

package/src/patient-registration/input/combo-input/selection-tick.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+function SelectionTick() {
+  return (
+    <svg
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width="16"
+      height="16"
+      viewBox="0 0 32 32"
+      aria-hidden="true"
+      className="cds--list-box__menu-item__selected-icon">
+      <path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path>
+    </svg>
+  );
+}
+
+export default SelectionTick;

package/src/patient-registration/input/input.scss

@@ -18,7 +18,8 @@
   color: $text-02;
 }
 
-.textID {
+.textID,
+.comboInput {
   margin-bottom: spacing.$spacing-05;
 }
 
@@ -106,3 +107,7 @@
   @include type.type-style('label-01');
   color: $danger;
 }
+
+.comboInputEntries {
+  position: relative;
+}

package/src/patient-registration/patient-registration-context.ts

@@ -14,6 +14,7 @@ export interface PatientRegistrationContextProps {
   currentPhoto: string;
   isOffline: boolean;
   initialFormValues: FormValues;
+  setInitialFormValues?: React.Dispatch<SetStateAction<FormValues>>;
 }
 
 export const PatientRegistrationContext = createContext<PatientRegistrationContextProps | undefined>(undefined);

package/src/patient-registration/patient-registration-hooks.ts

@@ -286,6 +286,7 @@ function getPatientAttributeUuidMapForPatient(attributes: Array<PersonAttributeR
   });
   return attributeUuidMap;
 }
+
 export function usePatientObs(patientUuid: string) {
   const {
     registrationObs: { encounterTypeUuid },

package/src/patient-registration/patient-registration-utils.ts

@@ -1,4 +1,3 @@
-import { navigate } from '@openmrs/esm-framework';
 import * as Yup from 'yup';
 import {
   AddressValidationSchemaType,
@@ -8,6 +7,7 @@ import {
   PatientIdentifierValue,
   Encounter,
 } from './patient-registration-types';
+import { parseDate } from '@openmrs/esm-framework';
 import camelCase from 'lodash-es/camelCase';
 import capitalize from 'lodash-es/capitalize';
 
@@ -103,7 +103,7 @@ export function scrollIntoView(viewId: string) {
 }
 
 export function cancelRegistration() {
-  navigate({ to: `${window.spaBase}/home` });
+  window.history.back();
 }
 
 export function getFormValuesFromFhirPatient(patient: fhir.Patient) {
@@ -124,7 +124,7 @@ export function getFormValuesFromFhirPatient(patient: fhir.Patient) {
   result.additionalFamilyName = additionalPatientName?.family;
 
   result.gender = capitalize(patient.gender);
-  result.birthdate = patient.birthDate ? (new Date(patient.birthDate) as any) : undefined;
+  result.birthdate = patient.birthDate ? parseDate(patient.birthDate) : undefined;
   result.telephoneNumber = patient.telecom ? patient.telecom[0].value : '';
 
   if (patient.deceasedBoolean || patient.deceasedDateTime) {

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

@@ -225,6 +225,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                   currentPhoto: photo?.imageSrc,
                   isOffline,
                   initialFormValues: props.initialValues,
+                  setInitialFormValues,
                 }}>
                 <PatientVerification props={props} />
                 {sections.map((section, index) => (

package/src/patient-registration/patient-registration.scss

@@ -92,3 +92,17 @@
     max-width: unset;
   }
 }
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .linkName {
+    & > svg {
+      transform: scale(-1, 1);
+    }
+  }
+
+  .infoGrid {
+    padding-left: unset;
+    padding-right: spacing.$spacing-07;
+  }
+}

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

@@ -1,129 +1,143 @@
-import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Formik, Form } from 'formik';
-import { useConfig } from '@openmrs/esm-framework';
 import { validationSchema } from './patient-registration-validation';
-import { NameField } from '../field/name/name-field.component';
-import { PatientRegistrationContext } from '../patient-registration-context';
-import { initialFormValues } from '../patient-registration.component';
-import { FormValues } from '../patient-registration-types';
 
-const mockUseConfig = useConfig as jest.Mock;
-const mockFieldConfigs = {
-  fieldConfigurations: {
-    name: {
-      displayMiddleName: true,
-    },
-  },
-};
+describe('Patient Registration Validation', () => {
+  describe('validationSchema', () => {
+    const validFormValues = {
+      givenName: 'John',
+      familyName: 'Doe',
+      additionalGivenName: '',
+      additionalFamilyName: '',
+      gender: 'Male',
+      birthdate: new Date('1990-01-01'),
+      birthdateEstimated: false,
+      deathDate: null,
+      email: 'john.doe@example.com',
+      identifiers: {
+        nationalId: {
+          required: true,
+          identifierValue: '123456789',
+        },
+        passportId: {
+          required: false,
+          identifierValue: '',
+        },
+      },
+    };
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
+    const validateFormValues = async (formValues) => {
+      try {
+        await validationSchema.validate(formValues, { abortEarly: false });
+      } catch (err) {
+        return err;
+      }
+    };
 
-  return {
-    ...originalModule,
-    useConfig: jest.fn(),
-    validator: jest.fn(),
-  };
-});
+    it('should allow valid form values', async () => {
+      const validationError = await validateFormValues(validFormValues);
+      expect(validationError).toBeFalsy();
+    });
 
-describe('Name input', () => {
-  const formValues: FormValues = initialFormValues;
+    it('should require givenName', async () => {
+      const invalidFormValues = {
+        ...validFormValues,
+        givenName: '',
+      };
+      const validationError = await validateFormValues(invalidFormValues);
+      expect(validationError.errors).toContain('givenNameRequired');
+    });
 
-  const testValidName = (givenNameValue: string, middleNameValue: string, familyNameValue: string) => {
-    it(
-      'does not display error message when givenNameValue: ' +
-        givenNameValue +
-        ', middleNameValue: ' +
-        middleNameValue +
-        ', familyNameValue: ' +
-        familyNameValue,
-      async () => {
-        const error = await updateNameAndReturnError(givenNameValue, middleNameValue, familyNameValue);
-        Object.values(error).map((currentError) => expect(currentError).toBeNull());
-      },
-    );
-  };
+    it('should require familyName', async () => {
+      const invalidFormValues = {
+        ...validFormValues,
+        familyName: '',
+      };
+      const validationError = await validateFormValues(invalidFormValues);
+      expect(validationError.errors).toContain('familyNameRequired');
+    });
 
-  const testInvalidName = (
-    givenNameValue: string,
-    middleNameValue: string,
-    familyNameValue: string,
-    expectedError: string,
-    errorType: string,
-  ) => {
-    it.skip(
-      'displays error message when givenNameValue: ' +
-        givenNameValue +
-        ', middleNameValue: ' +
-        middleNameValue +
-        ', familyNameValue: ' +
-        familyNameValue,
-      async () => {
-        const error = (await updateNameAndReturnError(givenNameValue, middleNameValue, familyNameValue))[errorType];
-        expect(error.textContent).toEqual(expectedError);
-      },
-    );
-  };
+    it('should require additionalGivenName when addNameInLocalLanguage is true', async () => {
+      const invalidFormValues = {
+        ...validFormValues,
+        addNameInLocalLanguage: true,
+        additionalGivenName: '',
+      };
+      const validationError = await validateFormValues(invalidFormValues);
+      expect(validationError.errors).toContain('givenNameRequired');
+    });
 
-  const updateNameAndReturnError = async (givenNameValue: string, middleNameValue: string, familyNameValue: string) => {
-    const user = userEvent.setup();
+    it('should require additionalFamilyName when addNameInLocalLanguage is true', async () => {
+      const invalidFormValues = {
+        ...validFormValues,
+        addNameInLocalLanguage: true,
+        additionalFamilyName: '',
+      };
+      const validationError = await validateFormValues(invalidFormValues);
+      expect(validationError.errors).toContain('familyNameRequired');
+    });
 
-    mockUseConfig.mockReturnValue(mockFieldConfigs);
+    it('should require gender', async () => {
+      const invalidFormValues = {
+        ...validFormValues,
+        gender: '',
+      };
+      const validationError = await validateFormValues(invalidFormValues);
+      expect(validationError.errors).toContain('genderUnspecified');
+    });
 
-    render(
-      <Formik
-        initialValues={{
-          givenName: '',
-          middleName: '',
-          familyName: '',
-        }}
-        onSubmit={null}
-        validationSchema={validationSchema}>
-        <Form>
-          <PatientRegistrationContext.Provider
-            value={{
-              initialFormValues: null,
-              identifierTypes: [],
-              validationSchema,
-              setValidationSchema: () => {},
-              values: formValues,
-              inEditMode: false,
-              setFieldValue: () => null,
-              currentPhoto: 'TEST',
-              isOffline: true,
-              setCapturePhotoProps: (value) => {},
-            }}>
-            <NameField />
-          </PatientRegistrationContext.Provider>
-        </Form>
-      </Formik>,
-    );
-    const givenNameInput = screen.getByLabelText('First Name') as HTMLInputElement;
-    const middleNameInput = screen.getByLabelText(/Middle Name/i) as HTMLInputElement;
-    const familyNameInput = screen.getByLabelText('Family Name') as HTMLInputElement;
+    it('should allow Male as a valid gender', async () => {
+      const validFormValuesWithOtherGender = {
+        ...validFormValues,
+        gender: 'Male',
+      };
+      const validationError = await validateFormValues(validFormValuesWithOtherGender);
+      expect(validationError).toBeFalsy();
+    });
 
-    await user.click(givenNameInput);
+    it('should allow Female as a valid gender', async () => {
+      const validFormValuesWithOtherGender = {
+        ...validFormValues,
+        gender: 'Female',
+      };
+      const validationError = await validateFormValues(validFormValuesWithOtherGender);
+      expect(validationError).toBeFalsy();
+    });
 
-    fireEvent.change(givenNameInput, { target: { value: givenNameValue } });
-    fireEvent.blur(givenNameInput);
-    fireEvent.change(middleNameInput, { target: { value: middleNameValue } });
-    fireEvent.blur(middleNameInput);
-    fireEvent.change(familyNameInput, { target: { value: familyNameValue } });
-    fireEvent.blur(familyNameInput);
+    it('should throw error when date of birth is a future date', async () => {
+      const invalidFormValues = {
+        ...validFormValues,
+        birthdate: new Date('2100-01-01'),
+      };
+      const validationError = await validateFormValues(invalidFormValues);
+      expect(validationError.errors).toContain('birthdayNotInTheFuture');
+    });
 
-    return {
-      givenNameError: screen.queryByText('Given name is required'),
-      middleNameError: screen.queryByText('Middle name is required'),
-      familyNameError: screen.queryByText('Family name is required'),
-    };
-  };
+    it('should require yearsEstimated when birthdateEstimated is true', async () => {
+      const invalidFormValues = {
+        ...validFormValues,
+        birthdateEstimated: true,
+      };
+      const validationError = await validateFormValues(invalidFormValues);
+      expect(validationError.errors).toContain('yearsEstimateRequired');
+    });
+
+    it('should throw error when monthEstimated is negative', async () => {
+      const invalidFormValues = {
+        ...validFormValues,
+        birthdateEstimated: true,
+        yearsEstimated: 0,
+        monthsEstimated: -1,
+      };
+      const validationError = await validateFormValues(invalidFormValues);
+      expect(validationError.errors).toContain('negativeMonths');
+    });
 
-  testValidName('Aaron', 'A', 'Aaronson');
-  testValidName('No', '', 'Middle Name');
-  testInvalidName('', '', '', 'Given name is required', 'givenNameError');
-  testInvalidName('', '', '', 'Family name is required', 'familyNameError');
-  testInvalidName('', 'No', 'Given Name', 'Given name is required', 'givenNameError');
-  testInvalidName('No', 'Family Name', '', 'Family name is required', 'familyNameError');
+    it('should throw error when deathDate is in future', async () => {
+      const invalidFormValues = {
+        ...validFormValues,
+        deathDate: new Date('2100-01-01'),
+      };
+      const validationError = await validateFormValues(invalidFormValues);
+      expect(validationError.errors).toContain('deathdayNotInTheFuture');
+    });
+  });
 });

package/src/patient-verification/verification-modal/confirm-prompt.component.tsx

@@ -53,6 +53,7 @@ const ConfirmPrompt: React.FC<ConfirmPromptProps> = ({ close, onConfirm, patient
             <PatientInfo label={t('age', 'Age')} value={age(patient?.dateOfBirth)} />
             <PatientInfo label={t('dateOfBirth', 'Date of birth')} value={formatDate(new Date(patient?.dateOfBirth))} />
             <PatientInfo label={t('gender', 'Gender')} value={capitalize(patient?.gender)} />
+            <PatientInfo label={t('nascopNumber', 'Nascop facility no')} value={capitalize(patient?.nascopCCCNumber)} />
           </div>
         </div>
       </div>

package/src/root.component.tsx

@@ -34,7 +34,7 @@ export default function Root({ savePatientForm, isOffline }: RootProps) {
     <main className={`omrs-main-content ${styles.root}`}>
       <Grid className={styles.grid}>
         <Row>
-          <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
+          <ExtensionSlot name="breadcrumbs-slot" />
         </Row>
         <ResourcesContext.Provider
           value={{

package/translations/en.json

@@ -36,6 +36,7 @@
   "editIdentifierTooltip": "Edit",
   "editPatientDetails": "Edit patient details",
   "error": "Error",
+  "errorFetchingOrderedFields": "Error occured fetching ordered fields for address hierarchy",
   "estimatedAgeInMonthsLabelText": "Estimated age in months",
   "estimatedAgeInYearsLabelText": "Estimated age in years",
   "familyNameLabelText": "Family Name",
@@ -59,7 +60,7 @@
   "loadingResults": "Loading results",
   "male": "Male",
   "middleNameLabelText": "Middle Name",
-  "months": "Months",
+  "nascopNumber": "Nascop facility no",
   "nationalId": "National ID",
   "negativeMonths": "Negative months",
   "negativeYears": "Negative years",
@@ -73,8 +74,6 @@
   "patientName": "Patient name",
   "patientNameKnown": "Patient's Name is Known?",
   "patientNotFound": "The patient records could not be found in Client registry, do you want to continue to create and post patient to registry",
-  "phoneEmailLabelText": "Phone, Email, etc.",
-  "phoneNumberInputLabelText": "Phone number",
   "postalCode": "Postcode",
   "postToRegistry": "Post to registry",
   "registerPatient": "Register Patient",
@@ -90,20 +89,19 @@
   "resetIdentifierTooltip": "Reset",
   "restoreRelationshipActionButton": "Undo",
   "searchAddress": "Search address",
+  "selectAnOption": "Select an option",
   "selectCountry": "Select country",
   "selectIdentifierType": "Select identifier type",
   "sexFieldLabelText": "Sex",
   "stateProvince": "State",
   "stroke": "Stroke",
   "unableToFetch": "Unable to fetch person attribute type {personattributetype}",
-  "unidentifiedPatient": "Unidentified Patient",
   "unknown": "Unknown",
   "updatePatient": "Update Patient",
   "updationSuccessToastDescription": "The patient's information has been successfully updated",
   "updationSuccessToastTitle": "Patient Details Updated",
   "useValues": "Use values",
   "validate": "Validate",
-  "years": "Years",
   "yearsEstimateRequired": "Years estimate required",
   "yes": "Yes"
 }