From 615a939afac0ff99ef8fb76e0fc29c287160b395 Mon Sep 17 00:00:00 2001
From: Rohit Kumar Saini <rohitbhatwara1@gmail.com>
Date: Wed, 15 Jan 2025 13:59:50 +0100
Subject: [PATCH 1/2] feat(booking-date): update endDate when startDate is
 changed

---
 app/components/booking/form.tsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/components/booking/form.tsx b/app/components/booking/form.tsx
index b0b73b116..e5dcdb6c7 100644
--- a/app/components/booking/form.tsx
+++ b/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">

From 7935a70b4d59274063b4f0af489b4f76e8394223 Mon Sep 17 00:00:00 2001
From: Nikolay Bonev <nbonev@duck.com>
Date: Wed, 15 Jan 2025 16:02:41 +0200
Subject: [PATCH 2/2] small adjustment to time of the new endDate

---
 app/components/booking/form.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/booking/form.tsx b/app/components/booking/form.tsx
index e5dcdb6c7..b38afb806 100644
--- a/app/components/booking/form.tsx
+++ b/app/components/booking/form.tsx
@@ -1,6 +1,5 @@
 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";
@@ -363,8 +362,9 @@ export function BookingForm({
                        */
                       const newStartDate = new Date(event.target.value);
                       if (endDate && newStartDate > new Date(endDate)) {
+                        const now = new Date();
                         const newEndDate = dateForDateTimeInputValue(
-                          endOfDay(newStartDate)
+                          new Date(now.setHours(18, 0, 0))
                         );
                         setEndDate(
                           newEndDate.substring(0, newEndDate.length - 3)