iticket-seatingplan-dev 1.5.5 → 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

@@ -5,15 +5,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 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,
@@ -24,45 +37,162 @@ function Map(_ref) {
     ticketPopupOpen,
     setTicketPopupOpen,
     chosenSeat,
+    bookedSeats,
     addTicketToCart,
+    batchRemoveTicketsFromCart,
     isReloading,
     initialFetch,
     isFullScreen,
     setIsFullScreen,
     priceSectionIds,
     areaName,
-    price
+    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 closeOnEscape = e => {
+    const keyboardHandler = e => {
       if (e.key === "Escape") {
-        if (isFullScreen && !ticketPopupOpen) {
-          setIsFullScreen(false);
-        } else if (ticketPopupOpen) {
+        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", closeOnEscape);
+      window.addEventListener("keydown", keyboardHandler);
     }
     return () => {
       if (typeof window !== "undefined") {
-        window.removeEventListener("keydown", closeOnEscape);
+        window.removeEventListener("keydown", keyboardHandler);
       }
     };
-  }, [isFullScreen, ticketPopupOpen]);
+  }, [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", {
@@ -126,7 +256,7 @@ function Map(_ref) {
     },
     className: "leaflet-control-zoom-in reload-seating-plan",
     style: {
-      background: isReloading ? "rgb(0, 230, 64)" : "#fff"
+      background: isReloading ? "rgb(0, 230, 64)" : undefined
     }
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: isReloading ? "rotate" : "",
@@ -141,7 +271,7 @@ function Map(_ref) {
   }, /*#__PURE__*/_react.default.createElement("button", {
     title: isFullScreen ? "Collapse Seating Plan" : "Expand Seating Plan",
     onClick: () => {
-      setIsFullScreen(!isFullScreen);
+      setIsFullScreen(prev => !prev);
     },
     className: "leaflet-control-zoom-in"
   }, /*#__PURE__*/_react.default.createElement("img", {
@@ -149,7 +279,87 @@ function Map(_ref) {
     style: {
       height: "24px"
     }
-  })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+  })))), 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",
@@ -166,78 +376,61 @@ function Map(_ref) {
     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") ? 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],
-      ],
+      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: [
-      // [
-      //   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]],
+      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: [
-      // [
-      //   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]],
+      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: [
-      // 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),
+      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 => handleClickSeat(e, s),
-        popupopen: () => {
+        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}
@@ -246,32 +439,71 @@ function Map(_ref) {
       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"
+      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("img", {
-      src: _encodedSvgs.closeIcon,
-      alt: "close"
-    }))), /*#__PURE__*/_react.default.createElement("p", {
+    }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, null))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "popup-content"
+    }, /*#__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("button", {
+    }, "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,
-      className: "priceage",
-      onClick: () => {
-        s.loading = true;
-        addTicketToCart(s, price);
-      },
-      disabled: price.is_available === false
-    }, /*#__PURE__*/_react.default.createElement("p", {
-      className: "price"
-    }, /*#__PURE__*/_react.default.createElement("span", null, price.paName), /*#__PURE__*/_react.default.createElement("span", null, _utils.NZDollar.format(price.p))), price.is_available === false && /*#__PURE__*/_react.default.createElement("span", {
-      className: "unavailable"
-    }, "Allocation exhausted"))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+      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
+  }));
+}