Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA check-in date field that works out the last moment for free cancellation and tells the guest whether it is still open, closing soon or already past. Use this when a booking is free to cancel until a cut-off before the stay and the guest should see that date as they choose dates.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when a booking is free to cancel until a cut-off before the stay and the guest should see that date as they choose dates.
Do not use it to take a cancellation; it only informs. Pair it with confirm-destructive-action for the action.
It composes date-field and date-time-core, which the CLI installs for you.
import { CancellationDeadlineNote } from "@/components/cancellation-deadline-note"<CancellationDeadlineNote
hoursBefore={72}
checkInTime="14:00"
onValueChange={(checkIn) => setCheckIn(checkIn)}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onValueChange | string | null | null | Check-in date. |
| hoursBefore | number | 48 | Free cancellation until this long before check-in time. |
| checkInTime | string | 15:00 | Check-in time the cut-off counts from. |
| now | string | clock | Local YYYY-MM-DDTHH:mm, for tests. |
The pattern ships with a Testing Library test (cancellation-deadline-note.test.tsx) that covers the cut-off arithmetic, still open, closing soon (under 24 hours) and non-refundable.