@olaboot/esm-patient-registration-app 9.2.0

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { reportError, useConfig } from '@openmrs/esm-framework';
+import { builtInFields, type RegistrationConfig } from '../../config-schema';
+import { AddressComponent } from './address/address-field.component';
+import { CauseOfDeathField } from './cause-of-death/cause-of-death.component';
+import { CustomField } from './custom-field.component';
+import { DateAndTimeOfDeathField } from './date-and-time-of-death/date-and-time-of-death.component';
+import { DobField } from './dob/dob.component';
+import { GenderField } from './gender/gender-field.component';
+import { Identifiers } from './id/id-field.component';
+import { NameField } from './name/name-field.component';
+import { PhoneField } from './phone/phone-field.component';
+
+export interface FieldProps {
+  name: string;
+}
+
+export function Field({ name }: FieldProps) {
+  const config = useConfig<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 'dateAndTimeOfDeath':
+      return <DateAndTimeOfDeathField />;
+    case 'causeOfDeath':
+      return <CauseOfDeathField />;
+    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,42 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { type ConceptAnswers, type ConceptResponse } from '../patient-registration.types';
+import { useMemo } from 'react';
+
+export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoading: boolean } {
+  const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
+    shouldFetch ? `${restBaseUrl}/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+  if (error) {
+    showSnackbar({
+      title: error.name,
+      subtitle: error.message,
+      kind: 'error',
+    });
+  }
+  const results = useMemo(() => ({ data: data?.data, isLoading }), [data, isLoading]);
+  return results;
+}
+
+export function useConceptAnswers(conceptUuid: string): {
+  data: Array<ConceptAnswers>;
+  isLoading: boolean;
+  error: Error;
+} {
+  const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
+    shouldFetch ? `${restBaseUrl}/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+  if (error) {
+    showSnackbar({
+      title: error.name,
+      subtitle: error.message,
+      kind: 'error',
+    });
+  }
+  const results = useMemo(() => ({ data: data?.data?.answers, isLoading, error }), [isLoading, error, data]);
+  return results;
+}

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

@@ -0,0 +1,171 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: layout.$spacing-05;
+}
+
+.productiveHeading02Light {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: layout.$spacing-05;
+  color: colors.$gray-70;
+}
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: layout.$spacing-05;
+}
+
+.halfWidthInDesktopView {
+  width: calc(50% - layout.$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: layout.$spacing-05;
+}
+
+.dobField > :global(.cds--content-switcher) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: max-content;
+  justify-content: flex-start;
+}
+
+.photoExtension {
+  margin-bottom: layout.$spacing-05;
+  grid-row: 1;
+  grid-column: 2;
+  justify-self: center;
+}
+
+.sexField,
+.dobField,
+.dodField {
+  margin-bottom: layout.$spacing-05;
+
+  span {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: start;
+  }
+}
+
+.nonCodedCauseOfDeath {
+  margin-top: layout.$spacing-04;
+}
+
+.timeOfDeathContainer {
+  display: flex;
+  align-items: center;
+}
+
+.timeOfDeathField {
+  flex: none;
+  margin-left: layout.$spacing-02;
+}
+
+.dobContentSwitcherLabel {
+  margin-bottom: layout.$spacing-03;
+}
+
+.identifierLabelText {
+  display: flex;
+  align-items: center;
+}
+
+.arrowRightIcon {
+  fill: currentColor !important;
+}
+
+.configureIdentifiersButton {
+  display: flex;
+  align-items: center;
+  margin: 0 0 layout.$spacing-05 layout.$spacing-05;
+
+  svg {
+    margin-left: layout.$spacing-03;
+  }
+
+  .customField {
+    margin-bottom: layout.$spacing-05;
+  }
+}
+
+.attributeField {
+  margin-bottom: layout.$spacing-05;
+}
+
+.locationAttributeFieldContainer {
+  position: relative;
+
+  .loadingContainer {
+    background-color: colors.$white;
+    position: absolute;
+    right: layout.$spacing-07;
+    bottom: layout.$spacing-02;
+  }
+}
+
+: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: layout.$spacing-09 !important;
+  }
+
+  .halfWidthInDesktopView {
+    width: 100%;
+  }
+}
+
+.radioFieldError {
+  color: colors.$red-60;
+  display: block;
+  font-weight: 400;
+  max-height: 12.5rem;
+  overflow: visible;
+  font-size: layout.$spacing-04;
+  letter-spacing: 0.32px;
+  line-height: 1.34;
+  margin: layout.$spacing-02 0 0;
+}

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

