Minor fixup

This commit:

- Bumps the core tooling and framework versions used in the registration app
- Tweaks the snackbar notification shown when there are errors in the form. Instead of showing an individual
snackbar for each error, a single snackbar is shown with a list of errors.
- Makes some tweaks to translations for error messages shown when form validation fails.

packages/esm-patient-registration-app/src/patient-registration/field/cause-of-death/cause-of-death.component.tsx

@@ -32,15 +32,15 @@ export const CauseOfDeathField: React.FC = () => {
   if (isLoadingConceptAnswers) {
     return (
       <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
-        <h4 className={styles.productiveHeading02Light}>{t('causeOfDeathInputLabel', 'Cause of Death')}</h4>
+        <h4 className={styles.productiveHeading02Light}>{t('causeOfDeathInputLabel', 'Cause of death')}</h4>
         <SelectSkeleton />
       </div>
     );
   }
 
   return (
     <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
-      <h4 className={styles.productiveHeading02Light}>{t('causeOfDeathInputLabel', 'Cause of Death')}</h4>
+      <h4 className={styles.productiveHeading02Light}>{t('causeOfDeathInputLabel', 'Cause of death')}</h4>
       {errorLoadingConceptAnswers || !conceptUuid ? (
         <InlineNotification
           hideCloseButton

packages/esm-patient-registration-app/src/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx

@@ -1,13 +1,13 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext } from 'react';
 import classNames from 'classnames';
+import dayjs from 'dayjs';
 import { Layer, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
-import { OpenmrsDatePicker, toOmrsIsoString } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker } from '@openmrs/esm-framework';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import styles from '../field.scss';
 import type { FormValues } from '../../patient-registration.types';
-import dayjs from 'dayjs';
+import styles from '../field.scss';
 
 export const DateAndTimeOfDeathField: React.FC = () => {
   const { t } = useTranslation();
@@ -46,7 +46,7 @@ function DeathDateField() {
         invalidText={t(deathDateMeta.error)}
         invalid={!!(deathDateMeta.touched && deathDateMeta.error)}
         isRequired={values.isDead}
-        labelText={t('deathDateInputLabel', 'Date of Death')}
+        labelText={t('deathDateInputLabel', 'Date of death')}
         maxDate={today}
         onChange={onDateChange}
       />
@@ -64,7 +64,7 @@ function DeathTimeField() {
       <TimePicker
         {...deathTimeField}
         id="time-picker"
-        labelText={t('timeOfDeathInputLabel', 'Time of Death (HH:MM)')}
+        labelText={t('timeOfDeathInputLabel', 'Time of death (hh:mm)')}
         className={styles.timeOfDeathField}
         pattern="^(1[0-2]|0?[1-9]):([0-5]?[0-9])$"
         invalid={!!(deathTimeMeta.touched && deathTimeMeta.error)}

packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx

@@ -88,7 +88,7 @@ export const DobField: React.FC = () => {
       {(allowEstimatedBirthDate || dobUnknown) && (
         <div className={styles.dobField}>
           <div className={styles.dobContentSwitcherLabel}>
-            <span className={styles.label01}>{t('dobToggleLabelText', 'Date of Birth Known?')}</span>
+            <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')} />
@@ -104,7 +104,7 @@ export const DobField: React.FC = () => {
               {...birthdate}
               onChange={onDateChange}
               maxDate={today}
-              labelText={t('dateOfBirthLabelText', 'Date of Birth')}
+              labelText={t('dateOfBirthLabelText', 'Date of birth')}
               isInvalid={!!(birthdateMeta.touched && birthdateMeta.error)}
               invalidText={t(birthdateMeta.error)}
               value={birthdate.value}

packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx

@@ -132,16 +132,23 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     }
   };
 
+  const getDescription = (errors) => {
+    return (
+      <ul style={{ listStyle: 'inside' }}>
+        {Object.keys(errors).map((error, index) => {
+          return <li key={index}>{t(`${error}LabelText`, error)}</li>;
+        })}
+      </ul>
+    );
+  };
+
   const displayErrors = (errors) => {
     if (errors && typeof errors === 'object' && !!Object.keys(errors).length) {
-      Object.keys(errors).forEach((error) => {
-        showSnackbar({
-          subtitle: t(`${error}LabelText`, error),
-          title: t('incompleteForm', 'The following field has errors:'),
-          kind: 'warning',
-          isLowContrast: true,
-          timeoutInMs: 5000,
-        });
+      showSnackbar({
+        isLowContrast: true,
+        kind: 'warning',
+        title: t('fieldsWithErrors', 'The following fields have errors:'),
+        subtitle: <>{getDescription(errors)}</>,
       });
     }
   };

packages/esm-patient-registration-app/src/patient-registration/patient-registration.test.tsx

@@ -410,7 +410,7 @@ describe('Updating an existing patient record', () => {
     const givenNameInput: HTMLInputElement = screen.getByLabelText(/First Name/);
     const familyNameInput: HTMLInputElement = screen.getByLabelText(/Family Name/);
     const middleNameInput: HTMLInputElement = screen.getByLabelText(/Middle Name/);
-    const dateOfBirthInput: HTMLInputElement = screen.getByLabelText('Date of Birth');
+    const dateOfBirthInput: HTMLInputElement = screen.getByLabelText(/Date of Birth/i);
     const genderInput: HTMLInputElement = screen.getByLabelText(/Male/);
 
     // assert initial values

packages/esm-patient-registration-app/src/patient-registration/section/section.scss

@@ -1,5 +1,5 @@
-@use '@carbon/layout';
 @use '@carbon/colors';
+@use '@carbon/layout';
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 

packages/esm-patient-registration-app/src/patient-registration/validation/patient-registration-validation.ts

@@ -1,10 +1,10 @@
+import dayjs from 'dayjs';
 import * as Yup from 'yup';
 import mapValues from 'lodash/mapValues';
-import { type FormValues } from '../patient-registration.types';
+import { translateFrom } from '@openmrs/esm-framework';
 import { type RegistrationConfig } from '../../config-schema';
-import dayjs from 'dayjs';
+import { type FormValues } from '../patient-registration.types';
 import { getDatetime } from '../patient-registration.resource';
-import { translateFrom } from '@openmrs/esm-framework';
 
 const t = (key: string, value: string) => translateFrom('@openmrs/esm-framework', key, value);
 
@@ -27,7 +27,7 @@ export function getValidationSchema(config: RegistrationConfig) {
         config.fieldConfigurations.gender.map((g) => g.value),
         t('genderUnspecified', 'Gender unspecified'),
       )
-      .required(t('genderRequired', 'Gender required')),
+      .required(t('genderRequired', 'Gender is required')),
     birthdate: Yup.date().when('birthdateEstimated', {
       is: false,
       then: Yup.date()
@@ -44,7 +44,7 @@ export function getValidationSchema(config: RegistrationConfig) {
       otherwise: Yup.number().nullable(),
     }),
     monthsEstimated: Yup.number().min(0, t('negativeMonths', 'Estimated months cannot be negative')),
-
+    isDead: Yup.boolean(),
     deathDate: Yup.date()
       .when('isDead', {
         is: true,
@@ -76,7 +76,7 @@ export function getValidationSchema(config: RegistrationConfig) {
         then: Yup.string().required(t('deathTimeRequired', 'Death time is required')),
         otherwise: Yup.string().nullable(),
       })
-      .matches(/^(1[0-2]|0?[1-9]):([0-5]?[0-9])$/, t('deathTimeInvalid', "Time doesn't match the format hh:mm")),
+      .matches(/^(1[0-2]|0?[1-9]):([0-5]?[0-9])$/, t('deathTimeInvalid', "Time doesn't match the format 'hh:mm'")),
 
     deathTimeFormat: Yup.string()
       .when('isDead', {

packages/esm-patient-registration-app/translations/en.json

@@ -7,7 +7,7 @@
   "birthdayRequired": "Birthday is required",
   "birthFieldLabelText": "Birth",
   "cancel": "Cancel",
-  "causeOfDeathInputLabel": "Cause of Death",
+  "causeOfDeathInputLabel": "Cause of death",
   "closeOverlay": "Close overlay",
   "codedPersonAttributeAnswerSetEmpty": "The coded person attribute field '{{codedPersonAttributeFieldId}}' has been defined with an answer concept set UUID '{{answerConceptSetUuid}}' that does not have any concept answers.",
   "codedPersonAttributeAnswerSetInvalid": "The coded person attribute field '{{codedPersonAttributeFieldId}}' has been defined with an invalid answer concept set UUID '{{answerConceptSetUuid}}'.",
@@ -19,18 +19,18 @@
   "confirmIdentifierDeletionText": "Are you sure you want to remove this identifier?",
   "contactSection": "Contact Details",
   "createNewPatient": "Create new patient",
-  "dateOfBirthLabelText": "Date of Birth",
+  "dateOfBirthLabelText": "Date of birth",
   "deathCauseRequired": "Cause of death is required",
   "deathDateInFuture": "Death date cannot be in future",
-  "deathDateInputLabel": "Date of Death",
+  "deathDateInputLabel": "Date of death",
   "deathDateRequired": "Death date is required",
   "deathdayInvalidDate": "Death date and time cannot be before the birthday",
   "deathdayIsRequired": "Death date is required when the patient is marked as deceased.",
   "deathdayNotInTheFuture": "",
   "deathSection": "Death Info",
   "deathTimeFormatInvalid": "Time format is invalid",
   "deathTimeFormatRequired": "Time format is required",
-  "deathTimeInvalid": "Time doesn't match the format hh:mm",
+  "deathTimeInvalid": "Time doesn't match the format 'hh:mm'",
   "deathTimeRequired": "Death time is required",
   "deleteIdentifierModalHeading": "Remove identifier?",
   "deleteIdentifierModalText": " has a value of ",
@@ -51,16 +51,16 @@
   "familyNameLabelText": "Family Name",
   "familyNameRequired": "Family name is required",
   "female": "Female",
+  "fieldsWithErrors": "The following fields have errors: ",
   "fullNameLabelText": "Full Name",
   "genderLabelText": "Sex",
-  "genderRequired": "Gender required",
+  "genderRequired": "Gender is required",
   "genderUnspecified": "Gender unspecified",
   "givenNameLabelText": "First Name",
   "givenNameRequired": "Given name is required",
   "identifierValueRequired": "Identifier value is required",
   "idFieldLabelText": "Identifiers",
   "IDInstructions": "Select the identifiers you'd like to add for this patient:",
-  "incompleteForm": "The following field has errors:",
   "invalidEmail": "Invalid email",
   "invalidInput": "Invalid Input",
   "isDeadInputLabel": "Is dead",
@@ -101,7 +101,7 @@
   "source": "Source",
   "submitting": "Submitting",
   "timeFormat": "Time Format",
-  "timeOfDeathInputLabel": "Time of Death (HH:MM)",
+  "timeOfDeathInputLabel": "Time of death (hh:mm)",
   "unableToFetch": "Unable to fetch person attribute type - {{personattributetype}}",
   "unknown": "Unknown",
   "unknownPatientAttributeType": "Patient attribute type has unknown format {{personAttributeTypeFormat}}",