@openmrs/esm-appointments-app 9.2.1-pre.6862 → 9.2.1-pre.6871

package/src/form/appointments-form.workspace.tsx

@@ -5,8 +5,6 @@ import { useTranslation } from 'react-i18next';
 import {
   Button,
   ButtonSet,
-  DatePicker,
-  DatePickerInput,
   Form,
   InlineLoading,
   MultiSelect,
@@ -636,7 +634,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps & DefaultWorkspaceProps>
                         id="appointmentRecurringDateRangePicker"
                         data-testid="appointmentRecurringDateRangePicker"
                         labelText={t('dateRange', 'Set date range')}
-                        invalid={Boolean(fieldState?.error?.message)}
+                        invalid={!!fieldState?.error?.message}
                         invalidText={fieldState?.error?.message}
                         isRequired
                       />
@@ -738,21 +736,20 @@ const AppointmentsForm: React.FC<AppointmentsFormProps & DefaultWorkspaceProps>
                     control={control}
                     render={({ field, fieldState }) => (
                       <OpenmrsDatePicker
-                        {...field}
-                        value={field.value.startDate}
+                        data-testid="datePickerInput"
+                        id="datePickerInput"
+                        invalid={!!fieldState?.error?.message}
+                        invalidText={fieldState?.error?.message}
+                        labelText={t('date', 'Date')}
+                        onBlur={field.onBlur}
                         onChange={(date) => {
                           field.onChange({
                             ...field.value,
                             startDate: date,
                           });
                         }}
-                        id="datePickerInput"
-                        data-testid="datePickerInput"
-                        labelText={t('date', 'Date')}
                         style={{ width: '100%' }}
-                        invalid={Boolean(fieldState?.error?.message)}
-                        invalidText={fieldState?.error?.message}
-                        // minDate={new Date()}
+                        value={field.value.startDate}
                       />
                     )}
                   />
@@ -791,10 +788,10 @@ const AppointmentsForm: React.FC<AppointmentsFormProps & DefaultWorkspaceProps>
                     invalid={!!errors?.appointmentStatus}
                     invalidText={errors?.appointmentStatus?.message}
                     labelText={t('selectAppointmentStatus', 'Select status')}
+                    onBlur={onBlur}
                     onChange={onChange}
-                    value={value}
                     ref={ref}
-                    onBlur={onBlur}>
+                    value={value}>
                     <SelectItem text={t('selectAppointmentStatus', 'Select status')} value="" />
                     {appointmentStatuses?.length > 0 &&
                       appointmentStatuses.map((appointmentStatus, index) => (
@@ -822,8 +819,8 @@ const AppointmentsForm: React.FC<AppointmentsFormProps & DefaultWorkspaceProps>
                   labelText={t('selectProvider', 'Select a provider')}
                   onChange={onChange}
                   onBlur={onBlur}
-                  value={value}
-                  ref={ref}>
+                  ref={ref}
+                  value={value}>
                   <SelectItem text={t('chooseProvider', 'Choose a provider')} value="" />
                   {providers?.providers?.length > 0 &&
                     providers?.providers?.map((provider) => (
@@ -845,14 +842,16 @@ const AppointmentsForm: React.FC<AppointmentsFormProps & DefaultWorkspaceProps>
               render={({ field, fieldState }) => (
                 <div style={{ width: '100%' }}>
                   <OpenmrsDatePicker
-                    {...field}
-                    invalid={Boolean(fieldState?.error?.message)}
+                    data-testid="dateAppointmentScheduledPickerInput"
+                    id="dateAppointmentScheduledPickerInput"
+                    invalid={!!fieldState?.error?.message}
                     invalidText={fieldState?.error?.message}
+                    labelText={t('dateAppointmentIssued', 'Date appointment issued')}
                     maxDate={new Date()}
-                    id="dateAppointmentScheduledPickerInput"
-                    data-testid="dateAppointmentScheduledPickerInput"
-                    labelText={t('dateScheduledDetail', 'Date appointment issued')}
                     style={{ width: '100%' }}
+                    onBlur={field.onBlur}
+                    onChange={field.onChange}
+                    value={field.value}
                   />
                 </div>
               )}

package/src/header/appointments-header.component.tsx

@@ -35,7 +35,7 @@ const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, showServi
         <OpenmrsDatePicker
           data-testid="appointment-date-picker"
           id="appointment-date-picker"
-          labelText=""
+          aria-label={t('appointmentDate', 'Appointment date')}
           onChange={(date) => setSelectedDate(dayjs(date).startOf('day').format(omrsDateFormat))}
           value={dayjs(selectedDate).toDate()}
         />

package/src/header/appointments-header.scss

@@ -5,8 +5,7 @@
 
 .header {
   background-color: $ui-02;
-  border: 1px solid $ui-03;
-  border-left: 0;
+  border-block: 1px solid $ui-03;
   display: flex;
   justify-content: space-between;
   align-items: center;

package/translations/en.json

@@ -10,6 +10,7 @@
   "appointmentCancelledSuccessfully": "Appointment cancelled successfully",
   "appointmentCheckedIn": "Appointment Checked In",
   "appointmentConflict": "Appointment conflict",
+  "appointmentDate": "Appointment date",
   "appointmentEdited": "Appointment edited",
   "appointmentEditError": "Error editing appointment",
   "appointmentEnded": "Appointment ended",
@@ -58,11 +59,11 @@
   "createNewAppointment": "Create new appointment",
   "date": "Date",
   "date&Time": "Date & time",
+  "dateAppointmentIssued": "Date appointment issued",
   "dateAppointmentIssuedCannotBeAfterAppointmentDate": "Date appointment issued cannot be after the appointment date",
   "dateOfBirth": "Date of birth",
   "dateRange": "Set date range",
   "dateScheduled": "Date appointment issued",
-  "dateScheduledDetail": "Date appointment issued",
   "dateTime": "Date & Time",
   "day": "Day",
   "daysOfWeek": "Days of the week",