iticket-seatingplan-dev 1.6.9 → 1.7.1

package/dist/components/InvalidSeatsPopup.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InvalidSeatsPopup;
+var _react = _interopRequireDefault(require("react"));
+var _encodedSvgs = require("./assets/encodedSvgs");
+var _TicketIcon = _interopRequireDefault(require("./icons/TicketIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function InvalidSeatsPopup(_ref) {
+  let {
+    onClose
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "seatingplan-dialog-backdrop",
+    onClick: onClose
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "seatingplan-dialog remove-multiple-seats-popup",
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "popup-header"
+  }, /*#__PURE__*/_react.default.createElement(_TicketIcon.default, {
+    className: "ticket-icon",
+    height: "86px",
+    width: "86px"
+  }), /*#__PURE__*/_react.default.createElement("button", {
+    className: "close-button",
+    "aria-label": "close popup",
+    onClick: onClose
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _encodedSvgs.closeIconWhite,
+    alt: "close",
+    height: "20px",
+    width: "20px"
+  })), /*#__PURE__*/_react.default.createElement("h3", null, "Seat selection")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "seatingplan-dialog-content"
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    className: "quantity-heading"
+  }, "The seats you've chosen aren't available. They may leave a single seat on its own, or there may not be enough seats in the row for your selection. Please select different seats to continue."), /*#__PURE__*/_react.default.createElement("div", {
+    className: "buttons buttons-single"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "add-cart",
+    onClick: onClose
+  }, "Ok")))));
+}

package/dist/components/Map.js

@@ -59,10 +59,14 @@ function SeatMap(_ref) {
     setSelectQuantityPopupOpen,
     desiredSeatQuantity,
     setSeatsToRemove,
-    setRemoveMultipleSeatsPopupOpen
+    setRemoveMultipleSeatsPopupOpen,
+    setInvalidSeatsPopupOpen
   } = _ref;
   const [isLegendOpen, setIsLegendOpen] = (0, _react.useState)(false);
   const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const [highlightedSeats, setHighlightedSeats] = (0, _react.useState)([]);
+  const [greyedOutSeats, setGreyedOutSeats] = (0, _react.useState)([]);
+  const [clickedSeat, setClickedSeat] = (0, _react.useState)(null);
   const drawLayersRef = (0, _react.useRef)(null);
   const drawRef = (0, _react.useRef)(null);
   const popupRef = (0, _react.useRef)(null);
