iticket-seatingplan-dev 1.7.0 → 1.7.2

package/dist/components/PricingPopup.js

@@ -9,6 +9,9 @@ var _utils = require("../utils");
 var _encodedSvgs = require("./assets/encodedSvgs");
 var _Flexi = _interopRequireDefault(require("./Flexi"));
 var _TicketIcon = _interopRequireDefault(require("./icons/TicketIcon"));
+var _MinusIcon = _interopRequireDefault(require("./icons/MinusIcon"));
+var _PlusIcon = _interopRequireDefault(require("./icons/PlusIcon"));
+var _FlexiIcon = _interopRequireDefault(require("./icons/FlexiIcon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -17,66 +20,302 @@ 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); }
-const PriceSelect = _ref => {
+const numOnlyRgx = /^\d+$/;
+const FlexiDialog = _ref => {
   let {
-    seatGroup,
-    seatPriceages,
-    updateSeatGroupPriceage
+    price,
+    onClose,
+    onConfirm,
+    buttonText,
+    showCheckbox,
+    checkboxText,
+    initialChecked
   } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexi-popup",
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexi-popup-header popup-header"
+  }, /*#__PURE__*/_react.default.createElement(_FlexiIcon.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, "Edit FLEXi price")), /*#__PURE__*/_react.default.createElement(_Flexi.default, {
+    isOpen: true,
+    price: price,
+    onClose: onClose,
+    onConfirm: onConfirm,
+    buttonText: buttonText,
+    showCheckbox: showCheckbox,
+    checkboxText: checkboxText,
+    initialChecked: initialChecked
+  }));
+};
+const Option = _ref2 => {
+  let {
+    priceage,
+    qty,
+    max,
+    updateSeatGroupPriceage
+  } = _ref2;
   const [flexiOpen, setFlexiOpen] = (0, _react.useState)(false);
-  const isSelectedPriceFlexi = !!seatGroup.priceage.pMax && !!seatGroup.priceage.pMin && seatGroup.priceage.pMax > seatGroup.priceage.pMin;
+  const isAvailable = priceage.q === null || priceage.q > 0;
+  const isFlexi = !!priceage.pMax && !!priceage.pMin && priceage.pMax > priceage.pMin;
+  const handleMinus = () => {
+    if (qty <= 0) {
+      return;
+    }
+    const newValue = qty - 1;
+    updateSeatGroupPriceage(priceage, newValue);
+  };
+  const handleAdd = () => {
+    if (qty >= max) {
+      return;
+    }
+    const newValue = qty + 1;
+    updateSeatGroupPriceage(priceage, newValue);
+  };
+  const handleOnChange = event => {
+    const inputValue = event.target.value || "0";
+    if (!numOnlyRgx.test(inputValue)) {
+      return;
+    }
+    const numericValue = Number(inputValue);
+    if (numericValue > max || numericValue < 0) {
+      return;
+    }
+    updateSeatGroupPriceage(priceage, numericValue);
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "price-select"
-  }, /*#__PURE__*/_react.default.createElement("select", {
-    onChange: e => {
-      const newPriceage = seatPriceages.find(p => p.paId.toString() === e.target.value);
-      updateSeatGroupPriceage(newPriceage);
-    },
-    value: seatGroup.priceage.paId
-  }, seatPriceages.map(price => /*#__PURE__*/_react.default.createElement("option", {
-    key: price.paId,
-    disabled: price.is_available === false,
-    value: price.paId
-  }, "".concat(price.paName, " ").concat(_utils.NZDollar.format(price.paId === seatGroup.priceage.paId ? seatGroup.priceage.p : price.p)).concat(price.is_available === false ? " - Allocation exhausted" : "")))), isSelectedPriceFlexi && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    className: "priceage-option ".concat(!isAvailable ? "sold-out" : "")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "priceage-option-header"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pa-name"
+  }, priceage.paName), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pa-price"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "".concat(_utils.NZDollar.format(priceage.p)).concat(!isAvailable ? " - Allocation exhausted" : "")), isFlexi && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
     className: "flexi-button",
     onClick: () => setFlexiOpen(true)
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _encodedSvgs.flexiIcon,
+  }, /*#__PURE__*/_react.default.createElement(_FlexiIcon.default, {
+    className: "ticket-icon",
     height: "18px",
     width: "18px"
-  }), /*#__PURE__*/_react.default.createElement("span", null, "Edit FLEXi price")), flexiOpen && /*#__PURE__*/_react.default.createElement("div", {
-    className: "flexi-popup",
-    role: "dialog",
-    "aria-modal": "true"
-  }, /*#__PURE__*/_react.default.createElement(_Flexi.default, {
-    price: seatGroup.priceage,
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Edit FLEXi price")), flexiOpen && /*#__PURE__*/_react.default.createElement(FlexiDialog, {
+    price: priceage,
     onClose: () => setFlexiOpen(false),
     onConfirm: value => {
-      const newPriceage = _objectSpread(_objectSpread({}, seatGroup.priceage), {}, {
+      updateSeatGroupPriceage(_objectSpread(_objectSpread({}, priceage), {}, {
         p: value
-      });
-      updateSeatGroupPriceage(newPriceage);
+      }), qty);
     },
     buttonText: "Confirm"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-qty-select"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    disabled: qty <= 0 || !isAvailable,
+    className: "price-qty-button",
+    onClick: handleMinus,
+    "aria-label": "Minus one"
+  }, /*#__PURE__*/_react.default.createElement(_MinusIcon.default, {
+    strokeWidth: "2"
+  })), /*#__PURE__*/_react.default.createElement("input", {
+    onChange: handleOnChange,
+    type: "text",
+    value: qty,
+    "aria-label": "Quantity",
+    pattern: "\\d+",
+    disabled: !isAvailable
+  }), /*#__PURE__*/_react.default.createElement("button", {
+    disabled: qty >= max || !isAvailable,
+    className: "price-qty-button",
+    onClick: handleAdd,
+    "aria-label": "Plus one"
+  }, /*#__PURE__*/_react.default.createElement(_PlusIcon.default, {
+    strokeWidth: "2"
   }))));
 };
