iticket-seatingplan-dev 1.7.6 → 1.7.8

package/dist/components/HoverPopup.js

@@ -72,7 +72,7 @@ function HoverPopup(_ref) {
       opacity: show ? 1 : 0,
       transitionDelay: show ? "50ms, 0ms, 0ms" : "250ms, 0ms, 0ms",
       // a way to have smooth animation when hovering over the same row
-      transitionDuration: prevHovered !== null && prevHovered !== void 0 && prevHovered.r && prevHovered.r === (hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.r) ? "100ms, 150ms, 150ms" : "100ms, 50ms, 50ms"
+      transitionDuration: prevHovered !== null && prevHovered !== void 0 && prevHovered.infoVisible && prevHovered !== null && prevHovered !== void 0 && prevHovered.r && prevHovered.r === (hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.r) ? "100ms, 150ms, 150ms" : "100ms, 50ms, 50ms"
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "hover-popup-content"

package/dist/components/Map.js

@@ -79,10 +79,12 @@ function SeatMap(_ref) {
   const drawRef = (0, _react.useRef)(null);
   const popupRef = (0, _react.useRef)(null);
   const prevHovered = (0, _react.useRef)(null);
+  const hideTooltipTimeoutRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     prevHovered.current = hoveredSeat;
   }, [hoveredSeat]);
   const map = (0, _reactLeaflet.useMap)();
+  const isTouchScreen = (0, _utils.getIsTouchScreen)();
 
   // L.drawLocal.draw.toolbar.buttons.rectangle = "Box select";
 
@@ -176,6 +178,19 @@ function SeatMap(_ref) {
   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),
