@central-ticket/queue-sdk 0.0.1

package/dist/react.js

@@ -0,0 +1,624 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/queue-element.ts
+var queue_element_exports = {};
+__export(queue_element_exports, {
+  CentralQElement: () => CentralQElement
+});
+var import_lit, import_decorators, CentralQElement;
+var init_queue_element = __esm({
+  "src/queue-element.ts"() {
+    "use strict";
+    import_lit = require("lit");
+    import_decorators = require("lit/decorators.js");
+    CentralQElement = class extends import_lit.LitElement {
+      constructor() {
+        super(...arguments);
+        this.status = "LOADING";
+        this.position = 0;
+        this.ahead = 0;
+      }
+      render() {
+        if (this.status === "ACTIVE") return import_lit.html``;
+        return import_lit.html`
+      <div class="overlay">
+        <div class="modal">
+          ${this.status === "LOADING" ? import_lit.html`
+                <div class="spinner"></div>
+                <h2>Conectando a la fila...</h2>
+              ` : ""}
+          ${this.status === "WAITING" ? import_lit.html`
+                <div class="spinner"></div>
+                <h2>Estás en la fila virtual</h2>
+                <p>Tu posición: <strong>#${this.position}</strong></p>
+                ${this.ahead > 0 ? import_lit.html`<p>
+                      Hay <strong>${this.ahead}</strong>
+                      ${this.ahead === 1 ? "persona" : "personas"} delante de
+                      ti.
+                    </p>` : import_lit.html`<p>¡Eres el siguiente!</p>`}
+                <p style="font-size: 0.85rem; color: #aaa;">
+                  Por favor, no cierres esta ventana.
+                </p>
+              ` : ""}
+          ${this.status === "EXPIRED" ? import_lit.html`
+                <h2 style="color: #f59e0b;">Tu sesión ha expirado</h2>
+                <p>El tiempo para completar la compra terminó.</p>
+                <button
+                  style="margin-top: 1rem; padding: 0.75rem 2rem; font-size: 1rem;
+                         cursor: pointer; border-radius: 8px; border: none;
+                         background: #3b82f6; color: white;"
+                  @click=${() => this.onRetry?.()}
+                >
+                  Volver a la fila
+                </button>
+              ` : ""}
+          ${this.status === "ERROR" ? import_lit.html`
+                <h2 style="color: #ef4444;">Ocurrió un error de conexión</h2>
+                <p>Por favor, recarga la página.</p>
+              ` : ""}
+        </div>
+      </div>
+    `;
+      }
+    };
+    CentralQElement.styles = import_lit.css`
+    :host {
+      display: contents;
+    }
+    .overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(5px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      font-family: system-ui, sans-serif;
+    }
+    .modal {
+      background: #1e1e1e;
+      color: white;
+      padding: 2rem;
+      border-radius: 12px;
+      text-align: center;
+      max-width: 400px;
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+    }
+    .spinner {
+      margin: 1rem auto;
+      width: 40px;
+      height: 40px;
+      border: 4px solid #333;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+    __decorateClass([
+      (0, import_decorators.state)()
+    ], CentralQElement.prototype, "status", 2);
+    __decorateClass([
+      (0, import_decorators.state)()
+    ], CentralQElement.prototype, "position", 2);
+    __decorateClass([
+      (0, import_decorators.state)()
+    ], CentralQElement.prototype, "ahead", 2);
+    CentralQElement = __decorateClass([
+      (0, import_decorators.customElement)("central-q")
+    ], CentralQElement);
+  }
+});
+
+// src/react.ts
+var react_exports = {};
+__export(react_exports, {
+  useCentralQ: () => useCentralQ,
+  useQueue: () => useQueue
+});
+module.exports = __toCommonJS(react_exports);
+var import_react = require("react");
+
+// src/queue-client.ts
+var CENTRALQ_DEFAULT_API_URL = "http://localhost:3001";
+function normalizeApiUrl(apiUrl) {
+  const trimmed = apiUrl.replace(/\/+$/, "");
+  return trimmed.endsWith("/api") ? trimmed.slice(0, -4) : trimmed;
+}
+var QueueHttpClient = class {
+  constructor(apiUrl = CENTRALQ_DEFAULT_API_URL, apiKey, queueInitToken) {
+    this.apiUrl = apiUrl;
+    this.apiKey = apiKey;
+    this.queueInitToken = queueInitToken;
+    this.apiUrl = normalizeApiUrl(this.apiUrl);
+  }
+  get headers() {
+    const h = { "Content-Type": "application/json" };
+    if (this.apiKey) h["x-api-key"] = this.apiKey;
+    if (this.queueInitToken) h["x-queue-init-token"] = this.queueInitToken;
+    return h;
+  }
+  /**
+   * Intenta unir a un usuario a la cola de un evento.
+   * Llama a POST /api/queue/:eventId/join en el worker.
+   */
+  async joinQueue(eventId, userId) {
+    const res = await fetch(
+      `${this.apiUrl}/api/queue/${encodeURIComponent(eventId)}/join`,
+      {
+        method: "POST",
+        headers: this.headers,
+        body: JSON.stringify({ userId })
+      }
+    );
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({}));
+      throw new Error(
+        body.message ?? `Error ${res.status} al conectar con el sistema de colas`
+      );
+    }
+    return res.json();
+  }
+  /**
+   * Envía un heartbeat para mantener vivo el slot (waiting o active).
+   * El SDK lo llama cada 10s automáticamente.
+   */
+  async sendHeartbeat(eventId, userId) {
+    await fetch(
+      `${this.apiUrl}/api/queue/${encodeURIComponent(eventId)}/heartbeat`,
+      {
+        method: "POST",
+        headers: this.headers,
+        body: JSON.stringify({ userId })
+      }
+    );
+  }
+  /**
+   * Libera el slot del usuario inmediatamente.
+   * Llamar al completar la compra o al salir voluntariamente.
+   */
+  async leaveQueue(eventId, userId) {
+    await fetch(
+      `${this.apiUrl}/api/queue/${encodeURIComponent(eventId)}/leave`,
+      {
+        method: "POST",
+        headers: this.headers,
+        body: JSON.stringify({ userId })
+      }
+    );
+  }
+  async issueQueueInitToken(eventId, userId) {
+    const res = await fetch(
+      `${this.apiUrl}/api/queue/init/${encodeURIComponent(eventId)}`,
+      {
+        method: "POST",
+        headers: this.headers,
+        body: JSON.stringify({ userId })
+      }
+    );
+    const body = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      throw new Error(
+        body.message ?? `Error ${res.status} al inicializar sesi\xF3n de cola`
+      );
+    }
+    const token = body.queueInitToken ?? body.initToken;
+    if (!body.userId || !token || !body.expiresAt) {
+      throw new Error("Respuesta inv\xE1lida al inicializar sesi\xF3n de cola");
+    }
+    return {
+      userId: body.userId,
+      queueInitToken: token,
+      expiresAt: body.expiresAt
+    };
+  }
+};
+
+// src/centralq.ts
+var CentralQ = class _CentralQ {
+  constructor(options) {
+    this.element = null;
+    this.destroyed = false;
+    // biome-ignore lint: allow explicit any for generic event map
+    this.listeners = /* @__PURE__ */ new Map();
+    this.client = new QueueHttpClient(
+      options.apiUrl,
+      options.apiKey,
+      options.queueInitToken
+    );
+    this.eventId = options.eventId;
+    this.pollInterval = options.pollInterval ?? 1e4;
+    this.container = options.container ?? document.body;
+    this.userId = this.resolveUserId(options.userId);
+  }
+  /**
+   * Inicializa CentralQ y comienza el flujo de cola automáticamente.
+   * Monta el overlay de UI y empieza a hacer polling.
+   */
+  static init(options) {
+    const instance = new _CentralQ(options);
+    instance.mount();
+    instance.checkQueue();
+    return instance;
+  }
+  // Event API
+  /** Suscribirse a un evento del ciclo de vida de la cola */
+  on(event, listener) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(listener);
+    return this;
+  }
+  /** Desuscribirse de un evento */
+  off(event, listener) {
+    this.listeners.get(event)?.delete(listener);
+    return this;
+  }
+  emit(event, detail) {
+    this.listeners.get(event)?.forEach((fn) => fn(detail));
+  }
+  // Métodos públicos
+  /**
+   * Libera el slot del usuario inmediatamente.
+   * Llamar cuando el usuario completa la compra.
+   */
+  leave() {
+    this.stopTimers();
+    this.updateUI("ACTIVE");
+    this.client.leaveQueue(this.eventId, this.userId).catch(() => {
+    });
+  }
+  /**
+   * Destruye la instancia: para todos los timers, desmonta el overlay,
+   * y libera el slot en el servidor.
+   */
+  destroy() {
+    this.destroyed = true;
+    this.stopTimers();
+    this.client.leaveQueue(this.eventId, this.userId).catch(() => {
+    });
+    this.unmount();
+    this.listeners.clear();
+  }
+  /** Retorna el userId resuelto (externo o autogenerado) */
+  getUserId() {
+    return this.userId;
+  }
+  // userId: genera y persiste automáticamente
+  resolveUserId(externalId) {
+    if (externalId) return externalId;
+    const key = `ctq_anon_${this.eventId}`;
+    try {
+      const stored = sessionStorage.getItem(key);
+      if (stored) return stored;
+    } catch {
+    }
+    const generated = `anon_${crypto.randomUUID()}`;
+    try {
+      sessionStorage.setItem(key, generated);
+    } catch {
+    }
+    return generated;
+  }
+  // UI: montar/desmontar el Web Component
+  mount() {
+    Promise.resolve().then(() => init_queue_element());
+    this.element = document.createElement("central-q");
+    this.element.onRetry = () => {
+      this.updateUI("LOADING");
+      this.checkQueue();
+    };
+    this.container.appendChild(this.element);
+  }
+  unmount() {
+    if (this.element) {
+      this.element.remove();
+      this.element = null;
+    }
+  }
+  updateUI(status, data) {
+    if (!this.element) return;
+    this.element.status = status;
+    if (data?.position !== void 0) this.element.position = data.position;
+    if (data?.ahead !== void 0) this.element.ahead = data.ahead;
+  }
+  // Timers
+  stopTimers() {
+    if (this.pollingTimer) {
+      clearInterval(this.pollingTimer);
+      this.pollingTimer = void 0;
+    }
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer);
+      this.heartbeatTimer = void 0;
+    }
+    if (this.expiryTimer) {
+      clearTimeout(this.expiryTimer);
+      this.expiryTimer = void 0;
+    }
+  }
+  startHeartbeat() {
+    if (this.heartbeatTimer) return;
+    this.heartbeatTimer = setInterval(() => {
+      this.client.sendHeartbeat(this.eventId, this.userId).catch(() => {
+      });
+    }, this.pollInterval);
+  }
+  scheduleExpiry(expiresAt) {
+    if (this.expiryTimer) clearTimeout(this.expiryTimer);
+    const msLeft = expiresAt * 1e3 - Date.now();
+    if (msLeft <= 0) {
+      this.handleExpired();
+      return;
+    }
+    this.expiryTimer = setTimeout(() => this.handleExpired(), msLeft);
+  }
+  handleExpired() {
+    this.stopTimers();
+    this.updateUI("EXPIRED");
+    this.emit("expired", {
+      userId: this.userId,
+      eventId: this.eventId
+    });
+  }
+  // Core: polling + join
+  async checkQueue() {
+    if (this.destroyed) return;
+    try {
+      const res = await this.client.joinQueue(this.eventId, this.userId);
+      if (res.status === "ACTIVE") {
+        if (this.pollingTimer) {
+          clearInterval(this.pollingTimer);
+          this.pollingTimer = void 0;
+        }
+        this.startHeartbeat();
+        this.scheduleExpiry(res.expiresAt);
+        this.updateUI("ACTIVE");
+        this.emit("passed", {
+          token: res.token,
+          expiresAt: res.expiresAt,
+          userId: this.userId,
+          eventId: this.eventId
+        });
+      } else if (res.status === "WAITING") {
+        this.updateUI("WAITING", {
+          position: res.position,
+          ahead: res.ahead
+        });
+        this.emit("position", {
+          position: res.position,
+          ahead: res.ahead,
+          userId: this.userId,
+          eventId: this.eventId
+        });
+        if (!this.pollingTimer) {
+          this.pollingTimer = setInterval(
+            () => this.checkQueue(),
+            this.pollInterval
+          );
+        }
+      }
+    } catch {
+      this.updateUI("ERROR");
+      this.stopTimers();
+      this.emit("error", {
+        userId: this.userId,
+        eventId: this.eventId
+      });
+    }
+  }
+};
+
+// src/react.ts
+function useCentralQ(options) {
+  const [token, setToken] = (0, import_react.useState)(null);
+  const [position, setPosition] = (0, import_react.useState)(null);
+  const [ahead, setAhead] = (0, import_react.useState)(null);
+  const [expired, setExpired] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(false);
+  const instanceRef = (0, import_react.useRef)(null);
+  const leave = (0, import_react.useCallback)(() => {
+    instanceRef.current?.leave();
+    setToken(null);
+    setPosition(null);
+    setAhead(null);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const queue = CentralQ.init(options);
+    queue.on("passed", (detail) => {
+      setToken(detail.token);
+      setPosition(null);
+      setAhead(null);
+      setExpired(false);
+      setError(false);
+    });
+    queue.on("position", (detail) => {
+      setPosition(detail.position);
+      setAhead(detail.ahead);
+    });
+    queue.on("expired", () => {
+      setToken(null);
+      setExpired(true);
+    });
+    queue.on("error", () => {
+      setError(true);
+    });
+    instanceRef.current = queue;
+    return () => {
+      queue.destroy();
+      instanceRef.current = null;
+    };
+  }, [options.apiUrl, options.apiKey, options.eventId]);
+  return {
+    token,
+    position,
+    ahead,
+    expired,
+    error,
+    leave,
+    instance: instanceRef.current
+  };
+}
+function useQueue(options) {
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const [data, setData] = (0, import_react.useState)({
+    token: null,
+    position: null,
+    ahead: null,
+    expiresAt: null
+  });
+  const [error, setError] = (0, import_react.useState)(null);
+  const instanceRef = (0, import_react.useRef)(null);
+  const reset = (0, import_react.useCallback)(() => {
+    setStatus("idle");
+    setError(null);
+    setData({ token: null, position: null, ahead: null, expiresAt: null });
+  }, []);
+  const leave = (0, import_react.useCallback)(() => {
+    instanceRef.current?.leave();
+    setData({ token: null, position: null, ahead: null, expiresAt: null });
+    setStatus("idle");
+  }, []);
+  (0, import_react.useEffect)(() => {
+    let queue = null;
+    let cancelled = false;
+    if (options.enabled === false) {
+      instanceRef.current?.destroy();
+      instanceRef.current = null;
+      reset();
+      return;
+    }
+    setStatus("joining");
+    setError(null);
+    const init = async () => {
+      try {
+        let userId = options.userId;
+        let queueInitToken = options.queueInitToken;
+        if (!userId || !queueInitToken) {
+          if (options.autoInitToken === false) {
+            throw new Error(
+              "Falta queueInitToken/userId y initEndpoint est\xE1 deshabilitado"
+            );
+          }
+          const init2 = await options.client.issueQueueInitToken(
+            options.eventId,
+            userId
+          );
+          userId = init2.userId;
+          queueInitToken = init2.queueInitToken;
+        }
+        if (cancelled) return;
+        queue = options.client.createQueue({
+          eventId: options.eventId,
+          userId,
+          queueInitToken,
+          pollInterval: options.pollInterval,
+          container: options.container
+        });
+        queue.on("passed", (detail) => {
+          setData({
+            token: detail.token,
+            position: null,
+            ahead: null,
+            expiresAt: detail.expiresAt
+          });
+          setStatus("passed");
+          setError(null);
+        });
+        queue.on("position", (detail) => {
+          setData((prev) => ({
+            ...prev,
+            token: null,
+            position: detail.position,
+            ahead: detail.ahead
+          }));
+          setStatus("waiting");
+        });
+        queue.on("expired", () => {
+          setData({
+            token: null,
+            position: null,
+            ahead: null,
+            expiresAt: null
+          });
+          setStatus("expired");
+        });
+        queue.on("error", () => {
+          setStatus("error");
+          setError(new Error("Queue connection error"));
+        });
+        instanceRef.current = queue;
+      } catch (err) {
+        if (cancelled) return;
+        setStatus("error");
+        setError(
+          err instanceof Error ? err : new Error("Queue connection error")
+        );
+      }
+    };
+    init();
+    return () => {
+      cancelled = true;
+      queue?.destroy();
+      instanceRef.current = null;
+    };
+  }, [
+    options.client,
+    options.enabled,
+    options.eventId,
+    options.userId,
+    options.queueInitToken,
+    options.autoInitToken,
+    options.pollInterval,
+    options.container,
+    reset
+  ]);
+  return {
+    status,
+    data,
+    isPending: status === "idle" || status === "joining",
+    error,
+    leave,
+    reset,
+    instance: instanceRef.current
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCentralQ,
+  useQueue
+});