-function PricingPopup(_ref2) {
+const SingleSelect = _ref3 => {
+  var _seat$priceage, _seat$priceage2, _seat$priceage3, _seat$priceage4, _seat$priceage5;
+  let {
+    seat,
+    seats,
+    seatPriceages,
+    updateSeatPriceage
+  } = _ref3;
+  const [flexiOpen, setFlexiOpen] = (0, _react.useState)(false);
+  const isSelectedPriceFlexi = !!((_seat$priceage = seat.priceage) !== null && _seat$priceage !== void 0 && _seat$priceage.pMax) && !!((_seat$priceage2 = seat.priceage) !== null && _seat$priceage2 !== void 0 && _seat$priceage2.pMin) && ((_seat$priceage3 = seat.priceage) === null || _seat$priceage3 === void 0 ? void 0 : _seat$priceage3.pMax) > ((_seat$priceage4 = seat.priceage) === null || _seat$priceage4 === void 0 ? void 0 : _seat$priceage4.pMin);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "single-seat-select-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "single-seat-header"
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    className: "seat-name"
+  }, "".concat(seat.seat.r, "-").concat(seat.seat.c)), isSelectedPriceFlexi && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    className: "flexi-button",
+    onClick: () => setFlexiOpen(true)
+  }, /*#__PURE__*/_react.default.createElement(_FlexiIcon.default, {
+    className: "ticket-icon",
+    height: "18px",
+    width: "18px"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Edit FLEXi price")), flexiOpen && /*#__PURE__*/_react.default.createElement(FlexiDialog, {
+    price: seat.priceage,
+    onClose: () => setFlexiOpen(false),
+    onConfirm: (value, checked) => {
+      updateSeatPriceage(seat.seat, _objectSpread(_objectSpread({}, seat.priceage), {}, {
+        p: value
+      }), checked);
+    },
+    buttonText: "Confirm",
+    showCheckbox: true,
+    checkboxText: "Apply to all FLEXi seats in this section",
+    initialChecked: true
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "single-seat-select"
+  }, /*#__PURE__*/_react.default.createElement("select", {
+    onChange: e => {
+      const newPriceage = seatPriceages.find(p => p.paId.toString() === e.target.value);
+      if (newPriceage) {
+        updateSeatPriceage(seat.seat, newPriceage);
+      }
+    },
+    value: (_seat$priceage5 = seat.priceage) === null || _seat$priceage5 === void 0 ? void 0 : _seat$priceage5.paId
+  }, seatPriceages.map(price => {
+    var _seat$priceage6, _seat$priceage7;
+    const qtyBooked = seats.filter(s => {
+      var _s$priceage;
+      return ((_s$priceage = s.priceage) === null || _s$priceage === void 0 ? void 0 : _s$priceage.paId) === price.paId;
+    }).length;
+    const disabled = price.q !== null && (price.q <= 0 || price.paId !== ((_seat$priceage6 = seat.priceage) === null || _seat$priceage6 === void 0 ? void 0 : _seat$priceage6.paId) && qtyBooked >= price.q);
+    return /*#__PURE__*/_react.default.createElement("option", {
+      key: price.paId,
+      disabled: disabled,
+      value: price.paId
+    }, "".concat(price.paName, " ").concat(_utils.NZDollar.format(((_seat$priceage7 = seat.priceage) === null || _seat$priceage7 === void 0 ? void 0 : _seat$priceage7.paId) === price.paId ? seat.priceage.p : price.p)).concat(disabled ? " - Allocation exhausted" : ""));
+  }))));
+};
+function PricingPopup(_ref4) {
   let {
     onClose,
-    groupedSelectedSeats,
-    pricing,
-    priceSectionIds,
+    selectedSeats,
     batchAddTicketsToCart,
-    selectedSeatsWithPricing,
-    isSingleSeats
-  } = _ref2;
-  const [seatGroupsToBook, setSeatGroupsToBook] = (0, _react.useState)(groupedSelectedSeats);
-  const [singleSeatsToBook, setSingleSeatsToBook] = (0, _react.useState)(selectedSeatsWithPricing);
+    pricing,
+    priceSectionIds
+  } = _ref4;
+  const [seatGroupsToBook, setSeatGroupsToBook] = (0, _react.useState)(selectedSeats.reduce((acc, curr) => {
+    if (curr.psId) {
+      const priceages = pricing.filter(price => price.psId === curr.psId && (!priceSectionIds || priceSectionIds.includes(price.psId)));
+      const availablePriceages = priceages.filter(p => p.q === null || p.q > 0);
+      const soldOutPriceages = priceages.filter(p => p.q === 0);
+      const numSeats = selectedSeats.filter(s => s.psId === curr.psId).length;
+      if (!acc[curr.psId]) {
+        let qtyFilled = 0;
+        acc[curr.psId] = {
+          seats: [],
+          priceages: [...availablePriceages.map(pa => {
+            let qty = 0;
+            if (qtyFilled < numSeats) {
+              var _pa$q;
+              qty = Math.min(numSeats - qtyFilled, (_pa$q = pa.q) !== null && _pa$q !== void 0 ? _pa$q : numSeats);
+              qtyFilled += qty;
+            }
+            return {
+              priceage: pa,
+              qty
+            };
+          }), ...soldOutPriceages.map(pa => ({
+            priceage: pa,
+            qty: 0
+          }))]
+        };
+      }
+      const availablePriceage = availablePriceages.find(pa => {
+        var _pa$q2;
+        const qtyFilled = acc[curr.psId].seats.filter(s => {
+          var _s$priceage2;
+          return ((_s$priceage2 = s.priceage) === null || _s$priceage2 === void 0 ? void 0 : _s$priceage2.paId) === pa.paId;
+        }).length;
+        return qtyFilled < ((_pa$q2 = pa.q) !== null && _pa$q2 !== void 0 ? _pa$q2 : numSeats);
+      });
+      acc[curr.psId].seats.push({
+        seat: curr,
+        priceage: availablePriceage
+      });
+    }
+    return acc;
+  }, {}));
+  const updateSeatGroupPriceage = (priceage, qty) => {
+    const newSeatGroupsToBook = _objectSpread({}, seatGroupsToBook);
+    const group = newSeatGroupsToBook[priceage.psId];
+    if (group) {
+      const newPriceages = [...group.priceages];
+      const priceageIndex = newPriceages.findIndex(pa => pa.priceage.paId === priceage.paId);
+      if (priceageIndex !== -1) {
+        newPriceages[priceageIndex] = {
+          priceage,
+          qty
+        };
+      }
+      const newSeats = [];
+      let i = 0;
+      newPriceages.forEach(pa => {
+        for (let ii = 0; ii < pa.qty; ii++) {
+          newSeats.push({
+            seat: group.seats[i].seat,
+            priceage: pa.priceage
+          });
+          i++;
+        }
+      });
+      if (i < group.seats.length) {
+        newSeats.push(...group.seats.slice(i).map(s => _objectSpread(_objectSpread({}, s), {}, {
+          priceage: undefined
+        })));
+      }
+      newSeatGroupsToBook[priceage.psId] = {
+        seats: newSeats,
+        priceages: newPriceages
+      };
+    }
+    setSeatGroupsToBook(newSeatGroupsToBook);
+  };
+  const updateSeatPriceage = (seat, priceage, applyPriceToAll) => {
+    const newSeatGroupsToBook = _objectSpread({}, seatGroupsToBook);
+    const group = newSeatGroupsToBook[priceage.psId];
+    if (group) {
+      const seatIndex = group.seats.findIndex(s => s.seat.ssId === seat.ssId);
+      if (seatIndex !== -1) {
+        group.seats[seatIndex].priceage = priceage;
+      }
+      if (applyPriceToAll) {
+        const priceageIndex = group.priceages.findIndex(pa => pa.priceage.paId === priceage.paId);
+        if (priceageIndex !== -1) {
+          group.priceages[priceageIndex].priceage = priceage;
+        }
+        group.seats.forEach(s => {
+          if (s.priceage.paId === priceage.paId) {
+            s.priceage = priceage;
+          }
+        });
+      }
+      setSeatGroupsToBook(newSeatGroupsToBook);
+    }
+  };
   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,59 +334,103 @@ 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 => {
-    let [id, seatGroup] = _ref3;
-    const seatPriceages = pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === parseInt(id));
-    return /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-section-list"
+  }, Object.entries(seatGroupsToBook).map((_ref5, i) => {
+    let [id, seatGroup] = _ref5;
+    const totalQty = seatGroup.seats.length;
+    const selectedQty = seatGroup.priceages.reduce((acc, curr) => acc + curr.qty, 0);
+    const groupedByRows = seatGroup.seats.reduce((acc, curr) => {
+      if (!acc[curr.seat.r]) {
+        acc[curr.seat.r] = [];
+      }
+      acc[curr.seat.r].push(curr);
+      return acc;
+    }, {});
+    return selectedSeats.length > 6 ? /*#__PURE__*/_react.default.createElement("div", {
       key: id,
       className: "seat-group"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "seat-group-header"
-    }, /*#__PURE__*/_react.default.createElement("h4", null, seatGroup.seats[0].psName), /*#__PURE__*/_react.default.createElement("p", null, "".concat(seatGroup.seats.length, " seat").concat(seatGroup.seats.length !== 1 ? "s" : ""))), /*#__PURE__*/_react.default.createElement("p", {
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      className: "ps-name"
+    }, seatGroup.seats[0].seat.psName), /*#__PURE__*/_react.default.createElement("p", {
+      className: "no-of-seats"
+    }, "".concat(seatGroup.seats.length, " seat").concat(seatGroup.seats.length !== 1 ? "s" : ""))), /*#__PURE__*/_react.default.createElement("div", {
       className: "seat-names"
-    }, seatGroup.seats.map(s => "".concat(s.r, "-").concat(s.c)).sort().join(", ")), seatPriceages.filter(price => price.is_available !== false).length > 0 ? /*#__PURE__*/_react.default.createElement(PriceSelect, {
-      seatGroup: seatGroup,
-      seatPriceages: seatPriceages,
-      updateSeatGroupPriceage: newPriceage => {
-        const newSeats = _objectSpread({}, seatGroupsToBook);
-        newSeats[id].priceage = newPriceage;
-        setSeatGroupsToBook(newSeats);
+    }, Object.entries(groupedByRows).map(_ref6 => {
+      let [row, seats] = _ref6;
+      const isAllNumbers = seats.every(s => numOnlyRgx.test(s.seat.c));
+      seats.sort((a, b) => isAllNumbers ? parseInt(a.seat.c) - parseInt(b.seat.c) : a.seat.c.localeCompare(b.seat.c));
+
+      // If all seats in the row are numbers, sort and format them as ranges
+      if (isAllNumbers) {
+        const ranges = [];
+        let start = parseInt(seats[0].seat.c);
+        let end = parseInt(seats[0].seat.c);
+        for (let i = 1; i < seats.length; i++) {
+          const currCol = parseInt(seats[i].seat.c);
+          if (currCol === end + 1) {
+            end = currCol;
+          } else {
+            ranges.push(start === end ? "".concat(start) : "".concat(start, "-").concat(end));
+            start = currCol;
+            end = currCol;
+          }
+        }
+        ranges.push(start === end ? "".concat(start) : "".concat(start, "-").concat(end));
+        return ranges.map(r => /*#__PURE__*/_react.default.createElement("span", {
+          className: "seat-name",
+          key: r
+        }, "".concat(row, " ").concat(r)));
       }
-    }) : /*#__PURE__*/_react.default.createElement("p", {
+      return seats.map(s => /*#__PURE__*/_react.default.createElement("span", {
+        className: "seat-name",
+        key: s.seat.ssId
+      }, row, " ", s.seat.c));
+    })), seatGroup.priceages.filter(pa => pa.priceage.q === null || pa.priceage.q > 0).length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "price-select-wrapper"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "bulk-price-select"
+    }, seatGroup.priceages.map(_ref7 => {
+      var _priceage$q;
+      let {
+        priceage,
+        qty
+      } = _ref7;
+      return /*#__PURE__*/_react.default.createElement(Option, {
+        key: priceage.paId,
+        priceage: priceage,
+        qty: qty,
+        max: Math.min(totalQty - (selectedQty - qty), (_priceage$q = priceage.q) !== null && _priceage$q !== void 0 ? _priceage$q : totalQty),
+        updateSeatGroupPriceage: updateSeatGroupPriceage
+      });
+    })), /*#__PURE__*/_react.default.createElement("p", {
+      className: "selected-qty ".concat(selectedQty === totalQty ? "complete" : "")
+    }, "Selected: ", selectedQty, " of ", totalQty)) : /*#__PURE__*/_react.default.createElement("p", {
       className: "no-prices-available"
-    }, "Oops, looks like there are no prices available for this section."));
-  }) : isSingleSeats && 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"
+    }, "Oops, looks like there are no prices available for this section.")) : /*#__PURE__*/_react.default.createElement("div", {
+      key: id,
+      className: "single-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", {
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      className: "ps-name"
+    }, seatGroup.seats[0].seat.psName), /*#__PURE__*/_react.default.createElement("p", {
+      className: "no-of-seats"
+    }, "".concat(seatGroup.seats.length, " seat").concat(seatGroup.seats.length !== 1 ? "s" : ""))), seatGroup.priceages.filter(pa => pa.priceage.q === null || pa.priceage.q > 0).length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "seat-list"
+    }, seatGroup.seats.sort((a, b) => seatGroup.seats.every(s => numOnlyRgx.test(s.seat.c)) ? parseInt(a.seat.c) - parseInt(b.seat.c) : a.seat.c.localeCompare(b.seat.c)).map(s => /*#__PURE__*/_react.default.createElement(SingleSelect, {
+      key: s.seat.ssId,
+      seat: s,
+      seats: seatGroup.seats,
+      seatPriceages: seatGroup.priceages.map(pa => pa.priceage),
+      updateSeatPriceage: updateSeatPriceage
+    }))) : /*#__PURE__*/_react.default.createElement("p", {
       className: "no-prices-available"
     }, "Oops, looks like there are no prices available for this section."));
-  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "buttons"
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "cancel",
@@ -155,12 +438,11 @@ function PricingPopup(_ref2) {
   }, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
     className: "add-cart",
     onClick: () => {
-      isSingleSeats ? batchAddTicketsToCart(singleSeatsToBook) : batchAddTicketsToCart(Object.values(seatGroupsToBook).filter(v => !!v.priceage).flatMap(s => s.seats.map(seat => ({
-        seat,
-        priceage: s.priceage
-      }))));
-      onClose();
+      if (!Object.values(seatGroupsToBook).some(s => s.seats.some(s => !s.priceage))) {
+        batchAddTicketsToCart(Object.values(seatGroupsToBook).flatMap(s => s.seats));
+        onClose();
+      }
     },
-    disabled: isSingleSeats ? singleSeatsToBook.every(v => !v.priceage) : Object.values(seatGroupsToBook).every(v => !v.priceage)
-  }, "Add to cart")))));
+    disabled: Object.values(seatGroupsToBook).some(s => s.seats.some(s => !s.priceage))
+  }, selectedSeats.length > 1 ? "Add all to cart" : "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", {