seats-io-seating-chart-wrapper

See the clubhouse doc for information on how this repository is used in the mobile apps and web and how to test changes locally in this repo and publish to npm to be imported/consumed by the mobile apps and website

Testing Locally

You need to make changes first to src/index.js and then build them by running npm run build which puts the minimized output into the umd/@todaytix folder.

In the repository there is a file called seats-io-example.html which you can load in the browser to see your changes take effect. It looks for the minimized seating chart JS file located at umd/@todaytix/seats-io-seating-chart-wrapper.min.js which is overwritten every time you update src/index.js and run npm run build.

Two values in seats-io-example.html need to be replaced to correctly load the seating chart: event id and public key. Public key is the seats io public key that a dev can get for you. Event id is a different key that exists per showtime and can be found in the allocated_showtime table of the database.

Example - Code snippet (Vanilla JS)

  <script src="./umd/@todaytix/seats-io-seating-chart-wrapper.min.js"></script>
  <script>
    this.seatingChart = new SeatsIOSeatingChart(
      'seat-selector', // div id
      'todaytix-example-2', // event id
      '[public-key]', // public key
      {
        holdOnSelect: false, // used for testing purposes
        selectBestAvailable: false, // used for testing purposes
        hideTooltip: false, 
      },
      {
          onChartRendered: function onChartRendered(chart) {
            // platform logic here
          },
          onChartRenderingFailed: function onChartRenderingFailed(chart) {
            // platform logic here
          },
          onObjectClicked: function onObjectClicked(object) {
            // platform logic here
          },
          onObjectSelected: function onObjectSelected(object, selectedTicketType) {
            // platform logic here
          },
          onObjectDeselected: function onObjectDeselected(object, selectedTicketType) {
            // platform logic here
          },
          onObjectDeselected: function onObjectMouseOver(object) {
            // platform logic here
          },
          onObjectMouseOut: function onObjectMouseOut(object) {
            // platform logic here
          },
          onSelectedObjectBooked: function onSelectedObjectBooked(object) {
            // platform logic here
          },
          onBestAvailableSelected: function onBestAvailableSelected(objects, nextToEachOther) {
            // platform logic here
          },
          onBestAvailableSelectionFailed: function onBestAvailableSelectionFailed() {
            // platform logic here
          },
          onScrolledOutOfBoundsVertically: function onScrolledOutOfBoundsVertically(amount) {
            // platform logic here
          },
          onHoldSucceeded: function onHoldSucceeded(objects) {
            // platform logic here
          },
          onHoldFailed: function onHoldFailed(objects) {
            // platform logic here
          },
          onReleaseHoldSucceeded: function onReleaseHoldSucceeded(objects) {
            // platform logic here
          },
          onReleaseHoldFailed: function onReleaseHoldFailed(objects) {
            // platform logic here
          },
          onSelectionInvalid: function onSelectionInvalid(violations) {
            // platform logic here
          }
        },
      },
    );

    this.seatingChart.render();

    // deselecting seats
    this.seatingChart.deselectObjects(objects);
    // chart.deselectObjects(['A-1', 'A-2']);

    // selecting seats
    this.seatingChart.deselectObjects(objects);
    // chart.selectObjects(['A-1', 'A-2']);

    // update price range
    this.seatingChart.updatePriceRange(min,max);
    // chart.updatePriceRange(20,100);

    // update inventory map
    this.seatingChart.updateInventoryMap(inventoryMap);
    // chart.updateInventoryMap(inventoryMap);

    // get selected objects
    this.seatingChart.getSelectedObjects();
    // ['A-1','A-2'];
    
    // zoom to selected objects
    this.seatingChart.zoomToSelectedObjects();
  </script>

Example - Code snippet (ReactJS)

  import SeatsIOSeatingChartWrapper from 'SeatsIOSeatingChartWrapper';
  ...
  
  componentDidMount() {
    if (!__ENV__.CLIENT) {
      return;
    }
    
    const extraConfig = {
      accessibleHeading: settings.accessibleHeading,
      accessibleText: settings.accessibleText,
      inventoryMap,
      hideTooltip,
      max: maxRange,
      min: minRange,
      orphanText: settings.orphanText,
      partialViewHeading: settings.partialViewHeading,
      partialViewText: settings.partialViewText,
      taxDescription: settings.taxDescription,
    };

    this.seatingChart = new SeatsIOSeatingChart(
      SEAT_IO_CONTAINER,
      eventId,
      publicKey,
      {
        extraConfig,
        holdOnSelect: false,
        selectBestAvailable: false,
      },
      {
        onBestAvailableSelected: this.onBestAvailableSelected,
        onBestAvailableSelectionFailed: this.onBestAvailableSelectionFailed,
        onChartRendered: this.onChartRendered,
        onChartRenderingFailed: this.onChartRenderingFailed,
        onHoldFailed: this.onHoldFailed,
        onHoldSucceeded: this.onHoldSucceeded,
        onObjectClicked: this.onObjectClicked,
        onObjectDeselected: this.onObjectDeselected,
        onObjectMouseOut: this.onObjectMouseOut,
        onObjectMouseOver: this.onObjectMouseOver,
        onObjectSelected: this.onObjectSelected,
        onReleaseHoldFailed: this.onReleaseHoldFailed,
        onReleaseHoldSucceeded: this.onReleaseHoldSucceeded,
        onScrolledOutOfBoundsVertically: this.onScrolledOutOfBoundsVertically,
        onSelectedObjectBooked: this.onSelectedObjectBooked,
        onSelectionInvalid: this.onSelectionInvalid,
        onSelectionValid: this.onSelectionValid,
      },
    );
    this.seatingChart.render();
  }