@seatsyoo/react 1.0.0 → 1.1.0

package/README.md

@@ -220,8 +220,42 @@ En Next.js (App Router), úsalo dentro de un componente con `"use client"`.
 No va en el paquete: el visor la descarga de `${server}/sdk/butacas-3d.js` cuando alguien la abre. Si tu web
 tiene una política de seguridad de contenidos (CSP), añade esa dirección a `script-src`, o pasa `view3d={false}`.
 
-La referencia completa de opciones, avisos y métodos está en la documentación de Seatsyoo (**/docs/visor** y
-**/docs/frameworks**).
+## El diseñador de planos
+
+`<SeatsyooDesigner>` abre en tu web el diseñador de planos de Seatsyoo, para que tus clientes dibujen sus recintos.
+Tu servidor abre una sesión para un plano con su clave secreta (`POST /api/v1/charts/{plano}/designer-sessions`, o
+`charts.designerSession` de `@seatsyoo/node`) y le da el token a tu web:
+
+```tsx
+import { SeatsyooDesigner } from "@seatsyoo/react";
+
+// Tu servidor abre la sesión y te da el token (aquí, una ruta tuya).
+const pedirToken = (): Promise<string> =>
+  fetch("/mi-api/disenador/teatro", { method: "POST" }).then((r) => r.json()).then((s: { token: string }) => s.token);
+
+function Disenador({ token, cerrar }: { token: string; cerrar: () => void }) {
+  return (
+    <SeatsyooDesigner
+      server="https://seatsyoo.example"
+      token={token}
+      refreshToken={pedirToken}
+      style={{ height: "80vh" }}
+      onPublish={({ version }) => console.log("Publicada la versión", version)}
+      onClose={cerrar}
+    />
+  );
+}
+```
+
+Props: `server`, `token`, `language`, `refreshToken` (pide a tu servidor otro token del mismo plano antes de que
+caduque: sin ella, al caducar deja de guardar), y los avisos `onReady`, `onSave`, `onPublish`, `onClose` (sin ella no
+sale «←») y `onError`; más `className`, `style` e `id` del `<div>`, que necesita alto. Un `token` nuevo se le manda sin
+volver a montarlo; cambiar `server` o `language`, o pasar o quitar `refreshToken` u `onClose`, lo vuelve a montar. Con
+`ref` (`useRef<EmbeddedDesigner>(null)`) tienes el diseñador: `setToken()`, `iframe`. En el servidor (SSR) pinta solo el
+`<div>`.
+
+La referencia completa de opciones, avisos y métodos está en la documentación de Seatsyoo (**/docs/visor**,
+**/docs/disenador** y **/docs/frameworks**).
 
 ## Licencia
 