@@ -0,0 +1,330 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { Field } from './field.component';
+import { esmPatientRegistrationSchema, type RegistrationConfig } from '../../config-schema';
+import { type Resources } from '../../offline.resources';
+import type { AddressTemplate, FormValues } from '../patient-registration.types';
+import { PatientRegistrationContextProvider } from '../patient-registration-context';
+import { ResourcesContextProvider } from '../../resources-context';
+import { renderWithContext } from 'tools';
+
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+const predefinedAddressTemplate = {
+  uuid: 'test-address-template-uuid',
+  property: 'layout.address.format',
+  description: 'Test Address Template',
+  display:
+    'Layout - Address Format = <org.openmrs.layout.address.AddressTemplate>\n     <nameMappings class="properties">\n       <property name="postalCode" value="Location.postalCode"/>\n       <property name="address2" value="Location.address2"/>\n       <property name="address1" value="Location.address1"/>\n       <property name="country" value="Location.country"/>\n       <property name="stateProvince" value="Location.stateProvince"/>\n       <property name="cityVillage" value="Location.cityVillage"/>\n     </nameMappings>\n     <sizeMappings class="properties">\n       <property name="postalCode" value="10"/>\n       <property name="address2" value="40"/>\n       <property name="address1" value="40"/>\n       <property name="country" value="10"/>\n       <property name="stateProvince" value="10"/>\n       <property name="cityVillage" value="10"/>\n     </sizeMappings>\n     <lineByLineFormat>\n       <string>address1</string>\n       <string>address2</string>\n       <string>cityVillage stateProvince country postalCode</string>\n     </lineByLineFormat>\n   </org.openmrs.layout.address.AddressTemplate>',
+  value:
+    '<org.openmrs.layout.address.AddressTemplate>\r\n     <nameMappings class="properties">\r\n       <property name="postalCode" value="Location.postalCode"/>\r\n       <property name="address2" value="Location.address2"/>\r\n       <property name="address1" value="Location.address1"/>\r\n       <property name="country" value="Location.country"/>\r\n       <property name="stateProvince" value="Location.stateProvince"/>\r\n       <property name="cityVillage" value="Location.cityVillage"/>\r\n     </nameMappings>\r\n     <sizeMappings class="properties">\r\n       <property name="postalCode" value="4"/>\r\n       <property name="address1" value="40"/>\r\n       <property name="address2" value="40"/>\r\n       <property name="country" value="10"/>\r\n       <property name="stateProvince" value="10"/>\r\n       <property name="cityVillage" value="10"/>\r\n       <asset name="cityVillage" value="10"/>\r\n     </sizeMappings>\r\n     <lineByLineFormat>\r\n       <string>address1 address2</string>\r\n       <string>cityVillage stateProvince postalCode</string>\r\n       <string>country</string>\r\n     </lineByLineFormat>\r\n     <elementDefaults class="properties">\r\n            <property name="country" value=""/>\r\n     </elementDefaults>\r\n     <elementRegex class="properties">\r\n            <property name="address1" value="[a-zA-Z]+$"/>\r\n     </elementRegex>\r\n     <elementRegexFormats class="properties">\r\n            <property name="address1" value="Countries can only be letters"/>\r\n     </elementRegexFormats>\r\n   </org.openmrs.layout.address.AddressTemplate>',
+};
+
+const mockIdentifierTypes = [
+  {
+    fieldName: 'openMrsId',
+    format: '',
+    identifierSources: [
+      {
+        uuid: '8549f706-7e85-4c1d-9424-217d50a2988b',
+        name: 'Generator for OpenMRS ID',
+        description: 'Generator for OpenMRS ID',
+        baseCharacterSet: '0123456789ACDEFGHJKLMNPRTUVWXY',
+        prefix: '',
+      },
+    ],
+    isPrimary: true,
+    name: 'OpenMRS ID',
+    required: true,
+    uniquenessBehavior: 'UNIQUE' as const,
+    uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+  },
+  {
+    fieldName: 'idCard',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'ID Card',
+    required: false,
+    uniquenessBehavior: 'UNIQUE' as const,
+    uuid: 'b4143563-16cd-4439-b288-f83d61670fc8',
+  },
+  {
+    fieldName: 'legacyId',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'Legacy ID',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '22348099-3873-459e-a32e-d93b17eda533',
+  },
+  {
+    fieldName: 'oldIdentificationNumber',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'Old Identification Number',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '8d79403a-c2cc-11de-8d13-0010c6dffd0f',
+  },
+  {
+    fieldName: 'openMrsIdentificationNumber',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'OpenMRS Identification Number',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '8d793bee-c2cc-11de-8d13-0010c6dffd0f',
+  },
+];
+
+const mockResourcesContextValue: Resources = {
+  addressTemplate: predefinedAddressTemplate as unknown as AddressTemplate,
+  currentSession: {
+    authenticated: true,
+    sessionId: 'JSESSION',
+    currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
+  },
+  relationshipTypes: [],
+  identifierTypes: [...mockIdentifierTypes],
+};
+
+const initialContextValues = {
+  currentPhoto: 'data:image/png;base64,1234567890',
+  identifierTypes: [],
+  inEditMode: false,
+  initialFormValues: {} as FormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setFieldTouched: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: {} as FormValues,
+};
+
+describe('Field', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+    });
+  });
+
+  it('should render NameField component when name prop is "name"', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        name: {
+          allowUnidentifiedPatients: true,
+          displayMiddleName: true,
+          defaultUnknownGivenName: 'UNKNOWN',
+          defaultUnknownFamilyName: 'UNKNOWN',
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={jest.fn()}>
+        <Form>
+          <PatientRegistrationContextProvider value={initialContextValues}>
+            <Field name="name" />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    expect(screen.getByText('Full Name')).toBeInTheDocument();
+  });
+
+  it('should render GenderField component when name prop is "gender"', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        gender: [
+          {
+            value: 'Male',
+            label: 'Male',
+            id: 'male',
+          },
+        ],
+      } as unknown as RegistrationConfig['fieldConfigurations'],
+    });
+
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={jest.fn()}>
+        <Form>
+          <PatientRegistrationContextProvider value={initialContextValues}>
+            <Field name="gender" />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+    expect(screen.getByLabelText('Male')).toBeInTheDocument();
+  });
+
+  it('should render DobField component when name prop is "dob"', () => {
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={jest.fn()}>
+        <Form>
+          <PatientRegistrationContextProvider value={initialContextValues}>
+            <Field name="dob" />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    expect(screen.getByText('Birth')).toBeInTheDocument();
+  });
+
+  it('should render AddressComponent component when name prop is "address"', () => {
+    jest.mock('./address/address-hierarchy.resource', () => ({
+      ...jest.requireActual('../address-hierarchy.resource'),
+      useOrderedAddressHierarchyLevels: jest.fn(),
+    }));
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: false,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+          requiredAddressFields: [],
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={jest.fn()}>
+        <Form>
+          <PatientRegistrationContextProvider value={initialContextValues}>
+            <Field name="address" />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    expect(screen.getByText('Address')).toBeInTheDocument();
+  });
+
+  it('should render Identifiers component when name prop is "id"', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      defaultPatientIdentifierTypes: ['OpenMRS ID'],
+    });
+
+    const openmrsID = {
+      name: 'OpenMRS ID',
+      fieldName: 'openMrsId',
+      required: true,
+      uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+      format: null,
+      isPrimary: true,
+      identifierSources: [
+        {
+          uuid: '691eed12-c0f1-11e2-94be-8c13b969e334',
+          name: 'Generator 1 for OpenMRS ID',
+          autoGenerationOption: {
+            manualEntryEnabled: false,
+            automaticGenerationEnabled: true,
+          },
+        },
+        {
+          uuid: '01af8526-cea4-4175-aa90-340acb411771',
+          name: 'Generator 2 for OpenMRS ID',
+          autoGenerationOption: {
+            manualEntryEnabled: true,
+            automaticGenerationEnabled: true,
+          },
+        },
+      ],
+      identifierUuid: 'openmrs-identifier-uuid',
+      identifierTypeUuid: 'openmrs-id-identifier-type-uuid',
+      initialValue: '12345',
+      identifierValue: '12345',
+      identifierName: 'OpenMRS ID',
+      preferred: true,
+      selectedSource: {
+        uuid: 'openmrs-id-selected-source-uuid',
+        name: 'Generator 1 for OpenMRS ID',
+        autoGenerationOption: {
+          manualEntryEnabled: false,
+          automaticGenerationEnabled: true,
+        },
+      },
+      autoGenerationSource: null,
+    };
+
+    const updatedContextValues = {
+      currentPhoto: 'data:image/png;base64,1234567890',
+      identifierTypes: [],
+      inEditMode: false,
+      initialFormValues: { identifiers: { openmrsID } } as unknown as FormValues,
+      isOffline: false,
+      setCapturePhotoProps: jest.fn(),
+      setFieldValue: jest.fn(),
+      setInitialFormValues: jest.fn(),
+      validationSchema: null,
+      values: { identifiers: { openmrsID } } as unknown as FormValues,
+      setFieldTouched: jest.fn(),
+    };
+
+    renderWithContext(
+      <Formik initialValues={{}} onSubmit={jest.fn()}>
+        <Form>
+          <PatientRegistrationContextProvider value={updatedContextValues}>
+            <Field name="id" />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+    expect(screen.getByText('Identifiers')).toBeInTheDocument();
+  });
+
+  it('should return null and report an error for an invalid field name', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldDefinitions: [{ id: 'weight' }] as RegistrationConfig['fieldDefinitions'],
+    });
+
+    let error = null;
+
+    try {
+      renderWithContext(
+        <Formik initialValues={{}} onSubmit={jest.fn()}>
+          <Form>
+            <Field name="invalidField" />
+          </Form>
+        </Formik>,
+        ResourcesContextProvider,
+        mockResourcesContextValue,
+      );
+    } catch (err) {
+      error = err;
+    }
+
+    expect(error).toMatch(/Invalid field name 'invalidField'. Valid options are /);
+    expect(screen.queryByTestId('invalid-field')).not.toBeInTheDocument();
+
+    consoleError.mockRestore();
+  });
+});

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { RadioButton, RadioButtonGroup } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useField } from 'formik';
+import { type RegistrationConfig } from '../../../config-schema';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import { useConfig } from '@openmrs/esm-framework';
+import styles from '../field.scss';
+
+export const GenderField: React.FC = () => {
+  const { t } = useTranslation();
+  const { fieldConfigurations } = useConfig<RegistrationConfig>();
+  const { setFieldValue, setFieldTouched } = usePatientRegistrationContext();
+  const [field, meta] = useField('gender');
+  const fieldConfigs = fieldConfigurations?.gender;
+
+  const setGender = (gender: string) => {
+    setFieldValue('gender', gender);
+    setFieldTouched('gender', true, false);
+  };
+  /**
+   * DO NOT REMOVE THIS COMMENT HERE, ADDS TRANSLATION FOR SEX OPTIONS
+   * t('male', 'Male')
+   * t('female', 'Female')
+   * t('other', 'Other')
+   * t('unknown', 'Unknown')
+   */
+
+  return (
+    <div className={styles.halfWidthInDesktopView}>
+      <h4 className={styles.productiveHeading02Light}>{t('sexFieldLabelText', 'Sex')}</h4>
+      <div className={styles.sexField}>
+        <RadioButtonGroup
+          name="gender"
+          legendText={t('genderLabelText', 'Sex')}
+          orientation="vertical"
+          onChange={setGender}
+          valueSelected={field.value}>
+          {fieldConfigs.map((option) => (
+            <RadioButton
+              id={`gender-option-${option.value}`}
+              key={option.label ?? option.value}
+              labelText={t(option.label ?? option.value, option.label ?? option.value)}
+              value={option.value}
+            />
+          ))}
+        </RadioButtonGroup>
+        {meta.touched && meta.error && (
+          <div className={styles.radioFieldError}>{t(meta.error, 'Gender is required')}</div>
+        )}
+      </div>
+    </div>
+  );
+};