iticket-seatingplan-dev 1.4.0 → 1.4.1

package/dist/components/Map.js

@@ -0,0 +1,275 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Map;
+require("leaflet-gesture-handling/dist/leaflet-gesture-handling.css");
+var _reactLeaflet = require("react-leaflet");
+var _leafletGestureHandling2 = require("leaflet-gesture-handling");
+var _reactLeafletCustomControl = _interopRequireDefault(require("react-leaflet-custom-control"));
+var _encodedSvgs = require("./assets/encodedSvgs");
+var _utils = require("../utils");
+var _react = require("react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Map(_ref) {
+  let {
+    seats,
+    height,
+    width,
+    bounds,
+    handleClickSeat,
+    ticketPopupOpen,
+    setTicketPopupOpen,
+    chosenSeat,
+    addTicketToCart,
+    isReloading,
+    initialFetch,
+    isFullScreen,
+    setIsFullScreen,
+    priceSectionIds,
+    areaName,
+    price
+  } = _ref;
+  const [isLegendOpen, setIsLegendOpen] = (0, _react.useState)(false);
+  const map = (0, _reactLeaflet.useMap)();
+  (0, _react.useEffect)(() => {
+    const closeOnEscape = e => {
+      if (e.key === "Escape") {
+        if (isFullScreen && !ticketPopupOpen) {
+          setIsFullScreen(false);
+        } else if (ticketPopupOpen) {
+          map.closePopup();
+        }
+      }
+    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("keydown", closeOnEscape);
+    }
+    return () => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("keydown", closeOnEscape);
+      }
+    };
+  }, [isFullScreen, ticketPopupOpen]);
+
+  // 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);
+      map.gestureHandling.enable();
+    }
+  }, [map, isFullScreen]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactLeafletCustomControl.default, {
+    position: "bottomright"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legendBox"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legend-header"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "legend-button ".concat(isLegendOpen ? "expanded" : ""),
+    onClick: () => setIsLegendOpen(!isLegendOpen)
+  }, /*#__PURE__*/React.createElement("p", null, isLegendOpen ? "LEGEND:" : "VIEW LEGEND")), isLegendOpen && /*#__PURE__*/React.createElement("button", {
+    className: "close-button",
+    onClick: () => setIsLegendOpen(false)
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _encodedSvgs.closeIcon,
+    alt: "close"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "legend-contents ".concat(isLegendOpen ? "expanded" : "")
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legend-symbol legend-available"
+  }), /*#__PURE__*/React.createElement("p", null, "available"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legend-symbol legend-sold"
+  }), /*#__PURE__*/React.createElement("p", null, "sold"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legend-symbol legend-in-cart"
+  }), /*#__PURE__*/React.createElement("p", null, "in cart"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _encodedSvgs.wheelchairIcon,
+    width: 15,
+    height: 15
+  }), /*#__PURE__*/React.createElement("p", null, "wheelchair"))), seats.seats.filter(seat => seat.m).length > 0 ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _encodedSvgs.userIcon,
+    width: 15,
+    height: 15
+  }), /*#__PURE__*/React.createElement("p", null, "membership seats"))) : /*#__PURE__*/React.createElement(React.Fragment, null)))), /*#__PURE__*/React.createElement(_reactLeafletCustomControl.default, {
+    position: "topleft"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "extra-controls"
+  }, /*#__PURE__*/React.createElement("button", {
+    title: "Re-centre Seating Plan",
+    onClick: () => map.fitBounds(bounds),
+    className: "leaflet-control-zoom-in"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/fit-icon.jpg",
+    style: {
+      height: "17px"
+    }
+  })), /*#__PURE__*/React.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)" : "#fff"
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    className: isReloading ? "rotate" : "",
+    src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/refresh.png",
+    style: {
+      height: "17px"
+    }
+  })))), /*#__PURE__*/React.createElement(_reactLeafletCustomControl.default, {
+    position: "topleft"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "extra-controls"
+  }, /*#__PURE__*/React.createElement("button", {
+    title: isFullScreen ? "Collapse Seating Plan" : "Expand Seating Plan",
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    className: "leaflet-control-zoom-in"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: isFullScreen ? _encodedSvgs.collapseIcon : _encodedSvgs.expandIcon,
+    style: {
+      height: "24px"
+    }
+  })))), /*#__PURE__*/React.createElement(_reactLeafletCustomControl.default, {
+    position: "topright"
+  }, /*#__PURE__*/React.createElement("button", {
+    title: "Close full screen",
+    onClick: () => setIsFullScreen(false),
+    className: "full-screen-close-button ".concat(isFullScreen ? "show" : "")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _encodedSvgs.closeIcon,
+    style: {
+      height: "24px"
+    }
+  }))), /*#__PURE__*/React.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;
+    return /*#__PURE__*/React.createElement("div", {
+      key: i
+    }, /*#__PURE__*/React.createElement(_reactLeaflet.ImageOverlay, {
+      url: "https://iticketseatingplan.blob.core.windows.net/embed/static/media/rippleload.08e6a08dd832819226ef.gif",
+      bounds: [[(s.r.includes("NORTH") ? height / 33.33 - height / 33.33 * s.y * 0.0105 + 1.4 : height * 0.05 - s.y / (height > 800 ? height > 999 ? 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)) - 0.11, s.x * 0.3 + 0.15 - 0.11], [(s.r.includes("NORTH") ? height / 33.33 - height / 33.33 * s.y * 0.0105 + 1.4 : height * 0.05 - s.y / (height > 800 ? height > 999 ? 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)) + 0.11, s.x * 0.3 + 0.15 + 0.11]
+      // [height * 0.0302 - s.y * 0.602 - 0.3, s.x * 0.61 - 0.3],
+      // [height * 0.0302 - s.y * 0.602 + 0.3, s.x * 0.61 + 0.3],
+      // [height * 0.0302 - s.y * 0.602 - 0.17, s.x * 0.61 - 0.17],
+      // [height * 0.0302 - s.y * 0.602 + 0.17, s.x * 0.61 + 0.17],
+      ],
+
+      opacity: s.loading || ticketPopupOpen && (chosenSeat === null || chosenSeat === void 0 ? 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.createElement(_reactLeaflet.ImageOverlay, {
+      url: _encodedSvgs.wheelchairIcon,
+      bounds: [
+      // [
+      //   height * 0.0302 - s.y * 0.602 - 0.17,
+      //   s.x * 0.61 - 0.17,
+      // ],
+      // [
+      //   height * 0.0302 - s.y * 0.602 + 0.17,
+      //   s.x * 0.61 + 0.17,
+      // ],
+      [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 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) - 0.11, s.x * 0.3 + 0.15 - 0.11], [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 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) + 0.11, s.x * 0.3 + 0.15 + 0.11]],
+      zIndex: 10
+    }) : s.s === _utils.statuses.USER_PENDING && s.m ? /*#__PURE__*/React.createElement(_reactLeaflet.ImageOverlay, {
+      url: _encodedSvgs.userIcon,
+      bounds: [
+      // [
+      //   height * 0.0302 - s.y * 0.602 - 0.17,
+      //   s.x * 0.61 - 0.17,
+      // ],
+      // [
+      //   height * 0.0302 - s.y * 0.602 + 0.17,
+      //   s.x * 0.61 + 0.17,
+      // ],
+      [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 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) - 0.11, s.x * 0.3 + 0.15 - 0.15], [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 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) + 0.11, s.x * 0.3 + 0.15 + 0.15]],
+      zIndex: 10
+    }) : /*#__PURE__*/React.createElement(_reactLeaflet.Circle, {
+      center: [
+      // height * 0.0305 -
+      //   s.y * 0.57 -
+      //   height * (height > 700 ? 0.0001 : 0.0006),
+      // s.x * 0.6 + 0.25,
+      //experimental
+      // 14.42,
+      // (height / 33.33 - 0.3 * s.y).toFixed(1)
+      // height / 33.33 - (height / 33.33) * s.y * 0.01, //29, //3 27, // height / 33.33 - s.y, // s.y * 0.3, //+ (height / 0.503) * 0.01, //11.66, // 5.2,
+      //working
+      s.r.includes("NORTH") ? height / 33.33 - height / 33.33 * s.y * 0.0105 + 1.4 : height * 0.05 - s.y / (height > 800 ? height > 999 ? 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),
+      // s.r.includes('NORTH')
+      //   ? 0
+      //   : 0,
+      s.x * 0.3 + 0.15
+
+      // height * 0.04 -
+      //   s.y / (height > 800 ? 3.5 : 3.35) -
+      //   (height > 800 ? height * 0.0101 : height * 0.0201),
+      // s.x * 0.3 + 0.15,
+
+      // -s.y * (height * 0.00037) + 24.2,
+      // s.x * 0.3 + 0.15,
+      ],
+
+      pathOptions: (0, _utils.getInitialColor)(s, price),
+      radius: 12000,
+      eventHandlers: {
+        click: e => handleClickSeat(e, s),
+        popupopen: () => {
+          setTicketPopupOpen(true);
+        },
+        popupclose: () => {
+          setTicketPopupOpen(false);
+        }
+      }
+      // value={s}
+    }, /*#__PURE__*/React.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.createElement(_reactLeaflet.Popup, {
+      className: "ticket-popup"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "popup-header"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "seatname"
+    }, "".concat(areaName ? areaName + " | " : "").concat(s.r, "-").concat(s.c)), /*#__PURE__*/React.createElement("button", {
+      className: "close-button",
+      "aria-label": "close popup",
+      onClick: () => map.closePopup()
+    }, /*#__PURE__*/React.createElement("img", {
+      src: _encodedSvgs.closeIcon,
+      alt: "close"
+    }))), /*#__PURE__*/React.createElement("p", {
+      className: "heading"
+    }, "Select option:"), seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === s.psId).map(price => /*#__PURE__*/React.createElement("div", {
+      key: price.paId,
+      className: "priceage",
+      onClick: () => {
+        s.loading = true;
+        map.closePopup();
+        addTicketToCart(s, price);
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "price"
+    }, /*#__PURE__*/React.createElement("span", null, price.paName), /*#__PURE__*/React.createElement("span", null, _utils.NZDollar.format(price.p))))))) : /*#__PURE__*/React.createElement(React.Fragment, null));
+  }));
+}

