iticket-seatingplan-dev 1.3.7 → 1.4.1

package/dist/components/Badge.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Badge = props => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "badge ".concat(!props.value ? 'badge--none' : '', " ")
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    className: "heavy"
+  }, props.value || 0));
+};
+var _default = Badge;
+exports.default = _default;

package/dist/components/Button.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Button = props => {
+  return /*#__PURE__*/_react.default.createElement("button", {
+    className: "btn btn--".concat(props.kind, " CTA"),
+    "data-id": props.id,
+    type: props.type,
+    name: props.name,
+    value: props.value,
+    disabled: props.disabled,
+    onClick: props.handleClick
+  }, /*#__PURE__*/_react.default.createElement("h4", null, props.label));
+};
+var _default = Button;
+exports.default = _default;

package/dist/components/Map.js

@@ -0,0 +1,275 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Map;
+require("leaflet-gesture-handling/dist/leaflet-gesture-handling.css");
+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");
+var _react = require("react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactLeafletCustomControl.default, {
+    position: "bottomright"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legendBox"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legend-header"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "legend-button ".concat(isLegendOpen ? "expanded" : ""),
+    onClick: () => setIsLegendOpen(!isLegendOpen)
+  }, /*#__PURE__*/React.createElement("p", null, isLegendOpen ? "LEGEND:" : "VIEW LEGEND")), isLegendOpen && /*#__PURE__*/React.createElement("button", {
+    className: "close-button",
+    onClick: () => setIsLegendOpen(false)
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _encodedSvgs.closeIcon,
+    alt: "close"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "legend-contents ".concat(isLegendOpen ? "expanded" : "")
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legend-symbol legend-available"
+  }), /*#__PURE__*/React.createElement("p", null, "available"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legend-symbol legend-sold"
+  }), /*#__PURE__*/React.createElement("p", null, "sold"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legend-symbol legend-in-cart"
+  }), /*#__PURE__*/React.createElement("p", null, "in cart"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _encodedSvgs.wheelchairIcon,
+    width: 15,
+    height: 15
+  }), /*#__PURE__*/React.createElement("p", null, "wheelchair"))), seats.seats.filter(seat => seat.m).length > 0 ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _encodedSvgs.userIcon,
+    width: 15,
+    height: 15
+  }), /*#__PURE__*/React.createElement("p", null, "membership seats"))) : /*#__PURE__*/React.createElement(React.Fragment, null)))), /*#__PURE__*/React.createElement(_reactLeafletCustomControl.default, {
+    position: "topleft"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "extra-controls"
+  }, /*#__PURE__*/React.createElement("button", {
+    title: "Re-centre Seating Plan",
+    onClick: () => map.fitBounds(bounds),
+    className: "leaflet-control-zoom-in"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/fit-icon.jpg",
+    style: {
+      height: "17px"
+    }
+  })), /*#__PURE__*/React.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.createElement("img", {
+    className: isReloading ? "rotate" : "",
+    src: "https://au-iticket-shop-legacy.azurewebsites.net/assets/images/refresh.png",
+    style: {
+      height: "17px"
+    }
+  })))), /*#__PURE__*/React.createElement(_reactLeafletCustomControl.default, {
+    position: "topleft"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "extra-controls"
+  }, /*#__PURE__*/React.createElement("button", {
+    title: isFullScreen ? "Collapse Seating Plan" : "Expand Seating Plan",
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    className: "leaflet-control-zoom-in"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: isFullScreen ? _encodedSvgs.collapseIcon : _encodedSvgs.expandIcon,
+    style: {
+      height: "24px"
+    }
+  })))), /*#__PURE__*/React.createElement(_reactLeafletCustomControl.default, {
+    position: "topright"
+  }, /*#__PURE__*/React.createElement("button", {
+    title: "Close full screen",
+    onClick: () => setIsFullScreen(false),
+    className: "full-screen-close-button ".concat(isFullScreen ? "show" : "")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _encodedSvgs.closeIcon,
+    style: {
+      height: "24px"
+    }
+  }))), /*#__PURE__*/React.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.createElement("div", {
+      key: i
+    }, /*#__PURE__*/React.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 === _utils.statuses.WHEELCHAIR_ACCESS ? /*#__PURE__*/React.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.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.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.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.createElement(_reactLeaflet.Popup, {
+      className: "ticket-popup"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "popup-header"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "seatname"
+    }, "".concat(areaName ? areaName + " | " : "").concat(s.r, "-").concat(s.c)), /*#__PURE__*/React.createElement("button", {
+      className: "close-button",
+      "aria-label": "close popup",
+      onClick: () => map.closePopup()
+    }, /*#__PURE__*/React.createElement("img", {
+      src: _encodedSvgs.closeIcon,
+      alt: "close"
+    }))), /*#__PURE__*/React.createElement("p", {
+      className: "heading"
+    }, "Select option:"), seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === s.psId).map(price => /*#__PURE__*/React.createElement("div", {
+      key: price.paId,
+      className: "priceage",
+      onClick: () => {
+        s.loading = true;
+        map.closePopup();
+        addTicketToCart(s, price);
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "price"
+    }, /*#__PURE__*/React.createElement("span", null, price.paName), /*#__PURE__*/React.createElement("span", null, _utils.NZDollar.format(price.p))))))) : /*#__PURE__*/React.createElement(React.Fragment, null));
+  }));
+}