Skip to content

OpenSeatBookingMap, OpenSeatDesigner · Browser (client components)

@openseat/cloud/react

OpenSeatBookingMap, the buyer's seat page for a Cloud API event, useOpenSeatEvent, and OpenSeatDesigner, the embeddable layout designer. Needs the optional peers react, react-dom, konva and @openseat/react.

  • 2 components
  • 1 hook
  • 3 functions
  • 3 interfaces
  • 3 types
  • MIT

The React entry point of @openseat/cloud. It needs the optional peers @openseat/react, konva, react and react-dom; the root entry has no React code.

npm i @openseat/cloud @openseat/react konva react react-dom
first npm release pending

Install commands show the public npm names. The first npm release is pending; the packages are free and MIT licensed.

depends on @openseat/adapter-rest, @openseat/booking, @openseat/core · peers @openseat/react, konva, react, react-dom

Import
import {
  OpenSeatBookingMap,
  OpenSeatDesigner,
  useOpenSeatEvent,
} from "@openseat/cloud/react";
import type {
  OpenSeatBookingMapProps,
} from "@openseat/cloud/react";

Components2

component

OpenSeatBookingMap

The whole buyer seat page for one Cloud API event: the live map, seats and standing zones, the basket and the buttons. In hold mode the buyer's choice is held with a hold token (onHeld); in select mode it is handed to you (onContinue) for your server to hold.

function OpenSeatBookingMap(
  props: OpenSeatBookingMapProps,
): JSX.Element;

Props · OpenSeatBookingMapProps

See OpenSeatBookingMapProps.

@openseat/cloud/src/react/OpenSeatBookingMap.tsx

component

OpenSeatDesigner

The embeddable OpenSeat layout designer for one designer session, as a React component around mountDesigner (@openseat/cloud/designer). Pass the session's embedUrl from your server.

A new embedUrl or height mounts a fresh designer (unsaved changes in the old one are lost); new callbacks and getToken are picked up without remounting, and a new theme is sent to the running designer.

const OpenSeatDesigner: ForwardRefExoticComponent<
  MountDesignerOptions & {
    readonly className?: string;
    readonly style?: CSSProperties;
  } & RefAttributes<OpenSeatDesignerHandle>
>

Props · MountDesignerOptions

See MountDesignerOptions.

Ref handle: OpenSeatDesignerHandle

@openseat/cloud/src/react/OpenSeatDesigner.tsx

Hooks1

hook

useOpenSeatEvent

Loads an event (C1) and keeps it current: when OpenSeat signals a resync (the organiser moved the event to a new layout, or the live stream came back), the event is re-read with its ETag and replaced only when its layout revision changed. event is null while loading; error is the reason it could not be loaded.

function useOpenSeatEvent(
  client: OpenSeatClient,
  eventKey: string,
): { event: OpenSeatEvent | null; error: BookingError | null };

Parameters

ParameterTypeDescription
clientOpenSeatClient
eventKeystring

Returns

{ event: OpenSeatEvent | null; error: BookingError | null; }

@openseat/cloud/src/react/useOpenSeatEvent.tsx

Functions3

function

buyerMessage

A refusal in the buyer's words, naming places by their labels (never IDs).

function buyerMessage(
  error: BookingError,
  layout: OpenSeatEvent["layout"],
  maxTickets: number | undefined,
): string;

Parameters

ParameterTypeDescription
errorBookingError
layoutOpenSeatEvent["layout"]
maxTicketsnumber | undefined

Returns

string

@openseat/cloud/src/react/OpenSeatBookingMap.tsx

function

formatClock

"9:05" for 545,000 ms; never negative.

function formatClock(ms: number): string;

Parameters

ParameterTypeDescription
msnumber

Returns

string

@openseat/cloud/src/react/OpenSeatBookingMap.tsx

function

formatPriceLabels

OpenSeat's price labels (rupees as text, "1499" or "12.50") as buyers read them: "₹1,499", "₹12.50".

function formatPriceLabels(
  labels: Readonly<Record<string, string>>,
): Record<string, string>;

Parameters

ParameterTypeDescription
labelsReadonly<Record<string, string>>

Returns

Record<string, string>

@openseat/cloud/src/react/OpenSeatBookingMap.tsx

Interfaces3

interface

