opa-booking-react

@lssm-tech/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-tech/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-tech/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>
  );
}

The hook's availability and intent responses stay unknown for compatibility; @lssm-tech/opa-booking-react/availability parses them into typed public projections: parseOpaBookingAvailability (availability quote, host display name, event type, host timezone and valid slots) and parseOpaPublicBooking (redacted booking ref and state), plus isOpaBookingScheduled and isOpaBookingUnsuccessful for the v2 booking states. Both parsers return null when required fields are missing.

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.