@lssm/opa-booking-react

React 18/19 integration for CompanyOS OPA booking. The hosted widget validates versioned messages against the configured CompanyOS origin; the headless hook loads only the public-safe availability projection.

import { OpaBookingWidget } from "@lssm/opa-booking-react";

<OpaBookingWidget token="PUBLIC_BOOKING_TOKEN" locale="fr" />;

For a custom booking experience, use the headless hook. Its requests carry the embedding app's exact origin and expose no private calendar identifiers.

import { useOpaBooking } from "@lssm/opa-booking-react";

function AvailabilityButton() {
  const booking = useOpaBooking({
    token: "PUBLIC_BOOKING_TOKEN",
    onEvent: (event) => console.info(event.type),
  });

  return (
    <button
      onClick={() =>
        booking.loadAvailability(
          new Date("2026-08-10T00:00:00Z"),
          new Date("2026-08-17T00:00:00Z"),
          "Europe/Paris",
        )
      }
    >
      {booking.state.status === "loading" ? "Loading…" : "Load availability"}
    </button>
  );
}

Embedding remains disabled until the booking link contains the parent origin in its allowlist. Never place private calendar identifiers or credentials in widget props.

Production canaries

Two no-index canary hosts on the canonical CompanyOS origin exercise the exact customer integrations with a public booking token:

• /embed/production-canary.html?token=PUBLIC_BOOKING_TOKEN runs the versioned JavaScript loader.
• /embed/react/PUBLIC_BOOKING_TOKEN renders OpaBookingWidget from this package.

The booking link must explicitly allow https://www.companyos.run. A canary is accepted only after live availability renders; a successful page load alone is not evidence of origin authorization or provider readiness.

The widget's accessible frame title follows locale (en, fr, or es), matching the hosted booking surface; English remains the default.