@kenyaemr/esm-patient-registration-app 4.6.0 → 5.2.2

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

@@ -42,7 +42,13 @@ export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldPr
       default:
         return (
           <InlineNotification kind="error" title="Error">
-            Patient attribute type has unknown format "{personAttributeType.format}"
+            {t(
+              'unknownPatientAttributeType',
+              'Patient attribute type has unknown format {{personAttributeTypeFormat}}',
+              {
+                personAttributeTypeFormat: personAttributeType.format,
+              },
+            )}
           </InlineNotification>
         );
     }
@@ -62,7 +68,7 @@ export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldPr
       <div>
         {fieldDefinition.showHeading && <h4 className={styles.productiveHeading02Light}>{fieldDefinition?.label}</h4>}
         <InlineNotification kind="error" title={t('error', 'Error')}>
-          {t('unableToFetch', 'Unable to fetch person attribute type - {personattributetype}', {
+          {t('unableToFetch', 'Unable to fetch person attribute type - {{personattributetype}}', {
             personattributetype: fieldDefinition?.label ?? fieldDefinition?.id,
           })}
         </InlineNotification>

package/src/patient-registration/field/person-attributes/person-attributes.resource.tsx

@@ -1,4 +1,4 @@
-import { FetchResponse, openmrsFetch, showToast } from '@openmrs/esm-framework';
+import { FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 import useSWRImmutable from 'swr/immutable';
 import { PersonAttributeTypeResponse } from '../../patient-registration.types';
 

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

@@ -1,9 +1,10 @@
 import React from 'react';
+import classNames from 'classnames';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { Input } from '../../input/basic-input/input/input.component';
-import styles from './../field.scss';
 import { PersonAttributeTypeResponse } from '../../patient-registration.types';
+import styles from './../field.scss';
 
 export interface TextPersonAttributeFieldProps {
   id: string;
@@ -37,7 +38,7 @@ export function TextPersonAttributeField({
   const fieldName = `attributes.${personAttributeType.uuid}`;
 
   return (
-    <div className={`${styles.customField} ${styles.halfWidthInDesktopView}`}>
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
       <Field name={fieldName} validate={validateInput}>
         {({ field, form: { touched, errors }, meta }) => {
           return (

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

@@ -1,13 +1,133 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Layer, TextInput, TextInputProps } from '@carbon/react';
+import { Layer, TextInput } from '@carbon/react';
 import { useField } from 'formik';
 
+// FIXME Temporarily imported here
+export interface TextInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'id' | 'size' | 'value'> {
+  /**
+   * Specify an optional className to be applied to the `<input>` node
+   */
+  className?: string;
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter?: boolean;
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText?: React.ReactNode;
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: string;
+
+  /**
+   * `true` to use the inline version.
+   */
+  inline?: boolean;
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText?: React.ReactNode;
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: React.ReactNode;
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
+   * 'The `light` prop for `TextInput` has ' +
+      'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'
+   */
+  light?: boolean;
+
+  /**
+   * Max character count allowed for the input. This is needed in order for enableCounter to display
+   */
+  maxCount?: number;
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder?: string;
+
+  /**
+   * Whether the input should be read-only
+   */
+  readOnly?: boolean;
+
+  /**
+   * Specify the size of the Text Input. Currently supports the following:
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * Specify the type of the `<input>`
+   */
+  type?: string;
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value?: string | number | undefined;
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText?: React.ReactNode;
+}
+
 interface InputProps extends TextInputProps {
   checkWarning?(value: string): string;
 }
 
-export const Input: React.FC<any> = ({ checkWarning, ...props }) => {
+export const Input: React.FC<InputProps> = ({ checkWarning, ...props }) => {
   const [field, meta] = useField(props.name);
   const { t } = useTranslation();
 

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
 import { TextInput, Layer } from '@carbon/react';
 import SelectionTick from './selection-tick.component';
 import styles from '../input.scss';
@@ -98,19 +99,19 @@ const ComboInput: React.FC<ComboInputProps> = ({ entries, fieldProps, handleInpu
             <div id="downshift-1-menu" className="cds--list-box__menu" role="listbox">
               {filteredEntries.map((entry, indx) => (
                 <div
+                  className={classNames('cds--list-box__menu-item', {
+                    'cds--list-box__menu-item--highlighted': indx === highlightedEntry,
+                  })}
                   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 ${styles.comboInputItemOption} ${
-                      entry === value && 'cds--list-box__menu-item--active'
-                    }`}>
+                    className={classNames('cds--list-box__menu-item__option', styles.comboInputItemOption, {
+                      'cds--list-box__menu-item--active': entry === value,
+                    })}>
                     {entry}
                     {entry === value && <SelectionTick />}
                   </div>

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx

@@ -1,27 +1,123 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { HTMLAttributes, useEffect, useRef, useState } from 'react';
 import { Layer, Search, SearchProps } from '@carbon/react';
+import classNames from 'classnames';
 import styles from './autosuggest.scss';
 
+// FIXME Temporarily included types from Carbon
+type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+interface SearchProps extends InputPropsBase {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete?: string;
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText?: string;
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify whether or not ExpandableSearch should render expanded or not
+   */
+  isExpanded?: boolean;
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id?: string;
+
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: React.ReactNode;
+
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange?(e: { target: HTMLInputElement; type: 'change' }): void;
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear?(): void;
+
+  /**
+   * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
+   */
+  onExpand?(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void;
+
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder?: string;
+
+  /**
+   * Rendered icon for the Search.
+   * Can be a React component class
+   */
+  renderIcon?: React.ComponentType | React.FunctionComponent;
+
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role?: string;
+
+  /**
+   * Specify the size of the Search
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type?: string;
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value?: string | number;
+}
+
 interface AutosuggestProps extends SearchProps {
   getDisplayValue: Function;
   getFieldValue: Function;
   getSearchResults: (query: string) => Promise<any>;
   onSuggestionSelected: (field: string, value: string) => void;
+  invalid?: boolean | undefined;
+  invalidText?: string | undefined;
 }
 
-export const Autosuggest: React.FC<any> = ({
+export const Autosuggest: React.FC<AutosuggestProps> = ({
   getDisplayValue,
   getFieldValue,
   getSearchResults,
   onSuggestionSelected,
+  invalid,
+  invalidText,
   ...searchProps
 }) => {
   const [suggestions, setSuggestions] = useState([]);
   const searchBox = useRef(null);
   const wrapper = useRef(null);
-  const { t } = useTranslation();
-  const { name, labelText } = searchProps;
+  const { id: name, labelText } = searchProps;
 
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutsideComponent);
@@ -39,6 +135,7 @@ export const Autosuggest: React.FC<any> = ({
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const query = e.target.value;
+    onSuggestionSelected(name, undefined);
     if (query) {
       getSearchResults(query).then((suggestions) => {
         setSuggestions(suggestions);
@@ -48,6 +145,10 @@ export const Autosuggest: React.FC<any> = ({
     }
   };
 
+  const handleClear = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onSuggestionSelected(name, undefined);
+  };
+
   const handleClick = (index: number) => {
     const display = getDisplayValue(suggestions[index]);
     const value = getFieldValue(suggestions[index]);
@@ -59,10 +160,11 @@ export const Autosuggest: React.FC<any> = ({
   return (
     <div className={styles.autocomplete} ref={wrapper}>
       <label className="cds--label">{labelText}</label>
-      <Layer>
+      <Layer className={classNames({ [styles.invalid]: invalid })}>
         <Search
           id="autosuggest"
           onChange={handleChange}
+          onClear={handleClear}
           ref={searchBox}
           className={styles.autocompleteSearch}
           {...searchProps}
@@ -79,6 +181,7 @@ export const Autosuggest: React.FC<any> = ({
           ))}
         </ul>
       )}
+      {invalid ? <label className={classNames(styles.invalidMsg)}>{invalidText}</label> : <></>}
     </div>
   );
 };

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

@@ -51,3 +51,12 @@
   color: inherit;
   text-decoration: none;
 }
+
+.invalid input {
+  outline: 2px solid var(--cds-support-error, #da1e28);
+  outline-offset: -2px;
+}
+
+.invalidMsg {
+  color: var(--cds-text-error, #da1e28);
+}

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.test.tsx

@@ -38,7 +38,7 @@ describe('autosuggest', () => {
       <BrowserRouter>
         <Autosuggest
           labelText=""
-          name="person"
+          id="person"
           placeholder="Find Person"
           onSuggestionSelected={handleSuggestionSelected}
           getSearchResults={mockGetSearchResults}
@@ -79,7 +79,7 @@ describe('autosuggest', () => {
     fireEvent.change(searchbox, { target: { value: 'john' } });
     const listitems = await waitFor(() => screen.getAllByRole('listitem'));
     fireEvent.click(listitems[0]);
-    expect(handleSuggestionSelected).toHaveBeenNthCalledWith(1, 'person', 'randomuuid1');
+    expect(handleSuggestionSelected).toHaveBeenNthCalledWith(4, 'person', 'randomuuid1');
   });
 
   it('should clear the suggestions when a suggestion is selected', async () => {

package/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { v4 } from 'uuid';
 import { FormValues } from '../../patient-registration.types';
 import styles from './../input.scss';
@@ -41,8 +42,8 @@ export const DummyDataInput: React.FC<DummyDataInputProps> = ({ setValues }) =>
   return (
     <main>
       <button
+        className={classNames('omrs-btn omrs-filled-neutral', styles.dummyData)}
         onClick={() => setValues(dummyFormValues)}
-        className={`omrs-btn omrs-filled-neutral ${styles.dummyData}`}
         type="button"
         aria-label="Dummy Data Input">
         Input Dummy Data

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

@@ -1,28 +1,19 @@
 import React, { useState, useEffect, useContext, useMemo, useRef } from 'react';
-import { Button, Link } from '@carbon/react';
+import classNames from 'classnames';
+import { Button, Link, InlineLoading } from '@carbon/react';
 import { XAxis, ShareKnowledge } from '@carbon/react/icons';
-import { Router, useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Formik, Form, FormikHelpers } from 'formik';
-import { createErrorHandler, showToast, useConfig, interpolateUrl, usePatient } from '@openmrs/esm-framework';
+import { createErrorHandler, showSnackbar, useConfig, interpolateUrl, usePatient } from '@openmrs/esm-framework';
 import { validationSchema as initialSchema } from './validation/patient-registration-validation';
-import { FormValues, CapturePhotoProps, PatientIdentifierValue } from './patient-registration.types';
+import { FormValues, CapturePhotoProps } from './patient-registration.types';
 import { PatientRegistrationContext } from './patient-registration-context';
 import { SavePatientForm, SavePatientTransactionManager } from './form-manager';
 import { usePatientPhoto } from './patient-registration.resource';
 import { DummyDataInput } from './input/dummy-data/dummy-data-input.component';
-import {
-  cancelRegistration,
-  filterUndefinedPatientIdenfier,
-  parseAddressTemplateXml,
-  scrollIntoView,
-} from './patient-registration-utils';
-import {
-  useInitialAddressFieldValues,
-  useInitialFormValues,
-  usePatientObs,
-  usePatientUuidMap,
-} from './patient-registration-hooks';
+import { cancelRegistration, filterUndefinedPatientIdenfier, scrollIntoView } from './patient-registration-utils';
+import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap } from './patient-registration-hooks';
 import { ResourcesContext } from '../offline.resources';
 import { builtInSections, RegistrationConfig, SectionDefinition } from '../config-schema';
 import { SectionWrapper } from './section/section-wrapper.component';
@@ -95,17 +86,18 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
         abortController,
       );
 
-      showToast({
-        description: inEditMode
-          ? t('updationSuccessToastDescription', "The patient's information has been successfully updated")
+      showSnackbar({
+        subtitle: inEditMode
+          ? t('updatePatientSuccessSnackbarSubtitle', "The patient's information has been successfully updated")
           : t(
-              'registrationSuccessToastDescription',
+              'registerPatientSuccessSnackbarSubtitle',
               'The patient can now be found by searching for them using their name or ID number',
             ),
         title: inEditMode
-          ? t('updationSuccessToastTitle', 'Patient Details Updated')
-          : t('registrationSuccessToastTitle', 'New Patient Created'),
+          ? t('updatePatientSuccessSnackbarTitle', 'Patient Details Updated')
+          : t('registerPatientSuccessSnackbarTitle', 'New Patient Created'),
         kind: 'success',
+        isLowContrast: true,
       });
 
       const afterUrl = new URLSearchParams(search).get('afterUrl');
@@ -115,10 +107,22 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     } catch (error) {
       if (error.responseBody?.error?.globalErrors) {
         error.responseBody.error.globalErrors.forEach((error) => {
-          showToast({ description: error.message });
+          showSnackbar({
+            title: inEditMode
+              ? t('updatePatientErrorSnackbarTitle', 'Patient Details Update Failed')
+              : t('registrationErrorSnackbarTitle', 'Patient Registration Failed'),
+            subtitle: error.message,
+            kind: 'error',
+          });
         });
       } else if (error.responseBody?.error?.message) {
-        showToast({ description: error.responseBody.error.message });
+        showSnackbar({
+          title: inEditMode
+            ? t('updatePatientErrorSnackbarTitle', 'Patient Details Update Failed')
+            : t('registrationErrorSnackbarTitle', 'Patient Registration Failed'),
+          subtitle: error.responseBody.error.message,
+          kind: 'error',
+        });
       } else {
         createErrorHandler()(error);
       }
@@ -127,25 +131,15 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     }
   };
 
-  const getDescription = (errors) => {
-    return (
-      <div>
-        <p>{t('fieldErrorTitleMessage', 'The following fields have errors:')}</p>
-        <ul style={{ listStyle: 'inside' }}>
-          {Object.keys(errors).map((error, index) => (
-            <li key={index}>{t(`${error}LabelText`, error)}</li>
-          ))}
-        </ul>
-      </div>
-    );
-  };
-
   const displayErrors = (errors) => {
     if (errors && typeof errors === 'object' && !!Object.keys(errors).length) {
-      showToast({
-        description: getDescription(errors),
-        title: t('incompleteForm', 'Incomplete form'),
-        kind: 'warning',
+      Object.keys(errors).forEach((error) => {
+        showSnackbar({
+          subtitle: t(`${error}LabelText`, error),
+          title: t('incompleteForm', 'The following field has errors:'),
+          kind: 'warning',
+          isLowContrast: true,
+        });
       });
     }
   };
@@ -168,7 +162,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                 {showDummyData && <DummyDataInput setValues={props.setValues} />}
                 <p className={styles.label01}>{t('jumpTo', 'Jump to')}</p>
                 {sections.map((section) => (
-                  <div className={`${styles.space05} ${styles.touchTarget}`} key={section.name}>
+                  <div className={classNames(styles.space05, styles.touchTarget)} key={section.name}>
                     <Link className={styles.linkName} onClick={() => scrollIntoView(section.id)}>
                       <XAxis size={16} /> {t(`${section.id}Section`, section.name)}
                     </Link>
@@ -193,8 +187,19 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                   // Current session and identifiers are required for patient registration.
                   // If currentSession or identifierTypes are not available, then the
                   // user should be blocked to register the patient.
-                  disabled={!enableClientRegistry}>
-                  {inEditMode ? t('updatePatient', 'Update Patient') : t('registerPatient', 'Register Patient')}
+                  disabled={!currentSession || !identifierTypes || props.isSubmitting || !enableClientRegistry}>
+                  {props.isSubmitting ? (
+                    <InlineLoading
+                      className={styles.spinner}
+                      description={`${t('submitting', 'Submitting')} ...`}
+                      iconDescription="submitting"
+                      status="active"
+                    />
+                  ) : inEditMode ? (
+                    t('updatePatient', 'Update Patient')
+                  ) : (
+                    t('registerPatient', 'Register Patient')
+                  )}
                 </Button>
                 <Button className={styles.cancelButton} kind="tertiary" onClick={cancelRegistration}>
                   {t('cancel', 'Cancel')}

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

@@ -1,7 +1,5 @@
-import { useMemo } from 'react';
 import useSWR from 'swr';
-import useSWRImmutable from 'swr/immutable';
-import { FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
 import { Patient, Relationship, PatientIdentifier, Encounter } from './patient-registration.types';
 
 export const uuidIdentifier = '05a29f94-c0ed-11e2-94be-8c13b969e334';
@@ -181,12 +179,25 @@ export function usePatientPhoto(patientUuid: string): UsePatientPhotoResult {
   };
 }
 
-export async function fetchPerson(query: string) {
-  const abortController = new AbortController();
+export async function fetchPerson(query: string, abortController: AbortController) {
+  const [patientsRes, personsRes] = await Promise.all([
+    openmrsFetch(`/ws/rest/v1/patient?q=${query}`, {
+      signal: abortController.signal,
+    }),
+    openmrsFetch(`/ws/rest/v1/person?q=${query}`, {
+      signal: abortController.signal,
+    }),
+  ]);
 
-  return openmrsFetch(`/ws/rest/v1/person?q=${query}`, {
-    signal: abortController.signal,
+  const results = [...patientsRes.data.results];
+
+  personsRes.data.results.forEach((person) => {
+    if (!results.some((patient) => patient.uuid === person.uuid)) {
+      results.push(person);
+    }
   });
+
+  return results;
 }
 
 export async function addPatientIdentifier(patientUuid: string, patientIdentifier: PatientIdentifier) {

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

@@ -93,6 +93,12 @@
   }
 }
 
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: 1rem;
+  }
+}
+
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .linkName {