@kenyaemr/esm-patient-registration-app 4.3.0

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

@@ -0,0 +1,170 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Formik, Form } from 'formik';
+import { Input } from './input.component';
+
+describe.skip('number input', () => {
+  const setupInput = async () => {
+    render(
+      <Formik initialValues={{ number: 0 }} onSubmit={null}>
+        <Form>
+          <Input id="number" labelText="Number" name="number" />
+        </Form>
+      </Formik>,
+    );
+    return screen.getByLabelText('number') as HTMLInputElement;
+  };
+
+  it('exists', async () => {
+    const input = await setupInput();
+    expect(input.type).toEqual('number');
+  });
+
+  it('can input data', async () => {
+    const user = userEvent.setup();
+
+    const input = await setupInput();
+    const expected = 1;
+
+    await user.type(input, expected.toString());
+    await user.tab();
+
+    expect(input.valueAsNumber).toEqual(expected);
+  });
+});
+
+describe.skip('text input', () => {
+  const setupInput = async () => {
+    render(
+      <Formik initialValues={{ text: '' }} onSubmit={null}>
+        <Form>
+          <Input id="text" labelText="Text" name="text" placeholder="Enter text" />
+        </Form>
+      </Formik>,
+    );
+    return screen.getByLabelText('text') as HTMLInputElement;
+  };
+
+  it('exists', async () => {
+    const input = await setupInput();
+    expect(input.type).toEqual('text');
+  });
+
+  it('can input data', async () => {
+    const user = userEvent.setup();
+
+    const input = await setupInput();
+    const expected = 'Some text';
+
+    await user.type(input, expected);
+    await user.tab();
+
+    expect(input.value).toEqual(expected);
+  });
+});
+
+describe.skip('telephone number input', () => {
+  const setupInput = async () => {
+    render(
+      <Formik initialValues={{ telephoneNumber: '' }} onSubmit={null}>
+        <Form>
+          <Input id="tel" labelText="Telephone Number" name="telephoneNumber" placeholder="Enter telephone number" />
+        </Form>
+      </Formik>,
+    );
+    return screen.getByLabelText('telephoneNumber') as HTMLInputElement;
+  };
+
+  it('exists', async () => {
+    const input = await setupInput();
+    expect(input.type).toEqual('tel');
+  });
+
+  it('can input data', async () => {
+    const user = userEvent.setup();
+
+    const input = await setupInput();
+    const expected = '0800001066';
+
+    await user.type(input, expected);
+    await user.tab();
+
+    expect(input.value).toEqual(expected);
+  });
+});
+
+describe.skip('date input', () => {
+  const setupInput = async () => {
+    render(
+      <Formik initialValues={{ date: '' }} onSubmit={null}>
+        <Form>
+          <Input id="date" labelText="date" name="date" />
+        </Form>
+      </Formik>,
+    );
+    return screen.getByLabelText('date') as HTMLInputElement;
+  };
+
+  it('exists', async () => {
+    const input = await setupInput();
+    expect(input.type).toEqual('date');
+  });
+
+  it('can input data', async () => {
+    const user = userEvent.setup();
+
+    const input = await setupInput();
+    const expected = '1990-09-10';
+
+    await user.type(input, expected);
+    await user.tab();
+
+    expect(input.value).toEqual(expected);
+  });
+});
+
+describe.skip('checkbox input', () => {
+  const setupInput = async () => {
+    render(
+      <Formik initialValues={{ checkbox: false }} onSubmit={null}>
+        <Form>
+          <Input id="checkbox" labelText="checkbox" name="checkbox" />
+        </Form>
+      </Formik>,
+    );
+    return screen.getByLabelText('checkbox') as HTMLInputElement;
+  };
+
+  it('exists', async () => {
+    const input = await setupInput();
+    expect(input.type).toEqual('checkbox');
+  });
+
+  it('can input data', async () => {
+    const user = userEvent.setup();
+    const input = await setupInput();
+
+    const expected = true;
+
+    await user.click(input);
+    await user.tab();
+
+    expect(input.checked).toEqual(expected);
+  });
+
+  it('can update data', async () => {
+    const user = userEvent.setup();
+    const input = await setupInput();
+
+    const expected = false;
+
+    await user.click(input);
+    await user.tab();
+
+    await user.click(input);
+    await user.tab();
+
+    expect(input.checked).toEqual(expected);
+  });
+});

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { useField } from 'formik';
+import { useTranslation } from 'react-i18next';
+
+interface SelectInputProps {
+  name: string;
+  options: Array<string>;
+  label: string;
+  required?: boolean;
+}
+
+export const SelectInput: React.FC<SelectInputProps> = ({ name, options, label, required }) => {
+  const [field] = useField(name);
+  const { t } = useTranslation();
+  const selectOptions = [
+    <SelectItem disabled hidden text={`Select ${label}`} key="" value="" />,
+    ...options.map((currentOption, index) => <SelectItem text={currentOption} value={currentOption} key={index} />),
+  ];
+
+  const labelText = required ? label : `${label} (${t('optional', 'optional')})`;
+
+  return (
+    <div style={{ marginBottom: '1rem' }}>
+      <Layer>
+        <Select id="identifier" {...field} labelText={labelText}>
+          {selectOptions}
+        </Select>
+      </Layer>
+    </div>
+  );
+};