package/dist/components/SeatingPlan.js

@@ -6,29 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("./styles/index.css");
 var _react = _interopRequireWildcard(require("react"));
+var _Map = _interopRequireDefault(require("./Map"));
 var _reactLeaflet = require("react-leaflet");
-var _encodedSvgs = require("./assets/encodedSvgs");
-var _reactLeafletCustomControl = _interopRequireDefault(require("react-leaflet-custom-control"));
+var _utils = require("../utils");
+var _reactDom = require("react-dom");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const statuses = {
-  UNSOLD: 1,
-  SOLD: 2,
-  RESERVED: 3,
-  USER_PENDING: 4,
-  CHEQUE_PENDING: 5,
-  WHEELCHAIR_ACCESS: 6,
-  DOOR_SALES: 7,
-  ON_HOLD: 8,
-  REAL_TIME_DOOR_SALES: 9,
-  CANCELLED: 10
-};
-let NZDollar = new Intl.NumberFormat("en-NZ", {
-  style: "currency",
-  currency: "NZD"
-});
 const SeatingPlan = _ref => {
+  var _document, _document2, _document3;
   let {
     eventId,
     eventVenueId,
@@ -47,7 +33,6 @@ const SeatingPlan = _ref => {
   } = _ref;
   const [initialiseMessage, setInitialiseMessage] = (0, _react.useState)("Initialising seating plan...");
   const [isReloading, setIsReloading] = (0, _react.useState)(false);
-  const [map, setMap] = (0, _react.useState)();
   const [position, setPosition] = (0, _react.useState)(null);
   const [height, setHeight] = (0, _react.useState)(0);
   const [width, setWidth] = (0, _react.useState)(0);
@@ -57,28 +42,12 @@ const SeatingPlan = _ref => {
   const [bookedSeats, setBookedSeats] = (0, _react.useState)([]);
   const [chosenSeat, setChosenSeat] = (0, _react.useState)(null);
   const [area, setArea] = (0, _react.useState)(null);
-  const [isLegendOpen, setIsLegendOpen] = (0, _react.useState)(false);
   const [ticketPopupOpen, setTicketPopupOpen] = (0, _react.useState)(false);
   const [bounds, setBounds] = (0, _react.useState)(null);
   const [isFullScreen, setIsFullScreen] = (0, _react.useState)(false);
-  const statusColors = {
-    unknown: "#95a5a6",
-    available: "#00E640",
-    sold: "#95a5a6",
-    reserved: "#95a5a6",
-    pending: "#e74c3c",
-    booked: "#e74c3c",
-    bookedWithDifferentPrice: "#fab1a0"
-  };
-  const setInitialColor = s => {
-    return {
-      fillColor: s.s === statuses.UNSOLD ? statusColors.available : s.s === statuses.USER_PENDING ? s.bookedPrice === price ? statusColors.booked : statusColors.bookedWithDifferentPrice : statusColors.sold,
-      color: "none",
-      fillOpacity: s.loading ? 0 : 1
-    };
-  };
+  const [mounted, setMounted] = _react.default.useState(false);
+  (0, _react.useLayoutEffect)(() => setMounted(true), []);
   const addTicketToCart = (s, priceage, cs) => {
-    map.target.closePopup();
     setProcessing(true);
     fetch("".concat(baseUrl, "/legacy/").concat(countryCode, "/shop/events/").concat(eventId, "/").concat(eventVenueId, "/showings/").concat(showingId, "/tickets/allocated/").concat(areaId), {
       method: "POST",
@@ -95,9 +64,9 @@ const SeatingPlan = _ref => {
       if ((response === null || response === void 0 ? void 0 : response.status) === 403) {
         s.loading = false;
         (cs || chosenSeat).circle.target.setStyle({
-          fillColor: statusColors.sold
+          fillColor: _utils.statusColors.sold
         });
-        cs ? cs.seat.s = statuses.SOLD : chosenSeat.seat.s = statuses.SOLD;
+        cs ? cs.seat.s = _utils.statuses.SOLD : chosenSeat.seat.s = _utils.statuses.SOLD;
         const event = {
           type: "error",
           details: {
@@ -112,9 +81,9 @@ const SeatingPlan = _ref => {
       } else if ((response === null || response === void 0 ? void 0 : response.status) === 400) {
         s.loading = false;
         (cs || chosenSeat).circle.target.setStyle({
-          fillColor: statusColors.sold
+          fillColor: _utils.statusColors.sold
         });
-        cs ? cs.seat.s = statuses.SOLD : chosenSeat.seat.s = statuses.SOLD;
+        cs ? cs.seat.s = _utils.statuses.SOLD : chosenSeat.seat.s = _utils.statuses.SOLD;
         const event = {
           type: "error",
           details: {
@@ -129,7 +98,7 @@ const SeatingPlan = _ref => {
       } else if ((response === null || response === void 0 ? void 0 : response.status) === 429) {
         s.loading = false;
         (cs || chosenSeat).circle.target.setStyle({
-          fillColor: statusColors.available
+          fillColor: _utils.statusColors.available
         });
         const event = {
           type: "error",
@@ -144,11 +113,11 @@ const SeatingPlan = _ref => {
         setProcessing(false);
       } else {
         // console.log(chosenSeat.seat.ssId, cs?.seat.ssId)
-        s.s = statuses.USER_PENDING;
+        s.s = _utils.statuses.USER_PENDING;
         s.bookedPrice = price;
         s.loading = false;
         (cs || chosenSeat).circle.target.setStyle({
-          fillColor: statusColors.booked
+          fillColor: _utils.statusColors.booked
         });
         setProcessing(false);
         setBookedSeats([...bookedSeats, {
@@ -177,7 +146,7 @@ const SeatingPlan = _ref => {
     }).catch(error => {
       s.loading = false;
       (cs || chosenSeat).circle.target.setStyle({
-        fillColor: statusColors.available
+        fillColor: _utils.statusColors.available
       });
       const event = {
         type: "error",
@@ -206,10 +175,10 @@ const SeatingPlan = _ref => {
       }
     }).then(response => {
       s.loading = false;
-      s.s = statuses.UNSOLD;
+      s.s = _utils.statuses.UNSOLD;
       s.bookedPrice = null;
       e.target.setStyle({
-        fillColor: statusColors.available
+        fillColor: _utils.statusColors.available
       });
       setBookedSeats(bookedSeats.filter(bs => bs.ssId !== s.ssId));
       setProcessing(false);
@@ -220,7 +189,7 @@ const SeatingPlan = _ref => {
       callbackFunction(event);
     }).catch(error => {
       e.target.setStyle({
-        fillColor: statusColors.booked
+        fillColor: _utils.statusColors.booked
       });
       const event = {
         type: "error",
@@ -235,8 +204,8 @@ const SeatingPlan = _ref => {
       setProcessing(false);
     });
   };
-  const handleClick = (e, s) => {
-    if (s.s !== statuses.UNSOLD && s.s !== statuses.USER_PENDING || bookedSeats.length >= quantity && s.s === statuses.UNSOLD) {
+  const handleClickSeat = (e, s) => {
+    if (s.s !== _utils.statuses.UNSOLD && s.s !== _utils.statuses.USER_PENDING || bookedSeats.length >= quantity && s.s === _utils.statuses.UNSOLD) {
       if (bookedSeats.length >= quantity) {
         const event = {
           type: "error",
@@ -252,7 +221,7 @@ const SeatingPlan = _ref => {
       circle: e,
       seat: s
     });
-    if (s.s === statuses.UNSOLD) {
+    if (s.s === _utils.statuses.UNSOLD) {
       const availablePrices = seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && s.psId === price.psId);
       if (availablePrices.length === 1) {
         s.loading = true;
@@ -285,7 +254,7 @@ const SeatingPlan = _ref => {
       return data;
     }).then(data => {
       if (data.statusCode === 429) {
-        setInitialiseMessage("Looks like it's busy. Standby. Trying again in ".concat(data.retryAfter, " second").concat(data.retryAfter > 1 ? "s" : "", "."));
+        setInitialiseMessage("Looks like it's busy. Stand by. Trying again in ".concat(data.retryAfter, " second").concat(data.retryAfter > 1 ? "s" : "", "."));
         return setTimeout(initialFetch, data.retryAfter * 1000);
       }
       if (data.statusCode === 403) {
@@ -297,7 +266,7 @@ const SeatingPlan = _ref => {
       }
       const img = new Image();
       img.src = data.background;
-      setBookedSeats(data.seats.filter(s => s.s === statuses.USER_PENDING && s.bookedPrice === price).map(s => ({
+      setBookedSeats(data.seats.filter(s => s.s === _utils.statuses.USER_PENDING && s.bookedPrice === price).map(s => ({
         ssId: s.ssId,
         r: s.r,
         c: s.c,
@@ -316,9 +285,6 @@ const SeatingPlan = _ref => {
         setWidth(img.width * 0.5);
         setSeats(data);
       };
-      if (map && area === areaId) {
-        map.target.fitBounds(bounds);
-      }
       setIsReloading(false);
     }).catch(error => {
       var _error$message;
@@ -363,262 +329,49 @@ const SeatingPlan = _ref => {
       }));
     }
   }, [chosenSeat, processing]);
-  (0, _react.useEffect)(() => {
-    if (map) {
-      map.target.invalidateSize();
-      map.target.fitBounds(bounds);
-    }
-  }, [isFullScreen]);
-  (0, _react.useEffect)(() => {
-    const closeOnEscape = e => {
-      if (e.key === "Escape") {
-        if (isFullScreen && !ticketPopupOpen) {
-          setIsFullScreen(false);
-        } else if (ticketPopupOpen) {
-          map.target.closePopup();
-        }
-      }
-    };
-    window.addEventListener("keydown", closeOnEscape);
-    return () => window.removeEventListener("keydown", closeOnEscape);
-  }, [isFullScreen, ticketPopupOpen]);
-  const calculateCenterOfMap = (height, seats) => {
-    const filteredSeats = seats.filter(price => !priceSectionIds || priceSectionIds.includes(price.psId));
-    const avgY = filteredSeats.reduce((acc, val) => {
-      return acc + val.y / filteredSeats.length;
-    }, 0);
-    const avgX = filteredSeats.reduce((acc, val) => {
-      return acc + val.x / filteredSeats.length;
-    }, 0);
-    return [height * 0.05 - avgY / (height > 800 ? height > 999 ? 3.5 : 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), avgX * 0.3 + 0.15];
-  };
+
+  // render the map using ReactDOM.createPortal to avoid z-index issues
+  // in full screen mode, render the map in the body, otherwise render in the seating-plan-root div
+  const mapContainer = mounted && (isFullScreen ? (_document = document) === null || _document === void 0 ? void 0 : _document.body : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.getElementById("seating-plan-root"));
+  const backdropContainer = mounted && ((_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.body);
 
   // return seating plan
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "root"
+    className: "seating-plan-root",
+    id: "seating-plan-root"
   }, error ? /*#__PURE__*/_react.default.createElement("div", {
     className: "loading"
-  }, /*#__PURE__*/_react.default.createElement("h1", null, "OOPS!"), /*#__PURE__*/_react.default.createElement("div", null, error.response.data.message)) : position && area === areaId ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("h1", null, "OOPS!"), /*#__PURE__*/_react.default.createElement("div", null, error.response.data.message)) : position && area === areaId ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, backdropContainer && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
     className: "seating-plan-backdrop ".concat(isFullScreen ? "full-screen" : ""),
     onClick: () => setIsFullScreen(false)
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "seating-plan ".concat(isFullScreen ? "full-screen" : "")
+  }), backdropContainer), mapContainer && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
+    className: "seating-plan-container ".concat(isFullScreen ? "full-screen" : "")
   }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.MapContainer, {
     zoomSnap: 0,
     zoomDelta: 1,
-    whenReady: setMap,
-    center: calculateCenterOfMap(height, seats.seats),
+    center: (0, _utils.calculateCenterOfMap)(height, seats.seats),
     zoom: undefined,
     zoomControl: true,
     scrollWheelZoom: true,
     bounds: bounds
-  }, /*#__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.target.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),
-    className: "leaflet-control-zoom-in reload-seating-plan",
-    style: {
-      background: isReloading ? "rgb(0, 230, 64)" : "#fff"
-    }
-  }, /*#__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"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    title: "Expand Seating Plan",
-    onClick: () => {
-      setIsFullScreen(!isFullScreen);
-    },
-    className: "leaflet-control-zoom-in"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: isFullScreen ? _encodedSvgs.collapseIcon : _encodedSvgs.expandIcon,
-    style: {
-      height: "24px"
-    }
-  })))), /*#__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;
-    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") ? height / 33.33 - height / 33.33 * s.y * 0.0105 + 1.4 : height * 0.05 - s.y / (height > 800 ? height > 999 ? 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)) - 0.11, s.x * 0.3 + 0.15 - 0.11], [(s.r.includes("NORTH") ? height / 33.33 - height / 33.33 * s.y * 0.0105 + 1.4 : height * 0.05 - s.y / (height > 800 ? height > 999 ? 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)) + 0.11, s.x * 0.3 + 0.15 + 0.11]
-      // [height * 0.0302 - s.y * 0.602 - 0.3, s.x * 0.61 - 0.3],
-      // [height * 0.0302 - s.y * 0.602 + 0.3, s.x * 0.61 + 0.3],
-      // [height * 0.0302 - s.y * 0.602 - 0.17, s.x * 0.61 - 0.17],
-      // [height * 0.0302 - s.y * 0.602 + 0.17, s.x * 0.61 + 0.17],
-      ],
-
-      opacity: s.loading || ticketPopupOpen && (chosenSeat === null || chosenSeat === void 0 ? 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 === statuses.WHEELCHAIR_ACCESS ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
-      url: _encodedSvgs.wheelchairIcon,
-      bounds: [
-      // [
-      //   height * 0.0302 - s.y * 0.602 - 0.17,
-      //   s.x * 0.61 - 0.17,
-      // ],
-      // [
-      //   height * 0.0302 - s.y * 0.602 + 0.17,
-      //   s.x * 0.61 + 0.17,
-      // ],
-      [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 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) - 0.11, s.x * 0.3 + 0.15 - 0.11], [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 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) + 0.11, s.x * 0.3 + 0.15 + 0.11]],
-      zIndex: 10
-    }) : s.s === statuses.USER_PENDING && s.m ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
-      url: _encodedSvgs.userIcon,
-      bounds: [
-      // [
-      //   height * 0.0302 - s.y * 0.602 - 0.17,
-      //   s.x * 0.61 - 0.17,
-      // ],
-      // [
-      //   height * 0.0302 - s.y * 0.602 + 0.17,
-      //   s.x * 0.61 + 0.17,
-      // ],
-      [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 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) - 0.11, s.x * 0.3 + 0.15 - 0.15], [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 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) + 0.11, s.x * 0.3 + 0.15 + 0.15]],
-      zIndex: 10
-    }) : /*#__PURE__*/_react.default.createElement(_reactLeaflet.Circle, {
-      center: [
-      // height * 0.0305 -
-      //   s.y * 0.57 -
-      //   height * (height > 700 ? 0.0001 : 0.0006),
-      // s.x * 0.6 + 0.25,
-      //experimental
-      // 14.42,
-      // (height / 33.33 - 0.3 * s.y).toFixed(1)
-      // height / 33.33 - (height / 33.33) * s.y * 0.01, //29, //3 27, // height / 33.33 - s.y, // s.y * 0.3, //+ (height / 0.503) * 0.01, //11.66, // 5.2,
-      //working
-      s.r.includes("NORTH") ? height / 33.33 - height / 33.33 * s.y * 0.0105 + 1.4 : height * 0.05 - s.y / (height > 800 ? height > 999 ? 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),
-      // s.r.includes('NORTH')
-      //   ? 0
-      //   : 0,
-      s.x * 0.3 + 0.15
-
-      // height * 0.04 -
-      //   s.y / (height > 800 ? 3.5 : 3.35) -
-      //   (height > 800 ? height * 0.0101 : height * 0.0201),
-      // s.x * 0.3 + 0.15,
-
-      // -s.y * (height * 0.00037) + 24.2,
-      // s.x * 0.3 + 0.15,
-      ],
-
-      pathOptions: setInitialColor(s),
-      radius: 12000,
-      eventHandlers: {
-        click: e => handleClick(e, s),
-        popupopen: () => {
-          setTicketPopupOpen(true);
-        },
-        popupclose: () => {
-          setTicketPopupOpen(false);
-        }
-      }
-      // 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 === statuses.UNSOLD && /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, {
-      className: "ticket-popup"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "popup-header"
-    }, /*#__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.target.closePopup()
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: _encodedSvgs.closeIcon,
-      alt: "close"
-    }))), /*#__PURE__*/_react.default.createElement("p", {
-      className: "heading"
-    }, "Select option:"), seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === s.psId).map(price => /*#__PURE__*/_react.default.createElement("div", {
-      key: price.paId,
-      className: "priceage",
-      onClick: () => {
-        s.loading = true;
-        addTicketToCart(s, price);
-      }
-    }, /*#__PURE__*/_react.default.createElement("p", {
-      className: "price"
-    }, /*#__PURE__*/_react.default.createElement("span", null, price.paName), /*#__PURE__*/_react.default.createElement("span", null, NZDollar.format(price.p))))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
-  })))) : /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_Map.default, {
+    seats: seats,
+    height: height,
+    width: width,
+    bounds: bounds,
+    handleClickSeat: handleClickSeat,
+    ticketPopupOpen: ticketPopupOpen,
+    setTicketPopupOpen: setTicketPopupOpen,
+    chosenSeat: chosenSeat,
+    addTicketToCart: addTicketToCart,
+    isReloading: isReloading,
+    initialFetch: initialFetch,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen,
+    priceSectionIds: priceSectionIds,
+    areaName: areaName,
+    price: price
+  }))), mapContainer)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "loading"
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("svg", {
     width: "105",

package/dist/components/styles/index.css

@@ -7,7 +7,7 @@
   -moz-osx-font-smoothing: grayscale;
 } */
 
-.root {
+.seating-plan-root {
   width: 100%;
   height: 100%;
 }
@@ -922,7 +922,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 /* Full screen mode */
 
-.seating-plan {
+.seating-plan-container {
   border-radius: 5px;
   overflow: hidden;
 }
@@ -946,7 +946,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   z-index: 999;
 }
 
-.seating-plan.full-screen {
+.seating-plan-container.full-screen {
   position: fixed;
   top: 0;
   left: 0;
@@ -957,7 +957,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 
 @media screen and (max-width: 1024px) {
-  .seating-plan.full-screen {
+  .seating-plan-container.full-screen {
     height: 80%;
     width: calc(100% - 40px);
     margin: 10vh 20px;

package/dist/utils/enums.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.statuses = exports.statusColors = void 0;
+const statusColors = {
+  unknown: "#95a5a6",
+  available: "#00E640",
+  sold: "#95a5a6",
+  reserved: "#95a5a6",
+  pending: "#e74c3c",
+  booked: "#e74c3c",
+  bookedWithDifferentPrice: "#fab1a0"
+};
+exports.statusColors = statusColors;
+const statuses = {
+  UNSOLD: 1,
+  SOLD: 2,
+  RESERVED: 3,
+  USER_PENDING: 4,
+  CHEQUE_PENDING: 5,
+  WHEELCHAIR_ACCESS: 6,
+  DOOR_SALES: 7,
+  ON_HOLD: 8,
+  REAL_TIME_DOOR_SALES: 9,
+  CANCELLED: 10
+};
+exports.statuses = statuses;

package/dist/utils/helpers.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInitialColor = exports.calculateCenterOfMap = exports.NZDollar = void 0;
+var _enums = require("./enums");
+const getInitialColor = (s, price) => {
+  return {
+    fillColor: s.s === _enums.statuses.UNSOLD ? _enums.statusColors.available : s.s === _enums.statuses.USER_PENDING ? s.bookedPrice === price ? _enums.statusColors.booked : _enums.statusColors.bookedWithDifferentPrice : _enums.statusColors.sold,
+    color: "none",
+    fillOpacity: s.loading ? 0 : 1
+  };
+};
+exports.getInitialColor = getInitialColor;
+const calculateCenterOfMap = (height, seats, priceSectionIds) => {
+  const filteredSeats = seats.filter(price => !priceSectionIds || priceSectionIds.includes(price.psId));
+  const avgY = filteredSeats.reduce((acc, val) => {
+    return acc + val.y / filteredSeats.length;
+  }, 0);
+  const avgX = filteredSeats.reduce((acc, val) => {
+    return acc + val.x / filteredSeats.length;
+  }, 0);
+  return [height * 0.05 - avgY / (height > 800 ? height > 999 ? 3.5 : 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), avgX * 0.3 + 0.15];
+};
+exports.calculateCenterOfMap = calculateCenterOfMap;
+const NZDollar = new Intl.NumberFormat("en-NZ", {
+  style: "currency",
+  currency: "NZD"
+});
+exports.NZDollar = NZDollar;

package/dist/utils/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _enums = require("./enums");
+Object.keys(_enums).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _enums[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _enums[key];
+    }
+  });
+});
+var _helpers = require("./helpers");
+Object.keys(_helpers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _helpers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _helpers[key];
+    }
+  });
+});

package/package.json

@@ -2,7 +2,7 @@
   "name": "iticket-seatingplan-dev",
   "description": "Seating plan with FLEXi pricing",
   "author": "gedwyne",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "private": false,
   "keywords": [
     "iticket",
@@ -17,6 +17,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
     "leaflet": "^1.9.3",
+    "leaflet-gesture-handling": "^1.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-leaflet": "^4.2.1",