iticket-seatingplan-dev 1.7.0 → 1.7.2

package/dist/components/SeatingPlan.js

@@ -24,6 +24,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); }
+const MAX_RETRIES = 5;
 const SeatingPlan = _ref => {
   var _document, _document2, _document3;
   let {
@@ -97,7 +98,7 @@ const SeatingPlan = _ref => {
       }
       return;
     }
-    if (priceage.is_available === false) {
+    if (priceage.q !== null && priceage.q <= 0) {
       const event = {
         type: "error",
         details: {
@@ -310,8 +311,8 @@ const SeatingPlan = _ref => {
           }
           succeeded.push(seat);
         } catch (error) {
-          console.error("Failed to book seat ".concat(seat, ":"), error);
-          throw new Error("Booking failed for seat ".concat(seat));
+          console.error("Failed to book seat ".concat(seat.seat.r, " ").concat(seat.seat.c, ":"), error);
+          throw new Error(error === "429" ? error : "Booking failed for seat ".concat(seat.seat.r, " ").concat(seat.seat.c));
         }
       }
       setBookedSeats(prev => [...prev, ...seatsToBook.map(_ref2 => {
@@ -376,14 +377,15 @@ const SeatingPlan = _ref => {
         type: "error",
         details: {
           error: {
-            code: 500,
-            message: "Oops! Something went wrong. Please try again."
+            code: error === "429" ? 429 : 500,
+            message: error === "429" ? "Someone else selected these first. Please try again." : "Oops! Something went wrong. Please try again."
           }
         }
       };
       callbackFunction === null || callbackFunction === void 0 || callbackFunction(event);
+    } finally {
+      _initialFetch(true);
     }
-    _initialFetch(true);
   };
   const batchRemoveTicketsFromCart = async seatsToRemove => {
     if (!canMultiSelect && !seats.preventOrphanedSeats || seatsToRemove.length === 0) {
@@ -466,7 +468,8 @@ const SeatingPlan = _ref => {
       return;
     }
     if (s.s === _utils.statuses.UNSOLD) {
-      const availablePrices = seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && s.psId === price.psId);
+      var _seats$pricing;
+      const availablePrices = ((_seats$pricing = seats.pricing) === null || _seats$pricing === void 0 ? void 0 : _seats$pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && s.psId === price.psId)) || [];
       const isSingleFlexi = availablePrices.length === 1 && !!availablePrices[0].pMax && !!availablePrices[0].pMin && availablePrices[0].pMax > availablePrices[0].pMin;
       if (availablePrices.length === 1 && !isSingleFlexi) {
         addTicketToCart(s, availablePrices[0], {
@@ -478,32 +481,39 @@ const SeatingPlan = _ref => {
       removeTicketFromCart(s, e);
     }
   };
-  const _initialFetch = function initialFetch() {
+  const _initialFetch = async function initialFetch() {
     let isReload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    let retryCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     if (isReload) {
       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) : ""), {
-      headers: {
-        "basket-key": sessionId,
-        Authorization: "Bearer ".concat(apiKey)
+    try {
+      const response = await 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)
+        }
+      });
+      if (response.status === 429) {
+        if (retryCount >= MAX_RETRIES) {
+          throw new Error("We're experiencing high demand. Please try again later.");
+        }
+        const delay = (0, _utils.getRetryDelay)(response, retryCount);
+        setInitialiseMessage("We're experiencing high demand. Please wait while we try again...");
+        await new Promise(resolve => setTimeout(resolve, delay));
+        return _initialFetch(isReload, retryCount + 1);
       }
-    }).then(async response => {
       const data = await response.json();
-      data.retryAfter = response.headers.get("Retry-After");
-      return data;
-    }).then(data => {
-      if (data.statusCode === 429) {
-        setInitialiseMessage("Looks like it's busy. Stand by. Trying again in ".concat(data.retryAfter, " second").concat(data.retryAfter > 1 ? "s" : "", "."));
-        return setTimeout(_initialFetch, data.retryAfter * 1000);
-      }
-      if (data.statusCode === 403) {
-        if (!sessionId || data.message === "Invalid Session id.") {
+      if (!response.ok || !(data !== null && data !== void 0 && data.seats)) {
+        if (!sessionId || data.message === "Invalid Session id." || data.message === "Session not found") {
           throw new Error("Looks like your cart has expired. Please refresh the page to try again.");
-        } else {
+        } else if (data.statusCode === 403) {
           throw new Error("Invalid API Key or unauthorized URL");
+        } else {
+          throw new Error("Something went wrong. Please try again or contact support.");
         }
       }
       const img = new Image();
@@ -531,7 +541,7 @@ const SeatingPlan = _ref => {
         }
       };
       setIsReloading(false);
-    }).catch(error => {
+    } catch (error) {
       var _error$message;
       // console.log(error);
       setError({
@@ -542,7 +552,7 @@ const SeatingPlan = _ref => {
         }
       });
       setIsReloading(false);
-    });
+    }
   };
   (0, _react.useEffect)(() => {
     if (!error && areaId !== area) {
@@ -551,13 +561,6 @@ const SeatingPlan = _ref => {
       setPosition(null);
     }
   }, [areaId]);
-  (0, _react.useEffect)(() => {
-    if (ticketPopupOpen) {
-      chosenSeat === null || chosenSeat === void 0 || chosenSeat.circle.target.setStyle({
-        fillOpacity: 0
-      });
-    }
-  }, [ticketPopupOpen, chosenSeat]);
 
   // TEST
   // useEffect(() => console.log("Booked: ", bookedSeats), [bookedSeats]);
@@ -566,28 +569,6 @@ 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);
-      const availablePriceages = priceages.filter(p => p.is_available !== false);
-      if (!acc[curr.psId]) {
-        acc[curr.psId] = {
-          seats: [],
-          priceage: availablePriceages.length > 0 ? availablePriceages[0] : undefined
-        };
-      }
-      acc[curr.psId].seats.push(curr);
-    }
-    return acc;
-  }, {});
 
   // return seating plan
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -601,17 +582,15 @@ const SeatingPlan = _ref => {
   }), backdropContainer), mapContainer && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
     className: "seating-plan-container ".concat(isFullScreen ? "full-screen" : ""),
     "data-mode": mode
