iticket-seatingplan-dev 1.8.5 → 1.8.7

package/dist/components/Control.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _leaflet = _interopRequireDefault(require("leaflet"));
+var _react = _interopRequireDefault(require("react"));
+var _reactLeaflet = require("react-leaflet");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const POSITION_CLASSES = {
+  bottomleft: "leaflet-bottom leaflet-left",
+  bottomright: "leaflet-bottom leaflet-right",
+  topleft: "leaflet-top leaflet-left",
+  topright: "leaflet-top leaflet-right"
+};
+const Control = props => {
+  var _props$container;
+  const [portalRoot, setPortalRoot] = _react.default.useState(document.createElement("div"));
+  const positionClass = props.position && POSITION_CLASSES[props.position] || POSITION_CLASSES.topright;
+  const controlContainerRef = /*#__PURE__*/_react.default.createRef();
+  const map = (0, _reactLeaflet.useMap)();
+
+  /**
+   * Whenever the control container ref is created,
+   * Ensure the click / scroll propagation is removed
+   * This way click/scroll events do not bubble down to the map
+   */
+  _react.default.useEffect(() => {
+    if (controlContainerRef.current !== null) {
+      _leaflet.default.DomEvent.disableClickPropagation(controlContainerRef.current);
+      _leaflet.default.DomEvent.disableScrollPropagation(controlContainerRef.current);
+    }
+  }, [controlContainerRef]);
+
+  /**
+   * Whenever the position is changed, go ahead and get the container of the map and the first
+   * instance of the position class in that map container
+   * Fixes #17
+   */
+  _react.default.useEffect(() => {
+    const mapContainer = map.getContainer();
+    const targetDiv = mapContainer.getElementsByClassName(positionClass);
+    setPortalRoot(targetDiv[0]);
+  }, [positionClass]);
+
+  /**
+   * Whenever the portal root is complete,
+   * append or prepend the control container to the portal root
+   */
+  _react.default.useEffect(() => {
+    if (portalRoot !== null) {
+      if (props.prepend !== undefined && props.prepend === true) {
+        portalRoot.prepend(controlContainerRef.current);
+      } else {
+        portalRoot.append(controlContainerRef.current);
+      }
+    }
+  }, [portalRoot, props.prepend, controlContainerRef]);
+
+  /**
+   * Concatenate the props.container className to the class of the control div
+   */
+  const className = (((_props$container = props.container) === null || _props$container === void 0 || (_props$container = _props$container.className) === null || _props$container === void 0 ? void 0 : _props$container.concat(" ")) || "") + "leaflet-control";
+
+  /**
+   * Render
+   */
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, props.container, {
+    ref: controlContainerRef,
+    className: className
+  }), props.children);
+};
+var _default = exports.default = Control;

package/dist/components/Map.js

@@ -420,7 +420,7 @@ function SeatMap(_ref) {
     isReloading: isReloading,
     hasMembershipSeats: (seats === null || seats === void 0 || (_seats$seats2 = seats.seats) === null || _seats$seats2 === void 0 ? void 0 : _seats$seats2.filter(seat => seat.m).length) > 0,
     hasBookedSeats: (bookedSeats === null || bookedSeats === void 0 ? void 0 : bookedSeats.length) > 0
-  }), /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
+  }), (seats === null || seats === void 0 ? void 0 : seats.background) && /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
     url: seats === null || seats === void 0 ? void 0 : seats.background,
     bounds: [[0, 0], [height * 0.03, width * 0.03]],
     zIndex: 10

package/dist/components/SeatingPlan.js

