iticket-seatingplan-dev 1.6.6 → 1.6.8

package/dist/components/Map.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Map;
+exports.default = SeatMap;
 require("./styles/gestureHandling.css");
 require("leaflet-draw/dist/leaflet.draw.css");
 var _react = _interopRequireWildcard(require("react"));
@@ -11,7 +11,7 @@ var _reactLeaflet = require("react-leaflet");
 var L = _interopRequireWildcard(require("leaflet"));
 var _reactLeafletDraw = require("react-leaflet-draw");
 var _gestureHandling2 = require("./gestureHandling");
-var _Control = _interopRequireDefault(require("./Control"));
+var _reactLeafletCustomControl = _interopRequireDefault(require("react-leaflet-custom-control"));
 var _encodedSvgs = require("./assets/encodedSvgs");
 var _utils = require("../utils");
 var _PriceButton = _interopRequireDefault(require("./PriceButton"));
@@ -19,6 +19,7 @@ var _Flexi = _interopRequireDefault(require("./Flexi"));
 var _CloseIcon = _interopRequireDefault(require("./icons/CloseIcon"));
 var _TicketIcon = _interopRequireDefault(require("./icons/TicketIcon"));
 var _FlexiIcon = _interopRequireDefault(require("./icons/FlexiIcon"));
+var _EditIcon = _interopRequireDefault(require("./icons/EditIcon"));
 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; }
@@ -27,7 +28,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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) {
+function SeatMap(_ref) {
   let {
     seats,
     height,
@@ -53,7 +54,12 @@ function Map(_ref) {
     pricingPopupOpen,
     setPricingPopupOpen,
     selectedSeats,
-    setSelectedSeats
+    setSelectedSeats,
+    selectQuantityPopupOpen,
+    setSelectQuantityPopupOpen,
+    desiredSeatQuantity,
+    setSeatsToRemove,
+    setRemoveMultipleSeatsPopupOpen
   } = _ref;
   const [isLegendOpen, setIsLegendOpen] = (0, _react.useState)(false);
   const [isDragging, setIsDragging] = (0, _react.useState)(false);
@@ -195,7 +201,22 @@ function Map(_ref) {
       map.dragging.disable();
     }
   }, [mode, map]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Control.default, {
+  const seatsMap = (0, _react.useMemo)(() => new Map(seats.seats.map(s => [s.sId, s])), [seats.seats]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, seats.preventOrphanedSeats && /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "topright"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "extra-controls seat-quantity-control"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    title: "Quantity of seats to book",
+    onClick: () => {
+      setSelectQuantityPopupOpen(prev => !prev);
+    },
+    className: "leaflet-control-seat-quantity"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Selecting ", desiredSeatQuantity, " ", desiredSeatQuantity === 1 ? "seat" : "seats"), /*#__PURE__*/_react.default.createElement(_EditIcon.default, {
+    height: "16px",
+    width: "16px",
+    strokeWidth: "2"
+  })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
     position: "bottomright"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "legendBox"
@@ -236,7 +257,7 @@ function Map(_ref) {
     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(_Control.default, {
+  }), /*#__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"
@@ -266,7 +287,7 @@ function Map(_ref) {
     style: {
       height: "17px"
     }
-  })))), /*#__PURE__*/_react.default.createElement(_Control.default, {
+  })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
     position: "topleft"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "extra-controls full-screen-control"
@@ -281,7 +302,7 @@ function Map(_ref) {
     style: {
       height: "24px"
     }
-  })))), canMultiSelect && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Control.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"
@@ -361,7 +382,7 @@ function Map(_ref) {
     onMounted: drawInstance => {
       drawRef.current = drawInstance;
     }
-  }))), /*#__PURE__*/_react.default.createElement(_Control.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
     position: "topright"
   }, /*#__PURE__*/_react.default.createElement("button", {
     title: "Close full screen",
@@ -381,6 +402,7 @@ function Map(_ref) {
     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 hasSeatPrices = (seatPrices === null || seatPrices === void 0 ? void 0 : seatPrices.length) > 0;
     const isSingleFlexi = seatPrices.length === 1 && !!seatPrices[0].pMax && !!seatPrices[0].pMin && seatPrices[0].pMax > seatPrices[0].pMin;
     return /*#__PURE__*/_react.default.createElement("div", {
       key: i
@@ -399,16 +421,23 @@ function Map(_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
+      pathOptions: (0, _utils.getInitialColor)(s, price, !hasSeatPrices,
       // TEST selected state for multiselect
-      // !!selectedSeats.find(
-      //   (selectedSeat) => selectedSeat.ssId === s.ssId
-      // )
-      ),
+      !!selectedSeats.find(selectedSeat => selectedSeat.ssId === s.ssId)),
       radius: 12000,
       eventHandlers: {
         click: e => {
-          if (mode === _utils.modes.SINGLE) {
+          if (seats.preventOrphanedSeats && desiredSeatQuantity > 0) {
+            map.closePopup();
+            if (s.s === _utils.statuses.USER_PENDING) {
+              const newSeatsToRemove = (0, _utils.getAdjacentBookedSeats)(s, seatsMap);
+              setSeatsToRemove(newSeatsToRemove);
+              setRemoveMultipleSeatsPopupOpen(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);
           }
         },
@@ -421,17 +450,23 @@ function Map(_ref) {
           popupRef.current = null;
         },
         mousedown: () => {
-          if ((mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE) && canMultiSelect) {
+          if ((mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE) && canMultiSelect && hasSeatPrices) {
             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 ((mode === _utils.modes.DRAG || mode === _utils.modes.REMOVE) && isDragging && canMultiSelect && hasSeatPrices) {
             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]);
             }
+          } else {
+            setSelectedSeats([]);
+            if (seats.preventOrphanedSeats && desiredSeatQuantity > 0 && s.s === _utils.statuses.UNSOLD) {
+              const seatsToBook = (0, _utils.getValidSeats)(s, seatsMap, desiredSeatQuantity);
+              setSelectedSeats(seatsToBook);
+            }
           }
         }
       }
@@ -440,7 +475,7 @@ function Map(_ref) {
       className: "seatname-tooltip",
       direction: "top",
       offset: [0, height * 0.03 + -30]
-    }, s.r + "-" + s.c), s.s === _utils.statuses.UNSOLD && /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, {
+    }, s.r + "-" + s.c), s.s === _utils.statuses.UNSOLD && hasSeatPrices ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, {
       className: "ticket-popup popup-".concat(s.sId)
     }, isSingleFlexi ? /*#__PURE__*/_react.default.createElement("div", {
       className: "single-flexi"
@@ -488,7 +523,7 @@ function Map(_ref) {
       className: "heading"
     }, "Select option:"), /*#__PURE__*/_react.default.createElement("div", {
       className: "priceages"
-    }, seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === s.psId).map(price => /*#__PURE__*/_react.default.createElement(_PriceButton.default, {
+    }, seatPrices.map(price => /*#__PURE__*/_react.default.createElement(_PriceButton.default, {
       key: price.paId,
       price: price,
       addToCart: amount => addTicketToCart(s, _objectSpread(_objectSpread({}, price), {}, {
@@ -506,6 +541,6 @@ function Map(_ref) {
           }
         }
       }
-    }))))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+    })))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
   }));
 }

