No booking found.
+ +
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Booking/BookingPage.jsx b/src/components/Booking/BookingPage.jsx
new file mode 100644
index 0000000000..5d01022492
--- /dev/null
+++ b/src/components/Booking/BookingPage.jsx
@@ -0,0 +1,253 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { Container, Row, Col, Button, Input, Label, Alert, Spinner } from 'reactstrap';
+import { FaComment, FaBell, FaUser } from 'react-icons/fa';
+import logo from '../../assets/images/logo2.png';
+import './booking.css';
+
+const STORAGE_KEY = 'bookingDraft_v1';
+const NIGHTLY_RATE = 140;
+const UNAVAILABLE = ['2025-09-16', '2025-09-21', '2025-10-02', '2025-10-05', '2025-10-18'];
+
+function isPastOrToday(dateStr) {
+ const input = new Date(dateStr);
+ const today = new Date();
+ today.setHours(0, 0, 0, 0);
+ return input <= today;
+}
+
+export default function BookingPage() {
+ const darkMode = useSelector(s => s.theme?.darkMode);
+ const history = useHistory();
+
+ const [village, setVillage] = useState('Choose your Village');
+ const [start, setStart] = useState('');
+ const [end, setEnd] = useState('');
+ const [name, setName] = useState('');
+ const [email, setEmail] = useState('');
+ const [phone, setPhone] = useState('');
+ const [card, setCard] = useState('');
+ const [cvv, setCvv] = useState('');
+ const [exp, setExp] = useState('');
+ const [loading, setLoading] = useState(false);
+ const firstName = useSelector(state => state.auth?.firstName);
+
+ const userName = firstName || 'Guest';
+
+ useEffect(() => {
+ try {
+ const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
+ const isBooked = localStorage.getItem('bookingComplete');
+ if (saved && isBooked !== 'true') {
+ setStart(saved.start || '');
+ setEnd(saved.end || '');
+ setName(saved.name || '');
+ setEmail(saved.email || '');
+ setPhone(saved.phone || '');
+ setCard(saved.card || '');
+ setCvv(saved.cvv || '');
+ setExp(saved.exp || '');
+ }
+ } catch {}
+ }, []);
+
+ useEffect(() => {
+ const payload = { start, end, name, email, phone, card, cvv, exp };
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
+ }, [start, end, name, email, phone, card, cvv, exp]);
+
+ const price = useMemo(() => {
+ if (!start || !end) return null;
+ const s = new Date(start);
+ const e = new Date(end);
+ const nights = Math.ceil((e - s) / (1000 * 60 * 60 * 24));
+ if (isNaN(nights) || nights <= 0) return { error: 'End date must be after start date.' };
+ const subtotal = nights * NIGHTLY_RATE;
+ const taxes = Math.round(subtotal * 0.12 * 100) / 100;
+ const fees = 15;
+ const total = Math.round((subtotal + taxes + fees) * 100) / 100;
+ return { nights, subtotal, taxes, fees, total };
+ }, [start, end]);
+
+ const dateDisabled = d => {
+ return UNAVAILABLE.includes(d) || isPastOrToday(d);
+ };
+
+ const proceed = async () => {
+ if (!start || !end) return toast.error('Please choose dates.');
+ if (dateDisabled(start) || dateDisabled(end))
+ return toast.error('Selected date is unavailable.');
+ if (!name.trim() || !email.trim() || !phone.trim())
+ return toast.error('Fill Name, Email and Phone.');
+ if (!price || price.error) return toast.error(price?.error || 'Invalid date range.');
+
+ setLoading(true);
+ setTimeout(() => {
+ setLoading(false);
+ toast.success('Booking captured.');
+ localStorage.setItem('bookingComplete', 'true');
+ history.push('/booking/confirm', {
+ booking: { start, end, guest: { name, email, phone }, price },
+ });
+ }, 700);
+ };
+
+ return (
+
+ 
+
+
+ Booking Confirmation
++ Listing: Unit 405, Earthbag Village +
++ Dates: {booking.start} → {booking.end} +
++ Guest: {booking.guest.name} ({booking.guest.email},{' '} + {booking.guest.phone}) +
++
+ Total: ${booking.price.total.toFixed(2)} +
++ You’ll receive an email shortly. Some bookings may require host approval. +
+ +
+
+
+
+
+
+ );
+}
diff --git a/src/components/Booking/DateRangePicker.jsx b/src/components/Booking/DateRangePicker.jsx
new file mode 100644
index 0000000000..2d0387ad39
--- /dev/null
+++ b/src/components/Booking/DateRangePicker.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { toISO, eachDay } from './bookingApi';
+import './booking.css';
+
+export default function DateRangePicker({ checkIn, checkOut, onChange, minDate, maxDate, error }) {
+ const todayISO = toISO(new Date());
+ const min = minDate ? toISO(minDate) : todayISO;
+
+ const conflict = checkIn && checkOut && eachDay(checkIn, checkOut).some(d => UNAVAILABLE.has(d));
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ WELCOME, {userName}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ Unit 405, Earthbag Village –{' '}
+
+
+ Booking Details
+
+ Dates: {start && end ? `${start} - ${end}` : 'Select dates'}
+
+
+ {price?.error && {price.error} }
+ {!price && Select dates to see pricing }
+ {price && !price.error && (
+ <>
+
+
+
+ {price.nights} × ${NIGHTLY_RATE}
+
+ ${price.subtotal.toFixed(2)}
+
+
+ Taxes
+ ${price.taxes.toFixed(2)}
+
+
+ Fees
+ ${price.fees.toFixed(2)}
+
+
+ Total
+ ${price.total.toFixed(2)}
+
+
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Booking/PriceBreakdown.jsx b/src/components/Booking/PriceBreakdown.jsx
new file mode 100644
index 0000000000..704f016f60
--- /dev/null
+++ b/src/components/Booking/PriceBreakdown.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import './booking.css';
+
+const money = n => `$${(n || 0).toFixed(2)}`;
+
+export default function PriceBreakdown({ nightly, nights, subtotal, tax, fees, total }) {
+ return (
+ Select Dates
+
+
+
+
+
+
+ Unavailable: {Array.from(UNAVAILABLE).join(', ')}
+
+ {(error || conflict) && (
+ {error || 'Your date range includes an unavailable day.'}
+ )}
+
+
+ );
+}
diff --git a/src/components/Booking/booking.css b/src/components/Booking/booking.css
new file mode 100644
index 0000000000..cc59120753
--- /dev/null
+++ b/src/components/Booking/booking.css
@@ -0,0 +1,251 @@
+:root {
+ --oc-green: #8cc63e;
+ --go-gray: #b7bec4;
+ --red: #e53935;
+ --bg-outer: #ffffff;
+ --panel: #f0f0f0;
+ --ink: #222;
+ --muted: #444;
+ --line: #cfcfcf;
+ --radius: 10px;
+ --price-bg: #f6f6f6;
+ --btn-green: #11a05c;
+ }
+
+ .dark-mode {
+ --bg-outer: #0d1117;
+ --panel: #161b22;
+ --ink: #f0f6fc;
+ --muted: #8b949e;
+ --line: #30363d;
+ --price-bg: #1c2128;
+ --btn-green: #238636;
+
+
+ }
+
+
+ body, html {
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif;
+ }
+
+
+
+ .booking-bg {
+ margin: 0 !important;
+ padding: 0 !important;
+ background-color: var(--bg-outer) !important;
+ position: relative;
+ z-index: 1;
+ width: 100vw;
+ max-width: 100vw;
+ overflow-x: hidden;
+ box-sizing: border-box;
+ }
+
+
+
+
+
+ .top-logo {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 16px 0 10px;
+ background: var(--bg-outer);
+ }
+
+ .top-logo img {
+ height: clamp(60px, 8vw, 100px);
+ max-width: 60vw;
+ object-fit: contain;
+ }
+
+
+
+ .green-bar {
+ background: var(--oc-green);
+ min-height: clamp(52px, 6vw, 64px);
+ display: flex;
+ align-items: center;
+ width: 100%;
+ }
+
+ .bar-inner {
+ width: min(980px, 100%);
+ margin: 0 auto;
+ padding: 0 clamp(12px, 3vw, 16px);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ flex-wrap: wrap;
+ flex-grow: 0.7;
+ }
+
+ .village-select {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ flex-wrap: wrap;
+ }
+
+ .village-select select {
+ background: #fff;
+ border: 1px solid var(--line);
+ border-radius: 6px;
+ height: 40px;
+ min-width: clamp(200px, 35vw, 280px);
+ padding: 0 12px;
+ font-size: clamp(14px, 1.6vw, 16px);
+ }
+
+ .go-btn {
+ background: var(--go-gray);
+ color: var(--ink);
+ border: 1px solid #8e979f;
+ border-radius: 8px;
+ height: 40px;
+ padding: 0 12px;
+ font-weight: 600;
+ }
+
+
+ .bar-right {
+ display: flex;
+ align-items: center;
+ gap: clamp(12px, 2vw, 18px);
+ }
+
+ .welcome {
+ font-weight: 700;
+ font-size: clamp(14px, 1.6vw, 16px);
+ white-space: nowrap;
+ }
+
+ .icons {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ }
+
+ .icon {
+ position: relative;
+ font-size: clamp(16px, 2vw, 18px);
+ }
+
+ .icon .badge {
+ position: absolute;
+ top: -6px;
+ right: -8px;
+ background: var(--red);
+ color: #fff;
+ border-radius: 12px;
+ font-size: 10px;
+ height: 16px;
+ min-width: 16px;
+ text-align: center;
+ line-height: 16px;
+ }
+
+ .booking-shell {
+ background: var(--panel);
+ width: 90vw !important;
+ max-width: 90vw !important;
+ margin: clamp(20px, 4vw, 32px) auto clamp(40px, 5vw, 50px);
+ padding: clamp(18px, 3vw, 28px);
+ border-radius: 12px;
+ box-sizing: border-box;
+ }
+
+
+
+
+ .listing-photo {
+ width: min(280px, 80%);
+ height: auto;
+ border: 1px solid #bdbdbd;
+ display: block;
+ margin-inline: auto;
+ margin-bottom: 8px;
+ }
+
+ .photo-caption {
+ font-size: clamp(12px, 1.5vw, 13px);
+ text-align: center;
+ color: var(--muted);
+ }
+
+
+ .price-box {
+ background: var(--price-bg);
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ padding: 12px;
+ }
+
+ .price-row {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 6px;
+ }
+
+ .price-row.total {
+ font-weight: 700;
+ }
+
+
+ .proceed-btn {
+ background: var(--btn-green);
+ color: #fff;
+ border: none;
+ padding: 10px 18px;
+ border-radius: 10px;
+ min-width: clamp(220px, 40vw, 260px);
+ font-weight: 600;
+ margin-top: 24px;
+ width: 100%;
+ transition: transform 0.12s ease, filter 0.12s ease;
+ }
+
+ .proceed-btn:active {
+ transform: translateY(1px);
+ }
+
+ .proceed-btn:disabled {
+ filter: grayscale(0.6);
+ cursor: not-allowed;
+ }
+
+
+ @media (max-width: 768px) {
+ .bar-inner {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .welcome {
+ text-align: center;
+ }
+
+ .village-select {
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .booking-shell {
+ width: 94vw;
+ padding: 16px;
+ }
+
+ .listing-photo {
+ width: 100%;
+ }
+
+ .proceed-btn {
+ width: 100%;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/components/Booking/bookingApi.js b/src/components/Booking/bookingApi.js
new file mode 100644
index 0000000000..8bc07fe5e4
--- /dev/null
+++ b/src/components/Booking/bookingApi.js
@@ -0,0 +1,62 @@
+export async function quotePrice({ nightly, taxRate, fees, checkIn, checkOut }) {
+ const nights = nightsBetween(checkIn, checkOut);
+ const subtotal = nightly * nights;
+ const tax = +(subtotal * taxRate).toFixed(2);
+ const total = +(subtotal + tax + fees).toFixed(2);
+ return { nights, subtotal, tax, fees, total };
+}
+
+export async function checkAvailability({ checkIn, checkOut }) {
+ if (!checkIn || !checkOut) return { ok: false, reason: 'Select both dates.' };
+
+ const today = new Date();
+ today.setHours(0, 0, 0, 0);
+
+ const checkInDate = new Date(checkIn);
+ checkInDate.setHours(0, 0, 0, 0);
+
+ if (checkInDate <= today) {
+ return { ok: false, reason: 'Check-in must be after today.' };
+ }
+
+ if (checkInDate >= new Date(checkOut)) {
+ return { ok: false, reason: 'Check-out must be after check-in.' };
+ }
+
+ for (const d of eachDay(checkIn, checkOut)) {
+ if (UNAVAILABLE.has(d)) {
+ return { ok: false, reason: `Date ${d} is unavailable.` };
+ }
+ }
+
+ return { ok: true };
+}
+
+export function toISO(d) {
+ const x = new Date(d);
+ if (Number.isNaN(x)) return '';
+ const y = x.getFullYear();
+ const m = String(x.getMonth() + 1).padStart(2, '0');
+ const day = String(x.getDate()).padStart(2, '0');
+ return `${y}-${m}-${day}`;
+}
+
+export function nightsBetween(a, b) {
+ if (!a || !b) return 0;
+ const start = new Date(a);
+ const end = new Date(b);
+ const ms = end - start;
+ if (ms <= 0) return 0;
+ return Math.ceil(ms / 86400000);
+}
+
+export function eachDay(a, b) {
+ const days = [];
+ let cur = new Date(a);
+ const end = new Date(b);
+ while (cur < end) {
+ days.push(toISO(cur));
+ cur.setDate(cur.getDate() + 1);
+ }
+ return days;
+}
diff --git a/src/routes.jsx b/src/routes.jsx
index 8e66e78d53..92994b8bf3 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -152,6 +152,8 @@ import ActivityAgenda from './components/CommunityPortal/Activities/ActivityAgen
// HGN PR Dashboard
import PRReviewTeamAnalytics from './components/HGNPRDashboard/PRReviewTeamAnalytics';
import PromotionEligibility from './components/HGNPRDashboard/PromotionEligibility';
+import BookingPage from './components/Booking/BookingPage';
+import BookingConfirmPage from './components/Booking/BookingConfirmPage';
// eslint-disable-next-line import/order, import/no-unresolved
import LogTools from './components/BMDashboard/LogTools/LogTools';
@@ -292,6 +294,8 @@ export default (
Price
+
+
+ {money(nightly)} × {nights} night{nights === 1 ? '' : 's'}
+
+ {money(subtotal)}
+
+
+ Taxes
+ {money(tax)}
+
+
+ Fees
+ {money(fees)}
+
+
+ Total
+ {money(total)}
+
+
-
+
+
Edit Question
-
-
+
+
-
+
-
+
-
+