npm - @seathold/sdk - Versions diffs - 0.1.0 - Mend

@seathold/sdk 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,132 @@
+# SeatHold SDK
+Embed an interactive seat map in any web page.
+## Installation
+```bash
+npm install @seathold/sdk
+```
+Or via CDN:
+```html
+<script src="https://cdn.jsdelivr.net/npm/@seathold/sdk/dist/seathold.umd.js"></script>
+```
+## Basic Usage
+```html
+<div id="seat-map"></div>
+<script type="module">
+  import { SeatingChart } from '@seathold/sdk';
+  const chart = new SeatingChart({
+    divId: 'seat-map',
+    baseUrl: 'https://tickets.myapp.com',
+    workspaceKey: 'pub_xxxxxxxxxxxx',
+    event: 'my-event-slug',
+    onReady: (eventId) => {
+      console.log('Map ready for event:', eventId);
+    },
+    onSelectionChanged: (seatIds, ticketTypes) => {
+      console.log('Selected seats:', seatIds);
+      console.log('Ticket types chosen:', ticketTypes);
+    },
+    onHoldCreated: (holdId, expiresAt, seatIds, ticketTypes) => {
+      console.log('Hold created:', holdId);
+    },
+  }).render();
+</script>
+```
+## Multiprice
+Pass `pricing` to define ticket types per category. When the user clicks a seat in that category, a popover shows the available ticket types to choose from.
+```js
+const chart = new SeatingChart({
+  divId: 'seat-map',
+  baseUrl: 'https://tickets.myapp.com',
+  workspaceKey: 'pub_xxxxxxxxxxxx',
+  event: 'my-event-slug',
+  pricing: [
+    {
+      category: 'pista',
+      ticketTypes: [
+        { id: 'pista-inteira', label: 'Inteira',  price: 120, currency: 'BRL' },
+        { id: 'pista-meia',    label: 'Meia',     price: 60,  currency: 'BRL', color: '#22c55e' },
+      ],
+    },
+    {
+      category: 'vip',
+      ticketTypes: [
+        { id: 'vip-inteira', label: 'VIP Inteira', price: 350, currency: 'BRL' },
+      ],
+    },
+  ],
+  onSelectionChanged: (seatIds, ticketTypes) => {
+    // ticketTypes: { "seat-42": "pista-inteira", "seat-43": "pista-meia" }
+    console.log(seatIds, ticketTypes);
+  },
+  onHoldCreated: (holdId, expiresAt, seatIds, ticketTypes) => {
+    // Send holdId + ticketTypes to your backend to finalize the order
+    fetch('/api/orders', {
+      method: 'POST',
+      body: JSON.stringify({ holdId, ticketTypes }),
+    });
+  },
+}).render();
+```
+## API
+### `new SeatingChart(config)`
+| Option | Type | Required | Description |
+|---|---|---|---|
+| `divId` | `string` | yes | ID of the container element |
+| `baseUrl` | `string` | yes | Base URL of your SeatHold server |
+| `workspaceKey` | `string` | yes | Public workspace key |
+| `event` | `string` | yes | Event slug or ID |
+| `sessionToken` | `string` | | Session token for authenticated holds |
+| `pricing` | `PricingRule[]` | | Multiprice rules per category |
+| `height` | `number or string` | | iframe height (default: `600px`) |
+| `width` | `number or string` | | iframe width (default: `100%`) |
+| `onReady` | `(eventId) => void` | | Fired when the map finishes loading |
+| `onSelectionChanged` | `(seatIds, ticketTypes) => void` | | Fired on every selection change |
+| `onObjectClicked` | `(objectId, objectType) => void` | | Fired when any object is clicked |
+| `onCategoryChanged` | `(categoryId) => void` | | Fired when active category changes |
+| `onViewChanged` | `(zoom, position) => void` | | Fired on pan/zoom |
+| `onHoldCreated` | `(holdId, expiresAt, seatIds, ticketTypes) => void` | | Fired after a hold is created |
+| `onHoldReleased` | `() => void` | | Fired after a hold is released |
+| `onError` | `(action, message) => void` | | Fired on errors |
+### Instance methods
+```js
+chart.render()                        // Inject the iframe and start listening
+chart.destroy()                       // Remove the iframe and all listeners
+chart.setSelectedSeats([id1, id2])    // Programmatically select seats
+chart.createHold([id1, id2])          // Trigger a hold (optional seat list)
+chart.releaseHold()                   // Release the current hold
+chart.updateSession(token, expiresAt) // Refresh the session token
+chart.requestState()                  // Ask for current state snapshot
+chart.setPricing(rules)               // Update pricing rules at runtime
+```
+## TicketType
+```ts
+type TicketType = {
+  id: string;
+  label: string;
+  color?: string | null;
+  price?: number | null;
+  currency?: string | null;
+};
+```