package/dist/components/PricingPopup.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../utils");
 var _encodedSvgs = require("./assets/encodedSvgs");
 var _Flexi = _interopRequireDefault(require("./Flexi"));
+var _TicketIcon = _interopRequireDefault(require("./icons/TicketIcon"));
 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; }
@@ -61,34 +62,43 @@ const PriceSelect = _ref => {
 };
 function PricingPopup(_ref2) {
   let {
-    cancelPriceSelect,
+    cancel,
     groupedSelectedSeats,
     pricing,
     priceSectionIds,
-    batchAddTicketsToCart
+    batchAddTicketsToCart,
+    selectedSeatsWithPricing,
+    singleSeats
   } = _ref2;
-  const [seatsToBook, setSeatsToBook] = (0, _react.useState)(groupedSelectedSeats);
+  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: cancelPriceSelect
+    onClick: cancel
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "pricing-popup",
     role: "dialog",
     "aria-modal": "true"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "popup-header"
-  }, /*#__PURE__*/_react.default.createElement("h3", null, "Choose prices"), /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__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: cancelPriceSelect
+    onClick: cancel
   }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _encodedSvgs.closeIcon,
+    src: _encodedSvgs.closeIconWhite,
     alt: "close",
     height: "20px",
     width: "20px"
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("h3", null, "Choose prices")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pricing-popup-content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "seat-list"
-  }, Object.entries(seatsToBook).map(_ref3 => {
+  }, !singleSeats && 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", {
@@ -102,27 +112,55 @@ function PricingPopup(_ref2) {
       seatGroup: seatGroup,
       seatPriceages: seatPriceages,
       updateSeatGroupPriceage: newPriceage => {
-        const newSeats = _objectSpread({}, seatsToBook);
+        const newSeats = _objectSpread({}, seatGroupsToBook);
         newSeats[id].priceage = newPriceage;
-        setSeatsToBook(newSeats);
+        setSeatGroupsToBook(newSeats);
+      }
+    }) : /*#__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 => {
+    let {
+      seat,
+      priceage
+    } = _ref4;
+    const seatPriceages = pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === seat.psId);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: seat.ssId,
+      className: "seat-group"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "seat-group-header"
+    }, /*#__PURE__*/_react.default.createElement("h4", null, "Seat", " ".concat(seat.r, "-").concat(seat.c))), seatPriceages.filter(price => price.is_available !== false).length > 0 ? /*#__PURE__*/_react.default.createElement(PriceSelect, {
+      seatGroup: {
+        seats: [seat],
+        priceage
+      },
+      seatPriceages: seatPriceages,
+      updateSeatGroupPriceage: newPriceage => {
+        const newSeats = _objectSpread({}, singleSeatsToBook);
+        const currSeat = newSeats.find(s => s.seat.ssId === seat.ssId);
+        if (currSeat) {
+          currSeat.priceage = newPriceage;
+        }
+        setSingleSeatsToBook(newSeats);
       }
     }) : /*#__PURE__*/_react.default.createElement("p", {
       className: "no-prices-available"
     }, "Oops, looks like there are no prices available for this section."));
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: "buttons"
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "cancel",
-    onClick: cancelPriceSelect
+    onClick: cancel
   }, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
     className: "add-cart",
     onClick: () => {
-      batchAddTicketsToCart(Object.values(seatsToBook).filter(v => !!v.priceage).flatMap(s => s.seats.map(seat => ({
+      singleSeats ? batchAddTicketsToCart(singleSeatsToBook) : batchAddTicketsToCart(Object.values(seatGroupsToBook).filter(v => !!v.priceage).flatMap(s => s.seats.map(seat => ({
         seat,
         priceage: s.priceage
       }))));
-      cancelPriceSelect();
+      cancel();
     },
-    disabled: Object.values(seatsToBook).every(v => !v.priceage)
-  }, "Add to cart"))));
+    disabled: singleSeats ? singleSeatsToBook.every(v => !v.priceage) : Object.values(seatGroupsToBook).every(v => !v.priceage)
+  }, "Add to cart")))));
 }

