iticket-seatingplan-dev 1.5.6 → 1.5.7

package/dist/components/Flexi.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Flexi;
+var _react = require("react");
+var _utils = require("../utils");
+function Flexi(_ref) {
+  var _price$p;
+  let {
+    price,
+    onClose,
+    buttonText,
+    onConfirm,
+    isOpen,
+    panMap
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)((_price$p = price.p) !== null && _price$p !== void 0 ? _price$p : price.pMin);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flexi-popup-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: isOpen ? "flexi-content open" : "flexi-content",
+    onTransitionEnd: () => {
+      if (isOpen && panMap) {
+        panMap();
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "slider-container"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "value"
+  }, _utils.NZDollar.format(value)), /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    className: "slider",
+    min: price.pMin,
+    max: price.pMax,
+    value: value.toString(),
+    onChange: e => setValue(parseInt(e.target.value))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "min-max"
+  }, /*#__PURE__*/React.createElement("p", null, _utils.NZDollar.format(price.pMin)), /*#__PURE__*/React.createElement("p", null, _utils.NZDollar.format(price.pMax)))), /*#__PURE__*/React.createElement("button", {
+    className: "add-cart",
+    onClick: () => {
+      onConfirm(value);
+      onClose();
+    }
+  }, buttonText)));
+}

package/dist/components/Map.js

