Tessitura-integrated seatmap component that can be customized for any transaction path.
Built with React, Mantine UI, and react-svg-seatmap
This package includes:
TessituraSYOS: Use an SVG seatmap and a Tessitura performance ID to allow customers to add seats to their cart
TessituraPerformanceViewer: View each layer of a performance's seatmap using live data, including availability, zone groups, and hold codes
Check it out here: Storybook
Install the package via NPM:
npm install --save tessitura-seatmap
TessituraSYOS
import { TessituraSYOS } from "tessitura-seatmap";
export default () => (
<TessituraSYOS
svg="https://www.test.com/svg" // The URL of the SVG to use as the basis for the seatmap
endpoint="https://sample-endpoint.com" // The Tessitura REST API endpoint to use for SYOS
performanceId={1} // ID of the performance the customer is selecting seats for
facilityId={1} // ID of the facility associated with the performance
/>
);TessituraPerformanceViewer
import { TessituraPerformanceViewer } from "tessitura-seatmap";
export default () => (
<TessituraPerformanceViewer
svg="https://www.test.com/svg" // The URL of the SVG to use as the basis for the seatmap
endpoint="https://sample-endpoint.com" // The Tessitura REST API endpoint to use for fetching performance data
performanceId={1} // ID of the performance to view
/>
);The following props are available for both TessituraSYOS and TessituraPerformanceViewer components.
| Name | Type | Description |
|---|---|---|
| svg | string | URL for an svg to render as the seatmap |
| endpoint | string | URL of the Tessitura REST API endpoint to use for fetching performance data. Since this component renders client-side, this endpoint must be publicly accessible |
| performanceId | number | The ID of the performance being mapped onto the SVG seatmap. For TessituraSYOS, this is the performance that customers will be purchasing seats in. For TessituraPerformanceViewer, this is the performance that will be broken down into layers on the seatmap |
| facilityId | string | The ID of the facility associated with the the performance. Currently, this is only required for TessituraSYOS |