package/dist/components/RemoveMultipleSeatsPopup.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RemoveMultipleSeatsPopup;
+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 RemoveMultipleSeatsPopup(_ref) {
+  let {
+    onConfirm,
+    onClose
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pricing-popup-backdrop",
+    onClick: onClose
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pricing-popup 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, "Remove from cart")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pricing-popup-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", {
+    className: "buttons"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "cancel",
+    onClick: onClose
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
+    className: "add-cart",
+    onClick: onConfirm
+  }, "Confirm")))));
+}

package/dist/components/SeatingPlan.js

@@ -13,6 +13,8 @@ var _reactLeaflet = require("react-leaflet");
 var _utils = require("../utils");
 var _reactDom = require("react-dom");
 var _PricingPopup = _interopRequireDefault(require("./PricingPopup"));
+var _SelectQuantityPopup = _interopRequireDefault(require("./SelectQuantityPopup"));
+var _RemoveMultipleSeatsPopup = _interopRequireDefault(require("./RemoveMultipleSeatsPopup"));
 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; }
@@ -39,15 +41,7 @@ const SeatingPlan = _ref => {
     connectedShowings,
     areaName,
     promoCode,
-    bookingMode = _utils.bookingModes.SHOPSITE,
-    theme = {
-      accent: "#6366f1",
-      accentDark: "#3730a3",
-      accentLight: "#e0e7ff",
-      flexiAccent: "#e32664",
-      flexiAccentDark: "#ffd3e2",
-      flexiAccentLight: "#be003f"
-    }
+    bookingMode = _utils.bookingModes.SHOPSITE
   } = _ref;
   const [initialiseMessage, setInitialiseMessage] = (0, _react.useState)("Initialising seating plan...");
   const [isReloading, setIsReloading] = (0, _react.useState)(false);
