iticket-seatingplan-dev 1.3.7 → 1.4.0

package/dist/components/SeatingPlan.js

@@ -0,0 +1,734 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./styles/index.css");
+var _react = _interopRequireWildcard(require("react"));
+var _reactLeaflet = require("react-leaflet");
+var _encodedSvgs = require("./assets/encodedSvgs");
+var _reactLeafletCustomControl = _interopRequireDefault(require("react-leaflet-custom-control"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const statuses = {
+  UNSOLD: 1,
+  SOLD: 2,
+  RESERVED: 3,
+  USER_PENDING: 4,
+  CHEQUE_PENDING: 5,
+  WHEELCHAIR_ACCESS: 6,
+  DOOR_SALES: 7,
+  ON_HOLD: 8,
+  REAL_TIME_DOOR_SALES: 9,
+  CANCELLED: 10
+};
+let NZDollar = new Intl.NumberFormat("en-NZ", {
+  style: "currency",
+  currency: "NZD"
+});
+const SeatingPlan = _ref => {
+  let {
+    eventId,
+    eventVenueId,
+    sessionId,
+    showingId,
+    areaId,
+    priceSectionIds,
+    price,
+    quantity,
+    callbackFunction,
+    apiKey,
+    baseUrl,
+    countryCode,
+    connectedShowings,
+    areaName
+  } = _ref;
+  const [initialiseMessage, setInitialiseMessage] = (0, _react.useState)("Initialising seating plan...");
+  const [isReloading, setIsReloading] = (0, _react.useState)(false);
+  const [map, setMap] = (0, _react.useState)();
+  const [position, setPosition] = (0, _react.useState)(null);
+  const [height, setHeight] = (0, _react.useState)(0);
+  const [width, setWidth] = (0, _react.useState)(0);
+  const [seats, setSeats] = (0, _react.useState)([]);
+  const [error, setError] = (0, _react.useState)(null);
+  const [processing, setProcessing] = (0, _react.useState)(false);
+  const [bookedSeats, setBookedSeats] = (0, _react.useState)([]);
+  const [chosenSeat, setChosenSeat] = (0, _react.useState)(null);
+  const [area, setArea] = (0, _react.useState)(null);
+  const [isLegendOpen, setIsLegendOpen] = (0, _react.useState)(false);
+  const [ticketPopupOpen, setTicketPopupOpen] = (0, _react.useState)(false);
+  const [bounds, setBounds] = (0, _react.useState)(null);
+  const [isFullScreen, setIsFullScreen] = (0, _react.useState)(false);
+  const statusColors = {
+    unknown: "#95a5a6",
+    available: "#00E640",
+    sold: "#95a5a6",
+    reserved: "#95a5a6",
+    pending: "#e74c3c",
+    booked: "#e74c3c",
+    bookedWithDifferentPrice: "#fab1a0"
+  };
+  const setInitialColor = s => {
+    return {
+      fillColor: s.s === statuses.UNSOLD ? statusColors.available : s.s === statuses.USER_PENDING ? s.bookedPrice === price ? statusColors.booked : statusColors.bookedWithDifferentPrice : statusColors.sold,
+      color: "none",
+      fillOpacity: s.loading ? 0 : 1
+    };
+  };
+  const addTicketToCart = (s, priceage, cs) => {
+    map.target.closePopup();
+    setProcessing(true);
+    fetch("".concat(baseUrl, "/legacy/").concat(countryCode, "/shop/events/").concat(eventId, "/").concat(eventVenueId, "/showings/").concat(showingId, "/tickets/allocated/").concat(areaId), {
+      method: "POST",
+      body: JSON.stringify({
+        priceAgeId: priceage.paId,
+        seatId: s.ssId,
+        connectedShowings: connectedShowings
+      }),
+      headers: {
+        "content-type": "application/json",
+        "basket-key": sessionId
+      }
+    }).then(response => {
+      if ((response === null || response === void 0 ? void 0 : response.status) === 403) {
+        s.loading = false;
+        (cs || chosenSeat).circle.target.setStyle({
+          fillColor: statusColors.sold
+        });
+        cs ? cs.seat.s = statuses.SOLD : chosenSeat.seat.s = statuses.SOLD;
+        const event = {
+          type: "error",
+          details: {
+            error: {
+              code: 403,
+              message: "The seat you're trying to book is no longer available."
+            }
+          }
+        };
+        callbackFunction(event);
+        setProcessing(false);
+      } else if ((response === null || response === void 0 ? void 0 : response.status) === 400) {
+        s.loading = false;
+        (cs || chosenSeat).circle.target.setStyle({
+          fillColor: statusColors.sold
+        });
+        cs ? cs.seat.s = statuses.SOLD : chosenSeat.seat.s = statuses.SOLD;
+        const event = {
+          type: "error",
+          details: {
+            error: {
+              code: 403,
+              message: "Oops, seems like you're trying to book tickets that are incompatible with other tickets in your cart."
+            }
+          }
+        };
+        callbackFunction(event);
+        setProcessing(false);
+      } else if ((response === null || response === void 0 ? void 0 : response.status) === 429) {
+        s.loading = false;
+        (cs || chosenSeat).circle.target.setStyle({
+          fillColor: statusColors.available
+        });
+        const event = {
+          type: "error",
+          details: {
+            error: {
+              code: 429,
+              message: "Someone else selected this first. Please try again"
+            }
+          }
+        };
+        callbackFunction(event);
+        setProcessing(false);
+      } else {
+        // console.log(chosenSeat.seat.ssId, cs?.seat.ssId)
+        s.s = statuses.USER_PENDING;
+        s.bookedPrice = price;
+        s.loading = false;
+        (cs || chosenSeat).circle.target.setStyle({
+          fillColor: statusColors.booked
+        });
+        setProcessing(false);
+        setBookedSeats([...bookedSeats, {
+          ssId: s.ssId,
+          r: s.r,
+          c: s.c,
+          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,
+            showingId: showingId,
+            pId: priceage.paId,
+            p: priceage.p,
+            paName: priceage.paName
+          }]
+        };
+        callbackFunction(event);
+      }
+    }).catch(error => {
+      s.loading = false;
+      (cs || chosenSeat).circle.target.setStyle({
+        fillColor: statusColors.available
+      });
+      const event = {
+        type: "error",
+        details: s.pMin && s.pMax && (price < s.pMin || price > s.pMax) ? {
+          error: {
+            code: 403,
+            message: "Price specified not allowed."
+          }
+        } : {
+          error: {
+            code: 500,
+            message: "Oops! Something went wrong. Please try again."
+          }
+        }
+      };
+      callbackFunction(event);
+      setProcessing(false);
+    });
+  };
+  const removeTicketFromCart = (s, e) => {
+    setProcessing(true);
+    fetch("".concat(baseUrl, "/legacy/").concat(countryCode, "/shop/events/").concat(eventId, "/").concat(eventVenueId, "/showings/").concat(showingId, "/tickets/allocated/").concat(areaId, "/seat/").concat(s.ssId), {
+      method: "DELETE",
+      headers: {
+        "basket-key": sessionId
+      }
+    }).then(response => {
+      s.loading = false;
+      s.s = statuses.UNSOLD;
+      s.bookedPrice = null;
+      e.target.setStyle({
+        fillColor: statusColors.available
+      });
+      setBookedSeats(bookedSeats.filter(bs => bs.ssId !== s.ssId));
+      setProcessing(false);
+      const event = {
+        type: "cart-change-remove",
+        details: bookedSeats.filter(bs => bs.ssId === s.ssId)
+      };
+      callbackFunction(event);
+    }).catch(error => {
+      e.target.setStyle({
+        fillColor: statusColors.booked
+      });
+      const event = {
+        type: "error",
+        details: {
+          error: {
+            code: 500,
+            message: "Oops! Something went wrong. Please try again."
+          }
+        }
+      };
+      callbackFunction(event);
+      setProcessing(false);
+    });
+  };
+  const handleClick = (e, s) => {
+    if (s.s !== statuses.UNSOLD && s.s !== statuses.USER_PENDING || bookedSeats.length >= quantity && s.s === statuses.UNSOLD) {
+      if (bookedSeats.length >= quantity) {
+        const event = {
+          type: "error",
+          details: {
+            message: "Maximum ticket booking quantity specified reached."
+          }
+        };
+        callbackFunction(event);
+      }
+      return;
+    }
+    setChosenSeat({
+      circle: e,
+      seat: s
+    });
+    if (s.s === statuses.UNSOLD) {
+      const availablePrices = seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && s.psId === price.psId);
+      if (availablePrices.length === 1) {
+        s.loading = true;
+        addTicketToCart(s, availablePrices[0], {
+          circle: e,
+          seat: s
+        });
+      }
+    } else {
+      s.loading = true;
+      removeTicketFromCart(s, e);
+    }
+  };
+  const initialFetch = function initialFetch() {
+    let isReload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (isReload) {
+      setIsReloading(true);
+    }
+    setInitialiseMessage("Initialising seating plan...");
+    fetch( // `http://localhost:3155/api/legacy/shop/events/4230/4639/showings/102359/tickets/allocated/1603`,
+    // `${baseUrl}/legacy/shop/events/${eventId}/${eventVenueId}/showings/${showingId}/tickets/allocated/${areaId}`,
+    "".concat(baseUrl, "/legacy/").concat(countryCode, "/shop/events/").concat(eventId, "/").concat(eventVenueId, "/showings/").concat(showingId, "/tickets/allocated/").concat(areaId), {
+      headers: {
+        "basket-key": sessionId,
+        Authorization: "Bearer ".concat(apiKey)
+      }
+    }).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. Standby. 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.") {
+          throw new Error("Looks like your cart has expired. Please refresh the page to try again.");
+        } else {
+          throw new Error("Invalid API Key or unauthorized URL");
+        }
+      }
+      const img = new Image();
+      img.src = data.background;
+      setBookedSeats(data.seats.filter(s => s.s === statuses.USER_PENDING && s.bookedPrice === price).map(s => ({
+        ssId: s.ssId,
+        r: s.r,
+        c: s.c,
+        showingId: showingId,
+        p: s.p,
+        //price || s.defaultPrice,
+        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);
+        setSeats(data);
+      };
+      if (map && area === areaId) {
+        map.target.fitBounds(bounds);
+      }
+      setIsReloading(false);
+    }).catch(error => {
+      var _error$message;
+      // console.log(error);
+      setError({
+        response: {
+          data: {
+            message: (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : "Something went wrong. Please try again."
+          }
+        }
+      });
+      setIsReloading(false);
+    });
+  };
+  (0, _react.useEffect)(() => {
+    if (!error && areaId !== area) {
+      setArea(areaId);
+      initialFetch();
+      setPosition(null);
+    }
+  }, [areaId]);
+
+  // useEffect(() => {
+  //   if (bookedSeats && position && chosenSeat) {
+  //     const event = { type: 'cart-change', details: bookedSeats }
+  //     callbackFunction(event)
+  //   }
+  // }, [bookedSeats])
+
+  (0, _react.useEffect)(() => {
+    if (ticketPopupOpen) {
+      chosenSeat === null || chosenSeat === void 0 ? void 0 : chosenSeat.circle.target.setStyle({
+        fillOpacity: 0
+      });
+    }
+  }, [ticketPopupOpen, chosenSeat]);
+  (0, _react.useEffect)(() => {
+    if (processing) {
+      const availablePrices = seats.pricing.filter(price => !priceSectionIds || priceSectionIds.includes(price.psId));
+      availablePrices.length === 1 && (chosenSeat === null || chosenSeat === void 0 ? void 0 : chosenSeat.circle.target.setStyle({
+        fillOpacity: 0
+      }));
+    }
+  }, [chosenSeat, processing]);
+  (0, _react.useEffect)(() => {
+    if (map) {
+      map.target.invalidateSize();
+      map.target.fitBounds(bounds);
+    }
+  }, [isFullScreen]);
+  (0, _react.useEffect)(() => {
+    const closeOnEscape = e => {
+      if (e.key === "Escape") {
+        if (isFullScreen && !ticketPopupOpen) {
+          setIsFullScreen(false);
+        } else if (ticketPopupOpen) {
+          map.target.closePopup();
+        }
+      }
+    };
+    window.addEventListener("keydown", closeOnEscape);
+    return () => window.removeEventListener("keydown", closeOnEscape);
+  }, [isFullScreen, ticketPopupOpen]);
+  const calculateCenterOfMap = (height, seats) => {
+    const filteredSeats = seats.filter(price => !priceSectionIds || priceSectionIds.includes(price.psId));
+    const avgY = filteredSeats.reduce((acc, val) => {
+      return acc + val.y / filteredSeats.length;
+    }, 0);
+    const avgX = filteredSeats.reduce((acc, val) => {
+      return acc + val.x / filteredSeats.length;
+    }, 0);
+    return [height * 0.05 - avgY / (height > 800 ? height > 999 ? 3.5 : 3.3 : 3.35) - (height > 800 ? height > 999 ? height * 0.0201 : height * 0.0198 : height > 587 ? height * 0.0201 : height > 399 ? height * 0.02035 : height * 0.0207), avgX * 0.3 + 0.15];
+  };
+
+  // return seating plan
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "root"
+  }, error ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "loading"
+  }, /*#__PURE__*/_react.default.createElement("h1", null, "OOPS!"), /*#__PURE__*/_react.default.createElement("div", null, error.response.data.message)) : position && area === areaId ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "seating-plan-backdrop ".concat(isFullScreen ? "full-screen" : ""),
+    onClick: () => setIsFullScreen(false)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "seating-plan ".concat(isFullScreen ? "full-screen" : "")
+  }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.MapContainer, {
+    zoomSnap: 0,
+    zoomDelta: 1,
+    whenReady: setMap,
+    center: calculateCenterOfMap(height, seats.seats),
+    zoom: undefined,
+    zoomControl: true,
+    scrollWheelZoom: true,
+    bounds: bounds
+  }, /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "bottomright"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legendBox"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-header"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "legend-button ".concat(isLegendOpen ? "expanded" : ""),
+    onClick: () => setIsLegendOpen(!isLegendOpen)
+  }, /*#__PURE__*/_react.default.createElement("p", null, isLegendOpen ? "LEGEND:" : "VIEW LEGEND")), isLegendOpen && /*#__PURE__*/_react.default.createElement("button", {
+    className: "close-button",
+    onClick: () => setIsLegendOpen(false)
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _encodedSvgs.closeIcon,
+    alt: "close"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-contents ".concat(isLegendOpen ? "expanded" : "")
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-symbol legend-available"
+  }), /*#__PURE__*/_react.default.createElement("p", null, "available"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-symbol legend-sold"
+  }), /*#__PURE__*/_react.default.createElement("p", null, "sold"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-symbol legend-in-cart"
+  }), /*#__PURE__*/_react.default.createElement("p", null, "in cart"))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _encodedSvgs.wheelchairIcon,
+    width: 15,
+    height: 15
+  }), /*#__PURE__*/_react.default.createElement("p", null, "wheelchair"))), seats.seats.filter(seat => seat.m).length > 0 ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _encodedSvgs.userIcon,
+    width: 15,
+    height: 15
+  }), /*#__PURE__*/_react.default.createElement("p", null, "membership seats"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "topleft"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "extra-controls"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    title: "Re-centre Seating Plan",
+    onClick: () => map.target.fitBounds(bounds),
+    className: "leaflet-control-zoom-in"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/fit-icon.jpg",
+    style: {
+      height: "17px"
+    }
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    title: "Reload Seating Plan",
+    disabled: isReloading,
+    onClick: () => initialFetch(true),
+    className: "leaflet-control-zoom-in reload-seating-plan",
+    style: {
+      background: isReloading ? "rgb(0, 230, 64)" : "#fff"
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: isReloading ? "rotate" : "",
+    src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/refresh.png",
+    style: {
+      height: "17px"
+    }
+  })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "topleft"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "extra-controls"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    title: "Expand Seating Plan",
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    className: "leaflet-control-zoom-in"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: isFullScreen ? _encodedSvgs.collapseIcon : _encodedSvgs.expandIcon,
+    style: {
+      height: "24px"
+    }
+  })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "topright"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    title: "Close full screen",
+    onClick: () => setIsFullScreen(false),
+    className: "full-screen-close-button ".concat(isFullScreen ? "show" : "")
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _encodedSvgs.closeIcon,
+    style: {
+      height: "24px"
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
+    url: seats.background,
+    bounds: [[0, 0], [height * 0.03, width * 0.03]],
+    zIndex: 10
+  }), seats && seats.seats && seats.seats.map((s, i) => {
+    var _chosenSeat$seat;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
+      url: "https://iticketseatingplan.blob.core.windows.net/embed/static/media/rippleload.08e6a08dd832819226ef.gif",
+      bounds: [[(s.r.includes("NORTH") ? height / 33.33 - height / 33.33 * s.y * 0.0105 + 1.4 : height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.45 : 3.3 : 3.35) - (height > 800 ? height > 999 ? height * 0.0201 : height * 0.0198 : height > 587 ? height * 0.0201 : height > 399 ? height * 0.02035 : height * 0.0207)) - 0.11, s.x * 0.3 + 0.15 - 0.11], [(s.r.includes("NORTH") ? height / 33.33 - height / 33.33 * s.y * 0.0105 + 1.4 : height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.45 : 3.3 : 3.35) - (height > 800 ? height > 999 ? height * 0.0201 : height * 0.0198 : height > 587 ? height * 0.0201 : height > 399 ? height * 0.02035 : height * 0.0207)) + 0.11, s.x * 0.3 + 0.15 + 0.11]
+      // [height * 0.0302 - s.y * 0.602 - 0.3, s.x * 0.61 - 0.3],
+      // [height * 0.0302 - s.y * 0.602 + 0.3, s.x * 0.61 + 0.3],
+      // [height * 0.0302 - s.y * 0.602 - 0.17, s.x * 0.61 - 0.17],
+      // [height * 0.0302 - s.y * 0.602 + 0.17, s.x * 0.61 + 0.17],
+      ],
+
+      opacity: s.loading || ticketPopupOpen && (chosenSeat === null || chosenSeat === void 0 ? void 0 : (_chosenSeat$seat = chosenSeat.seat) === null || _chosenSeat$seat === void 0 ? void 0 : _chosenSeat$seat.ssId) === s.ssId ? 100 : 0,
+      zIndex: 10
+    }), !priceSectionIds || priceSectionIds.includes(s.psId) ? s.s === statuses.WHEELCHAIR_ACCESS ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
+      url: _encodedSvgs.wheelchairIcon,
+      bounds: [
+      // [
+      //   height * 0.0302 - s.y * 0.602 - 0.17,
+      //   s.x * 0.61 - 0.17,
+      // ],
+      // [
+      //   height * 0.0302 - s.y * 0.602 + 0.17,
+      //   s.x * 0.61 + 0.17,
+      // ],
+      [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 3.3 : 3.35) - (height > 800 ? height > 999 ? height * 0.0201 : height * 0.0198 : height > 587 ? height * 0.0201 : height > 399 ? height * 0.02035 : height * 0.0207) - 0.11, s.x * 0.3 + 0.15 - 0.11], [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 3.3 : 3.35) - (height > 800 ? height > 999 ? height * 0.0201 : height * 0.0198 : height > 587 ? height * 0.0201 : height > 399 ? height * 0.02035 : height * 0.0207) + 0.11, s.x * 0.3 + 0.15 + 0.11]],
+      zIndex: 10
+    }) : s.s === statuses.USER_PENDING && s.m ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
+      url: _encodedSvgs.userIcon,
+      bounds: [
+      // [
+      //   height * 0.0302 - s.y * 0.602 - 0.17,
+      //   s.x * 0.61 - 0.17,
+      // ],
+      // [
+      //   height * 0.0302 - s.y * 0.602 + 0.17,
+      //   s.x * 0.61 + 0.17,
+      // ],
+      [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 3.3 : 3.35) - (height > 800 ? height > 999 ? height * 0.0201 : height * 0.0198 : height > 587 ? height * 0.0201 : height > 399 ? height * 0.02035 : height * 0.0207) - 0.11, s.x * 0.3 + 0.15 - 0.15], [height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.5 : 3.3 : 3.35) - (height > 800 ? height > 999 ? height * 0.0201 : height * 0.0198 : height > 587 ? height * 0.0201 : height > 399 ? height * 0.02035 : height * 0.0207) + 0.11, s.x * 0.3 + 0.15 + 0.15]],
+      zIndex: 10
+    }) : /*#__PURE__*/_react.default.createElement(_reactLeaflet.Circle, {
+      center: [
+      // height * 0.0305 -
+      //   s.y * 0.57 -
+      //   height * (height > 700 ? 0.0001 : 0.0006),
+      // s.x * 0.6 + 0.25,
+      //experimental
+      // 14.42,
+      // (height / 33.33 - 0.3 * s.y).toFixed(1)
+      // height / 33.33 - (height / 33.33) * s.y * 0.01, //29, //3 27, // height / 33.33 - s.y, // s.y * 0.3, //+ (height / 0.503) * 0.01, //11.66, // 5.2,
+      //working
+      s.r.includes("NORTH") ? height / 33.33 - height / 33.33 * s.y * 0.0105 + 1.4 : height * 0.05 - s.y / (height > 800 ? height > 999 ? 3.45 : 3.3 : 3.35) - (height > 800 ? height > 999 ? height * 0.0201 : height * 0.0198 : height > 587 ? height * 0.0201 : height > 399 ? height * 0.02035 : height * 0.0207),
+      // s.r.includes('NORTH')
+      //   ? 0
+      //   : 0,
+      s.x * 0.3 + 0.15
+
+      // height * 0.04 -
+      //   s.y / (height > 800 ? 3.5 : 3.35) -
+      //   (height > 800 ? height * 0.0101 : height * 0.0201),
+      // s.x * 0.3 + 0.15,
+
+      // -s.y * (height * 0.00037) + 24.2,
+      // s.x * 0.3 + 0.15,
+      ],
+
+      pathOptions: setInitialColor(s),
+      radius: 12000,
+      eventHandlers: {
+        click: e => handleClick(e, s),
+        popupopen: () => {
+          setTicketPopupOpen(true);
+        },
+        popupclose: () => {
+          setTicketPopupOpen(false);
+        }
+      }
+      // value={s}
+    }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.Tooltip, {
+      className: "seatname-tooltip",
+      direction: "top",
+      offset: [0, height * 0.03 + -30]
+    }, s.r + "-" + s.c), s.s === statuses.UNSOLD && /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, {
+      className: "ticket-popup"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "popup-header"
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: "seatname"
+    }, "".concat(areaName ? areaName + " | " : "").concat(s.r, "-").concat(s.c)), /*#__PURE__*/_react.default.createElement("button", {
+      className: "close-button",
+      "aria-label": "close popup",
+      onClick: () => map.target.closePopup()
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: _encodedSvgs.closeIcon,
+      alt: "close"
+    }))), /*#__PURE__*/_react.default.createElement("p", {
+      className: "heading"
+    }, "Select option:"), seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === s.psId).map(price => /*#__PURE__*/_react.default.createElement("div", {
+      key: price.paId,
+      className: "priceage",
+      onClick: () => {
+        s.loading = true;
+        addTicketToCart(s, price);
+      }
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: "price"
+    }, /*#__PURE__*/_react.default.createElement("span", null, price.paName), /*#__PURE__*/_react.default.createElement("span", null, NZDollar.format(price.p))))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+  })))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "loading"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "105",
+    height: "105",
+    viewBox: "0 0 105 105",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "#2ecc71"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "12.5",
+    cy: "12.5",
+    r: "12.5"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "fill-opacity",
+    begin: "0s",
+    dur: "1s",
+    values: "1;.2;1",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "12.5",
+    cy: "52.5",
+    r: "12.5",
+    fillOpacity: ".5"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "fill-opacity",
+    begin: "100ms",
+    dur: "1s",
+    values: "1;.2;1",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "52.5",
+    cy: "12.5",
+    r: "12.5"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "fill-opacity",
+    begin: "300ms",
+    dur: "1s",
+    values: "1;.2;1",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "52.5",
+    cy: "52.5",
+    r: "12.5"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "fill-opacity",
+    begin: "600ms",
+    dur: "1s",
+    values: "1;.2;1",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "92.5",
+    cy: "12.5",
+    r: "12.5"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "fill-opacity",
+    begin: "800ms",
+    dur: "1s",
+    values: "1;.2;1",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "92.5",
+    cy: "52.5",
+    r: "12.5"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "fill-opacity",
+    begin: "400ms",
+    dur: "1s",
+    values: "1;.2;1",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "12.5",
+    cy: "92.5",
+    r: "12.5"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "fill-opacity",
+    begin: "700ms",
+    dur: "1s",
+    values: "1;.2;1",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "52.5",
+    cy: "92.5",
+    r: "12.5"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "fill-opacity",
+    begin: "500ms",
+    dur: "1s",
+    values: "1;.2;1",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "92.5",
+    cy: "92.5",
+    r: "12.5"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "fill-opacity",
+    begin: "200ms",
+    dur: "1s",
+    values: "1;.2;1",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "initialise-message"
+  }, initialiseMessage)));
+};
+var _default = SeatingPlan;
+exports.default = _default;