From 05893ed80ecaed46adab5a7ee3a668c99d4c6939 Mon Sep 17 00:00:00 2001
From: Amos Machora <amosmachora13@gmail.com>
Date: Tue, 15 Oct 2024 15:29:24 +0300
Subject: [PATCH] (fix): O3-4085 show dialog to user before discarding new
 appointment changes

---
 .gitignore                                    |  3 ++
 .../src/form/appointments-form.component.tsx  | 39 +++++++++++--------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/.gitignore b/.gitignore
index 20c829d72..0ddff152a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -93,3 +93,6 @@ moduleName
 
 # vim
 .swp
+
+# vscode
+.vscode
\ No newline at end of file
diff --git a/packages/esm-appointments-app/src/form/appointments-form.component.tsx b/packages/esm-appointments-app/src/form/appointments-form.component.tsx
index b5c8855e1..7a6312901 100644
--- a/packages/esm-appointments-app/src/form/appointments-form.component.tsx
+++ b/packages/esm-appointments-app/src/form/appointments-form.component.tsx
@@ -1,6 +1,3 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
 import {
   Button,
   ButtonSet,
@@ -20,9 +17,7 @@ import {
   TimePickerSelect,
   Toggle,
 } from '@carbon/react';
-import { Controller, useController, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
 import {
   ExtensionSlot,
   ResponsiveWrapper,
@@ -33,17 +28,14 @@ import {
   useLocations,
   usePatient,
   useSession,
+  type DefaultWorkspaceProps,
   type FetchResponse,
 } from '@openmrs/esm-framework';
-import {
-  checkAppointmentConflict,
-  saveAppointment,
-  saveRecurringAppointments,
-  useAppointmentService,
-  useMutateAppointments,
-} from './appointments-form.resource';
-import { useProviders } from '../hooks/useProviders';
-import type { Appointment, AppointmentPayload, RecurringPattern } from '../types';
+import dayjs from 'dayjs';
+import React, { useContext, useEffect, useState } from 'react';
+import { Controller, useController, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
 import { type ConfigObject } from '../config-schema';
 import {
   appointmentLocationTagName,
@@ -54,7 +46,16 @@ import {
   weekDays,
 } from '../constants';
 import SelectedDateContext from '../hooks/selectedDateContext';
+import { useProviders } from '../hooks/useProviders';
+import type { Appointment, AppointmentPayload, RecurringPattern } from '../types';
 import Workload from '../workload/workload.component';
+import {
+  checkAppointmentConflict,
+  saveAppointment,
+  saveRecurringAppointments,
+  useAppointmentService,
+  useMutateAppointments,
+} from './appointments-form.resource';
 import styles from './appointments-form.scss';
 
 const time12HourFormatRegexPattern = '^(1[0-2]|0?[1-9]):[0-5][0-9]$';
@@ -68,15 +69,15 @@ interface AppointmentsFormProps {
   recurringPattern?: RecurringPattern;
   patientUuid?: string;
   context: string;
-  closeWorkspace: () => void;
 }
 
-const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
+const AppointmentsForm: React.FC<AppointmentsFormProps & DefaultWorkspaceProps> = ({
   appointment,
   recurringPattern,
   patientUuid,
   context,
   closeWorkspace,
+  promptBeforeClosing,
 }) => {
   const { patient } = usePatient(patientUuid);
   const { mutateAppointments } = useMutateAppointments();
@@ -219,7 +220,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     setValue,
     watch,
     handleSubmit,
-    formState: { errors },
+    formState: { isDirty },
   } = useForm<AppointmentFormData>({
     mode: 'all',
     resolver: zodResolver(appointmentsFormSchema),
@@ -268,6 +269,10 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     endDateRef(endDateElement);
   }, [startDateRef, endDateRef]);
 
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty, promptBeforeClosing]);
+
   const handleWorkloadDateChange = (date: Date) => {
     const appointmentDate = getValues('appointmentDateTime');
     setValue('appointmentDateTime', { ...appointmentDate, startDate: date });