From 389c0f65caf7e559e69b220b4fa88ce8806f7d6f Mon Sep 17 00:00:00 2001
From: Mozafar Haider <mozafar@dhis2.org>
Date: Fri, 4 Oct 2024 12:26:25 +0100
Subject: [PATCH] fix: stories for calendar validation

---
 .../src/calendar-input/calendar-input.js      | 17 ++-----
 .../stories/calendar-input.prod.stories.js    | 49 +++++++++++--------
 .../src/stories/calendar-story-wrapper.js     |  9 ++++
 3 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
index 7f7c76fca..9498fbe9e 100644
--- a/components/calendar/src/calendar-input/calendar-input.js
+++ b/components/calendar/src/calendar-input/calendar-input.js
@@ -42,7 +42,6 @@ export const CalendarInput = ({
     const ref = useRef()
     const [open, setOpen] = useState(false)
     const [partialDate, setPartialDate] = useState(date)
-    const [isIconDisplayed, setIsIconDisplayed] = useState(false)
 
     const excludeRef = useRef(null)
 
@@ -67,9 +66,7 @@ export const CalendarInput = ({
                 maxDateString: maxDate,
                 strictValidation,
             })
-            setIsIconDisplayed(
-                validated.errorMessage || validated.warningMessage
-            )
+
             setOpen(false)
             parentOnDateSelect?.({
                 calendarDateString: result.calendarDateString,
@@ -97,7 +94,6 @@ export const CalendarInput = ({
             maxDateString: maxDate,
             strictValidation,
         })
-        setIsIconDisplayed(validated.errorMessage || validated.warningMessage)
         parentOnDateSelect?.({ calendarDateString: partialDate, ...validated })
 
         if (
@@ -143,12 +139,6 @@ export const CalendarInput = ({
                     value={partialDate}
                     onChange={handleChange}
                     onBlur={handleBlur}
-                    validationText={
-                        pickerResults.errorMessage ||
-                        pickerResults.warningMessage
-                    }
-                    error={!!pickerResults.errorMessage}
-                    warning={!!pickerResults.warningMessage}
                     inputWidth={inputWidth}
                 />
                 {clearable && (
@@ -168,7 +158,6 @@ export const CalendarInput = ({
                             small
                             onClick={() => {
                                 parentOnDateSelect?.(null)
-                                setIsIconDisplayed(false)
                             }}
                             type="button"
                         >
@@ -207,7 +196,9 @@ export const CalendarInput = ({
                     }
                     .calendar-clear-button {
                         position: absolute;
-                        inset-inline-end: ${isIconDisplayed ? '36px' : '6px'};
+                        inset-inline-end: ${rest.error || rest.warning
+                            ? '36px'
+                            : '6px'};
                         inset-block-start: 27px;
                     }
                     .calendar-clear-button.with-icon {
diff --git a/components/calendar/src/stories/calendar-input.prod.stories.js b/components/calendar/src/stories/calendar-input.prod.stories.js
index 19b8c0377..4acc63fb5 100644
--- a/components/calendar/src/stories/calendar-input.prod.stories.js
+++ b/components/calendar/src/stories/calendar-input.prod.stories.js
@@ -25,19 +25,18 @@ export default {
 
 const buildCalendar =
     ({ date, locale, calendar }) =>
-    () =>
-        (
-            <CalendarStoryWrapper
-                component={CalendarInput}
-                dir="ltr"
-                timeZone="Africa/Khartoum"
-                weekDayFormat="short"
-                date={date}
-                locale={locale}
-                calendar={calendar}
-                onDateSelect={() => {}}
-            />
-        )
+    () => (
+        <CalendarStoryWrapper
+            component={CalendarInput}
+            dir="ltr"
+            timeZone="Africa/Khartoum"
+            weekDayFormat="short"
+            date={date}
+            locale={locale}
+            calendar={calendar}
+            onDateSelect={() => {}}
+        />
+    )
 
 export const EthiopicWithAmharic = buildCalendar({
     calendar: 'ethiopic',
@@ -142,9 +141,13 @@ export function CalendarWithEditiableInput() {
 
 export function CalendarWithEditiableInputReactForm() {
     const [calendarError, setCalendarError] = useState(undefined)
+    const [calendarWarning, setCalendarWarning] = useState(undefined)
 
     const errored = () => {
-        return { calendar: calendarError }
+        if (!calendarError && !calendarWarning) {
+            return { calendar: undefined }
+        }
+        return { calendar: calendarError || calendarWarning }
     }
 
     return (
@@ -155,7 +158,7 @@ export function CalendarWithEditiableInputReactForm() {
             initialValues={{ calendar: '2022-10-12' }}
             validate={errored}
         >
-            {({ handleSubmit }) => {
+            {({ handleSubmit, invalid }) => {
                 return (
                     <form onSubmit={handleSubmit}>
                         <Field name="calendar">
@@ -167,12 +170,16 @@ export function CalendarWithEditiableInputReactForm() {
                                     editable
                                     date={props.input.value}
                                     calendar="gregory"
+                                    validationText={
+                                        calendarError || calendarWarning
+                                    }
+                                    error={!!calendarError}
+                                    warning={!!calendarWarning}
+                                    strictValidation={true}
+                                    minDate="2022-11-01"
                                     onDateSelect={(date) => {
-                                        if (!date.isValid) {
-                                            setCalendarError(date.errorMessage)
-                                        } else {
-                                            setCalendarError(undefined)
-                                        }
+                                        setCalendarError(date.errorMessage)
+                                        setCalendarWarning(date.warningMessage)
                                         props.input.onChange(
                                             date ? date?.calendarDateString : ''
                                         )
@@ -184,7 +191,7 @@ export function CalendarWithEditiableInputReactForm() {
 
                         <button
                             type="submit"
-                            disabled={false}
+                            disabled={invalid}
                             onClick={handleSubmit}
                         >
                             Submit
diff --git a/components/calendar/src/stories/calendar-story-wrapper.js b/components/calendar/src/stories/calendar-story-wrapper.js
index dd2e654aa..9e9e69bbb 100644
--- a/components/calendar/src/stories/calendar-story-wrapper.js
+++ b/components/calendar/src/stories/calendar-story-wrapper.js
@@ -19,6 +19,9 @@ export const CalendarStoryWrapper = (props) => {
     const [selectedDirection, setSelectedDirection] = useState(dir)
     const [selectedWeekFormat, setWeekDayFormat] = useState(weekDayFormat)
 
+    const [calendarError, setCalendarError] = useState(undefined)
+    const [calendarWarning, setCalendarWarning] = useState(undefined)
+
     const [selectedLocale, setLocale] = useState(locale)
     const [selectedDate, setSelectedDate] = useState({
         calendarDateString: date,
@@ -112,7 +115,13 @@ export const CalendarStoryWrapper = (props) => {
                 dir={selectedDirection}
                 locale={selectedLocale}
                 date={selectedDate.calendarDateString}
+                validationText={calendarError || calendarWarning}
+                error={!!calendarError}
+                warning={!!calendarWarning}
                 onDateSelect={(date) => {
+                    setCalendarError(date.errorMessage)
+                    setCalendarWarning(date.warningMessage)
+
                     setSelectedDate(date)
                 }}
                 timeZone={timeZone}