package/src/patient-registration/input/basic-input/select/select-input.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { SelectInput } from './select-input.component';
+
+describe.skip('select input', () => {
+  const setupSelect = async () => {
+    render(
+      <Formik initialValues={{ select: '' }} onSubmit={null}>
+        <Form>
+          <SelectInput label="Select" name="select" options={['A Option', 'B Option']} />
+        </Form>
+      </Formik>,
+    );
+    return screen.getByLabelText('select') as HTMLInputElement;
+  };
+
+  it('exists', async () => {
+    const input = await setupSelect();
+    expect(input.type).toEqual('select-one');
+  });
+
+  it('can input data', async () => {
+    const input = await setupSelect();
+    const expected = 'A Option';
+
+    fireEvent.change(input, { target: { value: expected } });
+    fireEvent.blur(input);
+
+    await waitFor(() => expect(input.value).toEqual(expected));
+  });
+});

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

@@ -0,0 +1,76 @@
+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';
+
+interface ComboInputProps extends Omit<ComboBoxProps, 'items'> {
+  name: string;
+  labelText: string;
+  placeholder?: string;
+  setSelectedValue: any;
+  selected: string;
+  textFieldName: string;
+  required?: boolean;
+}
+
+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);
+        });
+    }
+  };
+
+  if (error) {
+    return <span>{t(`${error.message}`)}</span>;
+  }
+
+  return (
+    <div style={{ marginBottom: '1rem' }}>
+      <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}
+        />
+      </Layer>
+    </div>
+  );
+};

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