@@ -421,9 +425,7 @@ function SeatMap(_ref) {
       zIndex: 10
     }) : /*#__PURE__*/_react.default.createElement(_reactLeaflet.Circle, {
       center: [s.r.includes("NORTH") ? getNorthSeatLat(s) : seatCenter.lat, seatCenter.lng],
-      pathOptions: (0, _utils.getInitialColor)(s, price, !hasSeatPrices,
-      // TEST selected state for multiselect
-      !!selectedSeats.find(selectedSeat => selectedSeat.ssId === s.ssId)),
+      pathOptions: (0, _utils.getInitialColor)(s, price, !hasSeatPrices, selectedSeats.some(selectedSeat => selectedSeat.ssId === s.ssId) || highlightedSeats.some(hs => hs.ssId === s.ssId), greyedOutSeats.some(gs => gs.ssId === s.ssId)),
       radius: 12000,
       eventHandlers: {
         click: e => {
@@ -431,12 +433,22 @@ function SeatMap(_ref) {
             map.closePopup();
             if (s.s === _utils.statuses.USER_PENDING) {
               const newSeatsToRemove = (0, _utils.getAdjacentBookedSeats)(s, seatsMap);
-              setSeatsToRemove(newSeatsToRemove);
-              setRemoveMultipleSeatsPopupOpen(true);
+              if (newSeatsToRemove.length === 1) {
+                handleClickSeat(e, s);
+              } else {
+                setSeatsToRemove(newSeatsToRemove);
+                setRemoveMultipleSeatsPopupOpen(true);
+              }
+            } else if (highlightedSeats.length > 0 && highlightedSeats.length === desiredSeatQuantity) {
+              if ((0, _utils.isTouchScreen)() && clickedSeat !== s.ssId) {
+                setClickedSeat(s.ssId);
+              } else {
+                setSelectedSeats([...highlightedSeats]);
+                setPricingPopupOpen(true);
+              }
+            } else if (greyedOutSeats.some(gs => gs.ssId === s.ssId)) {
+              setInvalidSeatsPopupOpen(true);
             }
-            if (selectedSeats.length > 0 && selectedSeats.length === desiredSeatQuantity) {
-              setPricingPopupOpen(true);
-            } else if (s.s === _utils.statuses.USER_PENDING) {}
           } else if (mode === _utils.modes.SINGLE && hasSeatPrices) {
             handleClickSeat(e, s);
           }
@@ -462,12 +474,26 @@ function SeatMap(_ref) {
               setSelectedSeats(prev => [...prev, s]);
             }
           } else {
-            setSelectedSeats([]);
             if (seats.preventOrphanedSeats && desiredSeatQuantity > 0 && s.s === _utils.statuses.UNSOLD) {
               const seatsToBook = (0, _utils.getValidSeats)(s, seatsMap, desiredSeatQuantity);
-              setSelectedSeats(seatsToBook);
+              if (seatsToBook.valid) {
+                setHighlightedSeats(seatsToBook.seats);
+              } else {
+                setGreyedOutSeats(seatsToBook.seats);
+              }
             }
           }
+        },
+        mouseout: () => {
+          if (highlightedSeats.length > 0) {
+            setHighlightedSeats([]);
+          }
+          if (greyedOutSeats.length > 0) {
+            setGreyedOutSeats([]);
+          }
+          if (clickedSeat) {
+            setClickedSeat(null);
+          }
         }
       }
       // value={s}

package/dist/components/PricingPopup.js

@@ -62,21 +62,21 @@ const PriceSelect = _ref => {
 };
 function PricingPopup(_ref2) {
   let {
-    cancel,
+    onClose,
     groupedSelectedSeats,
     pricing,
     priceSectionIds,
     batchAddTicketsToCart,
     selectedSeatsWithPricing,
-    singleSeats
+    isSingleSeats
   } = _ref2;
   const [seatGroupsToBook, setSeatGroupsToBook] = (0, _react.useState)(groupedSelectedSeats);
   const [singleSeatsToBook, setSingleSeatsToBook] = (0, _react.useState)(selectedSeatsWithPricing);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pricing-popup-backdrop",
-    onClick: cancel
+    className: "seatingplan-dialog-backdrop",
+    onClick: onClose
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pricing-popup",
+    className: "seatingplan-dialog",
     role: "dialog",
     "aria-modal": "true"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -88,17 +88,17 @@ function PricingPopup(_ref2) {
   }), /*#__PURE__*/_react.default.createElement("button", {
     className: "close-button",
     "aria-label": "close popup",
-    onClick: cancel
+    onClick: onClose
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: _encodedSvgs.closeIconWhite,
     alt: "close",
     height: "20px",
     width: "20px"
   })), /*#__PURE__*/_react.default.createElement("h3", null, "Choose prices")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pricing-popup-content"
+    className: "seatingplan-dialog-content"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "seat-list"
-  }, !singleSeats && groupedSelectedSeats ? Object.entries(seatGroupsToBook).map(_ref3 => {
+  }, !isSingleSeats && groupedSelectedSeats ? Object.entries(seatGroupsToBook).map(_ref3 => {
     let [id, seatGroup] = _ref3;
     const seatPriceages = pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === parseInt(id));
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -119,7 +119,7 @@ function PricingPopup(_ref2) {
     }) : /*#__PURE__*/_react.default.createElement("p", {
       className: "no-prices-available"
     }, "Oops, looks like there are no prices available for this section."));