OpenSeatCheckoutContext

What renderCheckout gets while the buyer's seats are held.

interface OpenSeatCheckoutContext

Members

MemberTypeDescription
holdOpenSeatHold
remainingMsnumber
lockedboolean
extendmethod(seconds?: number) => Promise<void>
releasemethod() => Promise<void>

Every member is readonly.

@openseat/cloud/src/react/OpenSeatBookingMap.tsx

interface

OpenSeatOwnHold

A hold the platform's server made for this buyer (server holds), as OpenSeatBookingMap shows it.

interface OpenSeatOwnHold

Members

MemberTypeDescription
holdIdstring
seatIdsreadonly string[]
areasreadonly AreaQuantity[]
expiresAtstring

Every member is readonly.

@openseat/cloud/src/react/views.ts

interface

OpenSeatSelection

What the buyer chose, as onContinue receives it in select mode. Whole tables come as areas (quantity 1).

interface OpenSeatSelection

Members

MemberTypeDescription
seatIdsreadonly string[]
areasreadonly AreaQuantity[]

Every member is readonly.

@openseat/cloud/src/react/OpenSeatBookingMap.tsx

Types3

type

OpenSeatBookingMapProps

type OpenSeatBookingMapProps = OpenSeatBookingMapBase &
  (
    | {
        readonly client: OpenSeatClient;
      }
    | {
        readonly publicKey: string;
        readonly baseUrl: string;
      }
  );

The props of OpenSeatBookingMap: every member is listed there.

@openseat/cloud/src/react/OpenSeatBookingMap.tsx

type

OpenSeatDesignerHandle

What a ref on OpenSeatDesigner gets: the designer handle without destroy (unmounting destroys it).

type OpenSeatDesignerHandle = Pick<
  DesignerHandle,
  "save" | "requestClose" | "setTheme"
>;

Members

MemberTypeDescription
savemethod() => void

Asks the designer to save. The result arrives in onSaved or onError.

requestClosemethod() => void

Asks the designer to close; it confirms unsaved changes first and then calls onClose.

setThememethod(theme: DesignerTheme) => void

Changes the theme. Throws a TypeError for an invalid accent or radius.

Every member is readonly.

@openseat/cloud/src/react/OpenSeatDesigner.tsx

type

OpenSeatDesignerProps

type OpenSeatDesignerProps = MountDesignerOptions & {
  readonly className?: string;
  readonly style?: CSSProperties;
};

Members

MemberTypeDescription
embedUrlstring

The session's embedUrl exactly as minted (https://<EMBED_ORIGIN>/embed/designer/dsn_…#os_ds_…).

getTokenoptional() => Promise<string> | string

Called about two minutes before the session expires. Mint a new session on your server for the same layout and origin and resolve with its token; the designer switches to it without losing work. Without it the designer shows "This session has ended" when the session expires.

heightoptionalnumber | "auto"

Pixels (200 to 10,000), or "auto" to follow the designer's own height. Default 640.

Default 640

themeoptionalDesignerTheme
onReadyoptional(info: DesignerReady) => void
onLoadedoptional(info: DesignerLoaded) => void
onSavedoptional(info: DesignerSaved) => void
onDirtyoptional(dirty: boolean) => void

Whether the designer has unsaved changes.

onCloseoptional(info: { reason: string; }) => void

The person pressed Done, or the designer closed after requestClose(). Remove the designer here.

onErroroptional(error: DesignerError) => void
classNameoptionalreadonlystring

Class name of the element that holds the iframe.

styleoptionalreadonlyCSSProperties

@openseat/cloud/src/react/OpenSeatDesigner.tsx

Re-exports7

interface

DesignerError

Re-exported from @openseat/cloud/designer: Something went wrong. code is the designer's (for example DESIGNER_SESSION_EXPIRED), or TOKEN_REFRESH_FAILED when getToken rejected or did not return an os_ds_ token.

interface

DesignerReady

Re-exported from @openseat/cloud/designer: The designer has started for this session. layoutKey is null until a "create" session saves.

interface

DesignerSaved

Re-exported from @openseat/cloud/designer: A save went through: the layout is at revision and layout.updated has been sent to your webhooks.

interface

DesignerTheme

Re-exported from @openseat/cloud/designer: Colours and corner radius for the designer's own chrome.