feat(booking-date): update endDate when startDate is changed

app/components/booking/form.tsx

@@ -1,5 +1,6 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useLoaderData, useNavigation } from "@remix-run/react";
+import { endOfDay } from "date-fns";
 import { useAtom } from "jotai";
 import { DateTime } from "luxon";
 import { useZorm } from "react-zorm";
@@ -15,6 +16,7 @@ import type { useBookingStatusHelpers } from "~/hooks/use-booking-status";
 import { useUserRoleHelper } from "~/hooks/user-user-role-helper";
 import type { loader } from "~/routes/_layout+/bookings.new";
 import { type getHints } from "~/utils/client-hints";
+import { dateForDateTimeInputValue } from "~/utils/date-fns";
 import { isFormProcessing } from "~/utils/form";
 import {
   PermissionAction,
@@ -129,7 +131,7 @@ export function BookingForm({
   id,
   name,
   startDate,
-  endDate,
+  endDate: incomingEndDate,
   custodianRef,
   bookingStatus,
   bookingFlags,
@@ -139,6 +141,8 @@ export function BookingForm({
   const navigation = useNavigation();
   const { teamMembers } = useLoaderData<typeof loader>();
 
+  const [endDate, setEndDate] = useState(incomingEndDate);
+
   /** If there is noId, that means we are creating a new booking */
   const isNewBooking = !id;
 
@@ -352,6 +356,21 @@ export function BookingForm({
                     defaultValue={startDate}
                     placeholder="Booking"
                     required
+                    onChange={(event) => {
+                      /**
+                       * When user changes the startDate and the new startDate is greater than the endDate
+                       * in that case, we have to update endDate to be the endDay date of startDate.
+                       */
+                      const newStartDate = new Date(event.target.value);
+                      if (endDate && newStartDate > new Date(endDate)) {
+                        const newEndDate = dateForDateTimeInputValue(
+                          endOfDay(newStartDate)
+                        );
+                        setEndDate(
+                          newEndDate.substring(0, newEndDate.length - 3)
+                        );
+                      }
+                    }}
                   />
                 </FormRow>
                 <FormRow
@@ -370,6 +389,7 @@ export function BookingForm({
                     defaultValue={endDate}
                     placeholder="Booking"
                     required
+                    value={endDate ? endDate : undefined}
                   />
                 </FormRow>
                 <p className="text-[14px] text-gray-600">