@kenyaemr/esm-patient-registration-app 4.3.0

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

@@ -0,0 +1,181 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AddressHierarchy } from './address-hierarchy.component';
+import { Formik, Form } from 'formik';
+import { Resources, ResourcesContext } from '../../../offline.resources';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { useConfig } from '@openmrs/esm-framework';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: jest.fn(),
+}));
+
+const mockResponse1 = {
+  results: [
+    {
+      value:
+        '<?xml version="1.0" encoding="UTF-8"?> \
+          <org.openmrs.layout.address.AddressTemplate> \
+            <nameMappings class="properties"> \
+                <property name="postalCode" value="Postcode" /> \
+                <property name="address1" value="Address line 1" /> \
+                <property name="address2" value="Address line 2" /> \
+                <property name="country" value="Country" /> \
+                <property name="stateProvince" value="State" /> \
+                <property name="cityVillage" value="City" /> \
+            </nameMappings> \
+            <sizeMappings class="properties"> \
+                <property name="postalCode" value="10" /> \
+                <property name="address2" value="40" /> \
+                <property name="address1" value="40" /> \
+                <property name="country" value="10" /> \
+                <property name="stateProvince" value="10" /> \
+                <property name="cityVillage" value="10" /> \
+            </sizeMappings> \
+            <lineByLineFormat> \
+                <string> address1</string> \
+                <string> address2</string> \
+                <string> cityVillage stateProvince country postalCode</string> \
+            </lineByLineFormat> \
+            <requiredElements /> \
+        </org.openmrs.layout.address.AddressTemplate>',
+    },
+  ],
+};
+
+const mockResponse2 = {
+  results: [
+    {
+      value:
+        '<org.openmrs.layout.address.AddressTemplate> \
+          <nameMappings> \
+            <entry> \
+              <string>country</string> \
+              <string>Country</string> \
+            </entry> \
+            <entry> \
+              <string>postalCode</string> \
+              <string>Postcode</string> \
+            </entry> \
+            <entry> \
+              <string>address1</string> \
+              <string>Address line 1</string> \
+            </entry> \
+            <entry> \
+              <string>address2</string> \
+              <string>Address line 2</string> \
+            </entry> \
+            <entry> \
+              <string>stateProvince</string> \
+              <string>State</string> \
+            </entry> \
+            <entry> \
+              <string>cityVillage</string> \
+              <string>City</string> \
+            </entry> \
+          </nameMappings> \
+          <sizeMappings> \
+            <entry> \
+              <string>country</string> \
+              <string>40</string> \
+            </entry> \
+            <entry> \
+              <string>countyDistrict</string> \
+              <string>40</string> \
+            </entry> \
+            <entry> \
+              <string>address1</string> \
+              <string>40</string> \
+            </entry> \
+            <entry> \
+              <string>stateProvince</string> \
+              <string>40</string> \
+            </entry> \
+            <entry> \
+              <string>cityVillage</string> \
+              <string>40</string> \
+            </entry> \
+          </sizeMappings> \
+          <elementDefaults> \
+            <entry> \
+              <string>country</string> \
+              <string>Cambodia</string> \
+            </entry> \
+          </elementDefaults> \
+          <lineByLineFormat> \
+            <string>cityVillage, address1</string> \
+            <string>countyDistrict, stateProvince</string> \
+            <string>country</string> \
+          </lineByLineFormat> \
+          <maxTokens>0</maxTokens> \
+        </org.openmrs.layout.address.AddressTemplate>',
+    },
+  ],
+};
+
+async function testAddressHierarchy(mockResponse) {
+  await render(
+    <ResourcesContext.Provider value={{ addressTemplate: mockResponse } as Resources}>
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() }}>
+            <AddressHierarchy />
+          </PatientRegistrationContext.Provider>
+        </Form>
+      </Formik>
+    </ResourcesContext.Provider>,
+  );
+  const countryInput = screen.getByLabelText('Country (optional)');
+  expect(countryInput).toBeInTheDocument();
+  expect(countryInput).toHaveAttribute('name', 'address.country');
+  const stateInput = screen.getByLabelText('State (optional)');
+  expect(stateInput).toBeInTheDocument();
+  expect(stateInput).toHaveAttribute('name', 'address.stateProvince');
+  const cityInput = screen.getByLabelText('City (optional)');
+  expect(cityInput).toBeInTheDocument();
+  expect(cityInput).toHaveAttribute('name', 'address.cityVillage');
+  const address1Input = screen.getByLabelText('Address line 1 (optional)');
+  expect(address1Input).toBeInTheDocument();
+  expect(address1Input).toHaveAttribute('name', 'address.address1');
+  const address2Input = screen.getByLabelText('Address line 2 (optional)');
+  expect(address2Input).toBeInTheDocument();
+  expect(address2Input).toHaveAttribute('name', 'address.address2');
+  const postalCodeInput = screen.getByLabelText('Postcode (optional)');
+  expect(postalCodeInput).toBeInTheDocument();
+  expect(postalCodeInput).toHaveAttribute('name', 'address.postalCode');
+}
+
+describe('address hierarchy', () => {
+  it('renders text input fields matching addressTemplate config', async () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: false,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
+    testAddressHierarchy(mockResponse1);
+    testAddressHierarchy(mockResponse2);
+  });
+
+  it('renders combo input fields matching addressTemplate config', async () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: false,
+            searchAddressByLevel: true,
+          },
+        },
+      },
+    }));
+    testAddressHierarchy(mockResponse1);
+    testAddressHierarchy(mockResponse2);
+  });
+});