@@ -65,7 +59,11 @@ const SeatingPlan = _ref => {
   const [mounted, setMounted] = _react.default.useState(false);
   const [mode, setMode] = (0, _react.useState)(_utils.modes.SINGLE);
   const [pricingPopupOpen, setPricingPopupOpen] = (0, _react.useState)(false);
+  const [selectQuantityPopupOpen, setSelectQuantityPopupOpen] = (0, _react.useState)(false);
+  const [desiredSeatQuantity, setDesiredSeatQuantity] = (0, _react.useState)(2);
   const [selectedSeats, setSelectedSeats] = (0, _react.useState)([]);
+  const [seatsToRemove, setSeatsToRemove] = (0, _react.useState)([]);
+  const [removeMultipleSeatsPopupOpen, setRemoveMultipleSeatsPopupOpen] = (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);
@@ -277,7 +275,7 @@ const SeatingPlan = _ref => {
     });
   };
   const batchAddTicketsToCart = async seatsToBook => {
-    if (!canMultiSelect || seatsToBook.length === 0) {
+    if (!canMultiSelect && !seats.preventOrphanedSeats || seatsToBook.length === 0) {
       return;
     }
     const updatedSeats = _objectSpread({}, seats);
@@ -288,33 +286,102 @@ const SeatingPlan = _ref => {
       }
     });
     setSeats(updatedSeats);
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    setBookedSeats(prev => [...prev, ...seatsToBook.map(_ref2 => {
-      let {
-        seat,
-        priceage
-      } = _ref2;
-      return {
-        ssId: seat.ssId,
-        r: seat.r,
-        c: seat.c,
-        showingId: showingId,
-        pId: priceage.paId,
-        p: priceage.p,
-        paName: priceage.paName
+    const succeeded = [];
+    try {
+      for (let seat of seatsToBook) {
+        try {
+          await fetch(apiUrl, {
+            method: "POST",
+            body: JSON.stringify({
+              priceAgeId: seat.priceage.paId,
+              seatId: seat.seat.ssId,
+              price: seat.priceage.p,
+              connectedShowings: connectedShowings
+            }),
+            headers: {
+              "content-type": "application/json",
+              "basket-key": sessionId
+            }
+          });
+          succeeded.push(seat);
+        } catch (error) {
+          console.error("Failed to book seat ".concat(seat, ":"), error);
+          throw new Error("Booking failed for seat ".concat(seat));
+        }
+      }
+      setBookedSeats(prev => [...prev, ...seatsToBook.map(_ref2 => {
+        let {
+          seat,
+          priceage
+        } = _ref2;
+        return {
+          ssId: seat.ssId,
+          r: seat.r,
+          c: seat.c,
+          showingId: showingId,
+          pId: priceage.paId,
+          p: priceage.p,
+          paName: priceage.paName
+        };
+      })]);
+      updatedSeats.seats.forEach(s => {
+        if (seatIds.includes(s.ssId)) {
+          s.s = _utils.statuses.USER_PENDING;
+          s.bookedPrice = price;
+          s.loading = false;
+        }
+      });
+      setSeats(updatedSeats);
+      const event = {
+        type: "cart-change-add",
+        details: [...bookedSeats, ...seatsToBook.map(_ref3 => {
+          let {
+            seat,
+            priceage
+          } = _ref3;
+          return {
+            ssId: seat.ssId,
+            r: seat.r,
+            c: seat.c,
+            showingId: showingId,
+            pId: priceage.paId,
+            p: priceage.p,
+            paName: priceage.paName
+          };
+        })]
       };
-    })]);
-    updatedSeats.seats.forEach(s => {
-      if (seatIds.includes(s.ssId)) {
-        s.s = _utils.statuses.USER_PENDING;
-        s.bookedPrice = price;
-        s.loading = false;
+      callbackFunction === null || callbackFunction === void 0 || callbackFunction(event);
+    } catch (error) {
+      console.error("Failed to book seats:", error);
+      for (let seat of succeeded) {
+        await fetch("".concat(apiUrl, "/seat/").concat(seat.ssId), {
+          method: "DELETE",
+          headers: {
+            "basket-key": sessionId
+          }
+        });
       }
-    });
-    setSeats(updatedSeats);
+      updatedSeats.seats.forEach(s => {
+        if (seatIds.includes(s.ssId)) {
+          s.loading = false;
+        }
+      });
+      setSeats(updatedSeats);
+      const event = {
+        type: "error",
+        details: {
+          error: {
+            code: 500,
+            message: "Oops! Something went wrong. Please try again."
+          }
+        }
+      };
+      callbackFunction === null || callbackFunction === void 0 || callbackFunction(event);
+    }
+    _initialFetch(true);
   };
   const batchRemoveTicketsFromCart = async seatsToRemove => {
-    if (!canMultiSelect || seatsToRemove.length === 0) {
+    if (!canMultiSelect && !seats.preventOrphanedSeats || seatsToRemove.length === 0) {
       return;
     }
     const updatedSeats = _objectSpread({}, seats);
@@ -325,16 +392,53 @@ const SeatingPlan = _ref => {
       }
     });
     setSeats(updatedSeats);
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    setBookedSeats(prev => [...prev.filter(v => !seatIds.includes(v.ssId))]);
+    const succeededIds = [];
+    try {
+      for (let seat of seatsToRemove) {
+        try {
+          await fetch("".concat(apiUrl, "/seat/").concat(seat.ssId), {
+            method: "DELETE",
+            headers: {
+              "basket-key": sessionId
+            }
+          });
+          succeededIds.push(seat.ssId);
+        } catch (error) {
+          console.error("Failed to remove seat ".concat(seat, ":"), error);
+        }
+      }
+    } catch (_unused) {
+      const event = {
+        type: "error",
+        details: {
+          error: {
+            code: 500,
+            message: "Oops! Something went wrong. Please try again."
+          }
+        }
+      };
+      callbackFunction === null || callbackFunction === void 0 || callbackFunction(event);
+    }
+    setBookedSeats(prev => [...prev.filter(v => !succeededIds.includes(v.ssId))]);
     updatedSeats.seats.forEach(s => {
       if (seatIds.includes(s.ssId)) {
         s.loading = false;
-        s.s = _utils.statuses.UNSOLD;
-        s.bookedPrice = null;
+        if (succeededIds.includes(s.ssId)) {
+          s.s = _utils.statuses.UNSOLD;
+          s.bookedPrice = null;
+        }
       }
     });
     setSeats(updatedSeats);
+    setSeatsToRemove([]);
+    if (succeededIds.length > 0) {
+      const event = {
+        type: "cart-change-remove",
+        details: bookedSeats.filter(bs => succeededIds.includes(bs.ssId))
+      };
+      callbackFunction === null || callbackFunction === void 0 || callbackFunction(event);
+    }
+    _initialFetch(true);
   };
   const handleClickSeat = (e, s) => {
     setChosenSeat({
@@ -372,8 +476,9 @@ const SeatingPlan = _ref => {
       setIsReloading(true);
     }
     setInitialiseMessage("Initialising seating plan...");
-    fetch(// `http://localhost:3155/api/legacy/shop/events/${eventId}/${eventVenueId}/showings/${showingId}/tickets/allocated/${areaId}`,
-    "".concat(apiUrl).concat(promoCode ? "?promo=".concat(promoCode) : ""), {
+    fetch("http://localhost:3155/api/legacy/shop/events/".concat(eventId, "/").concat(eventVenueId, "/showings/").concat(showingId, "/tickets/allocated/").concat(areaId),
+    // `${apiUrl}${promoCode ? `?promo=${promoCode}` : ""}`,
+    {
       headers: {
         "basket-key": sessionId,
         Authorization: "Bearer ".concat(apiKey)
@@ -414,6 +519,9 @@ const SeatingPlan = _ref => {
         setHeight(img.height * 0.5);
         setWidth(img.width * 0.5);
         setSeats(data);
+        if (data.preventOrphanedSeats && !isReload) {
+          setSelectQuantityPopupOpen(true);
+        }
       };
       setIsReloading(false);
     }).catch(error => {
@@ -451,6 +559,14 @@ const SeatingPlan = _ref => {
   // 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);
+  const selectedSeatsWithPricing = selectedSeats.map(s => {
+    const priceages = seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === s.psId);
+    const availablePriceages = priceages.filter(p => p.is_available !== false);
+    return {
+      seat: s,
+      priceage: availablePriceages.length > 0 ? availablePriceages[0] : null
+    };
+  });
   const groupedSelectedSeats = selectedSeats.reduce((acc, curr) => {
     if (curr.psId) {
       const priceages = seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === curr.psId);
@@ -469,36 +585,40 @@ const SeatingPlan = _ref => {
     setPricingPopupOpen(false);
     setSelectedSeats([]);
   };
-  const themeStyles = {
-    "--accent": theme.accent,
-    "--accent-dark": theme.accentDark,
-    "--accent-light": theme.accentLight,
-    "--flexi-accent": theme.flexiAccent,
-    "--flexi-accent-light": theme.flexiAccentLight,
-    "--flexi-accent-dark": theme.flexiAccentDark
-  };
 
   // return seating plan
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "seating-plan-root",
-    id: "seating-plan-root",
-    style: themeStyles
+    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, backdropContainer && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
     className: "seating-plan-backdrop ".concat(isFullScreen ? "full-screen" : ""),
-    onClick: () => setIsFullScreen(false),
-    style: themeStyles
+    onClick: () => setIsFullScreen(false)
   }), backdropContainer), mapContainer && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
     className: "seating-plan-container ".concat(isFullScreen ? "full-screen" : ""),
-    "data-mode": mode,
-    style: themeStyles
-  }, pricingPopupOpen && canMultiSelect && /*#__PURE__*/_react.default.createElement(_PricingPopup.default, {
-    cancelPriceSelect: cancelPriceSelect,
+    "data-mode": mode
+  }, pricingPopupOpen && (canMultiSelect || seats.preventOrphanedSeats) ? /*#__PURE__*/_react.default.createElement(_PricingPopup.default, {
+    cancel: cancelPriceSelect,
     groupedSelectedSeats: groupedSelectedSeats,
+    selectedSeatsWithPricing: selectedSeatsWithPricing,
     priceSectionIds: priceSectionIds,
     pricing: seats.pricing,
-    batchAddTicketsToCart: batchAddTicketsToCart
+    batchAddTicketsToCart: batchAddTicketsToCart,
+    singleSeats: seats.preventOrphanedSeats
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), selectQuantityPopupOpen && /*#__PURE__*/_react.default.createElement(_SelectQuantityPopup.default, {
+    quantity: desiredSeatQuantity,
+    setQuantity: v => {
+      setDesiredSeatQuantity(v);
+      setSelectedSeats([]);
+    },
+    onClose: () => setSelectQuantityPopupOpen(false)
+  }), removeMultipleSeatsPopupOpen && /*#__PURE__*/_react.default.createElement(_RemoveMultipleSeatsPopup.default, {
+    onConfirm: () => {
+      batchRemoveTicketsFromCart(seatsToRemove);
+      setRemoveMultipleSeatsPopupOpen(false);
+    },
+    onClose: () => setRemoveMultipleSeatsPopupOpen(false)
   }), /*#__PURE__*/_react.default.createElement(_reactLeaflet.MapContainer, {
     zoomSnap: 0,
     zoomDelta: 1,
@@ -536,7 +656,12 @@ const SeatingPlan = _ref => {
     pricingPopupOpen: pricingPopupOpen,
     setPricingPopupOpen: setPricingPopupOpen,
     selectedSeats: selectedSeats,
-    setSelectedSeats: setSelectedSeats
+    setSelectedSeats: setSelectedSeats,
+    selectQuantityPopupOpen: selectQuantityPopupOpen,
+    setSelectQuantityPopupOpen: setSelectQuantityPopupOpen,
+    desiredSeatQuantity: desiredSeatQuantity,
+    setSeatsToRemove: setSeatsToRemove,
+    setRemoveMultipleSeatsPopupOpen: setRemoveMultipleSeatsPopupOpen
   }))), mapContainer)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "loading"
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("svg", {

package/dist/components/SelectQuantityPopup.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectQuantityPopup;
+var _react = _interopRequireWildcard(require("react"));
+var _encodedSvgs = require("./assets/encodedSvgs");
+var _TicketIcon = _interopRequireDefault(require("./icons/TicketIcon"));
+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; }
+const PriceSelect = _ref => {
+  let {
+    newQuantity,
+    setNewQuantity
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-select"
+  }, /*#__PURE__*/_react.default.createElement("select", {
+    onChange: e => {
+      setNewQuantity(parseInt(e.target.value));
+    },
+    value: newQuantity
+  }, Array.from({
+    length: 10
+  }, (_, i) => /*#__PURE__*/_react.default.createElement("option", {
+    key: i,
+    value: i + 1
+  }, i + 1))));
+};
+function SelectQuantityPopup(_ref2) {
+  let {
+    quantity,
+    setQuantity,
+    onClose
+  } = _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",
+    onClick: onClose
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pricing-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, "Choose seats")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pricing-popup-content"
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    className: "quantity-heading"
+  }, "How many seats would you like to book?"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "seat-list"
+  }, /*#__PURE__*/_react.default.createElement(PriceSelect, {
+    setNewQuantity: setNewQuantity,
+    newQuantity: newQuantity
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "buttons"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "cancel",
+    onClick: onClose
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
+    className: "add-cart",
+    onClick: () => {
+      setQuantity(newQuantity);
+      onClose();
+    }
+  }, "Confirm")))));
+}