@@ -24,7 +24,8 @@ 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_MAX_RETRIES = 5;
+const BOOKING_MAX_RETRIES = 2;
 const SeatingPlan = _ref => {
   var _document, _document2, _document3;
   let {
@@ -67,6 +68,7 @@ const SeatingPlan = _ref => {
   const [seatsToRemove, setSeatsToRemove] = (0, _react.useState)([]);
   const [removeMultipleSeatsPopupOpen, setRemoveMultipleSeatsPopupOpen] = (0, _react.useState)(false);
   const [invalidSeatsPopupOpen, setInvalidSeatsPopupOpen] = (0, _react.useState)(false);
+  const [retrying, setRetrying] = (0, _react.useState)([]);
   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);
@@ -83,17 +85,36 @@ const SeatingPlan = _ref => {
     };
     callbackFunction === null || callbackFunction === void 0 || callbackFunction(event);
   };
-  const addTicketToCart = (s, priceage) => {
+  const updateSeat = (seatIndex, newSeat) => {
+    if (seatIndex !== -1) {
+      setSeats(prev => {
+        const updatedSeats = _objectSpread({}, prev);
+        updatedSeats.seats[seatIndex] = newSeat;
+        return updatedSeats;
+      });
+    }
+  };
+  const setSeatsLoading = (seatsToUpdate, loading) => {
+    setSeats(prev => {
+      const updatedSeats = _objectSpread({}, prev);
+      seatsToUpdate.forEach(seat => {
+        const seatIndex = updatedSeats.seats.findIndex(s => s.ssId === seat.ssId);
+        if (seatIndex !== -1) {
+          updatedSeats.seats[seatIndex] = _objectSpread(_objectSpread({}, updatedSeats.seats[seatIndex]), {}, {
+            loading: loading
+          });
+        }
+      });
+      return updatedSeats;
+    });
+  };
+  const _addTicketToCart = async function addTicketToCart(s, priceage) {
     var _mapRef$current;
-    const updatedSeats = _objectSpread({}, seats);
-    const seatIndex = updatedSeats.seats.findIndex(seat => seat.ssId === s.ssId);
-    const setSeatLoading = loading => {
-      if (seatIndex !== -1) {
-        updatedSeats.seats[seatIndex].loading = loading;
-        setSeats(updatedSeats);
-      }
-    };
-    setSeatLoading(true);
+    let retryCount = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    const seatIndex = seats.seats.findIndex(seat => seat.ssId === s.ssId);
+    updateSeat(seatIndex, _objectSpread(_objectSpread({}, s), {}, {
+      loading: true
+    }));
     const isSeatAvailable = (s.s === _utils.statuses.UNSOLD || s.s === _utils.statuses.USER_PENDING) && !(bookedSeats.length >= quantity && s.s === _utils.statuses.UNSOLD) && (priceage.q === null || priceage.q > 0);
     if (!isSeatAvailable) {
       if (bookedSeats.length >= quantity) {
@@ -105,210 +126,224 @@ const SeatingPlan = _ref => {
           message: _utils.ERROR_MESSAGES.NO_ALLOCATION
         });
       }
-      setSeatLoading(false);
+      updateSeat(seatIndex, _objectSpread(_objectSpread({}, s), {}, {
+        loading: false
+      }));
       return;
     }
     (_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 || (_mapRef$current = _mapRef$current.target) === null || _mapRef$current === void 0 || _mapRef$current.closePopup();
-    fetch(apiUrl, {
-      method: "POST",
-      body: JSON.stringify({
-        priceAgeId: priceage.paId,
-        seatId: s.ssId,
-        price: priceage.p,
-        connectedShowings: connectedShowings
-      }),
-      headers: {
-        "content-type": "application/json",
-        "basket-key": sessionId
-      }
-    }).then(response => {
-      if ((response === null || response === void 0 ? void 0 : response.status) === 403 || (response === null || response === void 0 ? void 0 : response.status) === 400) {
-        if (seatIndex !== -1) {
-          updatedSeats.seats[seatIndex] = _objectSpread(_objectSpread({}, s), {}, {
-            loading: false,
-            s: _utils.statuses.SOLD
-          });
-          setSeats(updatedSeats);
+    try {
+      const response = await fetch(apiUrl, {
+        method: "POST",
+        body: JSON.stringify({
+          priceAgeId: priceage.paId,
+          seatId: s.ssId,
+          price: priceage.p,
+          connectedShowings: connectedShowings
+        }),
+        headers: {
+          "content-type": "application/json",
+          "basket-key": sessionId
         }
+      });
+      if ((response === null || response === void 0 ? void 0 : response.status) === 429) {
+        if (retryCount < BOOKING_MAX_RETRIES) {
+          setRetrying(prev => [...prev, s.ssId]);
+          const delay = (0, _utils.getRetryDelay)(response);
+          await new Promise(resolve => setTimeout(resolve, delay));
+          return _addTicketToCart(s, priceage, retryCount + 1);
+        }
+        updateSeat(seatIndex, _objectSpread(_objectSpread({}, s), {}, {
+          loading: false
+        }));
+        setRetrying(prev => prev.filter(id => id !== s.ssId));
         handleError({
-          code: 403,
-          message: response.status === 400 ? _utils.ERROR_MESSAGES.INCOMPATIBLE_TICKETS : _utils.ERROR_MESSAGES.SEAT_UNAVAILABLE
+          code: 429,
+          message: _utils.ERROR_MESSAGES.MAX_RETRIES
         });
-      } else if ((response === null || response === void 0 ? void 0 : response.status) === 429) {
-        setSeatLoading(false);
+        return;
+      }
+      setRetrying(prev => prev.filter(id => id !== s.ssId));
+      if ((response === null || response === void 0 ? void 0 : response.status) === 403) {
+        updateSeat(seatIndex, _objectSpread(_objectSpread({}, s), {}, {
+          loading: false,
+          s: _utils.statuses.SOLD
+        }));
         handleError({
-          code: 429,
+          code: 403,
           message: _utils.ERROR_MESSAGES.SEAT_TAKEN
         });
+        return;
+      }
+      if (!(response !== null && response !== void 0 && response.ok)) {
+        updateSeat(seatIndex, _objectSpread(_objectSpread({}, s), {}, {
+          loading: false
+        }));
+        handleError({
+          code: (response === null || response === void 0 ? void 0 : response.status) === 400 ? 400 : 500,
+          message: (response === null || response === void 0 ? void 0 : response.status) === 400 ? _utils.ERROR_MESSAGES.INCOMPATIBLE_TICKETS : _utils.ERROR_MESSAGES.GENERIC_ERROR
+        });
       } else {
-        if (seatIndex !== -1) {
-          updatedSeats.seats[seatIndex] = _objectSpread(_objectSpread({}, s), {}, {
-            s: _utils.statuses.USER_PENDING,
-            bookedPrice: price,
-            loading: false
-          });
-          setSeats(updatedSeats);
-        }
-        setBookedSeats(prev => [...prev, {
-          ssId: s.ssId,
-          r: s.r,
-          c: s.c,
+        updateSeat(seatIndex, _objectSpread(_objectSpread({}, s), {}, {
+          loading: false,
+          s: _utils.statuses.USER_PENDING,
+          bookedPrice: price
+        }));
+        setBookedSeats(prev => [...prev, _objectSpread(_objectSpread({}, s), {}, {
           showingId: showingId,
           pId: priceage.paId,
           p: priceage.p,
           paName: priceage.paName
-        }]);
+        })]);
         const event = {
           type: "cart-change-add",
-          details: [...bookedSeats, {
-            ssId: s.ssId,
-            r: s.r,
-            c: s.c,
+          details: [_objectSpread(_objectSpread({}, s), {}, {
             showingId: showingId,
             pId: priceage.paId,
             p: priceage.p,
             paName: priceage.paName
-          }]
+          })]
         };
         callbackFunction === null || callbackFunction === void 0 || callbackFunction(event);
       }
-    }).catch(() => {
-      setSeatLoading(false);
+    } catch (_unused) {
+      updateSeat(seatIndex, _objectSpread(_objectSpread({}, s), {}, {
+        loading: false
+      }));
+      setRetrying(prev => prev.filter(id => id !== s.ssId));
       handleError({
         code: 500,
         message: _utils.ERROR_MESSAGES.GENERIC_ERROR
       });
-    }).finally(() => {
-      _initialFetch(true);
-    });
+    }
   };
-  const removeTicketFromCart = (s, e) => {
-    const updatedSeats = _objectSpread({}, seats);
-    const seatIndex = updatedSeats.seats.findIndex(seat => seat.ssId === s.ssId);
-    const setSeatLoading = loading => {
-      if (seatIndex !== -1) {
-        updatedSeats.seats[seatIndex].loading = loading;
-        setSeats(updatedSeats);
-      }
-    };
-    setSeatLoading(true);
-    fetch("".concat(apiUrl, "/seat/").concat(s.ssId), {
-      method: "DELETE",
-      headers: {
-        "basket-key": sessionId
-      }
-    }).then(() => {
-      if (seatIndex !== -1) {
-        updatedSeats.seats[seatIndex] = _objectSpread(_objectSpread({}, s), {}, {
-          loading: false,
-          s: _utils.statuses.UNSOLD,
-          bookedPrice: null
-        });
-        setSeats(updatedSeats);
+  const removeTicketFromCart = async (s, e) => {
+    const seatIndex = seats.seats.findIndex(seat => seat.ssId === s.ssId);
+    updateSeat(seatIndex, _objectSpread(_objectSpread({}, s), {}, {
+      loading: true
+    }));
+    try {
+      const response = await fetch("".concat(apiUrl, "/seat/").concat(s.ssId), {
+        method: "DELETE",
+        headers: {
+          "basket-key": sessionId
+        }
+      });
+      if (!response.ok) {
+        throw new Error("".concat(response.status));
       }
+      updateSeat(seatIndex, _objectSpread(_objectSpread({}, s), {}, {
+        loading: false,
+        s: _utils.statuses.UNSOLD,
+        bookedPrice: null
+      }));
       setBookedSeats(prev => prev.filter(bs => bs.ssId !== s.ssId));
       const event = {
         type: "cart-change-remove",
         details: bookedSeats.filter(bs => bs.ssId === s.ssId)
       };
       callbackFunction === null || callbackFunction === void 0 || callbackFunction(event);
-    }).catch(() => {
-      setSeatLoading(false);
-      e.target.setStyle({
-        fillColor: _utils.statusColors.booked
-      });
+    } catch (_unused2) {
+      updateSeat(seatIndex, _objectSpread(_objectSpread({}, s), {}, {
+        loading: false
+      }));
       handleError({
         code: 500,
         message: _utils.ERROR_MESSAGES.GENERIC_ERROR
       });
-    }).finally(() => {
-      _initialFetch(true);
-    });
+    }
   };
   const batchAddTicketsToCart = async seatsToBook => {
     if (!canMultiSelect && !seats.preventOrphanedSeats || seatsToBook.length === 0) {
       return;
     }
-    const updatedSeats = _objectSpread({}, seats);
-    const seatIds = seatsToBook.map(s => s.seat.ssId);
-    const setSeatsLoading = loading => {
-      updatedSeats.seats.forEach(s => {
-        if (seatIds.includes(s.ssId)) {
-          s.loading = loading;
-        }
-      });
-      setSeats(updatedSeats);
-    };
-    setSeatsLoading(true);
+    setSeatsLoading(seatsToBook.map(seat => seat.seat), true);
     const succeeded = [];
-    try {
-      for (const seat of seatsToBook) {
-        try {
-          const res = 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
-            }
-          });
-          if (!res.ok) {
-            throw new Error("".concat(res.status));
+    const _tryBook = async function tryBook(seatToBook) {
+      let retryCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      try {
+        const res = await fetch(apiUrl, {
+          method: "POST",
+          body: JSON.stringify({
+            priceAgeId: seatToBook.priceage.paId,
+            seatId: seatToBook.seat.ssId,
+            price: seatToBook.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.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));
+        });
+        if (res.status === 429) {
+          if (retryCount < BOOKING_MAX_RETRIES) {
+            setRetrying(prev => [...prev, seatToBook.seat.ssId]);
+            const delay = (0, _utils.getRetryDelay)(res);
+            await new Promise(resolve => setTimeout(resolve, delay));
+            return _tryBook(seatToBook, retryCount + 1);
+          } else {
+            throw new Error("429");
+          }
+        } else if (!res.ok) {
+          throw new Error("".concat(res.status));
         }
+        succeeded.push(seatToBook.seat);
+      } catch (_unused3) {
+        throw new Error("Booking failed for seat ".concat(seatToBook.seat.r, " ").concat(seatToBook.seat.c));
       }
+    };
+    try {
+      for (const seatToBook of seatsToBook) {
+        await _tryBook(seatToBook);
+      }
+      setRetrying(prev => prev.filter(id => !seatsToBook.some(s => s.seat.ssId === id)));
       setBookedSeats(prev => [...prev, ...seatsToBook.map(_ref2 => {
         let {
           seat,
           priceage
         } = _ref2;
-        return {
-          ssId: seat.ssId,
-          r: seat.r,
-          c: seat.c,
+        return _objectSpread(_objectSpread({}, seat), {}, {
           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(prev => {
+        const updatedSeats = _objectSpread({}, prev);
+        seatsToBook.forEach(_ref3 => {
+          let {
+            seat
+          } = _ref3;
+          const seatIndex = updatedSeats.seats.findIndex(s => s.ssId === seat.ssId);
+          if (seatIndex !== -1) {
+            updatedSeats.seats[seatIndex] = _objectSpread(_objectSpread({}, updatedSeats.seats[seatIndex]), {}, {
+              loading: false,
+              s: _utils.statuses.USER_PENDING,
+              bookedPrice: price
+            });
+          }
+        });
+        return updatedSeats;
       });
-      setSeats(updatedSeats);
       const event = {
         type: "cart-change-add",
-        details: [...bookedSeats, ...seatsToBook.map(_ref3 => {
+        details: [...seatsToBook.map(_ref4 => {
           let {
             seat,
             priceage
-          } = _ref3;
-          return {
-            ssId: seat.ssId,
-            r: seat.r,
-            c: seat.c,
+          } = _ref4;
+          return _objectSpread(_objectSpread({}, seat), {}, {
             showingId: showingId,
             pId: priceage.paId,
             p: priceage.p,
             paName: priceage.paName
-          };
+          });
         })]
       };
       callbackFunction === null || callbackFunction === void 0 || callbackFunction(event);
     } catch (error) {
+      setRetrying(prev => prev.filter(id => !seatsToBook.some(s => s.seat.ssId === id)));
       console.error("Failed to book seats:", error);
       for (const seat of succeeded) {
         await fetch("".concat(apiUrl, "/seat/").concat(seat.ssId), {
@@ -318,27 +353,18 @@ const SeatingPlan = _ref => {
           }
         });
       }
-      setSeatsLoading(false);
+      setSeatsLoading(seatsToBook.map(seat => seat.seat), false);
       handleError({
         code: error === "429" ? 429 : 500,
-        message: error === "429" ? _utils.ERROR_MESSAGES.SEAT_TAKEN : _utils.ERROR_MESSAGES.GENERIC_ERROR
+        message: _utils.ERROR_MESSAGES.GENERIC_ERROR
       });
-    } finally {
-      _initialFetch(true);
     }
   };
   const batchRemoveTicketsFromCart = async seatsToRemove => {
     if (!canMultiSelect && !seats.preventOrphanedSeats || seatsToRemove.length === 0) {
       return;
     }
-    const updatedSeats = _objectSpread({}, seats);
-    const seatIds = seatsToRemove.map(s => s.ssId);
-    updatedSeats.seats.forEach(s => {
-      if (seatIds.includes(s.ssId)) {
-        s.loading = true;
-      }
-    });
-    setSeats(updatedSeats);
+    setSeatsLoading(seatsToRemove, true);
     const succeededIds = [];
     try {
       for (const seat of seatsToRemove) {
@@ -357,23 +383,27 @@ const SeatingPlan = _ref => {
           console.error("Failed to remove seat ".concat(seat, ":"), error);
         }
       }
-    } catch (_unused) {
+    } catch (_unused4) {
       handleError({
         code: 500,
         message: _utils.ERROR_MESSAGES.GENERIC_ERROR
       });
     }
     setBookedSeats(prev => [...prev.filter(v => !succeededIds.includes(v.ssId))]);
-    updatedSeats.seats.forEach(s => {
-      if (seatIds.includes(s.ssId)) {
-        s.loading = false;
-        if (succeededIds.includes(s.ssId)) {
-          s.s = _utils.statuses.UNSOLD;
-          s.bookedPrice = null;
+    setSeats(prev => {
+      const updatedSeats = _objectSpread({}, prev);
+      seatsToRemove.forEach(s => {
+        const seatIndex = updatedSeats.seats.findIndex(seat => seat.ssId === s.ssId);
+        if (seatIndex !== -1) {
+          updatedSeats.seats[seatIndex] = _objectSpread(_objectSpread({}, updatedSeats.seats[seatIndex]), {}, {
+            loading: false,
+            s: succeededIds.includes(s.ssId) ? _utils.statuses.UNSOLD : s.s,
+            bookedPrice: null
+          });
         }
-      }
+      });
+      return updatedSeats;
     });
-    setSeats(updatedSeats);
     setSeatsToRemove([]);
     if (succeededIds.length > 0) {
       const event = {
@@ -382,7 +412,6 @@ const SeatingPlan = _ref => {
       };
       callbackFunction === null || callbackFunction === void 0 || callbackFunction(event);
     }
-    _initialFetch(true);
   };
   const handleClickSeat = (e, s) => {
     setChosenSeat({
@@ -402,7 +431,7 @@ const SeatingPlan = _ref => {
       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]);
+        _addTicketToCart(s, availablePrices[0]);
       }
     } else {
       removeTicketFromCart(s, e);
@@ -426,10 +455,10 @@ const SeatingPlan = _ref => {
         }
       });
       if (response.status === 429) {
-        if (retryCount >= MAX_RETRIES) {
+        if (retryCount >= SEATINGPLAN_MAX_RETRIES) {
           throw new Error("We're experiencing high demand. Please try again later.");
         }
-        const delay = (0, _utils.getRetryDelay)(response, retryCount);
+        const delay = (0, _utils.getRetryDelay)(response);
         setInitialiseMessage("We're experiencing high demand. Please wait while we try again...");
         await new Promise(resolve => setTimeout(resolve, delay));
         return _initialFetch(isReload, retryCount + 1);
@@ -444,8 +473,6 @@ const SeatingPlan = _ref => {
           throw new Error("Something went wrong. Please try again or contact support.");
         }
       }
-      const img = new Image();
-      img.src = data.background;
       setBookedSeats(data.seats.filter(s => s.s === _utils.statuses.USER_PENDING && s.bookedPrice === price).map(s => ({
         ssId: s.ssId,
         r: s.r,
@@ -456,18 +483,29 @@ const SeatingPlan = _ref => {
         pId: s.pId,
         paName: s.paName
       })));
-      img.onload = () => {
-        const imgSouthwest = [0, 0];
-        const imgNortheast = [img.height * 0.015, img.width * 0.015];
-        setBounds([imgSouthwest, imgNortheast]);
-        setPosition([img.height * 0.005, img.width * 0.005]);
-        setHeight(img.height * 0.5);
-        setWidth(img.width * 0.5);
+      const img = new Image();
+      const setupSeats = (height, width) => {
+        const southwest = [0, 0];
+        const northeast = [height * 0.015, width * 0.015];
+        setBounds([southwest, northeast]);
+        setPosition([height * 0.005, width * 0.005]);
+        setHeight(height * 0.5);
+        setWidth(width * 0.5);
         setSeats(data);
         if (data.preventOrphanedSeats && !isReload) {
           setSelectQuantityPopupOpen(true);
         }
       };
+      if (data.background) {
+        img.src = data.background;
+        img.onload = () => {
+          setupSeats(img.height, img.width);
+        };
+      } else {
+        const estHeight = 800;
+        const estWidth = 800;
+        setupSeats(estHeight, estWidth);
+      }
       setIsReloading(false);
     } catch (error) {
       var _error$message;
@@ -516,7 +554,9 @@ const SeatingPlan = _ref => {
     pricing: seats.pricing,
     priceSectionIds: priceSectionIds,
     batchAddTicketsToCart: batchAddTicketsToCart
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), seats.preventOrphanedSeats && selectQuantityPopupOpen ? /*#__PURE__*/_react.default.createElement(_SelectQuantityPopup.default, {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), retrying.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "retrying"
+  }, "Looks like things are busy right now. Please wait while we continue to confirm your selection...") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), seats.preventOrphanedSeats && selectQuantityPopupOpen ? /*#__PURE__*/_react.default.createElement(_SelectQuantityPopup.default, {
     quantity: desiredSeatQuantity,
     setQuantity: v => {
       setDesiredSeatQuantity(v);
@@ -553,7 +593,7 @@ const SeatingPlan = _ref => {
     setTicketPopupOpen: setTicketPopupOpen,
     chosenSeat: chosenSeat,
     bookedSeats: bookedSeats,
-    addTicketToCart: addTicketToCart,
+    addTicketToCart: _addTicketToCart,
     batchRemoveTicketsFromCart: batchRemoveTicketsFromCart,
     isReloading: isReloading,
     initialFetch: _initialFetch,

package/dist/components/styles/index.css

@@ -1597,6 +1597,22 @@ svg.leaflet-image-layer.leaflet-interactive path {
   transform: translateX(-50%);
 }
 
+.retrying {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: white;
+  border-radius: 5px;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  color: #333;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  z-index: 1005;
+  animation: fade-in 400ms;
+  max-width: 50%;
+}
+
 /* Printing */
 
 @media print {

package/dist/utils/enums.js

@@ -42,5 +42,6 @@ const ERROR_MESSAGES = exports.ERROR_MESSAGES = {
   SEAT_TAKEN: "Someone else selected this first. Please try again",
   GENERIC_ERROR: "Oops! Something went wrong. Please try again.",
   MAX_QUANTITY: "Maximum ticket booking quantity specified reached.",
-  NO_ALLOCATION: "Allocation exhausted, please try another area or price."
+  NO_ALLOCATION: "Allocation exhausted, please try another area or price.",
+  MAX_RETRIES: "Looks like things are busy and we couldn't complete your request. Please try again."
 };

package/dist/utils/helpers.js

@@ -228,15 +228,13 @@ const getAdjacentBookedSeats = (seat, seatsMap) => {
   return adjacentBookedSeats;
 };
 exports.getAdjacentBookedSeats = getAdjacentBookedSeats;
-const getRetryDelay = (response, attempt) => {
+const getRetryDelay = response => {
   var _ref, _ref2, _response$headers$get;
   const retryAfter = (_ref = (_ref2 = (_response$headers$get = response.headers.get("Retry-After")) !== null && _response$headers$get !== void 0 ? _response$headers$get : response.headers.get("retry-after")) !== null && _ref2 !== void 0 ? _ref2 : response.headers.get("rl-twm")) !== null && _ref !== void 0 ? _ref : "5";
-  if (retryAfter) {
-    return response.headers.get("rl-twm") ? Math.round(parseInt(retryAfter) * 60 * 1000) : parseInt(retryAfter) * 1000;
-  }
+  const delay = response.headers.get("rl-twm") ? Math.round(parseInt(retryAfter) * 60 * 1000) : parseInt(retryAfter) * 1000;
 
   // adds jitter
-  return attempt + Math.random() * 1000;
+  return delay + Math.random() * 1000;
 };
 exports.getRetryDelay = getRetryDelay;
 const groupSeatsByPriceSection = (seats, pricing, priceSectionIds) => {

package/package.json

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