package/src/patient-registration/field/address/address-search.component.tsx

@@ -0,0 +1,98 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { useAddressHierarchy } from '../../patient-registration.resource';
+import { Search } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useFormikContext } from 'formik';
+import styles from './address-search.scss';
+
+interface AddressSearchComponentProps {
+  addressLayout: Array<any>;
+}
+
+const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ addressLayout }) => {
+  const { t } = useTranslation();
+  const separator = ' > ';
+  const searchBox = useRef(null);
+  const wrapper = useRef(null);
+  const [searchString, setSearchString] = useState<string>('');
+  const { addresses, isLoading, error } = useAddressHierarchy(searchString, separator);
+  const addressOptions: Array<string> = useMemo(() => {
+    const options: Set<string> = new Set();
+    addresses.forEach((address) => {
+      const values = address.split(separator);
+      values.forEach((val, index) => {
+        if (val.toLowerCase().includes(searchString.toLowerCase())) {
+          options.add(values.slice(0, index + 1).join(separator));
+        }
+      });
+    });
+    return [...options];
+  }, [addresses, searchString]);
+
+  const { setFieldValue } = useFormikContext();
+
+  const handleInputChange = (e) => {
+    setSearchString(e.target.value);
+  };
+
+  const handleChange = (address) => {
+    if (address) {
+      const values = address.split(separator);
+      addressLayout.map(({ name }, index) => {
+        setFieldValue(`address.${name}`, values?.[index] ?? '');
+      });
+      setSearchString('');
+    }
+  };
+
+  const handleClickOutsideComponent = (e) => {
+    if (wrapper.current && !wrapper.current.contains(e.target)) {
+      setSearchString('');
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutsideComponent);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideComponent);
+    };
+  }, [wrapper]);
+
+  return (
+    <div className={styles.autocomplete} ref={wrapper} style={{ marginBottom: '1rem' }}>
+      <Search
+        onChange={handleInputChange}
+        labelText={t('searchAddress', 'Search address')}
+        placeholder={t('searchAddress', 'Search address')}
+        ref={searchBox}
+        helperText={
+          searchString
+            ? isLoading
+              ? t('loadingResults', 'Loading results')
+              : error
+              ? error.message
+              : addresses?.length === 0
+              ? t('noResultsFound', 'No results found')
+              : null
+            : null
+        }
+        value={searchString}
+      />
+      {addressOptions.length > 0 && (
+        /* Since the input has a marginBottom of 1rem */
+        <ul className={styles.suggestions}>
+          {addressOptions.map((address, index) => (
+            <li //eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
+              key={index}
+              onClick={(e) => handleChange(address)}>
+              {address}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default AddressSearchComponent;

package/src/patient-registration/field/address/address-search.scss

@@ -0,0 +1,53 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.suggestions {
+  border-top-width: 0;
+  list-style: none;
+  margin-top: 0;
+  max-height: 20rem;
+  overflow-y: auto;
+  padding-left: 0;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  background-color: #fff;
+  margin-bottom: 20px;
+  z-index: 99;
+  border: 1px solid $ui-03;
+}
+
+.suggestions li {
+  padding: spacing.$spacing-05;
+  line-height: 1.29;
+  color: #525252;
+  border-bottom: 1px solid #8d8d8d;
+}
+
+.suggestions li:hover {
+  background-color: #e5e5e5;
+  color: #161616;
+  cursor: pointer;
+}
+
+.suggestions li:not(:last-of-type) {
+  border-bottom: 1px solid #999;
+}
+
+.autocomplete {
+  position: relative;
+}
+
+.autocompleteSearch {
+  width: 100%;
+}
+
+.suggestions a {
+  color: inherit;
+  text-decoration: none;
+}

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

@@ -0,0 +1,25 @@
+import { useConfig } from '@openmrs/esm-framework';
+import React from 'react';
+import { RegistrationConfig } from '../../config-schema';
+import { AddressField } from './address/address-field.component';
+import { ObsField } from './obs/obs-field.component';
+import { PersonAttributeField } from './person-attributes/person-attribute-field.component';
+
+export interface CustomFieldProps {
+  name: string;
+}
+
+export function CustomField({ name }: CustomFieldProps) {
+  const config = useConfig() as RegistrationConfig;
+  const fieldDefinition = config.fieldDefinitions.filter((def) => def.id == name)[0];
+
+  if (fieldDefinition.type === 'person attribute') {
+    return <PersonAttributeField fieldDefinition={fieldDefinition} />;
+  } else if (fieldDefinition.type === 'obs') {
+    return <ObsField fieldDefinition={fieldDefinition} />;
+  } else if (fieldDefinition.type === 'address') {
+    return <AddressField fieldDefinition={fieldDefinition} />;
+  } else {
+    return <div>Error: Unknown field type {fieldDefinition.type}</div>;
+  }
+}

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

@@ -0,0 +1,143 @@
+import React, { useContext } from 'react';
+import { ContentSwitcher, DatePicker, DatePickerInput, Switch, TextInput, Layer } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useField } from 'formik';
+import { generateFormatting } from '../../date-util';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import styles from '../field.scss';
+import { useConfig } from '@openmrs/esm-framework';
+import { RegistrationConfig } from '../../../config-schema';
+
+const calcBirthdate = (yearDelta, monthDelta, dateOfBirth) => {
+  const { enabled, month, dayOfMonth } = dateOfBirth.useEstimatedDateOfBirth;
+  const startDate = new Date();
+  const resultMonth = new Date(startDate.getFullYear() - yearDelta, startDate.getMonth() - monthDelta, 1);
+  const daysInResultMonth = new Date(resultMonth.getFullYear(), resultMonth.getMonth() + 1, 0).getDate();
+  const resultDate = new Date(
+    resultMonth.getFullYear(),
+    resultMonth.getMonth(),
+    Math.min(startDate.getDate(), daysInResultMonth),
+  );
+  return enabled ? new Date(resultDate.getFullYear(), month, dayOfMonth) : resultDate;
+};
+
+export const DobField: React.FC = () => {
+  const { t } = useTranslation();
+  const {
+    fieldConfigurations: { dateOfBirth },
+  } = useConfig() as RegistrationConfig;
+  const [dobUnknown] = useField('birthdateEstimated');
+  const dobKnown = !dobUnknown.value;
+  const [birthdate, birthdateMeta] = useField('birthdate');
+  const [yearsEstimated, yearsEstimateMeta] = useField('yearsEstimated');
+  const [monthsEstimated, monthsEstimateMeta] = useField('monthsEstimated');
+  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const { format, placeHolder, dateFormat } = generateFormatting(['d', 'm', 'Y'], '/');
+  const today = new Date();
+
+  const onToggle = (e) => {
+    setFieldValue('birthdateEstimated', e.name === 'unknown');
+    setFieldValue('birthdate', '');
+    setFieldValue('yearsEstimated', 0);
+    setFieldValue('monthsEstimated', '');
+  };
+
+  const onDateChange = ([birthdate]) => {
+    setFieldValue('birthdate', birthdate);
+  };
+
+  const onEstimatedYearsChange = (ev) => {
+    const years = +ev.target.value;
+
+    if (!isNaN(years) && years < 140 && years >= 0) {
+      setFieldValue('yearsEstimated', years);
+      setFieldValue('birthdate', calcBirthdate(years, monthsEstimateMeta.value, dateOfBirth));
+    }
+  };
+
+  const onEstimatedMonthsChange = (e) => {
+    const months = +e.target.value;
+
+    if (!isNaN(months)) {
+      setFieldValue('monthsEstimated', months);
+      setFieldValue('birthdate', calcBirthdate(yearsEstimateMeta.value, months, dateOfBirth));
+    }
+  };
+
+  const updateBirthdate = () => {
+    const months = +monthsEstimateMeta.value % 12;
+    const years = +yearsEstimateMeta.value + Math.floor(monthsEstimateMeta.value / 12);
+    setFieldValue('yearsEstimated', years);
+    setFieldValue('monthsEstimated', months > 0 ? months : '');
+    setFieldValue('birthdate', calcBirthdate(years, months, dateOfBirth));
+  };
+
+  return (
+    <div className={styles.halfWidthInDesktopView}>
+      <h4 className={styles.productiveHeading02Light}>{t('birthFieldLabelText', 'Birth')}</h4>
+      <div className={styles.dobField}>
+        <div className={styles.dobContentSwitcherLabel}>
+          <span className={styles.label01}>{t('dobToggleLabelText', 'Date of Birth Known?')}</span>
+        </div>
+        <ContentSwitcher onChange={onToggle}>
+          <Switch name="known" text={t('yes', 'Yes')} />
+          <Switch name="unknown" text={t('no', 'No')} />
+        </ContentSwitcher>
+      </div>
+      <Layer>
+        {dobKnown ? (
+          <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>
+          </div>
+        ) : (
+          <div className={styles.grid}>
+            <div className={styles.dobField}>
+              <TextInput
+                id="yearsEstimated"
+                type="number"
+                name={yearsEstimated.name}
+                light
+                onChange={onEstimatedYearsChange}
+                labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
+                invalid={!!(yearsEstimateMeta.touched && yearsEstimateMeta.error)}
+                invalidText={yearsEstimateMeta.error && t(yearsEstimateMeta.error)}
+                value={yearsEstimated.value}
+                min={0}
+                required
+                {...yearsEstimated}
+                onBlur={updateBirthdate}
+              />
+            </div>
+            <div className={styles.dobField}>
+              <TextInput
+                id="monthsEstimated"
+                type="number"
+                name={monthsEstimated.name}
+                light
+                onChange={onEstimatedMonthsChange}
+                labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
+                invalid={!!(monthsEstimateMeta.touched && monthsEstimateMeta.error)}
+                invalidText={monthsEstimateMeta.error && t(monthsEstimateMeta.error)}
+                value={monthsEstimated.value}
+                min={0}
+                {...monthsEstimated}
+                required={!yearsEstimateMeta.value}
+                onBlur={updateBirthdate}
+              />
+            </div>
+          </div>
+        )}
+      </Layer>
+    </div>
+  );
+};

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Formik, Form } from 'formik';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
+import { DobField } from './dob.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { initialFormValues } from '../../patient-registration.component';
+import { FormValues } from '../../patient-registration-types';
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    useConfig: jest.fn().mockImplementation(() => ({
+      fieldConfigurations: { dateOfBirth: { useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 } } },
+    })),
+  };
+});
+
+describe('Dob', () => {
+  it('renders the fields in the birth section of the registration form', async () => {
+    renderDob();
+
+    expect(screen.getByRole('heading', { name: /birth/i })).toBeInTheDocument();
+    expect(screen.getByText(/date of birth known?/i)).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /no/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /yes/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /yes/i })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: /no/i })).toHaveAttribute('aria-selected', 'false');
+    expect(screen.getByRole('textbox', { name: /date of birth/i })).toBeInTheDocument();
+  });
+
+  it('typing in the date picker input sets the date of birth', async () => {
+    const user = userEvent.setup();
+
+    renderDob();
+
+    const dateInput = screen.getByRole('textbox', { name: /date of birth/i });
+    expect(dateInput).toBeInTheDocument();
+
+    await user.type(dateInput, '10/10/2022');
+
+    expect(screen.getByPlaceholderText('dd/mm/YYYY')).toHaveValue('10/10/2022');
+  });
+});
+
+function renderDob() {
+  let formValues: FormValues = initialFormValues;
+
+  render(
+    <Formik initialValues={{ birthdate: '' }} onSubmit={() => {}}>
+      <Form>
+        <PatientRegistrationContext.Provider
+          value={{
+            identifierTypes: [],
+            values: formValues,
+            validationSchema: null,
+            setValidationSchema: (value) => {},
+            inEditMode: false,
+            setFieldValue: () => {},
+            setCapturePhotoProps: (value) => {},
+            currentPhoto: '',
+            isOffline: false,
+            initialFormValues: formValues,
+          }}>
+          <DobField />
+        </PatientRegistrationContext.Provider>
+      </Form>
+    </Formik>,
+  );
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { NameField } from './name/name-field.component';
+import { GenderField } from './gender/gender-field.component';
+import { Identifiers } from './id/id-field.component';
+import { DobField } from './dob/dob.component';
+import { reportError, useConfig } from '@openmrs/esm-framework';
+import { builtInFields, RegistrationConfig } from '../../config-schema';
+import { CustomField } from './custom-field.component';
+import { AddressHierarchy } from './address/address-hierarchy.component';
+
+export interface FieldProps {
+  name: string;
+}
+
+export function Field({ name }: FieldProps) {
+  const config = useConfig() as RegistrationConfig;
+  if (
+    !(builtInFields as ReadonlyArray<string>).includes(name) &&
+    !config.fieldDefinitions.some((def) => def.id == name)
+  ) {
+    reportError(
+      `Invalid field name '${name}'. Valid options are '${config.fieldDefinitions
+        .map((def) => def.id)
+        .concat(builtInFields)
+        .join("', '")}'.`,
+    );
+    return null;
+  }
+
+  switch (name) {
+    case 'name':
+      return <NameField />;
+    case 'gender':
+      return <GenderField />;
+    case 'dob':
+      return <DobField />;
+    case 'address':
+      return <AddressHierarchy />;
+    case 'id':
+      return <Identifiers />;
+    default:
+      return <CustomField name={name} />;
+  }
+}

package/src/patient-registration/field/field.resource.ts

@@ -0,0 +1,35 @@
+import { FetchResponse, openmrsFetch, showToast } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { ConceptAnswers, ConceptResponse } from '../patient-registration-types';
+
+export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoading: boolean } {
+  const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
+    shouldFetch ? `/ws/rest/v1/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+  if (error) {
+    showToast({
+      title: error.name,
+      description: error.message,
+      kind: 'error',
+    });
+  }
+  return { data: data?.data, isLoading };
+}
+
+export function useConceptAnswers(conceptUuid: string): { data: Array<ConceptAnswers>; isLoading: boolean } {
+  const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
+    shouldFetch ? `/ws/rest/v1/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+  if (error) {
+    showToast({
+      title: error.name,
+      description: error.message,
+      kind: 'error',
+    });
+  }
+  return { data: data?.data?.answers, isLoading };
+}