iticket-seatingplan-dev 1.5.4 → 1.5.6

package/dist/index.js

@@ -1,5 +1,3 @@
-import Badge from './components/Badge'
-import Button from './components/Button'
-import SeatingPlan from './components/SeatingPlan'
+import SeatingPlan from "./components/SeatingPlan";
 
-export { Badge, Button, SeatingPlan }
+export { SeatingPlan };

package/package.json

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

package/dist/components/Badge.js

@@ -1,9 +0,0 @@
-import React from 'react'
-const Badge = (props) => {
-  return (
-    <div className={`badge ${!props.value ? 'badge--none' : ''} `}>
-      <h4 className="heavy">{props.value || 0}</h4>
-    </div>
-  )
-}
-export default Badge

package/dist/components/Button.js

@@ -1,17 +0,0 @@
-import React from 'react'
-const Button = (props) => {
-  return (
-    <button
-      className={`btn btn--${props.kind} CTA`}
-      data-id={props.id}
-      type={props.type}
-      name={props.name}
-      value={props.value}
-      disabled={props.disabled}
-      onClick={props.handleClick}
-    >
-      <h4>{props.label}</h4>
-    </button>
-  )
-}
-export default Button

package/dist/components/Map.js

@@ -1,277 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Map;
-require("leaflet-gesture-handling/dist/leaflet-gesture-handling.css");
-var _react = _interopRequireWildcard(require("react"));
-var _reactLeaflet = require("react-leaflet");
-var _leafletGestureHandling2 = require("leaflet-gesture-handling");
-var _reactLeafletCustomControl = _interopRequireDefault(require("react-leaflet-custom-control"));
-var _encodedSvgs = require("./assets/encodedSvgs");
-var _utils = require("../utils");
-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; }
-function Map(_ref) {
-  let {
-    seats,
-    height,
-    width,
-    bounds,
-    handleClickSeat,
-    ticketPopupOpen,
-    setTicketPopupOpen,
-    chosenSeat,
-    addTicketToCart,
-    isReloading,
-    initialFetch,
-    isFullScreen,
-    setIsFullScreen,
-    priceSectionIds,
-    areaName,
-    price
-  } = _ref;
-  const [isLegendOpen, setIsLegendOpen] = (0, _react.useState)(false);
-  const map = (0, _reactLeaflet.useMap)();
-  (0, _react.useEffect)(() => {
-    const closeOnEscape = e => {
-      if (e.key === "Escape") {
-        if (isFullScreen && !ticketPopupOpen) {
-          setIsFullScreen(false);
-        } else if (ticketPopupOpen) {
-          map.closePopup();
-        }
-      }
-    };
-    if (typeof window !== "undefined") {
-      window.addEventListener("keydown", closeOnEscape);
-    }
-    return () => {
-      if (typeof window !== "undefined") {
-        window.removeEventListener("keydown", closeOnEscape);
-      }
-    };
-  }, [isFullScreen, ticketPopupOpen]);
-
-  // gesture-handling plugin disallows scroll zooming and touch panning,
-  // to allow users to scroll past the map when it's not full screen.
-  (0, _react.useEffect)(() => {
-    if (!isFullScreen) {
-      map.addHandler("gestureHandling", _leafletGestureHandling2.GestureHandling);
-      map.gestureHandling.enable();
-    }
-  }, [map, isFullScreen]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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.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);
-      map.fitBounds(bounds);
-    },
-    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 full-screen-control"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    title: isFullScreen ? "Collapse Seating Plan" : "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 || (_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 === _utils.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 === _utils.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: (0, _utils.getInitialColor)(s, price),
-      radius: 12000,
-      eventHandlers: {
-        click: e => handleClickSeat(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 === _utils.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.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("button", {
-      key: price.paId,
-      className: "priceage",
-      onClick: () => {
-        s.loading = true;
-        addTicketToCart(s, price);
-      },
-      disabled: price.is_available === false
-    }, /*#__PURE__*/_react.default.createElement("p", {
-      className: "price"
-    }, /*#__PURE__*/_react.default.createElement("span", null, price.paName), /*#__PURE__*/_react.default.createElement("span", null, _utils.NZDollar.format(price.p))), price.is_available === false && /*#__PURE__*/_react.default.createElement("span", {
-      className: "unavailable"
-    }, "Allocation exhausted"))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
-  }));
-}

package/dist/components/SeatingPlan.js

