Cancel Booking

POST https://api.kordless.ai/api/calendar/v1/public/bookings/confirmation/{confirmation_number}/cancel

{
  "booking": {
    "id": "book_abc123xyz",
    "confirmation_number": "BOOK_ABC123XYZ",
    "status": "canceled",
    "organization_slug": "acme-salon",
    "organization_name": "Acme Salon",
    "start_at": "2025-12-03T14:00:00Z",
    "end_at": "2025-12-03T15:00:00Z",
    "service_id": "haircut",
    "service_slug": "haircut",
    "service_name": "Haircut",
    "contact": {
      "name": "Jane Doe",
      "email": "[email protected]",
      "phone": "+1234567890"
    },
    "location": {
      "type": "onsite",
      "value": "123 Main St, Suite 100"
    },
    "timezone": "America/New_York"
  }
}

async function handleCancelBooking(confirmationNumber, contactInfo) {
  // 1. Look up booking to show details
  const { booking } = await lookupBooking(confirmationNumber, contactInfo);

  // 2. Confirm cancellation with customer
  const confirmed = await showConfirmDialog({
    title: 'Cancel Booking?',
    message: `Are you sure you want to cancel your ${booking.service_name} appointment on ${formatDate(booking.start_at)}?`,
    confirmText: 'Yes, Cancel',
    cancelText: 'Keep Booking'
  });

  if (!confirmed) return;

  // 3. Cancel the booking
  try {
    await cancelBooking(confirmationNumber, contactInfo);

    // 4. Show success message
    showSuccess({
      title: 'Booking Canceled',
      message: 'Your appointment has been canceled. You will receive a confirmation email shortly.'
    });

    // 5. Offer to rebook
    showRebookOption({
      orgSlug: booking.organization_slug,
      serviceSlug: booking.service_slug
    });

  } catch (error) {
    showError('Could not cancel booking. Please try again or contact support.');
  }
}

function BookingConfirmation({ confirmationNumber, customerEmail }) {
  const [booking, setBooking] = useState(null);
  const [canceled, setCanceled] = useState(false);

  useEffect(() => {
    lookupBooking(confirmationNumber, customerEmail)
      .then(({ booking }) => setBooking(booking));
  }, [confirmationNumber, customerEmail]);

  async function handleCancel() {
    if (!confirm('Are you sure you want to cancel this booking?')) return;

    await cancelBooking(confirmationNumber, customerEmail);
    setCanceled(true);
  }

  if (canceled) {
    return (
      <div className="cancellation-notice">
        <h2>Booking Canceled</h2>
        <p>Your appointment has been canceled.</p>
        <a href={`/book/${booking.organization_slug}`}>Book a new appointment</a>
      </div>
    );
  }

  return (
    <div className="booking-details">
      <h2>Your Appointment</h2>
      <p>Service: {booking?.service_name}</p>
      <p>Date: {formatDate(booking?.start_at)}</p>
      <p>Time: {formatTime(booking?.start_at)}</p>

      <div className="actions">
        <button onClick={handleCancel} className="cancel-btn">
          Cancel Booking
        </button>
        <a href={`/reschedule/${confirmationNumber}`} className="reschedule-link">
          Reschedule
        </a>
      </div>
    </div>
  );
}