@kenyaemr/esm-patient-registration-app 7.0.0 → 7.0.2-pre.65

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"6.0.1-pre.1.0.6"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"7.0.2-pre.65"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "7.0.0",
+  "version": "7.0.2-pre.65",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",
@@ -18,7 +18,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -53,5 +53,6 @@
   },
   "devDependencies": {
     "webpack": "^5.74.0"
-  }
-}
+  },
+  "stableVersion": "7.0.1"
+}

package/src/config-schema.ts

@@ -12,6 +12,7 @@ export interface FieldDefinition {
   label?: string;
   uuid: string;
   placeholder?: string;
+  dateFormat?: string;
   showHeading: boolean;
   validation?: {
     required: boolean;

package/src/offline.resources.ts

@@ -75,13 +75,15 @@ export async function fetchPatientIdentifierTypesWithSources(): Promise<Array<Pa
   // @ts-ignore Reason: The required props of the type are generated below.
   const identifierTypes: Array<PatientIdentifierType> = patientIdentifierTypes.filter(Boolean);
 
-  const [autoGenOptions, ...allIdentifierSources] = await Promise.all([
+  const [autoGenOptions, identifierSourcesResponse] = await Promise.all([
     fetchAutoGenerationOptions(),
-    ...identifierTypes.map((identifierType) => fetchIdentifierSources(identifierType.uuid)),
+    fetchIdentifierSources(),
   ]);
 
+  const allIdentifierSources = identifierSourcesResponse.data.results;
+
   for (let i = 0; i < identifierTypes?.length; i++) {
-    identifierTypes[i].identifierSources = allIdentifierSources[i].data.results.map((source) => {
+    identifierTypes[i].identifierSources = allIdentifierSources.map((source) => {
       const option = find(autoGenOptions.data.results, { source: { uuid: source.uuid } });
       source.autoGenerationOption = option;
       return source;
@@ -118,8 +120,8 @@ async function fetchPatientIdentifierTypes(): Promise<Array<FetchedPatientIdenti
   return [];
 }
 
-async function fetchIdentifierSources(identifierType: string) {
-  return await cacheAndFetch(`${restBaseUrl}/idgen/identifiersource?v=default&identifierType=${identifierType}`);
+async function fetchIdentifierSources() {
+  return await cacheAndFetch(`${restBaseUrl}/idgen/identifiersource?v=default`);
 }
 
 async function fetchAutoGenerationOptions(abortController?: AbortController) {

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

@@ -1,14 +1,16 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification, Layer, Select, SelectItem } from '@carbon/react';
-import { useConfig } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, parseDate, useConfig } from '@openmrs/esm-framework';
 import { type ConceptResponse } from '../../patient-registration.types';
 import { type FieldDefinition, type RegistrationConfig } from '../../../config-schema';
 import { Input } from '../../input/basic-input/input/input.component';
 import { useConcept, useConceptAnswers } from '../field.resource';
 import styles from './../field.scss';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { generateFormatting } from '../../date-util';
 
 export interface ObsFieldProps {
   fieldDefinition: FieldDefinition;
@@ -51,6 +53,16 @@ export function ObsField({ fieldDefinition }: ObsFieldProps) {
           required={fieldDefinition.validation.required}
         />
       );
+    case 'Date':
+      return (
+        <DateObsField
+          concept={concept}
+          label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
+          dateFormat={fieldDefinition.dateFormat}
+          placeholder={fieldDefinition.placeholder}
+        />
+      );
     case 'Coded':
       return (
         <CodedObsField
@@ -145,6 +157,56 @@ function NumericObsField({ concept, label, required }: NumericObsFieldProps) {
   );
 }
 
+interface DateObsFieldProps {
+  concept: ConceptResponse;
+  label: string;
+  required?: boolean;
+  dateFormat?: string;
+  placeholder?: string;
+}
+
+function DateObsField({ concept, label, required, placeholder }: DateObsFieldProps) {
+  const { t } = useTranslation();
+  const fieldName = `obs.${concept.uuid}`;
+  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const { format, placeHolder, dateFormat } = generateFormatting(['d', 'm', 'Y'], '/');
+
+  const onDateChange = useCallback(
+    (date: Date) => {
+      setFieldValue(fieldName, date);
+    },
+    [setFieldValue],
+  );
+
+  return (
+    <Layer>
+      <div className={styles.dobField}>
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors }, meta }) => {
+            const dateValue = field.value ? parseDate(field.value) : field.value;
+            return (
+              <OpenmrsDatePicker
+                id={fieldName}
+                {...field}
+                required={required}
+                dateFormat={dateFormat}
+                onChange={onDateChange}
+                labelText={label ?? concept.display}
+                invalid={errors[fieldName] && touched[fieldName]}
+                invalidText={meta.error && t(meta.error)}
+                value={dateValue}
+                carbonOptions={{
+                  placeholder: placeholder ?? placeHolder,
+                }}
+              />
+            );
+          }}
+        </Field>
+      </div>
+    </Layer>
+  );
+}
+
 interface CodedObsFieldProps {
   concept: ConceptResponse;
   answerConceptSetUuid?: string;

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

@@ -5,6 +5,7 @@ import { useConfig } from '@openmrs/esm-framework';
 import { type FieldDefinition } from '../../../config-schema';
 import { useConcept, useConceptAnswers } from '../field.resource';
 import { ObsField } from './obs-field.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
 
 const mockUseConfig = useConfig as jest.Mock;
 
@@ -42,6 +43,14 @@ const useConceptMockImpl = (uuid: string) => {
       ],
       setMembers: [],
     };
+  } else if (uuid == 'vaccination-date-uuid') {
+    data = {
+      uuid: 'vaccination-date-uuid',
+      display: 'Vaccination Date',
+      datatype: { display: 'Date', uuid: 'date' },
+      answers: [],
+      setMembers: [],
+    };
   } else {
     throw Error(`Programming error, you probably didn't mean to do this: unknown concept uuid '${uuid}'`);
   }
@@ -79,12 +88,14 @@ const useConceptAnswersMockImpl = (uuid: string) => {
 };
 
 type FieldProps = {
-  children: ({ field, form: { touched, errors } }) => React.ReactNode;
+  children: ({ field, form: { touched, errors }, meta }) => React.ReactNode;
 };
 
 jest.mock('formik', () => ({
   ...(jest.requireActual('formik') as object),
-  Field: jest.fn(({ children }: FieldProps) => <>{children({ field: {}, form: { touched: {}, errors: {} } })}</>),
+  Field: jest.fn(({ children }: FieldProps) => (
+    <>{children({ field: {}, form: { touched: {}, errors: {} }, meta: { error: undefined } })}</>
+  )),
   useField: jest.fn(() => [{ value: null }, {}]),
 }));
 
@@ -118,6 +129,21 @@ const numberFieldDef: FieldDefinition = {
   customConceptAnswers: [],
 };
 
+const dateFieldDef: FieldDefinition = {
+  id: 'vac_date',
+  type: 'obs',
+  label: '',
+  placeholder: '',
+  showHeading: false,
+  uuid: 'vaccination-date-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [],
+};
+
 const codedFieldDef: FieldDefinition = {
   id: 'nationality',
   type: 'obs',
@@ -163,6 +189,22 @@ describe('ObsField', () => {
     expect(screen.getByRole('spinbutton')).toBeInTheDocument();
   });
 
+  it('renders a datepicker for date concept', async () => {
+    render(
+      <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() }}>
+        <ObsField fieldDefinition={dateFieldDef} />
+      </PatientRegistrationContext.Provider>,
+    );
+
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+
+    const datePickerInput = screen.getByPlaceholderText('dd/mm/yyyy');
+    expect(datePickerInput).toBeInTheDocument();
+
+    await userEvent.type(datePickerInput, '28/05/2024');
+    expect(datePickerInput).toHaveValue('28/05/2024');
+  });
+
   it('renders a select for a coded concept', () => {
     render(<ObsField fieldDefinition={codedFieldDef} />);
     // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();

package/src/patient-registration/form-manager.ts

@@ -1,10 +1,11 @@
 import {
   type FetchResponse,
+  type Session,
+  type StyleguideConfigObject,
+  getConfig,
   openmrsFetch,
   queueSynchronizationItem,
-  type Session,
   restBaseUrl,
-  getConfig,
 } from '@openmrs/esm-framework';
 import { patientRegistration } from '../constants';
 import {
@@ -131,14 +132,15 @@ export class FormManager {
 
       await this.saveObservations(values.obs, savePatientResponse, currentLocation, currentUser, config);
 
-      const { patientPhotoUuid } = await getConfig('@openmrs/esm-styleguide');
-      if (patientPhotoUuid && capturePhotoProps?.imageData) {
+      const { patientPhotoConceptUuid } = await getConfig<StyleguideConfigObject>('@openmrs/esm-styleguide');
+
+      if (patientPhotoConceptUuid && capturePhotoProps?.imageData) {
         await savePatientPhoto(
           savePatientResponse.data.uuid,
           capturePhotoProps.imageData,
           `${restBaseUrl}/obs`,
           capturePhotoProps.dateTime || new Date().toISOString(),
-          patientPhotoUuid,
+          patientPhotoConceptUuid,
         );
       }
     }

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

@@ -195,7 +195,9 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
             <div>
               <div className={styles.stickyColumn}>
                 <h4>
-                  {inEditMode ? t('edit', 'Edit') : t('createNew', 'Create New')} {t('patient', 'Patient')}
+                  {inEditMode
+                    ? t('editPatientDetails', 'Edit patient details')
+                    : t('createNewPatient', 'Create new patient')}
                 </h4>
                 {showDummyData && <DummyDataInput setValues={props.setValues} />}
                 <p className={styles.label01}>{t('jumpTo', 'Jump to')}</p>
@@ -231,12 +233,11 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                       className={styles.spinner}
                       description={`${t('submitting', 'Submitting')} ...`}
                       iconDescription="submitting"
-                      status="active"
                     />
                   ) : inEditMode ? (
-                    t('updatePatient', 'Update Patient')
+                    t('updatePatient', 'Update patient')
                   ) : (
-                    t('registerPatient', 'Register Patient')
+                    t('registerPatient', 'Register patient')
                   )}
                 </Button>
                 <Button className={styles.cancelButton} kind="tertiary" onClick={cancelRegistration}>

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

@@ -5,7 +5,7 @@ export const uuidIdentifier = '05a29f94-c0ed-11e2-94be-8c13b969e334';
 export const uuidTelephoneNumber = '14d4f066-15f5-102d-96e4-000c29c2a5d7';
 
 function dataURItoFile(dataURI: string) {
-  const byteString = atob(dataURI.split(',')[1]);
+  const byteString = window.atob(dataURI.split(',')[1]);
   const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
   // write the bytes of the string to a typed array
   const buffer = new Uint8Array(byteString.length);

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

@@ -1,5 +1,5 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .title {
@@ -19,23 +19,23 @@
 }
 
 .submitButton {
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
   width: 11.688rem;
   display: block;
 }
 
 .infoGrid {
   width: 100%;
-  padding-left: spacing.$spacing-07;
+  padding-left: layout.$spacing-07;
   margin-bottom: 40vh;
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
   max-width: 50rem;
 }
 
 .label01 {
   @include type.type-style('label-01');
-  margin-top: spacing.$spacing-05;
-  margin-bottom: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
   color: $ui-04;
 }
 
@@ -46,7 +46,7 @@
 }
 
 .space05 {
-  margin: spacing.$spacing-05 0 spacing.$spacing-05 0;
+  margin: layout.$spacing-05 0;
 }
 
 .formContainer {
@@ -56,7 +56,7 @@
 
 .stickyColumn {
   position: sticky;
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
   // 3rem for the nav height and 1rem for top margin
   top: 4rem;
 }
@@ -68,7 +68,7 @@
 .linkName {
   color: $color-gray-70;
   line-height: 1.38;
-  font-size: spacing.$spacing-05;
+  font-size: layout.$spacing-05;
   font-weight: 600;
 
   &:active {
@@ -94,8 +94,11 @@
 }
 
 .spinner {
-  &:global(.cds--inline-loading) {
-    min-height: 1rem;
+  min-height: 1rem;
+  width: max-content;
+
+  :global(.cds--inline-loading__text) {
+    @include type.type-style('body-01');
   }
 }
 
@@ -109,6 +112,6 @@ html[dir='rtl'] {
 
   .infoGrid {
     padding-left: unset;
-    padding-right: spacing.$spacing-07;
+    padding-right: layout.$spacing-07;
   }
 }

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

@@ -264,7 +264,7 @@ describe('Registering a new patient', () => {
     });
 
     await fillRequiredFields();
-    await user.click(await screen.findByText('Register Patient'));
+    await user.click(await screen.findByText(/Register Patient/i));
     expect(mockedSavePatient).toHaveBeenCalledWith(
       expect.objectContaining({
         identifiers: [], //TODO when the identifer story is finished: { identifier: '', identifierType: '05a29f94-c0ed-11e2-94be-8c13b969e334', location: '' },
@@ -293,7 +293,7 @@ describe('Registering a new patient', () => {
     const givenNameInput = (await screen.findByLabelText('First Name')) as HTMLInputElement;
 
     await user.type(givenNameInput, '5');
-    await user.click(screen.getByText('Register Patient'));
+    await user.click(screen.getByText(/Register Patient/i));
 
     expect(mockedSavePatientForm).not.toHaveBeenCalled();
   });
@@ -317,7 +317,7 @@ describe('Registering a new patient', () => {
     const nationality = within(customSection).getByLabelText('Nationality');
     await user.selectOptions(nationality, 'USA');
 
-    await user.click(screen.getByText('Register Patient'));
+    await user.click(screen.getByText(/Register Patient/i));
 
     expect(mockedSavePatient).toHaveBeenCalled();
 
@@ -350,7 +350,7 @@ describe('Registering a new patient', () => {
 
     mockedSaveEncounter.mockRejectedValue({ status: 400, responseBody: { error: { message: 'an error message' } } });
 
-    const registerPatientButton = screen.getByText('Register Patient');
+    const registerPatientButton = screen.getByText(/Register Patient/i);
 
     await user.click(registerPatientButton);
 
@@ -415,7 +415,7 @@ describe('Updating an existing patient record', () => {
     await user.type(givenNameInput, 'Eric');
     await user.type(middleNameInput, 'Johnson');
     await user.type(familyNameInput, 'Smith');
-    await user.click(screen.getByText('Update Patient'));
+    await user.click(screen.getByText(/Update patient/i));
 
     expect(mockedSavePatient).toHaveBeenCalledWith(
       false,

package/translations/en.json

@@ -21,7 +21,7 @@
   "configureIdentifiers": "Configure identifiers",
   "contactSection": "Contact Details",
   "continue": "Continue",
-  "createNew": "Create New",
+  "createNewPatient": "Create new patient",
   "dateOfBirth": "Date of birth",
   "dateOfBirthLabelText": "Date of Birth",
   "deathDateInputLabel": "Date of Death",
@@ -34,7 +34,6 @@
   "discardModalBody": "The changes you made to this patient's details have not been saved. Discard changes?",
   "discardModalHeader": "Confirm Discard Changes",
   "dobToggleLabelText": "Date of Birth Known?",
-  "edit": "Edit",
   "editIdentifierTooltip": "Edit",
   "editPatientDetails": "Edit patient details",
   "editPatientDetailsBreadcrumb": "Edit patient details",
@@ -71,7 +70,6 @@
   "obsFieldUnknownDatatype": "Concept for obs field '{{fieldDefinitionId}}' has unknown datatype '{{datatypeName}}'",
   "optional": "optional",
   "other": "Other",
-  "patient": "Patient",
   "patientDetailsFound": "Patient information found in the registry, do you want to use the information to continue with registration?",
   "patientName": "Patient name",
   "patientNameKnown": "Patient's Name is Known?",