SeatingChart

Le composant qui affiche le plan et gère la sélection de sièges. Même objet, deux emballages :

CDN

<script src="https://bo.mitoera.com/mitoera-widget.js"></script>
<script>
  const chart = new Mitoera.SeatingChart({ /* options */ });
  chart.render();
</script>

npm

import { SeatingChart } from '@mitoera/sdk/browser';

const chart = new SeatingChart({ /* options */ });
chart.render();

Options

Option	Type	Défaut	Description
divId	string	—	ID du <div> conteneur. Requis
workspaceKey	string	—	Clé publique (pk_live_… ou pk_test_…). Requis
event	string	—	Slug ou UUID de l'événement. Requis
baseUrl	string	https://api.mitoera.com	Pour pointer une instance locale
showLegend	boolean	true	Affiche la légende des catégories
showResume	boolean	false	Affiche le récapitulatif en pied de plan
categoryPrices	Record<string, CategoryPrice>	—	Prix affichés par catégorie
sandbox	boolean	—	Déprécié. Ignoré pour les clés pk_live_/pk_test_

event accepte indifféremment le slug (concert-12-mars) et l'UUID. Le slug rend vos URLs lisibles.

categoryPrices

categoryPrices: {
  'cat-vip':    { price: 150, currency: 'EUR' },
  'cat-normal': { price: 50,  currency: 'EUR' },
}

Les clés sont les identifiants de catégorie retournés dans SeatInfo.catId. Modifiable à chaud avec setCategoryPrices() — utile pour un tarif réduit appliqué après saisie d'un code promo.

Callbacks

Callback	Reçoit	Quand
onReady	{ sessionToken, holdToken, eventId }	Plan chargé et session ouverte
onSeatSelected	SeatInfo	Un siège vient d'être sélectionné
onSeatDeselected	SeatInfo	Un siège vient d'être désélectionné
onSelectionChange	SeatInfo[]	À chaque changement — tableau complet
onCheckout	SeatInfo[]	Clic sur « Valider »

Lequel utiliser

Pour mettre à jour un total ou un panier, onSelectionChange suffit : il donne toujours l'état complet, sans avoir à accumuler soi-même les onSeatSelected / onSeatDeselected.

Définir onCheckout active le bouton « Valider » dans le widget. Sans ce callback, le bouton n'apparaît pas.

Formes des données

interface SeatInfo {
  seatKey:  string;   // 'A-1'
  catId:    string;
  catColor: string;   // '#E8602A'
  catName:  string;   // 'Carré Or'
}

interface ReadyData {
  sessionToken: string;   // pour appeler /api/widget/** depuis votre back-end
  holdToken:    string;   // token de hold de la session
  eventId:      string;   // UUID résolu, même si vous aviez passé un slug
}

Méthodes

Méthode	Retour	Description
render()	this	Crée l'iframe et charge le plan. Une seule fois
getSelectedSeats()	SeatInfo[]	Sièges actuellement sélectionnés
getSessionToken()	string | null	JWT de session widget
getHoldToken()	string | null	Token de hold de la session
getEventId()	string | null	UUID de l'événement résolu
selectSeats(keys)	void	Sélectionne des sièges par programme
setCategoryPrices(prices)	void	Met à jour les prix affichés
destroy()	void	Supprime l'iframe et les écouteurs

getSessionToken(), getHoldToken() et getEventId() renvoient null tant que onReady n'a pas été déclenché.

Intégration dans un composant

Vue 3

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { SeatingChart } from '@mitoera/sdk/browser';

const props  = defineProps({ eventSlug: String });
const seats  = ref([]);
let   chart  = null;

onMounted(() => {
  chart = new SeatingChart({
    divId:        'mitoera-chart',
    workspaceKey: import.meta.env.VITE_MITOERA_KEY,
    event:        props.eventSlug,
    onSelectionChange: (s) => { seats.value = s; },
  });
  chart.render();
});

onBeforeUnmount(() => chart?.destroy());
</script>

<template>
  <div id="mitoera-chart" style="height:600px"></div>
  <p>{{ seats.length }} siège(s) sélectionné(s)</p>
</template>

React

import { useEffect, useRef, useState } from 'react';
import { SeatingChart, type SeatInfo } from '@mitoera/sdk/browser';

export function Plan({ eventSlug }: { eventSlug: string }) {
  const chart = useRef<SeatingChart | null>(null);
  const [seats, setSeats] = useState<SeatInfo[]>([]);

  useEffect(() => {
    chart.current = new SeatingChart({
      divId:        'mitoera-chart',
      workspaceKey: import.meta.env.VITE_MITOERA_KEY,
      event:        eventSlug,
      onSelectionChange: setSeats,
    });
    chart.current.render();

    return () => chart.current?.destroy();
  }, [eventSlug]);

  return (
    <>
      <div id="mitoera-chart" style={{ height: 600 }} />
      <p>{seats.length} siège(s) sélectionné(s)</p>
    </>
  );
}

React en mode strict

En développement, React 18 monte puis démonte les effets deux fois. Le destroy() du cleanup évite d'obtenir deux iframes superposées.

Ce que le widget fait tout seul

• Il résout le slug en UUID d'événement
• Il ouvre une session si vous ne lui en fournissez pas
• Il pose un hold sur chaque siège sélectionné, et le retire à la désélection
• Il détecte l'environnement au préfixe de la clé (pk_test_ → sandbox)

Ce qu'il ne fait jamais : réserver fermement. Cette étape appartient à votre serveur, avec la clé secrète — voir Brancher un paiement.