iticket-seatingplan-dev 1.0.32 → 1.0.34

package/dist/components/SeatingPlan.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 require("./styles/index.css");
 var _react = _interopRequireWildcard(require("react"));
 var _reactLeaflet = require("react-leaflet");
+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 wheelchairSeat = require('.//assets/wheelchair.png');
@@ -29,6 +31,8 @@ const SeatingPlan = _ref => {
     baseUrl,
     countryCode
   } = _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);
@@ -68,7 +72,6 @@ const SeatingPlan = _ref => {
         'basket-key': sessionId
       }
     }).then(response => {
-      console.log(response);
       if ((response === null || response === void 0 ? void 0 : response.status) === 403) {
         chosenSeat.circle.target.setStyle({
           fillColor: statusColors.sold
@@ -102,7 +105,6 @@ const SeatingPlan = _ref => {
         setProcessing(false);
       } else {
         {
-          console.log('rrrrrrrrr', response);
           s.s = 4;
           s.bookedPrice = price;
           chosenSeat.circle.target.setStyle({
@@ -197,42 +199,60 @@ const SeatingPlan = _ref => {
       removeTicketFromCart(s, e);
     }
   };
-  // https://ecommerce-main-f0c3c0b.d2.zuplo.dev
-  (0, _react.useEffect)(() => {
-    if (!position && !error) {
-      fetch( // `http://localhost:3155/api/legacy/shop/events/4230/4639/showings/102359/tickets/allocated/1603`,
-      "".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(response => response.json() || null).then(data => {
-        const img = new Image();
-        img.src = data.background;
-        console.log(data.background);
-        setBookedSeats(data.seats.filter(s => s.s === 4 && s.bookedPrice === price).map(s => ({
-          showingSeatId: s.ssId,
-          rowName: s.r,
-          columnName: s.c,
-          showingId: showingId,
-          price: price || s.defaultPrice,
-          priceAgeName: s.priceAgeName
-        })));
-        img.onload = () => {
-          setHeight(img.height * 0.5);
-          setWidth(img.width * 0.5);
-          setPosition([img.height * 0.005, img.width * 0.005]);
-          setSeats(data);
-        };
-      }).catch(error => {
-        setError({
-          response: {
-            data: {
-              message: 'Invalid API Key or unauthorized URL'
-            }
+  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`,
+    "".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.status === 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);
+      }
+      const img = new Image();
+      img.src = data.background;
+      setBookedSeats(data.seats.filter(s => s.s === 4 && s.bookedPrice === price).map(s => ({
+        showingSeatId: s.ssId,
+        rowName: s.r,
+        columnName: s.c,
+        showingId: showingId,
+        price: price || s.defaultPrice,
+        priceAgeName: s.priceAgeName
+      })));
+      img.onload = () => {
+        setHeight(img.height * 0.5);
+        setWidth(img.width * 0.5);
+        setPosition([img.height * 0.005, img.width * 0.005]);
+        setSeats(data);
+      };
+      map.target.setView([height * 0.015, width * 0.015], 5);
+      setIsReloading(false);
+    }).catch(error => {
+      console.log(error);
+      setError({
+        response: {
+          data: {
+            message: 'Invalid API Key or unauthorized URL'
           }
-        });
+        }
       });
+      setIsReloading(false);
+    });
+  };
+  (0, _react.useEffect)(() => {
+    if (!position && !error) {
+      initialFetch();
     }
   }, [position]);
   (0, _react.useEffect)(() => {
@@ -265,12 +285,57 @@ const SeatingPlan = _ref => {
     whenReady: setMap,
     center: [height * 0.015, width * 0.015],
     zoom: 5,
+    zoomControl: true,
     scrollWheelZoom: true,
     style: {
       minHeight: '500px',
       height: '100%'
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
+  }, /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+    position: "topleft"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      border: '2px solid rgba(0,0,0,0.2)',
+      borderRadius: '3px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    title: "Re-centre Seating Plan",
+    onClick: () => map.target.setView([height * 0.015, width * 0.015], 5),
+    className: "leaflet-control-zoom-in",
+    style: {
+      border: 'none',
+      borderRadius: '3px 3px 0 0',
+      background: '#fff',
+      padding: '3px 6px',
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://www.iticket.com.au/assets/images/fit-icon.jpg",
+    style: {
+      height: '17px'
+    }
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    title: "Reload Seating Plan",
+    onClick: () => initialFetch(true),
+    className: "leaflet-control-zoom-in",
+    style: {
+      border: 'none',
+      borderRadius: '0 0 3px 3px',
+      borderTop: '1px solid gray',
+      background: '#fff',
+      padding: '3px 6px',
+      cursor: 'pointer',
+      background: isReloading ? 'rgb(0, 230, 64)' : '#fff'
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: isReloading ? 'rotate' : '',
+    src: "https://www.iticket.com.au/assets/images/refresh.png",
+    style: {
+      height: '17px'
+    }
+  })))), /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
     url: seats.background,
     bounds: [[0, 0], [height * 0.03, width * 0.03]],
     zIndex: 10
@@ -460,7 +525,7 @@ const SeatingPlan = _ref => {
     style: {
       marginTop: '2rem'
     }
-  }, "Initialising seating plan...")));
+  }, initialiseMessage)));
 };
 var _default = SeatingPlan;
 exports.default = _default;

package/dist/components/styles/index.css

@@ -7,6 +7,19 @@
   -moz-osx-font-smoothing: grayscale;
 } */
 
+.rotate {
+  animation: rotation 2s infinite linear;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-359deg);
+  }
+}
+
 .priceage:hover {
 	background: #ecf0f1;
 	border: 1px solid #ecf0f1 !important;

package/package.json

@@ -2,7 +2,7 @@
   "name": "iticket-seatingplan-dev",
   "description": "Seating plan with FLEXi pricing",
   "author": "gedwyne",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "private": false,
   "keywords": [
     "iticket",
@@ -17,7 +17,8 @@
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
     "leaflet": "^1.9.3",
-    "react-leaflet": "^4.2.1"
+    "react-leaflet": "^4.2.1",
+    "react-leaflet-custom-control": "^1.3.5"
   },
   "codependencies": {
     "@babel/polyfill": "^7.12.1",