iticket-seatingplan-dev 1.7.1 → 1.7.3

package/dist/components/Flexi.js

@@ -16,9 +16,13 @@ function Flexi(_ref) {
     buttonText,
     onConfirm,
     isOpen,
-    panMap
+    panMap,
+    showCheckbox,
+    checkboxText,
+    initialChecked
   } = _ref;
   const [value, setValue] = (0, _react.useState)((_price$p = price.p) !== null && _price$p !== void 0 ? _price$p : price.pMin);
+  const [checked, setChecked] = (0, _react.useState)(initialChecked ? true : false);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "flexi-popup-content"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -41,10 +45,19 @@ function Flexi(_ref) {
     onChange: e => setValue(parseInt(e.target.value))
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "min-max"
-  }, /*#__PURE__*/_react.default.createElement("p", null, _utils.NZDollar.format(price.pMin)), /*#__PURE__*/_react.default.createElement("p", null, _utils.NZDollar.format(price.pMax)))), /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__PURE__*/_react.default.createElement("p", null, _utils.NZDollar.format(price.pMin)), /*#__PURE__*/_react.default.createElement("p", null, _utils.NZDollar.format(price.pMax)))), showCheckbox && /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexi-checkbox"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    id: "checkbox",
+    checked: checked,
+    onChange: () => setChecked(prev => !prev)
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "checkbox"
+  }, checkboxText)), /*#__PURE__*/_react.default.createElement("button", {
     className: "add-cart",
     onClick: () => {
-      onConfirm(value);
+      onConfirm(value, checked);
       onClose();
     }
   }, buttonText)));

package/dist/components/HoverPopup.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HoverPopup;
+var _reactLeaflet = require("react-leaflet");
+var _utils = require("../utils");
+var _react = require("react");
+const offset = 10;
+const numOnlyRgx = /^\d+$/;
+function HoverPopup(_ref) {
+  var _highlightedSeats$;
+  let {
+    hoveredSeat,
+    highlightedSeats,
+    mousePos,
+    show,
+    availablePrices,
+    prevHovered
+  } = _ref;
+  const map = (0, _reactLeaflet.useMap)();
+  const ref = (0, _react.useRef)(null);
+  const tooltipPos = (0, _react.useMemo)(() => {
+    var _ref$current, _ref$current2;
+    const tooltipWidth = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) || 0;
+    const tooltipHeight = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetHeight) || 0;
+    const bounds = map.getPixelBounds();
+    const height = bounds.max.y - bounds.min.y;
+    const width = bounds.max.x - bounds.min.x;
+    let x = mousePos.x;
+    let y = mousePos.y;
+    if (y + tooltipHeight + offset * 2 > height) {
+      y -= tooltipHeight + offset;
+    } else {
+      y += offset * 2;
+    }
+    if (x + tooltipWidth + offset * 2 > width) {
+      x -= tooltipWidth + offset;
+    } else {
+      x += offset * 2;
+    }
+    return {
+      x,
+      y
+    };
+  }, [mousePos]);
+  const minPrice = (availablePrices === null || availablePrices === void 0 ? void 0 : availablePrices.length) > 0 ? Math.min(...availablePrices.map(price => price.pMin || price.p)) : 0;
+  const maxPrice = (availablePrices === null || availablePrices === void 0 ? void 0 : availablePrices.length) > 0 ? Math.max(...(availablePrices === null || availablePrices === void 0 ? void 0 : availablePrices.map(price => price.pMax || price.p))) : 0;
+  const priceText = (availablePrices === null || availablePrices === void 0 ? void 0 : availablePrices.length) > 0 ? availablePrices.length === 1 || maxPrice === minPrice ? _utils.NZDollar.format(availablePrices[0].p) : "".concat(_utils.NZDollar.format(minPrice), " - ").concat(_utils.NZDollar.format(maxPrice)) : "";
+  const rowName = (highlightedSeats === null || highlightedSeats === void 0 || (_highlightedSeats$ = highlightedSeats[0]) === null || _highlightedSeats$ === void 0 ? void 0 : _highlightedSeats$.r) || (hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.r);
+  const seatNames = (highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.map(seat => seat.c)) || [hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.c];
+  if (seatNames.every(s => numOnlyRgx.test(s))) {
+    seatNames.sort((a, b) => parseInt(a) - parseInt(b));
+  } else {
+    seatNames.sort();
+  }
+  const psName = highlightedSeats ? highlightedSeats === null || highlightedSeats === void 0 ? void 0 : highlightedSeats.reduce((acc, val) => {
+    if (!acc.some(s => s.psName === val.psName)) {
+      acc.push(val);
+    }
+    return acc;
+  }, []).map(s => s.psName).join(", ") : hoveredSeat === null || hoveredSeat === void 0 ? void 0 : hoveredSeat.psName;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "hover-popup",
+    style: {
+      top: "".concat(tooltipPos.y, "px"),
+      left: "".concat(tooltipPos.x, "px"),
+      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"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hover-popup-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hover-popup-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hover-popup-row"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "hover-popup-header-title"
+  }, "ROW"), /*#__PURE__*/React.createElement("div", {
+    className: "row-name"
+  }, /*#__PURE__*/React.createElement("p", null, rowName))), /*#__PURE__*/React.createElement("div", {
+    className: "hover-popup-column"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "hover-popup-header-title"
+  }, "SEAT"), /*#__PURE__*/React.createElement("div", {
+    className: "hover-popup-seats"
+  }, seatNames.map((s, i) => {
+    if (seatNames.length > 4) {
+      if (i === 3) {
+        return /*#__PURE__*/React.createElement("p", {
+          key: "".concat(s).concat(i),
+          className: "seat-name"
+        }, "...");
+      }
+      if (i < 2 || i === seatNames.length - 1) {
+        return /*#__PURE__*/React.createElement("p", {
+          key: "".concat(s).concat(i),
+          className: "seat-name"
+        }, s);
+      }
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("p", {
+      key: "".concat(s).concat(i),
+      className: "seat-name"
+    }, s);
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "hover-popup-price"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "hover-popup-psname"
+  }, psName), /*#__PURE__*/React.createElement("div", {
+    className: "hover-popup-divider"
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "hover-popup-pricetext"
+  }, priceText))));
+}

