@ampath/esm-patient-registration-app 6.0.1-pre.98 → 9.2.0-next.12

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

@@ -1,6 +1,7 @@
-import { type FetchResponse, openmrsFetch, showSnackbar, restBaseUrl } from '@openmrs/esm-framework';
+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 !== '';
@@ -15,10 +16,15 @@ export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoad
       kind: 'error',
     });
   }
-  return { data: data?.data, isLoading };
+  const results = useMemo(() => ({ data: data?.data, isLoading }), [data, isLoading]);
+  return results;
 }
 
-export function useConceptAnswers(conceptUuid: string): { data: Array<ConceptAnswers>; isLoading: boolean } {
+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,
@@ -31,5 +37,6 @@ export function useConceptAnswers(conceptUuid: string): { data: Array<ConceptAns
       kind: 'error',
     });
   }
-  return { data: data?.data?.answers, isLoading };
+  const results = useMemo(() => ({ data: data?.data?.answers, isLoading, error }), [isLoading, error, data]);
+  return results;
 }

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

@@ -1,16 +1,17 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@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: 1rem;
+  margin-bottom: layout.$spacing-05;
 }
 
 .productiveHeading02Light {
   @include type.type-style('heading-compact-02');
-  margin-bottom: 1rem;
-  color: #525252;
+  margin-bottom: layout.$spacing-05;
+  color: colors.$gray-70;
 }
 
 .label01 {
@@ -20,11 +21,11 @@
 .grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  column-gap: spacing.$spacing-05;
+  column-gap: layout.$spacing-05;
 }
 
 .halfWidthInDesktopView {
-  width: calc(50% - spacing.$spacing-05);
+  width: calc(50% - layout.$spacing-05);
 }
 
 .patientPhoto {
@@ -45,7 +46,7 @@
 }
 
 .contentSwitcher {
-  margin-bottom: 1rem;
+  margin-bottom: layout.$spacing-05;
 }
 
 .dobField > :global(.cds--content-switcher) {
@@ -56,19 +57,41 @@
 }
 
 .photoExtension {
-  margin-bottom: 1rem;
+  margin-bottom: layout.$spacing-05;
   grid-row: 1;
   grid-column: 2;
   justify-self: center;
 }
 
 .sexField,
-.dobField {
-  margin-bottom: spacing.$spacing-05;
+.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: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .identifierLabelText {
@@ -76,20 +99,37 @@
   align-items: center;
 }
 
-.setIDNumberButton {
-  margin-bottom: spacing.$spacing-05;
+.arrowRightIcon {
+  fill: currentColor !important;
 }
 
-.setIDNumberButton > svg {
-  margin-left: spacing.$spacing-03;
-}
+.configureIdentifiersButton {
+  display: flex;
+  align-items: center;
+  margin: 0 0 layout.$spacing-05 layout.$spacing-05;
 
-.customField {
-  margin-bottom: spacing.$spacing-05;
+  svg {
+    margin-left: layout.$spacing-03;
+  }
+
+  .customField {
+    margin-bottom: layout.$spacing-05;
+  }
 }
 
 .attributeField {
-  margin-bottom: spacing.$spacing-05;
+  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) {
@@ -97,31 +137,35 @@
     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;
+    height: layout.$spacing-09 !important;
   }
+
   .halfWidthInDesktopView {
     width: 100%;
   }
 }
 
 .radioFieldError {
-  color: #da1e28;
+  color: colors.$red-60;
   display: block;
   font-weight: 400;
   max-height: 12.5rem;
   overflow: visible;
-  font-size: 0.75rem;
+  font-size: layout.$spacing-04;
   letter-spacing: 0.32px;
   line-height: 1.34;
-  margin: 0.25rem 0 0;
+  margin: layout.$spacing-02 0 0;
 }

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

@@ -0,0 +1,329 @@
+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,
+          },
+        },
+      } 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

@@ -1,21 +1,22 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { RadioButton, RadioButtonGroup } from '@carbon/react';
-import styles from '../field.scss';
 import { useTranslation } from 'react-i18next';
-import { PatientRegistrationContext } from '../../patient-registration-context';
 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 { fieldConfigurations } = useConfig() as RegistrationConfig;
   const { t } = useTranslation();
+  const { fieldConfigurations } = useConfig<RegistrationConfig>();
+  const { setFieldValue, setFieldTouched } = usePatientRegistrationContext();
   const [field, meta] = useField('gender');
-  const { setFieldValue } = useContext(PatientRegistrationContext);
   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
@@ -29,14 +30,18 @@ export const GenderField: React.FC = () => {
     <div className={styles.halfWidthInDesktopView}>
       <h4 className={styles.productiveHeading02Light}>{t('sexFieldLabelText', 'Sex')}</h4>
       <div className={styles.sexField}>
-        <p className="cds--label">{t('genderLabelText', 'Sex')}</p>
-        <RadioButtonGroup name="gender" orientation="vertical" onChange={setGender} valueSelected={field.value}>
+        <RadioButtonGroup
+          name="gender"
+          legendText={t('genderLabelText', 'Sex')}
+          orientation="vertical"
+          onChange={setGender}
+          valueSelected={field.value}>
           {fieldConfigs.map((option) => (
             <RadioButton
-              key={option.label ?? option.value}
               id={`gender-option-${option.value}`}
-              value={option.value}
+              key={option.label ?? option.value}
               labelText={t(option.label ?? option.value, option.label ?? option.value)}
+              value={option.value}
             />
           ))}
         </RadioButtonGroup>