116 lines
4.4 KiB
JavaScript
116 lines
4.4 KiB
JavaScript
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();
|
|
|
|
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: 4 }}>
|
|
<Typography variant="h3" component="h1" gutterBottom>
|
|
Booking Request Sent
|
|
</Typography>
|
|
<Typography variant="h5" color="text.secondary">
|
|
We received your request ✅
|
|
</Typography>
|
|
</Box>
|
|
|
|
<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;
|