Fix booking: use correct BookReservation endpoint + price from selected dates
All checks were successful
Build frontend / build (push) Successful in 38s

- Fixed endpoint: /Reservations/BookReservation/book (was /Reservations/Book)
- bookReservation now takes (propertyId, startDate, endDate) params
- Pricing updates dynamically based on selected date range
- Deposit read from API response instead of hardcoded
- Removed demo fallback that always showed success
This commit is contained in:
Claw AI
2026-03-29 21:23:51 +00:00
parent 86b8fc591b
commit f22bc45a4f
2 changed files with 37 additions and 23 deletions

View File

@ -277,17 +277,20 @@ export default function PropertyDetailsPage() {
return;
}
const propId = property?._raw?.id || parseInt(params.id);
const startDate = new Date(bookingDates.start).toISOString();
const endDate = new Date(bookingDates.end).toISOString();
console.log('[Booking] Reserving:', { propertyId: propId, startDate, endDate });
try {
await bookReservation({
propertyId: parseInt(params.id),
startDate: new Date(bookingDates.start).toISOString(),
endDate: new Date(bookingDates.end).toISOString(),
});
const res = await bookReservation(propId, startDate, endDate);
console.log('[Booking] Success:', res);
setBookingSuccess(true);
toast.success('تم إرسال طلب الحجز بنجاح!');
} catch (err) {
// If API fails, show success anyway for demo purposes
console.warn('Booking API failed:', err);
setBookingSuccess(true);
console.error('[Booking] Failed:', err);
setBookingError(err.message || 'فشل في إرسال طلب الحجز');
}
};
@ -673,18 +676,28 @@ export default function PropertyDetailsPage() {
</div>
<div className="bg-gray-50 p-4 rounded-xl mb-6">
<div className="flex justify-between mb-2">
<span className="text-gray-600">السعر لـ {selectedDuration} أيام</span>
<span className="font-bold text-gray-900">{formatCurrency(property.price * selectedDuration)}</span>
</div>
<div className="flex justify-between mb-2">
<span className="text-gray-600">سلفة ضمان</span>
<span className="font-bold text-gray-900">{formatCurrency(500000)}</span>
</div>
<div className="flex justify-between pt-2 border-t border-gray-200 font-bold">
<span className="text-gray-900">الإجمالي</span>
<span className="text-gray-900">{formatCurrency(property.price * selectedDuration + 500000)}</span>
</div>
{(() => {
const days = bookingDates.start && bookingDates.end
? Math.ceil((new Date(bookingDates.end) - new Date(bookingDates.start)) / (1000 * 60 * 60 * 24))
: 0;
const effectiveDays = days > 0 ? days : 1;
return (
<>
<div className="flex justify-between mb-2">
<span className="text-gray-600">السعر لـ {effectiveDays} يوم{effectiveDays > 1 ? 'اً' : 'اً'}</span>
<span className="font-bold text-gray-900">{formatCurrency(property.price * effectiveDays)}</span>
</div>
<div className="flex justify-between mb-2">
<span className="text-gray-600">سلفة ضمان</span>
<span className="font-bold text-gray-900">{formatCurrency(property._raw?.deposit || 0)}</span>
</div>
<div className="flex justify-between pt-2 border-t border-gray-200 font-bold">
<span className="text-gray-900">الإجمالي</span>
<span className="text-gray-900">{formatCurrency(property.price * effectiveDays + (property._raw?.deposit || 0))}</span>
</div>
</>
);
})()}
</div>
{bookingError && (

View File

@ -149,10 +149,11 @@ export async function checkAvailability(propertyId, fromDate = null, toDate = nu
return apiFetch(`/Reservations/GetAvailable/${propertyId}${query ? `?${query}` : ''}`);
}
export async function bookReservation(data) {
return apiFetch('/Reservations/Book', {
export async function bookReservation(propertyId, startDate, endDate) {
console.log('[API] Booking reservation:', { propertyId, startDate, endDate });
return apiFetch('/Reservations/BookReservation/book', {
method: 'POST',
body: JSON.stringify(data),
body: JSON.stringify({ propertyId, startDate, endDate }),
});
}