@zonetrix/shared 2.4.1 → 2.4.3

package/dist/index.mjs

@@ -59,6 +59,7 @@ function validateSeatMapConfig(config) {
   if (!config.colors) {
     warnings.push("Missing color configuration");
   } else {
+    const colors = config.colors;
     const requiredColors = [
       "canvasBackground",
       "stageColor",
@@ -69,7 +70,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}`);
       }
     });
@@ -129,10 +130,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)}`;
@@ -437,6 +438,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
+import { useSyncExternalStore, useCallback, useRef } from "react";
+import { ref, onValue, off } from "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 = useRef({ ...INITIAL_SNAPSHOT });
+  const onStateChangeRef = useRef(onStateChange);
+  const onErrorRef = useRef(onError);
+  const currentUserIdRef = useRef(currentUserId);
+  onStateChangeRef.current = onStateChange;
+  onErrorRef.current = onError;
+  currentUserIdRef.current = currentUserId;
+  const subscribe = 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 = 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();
+      };
+      onValue(statesRef, handleValue, handleError);
+      return () => {
+        console.log("\u{1F525} Firebase Listener - Unsubscribing from:", `seatmaps/${seatMapId}/seat_states`);
+        off(statesRef);
+      };
+    },
+    [seatMapId, enabled]
+    // Don't include currentUserId - we use currentUserIdRef.current which is always up-to-date
+  );
+  const getSnapshot = useCallback(() => snapshotRef.current, []);
+  const getServerSnapshot = useCallback(() => INITIAL_SNAPSHOT, []);
+  const snapshot = 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
+import { useState, useEffect, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { ref as ref2, get, onValue as onValue2, off as off2 } from "firebase/database";
+function useFirebaseConfig(options) {
+  const {
+    seatMapId,
+    enabled = true,
+    subscribeToChanges = false,
+    onConfigLoad,
+    onError
+  } = options;
+  const [config, setConfig] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const onConfigLoadRef = useRef2(onConfigLoad);
+  const onErrorRef = useRef2(onError);
+  onConfigLoadRef.current = onConfigLoad;
+  onErrorRef.current = onError;
+  const fetchConfig = useCallback2(async () => {
+    if (!seatMapId) return;
+    if (!isFirebaseInitialized()) {
+      setError(
+        new Error(
+          "Firebase not initialized. Call initializeFirebaseForViewer first."
+        )
+      );
+      setLoading(false);
+      return;
+    }
+    const db = getFirebaseDatabase();
+    const seatmapRef = ref2(db, `seatmaps/${seatMapId}`);
+    try {
+      setLoading(true);
+      setError(null);
+      const snapshot = await 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]);
+  useEffect(() => {
+    if (!enabled || !seatMapId) {
+      setLoading(false);
+      return;
+    }
+    fetchConfig();
+    if (subscribeToChanges && isFirebaseInitialized()) {
+      const db = getFirebaseDatabase();
+      const metaRef = ref2(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();
+        }
+      };
+      onValue2(metaRef, handleUpdate);
+      return () => {
+        off2(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
+  };
+}
 export {
   DEFAULT_COLORS,
   FirebasePaths,
@@ -444,6 +774,7 @@ export {
   calculateAvailableSeats,
   calculateCapacity,
   calculateSeatPrice,
+  clearFirebaseInstance,
   cloneConfig,
   createDefaultConfig,
   createIndexUpdates,
@@ -457,10 +788,16 @@ export {
   fromFirebaseSeatMap,
   fromFirebaseState,
   generateId,
+  getFirebaseDatabase,
   getSelectedSeats,
   importConfigFromJSON,
+  initializeFirebaseForViewer,
+  isFirebaseInitialized,
   toFirebaseSeatMap,
   toFirebaseState,
   updateConfigTimestamp,
+  useFirebaseConfig,
+  useFirebaseSeatStates,
+  useRealtimeSeatMap,
   validateSeatMapConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonetrix/shared",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "description": "Shared types and utilities for seat-map-studio packages",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -27,6 +27,10 @@
   ],
   "author": "",
   "license": "MIT",
+  "peerDependencies": {
+    "firebase": "^11.0.0 || ^12.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
   "devDependencies": {
     "tsup": "^8.0.1",
     "typescript": "^5.8.3"