fix(SW-649): let react-hook-form do date state handling

components/HotelReservation/EnterDetails/Details/schema.ts

@@ -23,7 +23,7 @@ export const joinDetailsSchema = baseDetailsSchema.merge(
   z.object({
     join: z.literal(true),
     zipCode: z.string().min(1, { message: "Zip code is required" }),
-    dateOfBirth: z.string(),
+    dateOfBirth: z.string().min(1, { message: "Date of birth is required" }),
     termsAccepted: z.literal(true, {
       errorMap: (err, ctx) => {
         switch (err.code) {

components/TempDesignSystem/Form/Date/date.module.css

@@ -18,3 +18,12 @@
 .year {
   grid-area: year;
 }
+
+/* TODO: Handle this in Select component.
+   - out of scope for now.
+*/
+.day.invalid > div > div,
+.month.invalid > div > div,
+.year.invalid > div > div {
+  border-color: var(--Scandic-Red-60);
+}

components/TempDesignSystem/Form/Date/date.ts

@@ -2,6 +2,7 @@ import type { RegisterOptions } from "react-hook-form"
 
 export const enum DateName {
   date = "date",
+  day = "day",
   month = "month",
   year = "year",
 }

components/TempDesignSystem/Form/Date/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { parseDate } from "@internationalized/date"
-import { useState } from "react"
+import { useEffect } from "react"
 import { DateInput, DatePicker, Group } from "react-aria-components"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
@@ -21,37 +21,24 @@ import type { DateProps } from "./date"
 
 export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   const intl = useIntl()
-  const currentValue = useWatch({ name })
+  const { control, setValue, trigger, formState, watch } = useFormContext()
-  const { control, setValue, trigger, formState } = useFormContext()
+  const { field, fieldState } = useController({
-  const { field } = useController({
     control,
     name,
     rules: registerOptions,
   })
 
-  const dayLabel = intl.formatMessage({ id: "Day" })
+  const currentDateValue = useWatch({ name })
-  const monthLabel = intl.formatMessage({ id: "Month" })
+  const year = watch(DateName.year)
-  const yearLabel = intl.formatMessage({ id: "Year" })
+  const month = watch(DateName.month)
-
+  const day = watch(DateName.day)
-  const initialDate = dt(currentValue)
-
-  const [selectedYear, setSelectedYear] = useState<number | null>(
-    initialDate.isValid() ? initialDate.year() : null
-  )
-  const [selectedMonth, setSelectedMonth] = useState<number | null>(
-    initialDate.isValid() ? initialDate.month() : null
-  )
-  const [selectedDay, setSelectedDay] = useState<number | null>(
-    initialDate.isValid() ? initialDate.date() : null
-  )
-
-  const currentYear = new Date().getFullYear()
 
   const months = rangeArray(1, 12).map((month) => ({
     value: month,
     label: `${month}`,
   }))
 
+  const currentYear = new Date().getFullYear()
   const years = rangeArray(1900, currentYear - 18)
     .reverse()
     .map((year) => ({ value: year, label: year.toString() }))
@@ -60,58 +47,61 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
     if (month === null) {
       return 31
     }
+
+    // If month is February and no year selected, return minimum.
+    if (month === 1 && !year) {
+      return 28
+    }
+
     const yearToUse = year ?? new Date().getFullYear()
     return dt(`${yearToUse}-${month + 1}-01`).daysInMonth()
   }
 
-  const days = rangeArray(1, getDaysInMonth(selectedYear, selectedMonth)).map(
+  // Calculate available days based on selected year and month
-    (day) => ({
+  const daysInMonth = getDaysInMonth(
-      value: day,
+    year ? Number(year) : null,
-      label: `${day}`,
+    month ? Number(month) - 1 : null
-    })
   )
 
-  function handleSegmentChange(selector: DateName, value: number) {
+  const days = rangeArray(1, daysInMonth).map((day) => ({
-    let newYear = selectedYear
+    value: day,
-    let newMonth = selectedMonth
+    label: `${day}`,
-    let newDay = selectedDay
+  }))
 
-    switch (selector) {
+  const dayLabel = intl.formatMessage({ id: "Day" })
-      case DateName.year:
+  const monthLabel = intl.formatMessage({ id: "Month" })
-        newYear = value
+  const yearLabel = intl.formatMessage({ id: "Year" })
-        setSelectedYear(newYear)
-        break
-      /**
-       * Months are 0 index based and therefore we
-       * must subtract by 1 to get the selected month
-       */
-      case DateName.month:
-        newMonth = value - 1
-        setSelectedMonth(newMonth)
-        if (selectedDay) {
-          const maxDays = getDaysInMonth(newYear, newMonth)
-          if (selectedDay > maxDays) {
-            newDay = maxDays
-            setSelectedDay(newDay)
-          }
-        }
-        break
-      case DateName.date:
-        newDay = value
-        setSelectedDay(newDay)
-        break
-    }
 
-    // Check if all segments are set and update form value.
+  useEffect(() => {
-    if (newYear && newMonth !== null && newDay) {
+    if (formState.isSubmitting) return
-      const newDate = dt().year(newYear).month(newMonth).date(newDay)
 
-      if (newDate.isValid()) {
+    if (month && day) {
-        setValue(name, newDate.format("YYYY-MM-DD"))
+      const maxDays = getDaysInMonth(
-        trigger(name)
+        year ? Number(year) : null,
+        Number(month) - 1
+      )
+      const adjustedDay = Number(day) > maxDays ? maxDays : Number(day)
+
+      if (adjustedDay !== Number(day)) {
+        setValue(DateName.day, adjustedDay)
       }
     }
-  }
+
+    if (year && month && day) {
+      const newDate = dt()
+        .year(Number(year))
+        .month(Number(month) - 1)
+        .date(Number(day))
+
+      if (newDate.isValid()) {
+        setValue(name, newDate.format("YYYY-MM-DD"), {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: true,
+        })
+      }
+    }
+  }, [year, month, day, setValue, name, formState.isSubmitting])
 
   let dateValue = null
   try {
@@ -120,7 +110,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      * date, but we can't check isNan since
      * we recieve the date as "1999-01-01"
      */
-    dateValue = dt(currentValue).isValid() ? parseDate(currentValue) : null
+    dateValue = dt(currentDateValue).isValid()
+      ? parseDate(currentDateValue)
+      : null
   } catch (error) {
     console.warn("Known error for parse date in DateSelect: ", error)
   }
@@ -129,6 +121,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
     <DatePicker
       aria-label={intl.formatMessage({ id: "Select date of birth" })}
       isRequired={!!registerOptions.required}
+      isInvalid={!formState.isValid}
       name={name}
       ref={field.ref}
       value={dateValue}
@@ -140,63 +133,60 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             switch (segment.type) {
               case "day":
                 return (
-                  <div className={styles.day}>
+                  <div
+                    className={`${styles.day} ${fieldState.invalid ? styles.invalid : ""}`}
+                  >
                     <Select
                       aria-label={dayLabel}
                       items={days}
                       label={dayLabel}
-                      name={DateName.date}
+                      name={DateName.day}
-                      onSelect={(select: Key) =>
+                      onSelect={(key: Key) =>
-                        handleSegmentChange(DateName.date, Number(select))
+                        setValue(DateName.day, Number(key))
                       }
-                      placeholder="DD"
+                      placeholder={dayLabel}
                       required
                       tabIndex={3}
-                      defaultSelectedKey={
-                        segment.isPlaceholder ? undefined : segment.value
-                      }
                       value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>
                 )
               case "month":
                 return (
-                  <div className={styles.month}>
+                  <div
+                    className={`${styles.month} ${fieldState.invalid ? styles.invalid : ""}`}
+                  >
                     <Select
                       aria-label={monthLabel}
                       items={months}
                       label={monthLabel}
                       name={DateName.month}
-                      onSelect={(select: Key) =>
+                      onSelect={(key: Key) =>
-                        handleSegmentChange(DateName.month, Number(select))
+                        setValue(DateName.month, Number(key))
                       }
-                      placeholder="MM"
+                      placeholder={monthLabel}
                       required
                       tabIndex={2}
-                      defaultSelectedKey={
-                        segment.isPlaceholder ? undefined : segment.value
-                      }
                       value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>
                 )
               case "year":
                 return (
-                  <div className={styles.year}>
+                  <div
+                    className={`${styles.year} ${fieldState.invalid ? styles.invalid : ""}`}
+                  >
                     <Select
                       aria-label={yearLabel}
                       items={years}
                       label={yearLabel}
                       name={DateName.year}
-                      onSelect={(select: Key) =>
+                      onSelect={(key: Key) =>
-                        handleSegmentChange(DateName.year, Number(select))
+                        setValue(DateName.year, Number(key))
                       }
-                      placeholder="YYYY"
+                      placeholder={yearLabel}
                       required
                       tabIndex={1}
-                      defaultSelectedKey={
-                        segment.isPlaceholder ? undefined : segment.value
-                      }
                       value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>