@@ -0,0 +1,509 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Map;
+require("leaflet-gesture-handling/dist/leaflet-gesture-handling.css");
+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 _leafletGestureHandling2 = require("leaflet-gesture-handling");
+var _reactLeafletCustomControl = _interopRequireDefault(require("react-leaflet-custom-control"));
+var _encodedSvgs = require("./assets/encodedSvgs");
+var _utils = require("../utils");
+var _PriceButton = _interopRequireDefault(require("./PriceButton"));
+var _Flexi = _interopRequireDefault(require("./Flexi"));
+var _CloseIcon = _interopRequireDefault(require("./icons/CloseIcon"));
+var _TicketIcon = _interopRequireDefault(require("./icons/TicketIcon"));
+var _FlexiIcon = _interopRequireDefault(require("./icons/FlexiIcon"));
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 Map(_ref) {
+  let {
+    seats,
+    height,
+    width,
+    bounds,
+    handleClickSeat,
+    ticketPopupOpen,
+    setTicketPopupOpen,
+    chosenSeat,
+    bookedSeats,
+    addTicketToCart,
+    batchRemoveTicketsFromCart,
+    isReloading,
+    initialFetch,
+    isFullScreen,
+    setIsFullScreen,
+    priceSectionIds,
+    areaName,
+    price,
+    canMultiSelect,
+    mode,
+    setMode,
+    pricingPopupOpen,
+    setPricingPopupOpen,
+    selectedSeats,
+    setSelectedSeats
+  } = _ref;
+  const [isLegendOpen, setIsLegendOpen] = (0, _react.useState)(false);
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const drawLayersRef = (0, _react.useRef)(null);
+  const drawRef = (0, _react.useRef)(null);
+  const popupRef = (0, _react.useRef)(null);
+  const map = (0, _reactLeaflet.useMap)();
+  L.drawLocal.draw.toolbar.buttons.rectangle = "Box select";
+  (0, _reactLeaflet.useMapEvents)({
+    mouseover: () => {
+      if (mode === _utils.modes.DRAG || mode === _utils.modes.DRAW || mode === _utils.modes.REMOVE) {
+        map.dragging.disable();
+      }
+    },
+    mousedown: e => {
+      if (!canMultiSelect) return;
+      const parent = document.querySelector(".leaflet-pane.leaflet-map-pane");
+      if (e.target !== parent && !parent.contains(e.originalEvent.target)) {
+        return;
+      }
+      if (mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE) {
+        setIsDragging(true);
+      }
+    },
+    mouseup: () => {
+      if (!canMultiSelect) return;
+      if ((mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE) && isDragging) {
+        setIsDragging(false);
+        if (mode === _utils.modes.DRAG) {
+          if (selectedSeats.length > 0) {
+            setPricingPopupOpen(true);
+          }
+        } else if (mode === _utils.modes.REMOVE) {
+          const seatsToRemove = [];
+          selectedSeats.forEach(seat => {
+            if (!seatsToRemove.find(s => s.ssId === seat.ssId) && seat.s === _utils.statuses.USER_PENDING) {
+              seatsToRemove.push(seat);
+            }
+          });
+          if (seatsToRemove.length > 0) {
+            batchRemoveTicketsFromCart(seatsToRemove);
+          }
+          setSelectedSeats([]);
+        }
+      }
+    }
+  });
+  (0, _react.useEffect)(() => {
+    const keyboardHandler = e => {
+      if (e.key === "Escape") {
+        if (ticketPopupOpen) {
+          map.closePopup();
+        } else if (pricingPopupOpen) {
+          setPricingPopupOpen(false);
+          setSelectedSeats([]);
+        } else if (mode !== _utils.modes.SINGLE) {
+          if (mode === _utils.modes.DRAW) {
+            var _drawRef$current;
+            (_drawRef$current = drawRef.current) === null || _drawRef$current === void 0 || _drawRef$current._toolbars.draw.disable();
+          }
+          setMode(_utils.modes.SINGLE);
+        } else if (isFullScreen) {
+          setIsFullScreen(false);
+        }
+      } else if (e.key === "Control" && canMultiSelect) {
+        if (mode !== _utils.modes.DRAG) {
+          if (mode === _utils.modes.DRAW) {
+            var _drawRef$current2;
+            (_drawRef$current2 = drawRef.current) === null || _drawRef$current2 === void 0 || _drawRef$current2._toolbars.draw.disable();
+          }
+          setMode(_utils.modes.DRAG);
+        } else {
+          setMode(_utils.modes.SINGLE);
+        }
+      } else if (e.key === "Alt" && canMultiSelect) {
+        if (mode !== _utils.modes.DRAW) {
+          var _drawRef$current3;
+          (_drawRef$current3 = drawRef.current) === null || _drawRef$current3 === void 0 || _drawRef$current3._toolbars.draw._modes.rectangle.handler.enable();
+          setMode(_utils.modes.DRAW);
+        } else {
+          var _drawRef$current4;
+          (_drawRef$current4 = drawRef.current) === null || _drawRef$current4 === void 0 || _drawRef$current4._toolbars.draw.disable();
+          setMode(_utils.modes.SINGLE);
+        }
+      }
+    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("keydown", keyboardHandler);
+    }
+    return () => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("keydown", keyboardHandler);
+      }
+    };
+  }, [isFullScreen, ticketPopupOpen, mode]);
+  const getNorthSeatLat = seat => {
+    return height / 33.33 - height / 33.33 * seat.y * 0.0105 + 1.4;
+  };
+  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
+    };
+  };
+  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];
+      if (boxBounds.contains(latlng) && !seatsToBook.find(s => s.ssId === seat.ssId) && seat.s === _utils.statuses.UNSOLD) {
+        seatsToBook.push(seat);
+      }
+    });
+    setSelectedSeats(seatsToBook);
+    if (seatsToBook.length > 0) {
+      setPricingPopupOpen(true);
+    }
+    (_drawLayersRef$curren = drawLayersRef.current) === null || _drawLayersRef$curren === void 0 || _drawLayersRef$curren.clearLayers();
+  };
+
+  // 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", _leafletGestureHandling2.GestureHandling);
+      // @ts-ignore
+      map.gestureHandling.enable();
+    }
+  }, [map, isFullScreen]);
+  (0, _react.useEffect)(() => {
+    if (mode === _utils.modes.SINGLE) {
+      map.dragging.enable();
+    } else {
+      map.dragging.disable();
+    }
+  }, [mode, map]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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.seats.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,
+    bounds: [[0, 0], [height * 0.03, width * 0.03]],
+    zIndex: 10
+  }), seats && seats.seats && seats.seats.map((s, i) => {
+    var _chosenSeat$seat;
+    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 isSingleFlexi = seatPrices.length === 1 && !!seatPrices[0].pMax && !!seatPrices[0].pMin && seatPrices[0].pMax > seatPrices[0].pMin;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i
+    }, /*#__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]],
+      opacity: s.loading || ticketPopupOpen && (chosenSeat === null || chosenSeat === void 0 || (_chosenSeat$seat = chosenSeat.seat) === null || _chosenSeat$seat === void 0 ? void 0 : _chosenSeat$seat.ssId) === s.ssId ? 100 : 0,
+      zIndex: 10
+    }), !priceSectionIds || priceSectionIds.includes(s.psId) ? s.s === _utils.statuses.WHEELCHAIR_ACCESS ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
+      url: _encodedSvgs.wheelchairIcon,
+      bounds: [[seatCenter.lat - 0.11, seatCenter.lng - 0.11], [seatCenter.lat + 0.11, seatCenter.lng + 0.11]],
+      zIndex: 10
+    }) : s.s === _utils.statuses.USER_PENDING && s.m ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
+      url: _encodedSvgs.userIcon,
+      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
+      // TEST selected state for multiselect
+      // !!selectedSeats.find(
+      //   (selectedSeat) => selectedSeat.ssId === s.ssId
+      // )
+      ),
+      radius: 12000,
+      eventHandlers: {
+        click: e => {
+          if (mode === _utils.modes.SINGLE) {
+            handleClickSeat(e, s);
+          }
+        },
+        popupopen: popup => {
+          setTicketPopupOpen(true);
+          popupRef.current = popup;
+        },
+        popupclose: () => {
+          setTicketPopupOpen(false);
+          popupRef.current = null;
+        },
+        mousedown: () => {
+          if ((mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE) && canMultiSelect) {
+            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: () => {
+          if ((mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE) && isDragging && canMultiSelect) {
+            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]);
+            }
+          }
+        }
+      }
+      // value={s}
+    }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.Tooltip, {
+      className: "seatname-tooltip",
+      direction: "top",
+      offset: [0, height * 0.03 + -30]
+    }, s.r + "-" + s.c), s.s === _utils.statuses.UNSOLD && /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, {
+      className: "ticket-popup popup-".concat(s.sId)
+    }, isSingleFlexi ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "single-flexi"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "popup-header"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "flexi-title"
+    }, /*#__PURE__*/_react.default.createElement(_FlexiIcon.default, {
+      className: "ticket-icon",
+      height: "56px",
+      width: "56px"
+    }), /*#__PURE__*/_react.default.createElement("p", {
+      className: "seatname"
+    }, "".concat(areaName ? areaName + " | " : "").concat(s.r, "-").concat(s.c))), /*#__PURE__*/_react.default.createElement("button", {
+      className: "close-button",
+      "aria-label": "close flexi popup",
+      onClick: () => map.closePopup()
+    }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, null))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "popup-content"
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: "heading"
+    }, "FLEXi Price"), /*#__PURE__*/_react.default.createElement(_Flexi.default, {
+      price: seatPrices[0],
+      onClose: () => map.closePopup(),
+      onConfirm: amount => addTicketToCart(s, _objectSpread(_objectSpread({}, seatPrices[0]), {}, {
+        p: amount
+      })),
+      buttonText: "Add to cart",
+      isOpen: true
+    }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "popup-header"
+    }, /*#__PURE__*/_react.default.createElement(_TicketIcon.default, {
+      className: "ticket-icon",
+      height: "56px",
+      width: "56px"
+    }), /*#__PURE__*/_react.default.createElement("p", {
+      className: "seatname"
+    }, "".concat(areaName ? areaName + " | " : "").concat(s.r, "-").concat(s.c)), /*#__PURE__*/_react.default.createElement("button", {
+      className: "close-button",
+      "aria-label": "close popup",
+      onClick: () => map.closePopup()
+    }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, null))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "popup-content"
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: "heading"
+    }, "Select option:"), /*#__PURE__*/_react.default.createElement("div", {
+      className: "priceages"
+    }, seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === s.psId).map(price => /*#__PURE__*/_react.default.createElement(_PriceButton.default, {
+      key: price.paId,
+      price: price,
+      addToCart: amount => addTicketToCart(s, _objectSpread(_objectSpread({}, price), {}, {
+        p: amount
+      }))
+      // When the flexi dropdown opens, pan map to re-fit popup
+      ,
+      panMap: () => {
+        const p = document.querySelector(".popup-".concat(s.sId));
+        const h = p === null || p === void 0 ? void 0 : p.clientHeight;
+        if (h) {
+          const offsetTop = map.latLngToContainerPoint(popupRef.current.popup.getLatLng()).y - h;
+          if (offsetTop < 0) {
+            map.panBy([0, offsetTop - 20]);
+          }
+        }
+      }
+    }))))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+  }));
+}

