From f22bc45a4fb5e7fd5d98ad6860c161855a22a108 Mon Sep 17 00:00:00 2001
From: Claw AI <claw@example.com>
Date: Sun, 29 Mar 2026 21:23:51 +0000
Subject: [PATCH] Fix booking: use correct BookReservation endpoint + price
 from selected dates

- 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
---
 app/property/[id]/page.js | 53 ++++++++++++++++++++++++---------------
 app/utils/api.js          |  7 +++---
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/app/property/[id]/page.js b/app/property/[id]/page.js
index 596b1be..ccaa36f 100644
--- a/app/property/[id]/page.js
+++ b/app/property/[id]/page.js
@@ -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 && (
diff --git a/app/utils/api.js b/app/utils/api.js
index e09737a..20e2ebd 100644
--- a/app/utils/api.js
+++ b/app/utils/api.js
@@ -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 }),
   });
 }