package/dist/components/assets/encodedSvgs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wheelchairIcon = exports.userIcon = exports.handIcon = exports.flexiIcon = exports.expandIcon = exports.editIcon = exports.cursorIcon = exports.collapseIcon = exports.closeIcon = void 0;
+exports.wheelchairIcon = exports.userIcon = exports.handIcon = exports.flexiIcon = exports.expandIcon = exports.editIcon = exports.cursorIcon = exports.collapseIcon = exports.closeIconWhite = exports.closeIcon = void 0;
 const expandIcon = exports.expandIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0IiBmaWxsPSJjdXJyZW50Q29sb3IiIHN0cm9rZT0iY3VycmVudENvbG9yIj4KIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd6bS0yLTRoMlY3aDNWNUg1em0xMiA3aC0zdjJoNXYtNWgtMnpNMTQgNXYyaDN2M2gyVjV6Ij48L3BhdGg+Cjwvc3ZnPgo=";
 const collapseIcon = exports.collapseIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0IiBmaWxsPSJjdXJyZW50Q29sb3IiIHN0cm9rZT0iY3VycmVudENvbG9yIj4KPHBhdGggZD0iTTUgMTZoM3YzaDJ2LTVINXptMy04SDV2Mmg1VjVIOHptNiAxMWgydi0zaDN2LTJoLTV6bTItMTFWNWgtMnY1aDVWOHoiPjwvcGF0aD4KPC9zdmc+Cg==";
 const closeIcon = exports.closeIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiLz48bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ii8+PC9zdmc+";