package/dist/SeatingChart.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import type { PricingRule, SeatingChartConfig } from './types';
+export declare class SeatingChart {
+    private readonly config;
+    private iframe;
+    private messageHandler;
+    private iframeOrigin;
+    constructor(config: SeatingChartConfig);
+    render(): this;
+    destroy(): void;
+    setSelectedSeats(seatIds: Array<string | number>): void;
+    createHold(seatIds?: Array<string | number>): void;
+    releaseHold(): void;
+    updateSession(sessionToken: string, expiresAt?: number | null): void;
+    requestState(): void;
+    setPricing(pricing: PricingRule[]): void;
+    private send;
+    private handleMessage;
+    private buildEmbedUrl;
+    private resolveSize;
+}

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { SeatingChart } from './SeatingChart';
2	+ export type { SeatingChartConfig, PricingRule, TicketType, IncomingMessage, OutgoingMessage } from './types';

package/dist/seathold.esm.js ADDED Viewed

@@ -0,0 +1,87 @@
+class u {
+  constructor(e) {
+    this.iframe = null, this.messageHandler = null, this.iframeOrigin = "", this.config = e;
+  }
+  render() {
+    const e = document.getElementById(this.config.divId);
+    if (!e)
+      throw new Error(`[SeatHold] Element #${this.config.divId} not found.`);
+    const s = this.buildEmbedUrl();
+    this.iframeOrigin = new URL(this.config.baseUrl).origin;
+    const i = document.createElement("iframe");
+    return i.src = s, i.style.width = this.resolveSize(this.config.width, "100%"), i.style.height = this.resolveSize(this.config.height, "600px"), i.style.border = "none", i.allow = "fullscreen", this.iframe = i, e.innerHTML = "", e.appendChild(i), this.messageHandler = (t) => {
+      t.origin === this.iframeOrigin && this.handleMessage(t.data);
+    }, window.addEventListener("message", this.messageHandler), this;
+  }
+  destroy() {
+    this.messageHandler && (window.removeEventListener("message", this.messageHandler), this.messageHandler = null), this.iframe && (this.iframe.remove(), this.iframe = null);
+  }
+  setSelectedSeats(e) {
+    this.send({ type: "seathold:set_selected_seats", seatIds: e });
+  }
+  createHold(e) {
+    this.send({ type: "seathold:create_hold", seatIds: e });
+  }
+  releaseHold() {
+    this.send({ type: "seathold:release_hold" });
+  }
+  updateSession(e, s) {
+    this.send({ type: "seathold:update_session", sessionToken: e, expiresAt: s });
+  }
+  requestState() {
+    this.send({ type: "seathold:request_state" });
+  }
+  setPricing(e) {
+    this.send({ type: "seathold:set_pricing", pricing: e });
+  }
+  send(e) {
+    var s;
+    if (!((s = this.iframe) != null && s.contentWindow)) {
+      console.warn("[SeatHold] iframe not ready yet.");
+      return;
+    }
+    this.iframe.contentWindow.postMessage(e, this.iframeOrigin);
+  }
+  handleMessage(e) {
+    var s, i, t, n, o, r, h, a, c, d, l, g, f, m, p, y;
+    switch (e.type) {
+      case "seathold:ready":
+        this.config.pricing && this.config.pricing.length > 0 && this.setPricing(this.config.pricing), (i = (s = this.config).onReady) == null || i.call(s, e.eventId);
+        break;
+      case "seathold:selection_changed":
+        (n = (t = this.config).onSelectionChanged) == null || n.call(t, e.seatIds, e.ticketTypes);
+        break;
+      case "seathold:object_clicked":
+        (r = (o = this.config).onObjectClicked) == null || r.call(o, e.objectId, e.objectType);
+        break;
+      case "seathold:category_changed":
+        (a = (h = this.config).onCategoryChanged) == null || a.call(h, e.categoryId);
+        break;
+      case "seathold:view_changed":
+        (d = (c = this.config).onViewChanged) == null || d.call(c, e.zoom, e.position);
+        break;
+      case "seathold:hold_created":
+        (g = (l = this.config).onHoldCreated) == null || g.call(l, e.holdId, e.expiresAt, e.seatIds, e.ticketTypes);
+        break;
+      case "seathold:hold_released":
+        (m = (f = this.config).onHoldReleased) == null || m.call(f);
+        break;
+      case "seathold:error":
+        (y = (p = this.config).onError) == null || y.call(p, e.action, e.message);
+        break;
+    }
+  }
+  buildEmbedUrl() {
+    const e = this.config.baseUrl.replace(/\/$/, ""), s = new URLSearchParams({
+      workspace_key: this.config.workspaceKey,
+      ...this.config.sessionToken ? { session_token: this.config.sessionToken } : {}
+    });
+    return `${e}/embed/${this.config.event}?${s.toString()}`;
+  }
+  resolveSize(e, s) {
+    return e == null ? s : typeof e == "number" ? `${e}px` : e;
+  }
+}
+export {
+  u as SeatingChart
+};