package/dist/components/PriceButton.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PriceButton;
+var _react = require("react");
+var _utils = require("../utils");
+var _Flexi = _interopRequireDefault(require("./Flexi"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PriceButton(_ref) {
+  let {
+    price,
+    addToCart,
+    panMap
+  } = _ref;
+  const [flexiOpen, setFlexiOpen] = (0, _react.useState)(false);
+  const flexiRef = (0, _react.useRef)(null);
+  const focusRef = (0, _react.useRef)(null);
+  const isFlexi = !!price.pMax && !!price.pMin && price.pMax > price.pMin;
+  (0, _react.useEffect)(() => {
+    if (flexiOpen) {
+      var _flexiRef$current, _focusRef$current;
+      focusRef.current = (_flexiRef$current = flexiRef.current) === null || _flexiRef$current === void 0 ? void 0 : _flexiRef$current.querySelectorAll("button, [href], input, select, textarea, \n          [tabindex]:not([tabindex=\"-1\"]),video")[0];
+      (_focusRef$current = focusRef.current) === null || _focusRef$current === void 0 || _focusRef$current.focus();
+    }
+  }, [flexiOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "priceage-container"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: isFlexi ? "priceage flexi" : "priceage",
+    onClick: () => {
+      if (isFlexi) {
+        setFlexiOpen(prev => !prev);
+      } else {
+        addToCart(price.p);
+      }
+    },
+    disabled: price.is_available === false
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "price"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "price-name"
+  }, /*#__PURE__*/React.createElement("span", null, price.paName), isFlexi && /*#__PURE__*/React.createElement("span", {
+    className: "flexi-badge"
+  }, "FLEXi")), /*#__PURE__*/React.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.createElement("span", {
+    className: "unavailable"
+  }, "Allocation exhausted")), isFlexi && /*#__PURE__*/React.createElement(_Flexi.default, {
+    price: price,
+    onClose: () => setFlexiOpen(false),
+    onConfirm: addToCart,
+    buttonText: "Add to cart",
+    isOpen: flexiOpen,
+    panMap: panMap
+  }));
+}