@@ -12,4 +12,5 @@ const wheelchairIcon = exports.wheelchairIcon = "data:image/svg+xml;base64,PD94b
 const handIcon = exports.handIcon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik00NDggMjQwdjk2YzAgMy4xLS40IDYuMi0xLjEgOS4ybC0zMiAxMzZDNDEwLjcgNDk5LjIgMzk0LjYgNTEyIDM3NiA1MTJIMTY4YTQwIDQwIDAgMCAxIC0zMi40LTE2LjVsLTEyOC0xNzZjLTEzLTE3LjktOS00Mi45IDguOC01NS45IDE3LjktMTMgNDIuOS05IDU1LjkgOC44TDEwNCAzMTZWNDBjMC0yMi4xIDE3LjktNDAgNDAtNDBzNDAgMTcuOSA0MCA0MHYyMDBoOHYtNDBjMC0yMi4xIDE3LjktNDAgNDAtNDBzNDAgMTcuOSA0MCA0MHY0MGg4di0yNGMwLTIyLjEgMTcuOS00MCA0MC00MHM0MCAxNy45IDQwIDQwdjI0aDhjMC0yMi4xIDE3LjktNDAgNDAtNDBzNDAgMTcuOSA0MCA0MHptLTI1NiA4MGgtOHY5Nmg4di05NnptODggMGgtOHY5Nmg4di05NnptODggMGgtOHY5Nmg4di05NnoiLz48L3N2Zz4=";
 const cursorIcon = exports.cursorIcon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi43LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA1NS4yTDAgNDI2YzAgMTIuMiA5LjkgMjIgMjIgMjJjNi4zIDAgMTIuNC0yLjcgMTYuNi03LjVMMTIxLjIgMzQ2bDU4LjEgMTE2LjNjNy45IDE1LjggMjcuMSAyMi4yIDQyLjkgMTQuM3MyMi4yLTI3LjEgMTQuMy00Mi45TDE3OS44IDMyMGwxMTguMSAwYzEyLjIgMCAyMi4xLTkuOSAyMi4xLTIyLjFjMC02LjMtMi43LTEyLjMtNy40LTE2LjVMMzguNiAzNy45QzM0LjMgMzQuMSAyOC45IDMyIDIzLjIgMzJDMTAuNCAzMiAwIDQyLjQgMCA1NS4yeiIvPjwvc3ZnPg==";
 const flexiIcon = exports.flexiIcon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGNsYXNzPSJzaXplLTYiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTIuMjUgMTggOSAxMS4yNWw0LjMwNiA0LjMwNmExMS45NSAxMS45NSAwIDAgMSA1LjgxNC01LjUxOGwyLjc0LTEuMjJtMCAwLTUuOTQtMi4yODFtNS45NCAyLjI4LTIuMjggNS45NDEiIC8+Cjwvc3ZnPg==";