-  }) : singleSeats && selectedSeatsWithPricing ? selectedSeatsWithPricing.map(_ref4 => {
+  }) : isSingleSeats && selectedSeatsWithPricing ? selectedSeatsWithPricing.map(_ref4 => {
     let {
       seat,
       priceage
@@ -151,16 +151,16 @@ function PricingPopup(_ref2) {
     className: "buttons"
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "cancel",
-    onClick: cancel
+    onClick: onClose
   }, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
     className: "add-cart",
     onClick: () => {
-      singleSeats ? batchAddTicketsToCart(singleSeatsToBook) : batchAddTicketsToCart(Object.values(seatGroupsToBook).filter(v => !!v.priceage).flatMap(s => s.seats.map(seat => ({
+      isSingleSeats ? batchAddTicketsToCart(singleSeatsToBook) : batchAddTicketsToCart(Object.values(seatGroupsToBook).filter(v => !!v.priceage).flatMap(s => s.seats.map(seat => ({
         seat,
         priceage: s.priceage
       }))));
-      cancel();
+      onClose();
     },
-    disabled: singleSeats ? singleSeatsToBook.every(v => !v.priceage) : Object.values(seatGroupsToBook).every(v => !v.priceage)
+    disabled: isSingleSeats ? singleSeatsToBook.every(v => !v.priceage) : Object.values(seatGroupsToBook).every(v => !v.priceage)
   }, "Add to cart")))));
 }

package/dist/components/RemoveMultipleSeatsPopup.js

@@ -14,10 +14,10 @@ function RemoveMultipleSeatsPopup(_ref) {
     onClose
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pricing-popup-backdrop",
+    className: "seatingplan-dialog-backdrop",
     onClick: onClose
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pricing-popup remove-multiple-seats-popup",
+    className: "seatingplan-dialog remove-multiple-seats-popup",
     role: "dialog",
     "aria-modal": "true"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -36,7 +36,7 @@ function RemoveMultipleSeatsPopup(_ref) {
     height: "20px",
     width: "20px"
   })), /*#__PURE__*/_react.default.createElement("h3", null, "Remove from cart")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pricing-popup-content"
+    className: "seatingplan-dialog-content"
   }, /*#__PURE__*/_react.default.createElement("h4", {
     className: "quantity-heading"
   }, "This will remove all adjacent seats from your cart. Are you sure you want to proceed?"), /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/SeatingPlan.js

@@ -15,6 +15,7 @@ var _reactDom = require("react-dom");
 var _PricingPopup = _interopRequireDefault(require("./PricingPopup"));
 var _SelectQuantityPopup = _interopRequireDefault(require("./SelectQuantityPopup"));
 var _RemoveMultipleSeatsPopup = _interopRequireDefault(require("./RemoveMultipleSeatsPopup"));
+var _InvalidSeatsPopup = _interopRequireDefault(require("./InvalidSeatsPopup"));
 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; }