package/dist/components/Map.js

@@ -20,6 +20,7 @@ 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"));
 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; }
@@ -29,6 +30,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function SeatMap(_ref) {
+  var _seats$pricing2, _seats$seats2;
   let {
     seats,
     height,
@@ -55,7 +57,6 @@ function SeatMap(_ref) {
     setPricingPopupOpen,
     selectedSeats,
     setSelectedSeats,
-    selectQuantityPopupOpen,
     setSelectQuantityPopupOpen,
     desiredSeatQuantity,
     setSeatsToRemove,
@@ -67,9 +68,19 @@ function SeatMap(_ref) {
   const [highlightedSeats, setHighlightedSeats] = (0, _react.useState)([]);
   const [greyedOutSeats, setGreyedOutSeats] = (0, _react.useState)([]);
   const [clickedSeat, setClickedSeat] = (0, _react.useState)(null);
+  const [mousePos, setMousePos] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const [isHoveringOnSeat, setIsHoveringOnSeat] = (0, _react.useState)(false);
+  const [hoveredSeat, setHoveredSeat] = (0, _react.useState)(null);
   const drawLayersRef = (0, _react.useRef)(null);
   const drawRef = (0, _react.useRef)(null);
   const popupRef = (0, _react.useRef)(null);
+  const prevHovered = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    prevHovered.current = hoveredSeat;
+  }, [hoveredSeat]);
   const map = (0, _reactLeaflet.useMap)();
 
   // L.drawLocal.draw.toolbar.buttons.rectangle = "Box select";
@@ -206,7 +217,17 @@ 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, seats.preventOrphanedSeats && /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HoverPopup.default, {
+    hoveredSeat: hoveredSeat,
+    highlightedSeats: highlightedSeats && 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 => {
+      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"
@@ -255,7 +276,7 @@ function SeatMap(_ref) {
     src: _encodedSvgs.wheelchairIcon,
     width: 15,
     height: 15
-  }), /*#__PURE__*/_react.default.createElement("p", null, "wheelchair"))), seats.seats.filter(seat => seat.m).length > 0 ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__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,
@@ -402,10 +423,10 @@ function SeatMap(_ref) {
     bounds: [[0, 0], [height * 0.03, width * 0.03]],
     zIndex: 10
   }), seats && seats.seats && seats.seats.map((s, i) => {
-    var _chosenSeat$seat, _chosenSeat$seat2;
+    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);
-    const seatPrices = seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === s.psId);
+    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;
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -425,11 +446,13 @@ function SeatMap(_ref) {
       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, !hasSeatPrices, selectedSeats.some(selectedSeat => selectedSeat.ssId === s.ssId) || highlightedSeats.some(hs => hs.ssId === s.ssId), greyedOutSeats.some(gs => gs.ssId === s.ssId)),