@@ -218,12 +233,19 @@ function SeatMap(_ref) {
     }
   }, [mode, map]);
   const seatsMap = (0, _react.useMemo)(() => new Map(seats.seats.map(s => [s.sId, s])), [seats.seats]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HoverPopup.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-tooltip",
+    style: {
+      opacity: clickedSeat ? 1 : 0,
+      top: clickedSeat ? clickedSeat.xy.y - clickedSeat.offset - 12 : -10000,
+      left: clickedSeat ? clickedSeat.xy.x : -10000
+    }
+  }, "Tap again to select"), /*#__PURE__*/_react.default.createElement(_HoverPopup.default, {
     hoveredSeat: hoveredSeat,
-    highlightedSeats: highlightedSeats && highlightedSeats.length > 0 ? highlightedSeats : null,
+    highlightedSeats: (highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0 ? highlightedSeats : null,
     mousePos: mousePos,
-    show: (hoveredSeat || (highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0) && !ticketPopupOpen && !pricingPopupOpen && !isDragging && isHoveringOnSeat,
-    availablePrices: highlightedSeats && highlightedSeats.length > 0 ? highlightedSeats.flatMap(s => {
+    show: ((hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.infoVisible) || (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,
@@ -430,6 +452,7 @@ function SeatMap(_ref) {
     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;
     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, {
@@ -458,7 +481,7 @@ function SeatMap(_ref) {
           }
 
           // orphan multi-select mode
-          if (seats.preventOrphanedSeats && desiredSeatQuantity > 0) {
+          if (isOrphanMode) {
             map.closePopup();
             if (s.s === _utils.statuses.USER_PENDING) {
               const newSeatsToRemove = (0, _utils.getAdjacentBookedSeats)(s, seatsMap);
@@ -470,10 +493,14 @@ function SeatMap(_ref) {
               }
               return;
             }
-            if (highlightedSeats.length > 0 && highlightedSeats.length === desiredSeatQuantity) {
-              if ((0, _utils.isTouchScreen)() && clickedSeat !== s.ssId) {
-                setClickedSeat(s.ssId);
+            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) {
@@ -481,6 +508,11 @@ function SeatMap(_ref) {
                     seat: s,
                     priceage: priceages[0]
                   })));
+                  setHighlightedSeats([]);
+                  setSelectedSeats([]);
+                  setHoveredSeat(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                    infoVisible: false
+                  }));
                 } else {
                   setSelectedSeats([...highlightedSeats]);
                   setPricingPopupOpen(true);
@@ -496,8 +528,17 @@ function SeatMap(_ref) {
 
           // single select mode
           if (mode === _utils.modes.SINGLE && hasSeatPrices) {
-            handleClickSeat(e, s);
-            return;
+            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 => {
@@ -515,45 +556,65 @@ function SeatMap(_ref) {
             }
           }
         },
-        mouseover: () => {
+        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(s);
-            setClickedSeat(s.ssId);
-            if (seats.preventOrphanedSeats && desiredSeatQuantity > 0 && s.s === _utils.statuses.UNSOLD && mode === _utils.modes.SINGLE) {
+            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: () => {
+        mouseout: async () => {
           if (greyedOutSeats.length > 0) {
             setGreyedOutSeats([]);
           }
           if (clickedSeat) {
             setClickedSeat(null);
           }
-          if (hoveredSeat || highlightedSeats) {
-            setTimeout(() => {
-              if (hoveredSeat) {
-                setHoveredSeat(prev => prev && prev === hoveredSeat ? null : prev);
+          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) {
-                setHighlightedSeats(prev => prev && prev === highlightedSeats ? [] : prev);
+              if ((highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.length) > 0) {
+                setHighlightedSeats([]);
               }
             }, 400);
           }
-          if (isHoveringOnSeat) {
-            setIsHoveringOnSeat(false);
-          }
         },
         mousemove: e => {
           setMousePos({
@@ -562,11 +623,7 @@ function SeatMap(_ref) {
           });
         }
       }
-    }, (0, _utils.isTouchScreen)() && /*#__PURE__*/_react.default.createElement(_reactLeaflet.Tooltip, {
-      className: "mobile-tooltip",
-      direction: "top",
-      offset: [0, height * 0.03 + -60]
-    }, "Tap again to select these seats"), s.s === _utils.statuses.UNSOLD && hasSeatPrices ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, {
+    }, 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", {
       className: "single-flexi"

package/dist/components/styles/gestureHandling.css

@@ -22,7 +22,7 @@
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 461;
+  z-index: 1010;
   pointer-events: none;
 }
 

package/dist/components/styles/index.css

@@ -1571,6 +1571,32 @@ svg.leaflet-image-layer.leaflet-interactive path {
   height: 0.875rem;
 }
 
+.mobile-tooltip {
+  pointer-events: none;
+  position: absolute;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 5px;
+  padding: 0.25rem 0.5rem;
+  transform: translate(-50%, -100%);
+  transition: opacity 0.1s ease-in-out;
+  z-index: 1005;
+  font-size: 0.75rem;
+  color: #333;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  width: max-content;
+}
+
+.mobile-tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  border: 5px solid transparent;
+  border-top-color: rgba(255, 255, 255, 0.9);
+  transform: translateX(-50%);
+}
+
 /* Printing */
 
 @media print {

package/dist/utils/helpers.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isTouchScreen = exports.groupSeatsByPriceSection = exports.getValidSeats = exports.getRowSection = exports.getRetryDelay = exports.getInitialColor = exports.getAdjacentBookedSeats = exports.createsOrphan = exports.canSelectSingleSeatGivenOrphanRules = exports.calculateCenterOfMap = exports.NZDollar = void 0;
+exports.groupSeatsByPriceSection = exports.getValidSeats = exports.getRowSection = exports.getRetryDelay = exports.getIsTouchScreen = exports.getInitialColor = exports.getAdjacentBookedSeats = exports.createsOrphan = exports.canSelectSingleSeatGivenOrphanRules = exports.calculateCenterOfMap = exports.NZDollar = void 0;
 var _enums = require("./enums");
-const isTouchScreen = () => {
+const getIsTouchScreen = () => {
   let hasTouchScreen = false;
   if (typeof window !== "undefined") {
     if ("maxTouchPoints" in window.navigator) {
@@ -20,7 +20,7 @@ const isTouchScreen = () => {
   }
   return hasTouchScreen;
 };
-exports.isTouchScreen = isTouchScreen;
+exports.getIsTouchScreen = getIsTouchScreen;
 const getInitialColor = (s, price, loading, disabled, selected, greyedOut) => {
   // selected state for multiselect
   if (selected) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "iticket-seatingplan-dev",
   "description": "Seating plan with FLEXi pricing",
   "author": "gedwyne",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "private": false,
   "keywords": [
     "iticket",