iticket-seatingplan-dev 1.7.8 → 1.8.0

package/dist/components/Map.js

@@ -9,9 +9,7 @@ require("leaflet-draw/dist/leaflet.draw.css");
 var _react = _interopRequireWildcard(require("react"));
 var _reactLeaflet = require("react-leaflet");
 var L = _interopRequireWildcard(require("leaflet"));
-var _reactLeafletDraw = require("react-leaflet-draw");
 var _gestureHandling2 = require("./gestureHandling");
-var _reactLeafletCustomControl = _interopRequireDefault(require("react-leaflet-custom-control"));
 var _encodedSvgs = require("./assets/encodedSvgs");
 var _utils = require("../utils");
 var _PriceButton = _interopRequireDefault(require("./PriceButton"));
@@ -19,8 +17,8 @@ var _Flexi = _interopRequireDefault(require("./Flexi"));
 var _CloseIcon = _interopRequireDefault(require("./icons/CloseIcon"));
 var _TicketIcon = _interopRequireDefault(require("./icons/TicketIcon"));
 var _FlexiIcon = _interopRequireDefault(require("./icons/FlexiIcon"));
-var _EditIcon = _interopRequireDefault(require("./icons/EditIcon"));
 var _HoverPopup = _interopRequireDefault(require("./HoverPopup"));
+var _Controls = _interopRequireDefault(require("./Controls"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -64,7 +62,6 @@ function SeatMap(_ref) {
     setInvalidSeatsPopupOpen,
     batchAddTicketsToCart
   } = _ref;
-  const [isLegendOpen, setIsLegendOpen] = (0, _react.useState)(false);
   const [isDragging, setIsDragging] = (0, _react.useState)(false);
   const [highlightedSeats, setHighlightedSeats] = (0, _react.useState)([]);
   const [greyedOutSeats, setGreyedOutSeats] = (0, _react.useState)([]);
@@ -79,11 +76,22 @@ function SeatMap(_ref) {
   const drawRef = (0, _react.useRef)(null);
   const popupRef = (0, _react.useRef)(null);
   const prevHovered = (0, _react.useRef)(null);
+  const resetTooltipTimeoutRef = (0, _react.useRef)(null);
   const hideTooltipTimeoutRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    prevHovered.current = hoveredSeat;
-  }, [hoveredSeat]);
   const map = (0, _reactLeaflet.useMap)();
+  const seatsMap = (0, _react.useMemo)(() => new Map(seats.seats.map(s => {
+    const isIcon = (!priceSectionIds || priceSectionIds.includes(s.psId)) && (s.s === _utils.statuses.WHEELCHAIR_ACCESS || s.s === _utils.statuses.USER_PENDING && s.m);
+    const latlng = (0, _utils.getSeatCenterLatLng)(s, isIcon, height);
+    const lat = s.r.includes("NORTH") ? (0, _utils.getNorthSeatLat)(s, height) : latlng.lat;
+    const seatCenter = {
+      lat,
+      lng: latlng.lng
+    };
+    return [s.sId, _objectSpread(_objectSpread({}, s), {}, {
+      center: seatCenter
+    })];
+  })), [seats.seats, height, priceSectionIds]);
+  const isOrphanMode = (seats === null || seats === void 0 ? void 0 : seats.preventOrphanedSeats) && desiredSeatQuantity > 0;
   const isTouchScreen = (0, _utils.getIsTouchScreen)();
 
   // L.drawLocal.draw.toolbar.buttons.rectangle = "Box select";
@@ -127,6 +135,9 @@ function SeatMap(_ref) {
       }
     }
   });