package/dist/seathold.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/types.d.ts ADDED Viewed

@@ -0,0 +1,99 @@
+export type TicketType = {
+    id: string;
+    label: string;
+    color?: string | null;
+    price?: number | null;
+    currency?: string | null;
+};
+export type PricingRule = {
+    category: string;
+    ticketTypes: TicketType[];
+};
+export type IncomingMessage = {
+    type: 'seathold:set_selected_seats';
+    seatIds: Array<string | number>;
+} | {
+    type: 'seathold:create_hold';
+    seatIds?: Array<string | number>;
+} | {
+    type: 'seathold:release_hold';
+} | {
+    type: 'seathold:update_session';
+    sessionToken: string;
+    expiresAt?: number | null;
+} | {
+    type: 'seathold:request_state';
+} | {
+    type: 'seathold:set_pricing';
+    pricing: PricingRule[];
+};
+export type OutgoingMessage = {
+    type: 'seathold:ready';
+    eventId: string;
+} | {
+    type: 'seathold:selection_changed';
+    seatIds: Array<string | number>;
+    ticketTypes: Record<string, string | null>;
+} | {
+    type: 'seathold:object_clicked';
+    objectId: number | string;
+    objectType: string;
+} | {
+    type: 'seathold:category_changed';
+    categoryId: string | number | null;
+} | {
+    type: 'seathold:view_changed';
+    zoom: number;
+    position: {
+        x: number;
+        y: number;
+    };
+} | {
+    type: 'seathold:hold_created';
+    holdId: number | string;
+    expiresAt: number | null;
+    seatIds: Array<string | number>;
+    ticketTypes: Record<string, string | null>;
+} | {
+    type: 'seathold:hold_released';
+} | {
+    type: 'seathold:state';
+    eventId: string;
+    selectedSeatIds: Array<string | number>;
+    holdId: number | string | null;
+    holdToken: string | null;
+    expiresAt: number | null;
+} | {
+    type: 'seathold:error';
+    action: string;
+    message: string;
+};
+export type SeatingChartConfig = {
+    /** DOM element ID where the iframe will be injected */
+    divId: string;
+    /** Your public workspace key */
+    workspaceKey: string;
+    /** Event slug or ID */
+    event: string;
+    /** Base URL of your SeatHold server (e.g. https://tickets.myapp.com) */
+    baseUrl: string;
+    /** Optional session token for authenticated holds */
+    sessionToken?: string;
+    /** Multiprice rules: define ticket types per category key */
+    pricing?: PricingRule[];
+    /** iframe height (default: 600px) */
+    height?: number | string;
+    /** iframe width (default: 100%) */
+    width?: number | string;
+    onReady?: (eventId: string) => void;
+    onSelectionChanged?: (seatIds: Array<string | number>, ticketTypes: Record<string, string | null>) => void;
+    onObjectClicked?: (objectId: number | string, objectType: string) => void;
+    onCategoryChanged?: (categoryId: string | number | null) => void;
+    onViewChanged?: (zoom: number, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onHoldCreated?: (holdId: number | string, expiresAt: number | null, seatIds: Array<string | number>, ticketTypes: Record<string, string | null>) => void;
+    onHoldReleased?: () => void;
+    onError?: (action: string, message: string) => void;
+};

package/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "name": "@seathold/sdk",
+  "version": "0.1.0",
+  "description": "SeatHold embed SDK — renders an interactive seat map inside an iframe and communicates via postMessage",
+  "main": "dist/seathold.umd.js",
+  "module": "dist/seathold.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly --declaration --declarationDir dist",
+    "dev": "vite build --watch"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "vite": "^5.2.0"
+  },
+  "keywords": [
+    "seathold",
+    "seat-map",
+    "ticketing",
+    "sdk"
+  ],
+  "license": "MIT"
+}