From b011804f2c3df8da8986ae348db6122732aa3fb3 Mon Sep 17 00:00:00 2001
From: Vijay Kv <vijaykv2228@gmail.com>
Date: Mon, 23 Sep 2024 01:14:59 +0530
Subject: [PATCH] (fix) O3-3979: Visit start date field not populating
 correctly when editing a visit (#2019)

* (fix) : remove minDate and maxDate from DatePicker

* Fixup

---------

Co-authored-by: Dennis Kigen <kigen.work@gmail.com>
---
 e2e/specs/edit-existing-visit.spec.ts          |  7 ++++++-
 .../visit-form/visit-date-time.component.tsx   | 18 +++++++++---------
 .../visit/visit-form/visit-form.component.tsx  |  9 +++++----
 .../src/visit/visit-form/visit-form.scss       |  4 ++++
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/e2e/specs/edit-existing-visit.spec.ts b/e2e/specs/edit-existing-visit.spec.ts
index 84ec2c7f8b..382e90ae94 100644
--- a/e2e/specs/edit-existing-visit.spec.ts
+++ b/e2e/specs/edit-existing-visit.spec.ts
@@ -27,7 +27,12 @@ test('Edit an existing visit', async ({ page }) => {
 
   await test.step('Then I should see the `Edit Visit` form launch in the workspace', async () => {
     await expect(chartPage.page.getByText(/visit start date and time/i)).toBeVisible();
-    await expect(chartPage.page.getByPlaceholder(/dd\/mm\/yyyy/i)).toBeVisible();
+    const datePickerInput = chartPage.page.getByPlaceholder(/dd\/mm\/yyyy/i);
+    await expect(datePickerInput).toBeVisible();
+    const dateValue = await datePickerInput.inputValue();
+    expect(dateValue).not.toBe('');
+    expect(dateValue).toMatch(/^\d{2}\/\d{2}\/\d{4}$/);
+
     await expect(chartPage.page.getByPlaceholder(/hh\:mm/i)).toBeVisible();
     await expect(chartPage.page.getByRole('combobox', { name: /select a location/i })).toBeVisible();
     await expect(chartPage.page.getByRole('combobox', { name: /select a location/i })).toHaveValue('Outpatient Clinic');
diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx
index ab18f59564..a4df9cd2b2 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import styles from './visit-form.scss';
-import { Controller, useFormContext } from 'react-hook-form';
-import { type VisitFormData } from './visit-form.resource';
-import { DatePicker, DatePickerInput, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
 import classNames from 'classnames';
-import { useLayoutType, ResponsiveWrapper } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import { DatePicker, DatePickerInput, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
+import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { ResponsiveWrapper } from '@openmrs/esm-framework';
 import { type amPm } from '@openmrs/esm-patient-common-lib';
-import dayjs from 'dayjs';
+import { type VisitFormData } from './visit-form.resource';
+import styles from './visit-form.scss';
 
 interface VisitDateTimeFieldProps {
   visitDatetimeLabel: string;
@@ -47,17 +47,17 @@ const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
         <Controller
           name={dateFieldName}
           control={control}
-          render={({ field: { onBlur, onChange, value } }) => (
+          render={({ field: { onChange, value } }) => (
             <ResponsiveWrapper>
               <DatePicker
+                className={styles.datePicker}
                 dateFormat="d/m/Y"
                 datePickerType="single"
                 id={dateFieldName}
-                style={{ paddingBottom: '1rem' }}
                 minDate={minDateObj}
                 maxDate={maxDateObj}
                 onChange={([date]) => onChange(date)}
-                value={value}
+                value={value ? dayjs(value).format('DD/MM/YYYY') : null}
               >
                 <DatePickerInput
                   id={`${dateFieldName}Input`}
diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx
index a6d9ef3eab..23d8d922e7 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.component.tsx
@@ -178,6 +178,7 @@ const StartVisitForm: React.FC<StartVisitFormProps> = ({
   const defaultValues = useMemo(() => {
     const visitStartDate = visitToEdit?.startDatetime ? new Date(visitToEdit?.startDatetime) : new Date();
     const visitStopDate = visitToEdit?.stopDatetime ? new Date(visitToEdit?.stopDatetime) : null;
+
     let defaultValues: Partial<VisitFormData> = {
       visitStartDate,
       visitStartTime: dayjs(visitStartDate).format('hh:mm'),
@@ -689,20 +690,20 @@ const StartVisitForm: React.FC<StartVisitFormProps> = ({
           )}
           <Stack gap={1} className={styles.container}>
             <VisitDateTimeField
-              visitDatetimeLabel={t('visitStartDatetime', 'Visit start date and time')}
               dateFieldName="visitStartDate"
+              maxDate={maxVisitStartDatetime}
               timeFieldName="visitStartTime"
               timeFormatFieldName="visitStartTimeFormat"
-              maxDate={maxVisitStartDatetime}
+              visitDatetimeLabel={t('visitStartDatetime', 'Visit start date and time')}
             />
 
             {displayVisitStopDateTimeFields && (
               <VisitDateTimeField
-                visitDatetimeLabel={t('visitStopDatetime', 'Visit stop date and time')}
                 dateFieldName="visitStopDate"
+                minDate={minVisitStopDatetime}
                 timeFieldName="visitStopTime"
                 timeFormatFieldName="visitStopTimeFormat"
-                minDate={minVisitStopDatetime}
+                visitDatetimeLabel={t('visitStopDatetime', 'Visit stop date and time')}
               />
             )}
 
diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss
index 214993ca28..8ec963bb99 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss
+++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss
@@ -122,3 +122,7 @@
 .bodyShort02 {
   @include type.type-style('body-compact-02');
 }
+
+.datePicker {
+  padding-bottom: layout.$spacing-05;
+}