-const editIcon = exports.editIcon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGNsYXNzPSJzaXplLTYiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0ibTE2Ljg2MiA0LjQ4NyAxLjY4Ny0xLjY4OGExLjg3NSAxLjg3NSAwIDEgMSAyLjY1MiAyLjY1MkwxMC41ODIgMTYuMDdhNC41IDQuNSAwIDAgMS0xLjg5NyAxLjEzTDYgMThsLjgtMi42ODVhNC41IDQuNSAwIDAgMSAxLjEzLTEuODk3bDguOTMyLTguOTMxWm0wIDBMMTkuNSA3LjEyNU0xOCAxNHY0Ljc1QTIuMjUgMi4yNSAwIDAgMSAxNS43NSAyMUg1LjI1QTIuMjUgMi4yNSAwIDAgMSAzIDE4Ljc1VjguMjVBMi4yNSAyLjI1IDAgMCAxIDUuMjUgNkgxMCIgLz48L3N2Zz4=";
+const editIcon = exports.editIcon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGNsYXNzPSJzaXplLTYiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0ibTE2Ljg2MiA0LjQ4NyAxLjY4Ny0xLjY4OGExLjg3NSAxLjg3NSAwIDEgMSAyLjY1MiAyLjY1MkwxMC41ODIgMTYuMDdhNC41IDQuNSAwIDAgMS0xLjg5NyAxLjEzTDYgMThsLjgtMi42ODVhNC41IDQuNSAwIDAgMSAxLjEzLTEuODk3bDguOTMyLTguOTMxWm0wIDBMMTkuNSA3LjEyNU0xOCAxNHY0Ljc1QTIuMjUgMi4yNSAwIDAgMSAxNS43NSAyMUg1LjI1QTIuMjUgMi4yNSAwIDAgMSAzIDE4Ljc1VjguMjVBMi4yNSAyLjI1IDAgMCAxIDUuMjUgNkgxMCIgLz48L3N2Zz4=";
+const closeIconWhite = exports.closeIconWhite = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48bGluZSB4MT0iMTgiIHkxPSI2IiB4Mj0iNiIgeTI9IjE4Ii8+PGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCIvPjwvc3ZnPg==";

package/dist/components/icons/EditIcon.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EditIcon;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function EditIcon(_ref) {
+  let {
+    height = "18px",
+    width = "18px",
+    color = "currentColor",
+    strokeWidth = "1.5",
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: strokeWidth,
+    stroke: color,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+  }));
+}

package/dist/components/styles/index.css

@@ -27,12 +27,12 @@ button {
 }
 
 .seating-plan-container {
-  /* --accent: #6366f1;
-  --accent-dark: #3730a3;
-  --accent-light: #e0e7ff;
-  --flexi-accent: #e32664;
-  --flexi-accent-light: #ffd3e2;
-  --flexi-accent-dark: #be003f; */
+  --accent: rgb(99 102 241);
+  --accent-dark: rgb(55 48 163);
+  --accent-light: rgb(224 231 255);
+  --flexi-accent: rgb(227 38 100);
+  --flexi-accent-light: rgb(255 211 226);
+  --flexi-accent-dark: rgb(190 0 63);
   font-family: inherit;
 }
 