@@ -256,6 +290,9 @@ const chart = useRef<SeatingChart>(null);
 // At checkout, send only the event and chart.current.holdToken to your server (never the selected keys).
 ```
 
+- **Embedded designer**: `<SeatsyooDesigner server token refreshToken onPublish onClose style={{ height: "80vh" }} />`
+  opens the Seatsyoo chart designer in your website, with a session token your server opens with its secret key
+  (`POST /api/v1/charts/{chart}/designer-sessions`).
 - **Props**: every viewer option except `container`, plus `className`, `style` and `id` for the wrapping `<div>`.
 - **Re-mounting**: changing `server`, `publicKey`, `event`, `link`, `document`, `season`, `seasonEvents`,
   `channels`, `pricing`, `currency`, `locale`, `language`, `maxSelected`, `session`, `holdToken`, `mode`,

package/dist/SeatsyooDesigner.d.ts

@@ -0,0 +1,33 @@
+import { type EmbeddedDesigner, type EmbeddedDesignerOptions } from "@seatsyoo/visor";
+import { type CSSProperties, type ForwardRefExoticComponent, type RefAttributes } from "react";
+/** Como en <SeatsyooChart>: las opciones opcionales admiten también `undefined`, que es lo mismo que no pasarlas. */
+type AdmitenUndefined<T> = {
+    [K in keyof T]: {} extends Pick<T, K> ? T[K] | undefined : T[K];
+};
+/** Props de <SeatsyooDesigner>: las opciones del diseñador (sin `container`: es el propio componente) y las del <div>. */
+export interface SeatsyooDesignerProps extends AdmitenUndefined<Omit<EmbeddedDesignerOptions, "container">> {
+    /** Clase del <div> que contiene el diseñador. Ocupa todo su tamaño: dale altura. */
+    className?: string | undefined;
+    /** Estilo del <div> que contiene el diseñador (p. ej. `{ height: "80vh" }`). */
+    style?: CSSProperties | undefined;
+    id?: string | undefined;
+}
+/**
+ * El diseñador de planos de Seatsyoo en tu web, con el token de una sesión que abre tu servidor con su clave secreta
+ * (`POST /api/v1/charts/{plano}/designer-sessions`, o `charts.designerSession` de `@seatsyoo/node`).
+ *
+ * ```tsx
+ * <SeatsyooDesigner
+ *   server="https://seatsyoo.example"
+ *   token={token}
+ *   refreshToken={pedirToken}
+ *   style={{ height: "80vh" }}
+ *   onPublish={({ version }) => console.log("Publicada la versión", version)}
+ *   onClose={() => setAbierto(false)}
+ * />
+ * ```
+ *
+ * Con `ref` (`useRef<EmbeddedDesigner>(null)`) tienes el diseñador abierto: `setToken()`, `iframe`…
+ */
+export declare const SeatsyooDesigner: ForwardRefExoticComponent<SeatsyooDesignerProps & RefAttributes<EmbeddedDesigner>>;
+export {};

package/dist/SeatsyooDesigner.js

@@ -0,0 +1,132 @@
+// <SeatsyooDesigner>: el diseñador de planos de Seatsyoo, incrustado en tu web, como componente de React (18 y 19).
+//
+// - Se monta en un efecto: en el servidor (SSR) solo se pinta el <div> vacío, y con StrictMode (que monta, desmonta y
+//   vuelve a montar) el primero se destruye antes de abrir nada: queda uno. Al desmontar, destroy().
+// - Vuelve a montarse si cambia `server` o `language`, o si se pasa o se quita `refreshToken` u `onClose`: la página del
+//   diseñador sabe al abrirse si puede pedir tokens nuevos y si sale «←».
+// - Un `token` nuevo con el diseñador abierto no lo vuelve a montar: se le manda (setToken), como al renovarlo.
+// - Los avisos (onReady, onSave…) y refreshToken llaman siempre a la última función recibida, sin volver a montar.
+import { designer } from "@seatsyoo/visor";
+import { createElement, forwardRef, useEffect, useLayoutEffect, useRef, version, } from "react";
+import { avisarEnConsola, errorDeOpciones } from "./opciones.js";
+// useLayoutEffect no hace nada en el servidor (y React 18 avisa): allí, useEffect, que tampoco se ejecuta.
+const useEfectoAntesDePintar = typeof document === "undefined" ? useEffect : useLayoutEffect;
+/** React 19 llama a la limpieza que devuelve una ref de función en lugar de llamarla con null; React 18, no. */
+const REFS_CON_LIMPIEZA = Number(version.split(".")[0]) >= 19;
+/** Pone el diseñador en la ref de quien usa el componente y devuelve cómo quitarlo, como React con la de un elemento. */
+function ponerEnRef(ref, d) {
+    if (typeof ref === "function") {
+        const limpieza = ref(d);
+        return REFS_CON_LIMPIEZA && typeof limpieza === "function" ? limpieza : () => ref(null);
+    }
+    if (ref)
+        ref.current = d;
+    return () => {
+        if (ref && ref.current === d)
+            ref.current = null;
+    };
+}
+function SeatsyooDesignerConRef(props, ref) {
+    const { className, style, id, ...opciones } = props;
+    const contenedor = useRef(null);
+    // Las últimas opciones recibidas: los avisos y el montaje leen de aquí.
+    const ultimas = useRef(opciones);
+    // El diseñador abierto ahora mismo y el último token que se le dio.
+    const abierto = useRef(null);
+    // La ref en la que está puesto y cómo quitarlo de ella.
+    const enRef = useRef(null);
+    useEfectoAntesDePintar(() => {
+        ultimas.current = opciones;
+    });
+    function quitarDeRef() {
+        const actual = enRef.current;
+        enRef.current = null;
+        actual?.quitar();
+    }
+    function ponerDisenadorEnRef(r, d) {
+        if (enRef.current?.ref === r && enRef.current.d === d)
+            return;
+        quitarDeRef();
+        enRef.current = { ref: r, d, quitar: ponerEnRef(r, d) };
+    }
+    const renueva = !!opciones.refreshToken;
+    const cierra = !!opciones.onClose;
+    useEffect(() => {
+        const div = contenedor.current;
+        if (!div)
+            return;
+        const o = ultimas.current;
+        let d;
+        try {
+            d = designer({
+                container: div,
+                server: o.server,
+                token: o.token,
+                ...(o.language ? { language: o.language } : {}),
+                // Solo si los hay: la página del diseñador sabe al abrirse si puede pedir tokens y si sale «←».
+                ...(o.refreshToken ? { refreshToken: () => (ultimas.current.refreshToken ?? o.refreshToken)() } : {}),
+                ...(o.onClose ? { onClose: () => ultimas.current.onClose?.() } : {}),
+                onReady: (i) => ultimas.current.onReady?.(i),
+                onSave: (i) => ultimas.current.onSave?.(i),
+                onPublish: (i) => ultimas.current.onPublish?.(i),
+                onError: (e) => (ultimas.current.onError ?? avisarEnConsola)(e),
+            });
+        }
+        catch (err) {
+            // Un token que no es de una sesión del diseñador, un contenedor que falta…
+            const error = errorDeOpciones(err);
+            if (o.onError)
+                o.onError(error);
+            else
+                console.error("[seatsyoo]", error.message);
+            return;
+        }
+        abierto.current = { d, token: o.token };
+        ponerDisenadorEnRef(ref, d);
+        return () => {
+            if (enRef.current?.d === d)
+                quitarDeRef();
+            d.destroy();
+            if (abierto.current?.d === d)
+                abierto.current = null;
+        };
+    }, [opciones.server, opciones.language, renueva, cierra]);
+    // Si cambia la ref (otra función u otro objeto), el diseñador pasa a la nueva y se quita de la anterior.
+    useEffect(() => {
+        if (abierto.current)
+            ponerDisenadorEnRef(ref, abierto.current.d);
+    }, [ref]);
+    // Un token nuevo, al diseñador abierto (si se acaba de montar con él, ya lo tiene).
+    useEffect(() => {
+        const a = abierto.current;
+        if (!a || a.token === opciones.token)
+            return;
+        try {
+            a.d.setToken(opciones.token);
+            a.token = opciones.token;
+        }
+        catch (err) {
+            (ultimas.current.onError ?? avisarEnConsola)(errorDeOpciones(err));
+        }
+    }, [opciones.token]);
+    return createElement("div", { ref: contenedor, className, style, id });
+}
+/**
+ * El diseñador de planos de Seatsyoo en tu web, con el token de una sesión que abre tu servidor con su clave secreta
+ * (`POST /api/v1/charts/{plano}/designer-sessions`, o `charts.designerSession` de `@seatsyoo/node`).
+ *
+ * ```tsx
+ * <SeatsyooDesigner
+ *   server="https://seatsyoo.example"
+ *   token={token}
+ *   refreshToken={pedirToken}
+ *   style={{ height: "80vh" }}
+ *   onPublish={({ version }) => console.log("Publicada la versión", version)}
+ *   onClose={() => setAbierto(false)}
+ * />
+ * ```
+ *
+ * Con `ref` (`useRef<EmbeddedDesigner>(null)`) tienes el diseñador abierto: `setToken()`, `iframe`…
+ */
+export const SeatsyooDesigner = forwardRef(SeatsyooDesignerConRef);
+SeatsyooDesigner.displayName = "SeatsyooDesigner";

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { SeatsyooChart, type SeatsyooChartProps } from "./SeatsyooChart.js";
-export type { ChartDocument, Language, RenderOptions, SeatingChart, SelectedObject, StatusStyle } from "@seatsyoo/visor";
+export { SeatsyooDesigner, type SeatsyooDesignerProps } from "./SeatsyooDesigner.js";
+export type { ChartDocument, EmbeddedDesigner, EmbeddedDesignerOptions, Language, RenderOptions, SeatingChart, SelectedObject, StatusStyle, } from "@seatsyoo/visor";

package/dist/index.js

@@ -1,2 +1,3 @@
-// @seatsyoo/react: el visor de mapas de asientos de Seatsyoo como componente de React.
+// @seatsyoo/react: el visor de mapas de asientos de Seatsyoo y su diseñador de planos como componentes de React.
 export { SeatsyooChart } from "./SeatsyooChart.js";
+export { SeatsyooDesigner } from "./SeatsyooDesigner.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seatsyoo/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Componente de React para el visor de mapas de asientos de Seatsyoo: elegir butacas, retenerlas y venderlas en tiempo real.",
   "license": "MIT",
   "keywords": [
@@ -27,7 +27,7 @@
     "dist/*.d.ts"
   ],
   "dependencies": {
-    "@seatsyoo/visor": "^1.0.0"
+    "@seatsyoo/visor": "^1.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"