@ampath/esm-patient-registration-app 6.0.1-pre.6

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

@@ -0,0 +1,159 @@
+import React, { type ChangeEvent, useCallback, useContext } from 'react';
+import { ContentSwitcher, DatePicker, DatePickerInput, Layer, Switch, TextInput } from '@carbon/react';
+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 { type RegistrationConfig } from '../../../config-schema';
+import styles from '../field.scss';
+
+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<RegistrationConfig>();
+  const allowEstimatedBirthDate = dateOfBirth?.allowEstimatedDateOfBirth;
+  const [{ value: dobUnknown }] = useField('birthdateEstimated');
+  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 = useCallback(
+    (e: { name?: string | number }) => {
+      setFieldValue('birthdateEstimated', e.name === 'unknown');
+      setFieldValue('birthdate', '');
+      setFieldValue('yearsEstimated', 0);
+      setFieldValue('monthsEstimated', '');
+    },
+    [setFieldValue],
+  );
+
+  const onDateChange = useCallback(
+    (birthdate: Date[]) => {
+      setFieldValue('birthdate', birthdate[0]);
+    },
+    [setFieldValue],
+  );
+
+  const onEstimatedYearsChange = useCallback(
+    (ev: ChangeEvent<HTMLInputElement>) => {
+      const years = +ev.target.value;
+
+      if (!isNaN(years) && years < 140 && years >= 0) {
+        setFieldValue('yearsEstimated', years);
+        setFieldValue('birthdate', calcBirthdate(years, monthsEstimateMeta.value, dateOfBirth));
+      }
+    },
+    [setFieldValue, dateOfBirth, monthsEstimateMeta.value],
+  );
+
+  const onEstimatedMonthsChange = useCallback(
+    (ev: ChangeEvent<HTMLInputElement>) => {
+      const months = +ev.target.value;
+
+      if (!isNaN(months)) {
+        setFieldValue('monthsEstimated', months);
+        setFieldValue('birthdate', calcBirthdate(yearsEstimateMeta.value, months, dateOfBirth));
+      }
+    },
+    [setFieldValue, dateOfBirth, yearsEstimateMeta.value],
+  );
+
+  const updateBirthdate = useCallback(() => {
+    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));
+  }, [setFieldValue, monthsEstimateMeta, yearsEstimateMeta, dateOfBirth]);
+
+  return (
+    <div className={styles.halfWidthInDesktopView}>
+      <h4 className={styles.productiveHeading02Light}>{t('birthFieldLabelText', 'Birth')}</h4>
+      {(allowEstimatedBirthDate || dobUnknown) && (
+        <div className={styles.dobField}>
+          <div className={styles.dobContentSwitcherLabel}>
+            <span className={styles.label01}>{t('dobToggleLabelText', 'Date of Birth Known?')}</span>
+          </div>
+          <ContentSwitcher onChange={onToggle} selectedIndex={dobUnknown ? 1 : 0}>
+            <Switch name="known" text={t('yes', 'Yes')} />
+            <Switch name="unknown" text={t('no', 'No')} />
+          </ContentSwitcher>
+        </div>
+      )}
+      <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>
+          </div>
+        ) : (
+          <div className={styles.grid}>
+            <div className={styles.dobField}>
+              <Layer>
+                <TextInput
+                  id="yearsEstimated"
+                  type="number"
+                  name={yearsEstimated.name}
+                  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}
+                />
+              </Layer>
+            </div>
+            <div className={styles.dobField}>
+              <Layer>
+                <TextInput
+                  id="monthsEstimated"
+                  type="number"
+                  name={monthsEstimated.name}
+                  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}
+                />
+              </Layer>
+            </div>
+          </div>
+        )}
+      </Layer>
+    </div>
+  );
+};

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Formik, Form } from 'formik';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DobField } from './dob.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { initialFormValues } from '../../patient-registration.component';
+import { type 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: {
+          allowEstimatedDateOfBirth: true,
+          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,
+            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,47 @@
+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, type RegistrationConfig } from '../../config-schema';
+import { CustomField } from './custom-field.component';
+import { AddressComponent } from './address/address-field.component';
+import { PhoneField } from './phone/phone-field.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 <AddressComponent />;
+    case 'id':
+      return <Identifiers />;
+    case 'phone':
+      return <PhoneField />;
+    default:
+      return <CustomField name={name} />;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { type FetchResponse, openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { type ConceptAnswers, type 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) {
+    showSnackbar({
+      title: error.name,
+      subtitle: 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) {
+    showSnackbar({
+      title: error.name,
+      subtitle: error.message,
+      kind: 'error',
+    });
+  }
+  return { data: data?.data?.answers, isLoading };
+}

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

@@ -0,0 +1,127 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: 1rem;
+}
+
+.productiveHeading02Light {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: 1rem;
+  color: #525252;
+}
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: spacing.$spacing-05;
+}
+
+.halfWidthInDesktopView {
+  width: calc(50% - spacing.$spacing-05);
+}
+
+.patientPhoto {
+  display: flex;
+  justify-content: center;
+}
+
+.nameField {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+.nameField > :global(.cds--content-switcher) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: max-content;
+  justify-content: flex-start;
+}
+
+.contentSwitcher {
+  margin-bottom: 1rem;
+}
+
+.dobField > :global(.cds--content-switcher) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: max-content;
+  justify-content: flex-start;
+}
+
+.photoExtension {
+  margin-bottom: 1rem;
+  grid-row: 1;
+  grid-column: 2;
+  justify-self: center;
+}
+
+.sexField,
+.dobField {
+  margin-bottom: spacing.$spacing-05;
+}
+
+.dobContentSwitcherLabel {
+  margin-bottom: spacing.$spacing-03;
+}
+
+.identifierLabelText {
+  display: flex;
+  align-items: center;
+}
+
+.setIDNumberButton {
+  margin-bottom: spacing.$spacing-05;
+}
+
+.setIDNumberButton > svg {
+  margin-left: spacing.$spacing-03;
+}
+
+.customField {
+  margin-bottom: spacing.$spacing-05;
+}
+
+.attributeField {
+  margin-bottom: spacing.$spacing-05;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+  }
+  .nameField {
+    grid-row: 2;
+    grid-column: 1;
+  }
+  .photoExtension {
+    grid-column: 1;
+    grid-row: 1;
+    justify-self: start;
+  }
+  .radioButton label {
+    height: spacing.$spacing-09 !important;
+  }
+  .halfWidthInDesktopView {
+    width: 100%;
+  }
+}
+
+.radioFieldError {
+  color: #da1e28;
+  display: block;
+  font-weight: 400;
+  max-height: 12.5rem;
+  overflow: visible;
+  font-size: 0.75rem;
+  letter-spacing: 0.32px;
+  line-height: 1.34;
+  margin: 0.25rem 0 0;
+}