@@ -41,7 +41,6 @@ button {
   padding: 0.5rem 0.8rem;
   border-radius: 3px;
   text-align: left;
-  color: #333;
 }
 
 .legend-header {
@@ -677,6 +676,31 @@ svg.leaflet-image-layer.leaflet-interactive path {
   justify-content: center;
 }
 
+.extra-controls.seat-quantity-control {
+  border: none;
+  transition: border-color 0.2s;
+  border-radius: 6px;
+}
+
+.extra-controls .leaflet-control-seat-quantity {
+  border: none;
+  background: var(--accent);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  gap: 0.25rem;
+  padding: 5px 10px;
+  transition: all 0.2s;
+  font-weight: bold;
+}
+
+.extra-controls .leaflet-control-seat-quantity:hover {
+  background: var(--accent-light);
+  color: var(--accent-dark);
+}
+
 .leaflet-control-zoom-in.reload-seating-plan {
   border-radius: 0 0 0 0;
   border-top: 1px solid #ccc;

package/dist/components/styles/pos.css

@@ -11,6 +11,12 @@
   animation: fade-in 400ms;
 }
 
+.pricing-popup-content {
+  padding: 1rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
 .pricing-popup {
   position: absolute;
   z-index: 1002;
@@ -21,19 +27,39 @@
   background-color: #fff;
   /* font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; */
   font-family: inherit;
-  padding: 1rem;
   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,
@@ -42,6 +68,13 @@
   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;
@@ -56,7 +89,6 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  margin-top: 1rem;
 }
 
 .pricing-popup .seat-group {
@@ -76,6 +108,8 @@
 .pricing-popup select {
   flex: 1;
   padding: 0.3rem 0.2rem;
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
 }
 
 .pricing-popup .buttons {
@@ -98,6 +132,24 @@
   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;
@@ -115,7 +167,7 @@
 }
 
 .pricing-popup button.cancel {
-  background: #ecf0f1;
+  background: #dcdcdc;
   border: none;
 }
 

package/dist/utils/enums.js

@@ -12,7 +12,6 @@ const statusColors = exports.statusColors = {
   pending: "#e74c3c",
   booked: "#e74c3c",
   bookedWithDifferentPrice: "#fab1a0",
-  // TODO temporary selected state
   selected: "#049CDB"
 };
 const statuses = exports.statuses = {

package/dist/utils/helpers.js

@@ -3,20 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getInitialColor = exports.calculateCenterOfMap = exports.NZDollar = void 0;
+exports.getValidSeats = exports.getRowSection = exports.getInitialColor = exports.getAdjacentBookedSeats = exports.createsOrphan = exports.canSelectSingleSeatGivenOrphanRules = exports.calculateCenterOfMap = exports.NZDollar = void 0;
 var _enums = require("./enums");
-const getInitialColor = (s, price, selected) => {
-  // TEST selected state for multiselect
-  // if (selected) {
-  //   return {
-  //     fillColor: statusColors.selected,
-  //     color: "none",
-  //     fillOpacity: s.loading ? 0 : 1,
-  //   };
-  // }
-
+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
+    };
+  }
+  if (greyedOut) {
+    return {
+      fillColor: _enums.statusColors.unknown,
+      color: "none",
+      fillOpacity: s.loading ? 0 : 1
+    };
+  }
   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,
+    fillColor: s.s === _enums.statuses.UNSOLD && !disabled ? _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,
     stroke: false
@@ -37,4 +43,121 @@ exports.calculateCenterOfMap = calculateCenterOfMap;
 const NZDollar = exports.NZDollar = new Intl.NumberFormat("en-NZ", {
   style: "currency",
   currency: "NZD"
-});
+});
+const createsOrphan = (seat, seats, isRemove, selectedSeats) => {
+  const selectedIds = selectedSeats ? selectedSeats.map(s => s.sId) : null;
+  const filteredSeats = selectedIds ? seats.filter(s => !selectedIds.includes(s.sId)) : seats;
+  const sa = filteredSeats.find(s => s.sId === seat.sa);
+  const saa = filteredSeats.find(s => s.sId === (sa === null || sa === void 0 ? void 0 : sa.sa));
+  const sb = filteredSeats.find(s => s.sId === seat.sb);
+  const sbb = filteredSeats.find(s => s.sId === (sb === null || sb === void 0 ? void 0 : sb.sb));
+  if (isRemove) {
+    if (sa && sb && sa.s !== _enums.statuses.UNSOLD && sb.s === _enums.statuses.USER_PENDING || sa && sb && sa.s === _enums.statuses.USER_PENDING && sb.s !== _enums.statuses.UNSOLD || sa && !sb && sa.s === _enums.statuses.USER_PENDING || sb && !sa && sb.s === _enums.statuses.USER_PENDING) {
+      return true;
+    }
+    return false;
+  }
+  if (sb && sbb && sb.s === _enums.statuses.UNSOLD && sbb.s !== _enums.statuses.UNSOLD || sa && saa && sa.s === _enums.statuses.UNSOLD && saa.s !== _enums.statuses.UNSOLD || sb && !sbb && sb.s === _enums.statuses.UNSOLD || sa && !saa && sa.s === _enums.statuses.UNSOLD) {
+    return true;
+  }
+  return false;
+};
+exports.createsOrphan = createsOrphan;
+const getRowSection = (startSeat, seatsMap) => {
+  const row = [];
+  let seat = startSeat;
+  while (seat && seat.sId !== undefined) {
+    row.unshift(seat);
+    seat = seatsMap.get(seat.sb);
+  }
+  seat = seatsMap.get(startSeat.sa);
+  while (seat && seat.sId !== undefined) {
+    row.push(seat);
+    seat = seatsMap.get(seat.sa);
+  }
+  return row;
+};
+exports.getRowSection = getRowSection;
+const canSelectSingleSeatGivenOrphanRules = (seat, rowSection) => {
+  const isRemove = seat.s === _enums.statuses.USER_PENDING;
+  const selectedSeatCreatesOrphan = createsOrphan(seat, rowSection, isRemove);
+  if (selectedSeatCreatesOrphan) {
+    let hasOtherOptions = false;
+    for (let i = 0; i < rowSection.length; i++) {
+      if (rowSection[i].sId !== seat.sId && rowSection[i].s === (isRemove ? _enums.statuses.USER_PENDING : _enums.statuses.UNSOLD) && !createsOrphan(rowSection[i], rowSection, isRemove)) {
+        hasOtherOptions = true;
+        break;
+      }
+    }
+    return hasOtherOptions ? false : true;
+  }
+  return true;
+};
+exports.canSelectSingleSeatGivenOrphanRules = canSelectSingleSeatGivenOrphanRules;
+const getValidSeats = (s, seatsMap, desiredSeatQuantity) => {
+  let seatsToBook = [s];
+  const rowSection = getRowSection(s, seatsMap);
+  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);
+          }
+        }
+      }
+    };
+    traverse(s, "right");
+    if (seatsToBook.length < desiredSeatQuantity) {
+      traverse(s, "left");
+    }
+    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 [];
+};
+exports.getValidSeats = getValidSeats;
+const getAdjacentBookedSeats = (seat, seatsMap) => {
+  const rowSection = getRowSection(seat, seatsMap);
+  const adjacentBookedSeats = [seat];
+  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.USER_PENDING) {
+        if (direction === "left") {
+          adjacentBookedSeats.unshift(nextSeat);
+        } else {
+          adjacentBookedSeats.push(nextSeat);
+        }
+        traverse(nextSeat, direction);
+      }
+    }
+  };
+  traverse(seat, "right");
+  traverse(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.6",
+  "version": "1.6.8",
   "private": false,
   "keywords": [
     "iticket",
@@ -20,9 +20,10 @@
     "@types/leaflet-draw": "^1.0.11",
     "leaflet": "^1.9.3",
     "leaflet-draw": "^1.0.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-leaflet": "^5.0.0-rc.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-leaflet": "^4.2.1",
+    "react-leaflet-custom-control": "^1.3.5",
     "react-leaflet-draw": "^0.20.4",
     "react-scripts": "^5.0.1"
   },