-  }, pricingPopupOpen && (canMultiSelect || seats.preventOrphanedSeats) ? /*#__PURE__*/_react.default.createElement(_PricingPopup.default, {
+  }, pricingPopupOpen && seats && seats.pricing && (canMultiSelect || seats.preventOrphanedSeats) ? /*#__PURE__*/_react.default.createElement(_PricingPopup.default, {
     onClose: () => {
       setPricingPopupOpen(false);
       setSelectedSeats([]);
     },
-    groupedSelectedSeats: groupedSelectedSeats,
-    selectedSeatsWithPricing: selectedSeatsWithPricing,
-    priceSectionIds: priceSectionIds,
+    selectedSeats: selectedSeats,
     pricing: seats.pricing,
-    batchAddTicketsToCart: batchAddTicketsToCart,
-    isSingleSeats: seats.preventOrphanedSeats
+    priceSectionIds: priceSectionIds,
+    batchAddTicketsToCart: batchAddTicketsToCart
   }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), seats.preventOrphanedSeats && selectQuantityPopupOpen ? /*#__PURE__*/_react.default.createElement(_SelectQuantityPopup.default, {
     quantity: desiredSeatQuantity,
     setQuantity: v => {
@@ -665,7 +644,6 @@ const SeatingPlan = _ref => {
     setPricingPopupOpen: setPricingPopupOpen,
     selectedSeats: selectedSeats,
     setSelectedSeats: setSelectedSeats,
-    selectQuantityPopupOpen: selectQuantityPopupOpen,
     setSelectQuantityPopupOpen: setSelectQuantityPopupOpen,
     desiredSeatQuantity: desiredSeatQuantity,
     setSeatsToRemove: setSeatsToRemove,

package/dist/components/SelectQuantityPopup.js

@@ -16,7 +16,7 @@ const PriceSelect = _ref => {
     setNewQuantity
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "price-select"
+    className: "seat-qty-select"
   }, /*#__PURE__*/_react.default.createElement("select", {
     onChange: e => {
       setNewQuantity(parseInt(e.target.value));
@@ -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/icons/MinusIcon.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MinusIcon;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function MinusIcon(_ref) {
+  let {
+    height = "14px",
+    width = "14px",
+    color = "currentColor",
+    strokeWidth = "1.5",
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    height: height,
+    width: width,
+    strokeWidth: strokeWidth,
+    stroke: color,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M5 12h14"
+  }));
+}

package/dist/components/icons/PlusIcon.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PlusIcon;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PlusIcon(_ref) {
+  let {
+    height = "14px",
+    width = "14px",
+    color = "currentColor",
+    strokeWidth = "1.5",
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    height: height,
+    width: width,
+    strokeWidth: strokeWidth,
+    stroke: color,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M12 4.5v15m7.5-7.5h-15"
+  }));
+}

package/dist/components/styles/flexi.css

@@ -15,13 +15,14 @@
   color: #333;
   box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
   border-radius: 12px;
+  min-width: 320px;
 }
 
 .flexi-popup-content {
   overflow: hidden;
 }
 
-.flexi-popup-content .popup-header {
+.flexi-popup-header.popup-header {
   margin-top: 0;
   background: var(--flexi-accent);
   color: white;
@@ -43,6 +44,12 @@
   margin-top: -2px;
 }
 
+.flexi-popup .flexi-popup-content .flexi-content.open {
+  border: none;
+  margin-top: 0;
+  padding: 1rem;
+}
+
 .flexi-popup-content .flexi-content.open {
   margin-top: 0.5rem;
   padding: 0.5rem;
@@ -168,13 +175,24 @@
 
 .min-max p {
   margin: 0;
-  font-size: 0.9rem;
+  font-size: 0.875rem;
 }
 
 .slider-container .value {
   text-align: center;
-  font-size: 1.8rem;
+  font-size: 1.8rem !important;
   font-weight: bold;
   margin: 0 0 0.5rem 0;
   color: var(--flexi-accent);
 }
+
+.flexi-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 1rem 0;
+}
+
+.flexi-checkbox input[type="checkbox"] {
+  accent-color: var(--flexi-accent);
+}