iticket-seatingplan-dev 1.7.0 → 1.7.1

package/dist/components/InvalidSeatsPopup.js

@@ -13,10 +13,10 @@ function InvalidSeatsPopup(_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", {
@@ -35,7 +35,7 @@ function InvalidSeatsPopup(_ref) {
     height: "20px",
     width: "20px"
   })), /*#__PURE__*/_react.default.createElement("h3", null, "Seat selection")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pricing-popup-content"
+    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", {

package/dist/components/Map.js

@@ -66,6 +66,7 @@ function SeatMap(_ref) {
   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);
@@ -439,8 +440,12 @@ function SeatMap(_ref) {
                 setRemoveMultipleSeatsPopupOpen(true);
               }
             } else if (highlightedSeats.length > 0 && highlightedSeats.length === desiredSeatQuantity) {
-              setSelectedSeats([...highlightedSeats]);
-              setPricingPopupOpen(true);
+              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);
             }
@@ -486,6 +491,9 @@ function SeatMap(_ref) {
           if (greyedOutSeats.length > 0) {
             setGreyedOutSeats([]);
           }
+          if (clickedSeat) {
+            setClickedSeat(null);
+          }
         }
       }
       // value={s}

package/dist/components/PricingPopup.js

@@ -73,10 +73,10 @@ function PricingPopup(_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",
+    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", {
@@ -95,7 +95,7 @@ function PricingPopup(_ref2) {
     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"
   }, !isSingleSeats && groupedSelectedSeats ? Object.entries(seatGroupsToBook).map(_ref3 => {

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/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,209 +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.buttons-single {
-  justify-content: center;
-}
-
-.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.buttons-single button {
-  width: 100%;
-}
-
-.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/helpers.js

@@ -3,8 +3,24 @@
 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) {

package/package.json

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