From f48059a36aca052260ecda451ee18911c3316ef4 Mon Sep 17 00:00:00 2001
From: praneeth <141117659+Muppasanipraneeth@users.noreply.github.com>
Date: Tue, 14 Jan 2025 17:33:37 +0530
Subject: [PATCH] added openmrs datepicker

---
 .../allergies-detailed-summary.component.tsx  |  2 +-
 .../allergies-form/allergy-form.workspace.tsx | 39 +++++++++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
index 85f64837ae..8ad0639bb1 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
@@ -45,7 +45,7 @@ const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ pat
     { key: 'reaction', header: t('reaction', 'Reaction') },
     {
       key: 'note',
-      header: t('onsetDateAndComments', 'Onset date and comments'),
+      header: t('onsetDate', 'Onset date '),
     },
   ];
 
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.workspace.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.workspace.tsx
index 0225c9ccfe..09e8910df3 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.workspace.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.workspace.tsx
@@ -17,7 +17,7 @@ import {
   TextArea,
   TextInput,
 } from '@carbon/react';
-import { z } from 'zod';
+import { date, z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { type Control, Controller, useForm, type UseFormSetValue, type UseFormGetValues } from 'react-hook-form';
 import {
@@ -27,6 +27,7 @@ import {
   useConfig,
   useLayoutType,
   ResponsiveWrapper,
+  OpenmrsDatePicker,
 } from '@openmrs/esm-framework';
 import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import {
@@ -55,6 +56,15 @@ const allergyFormSchema = z.object({
   nonCodedAllergicReaction: z.string().optional(),
   severityOfWorstReaction: z.string(),
   comment: z.string().optional(),
+  onsetDate: z.date().refine(
+    (date) => {
+      const currentDate = new Date(date);
+      return currentDate <= new Date();
+    },
+    {
+      message: 'Date cannot be in the future',
+    },
+  ),
 });
 
 type AllergyFormData = {
@@ -64,6 +74,7 @@ type AllergyFormData = {
   nonCodedAllergicReaction: string;
   severityOfWorstReaction: string;
   comment: string;
+  onsetDate: Date;
 };
 
 interface AllergyFormProps extends DefaultPatientWorkspaceProps {
@@ -133,6 +144,7 @@ function AllergyForm(props: AllergyFormProps) {
       nonCodedAllergicReaction: '',
       severityOfWorstReaction: null,
       comment: '',
+      onsetDate: new Date(),
     };
     if (formContext === 'editing') {
       defaultAllergy.allergen = allergens?.find((a) => allergy?.display === a?.display);
@@ -150,7 +162,7 @@ function AllergyForm(props: AllergyFormProps) {
     watch,
     getValues,
     setValue,
-    formState: { isDirty },
+    formState: { errors, isDirty },
   } = useForm<AllergyFormData>({
     mode: 'all',
     resolver: zodResolver(allergyFormSchema),
@@ -190,6 +202,7 @@ function AllergyForm(props: AllergyFormProps) {
         nonCodedAllergicReaction,
         allergicReactions,
         severityOfWorstReaction,
+        onsetDate,
       } = data;
 
       const selectedAllergicReactions = allergicReactions.filter((value) => value !== '');
@@ -401,6 +414,26 @@ function AllergyForm(props: AllergyFormProps) {
               />
             </FormGroup>
           </div>
+          <div>
+            <ResponsiveWrapper>
+              <Controller
+                name="onsetDate"
+                control={control}
+                render={({ field: { onBlur, onChange, value } }) => (
+                  <OpenmrsDatePicker
+                    id="onsetDate"
+                    label={t('DateofOnset', 'Date of Onset ')}
+                    onChange={(selectedDate) => {
+                      return onChange(selectedDate);
+                    }}
+                    onBlur={onBlur}
+                    value={value}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </div>
+
           <div>
             <ResponsiveWrapper>
               <Controller
@@ -410,7 +443,7 @@ function AllergyForm(props: AllergyFormProps) {
                   <TextArea
                     id="comments"
                     invalidText={t('invalidComment', 'Invalid comment, try again')}
-                    labelText={t('dateOfOnsetAndComments', 'Date of onset and comments')}
+                    labelText={t('comments', 'comments')}
                     onChange={onChange}
                     placeholder={t('typeAdditionalComments', 'Type any additional comments here')}
                     onBlur={onBlur}