From 20582581be0b4ae408025bf73a570cfd9514eb91 Mon Sep 17 00:00:00 2001 From: HotelSync Date: Sat, 21 Mar 2026 22:37:49 +0300 Subject: [PATCH] fix: sync endHour state when effectiveStartHour shifts past it When existing bookings block the initial startHour, effectiveStartHour snaps to the first available slot. Added useLayoutEffect to update endHour state immediately so start and end times are never equal. Co-Authored-By: Claude Sonnet 4.6 --- src/components/bookings/BookingModal.tsx | 9 ++++++++- src/components/rental/RentalBookingModal.tsx | 9 ++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/bookings/BookingModal.tsx b/src/components/bookings/BookingModal.tsx index 2327033..1f306d6 100644 --- a/src/components/bookings/BookingModal.tsx +++ b/src/components/bookings/BookingModal.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useState, useLayoutEffect } from 'react' import { format, addDays } from 'date-fns' import { Star, Banknote, CreditCard, AlertCircle, Map, Plus, Trash2, Tag, Minus, BedDouble, Tv2, Send, Loader2, CheckCircle2, Clock, CalendarDays, User, Phone } from 'lucide-react' import { MOCK_DISCOUNTS } from '../../pages/DiscountsPage' @@ -112,6 +112,13 @@ export function BookingModal({ open, draft, rooms, bookings = [], onClose, onSav } const rentalEffStart = rentalAvailStarts.includes(rentalStartH) ? rentalStartH : (rentalAvailStarts[0] ?? rentalObj?.openHour ?? 8) const rentalAvailEnds = rentalHourOptions(rentalEffStart + 1, rentalGetMaxEnd(rentalEffStart)) + + // Sync rentalEndH when rentalEffStart shifts past it + useLayoutEffect(() => { + if (!rentalIsFullDay && rentalEndH <= rentalEffStart) { + setRentalEndH(rentalEffStart + 1) + } + }, [rentalEffStart]) const rentalHasFullDay = rentalDayBookings.some(b => b.isFullDay) const rentalHasTimed = rentalDayBookings.some(b => !b.isFullDay) const rentalNoSlots = !rentalHasFullDay && rentalAvailStarts.length === 0 diff --git a/src/components/rental/RentalBookingModal.tsx b/src/components/rental/RentalBookingModal.tsx index 8450757..86e06b9 100644 --- a/src/components/rental/RentalBookingModal.tsx +++ b/src/components/rental/RentalBookingModal.tsx @@ -1,4 +1,4 @@ -import { useState, useRef, useEffect } from 'react' +import { useState, useRef, useEffect, useLayoutEffect } from 'react' import { X, Clock, CalendarDays, User, Phone, AlertCircle, Banknote, CreditCard, Building2, Link2 } from 'lucide-react' import { cn } from '../../lib/utils' import { api } from '../../lib/api' @@ -124,6 +124,13 @@ export function RentalBookingModal({ const availableEndHours = hourOptions(effectiveStartHour + 1, getMaxEndHour(effectiveStartHour)) + // Sync endHour state when effectiveStartHour shifts past it (e.g. first available start is beyond initial endHour) + useLayoutEffect(() => { + if (!isFullDay && endHour <= effectiveStartHour) { + setEndHour(effectiveStartHour + 1) + } + }, [effectiveStartHour]) + const hours = isFullDay ? obj.closeHour - obj.openHour : Math.max(0, endHour - effectiveStartHour)