+  (0, _react.useEffect)(() => {
+    prevHovered.current = hoveredSeat;
+  }, [hoveredSeat]);
   (0, _react.useEffect)(() => {
     const keyboardHandler = e => {
       if (e.key === "Escape") {
@@ -174,37 +185,48 @@ function SeatMap(_ref) {
         window.removeEventListener("keydown", keyboardHandler);
       }
     };
-  }, [isFullScreen, ticketPopupOpen, mode]);
-  const getNorthSeatLat = seat => {
-    return height / 33.33 - height / 33.33 * seat.y * 0.0105 + 1.4;
-  };
-  const getSeatXy = e => {
-    const latlng = e.target.getLatLng();
-    const clickedSeatXy = map.latLngToContainerPoint(latlng);
-    return clickedSeatXy;
-  };
-  const getSeatRadius = e => {
-    const latlng = e.target.getLatLng();
-    const radius = e.target.getRadius();
-    const point1 = map.latLngToLayerPoint(latlng);
-    const point2 = map.latLngToLayerPoint([latlng.lat, latlng.lng + radius / 111320]); // Approx. conversion
-    const pixelRadius = Math.abs(point2.x - point1.x);
-    return pixelRadius;
-  };
-  const getSeatCenterLatLng = (seat, isIcon) => {
-    return {
-      lat: height * 0.05 - seat.y / (height > 800 ? height > 999 ? isIcon ? 3.5 : 3.45 : 3.3 : 3.35) - (height > 800 ? height > 999 ? height * 0.0201 : height * 0.0198 : height > 587 ? height * 0.0201 : height > 399 ? height * 0.02035 : height * 0.0207),
-      lng: seat.x * 0.3 + 0.15
+  }, [isFullScreen, ticketPopupOpen, mode, canMultiSelect, map, pricingPopupOpen, setMode, setPricingPopupOpen, setSelectedSeats, setIsFullScreen]);
+
+  // gesture-handling plugin disallows scroll zooming and touch panning,
+  // to allow users to scroll past the map when it's not full screen.
+  (0, _react.useEffect)(() => {
+    if (!isFullScreen) {
+      map.addHandler("gestureHandling", _gestureHandling2.GestureHandling);
+      // @ts-expect-error works
+      map.gestureHandling.enable();
+    }
+  }, [map, isFullScreen]);
+  (0, _react.useEffect)(() => {
+    if (mode === _utils.modes.SINGLE) {
+      map.dragging.enable();
+    } else {
+      map.dragging.disable();
+    }
+  }, [mode, map]);
+  (0, _react.useEffect)(() => {
+    const resetTooltipTimeout = resetTooltipTimeoutRef.current;
+    const hideTooltipTimeout = hideTooltipTimeoutRef.current;
+    return () => {
+      if (resetTooltipTimeout) {
+        clearTimeout(resetTooltipTimeout);
+      }
+      if (hideTooltipTimeout) {
+        clearTimeout(hideTooltipTimeout);
+      }
     };
-  };
+  }, []);
   const handleDrawBox = v => {
     var _seats$seats, _drawLayersRef$curren;
     if (!canMultiSelect || !(v.layer instanceof L.Rectangle)) return;
     const seatsToBook = [];
     const boxBounds = v.layer.getBounds();
     seats === null || seats === void 0 || (_seats$seats = seats.seats) === null || _seats$seats === void 0 || _seats$seats.forEach(seat => {
-      const seatCenter = getSeatCenterLatLng(seat, false);
-      const latlng = [seat.r.includes("NORTH") ? getNorthSeatLat(seat) : seatCenter.lat, seatCenter.lng];
+      var _seatsMap$get;
+      const seatCenter = ((_seatsMap$get = seatsMap.get(seat.sId)) === null || _seatsMap$get === void 0 ? void 0 : _seatsMap$get.center) || {
+        lat: seat.y,
+        lng: seat.x
+      };
+      const latlng = [seatCenter.lat, seatCenter.lng];
       if (boxBounds.contains(latlng) && !seatsToBook.find(s => s.ssId === seat.ssId) && seat.s === _utils.statuses.UNSOLD) {
         seatsToBook.push(seat);
       }
@@ -215,249 +237,230 @@ function SeatMap(_ref) {
     }
     (_drawLayersRef$curren = drawLayersRef.current) === null || _drawLayersRef$curren === void 0 || _drawLayersRef$curren.clearLayers();
   };
+  const handleHighlightSeats = (0, _react.useCallback)((e, s) => {
+    if (s.s === _utils.statuses.UNSOLD && mode === _utils.modes.SINGLE) {
+      const seatsToBook = (0, _utils.getValidSeats)(s, seatsMap, desiredSeatQuantity);
+      if (seatsToBook.valid) {
+        setHighlightedSeats(seatsToBook.seats);
+      } else {
+        setGreyedOutSeats(seatsToBook.seats);
+        setHighlightedSeats([]);
+      }
+    } else if (highlightedSeats.length > 0) {
+      setHighlightedSeats([]);
+    }
+  }, [mode, seatsMap, desiredSeatQuantity, highlightedSeats.length]);
+  const onClickSeat = (e, s, isSingleFlexi, hasSeatPrices) => {
+    if (resetTooltipTimeoutRef.current) {
+      clearTimeout(resetTooltipTimeoutRef.current);
+    }
+    if (hideTooltipTimeoutRef.current) {
+      clearTimeout(hideTooltipTimeoutRef.current);
+    }
+    if (isTouchScreen) {
+      setMousePos({
+        x: e.containerPoint.x,
+        y: e.containerPoint.y
+      });
+    }
+    if (s.loading) {
+      return;
+    }
 
-  // gesture-handling plugin disallows scroll zooming and touch panning,
-  // to allow users to scroll past the map when it's not full screen.
-  (0, _react.useEffect)(() => {
-    if (!isFullScreen) {
-      map.addHandler("gestureHandling", _gestureHandling2.GestureHandling);
-      // @ts-ignore
-      map.gestureHandling.enable();
+    // pos multi-select mode
+    if (mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE || mode === _utils.modes.DRAW || selectedSeats.length > 0) {
+      map.closePopup();
+      return;
     }
-  }, [map, isFullScreen]);
-  (0, _react.useEffect)(() => {
-    if (mode === _utils.modes.SINGLE) {
-      map.dragging.enable();
-    } else {
-      map.dragging.disable();
+
+    // orphan multi-select mode
+    if (isOrphanMode) {
+      map.closePopup();
+      if (s.s === _utils.statuses.USER_PENDING) {
+        const newSeatsToRemove = (0, _utils.getAdjacentBookedSeats)(s, seatsMap);
+        if (newSeatsToRemove.length === 1) {
+          handleClickSeat(e, s);
+        } else {
+          setSeatsToRemove(newSeatsToRemove);
+          setRemoveMultipleSeatsPopupOpen(true);
+        }
+        return;
+      }
+      if (isTouchScreen && (clickedSeat === null || clickedSeat === void 0 ? void 0 : clickedSeat.ssId) !== s.ssId) {
+        setClickedSeat(_objectSpread(_objectSpread({}, s), {}, {
+          offset: (0, _utils.getSeatRadius)(e, map),
+          xy: (0, _utils.getSeatXy)(e, map)
+        }));
+        handleHighlightSeats(e, s);
+        setIsHoveringOnSeat(true);
+        setHoveredSeat(_objectSpread(_objectSpread({}, s), {}, {
+          infoVisible: true
+        }));
+        return;
+      }
+      if (highlightedSeats.length === desiredSeatQuantity) {
+        setClickedSeat(null);
+        const groupedSeats = (0, _utils.groupSeatsByPriceSection)(highlightedSeats, seats.pricing, priceSectionIds);
+        const priceages = Object.values(groupedSeats).flatMap(group => group.priceages.map(pa => pa.priceage));
+        if (priceages.length === 1 && (priceages[0].q === null || priceages[0].q >= desiredSeatQuantity) && !isSingleFlexi) {
+          batchAddTicketsToCart(highlightedSeats.map(s => ({
+            seat: s,
+            priceage: priceages[0]
+          })));
+          setHighlightedSeats([]);
+          setSelectedSeats([]);
+          setHoveredSeat(prev => _objectSpread(_objectSpread({}, prev), {}, {
+            infoVisible: false
+          }));
+        } else {
+          setSelectedSeats([...highlightedSeats]);
+          setPricingPopupOpen(true);
+        }
+      } else if (greyedOutSeats.some(gs => gs.ssId === s.ssId)) {
+        setInvalidSeatsPopupOpen(true);
+      }
+      return;
     }
-  }, [mode, map]);
-  const seatsMap = (0, _react.useMemo)(() => new Map(seats.seats.map(s => [s.sId, s])), [seats.seats]);
+
+    // single select mode
+    if (mode === _utils.modes.SINGLE && hasSeatPrices) {
+      handleClickSeat(e, s);
+    }
+  };
+  const onMouseDown = (0, _react.useCallback)((s, hasSeatPrices) => {
+    if ((mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE) && canMultiSelect && hasSeatPrices && !selectedSeats.find(seat => seat.ssId === s.ssId) && s.s === (mode === _utils.modes.DRAG ? _utils.statuses.UNSOLD : _utils.statuses.USER_PENDING)) {
+      setSelectedSeats(prev => [...prev, s]);
+    }
+  }, [mode, canMultiSelect, selectedSeats, setSelectedSeats]);
+  const onHover = (0, _react.useCallback)((e, s, hasSeatPrices) => {
+    if (resetTooltipTimeoutRef.current) {
+      clearTimeout(resetTooltipTimeoutRef.current);
+    }
+    if (hideTooltipTimeoutRef.current) {
+      clearTimeout(hideTooltipTimeoutRef.current);
+    }
+    if ((mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE) && isDragging && canMultiSelect && hasSeatPrices && !selectedSeats.find(seat => seat.ssId === s.ssId) && s.s === (mode === _utils.modes.DRAG ? _utils.statuses.UNSOLD : _utils.statuses.USER_PENDING)) {
+      setSelectedSeats(prev => [...prev, s]);
+      return;
+    }
+    setIsHoveringOnSeat(true);
+    setHoveredSeat(_objectSpread(_objectSpread({}, s), {}, {
+      infoVisible: true
+    }));
+    if (isOrphanMode) {
+      handleHighlightSeats(e, s);
+    }
+  }, [mode, isOrphanMode, isDragging, canMultiSelect, selectedSeats, handleHighlightSeats, setSelectedSeats]);
+  const onMouseOut = (0, _react.useCallback)(() => {
+    if (greyedOutSeats.length > 0) {
+      setGreyedOutSeats([]);
+    }
+    if (clickedSeat) {
+      setClickedSeat(null);
+    }
+    if (isHoveringOnSeat) {
+      hideTooltipTimeoutRef.current = setTimeout(() => {
+        setIsHoveringOnSeat(false);
+      }, isTouchScreen ? 400 : 0);
+    }
+    if (hoveredSeat !== null && hoveredSeat !== void 0 && hoveredSeat.infoVisible || (highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0) {
+      {
+        resetTooltipTimeoutRef.current = setTimeout(() => {
+          if (hoveredSeat !== null && hoveredSeat !== void 0 && hoveredSeat.infoVisible) {
+            setHoveredSeat(prev => _objectSpread(_objectSpread({}, prev), {}, {
+              infoVisible: false
+            }));
+          }
+          if ((highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0) {
+            setHighlightedSeats([]);
+          }
+        }, 400);
+      }
+    }
+  }, [greyedOutSeats, clickedSeat, isHoveringOnSeat, hoveredSeat, highlightedSeats, isTouchScreen]);
+  const onMouseMove = e => {
+    setMousePos({
+      x: e.containerPoint.x,
+      y: e.containerPoint.y
+    });
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "mobile-tooltip",
     style: {
-      opacity: clickedSeat ? 1 : 0,
+      opacity: clickedSeat && (highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0 ? 1 : 0,
       top: clickedSeat ? clickedSeat.xy.y - clickedSeat.offset - 12 : -10000,
-      left: clickedSeat ? clickedSeat.xy.x : -10000
+      left: clickedSeat ? clickedSeat.xy.x : -10000,
+      transitionDuration: clickedSeat ? "100ms" : "0ms"
     }
   }, "Tap again to select"), /*#__PURE__*/_react.default.createElement(_HoverPopup.default, {
     hoveredSeat: hoveredSeat,
     highlightedSeats: (highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0 ? highlightedSeats : null,
     mousePos: mousePos,
-    show: ((hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.infoVisible) || (highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0) && !ticketPopupOpen && !pricingPopupOpen && !isDragging && isHoveringOnSeat,
+    show: ((hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.infoVisible) && !isOrphanMode || (highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0) && !ticketPopupOpen && !pricingPopupOpen && !isDragging && isHoveringOnSeat,
     availablePrices: (highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0 ? highlightedSeats.flatMap(s => {
       var _seats$pricing;
       return ((_seats$pricing = seats.pricing) === null || _seats$pricing === void 0 ? void 0 : _seats$pricing.filter(p => p.psId === s.psId && (!priceSectionIds || priceSectionIds.includes(p.psId)) && (p.q === null || p.q > 0))) || [];
     }) : hoveredSeat ? ((_seats$pricing2 = seats.pricing) === null || _seats$pricing2 === void 0 ? void 0 : _seats$pricing2.filter(p => p.psId === hoveredSeat.psId && (!priceSectionIds || priceSectionIds.includes(p.psId)) && (p.q === null || p.q > 0))) || [] : undefined,
-    prevHovered: prevHovered.current
-  }), seats.preventOrphanedSeats && /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
-    position: "topright"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "extra-controls seat-quantity-control"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    title: "Quantity of seats to book",
-    onClick: () => {
-      setSelectQuantityPopupOpen(prev => !prev);
-    },
-    className: "leaflet-control-seat-quantity"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Selecting ", desiredSeatQuantity, " ", desiredSeatQuantity === 1 ? "seat" : "seats"), /*#__PURE__*/_react.default.createElement(_EditIcon.default, {
-    height: "16px",
-    width: "16px",
-    strokeWidth: "2"
-  })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
-    position: "bottomright"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "legendBox"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "legend-header"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "legend-button ".concat(isLegendOpen ? "expanded" : ""),
-    onClick: () => setIsLegendOpen(!isLegendOpen)
-  }, /*#__PURE__*/_react.default.createElement("p", null, isLegendOpen ? "LEGEND:" : "VIEW LEGEND")), isLegendOpen && /*#__PURE__*/_react.default.createElement("button", {
-    className: "close-button",
-    onClick: () => setIsLegendOpen(false)
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _encodedSvgs.closeIcon,
-    alt: "close"
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "legend-contents ".concat(isLegendOpen ? "expanded" : "")
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "legend-item"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "legend-symbol legend-available"
-  }), /*#__PURE__*/_react.default.createElement("p", null, "available"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "legend-item"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "legend-symbol legend-sold"
-  }), /*#__PURE__*/_react.default.createElement("p", null, "sold"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "legend-item"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "legend-symbol legend-in-cart"
-  }), /*#__PURE__*/_react.default.createElement("p", null, "in cart"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "legend-item"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _encodedSvgs.wheelchairIcon,
-    width: 15,
-    height: 15
-  }), /*#__PURE__*/_react.default.createElement("p", null, "wheelchair"))), ((_seats$seats2 = seats.seats) === null || _seats$seats2 === void 0 ? void 0 : _seats$seats2.filter(seat => seat.m).length) > 0 ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "legend-item"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _encodedSvgs.userIcon,
-    width: 15,
-    height: 15
-  }), /*#__PURE__*/_react.default.createElement("p", null, "membership seats"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
-    position: "topleft"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "extra-controls"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    title: "Re-centre Seating Plan",
-    onClick: () => map.fitBounds(bounds),
-    className: "leaflet-control-zoom-in"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/fit-icon.jpg",
-    style: {
-      height: "17px"
-    }
-  })), /*#__PURE__*/_react.default.createElement("button", {
-    title: "Reload Seating Plan",
-    disabled: isReloading,
-    onClick: () => {
-      initialFetch(true);
-      map.fitBounds(bounds);
-    },
-    className: "leaflet-control-zoom-in reload-seating-plan",
-    style: {
-      background: isReloading ? "rgb(0, 230, 64)" : undefined
-    }
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    className: isReloading ? "rotate" : "",
-    src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/refresh.png",
-    style: {
-      height: "17px"
-    }
-  })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
-    position: "topleft"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "extra-controls full-screen-control"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    title: isFullScreen ? "Collapse Seating Plan" : "Expand Seating Plan",
-    onClick: () => {
-      setIsFullScreen(prev => !prev);
-    },
-    className: "leaflet-control-zoom-in"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: isFullScreen ? _encodedSvgs.collapseIcon : _encodedSvgs.expandIcon,
-    style: {
-      height: "24px"
-    }
-  })))), canMultiSelect && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
-    position: "bottomleft"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "extra-controls multi-select-control"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "drag-select"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    title: "Drag select",
-    onClick: () => {
-      var _drawRef$current5;
-      (_drawRef$current5 = drawRef.current) === null || _drawRef$current5 === void 0 || _drawRef$current5._toolbars.draw.disable();
-      setMode(prev => prev === _utils.modes.DRAG ? _utils.modes.SINGLE : _utils.modes.DRAG);
-    },
-    className: "leaflet-control-zoom-in drag-button"
-  }, /*#__PURE__*/_react.default.createElement("span", null)), /*#__PURE__*/_react.default.createElement("ul", {
-    className: "leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom cancel-button",
-    style: {
-      display: mode === _utils.modes.DRAG ? "block" : "none"
-    }
-  }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
-    href: "#",
-    onClick: e => {
-      e.preventDefault();
-      setMode(_utils.modes.SINGLE);
-    }
-  }, "Cancel")))), (bookedSeats.length > 0 || mode === _utils.modes.REMOVE) && /*#__PURE__*/_react.default.createElement("div", {
-    className: "remove-seats"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    title: "Remove seats",
-    onClick: () => {
-      var _drawRef$current6;
-      (_drawRef$current6 = drawRef.current) === null || _drawRef$current6 === void 0 || _drawRef$current6._toolbars.draw.disable();
-      setMode(_utils.modes.REMOVE);
-    },
-    className: "leaflet-control-zoom-in remove-button"
-  }, /*#__PURE__*/_react.default.createElement("span", null)), /*#__PURE__*/_react.default.createElement("ul", {
-    className: "leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom cancel-button",
-    style: {
-      display: mode === _utils.modes.REMOVE ? "block" : "none"
-    }
-  }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
-    href: "#",
-    onClick: e => {
-      e.preventDefault();
-      setMode(_utils.modes.SINGLE);
-    }
-  }, "Cancel")))), /*#__PURE__*/_react.default.createElement("button", {
-    title: "Single select",
-    onClick: () => {
-      var _drawRef$current7;
-      (_drawRef$current7 = drawRef.current) === null || _drawRef$current7 === void 0 || _drawRef$current7._toolbars.draw.disable();
-      setMode(_utils.modes.SINGLE);
-    },
-    className: "leaflet-control-zoom-in single-button"
-  }, /*#__PURE__*/_react.default.createElement("span", null)))), /*#__PURE__*/_react.default.createElement(_reactLeaflet.FeatureGroup, {
-    ref: drawLayersRef
-  }, /*#__PURE__*/_react.default.createElement(_reactLeafletDraw.EditControl, {
-    position: "bottomleft",
-    onCreated: handleDrawBox,
-    onDrawStart: () => {
-      setMode(_utils.modes.DRAW);
-    },
-    onDrawStop: () => {
-      setMode(prev => prev === _utils.modes.DRAW ? _utils.modes.SINGLE : prev);
-    },
-    draw: {
-      rectangle: true,
-      circle: false,
-      polyline: false,
-      polygon: false,
-      marker: false,
-      circlemarker: false
-    },
-    edit: {
-      edit: false,
-      remove: false
-    },
-    onMounted: drawInstance => {
-      drawRef.current = drawInstance;
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
-    position: "topright"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    title: "Close full screen",
-    onClick: () => setIsFullScreen(false),
-    className: "full-screen-close-button ".concat(isFullScreen ? "show" : "")
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _encodedSvgs.closeIcon,
-    style: {
-      height: "24px"
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
-    url: seats.background,
+    prevHovered: prevHovered.current,
+    isTouchScreen: isTouchScreen
+  }), /*#__PURE__*/_react.default.createElement(_Controls.default, {
+    preventOrphanedSeats: seats === null || seats === void 0 ? void 0 : seats.preventOrphanedSeats,
+    bounds: bounds,
+    setSelectQuantityPopupOpen: setSelectQuantityPopupOpen,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen,
+    mode: mode,
+    setMode: setMode,
+    drawRef: drawRef,
+    drawLayersRef: drawLayersRef,
+    handleDrawBox: handleDrawBox,
+    canMultiSelect: canMultiSelect,
+    desiredSeatQuantity: desiredSeatQuantity,
+    onReload: initialFetch,
+    isReloading: isReloading,
+    hasMembershipSeats: (seats === null || seats === void 0 || (_seats$seats2 = seats.seats) === null || _seats$seats2 === void 0 ? void 0 : _seats$seats2.filter(seat => seat.m).length) > 0,
+    hasBookedSeats: (bookedSeats === null || bookedSeats === void 0 ? void 0 : bookedSeats.length) > 0
+  }), /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
+    url: seats === null || seats === void 0 ? void 0 : seats.background,
     bounds: [[0, 0], [height * 0.03, width * 0.03]],
     zIndex: 10
   }), seats && seats.seats && seats.seats.map((s, i) => {
-    var _seats$pricing3, _chosenSeat$seat, _chosenSeat$seat2, _chosenSeat$seat3;
-    const isIcon = (!priceSectionIds || priceSectionIds.includes(s.psId)) && (s.s === _utils.statuses.WHEELCHAIR_ACCESS || s.s === _utils.statuses.USER_PENDING && s.m);
-    const seatCenter = getSeatCenterLatLng(s, isIcon);
+    var _seatsMap$get2, _seats$pricing3, _chosenSeat$seat, _chosenSeat$seat2, _chosenSeat$seat3;
+    const seatCenter = ((_seatsMap$get2 = seatsMap.get(s.sId)) === null || _seatsMap$get2 === void 0 ? void 0 : _seatsMap$get2.center) || {
+      lat: s.y,
+      lng: s.x
+    };
     const seatPrices = ((_seats$pricing3 = seats.pricing) === null || _seats$pricing3 === void 0 ? void 0 : _seats$pricing3.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === s.psId)) || [];
     const hasSeatPrices = (seatPrices === null || seatPrices === void 0 ? void 0 : seatPrices.length) > 0;
     const isSingleFlexi = seatPrices.length === 1 && !!seatPrices[0].pMax && !!seatPrices[0].pMin && seatPrices[0].pMax > seatPrices[0].pMin;
-    const isOrphanMode = seats.preventOrphanedSeats && desiredSeatQuantity > 0;
+    const eventHandlers = {
+      click: e => {
+        onClickSeat(e, s, isSingleFlexi, hasSeatPrices);
+      },
+      popupopen: popup => {
+        setTicketPopupOpen(true);
+        popupRef.current = popup;
+      },
+      popupclose: () => {
+        setTicketPopupOpen(false);
+        popupRef.current = null;
+      },
+      mousedown: () => {
+        onMouseDown(s, hasSeatPrices);
+      },
+      mouseout: onMouseOut
+    };
+    if (!isTouchScreen) {
+      eventHandlers.mouseover = e => {
+        onHover(e, s, hasSeatPrices);
+      };
+      eventHandlers.mousemove = onMouseMove;
+    }
     return /*#__PURE__*/_react.default.createElement("div", {
       key: i
     }, (s.loading || ticketPopupOpen && (chosenSeat === null || chosenSeat === void 0 || (_chosenSeat$seat = chosenSeat.seat) === null || _chosenSeat$seat === void 0 ? void 0 : _chosenSeat$seat.ssId) === s.ssId) && /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
       url: "https://iticketseatingplan.blob.core.windows.net/embed/static/media/rippleload.08e6a08dd832819226ef.gif",
-      bounds: [[(s.r.includes("NORTH") ? getNorthSeatLat(s) : seatCenter.lat) - 0.11, seatCenter.lng - 0.11], [(s.r.includes("NORTH") ? getNorthSeatLat(s) : seatCenter.lat) + 0.11, seatCenter.lng + 0.11]],
+      bounds: [[seatCenter.lat - 0.11, seatCenter.lng - 0.11], [seatCenter.lat + 0.11, seatCenter.lng + 0.11]],
       opacity: s.loading || ticketPopupOpen && (chosenSeat === null || chosenSeat === void 0 || (_chosenSeat$seat2 = chosenSeat.seat) === null || _chosenSeat$seat2 === void 0 ? void 0 : _chosenSeat$seat2.ssId) === s.ssId ? 100 : 0,
       zIndex: 10
     }), !priceSectionIds || priceSectionIds.includes(s.psId) ? s.s === _utils.statuses.WHEELCHAIR_ACCESS ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
@@ -469,160 +472,10 @@ function SeatMap(_ref) {
       bounds: [[seatCenter.lat - 0.11, seatCenter.lng - 0.15], [seatCenter.lat + 0.11, seatCenter.lng + 0.15]],
       zIndex: 10
     }) : /*#__PURE__*/_react.default.createElement(_reactLeaflet.Circle, {
-      center: [s.r.includes("NORTH") ? getNorthSeatLat(s) : seatCenter.lat, seatCenter.lng],
-      pathOptions: (0, _utils.getInitialColor)(s, price, s.loading || ticketPopupOpen && (chosenSeat === null || chosenSeat === void 0 || (_chosenSeat$seat3 = chosenSeat.seat) === null || _chosenSeat$seat3 === void 0 ? void 0 : _chosenSeat$seat3.ssId) === s.ssId, !hasSeatPrices, selectedSeats.some(selectedSeat => selectedSeat.ssId === s.ssId) || highlightedSeats.some(hs => hs.ssId === s.ssId), greyedOutSeats.some(gs => gs.ssId === s.ssId)),
+      center: [seatCenter.lat, seatCenter.lng],
+      pathOptions: (0, _utils.getInitialColor)(s, price, s.loading || ticketPopupOpen && (chosenSeat === null || chosenSeat === void 0 || (_chosenSeat$seat3 = chosenSeat.seat) === null || _chosenSeat$seat3 === void 0 ? void 0 : _chosenSeat$seat3.ssId) === s.ssId, !hasSeatPrices, (selectedSeats.some(selectedSeat => selectedSeat.ssId === s.ssId) || highlightedSeats.some(hs => hs.ssId === s.ssId)) && isHoveringOnSeat, greyedOutSeats.some(gs => gs.ssId === s.ssId)),
       radius: 12000,
-      eventHandlers: {
-        click: e => {
-          // pos multi-select mode
-          if (mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE || mode === _utils.modes.DRAW || selectedSeats.length > 0) {
-            map.closePopup();
-            return;
-          }
-
-          // orphan multi-select mode
-          if (isOrphanMode) {
-            map.closePopup();
-            if (s.s === _utils.statuses.USER_PENDING) {
-              const newSeatsToRemove = (0, _utils.getAdjacentBookedSeats)(s, seatsMap);
-              if (newSeatsToRemove.length === 1) {
-                handleClickSeat(e, s);
-              } else {
-                setSeatsToRemove(newSeatsToRemove);
-                setRemoveMultipleSeatsPopupOpen(true);
-              }
-              return;
-            }
-            if (highlightedSeats.length === desiredSeatQuantity) {
-              if (isTouchScreen && (clickedSeat === null || clickedSeat === void 0 ? void 0 : clickedSeat.ssId) !== s.ssId) {
-                setClickedSeat(_objectSpread(_objectSpread({}, s), {}, {
-                  offset: getSeatRadius(e),
-                  xy: getSeatXy(e)
-                }));
-              } else {
-                setClickedSeat(null);
-                const groupedSeats = (0, _utils.groupSeatsByPriceSection)(highlightedSeats, seats.pricing, priceSectionIds);
-                const priceages = Object.values(groupedSeats).flatMap(group => group.priceages.map(pa => pa.priceage));
-                if (priceages.length === 1 && (priceages[0].q === null || priceages[0].q >= desiredSeatQuantity) && !isSingleFlexi) {
-                  batchAddTicketsToCart(highlightedSeats.map(s => ({
-                    seat: s,
-                    priceage: priceages[0]
-                  })));
-                  setHighlightedSeats([]);
-                  setSelectedSeats([]);
-                  setHoveredSeat(prev => _objectSpread(_objectSpread({}, prev), {}, {
-                    infoVisible: false
-                  }));
-                } else {
-                  setSelectedSeats([...highlightedSeats]);
-                  setPricingPopupOpen(true);
-                }
-              }
-              return;
-            }
-            if (greyedOutSeats.some(gs => gs.ssId === s.ssId)) {
-              setInvalidSeatsPopupOpen(true);
-            }
-            return;
-          }
-
-          // single select mode
-          if (mode === _utils.modes.SINGLE && hasSeatPrices) {
-            if (isTouchScreen && (clickedSeat === null || clickedSeat === void 0 ? void 0 : clickedSeat.ssId) !== s.ssId && mode === _utils.modes.SINGLE && s.s === _utils.statuses.UNSOLD && seatPrices.length === 1 && !isSingleFlexi) {
-              setClickedSeat(_objectSpread(_objectSpread({}, s), {}, {
-                offset: getSeatRadius(e),
-                xy: getSeatXy(e)
-              }));
-              map.closePopup();
-            } else {
-              setClickedSeat(null);
-              handleClickSeat(e, s);
-              return;
-            }
-          }
-        },
-        popupopen: popup => {
-          setTicketPopupOpen(true);
-          popupRef.current = popup;
-        },
-        popupclose: () => {
-          setTicketPopupOpen(false);
-          popupRef.current = null;
-        },
-        mousedown: () => {
-          if ((mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE) && canMultiSelect && hasSeatPrices) {
-            if (!selectedSeats.find(seat => seat.ssId === s.ssId) && s.s === (mode === _utils.modes.DRAG ? _utils.statuses.UNSOLD : _utils.statuses.USER_PENDING)) {
-              setSelectedSeats(prev => [...prev, s]);
-            }
-          }
-        },
-        mouseover: e => {
-          if (hideTooltipTimeoutRef.current) {
-            clearTimeout(hideTooltipTimeoutRef.current);
-          }
-          if ((mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE) && isDragging && canMultiSelect && hasSeatPrices) {
-            if (!selectedSeats.find(seat => seat.ssId === s.ssId) && s.s === (mode === _utils.modes.DRAG ? _utils.statuses.UNSOLD : _utils.statuses.USER_PENDING)) {
-              setSelectedSeats(prev => [...prev, s]);
-            }
-          } else {
-            setIsHoveringOnSeat(true);
-            setHoveredSeat(_objectSpread(_objectSpread({}, s), {}, {
-              infoVisible: true
-            }));
-            if (isOrphanMode && s.s === _utils.statuses.UNSOLD && mode === _utils.modes.SINGLE) {
-              const seatsToBook = (0, _utils.getValidSeats)(s, seatsMap, desiredSeatQuantity);
-              if (seatsToBook.valid) {
-                setHighlightedSeats(seatsToBook.seats);
-                if (isTouchScreen && (clickedSeat === null || clickedSeat === void 0 ? void 0 : clickedSeat.ssId) !== s.ssId && !isHoveringOnSeat) {
-                  setClickedSeat(_objectSpread(_objectSpread({}, s), {}, {
-                    offset: getSeatRadius(e),
-                    xy: getSeatXy(e)
-                  }));
-                }
-              } else if (s.s === _utils.statuses.UNSOLD && mode === _utils.modes.SINGLE && isTouchScreen && (clickedSeat === null || clickedSeat === void 0 ? void 0 : clickedSeat.ssId) !== s.ssId && !isHoveringOnSeat && seatPrices.length === 1 && !isSingleFlexi) {
-                setClickedSeat(_objectSpread(_objectSpread({}, s), {}, {
-                  offset: getSeatRadius(e),
-                  xy: getSeatXy(e)
-                }));
-              } else {
-                setGreyedOutSeats(seatsToBook.seats);
-                setHighlightedSeats([]);
-              }
-            } else if (highlightedSeats.length > 0) {
-              setHighlightedSeats([]);
-            }
-          }
-        },
-        mouseout: async () => {
-          if (greyedOutSeats.length > 0) {
-            setGreyedOutSeats([]);
-          }
-          if (clickedSeat) {
-            setClickedSeat(null);
-          }
-          if (isHoveringOnSeat) {
-            setIsHoveringOnSeat(false);
-          }
-          if (hoveredSeat !== null && hoveredSeat !== void 0 && hoveredSeat.infoVisible || (highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0) {
-            hideTooltipTimeoutRef.current = setTimeout(() => {
-              if (hoveredSeat !== null && hoveredSeat !== void 0 && hoveredSeat.infoVisible) {
-                setHoveredSeat(prev => _objectSpread(_objectSpread({}, prev), {}, {
-                  infoVisible: false
-                }));
-              }
-              if ((highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0) {
-                setHighlightedSeats([]);
-              }
-            }, 400);
-          }
-        },
-        mousemove: e => {
-          setMousePos({
-            x: e.containerPoint.x,
-            y: e.containerPoint.y
-          });
-        }
-      }
+      eventHandlers: eventHandlers
     }, s.s === _utils.statuses.UNSOLD && hasSeatPrices ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, {
       className: "ticket-popup popup-".concat(s.sId)
     }, isSingleFlexi ? /*#__PURE__*/_react.default.createElement("div", {