(refactor) Refactor registration form cancel modal to match conventions

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",