@@ -64,6 +65,7 @@ const SeatingPlan = _ref => {
   const [selectedSeats, setSelectedSeats] = (0, _react.useState)([]);
   const [seatsToRemove, setSeatsToRemove] = (0, _react.useState)([]);
   const [removeMultipleSeatsPopupOpen, setRemoveMultipleSeatsPopupOpen] = (0, _react.useState)(false);
+  const [invalidSeatsPopupOpen, setInvalidSeatsPopupOpen] = (0, _react.useState)(false);
   const mapRef = (0, _react.useRef)(null);
   const canMultiSelect = bookingMode === _utils.bookingModes.POS;
   const apiUrl = "".concat(baseUrl, "/legacy/").concat(countryCode, "/shop/events/").concat(eventId, "/").concat(eventVenueId, "/showings/").concat(showingId, "/tickets/allocated/").concat(areaId);
@@ -290,7 +292,7 @@ const SeatingPlan = _ref => {
     try {
       for (let seat of seatsToBook) {
         try {
-          await fetch(apiUrl, {
+          const res = await fetch(apiUrl, {
             method: "POST",
             body: JSON.stringify({
               priceAgeId: seat.priceage.paId,
@@ -303,6 +305,9 @@ const SeatingPlan = _ref => {
               "basket-key": sessionId
             }
           });
+          if (!res.ok) {
+            throw new Error("".concat(res.status));
+          }
           succeeded.push(seat);
         } catch (error) {
           console.error("Failed to book seat ".concat(seat, ":"), error);
@@ -396,12 +401,15 @@ const SeatingPlan = _ref => {
     try {
       for (let seat of seatsToRemove) {
         try {
-          await fetch("".concat(apiUrl, "/seat/").concat(seat.ssId), {
+          const res = await fetch("".concat(apiUrl, "/seat/").concat(seat.ssId), {
             method: "DELETE",
             headers: {
               "basket-key": sessionId
             }
           });
+          if (!res.ok) {
+            throw new Error("".concat(res.status));
+          }
           succeededIds.push(seat.ssId);
         } catch (error) {
           console.error("Failed to remove seat ".concat(seat, ":"), error);
@@ -580,10 +588,6 @@ const SeatingPlan = _ref => {
     }
     return acc;
   }, {});
-  const cancelPriceSelect = () => {
-    setPricingPopupOpen(false);
-    setSelectedSeats([]);
-  };
 
   // return seating plan
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -598,27 +602,32 @@ const SeatingPlan = _ref => {
     className: "seating-plan-container ".concat(isFullScreen ? "full-screen" : ""),
     "data-mode": mode
   }, pricingPopupOpen && (canMultiSelect || seats.preventOrphanedSeats) ? /*#__PURE__*/_react.default.createElement(_PricingPopup.default, {
-    cancel: cancelPriceSelect,
+    onClose: () => {
+      setPricingPopupOpen(false);
+      setSelectedSeats([]);
+    },
     groupedSelectedSeats: groupedSelectedSeats,
     selectedSeatsWithPricing: selectedSeatsWithPricing,
     priceSectionIds: priceSectionIds,
     pricing: seats.pricing,
     batchAddTicketsToCart: batchAddTicketsToCart,
-    singleSeats: seats.preventOrphanedSeats
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), selectQuantityPopupOpen && /*#__PURE__*/_react.default.createElement(_SelectQuantityPopup.default, {
+    isSingleSeats: seats.preventOrphanedSeats
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), seats.preventOrphanedSeats && selectQuantityPopupOpen ? /*#__PURE__*/_react.default.createElement(_SelectQuantityPopup.default, {
     quantity: desiredSeatQuantity,
     setQuantity: v => {
       setDesiredSeatQuantity(v);
       setSelectedSeats([]);
     },
     onClose: () => setSelectQuantityPopupOpen(false)
-  }), removeMultipleSeatsPopupOpen && /*#__PURE__*/_react.default.createElement(_RemoveMultipleSeatsPopup.default, {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), seats.preventOrphanedSeats && removeMultipleSeatsPopupOpen ? /*#__PURE__*/_react.default.createElement(_RemoveMultipleSeatsPopup.default, {
     onConfirm: () => {
       batchRemoveTicketsFromCart(seatsToRemove);
       setRemoveMultipleSeatsPopupOpen(false);
     },
     onClose: () => setRemoveMultipleSeatsPopupOpen(false)
-  }), /*#__PURE__*/_react.default.createElement(_reactLeaflet.MapContainer, {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), seats.preventOrphanedSeats && invalidSeatsPopupOpen ? /*#__PURE__*/_react.default.createElement(_InvalidSeatsPopup.default, {
+    onClose: () => setInvalidSeatsPopupOpen(false)
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_reactLeaflet.MapContainer, {
     zoomSnap: 0,
     zoomDelta: 1,
     center: (0, _utils.calculateCenterOfMap)(height, seats.seats),
@@ -660,7 +669,8 @@ const SeatingPlan = _ref => {
     setSelectQuantityPopupOpen: setSelectQuantityPopupOpen,
     desiredSeatQuantity: desiredSeatQuantity,
     setSeatsToRemove: setSeatsToRemove,
-    setRemoveMultipleSeatsPopupOpen: setRemoveMultipleSeatsPopupOpen
+    setRemoveMultipleSeatsPopupOpen: setRemoveMultipleSeatsPopupOpen,
+    setInvalidSeatsPopupOpen: setInvalidSeatsPopupOpen
   }))), mapContainer)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "loading"
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("svg", {

package/dist/components/SelectQuantityPopup.js

@@ -37,10 +37,10 @@ function SelectQuantityPopup(_ref2) {
   } = _ref2;
   const [newQuantity, setNewQuantity] = (0, _react.useState)(quantity);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pricing-popup-backdrop",
+    className: "seatingplan-dialog-backdrop",
     onClick: onClose
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pricing-popup",
+    className: "seatingplan-dialog",
     role: "dialog",
     "aria-modal": "true"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -59,7 +59,7 @@ function SelectQuantityPopup(_ref2) {
     height: "20px",
     width: "20px"
   })), /*#__PURE__*/_react.default.createElement("h3", null, "Choose seats")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pricing-popup-content"
+    className: "seatingplan-dialog-content"
   }, /*#__PURE__*/_react.default.createElement("h4", {
     className: "quantity-heading"
   }, "How many seats would you like to book?"), /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/styles/index.css

@@ -1098,6 +1098,210 @@ svg.leaflet-image-layer.leaflet-interactive path {
   }
 }
 
+.seatingplan-dialog-backdrop {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 1001;
+  animation: fade-in 400ms;
+}
+
+.seatingplan-dialog-content {
+  padding: 1rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.seatingplan-dialog {
+  position: absolute;
+  z-index: 1002;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: fade-in 400ms;
+  background-color: #fff;
+  /* font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; */
+  font-family: inherit;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+  border-radius: 12px;
+  min-width: 20rem;
+  max-height: 95%;
+  display: flex;
+  flex-direction: column;
+}
+
+@media screen and (max-width: 600px) {
+  .seatingplan-dialog {
+    width: 100%;
+    min-width: unset;
+  }
+}
+
+.seatingplan-dialog.remove-multiple-seats-popup {
+  min-width: unset;
+  max-width: 28rem;
+}
+
+.seatingplan-dialog .popup-header {
+  margin-top: 0;
+  padding: 1rem;
+  border-radius: 12px 12px 0px 0px;
+  flex-direction: column;
+  text-align: left;
+  gap: 0.5rem;
+}
+
+.seatingplan-dialog .popup-header .close-button {
+  margin: -2px -2px 0px 0px;
+  align-self: flex-end;
+}
+
+.seatingplan-dialog h3,
+.seatingplan-dialog h4 {
+  font-weight: bold;
+  margin: 0;
+}
+
+.seatingplan-dialog .quantity-heading {
+  font-weight: normal;
+  text-align: left;
+  font-size: 0.875rem;
+  margin-bottom: 8px;
+}
+
+.seatingplan-dialog p {
+  margin: 0;
+  max-width: 30rem;
+}
+
+.seatingplan-dialog .seat-names {
+  font-size: 0.9rem;
+}
+
+.seatingplan-dialog .seat-list {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.seatingplan-dialog .seat-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.seatingplan-dialog .seat-group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 1rem;
+  font-size: 0.9rem;
+}
+
+.seatingplan-dialog select {
+  flex: 1;
+  padding: 0.3rem 0.2rem;
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+}
+
+.seatingplan-dialog .buttons {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1.2rem;
+}
+
+.seatingplan-dialog .buttons.buttons-single {
+  justify-content: center;
+}
+
+.seatingplan-dialog .buttons button {
+  display: block;
+  background: transparent;
+  min-width: 12rem;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  border: 1px solid #333;
+  margin-bottom: 0.2rem;
+  cursor: pointer;
+  margin-bottom: 0;
+}
+
+.seatingplan-dialog .buttons.buttons-single button {
+  width: 100%;
+}
+
+.seatingplan-dialog .buttons button.add-cart {
+  background: var(--accent);
+  color: white;
+  font-weight: bold;
+  border: none;
+}
+
+.seatingplan-dialog .buttons button.add-cart:hover:not(:disabled) {
+  background: var(--accent-light);
+  color: var(--accent-dark);
+}
+
+@media screen and (max-width: 600px) {
+  .seatingplan-dialog .buttons button {
+    min-width: 8rem;
+  }
+}
+
+.seatingplan-dialog .buttons button:disabled {
+  cursor: default;
+  color: #bdc3c7;
+  border-color: #bdc3c7;
+}
+
+.seatingplan-dialog .buttons button:hover:not(:disabled) {
+  background: #ecf0f1;
+  transition: 0.2s;
+}
+
+.seatingplan-dialog .no-prices-available {
+  font-size: 0.8rem;
+  color: red;
+}
+
+.seatingplan-dialog button.cancel {
+  background: #dcdcdc;
+  border: none;
+}
+
+.seatingplan-dialog .price-select {
+  display: flex;
+  gap: 8px;
+}
+
+.seatingplan-dialog .flexi-button {
+  width: max-content;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  border: none;
+  text-decoration: underline;
+  background: transparent;
+  cursor: pointer;
+  animation: fade-in 200ms;
+  font-weight: 600;
+  transition: 0.2s;
+}
+
+.flexi-button:hover {
+  background: #ecf0f1;
+}
+
 /* Printing */
 
 @media print {

package/dist/components/styles/pos.css

@@ -1,201 +1,3 @@
-/* Popup to select prices */
-
-.pricing-popup-backdrop {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  z-index: 1001;
-  animation: fade-in 400ms;
-}
-
-.pricing-popup-content {
-  padding: 1rem;
-  flex: 1;
-  overflow-y: auto;
-}
-
-.pricing-popup {
-  position: absolute;
-  z-index: 1002;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation: fade-in 400ms;
-  background-color: #fff;
-  /* font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; */
-  font-family: inherit;
-  color: #333;
-  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
-  border-radius: 12px;
-  min-width: 20rem;
-  max-height: 95%;
-  display: flex;
-  flex-direction: column;
-}
-
-@media screen and (max-width: 600px) {
-  .pricing-popup {
-    width: 100%;
-    min-width: unset;
-  }
-}
-
-.pricing-popup.remove-multiple-seats-popup {
-  min-width: unset;
-  max-width: 28rem;
-}
-
-.pricing-popup .popup-header {
-  margin-top: 0;
-  padding: 1rem;
-  border-radius: 12px 12px 0px 0px;
-  flex-direction: column;
-  text-align: left;
-  gap: 0.5rem;
-}
-
-.pricing-popup .popup-header .close-button {
-  margin: -2px -2px 0px 0px;
-  align-self: flex-end;
-}
-
-.pricing-popup h3,
-.pricing-popup h4 {
-  font-weight: bold;
-  margin: 0;
-}
-
-.pricing-popup .quantity-heading {
-  font-weight: normal;
-  text-align: left;
-  font-size: 0.875rem;
-  margin-bottom: 8px;
-}
-
-.pricing-popup p {
-  margin: 0;
-  max-width: 30rem;
-}
-
-.pricing-popup .seat-names {
-  font-size: 0.9rem;
-}
-
-.pricing-popup .seat-list {
-  text-align: left;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.pricing-popup .seat-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.pricing-popup .seat-group-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  gap: 1rem;
-  font-size: 0.9rem;
-}
-
-.pricing-popup select {
-  flex: 1;
-  padding: 0.3rem 0.2rem;
-  border: 1px solid #ccc;
-  border-radius: 0.25rem;
-}
-
-.pricing-popup .buttons {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-top: 1.2rem;
-}
-
-.pricing-popup .buttons button {
-  display: block;
-  background: transparent;
-  min-width: 12rem;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  border: 1px solid #333;
-  margin-bottom: 0.2rem;
-  cursor: pointer;
-  margin-bottom: 0;
-}
-
-.pricing-popup .buttons button.add-cart {
-  background: var(--accent);
-  color: white;
-  font-weight: bold;
-  border: none;
-}
-
-.pricing-popup .buttons button.add-cart:hover:not(:disabled) {
-  background: var(--accent-light);
-  color: var(--accent-dark);
-}
-
-@media screen and (max-width: 600px) {
-  .pricing-popup .buttons button {
-    min-width: 8rem;
-  }
-}
-
-.pricing-popup .buttons button:disabled {
-  cursor: default;
-  color: #bdc3c7;
-  border-color: #bdc3c7;
-}
-
-.pricing-popup .buttons button:hover:not(:disabled) {
-  background: #ecf0f1;
-  transition: 0.2s;
-}
-
-.pricing-popup .no-prices-available {
-  font-size: 0.8rem;
-  color: red;
-}
-
-.pricing-popup button.cancel {
-  background: #dcdcdc;
-  border: none;
-}
-
-.pricing-popup .price-select {
-  display: flex;
-  gap: 8px;
-}
-
-.pricing-popup .flexi-button {
-  width: max-content;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  border: none;
-  text-decoration: underline;
-  background: transparent;
-  cursor: pointer;
-  animation: fade-in 200ms;
-  font-weight: 600;
-  transition: 0.2s;
-}
-
-.flexi-button:hover {
-  background: #ecf0f1;
-}
-
 /* Button controls */
 
 .leaflet-draw.leaflet-control {

package/dist/utils/enums.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.statuses = exports.statusColors = exports.modes = exports.bookingModes = void 0;
 const statusColors = exports.statusColors = {
-  unknown: "#95a5a6",
+  unknown: "#bdc3c7",
   available: "#00E640",
   sold: "#95a5a6",
   reserved: "#95a5a6",

package/dist/utils/helpers.js

@@ -3,15 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getValidSeats = exports.getRowSection = exports.getInitialColor = exports.getAdjacentBookedSeats = exports.createsOrphan = exports.canSelectSingleSeatGivenOrphanRules = exports.calculateCenterOfMap = exports.NZDollar = void 0;
+exports.isTouchScreen = exports.getValidSeats = exports.getRowSection = exports.getInitialColor = exports.getAdjacentBookedSeats = exports.createsOrphan = exports.canSelectSingleSeatGivenOrphanRules = exports.calculateCenterOfMap = exports.NZDollar = void 0;
 var _enums = require("./enums");
+const isTouchScreen = () => {
+  let hasTouchScreen = false;
+  if (typeof window !== "undefined") {
+    if ("maxTouchPoints" in window.navigator) {
+      hasTouchScreen = window.navigator.maxTouchPoints > 0;
+    } else {
+      var _matchMedia;
+      const mQ = (_matchMedia = matchMedia) === null || _matchMedia === void 0 ? void 0 : _matchMedia("(pointer:coarse)");
+      if ((mQ === null || mQ === void 0 ? void 0 : mQ.media) === "(pointer:coarse)") {
+        hasTouchScreen = !!mQ.matches;
+      }
+    }
+  }
+  return hasTouchScreen;
+};
+exports.isTouchScreen = isTouchScreen;
 const getInitialColor = (s, price, disabled, selected, greyedOut) => {
   // selected state for multiselect
   if (selected) {
     return {
       fillColor: _enums.statusColors.selected,
       color: "none",
-      fillOpacity: s.loading ? 0 : 1
+      fillOpacity: s.loading ? 0 : 1,
+      stroke: false
     };
   }
   if (greyedOut) {
@@ -94,55 +111,88 @@ const canSelectSingleSeatGivenOrphanRules = (seat, rowSection) => {
   return true;
 };
 exports.canSelectSingleSeatGivenOrphanRules = canSelectSingleSeatGivenOrphanRules;
+const traverse = (arr, seat, direction, rowSectionMap, desiredSeatQuantity, rowSection, ignoreOrphans) => {
+  const nextSeatId = direction === "left" ? seat.sb : seat.sa;
+  if (nextSeatId) {
+    const nextSeat = rowSectionMap.get(nextSeatId);
+    if (nextSeat && nextSeat.s === _enums.statuses.UNSOLD && arr.length < desiredSeatQuantity && !(!ignoreOrphans && arr.length === desiredSeatQuantity - 1 && createsOrphan(nextSeat, rowSection, false, arr)) && !arr.some(s => s.sId === nextSeat.sId)) {
+      if (direction === "left") {
+        arr.unshift(nextSeat);
+      } else {
+        arr.push(nextSeat);
+      }
+      if (arr.length < desiredSeatQuantity) {
+        traverse(arr, nextSeat, direction, rowSectionMap, desiredSeatQuantity, rowSection, ignoreOrphans);
+      }
+    }
+  }
+};
+const getSeats = (seat, rowSectionMap, desiredSeatQuantity, rowSection, ignoreOrphans) => {
+  let seats = [seat];
+  traverse(seats, seat, "right", rowSectionMap, desiredSeatQuantity, rowSection, ignoreOrphans);
+  if (seats.length < desiredSeatQuantity) {
+    traverse(seats, seat, "left", rowSectionMap, desiredSeatQuantity, rowSection, ignoreOrphans);
+  }
+  const firstSeat = seats[0];
+  const sb = rowSectionMap.get(firstSeat.sb);
+  const sbb = rowSectionMap.get(sb === null || sb === void 0 ? void 0 : sb.sb);
+  const orphanToLeft = sb && sbb && sb.s === _enums.statuses.UNSOLD && sbb.s !== _enums.statuses.UNSOLD || sb && !sbb && sb.s === _enums.statuses.UNSOLD;
+  if (seats.length < desiredSeatQuantity || orphanToLeft && !ignoreOrphans) {
+    seats = [seat];
+    traverse(seats, seat, "left", rowSectionMap, desiredSeatQuantity, rowSection, ignoreOrphans);
+    if (seats.length < desiredSeatQuantity) {
+      traverse(seats, seat, "right", rowSectionMap, desiredSeatQuantity, rowSection, ignoreOrphans);
+    }
+  }
+  const lastSeat = seats[seats.length - 1];
+  const sa = rowSectionMap.get(lastSeat.sa);
+  const saa = rowSectionMap.get(sa === null || sa === void 0 ? void 0 : sa.sa);
+  const orphanToRight = sa && saa && sa.s === _enums.statuses.UNSOLD && saa.s !== _enums.statuses.UNSOLD || sa && !saa && sa.s === _enums.statuses.UNSOLD;
+  if (orphanToRight && !ignoreOrphans) {
+    return [];
+  }
+  return seats;
+};
 const getValidSeats = (s, seatsMap, desiredSeatQuantity) => {
-  let seatsToBook = [s];
   const rowSection = getRowSection(s, seatsMap);
+  const rowSectionMap = new Map(rowSection.map(seat => [seat.sId, seat]));
+  if (s && desiredSeatQuantity === 1) {
+    return {
+      seats: [s],
+      valid: canSelectSingleSeatGivenOrphanRules(s, rowSection) ? true : false
+    };
+  }
+  const seatsToBook = getSeats(s, rowSectionMap, desiredSeatQuantity, rowSection);
   if (seatsToBook.length < desiredSeatQuantity) {
-    const traverse = (seat, direction) => {
-      const nextSeatId = direction === "left" ? seat.sb : seat.sa;
-      if (nextSeatId) {
-        const nextSeat = rowSection.find(v => v.sId === nextSeatId);
-        if (nextSeat && nextSeat.s === _enums.statuses.UNSOLD && seatsToBook.length < desiredSeatQuantity && !(seatsToBook.length === desiredSeatQuantity - 1 && createsOrphan(nextSeat, rowSection, false, seatsToBook))) {
-          if (direction === "left") {
-            seatsToBook.unshift(nextSeat);
-          } else {
-            seatsToBook.push(nextSeat);
-          }
-          if (seatsToBook.length < desiredSeatQuantity) {
-            traverse(nextSeat, direction);
+    let hasOtherOptions = false;
+    const orphaningSeats = getSeats(s, rowSectionMap, desiredSeatQuantity, rowSection, true);
+    if (orphaningSeats.length === desiredSeatQuantity) {
+      const otherAvailableSeats = rowSection.filter(seat => seat.s === _enums.statuses.UNSOLD && seat.sId !== s.sId);
+      if (otherAvailableSeats.length > 0) {
+        for (const seat of otherAvailableSeats) {
+          const possibleSeats = getSeats(seat, rowSectionMap, desiredSeatQuantity, rowSection);
+          if (possibleSeats.length === desiredSeatQuantity) {
+            hasOtherOptions = true;
+            break;
           }
         }
       }
-    };
-    traverse(s, "right");
-    if (seatsToBook.length < desiredSeatQuantity) {
-      traverse(s, "left");
+      return {
+        seats: orphaningSeats,
+        valid: hasOtherOptions ? false : true
+      };
     }
-    const firstSeat = seatsToBook[0];
-    const sb = rowSection.find(v => v.sId === firstSeat.sb);
-    const sbb = rowSection.find(v => v.sId === (sb === null || sb === void 0 ? void 0 : sb.sb));
-    const orphanToLeft = sb && sbb && sb.s === _enums.statuses.UNSOLD && sbb.s !== _enums.statuses.UNSOLD || sb && !sbb && sb.s === _enums.statuses.UNSOLD;
-    if (seatsToBook.length < desiredSeatQuantity || orphanToLeft) {
-      seatsToBook = [s];
-      traverse(s, "left");
-      if (seatsToBook.length < desiredSeatQuantity) {
-        traverse(s, "right");
-      }
-    }
-  }
-  if (seatsToBook.length === 1 && desiredSeatQuantity === 1) {
-    return canSelectSingleSeatGivenOrphanRules(s, rowSection) ? seatsToBook : [];
   }
-  if (seatsToBook.length === desiredSeatQuantity && !(seatsToBook.length === 1 && createsOrphan(s, rowSection, false, seatsToBook))) {
-    return seatsToBook;
-  }
-  return [];
+  return {
+    seats: seatsToBook,
+    valid: seatsToBook.length === desiredSeatQuantity ? true : false
+  };
 };
 exports.getValidSeats = getValidSeats;
 const getAdjacentBookedSeats = (seat, seatsMap) => {
   const rowSection = getRowSection(seat, seatsMap);
   const adjacentBookedSeats = [seat];
-  const traverse = (seat, direction) => {
+  const traverseRow = (seat, direction) => {
     const nextSeatId = direction === "left" ? seat.sb : seat.sa;
     if (nextSeatId) {
       const nextSeat = rowSection.find(v => v.sId === nextSeatId);
@@ -152,12 +202,12 @@ const getAdjacentBookedSeats = (seat, seatsMap) => {
         } else {
           adjacentBookedSeats.push(nextSeat);
         }
-        traverse(nextSeat, direction);
+        traverseRow(nextSeat, direction);
       }
     }
   };
-  traverse(seat, "right");
-  traverse(seat, "left");
+  traverseRow(seat, "right");
+  traverseRow(seat, "left");
   return adjacentBookedSeats;
 };
 exports.getAdjacentBookedSeats = getAdjacentBookedSeats;

package/package.json

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