(refactor) Refactor registration form cancel modal to match conventio…

…ns (#1294)

This PR refactors the registration form's cancel modal to match new modal naming and registration conventions. Modals
are now registered in the routes registry file under the `modals`. The naming convention has also changed - modals now use the `*.modal.tsx` suffix.
I've also amended the modal to use Carbon's ModalBody, ModalHeader, and ModalFooter components instead of using divs with
custom classes. Finally, I've amended the modal title and content to align with other confirmation modals in O3.

packages/esm-appointments-app/translations/en.json

@@ -62,6 +62,7 @@
   "createNewAppointment": "Create new appointment",
   "date": "Date",
   "date&Time": "Date & time",
+  "dateAppointmentIssuedCannotBeAfterAppointmentDate": "Date appointment issued cannot be after the appointment date",
   "dateOfBirth": "Date of birth",
   "dateScheduled": "Date appointment issued",
   "dateScheduledDetail": "Date appointment issued",
@@ -124,6 +125,7 @@
   "providers": "Providers",
   "providersBooked": "Providers booked: {{time}}",
   "recurringAppointment": "Recurring Appointment",
+  "recurringAppointmentShouldHaveEndDate": "A recurring appointment should have an end date",
   "repeatEvery": "Repeat every",
   "save": "Save",
   "saveAndClose": "Save and close",

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

@@ -50,10 +50,7 @@ export const editPatient = getSyncLifecycle(rootComponent, {
 
 export const addPatientLink = getSyncLifecycle(addPatientLinkComponent, options);
 
-export const cancelPatientEditModal = getAsyncLifecycle(
-  () => import('./widgets/cancel-patient-edit.component'),
-  options,
-);
+export const cancelPatientEditModal = getAsyncLifecycle(() => import('./widgets/cancel-patient-edit.modal'), options);
 
 export const patientPhotoExtension = getSyncLifecycle(PatientPhotoExtension, options);
 

packages/esm-patient-registration-app/src/routes.json

@@ -25,12 +25,6 @@
       "online": true,
       "offline": true
     },
-    {
-      "component": "cancelPatientEditModal",
-      "name": "cancel-patient-edit-modal",
-      "online": true,
-      "offline": true
-    },
     {
       "component": "patientPhotoExtension",
       "name": "patient-photo-widget",
@@ -58,5 +52,11 @@
       "online": true,
       "offline": true
     }
+  ],
+  "modals": [
+    {
+      "name": "cancel-patient-edit-modal",
+      "component": "cancelPatientEditModal"
+    }
   ]
 }

packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.modal.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+
+interface CancelPatientEditPropsModal {
+  close(): void;
+  onConfirm(): void;
+}
+
+const CancelPatientEditModal: React.FC<CancelPatientEditPropsModal> = ({ close, onConfirm }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <ModalHeader
+        closeModal={close}
+        title={t('confirmDiscardChangesTitle', 'Are you sure you want to discard these changes?')}
+      />
+      <ModalBody>
+        <p>{t('confirmDiscardChangesBody', 'Your unsaved changes will be lost if you proceed to discard the form')}.</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={onConfirm}>
+          {t('discard', 'Discard')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default CancelPatientEditModal;

packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.test.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
-import CancelPatientEdit from './cancel-patient-edit.component';
+import CancelPatientEdit from './cancel-patient-edit.modal';
 
-describe('CancelPatientEdit component', () => {
+describe('CancelPatientEdit modal', () => {
   const mockClose = jest.fn();
   const mockOnConfirm = jest.fn();
 
   it('renders the modal and triggers close and onConfirm functions', async () => {
     const user = userEvent.setup();
-
     render(<CancelPatientEdit close={mockClose} onConfirm={mockOnConfirm} />);
 
     const cancelButton = screen.getByRole('button', { name: /Cancel/i });

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

@@ -14,6 +14,8 @@
   "codedPersonAttributeNoAnswerSet": "The person attribute field '{{codedPersonAttributeFieldId}}' is of type 'coded' but has been defined without an answer concept set UUID. The 'answerConceptSetUuid' key is required.",
   "configure": "Configure",
   "configureIdentifiers": "Configure identifiers",
+  "confirmDiscardChangesBody": "Your unsaved changes will be lost if you proceed to discard the form",
+  "confirmDiscardChangesTitle": "Are you sure you want to discard these changes?",
   "confirmIdentifierDeletionText": "Are you sure you want to remove this identifier?",
   "contactSection": "Contact Details",
   "createNewPatient": "Create new patient",
@@ -27,8 +29,6 @@
   "deleteRelationshipTooltipText": "Delete",
   "demographicsSection": "Basic Info",
   "discard": "Discard",
-  "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?",
   "editIdentifierTooltip": "Edit",
   "editPatientDetails": "Edit patient details",