O3-1626: Cleanup the patient chart appointments form

packages/esm-patient-appointments-app/src/appointments/appointments-form.component.tsx

@@ -34,7 +34,6 @@ const AppointmentsForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeW
   const [appointmentNote, setAppointmentNote] = useState('');
   const [selectedAppointmentType, setSelectedAppointmentType] = useState('');
   const [selectedService, setSelectedService] = useState('');
-  const [selectedServiceType, setSelectedServiceType] = useState('');
   const [startDate, setStartDate] = useState(new Date());
   const [startTime, setStartTime] = useState(dayjs(new Date()).format('hh:mm'));
   const [timeFormat, setTimeFormat] = useState<amPm>(new Date().getHours() >= 12 ? 'PM' : 'AM');
@@ -46,14 +45,7 @@ const AppointmentsForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeW
 
   const { data: services, isLoading } = useAppointmentService();
 
-  let serviceTypes;
-  if (services?.length) {
-    [{ serviceTypes }] = services;
-  }
-
   const handleSubmit = () => {
-    const serviceType = serviceTypes.find((service) => service.name === selectedServiceType);
-
     const serviceUuid = services.find((service) => service.name === selectedService)?.uuid;
     const serviceDuration = services.find((service) => service.name === selectedService)?.durationMins;
 
@@ -189,7 +181,7 @@ const AppointmentsForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeW
             labelText={t('selectService', 'Select a service')}
             light={isTablet}
             onChange={(event) => setSelectedService(event.target.value)}
-            value={selectedServiceType}
+            value={selectedService}
           >
             {!selectedService ? <SelectItem text={t('chooseService', 'Select service')} value="" /> : null}
             {services?.length > 0 &&
@@ -200,25 +192,6 @@ const AppointmentsForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeW
               ))}
           </Select>
         </section>
-        <section className={styles.formGroup}>
-          <span>{t('serviceType', 'Service Type')}</span>
-          <Select
-            id="serviceType"
-            invalidText="Required"
-            labelText="Select the type of service"
-            light={isTablet}
-            onChange={(event) => setSelectedServiceType(event.target.value)}
-            value={selectedServiceType}
-          >
-            {!selectedServiceType ? <SelectItem text={t('chooseService', 'Select service type')} value="" /> : null}
-            {serviceTypes?.length > 0 &&
-              serviceTypes.map((serviceType) => (
-                <SelectItem key={serviceType.uuid} text={serviceType.name} value={serviceType.name}>
-                  {serviceType.name}
-                </SelectItem>
-              ))}
-          </Select>
-        </section>
         <section className={styles.formGroup}>
           <span>{t('appointmentType', 'Appointment Type')}</span>
           <Select

packages/esm-patient-appointments-app/src/appointments/appointments-form.test.tsx

@@ -51,7 +51,6 @@ describe('AppointmentForm', () => {
     expect(screen.getByLabelText(/Select a location/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/Date/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/Select a service/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/Select the type of service/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/Select the type of appointment/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/Write an additional note/i)).toBeInTheDocument();
     expect(screen.getByPlaceholderText(/Write any additional points here/i)).toBeInTheDocument();
@@ -99,7 +98,6 @@ describe('AppointmentForm', () => {
     const timeInput = screen.getByRole('textbox', { name: /Time/i });
     const timeFormat = screen.getByRole('combobox', { name: /Time/i });
     const serviceSelect = screen.getByRole('combobox', { name: /Select a service/i });
-    const serviceTypeSelect = screen.getByRole('combobox', { name: /Select the type of service/i });
     const appointmentTypeSelect = screen.getByRole('combobox', { name: /Select the type of appointment/i });
 
     expect(saveButton).toBeDisabled();
@@ -110,7 +108,6 @@ describe('AppointmentForm', () => {
     await waitFor(() => user.type(timeInput, '09:30'));
     await waitFor(() => user.selectOptions(timeFormat, 'AM'));
     await waitFor(() => user.selectOptions(serviceSelect, ['Outpatient']));
-    await waitFor(() => user.selectOptions(serviceTypeSelect, ['Chemotherapy']));
     await waitFor(() => user.selectOptions(appointmentTypeSelect, ['Scheduled']));
 
     expect(saveButton).not.toBeDisabled();
@@ -164,7 +161,6 @@ describe('AppointmentForm', () => {
     const timeInput = screen.getByRole('textbox', { name: /Time/i });
     const timeFormat = screen.getByRole('combobox', { name: /Time/i });
     const serviceSelect = screen.getByRole('combobox', { name: /Select a service/i });
-    const serviceTypeSelect = screen.getByRole('combobox', { name: /Select the type of service/i });
     const appointmentTypeSelect = screen.getByRole('combobox', { name: /Select the type of appointment/i });
 
     await waitFor(() => user.clear(dateInput));
@@ -173,7 +169,6 @@ describe('AppointmentForm', () => {
     await waitFor(() => user.type(timeInput, '09:30'));
     await waitFor(() => user.selectOptions(timeFormat, 'AM'));
     await waitFor(() => user.selectOptions(serviceSelect, ['Outpatient']));
-    await waitFor(() => user.selectOptions(serviceTypeSelect, ['Chemotherapy']));
     await waitFor(() => user.selectOptions(appointmentTypeSelect, ['Scheduled']));
     await waitFor(() => user.click(saveButton));
 

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

@@ -24,7 +24,6 @@
   "selectLocation": "Select a location",
   "selectService": "Select service",
   "service": "Service",
-  "serviceType": "Service type",
   "time": "Time",
   "upcoming": "Upcoming"
 }