);
}
const BOOKING_ITEMS = [
{
title: "What is included in the booking?",
body: "Each booking includes the core service, all applicable taxes, and standard support. Optional add-ons such as seat upgrades and travel insurance are available at checkout.",
},
{
title: "How do I modify or cancel a reservation?",
body: "Reservations can be modified or cancelled from the booking management screen up to 24 hours before departure. Cancellation policies vary by supplier and fare class.",
},
{
title: "When will I receive my confirmation?",
body: "Confirmations are sent to the email address on file within a few minutes of successful payment. Check your spam folder if you have not received it after 10 minutes.",
},
{
title: "Is dynamic pricing applied at checkout?",
body: "Yes. Prices shown reflect live inventory rates at the time of search. The final amount is confirmed at the point of payment and does not change after booking.",
},
];
const SETTINGS_ITEMS = [
{
title: "Notifications",
body: "Configure email and in-app notification preferences per event type. Changes take effect immediately and apply to all connected channels.",
},
{
title: "Data retention",
body: "Booking records are retained for 7 years by default in accordance with financial regulations. Contact your account manager to discuss custom retention policies.",
},
{
title: "Integrations",
body: "Connect third-party tools via the Integrations panel. OAuth tokens are stored encrypted and can be revoked at any time from the API settings page.",
},
];
// ---------------------------------------------------------------------------
// Complex content demo
// ---------------------------------------------------------------------------
const BADGE: Record = {
confirmed: { bg: "#BFE5B8" },
pending: { bg: "#FFD78E" },
cancelled: { bg: "#FFA99B" },
"on request": { bg: "#FFD78E" },
};
function StatusBadge({ label }: { label: string }) {
const { bg } = BADGE[label.toLowerCase()] ?? { bg: "#E5E7EB" };
return (
{label}
);
}
const BOOKING_LINES = [
{ ref: "KT-00421", service: "Hotel — Reykjavik Natura", nights: 3, pax: 2, unit: 189, status: "Confirmed" },
{ ref: "KT-00422", service: "Northern Lights Tour", nights: 1, pax: 2, unit: 95, status: "Confirmed" },
{ ref: "KT-00423", service: "Airport Transfer × 2", nights: 0, pax: 2, unit: 45, status: "Pending" },
{ ref: "KT-00424", service: "Blue Lagoon Entry", nights: 0, pax: 2, unit: 79, status: "On Request" },
];
function HoverButton({ variant, children }: { variant: "primary" | "ghost"; children: React.ReactNode }) {
const [hovered, setHovered] = useState(false);
const isPrimary = variant === "primary";
return (
);
}
function BookingRow({ line: l, total, isLast }: { line: typeof BOOKING_LINES[0]; total: number; isLast?: boolean }) {
const [hovered, setHovered] = useState(false);
const [removed, setRemoved] = useState(false);
if (removed) return null;
return (
);
}
export default function AccordionDemo() {
const [singleOpen, setSingleOpen] = useState(true);
// Controlled state for the "Multiple" section so the expand/collapse all
// button can act on all items at once.
const [multiOpen, setMultiOpen] = useState>(new Set([0]));
const allExpanded = multiOpen.size === SETTINGS_ITEMS.length;
const toggleMulti = (i: number) => {
const next = new Set(multiOpen);
next.has(i) ? next.delete(i) : next.add(i);
setMultiOpen(next);
};
const expandAll = () => setMultiOpen(new Set(SETTINGS_ITEMS.map((_, i) => i)));
const collapseAll = () => setMultiOpen(new Set());
return (
setSingleOpen(!singleOpen)}
isLast
>
Kaptio Travel is an end-to-end travel management platform built for tour operators, wholesalers, and travel businesses that need to manage complex itineraries, inventory, and bookings at scale.
{allExpanded ? (
<>
Collapse all
) : (
<>
Expand all
)}
}
>
{}}
>
These settings apply across the entire account and are inherited by all sub-users unless overridden.
{}}
disabled
>
Not reachable.
{}}
isLast
>
Contact your account manager or open a ticket via the help centre.