@zonetrix/shared 2.4.1 → 2.4.3

package/dist/index.js

@@ -26,6 +26,7 @@ __export(index_exports, {
   calculateAvailableSeats: () => calculateAvailableSeats,
   calculateCapacity: () => calculateCapacity,
   calculateSeatPrice: () => calculateSeatPrice,
+  clearFirebaseInstance: () => clearFirebaseInstance,
   cloneConfig: () => cloneConfig,
   createDefaultConfig: () => createDefaultConfig,
   createIndexUpdates: () => createIndexUpdates,
@@ -39,11 +40,17 @@ __export(index_exports, {
   fromFirebaseSeatMap: () => fromFirebaseSeatMap,
   fromFirebaseState: () => fromFirebaseState,
   generateId: () => generateId,
+  getFirebaseDatabase: () => getFirebaseDatabase,
   getSelectedSeats: () => getSelectedSeats,
   importConfigFromJSON: () => importConfigFromJSON,
+  initializeFirebaseForViewer: () => initializeFirebaseForViewer,
+  isFirebaseInitialized: () => isFirebaseInitialized,
   toFirebaseSeatMap: () => toFirebaseSeatMap,
   toFirebaseState: () => toFirebaseState,
   updateConfigTimestamp: () => updateConfigTimestamp,
+  useFirebaseConfig: () => useFirebaseConfig,
+  useFirebaseSeatStates: () => useFirebaseSeatStates,
+  useRealtimeSeatMap: () => useRealtimeSeatMap,
   validateSeatMapConfig: () => validateSeatMapConfig
 });
 module.exports = __toCommonJS(index_exports);
@@ -109,6 +116,7 @@ function validateSeatMapConfig(config) {
   if (!config.colors) {
     warnings.push("Missing color configuration");
   } else {
+    const colors = config.colors;
     const requiredColors = [
       "canvasBackground",
       "stageColor",
@@ -119,7 +127,7 @@ function validateSeatMapConfig(config) {
       "gridLines"
     ];
     requiredColors.forEach((color) => {
-      if (!config.colors[color] || typeof config.colors[color] !== "string") {
+      if (!colors[color] || typeof colors[color] !== "string") {
         warnings.push(`Missing or invalid color: ${color}`);
       }
     });
@@ -179,10 +187,10 @@ function validateSeatMapConfig(config) {
   };
 }
 function isValidSeatState(state) {
-  return ["available", "reserved", "selected", "unavailable"].includes(state);
+  return typeof state === "string" && ["available", "reserved", "selected", "unavailable"].includes(state);
 }
 function isValidSeatShape(shape) {
-  return ["circle", "square", "rounded-square"].includes(shape);
+  return typeof shape === "string" && ["circle", "square", "rounded-square"].includes(shape);
 }
 function generateId(prefix = "obj") {
   return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
@@ -487,6 +495,335 @@ function createIndexUpdates(seatMapId, eventId, subEventId) {
     [`indexes/by_sub_event/${subEventId}/${seatMapId}`]: true
   };
 }
+
+// src/firebase/client.ts
+var firebaseDatabase = null;
+function initializeFirebaseForViewer(database) {
+  firebaseDatabase = database;
+}
+function getFirebaseDatabase() {
+  if (!firebaseDatabase) {
+    throw new Error(
+      "Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
+    );
+  }
+  return firebaseDatabase;
+}
+function isFirebaseInitialized() {
+  return firebaseDatabase !== null;
+}
+function clearFirebaseInstance() {
+  firebaseDatabase = null;
+}
+
+// src/firebase/hooks/useFirebaseSeatStates.ts
+var import_react = require("react");
+var import_database = require("firebase/database");
+function arraysEqualUnordered(a, b) {
+  if (a.length !== b.length) return false;
+  const sortedA = [...a].sort();
+  const sortedB = [...b].sort();
+  return sortedA.every((val, idx) => val === sortedB[idx]);
+}
+function deriveUserAwareSeatArrays(statesData, currentUserId) {
+  const myReserved = [];
+  const otherReserved = [];
+  const unavailable = [];
+  Object.entries(statesData).forEach(([seatId, entry]) => {
+    if (!entry) return;
+    if (typeof entry === "object" && entry.state) {
+      if (entry.state === "unavailable") {
+        unavailable.push(seatId);
+      } else if (entry.state === "reserved") {
+        if (currentUserId && entry.userId === currentUserId) {
+          myReserved.push(seatId);
+        } else {
+          otherReserved.push(seatId);
+        }
+      }
+    }
+  });
+  return {
+    myReserved: myReserved.sort(),
+    otherReserved: otherReserved.sort(),
+    unavailable: unavailable.sort()
+  };
+}
+var INITIAL_SNAPSHOT = {
+  states: null,
+  loading: true,
+  error: null,
+  lastUpdated: null,
+  myReservedSeats: [],
+  otherReservedSeats: [],
+  unavailableSeats: []
+};
+function useFirebaseSeatStates(options) {
+  const {
+    seatMapId,
+    currentUserId,
+    enabled = true,
+    onStateChange,
+    onError
+  } = options;
+  const snapshotRef = (0, import_react.useRef)({ ...INITIAL_SNAPSHOT });
+  const onStateChangeRef = (0, import_react.useRef)(onStateChange);
+  const onErrorRef = (0, import_react.useRef)(onError);
+  const currentUserIdRef = (0, import_react.useRef)(currentUserId);
+  onStateChangeRef.current = onStateChange;
+  onErrorRef.current = onError;
+  currentUserIdRef.current = currentUserId;
+  const subscribe = (0, import_react.useCallback)(
+    (callback) => {
+      if (!enabled || !seatMapId) {
+        if (snapshotRef.current.loading !== false || snapshotRef.current.states !== null) {
+          snapshotRef.current = { ...INITIAL_SNAPSHOT, loading: false };
+          callback();
+        }
+        return () => {
+        };
+      }
+      if (!isFirebaseInitialized()) {
+        const errorMsg = "Firebase not initialized. Call initializeFirebaseForViewer first.";
+        if (snapshotRef.current.error?.message !== errorMsg) {
+          snapshotRef.current = {
+            ...INITIAL_SNAPSHOT,
+            loading: false,
+            error: new Error(errorMsg)
+          };
+          callback();
+        }
+        return () => {
+        };
+      }
+      const db = getFirebaseDatabase();
+      const statesRef = (0, import_database.ref)(db, `seatmaps/${seatMapId}/seat_states`);
+      console.log("\u{1F525} Firebase Listener - Subscribing to:", `seatmaps/${seatMapId}/seat_states`);
+      const handleValue = (dataSnapshot) => {
+        const data = dataSnapshot.val();
+        const statesData = data || {};
+        const derived = deriveUserAwareSeatArrays(
+          statesData,
+          currentUserIdRef.current
+        );
+        console.log("\u{1F4E1} Firebase Event Received:", {
+          path: `seatmaps/${seatMapId}/seat_states`,
+          dataSnapshot: dataSnapshot.exists(),
+          rawData: data,
+          statesCount: Object.keys(statesData).length,
+          derived: {
+            myReserved: derived.myReserved,
+            otherReserved: derived.otherReserved,
+            unavailable: derived.unavailable
+          }
+        });
+        const current = snapshotRef.current;
+        const hasChanged = current.loading || !arraysEqualUnordered(current.myReservedSeats, derived.myReserved) || !arraysEqualUnordered(
+          current.otherReservedSeats,
+          derived.otherReserved
+        ) || !arraysEqualUnordered(current.unavailableSeats, derived.unavailable);
+        console.log("\u{1F504} Firebase Data Changed?", {
+          hasChanged,
+          currentOtherReserved: current.otherReservedSeats,
+          newOtherReserved: derived.otherReserved
+        });
+        if (hasChanged) {
+          console.log("\u2705 Updating React state with new Firebase data");
+          snapshotRef.current = {
+            states: statesData,
+            loading: false,
+            error: null,
+            lastUpdated: Date.now(),
+            myReservedSeats: derived.myReserved,
+            otherReservedSeats: derived.otherReserved,
+            unavailableSeats: derived.unavailable
+          };
+          onStateChangeRef.current?.(statesData);
+          callback();
+        } else {
+          console.log("\u23ED\uFE0F No change detected, skipping update");
+        }
+      };
+      const handleError = (err) => {
+        snapshotRef.current = {
+          ...snapshotRef.current,
+          loading: false,
+          error: err
+        };
+        onErrorRef.current?.(err);
+        callback();
+      };
+      (0, import_database.onValue)(statesRef, handleValue, handleError);
+      return () => {
+        console.log("\u{1F525} Firebase Listener - Unsubscribing from:", `seatmaps/${seatMapId}/seat_states`);
+        (0, import_database.off)(statesRef);
+      };
+    },
+    [seatMapId, enabled]
+    // Don't include currentUserId - we use currentUserIdRef.current which is always up-to-date
+  );
+  const getSnapshot = (0, import_react.useCallback)(() => snapshotRef.current, []);
+  const getServerSnapshot = (0, import_react.useCallback)(() => INITIAL_SNAPSHOT, []);
+  const snapshot = (0, import_react.useSyncExternalStore)(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  );
+  return {
+    states: snapshot.states,
+    loading: snapshot.loading,
+    error: snapshot.error,
+    lastUpdated: snapshot.lastUpdated,
+    myReservedSeats: snapshot.myReservedSeats,
+    otherReservedSeats: snapshot.otherReservedSeats,
+    unavailableSeats: snapshot.unavailableSeats,
+    // Legacy alias
+    reservedSeats: snapshot.otherReservedSeats
+  };
+}
+
+// src/firebase/hooks/useFirebaseConfig.ts
+var import_react2 = require("react");
+var import_database2 = require("firebase/database");
+function useFirebaseConfig(options) {
+  const {
+    seatMapId,
+    enabled = true,
+    subscribeToChanges = false,
+    onConfigLoad,
+    onError
+  } = options;
+  const [config, setConfig] = (0, import_react2.useState)(null);
+  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const onConfigLoadRef = (0, import_react2.useRef)(onConfigLoad);
+  const onErrorRef = (0, import_react2.useRef)(onError);
+  onConfigLoadRef.current = onConfigLoad;
+  onErrorRef.current = onError;
+  const fetchConfig = (0, import_react2.useCallback)(async () => {
+    if (!seatMapId) return;
+    if (!isFirebaseInitialized()) {
+      setError(
+        new Error(
+          "Firebase not initialized. Call initializeFirebaseForViewer first."
+        )
+      );
+      setLoading(false);
+      return;
+    }
+    const db = getFirebaseDatabase();
+    const seatmapRef = (0, import_database2.ref)(db, `seatmaps/${seatMapId}`);
+    try {
+      setLoading(true);
+      setError(null);
+      const snapshot = await (0, import_database2.get)(seatmapRef);
+      const data = snapshot.val();
+      if (data) {
+        const converted = fromFirebaseSeatMap(data);
+        setConfig(converted);
+        onConfigLoadRef.current?.(converted);
+      } else {
+        setError(new Error(`Seat map ${seatMapId} not found in Firebase`));
+      }
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Unknown error");
+      setError(error2);
+      onErrorRef.current?.(error2);
+    } finally {
+      setLoading(false);
+    }
+  }, [seatMapId]);
+  (0, import_react2.useEffect)(() => {
+    if (!enabled || !seatMapId) {
+      setLoading(false);
+      return;
+    }
+    fetchConfig();
+    if (subscribeToChanges && isFirebaseInitialized()) {
+      const db = getFirebaseDatabase();
+      const metaRef = (0, import_database2.ref)(db, `seatmaps/${seatMapId}/meta/updated_at`);
+      let isFirstSnapshot = true;
+      let lastSeenTimestamp = null;
+      const handleUpdate = (snapshot) => {
+        if (isFirstSnapshot) {
+          isFirstSnapshot = false;
+          lastSeenTimestamp = snapshot.val();
+          return;
+        }
+        const currentTimestamp = snapshot.val();
+        if (snapshot.exists() && currentTimestamp !== lastSeenTimestamp) {
+          lastSeenTimestamp = currentTimestamp;
+          fetchConfig();
+        }
+      };
+      (0, import_database2.onValue)(metaRef, handleUpdate);
+      return () => {
+        (0, import_database2.off)(metaRef);
+      };
+    }
+  }, [seatMapId, enabled, subscribeToChanges]);
+  return {
+    config,
+    loading,
+    error,
+    refetch: fetchConfig
+  };
+}
+
+// src/firebase/hooks/useRealtimeSeatMap.ts
+function useRealtimeSeatMap(options) {
+  const {
+    seatMapId,
+    userId,
+    enabled = true,
+    subscribeToDesignChanges = false,
+    onConfigLoad,
+    onStateChange,
+    onError
+  } = options;
+  const {
+    config,
+    loading: configLoading,
+    error: configError,
+    refetch
+  } = useFirebaseConfig({
+    seatMapId,
+    enabled,
+    subscribeToChanges: subscribeToDesignChanges,
+    onConfigLoad,
+    onError
+  });
+  const {
+    states: seatStates,
+    loading: statesLoading,
+    error: statesError,
+    lastUpdated,
+    myReservedSeats,
+    otherReservedSeats,
+    unavailableSeats,
+    reservedSeats
+  } = useFirebaseSeatStates({
+    seatMapId,
+    currentUserId: userId,
+    enabled,
+    onStateChange,
+    onError
+  });
+  const loading = configLoading || statesLoading;
+  const error = configError || statesError;
+  return {
+    config,
+    loading,
+    error,
+    myReservedSeats,
+    otherReservedSeats,
+    unavailableSeats,
+    reservedSeats,
+    seatStates,
+    lastUpdated,
+    refetch
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_COLORS,
@@ -495,6 +832,7 @@ function createIndexUpdates(seatMapId, eventId, subEventId) {
   calculateAvailableSeats,
   calculateCapacity,
   calculateSeatPrice,
+  clearFirebaseInstance,
   cloneConfig,
   createDefaultConfig,
   createIndexUpdates,
@@ -508,10 +846,16 @@ function createIndexUpdates(seatMapId, eventId, subEventId) {
   fromFirebaseSeatMap,
   fromFirebaseState,
   generateId,
+  getFirebaseDatabase,
   getSelectedSeats,
   importConfigFromJSON,
+  initializeFirebaseForViewer,
+  isFirebaseInitialized,
   toFirebaseSeatMap,
   toFirebaseState,
   updateConfigTimestamp,
+  useFirebaseConfig,
+  useFirebaseSeatStates,
+  useRealtimeSeatMap,
   validateSeatMapConfig
 });