Feat: added on seat selection change event

src/components/workspace/elements/index.tsx

@@ -56,7 +56,11 @@ export const Element: React.FC<IElementProps> = ({
   }, [ref, consumer.mode]);
 
   const onClick = (e: any) => {
-    if (type === ElementType.Seat && consumer.mode === "user" && props.status && props.status !== SeatStatus.Available)
+    if (
+      consumer.mode === "user" &&
+      (type !== ElementType.Seat ||
+        (type === ElementType.Seat && props.status && props.status !== SeatStatus.Available))
+    )
       return;
     const selectedTool = store.getState().toolbar.selectedTool;
     if (selectedTool === Tool.Select && ref.current) {

src/hooks/events/index.ts

@@ -2,6 +2,7 @@ import { ISTKProps } from "@/types";
 import { default as useDeselection } from "./deselection";
 import { default as useDuplicate } from "./duplication";
 import { default as usePolyline } from "./polyline";
+import { default as useSeatSelectionChange } from "./seat-selection";
 import { default as useWorkspaceClick } from "./workspace-click";
 import { default as useWorkspaceLoad } from "./workspace-load";
 
@@ -15,4 +16,5 @@ export const useDesignerEvents = (props: ISTKProps) => {
 
 export const useUserEvents = (props: ISTKProps) => {
   useWorkspaceLoad(props);
+  useSeatSelectionChange(props);
 };

src/hooks/events/seat-selection.ts

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import { getDetailedSeat } from "@/components/workspace/elements";
+import { store } from "@/store";
+import { ISTKProps } from "@/types";
+
+const useSeatSelectionChange = (props: ISTKProps) => {
+  const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
+
+  useEffect(() => {
+    if (props.events?.onSeatSelectionChange) {
+      const { seats, categories, sections } = store.getState().editor;
+      const selectedSeats = [];
+      seats.forEach((seat) => {
+        if (selectedElementIds.includes(seat.id)) {
+          const category = categories?.find?.((c) => c.id === seat.category);
+          const section = sections?.find?.((s) => s.id === category?.section);
+          selectedSeats.push(getDetailedSeat(seat, category, section));
+        }
+      });
+      props.events.onSeatSelectionChange(selectedSeats);
+    }
+  }, [selectedElementIds]);
+};
+
+export default useSeatSelectionChange;

src/types/index.ts

@@ -26,6 +26,8 @@ export interface IEvents {
   onSeatHover?: (seat: IPopulatedSeat, coords: ICoordinates) => void;
   /** Only applicable in user mode */
   onSeatLeave?: (seat: IPopulatedSeat, coords: ICoordinates) => void;
+  /** Only applicable in user mode */
+  onSeatSelectionChange?: (seats: IPopulatedSeat[]) => void;
   onWorkspaceHover?: () => void;
   onSectionClick?: (section: ISection) => void;
   onExport?: (data: ISTKData) => void;