iticket-seatingplan-dev 1.5.6 → 1.5.7

package/dist/components/PricingPopup.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PricingPopup;
+var _react = require("react");
+var _utils = require("../utils");
+var _encodedSvgs = require("./assets/encodedSvgs");
+var _Flexi = _interopRequireDefault(require("./Flexi"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const PriceSelect = _ref => {
+  let {
+    seatGroup,
+    seatPriceages,
+    updateSeatGroupPriceage
+  } = _ref;
+  const [flexiOpen, setFlexiOpen] = (0, _react.useState)(false);
+  const isSelectedPriceFlexi = !!seatGroup.priceage.pMax && !!seatGroup.priceage.pMin && seatGroup.priceage.pMax > seatGroup.priceage.pMin;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "price-select"
+  }, /*#__PURE__*/React.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.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    className: "flexi-button",
+    onClick: () => setFlexiOpen(true)
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _encodedSvgs.flexiIcon,
+    height: "18px",
+    width: "18px"
+  }), /*#__PURE__*/React.createElement("span", null, "Edit FLEXi price")), flexiOpen && /*#__PURE__*/React.createElement("div", {
+    className: "flexi-popup",
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/React.createElement(_Flexi.default, {
+    price: seatGroup.priceage,
+    onClose: () => setFlexiOpen(false),
+    onConfirm: value => {
+      const newPriceage = _objectSpread(_objectSpread({}, seatGroup.priceage), {}, {
+        p: value
+      });
+      updateSeatGroupPriceage(newPriceage);
+    },
+    buttonText: "Confirm"
+  }))));
+};
+function PricingPopup(_ref2) {
+  let {
+    cancelPriceSelect,
+    groupedSelectedSeats,
+    pricing,
+    priceSectionIds,
+    batchAddTicketsToCart
+  } = _ref2;
+  const [seatsToBook, setSeatsToBook] = (0, _react.useState)(groupedSelectedSeats);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "pricing-popup-backdrop",
+    onClick: cancelPriceSelect
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pricing-popup",
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "popup-header"
+  }, /*#__PURE__*/React.createElement("h3", null, "Choose prices"), /*#__PURE__*/React.createElement("button", {
+    className: "close-button",
+    "aria-label": "close popup",
+    onClick: cancelPriceSelect
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _encodedSvgs.closeIcon,
+    alt: "close",
+    height: "20px",
+    width: "20px"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "seat-list"
+  }, Object.entries(seatsToBook).map(_ref3 => {
+    let [id, seatGroup] = _ref3;
+    const seatPriceages = pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === parseInt(id));
+    return /*#__PURE__*/React.createElement("div", {
+      key: id,
+      className: "seat-group"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "seat-group-header"
+    }, /*#__PURE__*/React.createElement("h4", null, seatGroup.seats[0].psName), /*#__PURE__*/React.createElement("p", null, "".concat(seatGroup.seats.length, " seat").concat(seatGroup.seats.length !== 1 ? "s" : ""))), /*#__PURE__*/React.createElement("p", {
+      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.createElement(PriceSelect, {
+      seatGroup: seatGroup,
+      seatPriceages: seatPriceages,
+      updateSeatGroupPriceage: newPriceage => {
+        const newSeats = _objectSpread({}, seatsToBook);
+        newSeats[id].priceage = newPriceage;
+        setSeatsToBook(newSeats);
+      }
+    }) : /*#__PURE__*/React.createElement("p", {
+      className: "no-prices-available"
+    }, "Oops, looks like there are no prices available for this section."));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "buttons"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "cancel",
+    onClick: cancelPriceSelect
+  }, "Cancel"), /*#__PURE__*/React.createElement("button", {
+    className: "add-cart",
+    onClick: () => {
+      batchAddTicketsToCart(Object.values(seatsToBook).filter(v => !!v.priceage).flatMap(s => s.seats.map(seat => ({
+        seat,
+        priceage: s.priceage
+      }))));
+      cancelPriceSelect();
+    },
+    disabled: Object.values(seatsToBook).every(v => !v.priceage)
+  }, "Add to cart"))));
+}