edit1

client/src/pages/BookingConfirmation.js

@@ -1,30 +1,118 @@
-import React from 'react';
-import { Container, Typography, Box } from '@mui/material';
+import React, { useEffect, useMemo } from 'react';
+import { Container, Typography, Box, Button, Paper, Divider } from '@mui/material';
+import { useLocation, Link } from 'react-router-dom';
 
 const BookingConfirmation = () => {
+  const location = useLocation();
+
+  // نتوقع إنه صفحة الحجز تبعتنا رح تعمل navigate وتبعت state فيه request
+  const request = location.state?.request || null;
+
+  const WA_NUMBER = useMemo(() => {
+    // إذا عندك رقم ثابت حاليا
+    return '963986105010';
+  }, []);
+
+  const waText = useMemo(() => {
+    if (!request) {
+      return encodeURIComponent('Hello, I would like to book a room at Old Vine Hotel.');
+    }
+
+    const lines = [
+      'New booking request from website:',
+      `Name: ${request.fullName || ''}`,
+      `Phone: ${request.phone || ''}`,
+      request.email ? `Email: ${request.email}` : null,
+      request.checkInDate ? `Check-in: ${new Date(request.checkInDate).toLocaleDateString()}` : null,
+      request.checkOutDate ? `Check-out: ${new Date(request.checkOutDate).toLocaleDateString()}` : null,
+      request.adults != null ? `Adults: ${request.adults}` : null,
+      request.children != null ? `Children: ${request.children}` : null,
+      request.roomCategory ? `Category: ${request.roomCategory}` : null,
+      request.message ? `Message: ${request.message}` : null,
+    ].filter(Boolean);
+
+    return encodeURIComponent(lines.join('\n'));
+  }, [request]);
+
+  const WA_LINK = useMemo(() => `https://wa.me/${WA_NUMBER}?text=${waText}`, [WA_NUMBER, waText]);
+
+  // خيار: تفتح واتساب أوتوماتيك بعد نجاح الإرسال
+  useEffect(() => {
+    if (request?.autoOpenWhatsApp) {
+      window.open(WA_LINK, '_blank', 'noopener,noreferrer');
+    }
+  }, [request, WA_LINK]);
+
   return (
     <Container maxWidth="lg" sx={{ py: 8 }}>
-      <Box sx={{ textAlign: 'center', mb: 6 }}>
+      <Box sx={{ textAlign: 'center', mb: 4 }}>
         <Typography variant="h3" component="h1" gutterBottom>
-          Booking Confirmation
+          Booking Request Sent
         </Typography>
         <Typography variant="h5" color="text.secondary">
-          Your reservation has been confirmed
+          We received your request ✅
         </Typography>
       </Box>
-      <Box sx={{ 
-        display: 'flex', 
-        flexDirection: 'column', 
-        alignItems: 'center',
-        gap: 4
-      }}>
-        <Typography variant="body1" sx={{ textAlign: 'center', maxWidth: 800 }}>
-          Thank you for your booking. You will receive a confirmation email shortly.
-        </Typography>
-        {/* Add booking confirmation details here */}
+
+      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+        <Paper sx={{ p: 4, width: '100%', maxWidth: 720 }}>
+          <Typography variant="body1" sx={{ textAlign: 'center', mb: 3 }}>
+            Thank you! Our team will contact you soon. You can also confirm faster via WhatsApp.
+          </Typography>
+
+          {request && (
+            <>
+              <Divider sx={{ my: 2 }} />
+              <Typography variant="h6" sx={{ mb: 2 }}>
+                Request Summary
+              </Typography>
+
+              <Box sx={{ display: 'grid', gap: 1 }}>
+                <Typography><b>Name:</b> {request.fullName || '—'}</Typography>
+                <Typography><b>Phone:</b> {request.phone || '—'}</Typography>
+                {request.email && <Typography><b>Email:</b> {request.email}</Typography>}
+                {request.roomCategory && <Typography><b>Category:</b> {request.roomCategory}</Typography>}
+                {request.checkInDate && <Typography><b>Check-in:</b> {new Date(request.checkInDate).toLocaleDateString()}</Typography>}
+                {request.checkOutDate && <Typography><b>Check-out:</b> {new Date(request.checkOutDate).toLocaleDateString()}</Typography>}
+                {(request.adults != null || request.children != null) && (
+                  <Typography><b>Guests:</b> {request.adults ?? 0} adults, {request.children ?? 0} children</Typography>
+                )}
+                {request.message && <Typography><b>Message:</b> {request.message}</Typography>}
+              </Box>
+            </>
+          )}
+
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mt: 4, justifyContent: 'center' }}>
+            <Button
+              component="a"
+              href={WA_LINK}
+              target="_blank"
+              rel="noopener noreferrer"
+              variant="contained"
+              color="secondary"
+              sx={{ px: 4 }}
+            >
+              Open WhatsApp
+            </Button>
+
+            <Button component={Link} to="/rooms" variant="outlined" sx={{ px: 4 }}>
+              Browse Rooms
+            </Button>
+
+            <Button component={Link} to="/" variant="text" sx={{ px: 4 }}>
+              Back Home
+            </Button>
+          </Box>
+
+          {!request && (
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'center', mt: 2 }}>
+              (No request details were passed to this page.)
+            </Typography>
+          )}
+        </Paper>
       </Box>
     </Container>
   );
 };
 
-export default BookingConfirmation;
+export default BookingConfirmation;