@@ -0,0 +1,43 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Form, Formik } from 'formik';
+import { ComboInput } from './combo-input.component';
+import React from 'react';
+
+describe('Combo box input', () => {
+  const setupInput = async () => {
+    const selected = null;
+    const setSelectedValue = null;
+    render(
+      <Formik initialValues={{ text: '' }} onSubmit={null}>
+        <Form>
+          <ComboInput
+            selected={''}
+            setSelectedValue={setSelectedValue}
+            id="text"
+            labelText="Text"
+            name="text"
+            textFieldName="text"
+            placeholder="Enter text"
+            required
+          />
+        </Form>
+      </Formik>,
+    );
+    return screen.getByLabelText('Text') as HTMLInputElement;
+  };
+
+  it('exists', async () => {
+    const input = await setupInput();
+    expect(input.type).toEqual('text');
+  });
+
+  it('can input data', async () => {
+    const input = await setupInput();
+    const expected = 'Some Text';
+
+    fireEvent.change(input, { target: { value: expected } });
+    fireEvent.blur(input);
+
+    await waitFor(() => expect(input.value).toEqual(expected));
+  });
+});

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

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, Search, SearchProps } from '@carbon/react';
+import styles from './autosuggest.scss';
+
+interface AutosuggestProps extends SearchProps {
+  getDisplayValue: Function;
+  getFieldValue: Function;
+  getSearchResults: (query: string) => Promise<any>;
+  onSuggestionSelected: (field: string, value: string) => void;
+}
+
+export const Autosuggest: React.FC<any> = ({
+  getDisplayValue,
+  getFieldValue,
+  getSearchResults,
+  onSuggestionSelected,
+  ...searchProps
+}) => {
+  const [suggestions, setSuggestions] = useState([]);
+  const searchBox = useRef(null);
+  const wrapper = useRef(null);
+  const { t } = useTranslation();
+  const { name, labelText } = searchProps;
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutsideComponent);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideComponent);
+    };
+  }, [wrapper]);
+
+  const handleClickOutsideComponent = (e) => {
+    if (wrapper.current && !wrapper.current.contains(e.target)) {
+      setSuggestions([]);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    if (query) {
+      getSearchResults(query).then((suggestions) => {
+        setSuggestions(suggestions);
+      });
+    } else {
+      setSuggestions([]);
+    }
+  };
+
+  const handleClick = (index: number) => {
+    const display = getDisplayValue(suggestions[index]);
+    const value = getFieldValue(suggestions[index]);
+    searchBox.current.value = display;
+    onSuggestionSelected(name, value);
+    setSuggestions([]);
+  };
+
+  return (
+    <div className={styles.autocomplete} ref={wrapper}>
+      <label className="cds--label">{labelText}</label>
+      <Layer>
+        <Search
+          id="autosuggest"
+          onChange={handleChange}
+          ref={searchBox}
+          className={styles.autocompleteSearch}
+          {...searchProps}
+        />
+      </Layer>
+      {suggestions.length > 0 && (
+        <ul className={styles.suggestions}>
+          {suggestions.map((suggestion, index) => (
+            <li //eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
+              key={index}
+              onClick={(e) => handleClick(index)}>
+              {getDisplayValue(suggestion)}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.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 {
+  position: relative;
+  border-top-width: 0;
+  list-style: none;
+  margin-top: 0;
+  max-height: 143px;
+  overflow-y: auto;
+  padding-left: 0;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  background-color: #fff;
+  margin-bottom: 20px;
+  z-index: 99;
+}
+
+.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/input/custom-input/autosuggest/autosuggest.test.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Autosuggest } from './autosuggest.component';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
+
+const mockPersons = [
+  {
+    uuid: 'randomuuid1',
+    display: 'John Doe',
+  },
+  {
+    uuid: 'randomuuid2',
+    display: 'John Smith',
+  },
+  {
+    uuid: 'randomuuid3',
+    display: 'James Smith',
+  },
+  {
+    uuid: 'randomuuid4',
+    display: 'Spider Man',
+  },
+];
+
+const mockGetSearchResults = async (query: string) => {
+  return mockPersons.filter((person) => {
+    return person.display.toUpperCase().includes(query.toUpperCase());
+  });
+};
+
+const handleSuggestionSelected = jest.fn((field, value) => [field, value]);
+
+describe('autosuggest', () => {
+  const setup = () => {
+    render(
+      <BrowserRouter>
+        <Autosuggest
+          labelText=""
+          name="person"
+          placeholder="Find Person"
+          onSuggestionSelected={handleSuggestionSelected}
+          getSearchResults={mockGetSearchResults}
+          getDisplayValue={(item) => item.display}
+          getFieldValue={(item) => item.uuid}
+        />
+      </BrowserRouter>,
+    );
+  };
+
+  it('should render a search box', () => {
+    setup();
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+    expect(screen.queryByRole('list')).toBeNull();
+  });
+
+  it('shows search results in an ul', async () => {
+    setup();
+    const searchbox = screen.getByRole('searchbox');
+    fireEvent.change(searchbox, { target: { value: 'john' } });
+    const list = await waitFor(() => screen.getByRole('list'));
+    expect(list).toBeInTheDocument();
+    expect(list.children).toHaveLength(2);
+  });
+
+  it('creates li items whose inner text is gotten through getDisplayValue', async () => {
+    setup();
+    const searchbox = screen.getByRole('searchbox');
+    fireEvent.change(searchbox, { target: { value: 'john' } });
+    const list = await waitFor(() => screen.getAllByRole('listitem'));
+    expect(list[0].textContent).toBe('John Doe');
+    expect(list[1].textContent).toBe('John Smith');
+  });
+
+  xit('triggers onSuggestionSelected with correct values when li is clicked', async () => {
+    setup();
+    const searchbox = screen.getByRole('searchbox');
+    fireEvent.change(searchbox, { target: { value: 'john' } });
+    const listitems = await waitFor(() => screen.getAllByRole('listitem'));
+    fireEvent.click(listitems[0]);
+    expect(handleSuggestionSelected).toHaveBeenNthCalledWith(1, 'person', 'randomuuid1');
+  });
+
+  it.skip('sets search box value to selected suggestion', async () => {
+    setup();
+    let searchbox = screen.getByRole('searchbox');
+    fireEvent.change(searchbox, { target: { value: 'john' } });
+    const listitems = await waitFor(() => screen.getAllByRole('listitem'));
+    fireEvent.click(listitems[0]);
+    searchbox = screen.getByRole('searchbox');
+    expect(searchbox.textContent).toBe('John Doe');
+  });
+
+  xit('clears suggestions when a suggestion is selected', async () => {
+    setup();
+    // screen.getByRole('x');
+    let list = screen.queryByRole('list');
+    expect(list).toBeNull();
+    const searchbox = screen.getByRole('searchbox');
+    fireEvent.change(searchbox, { target: { value: 'john' } });
+    list = await waitFor(() => screen.getByRole('list'));
+    expect(list).toBeInTheDocument();
+    const listitems = screen.getAllByRole('listitem');
+    fireEvent.click(listitems[0]);
+    list = screen.queryByRole('list');
+    expect(list).toBeNull();
+  });
+});

package/src/patient-registration/input/custom-input/estimated-age/estimated-age-input.component.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useField } from 'formik';
+import dayjs from 'dayjs';
+import { Input } from '../../basic-input/input/input.component';
+import styles from './../../input.scss';
+
+interface EstimatedAgeInputProps {
+  yearsName: string;
+  monthsName: string;
+  setBirthdate(field: string, value: any, shouldValidate?: boolean): void;
+}
+
+export const EstimatedAgeInput: React.FC<EstimatedAgeInputProps> = ({ yearsName, monthsName, setBirthdate }) => {
+  const [yearsField] = useField(yearsName);
+  const [monthsField] = useField(monthsName);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    setBirthdate(
+      'birthdate',
+      dayjs().subtract(yearsField.value, 'year').subtract(monthsField.value, 'month').toISOString().split('T')[0],
+    );
+  }, [yearsField.value, monthsField.value, setBirthdate]);
+
+  return (
+    <main className={styles.fieldRow}>
+      <Input id="number" labelText={t('years', 'Years')} name={yearsName} />
+      <Input id="number" labelText={t('months', 'Months')} name={monthsName} />
+    </main>
+  );
+};

package/src/patient-registration/input/custom-input/estimated-age/estimated-age-input.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { EstimatedAgeInput } from './estimated-age-input.component';
+
+describe.skip('estimated age input', () => {
+  const mockSetBirthdate = jest.fn();
+
+  const setupInput = async () => {
+    render(
+      <Formik initialValues={{ years: 0, months: 0 }} onSubmit={null}>
+        <Form>
+          <EstimatedAgeInput yearsName="years" monthsName="months" setBirthdate={mockSetBirthdate} />
+        </Form>
+      </Formik>,
+    );
+    const years = screen.getByLabelText('years') as HTMLInputElement;
+    const months = screen.getByLabelText('months') as HTMLInputElement;
+
+    return {
+      years,
+      months,
+    };
+  };
+
+  it('exists', async () => {
+    const inputs = await setupInput();
+    expect(inputs.years.type).toEqual('number');
+    expect(inputs.months.type).toEqual('number');
+  });
+  it('calls setBirthdate', async () => {
+    mockSetBirthdate.mockReset();
+    await setupInput();
+    expect(mockSetBirthdate.mock.calls.length).toBe(1);
+  });
+});