@@ -1,516 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-require("./styles/index.css");
-var _react = _interopRequireWildcard(require("react"));
-var _Map = _interopRequireDefault(require("./Map"));
-var _reactLeaflet = require("react-leaflet");
-var _utils = require("../utils");
-var _reactDom = require("react-dom");
-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; }
-const SeatingPlan = _ref => {
-  var _document, _document2, _document3;
-  let {
-    eventId,
-    eventVenueId,
-    sessionId,
-    showingId,
-    areaId,
-    priceSectionIds,
-    price,
-    quantity,
-    callbackFunction,
-    apiKey,
-    baseUrl,
-    countryCode,
-    connectedShowings,
-    areaName,
-    promoCode
-  } = _ref;
-  const [initialiseMessage, setInitialiseMessage] = (0, _react.useState)("Initialising seating plan...");
-  const [isReloading, setIsReloading] = (0, _react.useState)(false);
-  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 [ticketPopupOpen, setTicketPopupOpen] = (0, _react.useState)(false);
-  const [bounds, setBounds] = (0, _react.useState)(null);
-  const [isFullScreen, setIsFullScreen] = (0, _react.useState)(false);
-  const [mounted, setMounted] = _react.default.useState(false);
-  const mapRef = (0, _react.useRef)(null);
-  const setMap = map => {
-    mapRef.current = map;
-  };
-  (0, _react.useLayoutEffect)(() => setMounted(true), []);
-  const addTicketToCart = (s, priceage, cs) => {
-    var _mapRef$current;
-    if (s.s !== _utils.statuses.UNSOLD && s.s !== _utils.statuses.USER_PENDING || bookedSeats.length >= quantity && s.s === _utils.statuses.UNSOLD) {
-      if (bookedSeats.length >= quantity) {
-        const event = {
-          type: "error",
-          details: {
-            message: "Maximum ticket booking quantity specified reached."
-          }
-        };
-        callbackFunction(event);
-      }
-      s.loading = false;
-      return;
-    }
-    if (priceage.is_available === false) {
-      const event = {
-        type: "error",
-        details: {
-          message: "Allocation exhausted, please try another area or price."
-        }
-      };
-      callbackFunction(event);
-      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();
-    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: _utils.statusColors.sold
-        });
-        cs ? cs.seat.s = _utils.statuses.SOLD : chosenSeat.seat.s = _utils.statuses.SOLD;
-        const event = {
-          type: "error",
-          details: {
-            error: {
-              code: 403,
-              message: "The seat you're trying to book is no longer available."
-            }
-          }
-        };
-        callbackFunction(event);
-      } else if ((response === null || response === void 0 ? void 0 : response.status) === 400) {
-        s.loading = false;
-        (cs || chosenSeat).circle.target.setStyle({
-          fillColor: _utils.statusColors.sold
-        });
-        cs ? cs.seat.s = _utils.statuses.SOLD : chosenSeat.seat.s = _utils.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);
-      } else if ((response === null || response === void 0 ? void 0 : response.status) === 429) {
-        s.loading = false;
-        (cs || chosenSeat).circle.target.setStyle({
-          fillColor: _utils.statusColors.available
-        });
-        const event = {
-          type: "error",
-          details: {
-            error: {
-              code: 429,
-              message: "Someone else selected this first. Please try again"
-            }
-          }
-        };
-        callbackFunction(event);
-      } else {
-        // console.log(chosenSeat.seat.ssId, cs?.seat.ssId)
-        s.s = _utils.statuses.USER_PENDING;
-        s.bookedPrice = price;
-        s.loading = false;
-        (cs || chosenSeat).circle.target.setStyle({
-          fillColor: _utils.statusColors.booked
-        });
-        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: _utils.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);
-    }).finally(() => {
-      setProcessing(false);
-      _initialFetch(true);
-    });
-  };
-  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 = _utils.statuses.UNSOLD;
-      s.bookedPrice = null;
-      e.target.setStyle({
-        fillColor: _utils.statusColors.available
-      });
-      setBookedSeats(bookedSeats.filter(bs => bs.ssId !== s.ssId));
-      const event = {
-        type: "cart-change-remove",
-        details: bookedSeats.filter(bs => bs.ssId === s.ssId)
-      };
-      callbackFunction(event);
-    }).catch(error => {
-      e.target.setStyle({
-        fillColor: _utils.statusColors.booked
-      });
-      const event = {
-        type: "error",
-        details: {
-          error: {
-            code: 500,
-            message: "Oops! Something went wrong. Please try again."
-          }
-        }
-      };
-      callbackFunction(event);
-    }).finally(() => {
-      setProcessing(false);
-      _initialFetch(true);
-    });
-  };
-  const handleClickSeat = (e, s) => {
-    setChosenSeat({
-      circle: e,
-      seat: s
-    });
-    if (s.s !== _utils.statuses.UNSOLD && s.s !== _utils.statuses.USER_PENDING || bookedSeats.length >= quantity && s.s === _utils.statuses.UNSOLD) {
-      if (bookedSeats.length >= quantity) {
-        const event = {
-          type: "error",
-          details: {
-            message: "Maximum ticket booking quantity specified reached."
-          }
-        };
-        callbackFunction(event);
-      }
-      return;
-    }
-    if (s.s === _utils.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/${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).concat(promoCode ? "?promo=".concat(promoCode) : ""), {
-      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. 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.") {
-          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 === _utils.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);
-      };
-      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 || 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]);
-
-  // render the map using ReactDOM.createPortal to avoid z-index issues
-  // 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);
-
-  // return seating plan
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "seating-plan-root",
-    id: "seating-plan-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, backdropContainer && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
-    className: "seating-plan-backdrop ".concat(isFullScreen ? "full-screen" : ""),
-    onClick: () => setIsFullScreen(false)
-  }), backdropContainer), mapContainer && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
-    className: "seating-plan-container ".concat(isFullScreen ? "full-screen" : "")
-  }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.MapContainer, {
-    zoomSnap: 0,
-    zoomDelta: 1,
-    center: (0, _utils.calculateCenterOfMap)(height, seats.seats),
-    zoom: undefined,
-    zoomControl: true,
-    scrollWheelZoom: true,
-    bounds: bounds,
-    whenReady: setMap
-  }, /*#__PURE__*/_react.default.createElement(_Map.default, {
-    seats: seats,
-    height: height,
-    width: width,
-    bounds: bounds,
-    handleClickSeat: handleClickSeat,
-    ticketPopupOpen: ticketPopupOpen,
-    setTicketPopupOpen: setTicketPopupOpen,
-    chosenSeat: chosenSeat,
-    addTicketToCart: addTicketToCart,
-    isReloading: isReloading,
-    initialFetch: _initialFetch,
-    isFullScreen: isFullScreen,
-    setIsFullScreen: setIsFullScreen,
-    priceSectionIds: priceSectionIds,
-    areaName: areaName,
-    price: price
-  }))), mapContainer)) : /*#__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 = exports.default = SeatingPlan;