)}
{/* Email-recovery form — only when there's no token (guest landed
here without a magic link, or had a stale one we just cleared). */}
{!token && (
recoverState === 'sent' ? (
Check your inbox
If we have a reservation under {recoverEmail.trim()}, we just sent you a link to your stay.
Don't see it? Check your spam folder.
Still nothing after 5 minutes? WhatsApp{' '}
862-520-7797.
{token ? 'Switch tabs above to see past stays.' : 'Browse new ones, or use the form above to recover your access link.'}
go('browse')}>Browse stays
) : (
{list.map(b => {
const p = props.find(x => x.id === b.propertyId) || { id: b.propertyId, name: b.propertyName, photos: [] };
// Preserve the token in the URL so the detail screen can fetch
// the same booking server-side. go() rewrites the hash entirely
// and would drop ?token=, so we set the hash directly.
const navigateToDetail = () => {
if (token) {
window.location.hash = `stay:${b.id}?token=${encodeURIComponent(token)}`;
} else {
go('stay:' + b.id);
}
};
return (
);
})}
)}
);
}
// ═══════════════════════════════════════════════════════════════════════
// MY STAY DETAIL — itinerary
// ═══════════════════════════════════════════════════════════════════════
// ─── Cancellation policy — My Stay surface ───────────────────────────
// "As of today" preview. Renders a tiered policy in Manage trip above
// the cancel row; the active tier highlights so the guest sees what
// they get back if they cancel right now. Numbers come from
// window.DyraCancellation (mirror of src/lib/cancellation.ts).
function MStayCancellationPolicy({ booking, palette, type }) {
const PM = palette, TM = type;
const [open, setOpen] = React.useState(false);
if (!booking || !window.DyraCancellation) return null;
if (String(booking.status || '').toLowerCase() === 'cancelled') {
return null; // already cancelled — D1CancelBookingCard / cancelMsg covers state
}
const policy = window.DyraCancellation.getCancellationPolicy(booking, new Date());
const fmt = window.DyraCancellation.formatRefundDollars;
const refundLine = policy.withinGrace
? `Cancelling now refunds ${fmt(policy.eligibleRefundCents)} to your card.`
: 'Cancelling now will not auto-refund any amount. Message the host to discuss exceptions.';
return (
Cancellation policy
{policy.summary}
{refundLine}
{policy.processingNote}
{open && (
{policy.tiers.map(tier => (
{tier.label}{tier.activeNow ? ' · Current' : ''}
{tier.refundDescription}
))}
)}
);
}
// ─── Cancel confirmation modal — replaces window.confirm ─────────────
// Shows the exact refund amount the guest is about to receive, sourced
// from the same window.DyraCancellation policy helper. "Yes, cancel" vs
// "Keep my booking".
function MCancelConfirmModal({ open, booking, busy, onClose, onConfirm, palette, type }) {
const PM = palette, TM = type;
if (!open || !booking || !window.DyraCancellation) return null;
const policy = window.DyraCancellation.getCancellationPolicy(booking, new Date());
const fmt = window.DyraCancellation.formatRefundDollars;
const refundCopy = policy.withinGrace
? `You'll get ${fmt(policy.eligibleRefundCents)} refunded back to your card.`
: `This booking is past the ${window.DyraCancellation.GRACE_PERIOD_HOURS}-hour free-cancellation window. No automatic refund will be issued.`;
return (
);
})()}
{/* manage trip — every row is wired to a sheet now */}
Manage trip
{/* Cancellation policy — "as of today" preview, mirrors what the
cancel endpoint would actually refund right now. Sits in
Manage trip directly above the cancel row. */}
);
}
function MCartSheet({ open, cart, cartCents, committing, onClose, onRemove, onCommit, booking }) {
const balanceCents = Number(booking?.balance_cents || 0);
// If the balance is already fully paid we hide "Add to balance" and only
// offer "Pay now" — matches the spec: "if balance was already fully paid
// then it should say Pay".
const balanceFullyPaid = balanceCents <= 0;
return (
{cart.length === 0 ? (
Pay now charges your card on file immediately. Add to balance bumps the amount owed on your reservation — no charge until your normal balance-due date.
)}
);
}
function MModifyDatesSheet({ open, onClose, token, booking }) {
const [ci, setCi] = React.useState('');
const [co, setCo] = React.useState('');
const [notes, setNotes] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [msg, setMsg] = React.useState('');
React.useEffect(() => {
if (!open) return;
setCi(booking?.check_in || '');
setCo(booking?.check_out || '');
setNotes('');
setMsg('');
}, [open, booking]);
async function submit() {
if (!token) { setMsg('Open this page from your booking email to request changes.'); return; }
if (!ci || !co || co <= ci) { setMsg('Pick a valid check-in / check-out.'); return; }
setBusy(true);
setMsg('');
try {
const r = await fetch('/api/guest/modify-dates', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token, check_in: ci, check_out: co, notes }),
});
const j = await r.json().catch(() => ({}));
if (!r.ok) { setMsg(j.error || 'Could not file the request.'); setBusy(false); return; }
setMsg('Request received — the host will reply within a few hours.');
} catch (e) {
setMsg((e && e.message) || 'Network error.');
} finally {
setBusy(false);
}
}
const inputStyle = {
width: '100%', boxSizing: 'border-box', padding: '12px 14px',
border: `1px solid ${PM3.line}`, borderRadius: 10, background: PM3.surface,
fontFamily: TM3.sans, fontSize: 14, color: PM3.ink, marginTop: 6,
};
return (
We'll check availability + pricing for the new dates and reply directly. Nothing changes on your booking until the host confirms.