+      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)),
       radius: 12000,
       eventHandlers: {
         click: e => {
-          if (seats.preventOrphanedSeats && desiredSeatQuantity > 0) {
+          if (mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE || mode === _utils.modes.DRAW || selectedSeats.length > 0) {
+            map.closePopup();
+          } else if (seats.preventOrphanedSeats && desiredSeatQuantity > 0) {
             map.closePopup();
             if (s.s === _utils.statuses.USER_PENDING) {
               const newSeatsToRemove = (0, _utils.getAdjacentBookedSeats)(s, seatsMap);
@@ -474,6 +497,8 @@ function SeatMap(_ref) {
               setSelectedSeats(prev => [...prev, s]);
             }
           } else {
+            setIsHoveringOnSeat(true);
+            setHoveredSeat(s);
             if (seats.preventOrphanedSeats && desiredSeatQuantity > 0 && s.s === _utils.statuses.UNSOLD) {
               const seatsToBook = (0, _utils.getValidSeats)(s, seatsMap, desiredSeatQuantity);
               if (seatsToBook.valid) {
@@ -485,23 +510,38 @@ function SeatMap(_ref) {
           }
         },
         mouseout: () => {
-          if (highlightedSeats.length > 0) {
-            setHighlightedSeats([]);
-          }
           if (greyedOutSeats.length > 0) {
             setGreyedOutSeats([]);
           }
           if (clickedSeat) {
             setClickedSeat(null);
           }
+          if (hoveredSeat || highlightedSeats) {
+            setTimeout(() => {
+              if (hoveredSeat) {
+                setHoveredSeat(prev => prev && prev === hoveredSeat ? null : prev);
+              }
+              if (highlightedSeats) {
+                setHighlightedSeats(prev => prev && prev === highlightedSeats ? [] : prev);
+              }
+            }, 400);
+          }
+          if (isHoveringOnSeat) {
+            setIsHoveringOnSeat(false);
+          }
+        },
+        mousemove: e => {
+          setMousePos({
+            x: e.containerPoint.x,
+            y: e.containerPoint.y
+          });
         }
       }
-      // value={s}
-    }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.Tooltip, {
-      className: "seatname-tooltip",
+    }, (0, _utils.isTouchScreen)() && /*#__PURE__*/_react.default.createElement(_reactLeaflet.Tooltip, {
+      className: "mobile-tooltip",
       direction: "top",
-      offset: [0, height * 0.03 + -30]
-    }, s.r + "-" + s.c), s.s === _utils.statuses.UNSOLD && hasSeatPrices ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, {
+      offset: [0, height * 0.03 + -60]
+    }, "Tap again to select these seats"), 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/PriceButton.js

@@ -19,6 +19,7 @@ function PriceButton(_ref) {
   const [flexiOpen, setFlexiOpen] = (0, _react.useState)(false);
   const flexiRef = (0, _react.useRef)(null);
   const focusRef = (0, _react.useRef)(null);
+  const isAvailable = price.q === null || price.q > 0;
   const isFlexi = !!price.pMax && !!price.pMin && price.pMax > price.pMin;
   (0, _react.useEffect)(() => {
     if (flexiOpen) {
@@ -38,7 +39,7 @@ function PriceButton(_ref) {
         addToCart(price.p);
       }
     },
-    disabled: price.is_available === false
+    disabled: !isAvailable
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "price"
   }, /*#__PURE__*/_react.default.createElement("span", {
@@ -47,7 +48,7 @@ function PriceButton(_ref) {
     className: "flexi-badge"
   }, "FLEXi")), /*#__PURE__*/_react.default.createElement("span", {
     className: "amount"
-  }, isFlexi ? "".concat(_utils.NZDollar.format(price.pMin), " - ").concat(_utils.NZDollar.format(price.pMax)) : _utils.NZDollar.format(price.p))), price.is_available === false && /*#__PURE__*/_react.default.createElement("span", {
+  }, isFlexi ? "".concat(_utils.NZDollar.format(price.pMin), " - ").concat(_utils.NZDollar.format(price.pMax)) : _utils.NZDollar.format(price.p))), !isAvailable && /*#__PURE__*/_react.default.createElement("span", {
     className: "unavailable"
   }, "Allocation exhausted")), isFlexi && /*#__PURE__*/_react.default.createElement(_Flexi.default, {
     price: price,