@seatschart/react 0.1.0

package/README.md

@@ -0,0 +1,41 @@
+# @seatschart/react
+
+React bindings for SeatsChart iframe embeds and checkout handoff.
+
+## Install
+
+```bash
+npm install @seatschart/react @seatschart/embed
+```
+
+## Seat map iframe
+
+```tsx
+import { SeatMapEmbed } from "@seatschart/react";
+
+export function CheckoutSeats({ jwt }: { jwt: string }) {
+  return (
+    <SeatMapEmbed
+      webBase="https://your-tenant.seatschart.com"
+      eventId="00000000-0000-0000-0000-000000000000"
+      parentOrigin="https://checkout.yourplatform.com"
+      token={jwt}
+      channel="web"
+      height={640}
+    />
+  );
+}
+```
+
+## Hold listener hook
+
+```tsx
+import { useSeatHoldListener } from "@seatschart/react";
+
+useSeatHoldListener({
+  parentOrigin: "https://checkout.yourplatform.com",
+  onHeld(payload) {
+    router.push(`/pay?hold=${payload.holdToken}`);
+  },
+});
+```

package/dist/SeatMapEmbed.d.ts

@@ -0,0 +1,14 @@
+export type SeatMapEmbedProps = {
+    webBase: string;
+    eventId: string;
+    parentOrigin: string;
+    token: string;
+    channel?: string;
+    title?: string;
+    height?: number;
+    className?: string;
+    allowFullscreen?: boolean;
+};
+/** Renders the SeatsChart WebGL viewer iframe with required embed query params. */
+export declare function SeatMapEmbed({ webBase, eventId, parentOrigin, token, channel, title, height, className, allowFullscreen, }: SeatMapEmbedProps): React.ReactElement;
+//# sourceMappingURL=SeatMapEmbed.d.ts.map

package/dist/SeatMapEmbed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeatMapEmbed.d.ts","sourceRoot":"","sources":["../src/SeatMapEmbed.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,mFAAmF;AACnF,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EACP,YAAY,EACZ,KAAK,EACL,OAAO,EACP,KAAkB,EAClB,MAAY,EACZ,SAAS,EACT,eAAsB,GACvB,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAwBxC"}

package/dist/SeatMapEmbed.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { buildViewerEmbedUrl } from "@seatschart/embed";
+/** Renders the SeatsChart WebGL viewer iframe with required embed query params. */
+export function SeatMapEmbed({ webBase, eventId, parentOrigin, token, channel, title = "Seat map", height = 640, className, allowFullscreen = true, }) {
+    const src = useMemo(() => buildViewerEmbedUrl({
+        webBase,
+        eventId,
+        parentOrigin,
+        token,
+        channel,
+    }), [webBase, eventId, parentOrigin, token, channel]);
+    return (_jsx("iframe", { src: src, title: title, width: "100%", height: height, className: className, style: { border: 0, borderRadius: 12, display: "block" }, allow: allowFullscreen ? "fullscreen" : undefined }));
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { useSeatHoldListener, type UseSeatHoldListenerOptions } from "./useSeatHoldListener.js";
+export { SeatMapEmbed, type SeatMapEmbedProps } from "./SeatMapEmbed.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,KAAK,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { useSeatHoldListener } from "./useSeatHoldListener.js";
+export { SeatMapEmbed } from "./SeatMapEmbed.js";

package/dist/useSeatHoldListener.d.ts

@@ -0,0 +1,9 @@
+import { type EmbedReservationPayload } from "@seatschart/embed";
+export type UseSeatHoldListenerOptions = {
+    parentOrigin: string;
+    onHeld: (payload: EmbedReservationPayload) => void;
+    enabled?: boolean;
+};
+/** React hook for `SEATSCHART_RESERVATION_SUCCESS` (status `held`) on the parent page. */
+export declare function useSeatHoldListener(options: UseSeatHoldListenerOptions): void;
+//# sourceMappingURL=useSeatHoldListener.d.ts.map

package/dist/useSeatHoldListener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSeatHoldListener.d.ts","sourceRoot":"","sources":["../src/useSeatHoldListener.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,0BAA0B,GAAG;IACvC,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,0FAA0F;AAC1F,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,0BAA0B,GAAG,IAAI,CAe7E"}

package/dist/useSeatHoldListener.js

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { createSeatHoldListener, } from "@seatschart/embed";
+/** React hook for `SEATSCHART_RESERVATION_SUCCESS` (status `held`) on the parent page. */
+export function useSeatHoldListener(options) {
+    const { parentOrigin, onHeld, enabled = true } = options;
+    const onHeldRef = useRef(onHeld);
+    onHeldRef.current = onHeld;
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const origin = parentOrigin.trim();
+        if (origin === "")
+            return;
+        return createSeatHoldListener({
+            parentOrigin: origin,
+            onHeld: (payload) => onHeldRef.current(payload),
+        });
+    }, [parentOrigin, enabled]);
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@seatschart/react",
+  "version": "0.1.0",
+  "description": "React components and hooks for SeatsChart seat map embeds",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/seatschart/seatschart"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "seatschart",
+    "seats",
+    "react",
+    "embed",
+    "ticketing"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "dependencies": {
+    "@seatschart/embed": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "typescript": "^5.9.3"
+  },
+  "sideEffects": false
+}