Stays Cancellation Timeline

Cancellation Timeline

What cancelling costs, and from when: one line in three colours up to check-in, each stage with when it starts and what it costs.

Preview

Cancellation

NowFree to cancel
7 days beforePart refund
3 days beforeNo refund
From 1 PMCheck-in day

Changing the dates inside the last week counts as a cancellation.

The windows are samples: every booking shows its own, with its dates.

Usage

tsx

import { CancellationTimeline } from "zostel-ui";

<CancellationTimeline
  stages={[
    { from: "Now", outcome: "Free to cancel", tone: "free" },
    { from: freeUntil, outcome: "Part refund", tone: "part" },
    { from: refundUntil, outcome: "No refund", tone: "none" },
  ]}
  end={{ when: checkInTime, label: "Check-in day" }}
  note="Changing the dates inside the last week counts as a cancellation."
/>

Props

Prop	Type	Default	Description
`stages`	`{ from: string; outcome: string; tone: "free" \| "part" \| "none" }[]`	—	The stages, earliest first. The tone picks the status colour; the words carry the meaning.
`end`	`{ when: string; label: string }`	—	The last mark: check-in.
`note`	`ReactNode`	—	The rule in words, under the line.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

stages

Type: { from: string; outcome: string; tone: "free" | "part" | "none" }[]

Default: —

The stages, earliest first. The tone picks the status colour; the words carry the meaning.

end

Type: { when: string; label: string }

Default: —

The last mark: check-in.

note

Type: ReactNode

Default: —

The rule in words, under the line.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

On zostel.com

Inside each stay’s cancellation policy. The colours are the brand’s status tokens (success, warning, danger), flat bars only: across on a desk, down the left edge on a phone, and an ordered list for a screen reader.