@enovlab/seatmap-whitelabel

Serves the Yoop Seatmap API from a seating chart, so Yoop's transaction app can frame the chart, drive it and read what the user selects. One bundled ES module with no runtime dependencies.

Documentation: https://whitelabel-docs.dev.yoop.app/seatmap/overview

Install

npm install @enovlab/seatmap-whitelabel
yarn add @enovlab/seatmap-whitelabel
pnpm add @enovlab/seatmap-whitelabel

Or from the CDN base Yoop gives you:

<script type="module">
  import { serveSeatmap } from 'https://your-cdn-base/2.0.0/client-index.js';
</script>

| Path | Serves | | --------------------------- | --------------------------------------------------------------------- | | /{x.y.z}/client-index.js | That exact release. The bytes never change and are cached for a year. | | /v{major}/client-index.js | The newest release of that major, within minutes of it publishing. |

Serving a chart

import { serveSeatmap } from '@enovlab/seatmap-whitelabel';

const chart = serveSeatmap({
  allowedHostOrigins: ['https://transaction.yoop.app'], // optional; omitted answers any host
  authority: { inventory: 'CHART', availability: 'CHART', categories: 'CHART' },
  capabilities: { modes: ['SEAT'] /* … */ },
  handlers: {
    selectSeats: (params) => ({ accepted: true, reports: [selectionReport(params)] }),
  },
});

renderer.on('ready', () => chart.declareRendered());
renderer.on('seatClick', () => chart.report(selectionReport()));

A chart offers the commands it supplies handlers for. The SDK owns the handshake, version negotiation, origin validation, dispatch and every ack or error. The adapter example puts a complete renderer behind the API.

A chart declaring mode CATEGORY supplies a configure and a selectCategories handler and declares selection type MULTIPLE, or serveSeatmap throws. So does a chart declaring identifiers.categorySections without mode CATEGORY.

Timing

The host frames the chart with a connectionId query parameter. serveSeatmap reads it, starts listening and posts ready, which the host answers with hello, so a chart served after the document's load still connects. Serve before removing that parameter from the URL: a page without one serves nothing.

Host origins

A chart that validates host origins lists Yoop's transaction app in allowedHostOrigins:

| Environment | Origin | | ----------- | ----------------------------------- | | Dev | https://transaction.dev.yoop.app | | Staging | https://transaction.stg.yoop.app | | Demo | https://transaction.demo.yoop.app | | Production | https://transaction.yoop.app |

Versions

This release speaks Seatmap protocol 2.0 and refuses a host offering only 1.x. The package major version tracks the protocol major version; Releases covers how a host and a chart on different versions interoperate, and Migrating to 2.0 moving from 1.x.

Identifiers minted with mint(key) are fixed from 1.0.0: the same event and key mint the same identifier in every release of a major. Changing the scheme is a major release.

Reference chart

sample/index.html is a complete conforming chart in one document that loads the package's bundle and nothing else. Serve the package directory with any static file server and open sample/index.html.

The host query parameter sets the host origins it accepts, comma-separated. ?host=https://whitelabel-showcase.dev.yoop.app lets the conformance suite run against it.

License

MIT, see LICENSE. The notices of the third-party packages bundled in are in THIRD_PARTY_LICENSES.

Publishing

For maintainers, from the yoop-web repository with an npm login that can publish to @enovlab. Bump version in package.json first: a published version cannot be reused.

yarn bundle:seatmap-whitelabel
npm publish dist/whitelabel-widgets/seatmap-whitelabel