ChangeCard

A change Okami made in the owner's chat, and where it stands. A plain change has landed, with Undo. One that would leave bookings outside someone's hours waits for the owner, listing those bookings with a call button each; so does a booking's move or cancel, which then offers to call its client. Undone or declined, it stays as a record with nothing left to press.

Playground

Miro · different hours

Done

Fri, Nov 6

9:00–12:00

import { ChangeCard } from "@/components/shared/change-card";

<ChangeCard
  title="Miro · different hours"
  lines={["Fri, Nov 6", "9:00–12:00"]}
  state="landed"
  locale="en"
  onUndo={undo}
  onConfirm={confirm}
  onDecline={decline}
/>

ChangeCard

State

Strands bookings

Locale

Waiting for the owner

Miro · day off

Needs you

Fri, Nov 6

“Doctor”

This booking would fall outside the new hours. It stays booked, so the client needs a call.

Fri, Nov 6, 14:00Jana · Haircut

<ChangeCard
  title="Miro · day off"
  lines={["Fri, Nov 6", "“Doctor”"]}
  state="waiting"
  locale="en"
  bookings={wouldStrand}
  onConfirm={confirm}
  onDecline={decline}
/>

A booking moved

Matúš · new time

Done

Haircut · Pele

Thu, Oct 15 · 14:00–14:45

Before: Mon, Oct 12 · 10:00–10:45

Call Matúš

<ChangeCard
  title="Matúš · new time"
  lines={["Haircut · Pele", "Thu, Oct 15 · 14:00–14:45", "Before: Mon, Oct 12 · 10:00–10:45"]}
  state="landed"
  locale="en"
  call={{ name: "Matúš", phone: "+421905882891" }}
  labels={{ confirm: "Move it" }}
/>

API

Prop	Type	Default	Description
title	string	—	Who and what: “Miro · day off”.
lines	string[]	—	The change itself, a line each: the dates, the hours, the note.
state	"landed" \| "waiting" \| "undone" \| "declined"	—	Where it stands. Landed shows Undo; waiting shows Confirm and Keep as is; the others show neither.
bookings	ScheduleBooking[]	[]	Bookings the change leaves, or would leave, outside the hours: each with its time, client and a call button.
call	{ name: string; phone: string }	—	The client a landed move or cancel reaches: a Call button, since Okami can't message clients yet. Shown once it has landed, not while it waits.
locale	string	—	How the bookings' dates read.
onUndo / onConfirm / onDecline	() => void	—	The card's actions; each shows only in its state.
busy	boolean	false	An answer is on its way: the actions wait.
labels	Partial<ChangeCardLabels>	English	Every word, the statuses and booking lines included.

Guidelines

A change with no one else affected lands at once and shows Undo; don't ask “are you sure?” first (owner-chat spec C9).
A change that would strand bookings waits for the owner, with the bookings on the card: nothing moves until a tap (C8).
A booking's move or cancel always waits for the owner — a client holds that time — and has no Undo once confirmed; it offers the call instead.
The card is the record. Okami's message beside it says what's next, not what the card already shows.