iticket-seatingplan-dev 1.1.9 → 1.2.1

package/dist/components/SeatingPlan.js

@@ -29,7 +29,8 @@ const SeatingPlan = _ref => {
     callbackFunction,
     apiKey,
     baseUrl,
-    countryCode
+    countryCode,
+    connectedShowings
   } = _ref;
   const [initialiseMessage, setInitialiseMessage] = (0, _react.useState)('Initialising seating plan...');
   const [isReloading, setIsReloading] = (0, _react.useState)(false);
@@ -56,7 +57,7 @@ const SeatingPlan = _ref => {
     return {
       fillColor: s.s === 1 ? statusColors.available : s.s === 4 ? s.bookedPrice === price ? statusColors.booked : statusColors.bookedWithDifferentPrice : statusColors.sold,
       color: 'none',
-      fillOpacity: 100
+      fillOpacity: s.loading ? 0 : 1
     };
   };
   const addTicketToCart = (s, priceAgeId, cs) => {
@@ -66,7 +67,8 @@ const SeatingPlan = _ref => {
       method: 'POST',
       body: JSON.stringify({
         priceAgeId: priceAgeId,
-        seatId: s.ssId
+        seatId: s.ssId,
+        connectedShowings: connectedShowings
       }),
       headers: {
         'content-type': 'application/json',
@@ -74,7 +76,7 @@ const SeatingPlan = _ref => {
       }
     }).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 || chosenSeat).seat.s = 2;
@@ -90,7 +92,7 @@ const SeatingPlan = _ref => {
         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
         });
@@ -109,6 +111,7 @@ const SeatingPlan = _ref => {
         // console.log(chosenSeat.seat.ssId, cs?.seat.ssId)
         s.s = 4;
         s.bookedPrice = price;
+        s.loading = false;
         (cs || chosenSeat).circle.target.setStyle({
           fillColor: statusColors.booked
         });
@@ -123,7 +126,7 @@ const SeatingPlan = _ref => {
         }]);
       }
     }).catch(error => {
-      ;
+      s.loading = false;
       (cs || chosenSeat).circle.target.setStyle({
         fillColor: statusColors.available
       });
@@ -153,6 +156,7 @@ const SeatingPlan = _ref => {
         'basket-key': sessionId
       }
     }).then(response => {
+      s.loading = false;
       s.s = 1;
       s.bookedPrice = null;
       e.target.setStyle({
@@ -178,7 +182,7 @@ const SeatingPlan = _ref => {
     });
   };
   const handleClick = (e, s) => {
-    if (s.s !== 1 && s.s !== 4 || processing || bookedSeats.length >= quantity && s.s === 1) {
+    if (s.s !== 1 && s.s !== 4 || bookedSeats.length >= quantity && s.s === 1) {
       if (bookedSeats.length >= quantity) {
         const event = {
           type: 'error',
@@ -196,11 +200,15 @@ const SeatingPlan = _ref => {
     });
     if (s.s === 1) {
       const availablePrices = seats.pricing.filter(price => price.psId === priceSectionId);
-      availablePrices.length === 1 && addTicketToCart(s, availablePrices[0].paId, {
-        circle: e,
-        seat: s
-      });
+      if (availablePrices.length === 1) {
+        s.loading = true;
+        addTicketToCart(s, availablePrices[0].paId, {
+          circle: e,
+          seat: s
+        });
+      }
     } else {
+      s.loading = true;
       removeTicketFromCart(s, e);
     }
   };
@@ -273,13 +281,32 @@ const SeatingPlan = _ref => {
   }, [bookedSeats]);
   (0, _react.useEffect)(() => {
     if (processing) {
-      chosenSeat === null || chosenSeat === void 0 ? void 0 : chosenSeat.circle.target.setStyle({
+      const availablePrices = seats.pricing.filter(price => price.psId === priceSectionId);
+      availablePrices.length === 1 && (chosenSeat === null || chosenSeat === void 0 ? void 0 : chosenSeat.circle.target.setStyle({
         fillOpacity: 0
-      });
+      }));
     }
   }, [chosenSeat, processing]);
+  const calculateCenterOfMap = (height, seats) => {
+    const filteredSeats = seats.filter(price => price.psId === priceSectionId);
+    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 * 0.0206), avgX * 0.3 + 0.15];
+  };
+  const determineZoom = seats => {
+    const filteredSeats = seats.filter(price => price.psId === priceSectionId);
+    const x = filteredSeats.map(fs => fs.x);
+    const y = filteredSeats.map(fs => fs.y);
+    const maxX = Math.max(...x) - Math.min(...x);
+    const maxY = Math.max(...y) - Math.min(...y);
+    console.log(maxX, maxY);
+    if (maxY > 67.5) return 4;else return 6;
+  };
 
-  // console.log(height, width)
   // return seating plan
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -288,10 +315,14 @@ const SeatingPlan = _ref => {
     }
   }, 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(_reactLeaflet.MapContainer, {
-    whenReady: setMap,
-    center: [height * 0.015, width * 0.015],
-    zoom: 6,
+  }, /*#__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(_reactLeaflet.MapContainer, {
+    whenReady: setMap
+    // center={[height * 0.015, width * 0.015]}
+    ,
+    center: calculateCenterOfMap(height, seats.seats)
+    // zoom={6}
+    ,
+    zoom: determineZoom(seats.seats),
     zoomControl: true,
     scrollWheelZoom: true,
     style: {
@@ -372,7 +403,7 @@ const SeatingPlan = _ref => {
     }
   }, /*#__PURE__*/_react.default.createElement("button", {
     title: "Re-centre Seating Plan",
-    onClick: () => map.target.setView([height * 0.015, width * 0.015], 6),
+    onClick: () => map.target.setView(calculateCenterOfMap(height, seats.seats), determineZoom(seats.seats)),
     className: "leaflet-control-zoom-in",
     style: {
       border: 'none',
@@ -393,7 +424,7 @@ const SeatingPlan = _ref => {
     className: "leaflet-control-zoom-in",
     style: {
       border: 'none',
-      borderRadius: '0 0 6px 6px',
+      borderRadius: '0 0',
       borderTop: '1px solid gray',
       background: '#fff',
       padding: '8px 6px',
@@ -414,14 +445,14 @@ const SeatingPlan = _ref => {
     key: i
   }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
     url: "https://iticketseatingplan.blob.core.windows.net/embed/static/media/rippleload.08e6a08dd832819226ef.gif",
-    bounds: [[height * 0.05 - s.y / 3.35 - height / 48.5 - 0.11, s.x * 0.3 + 0.15 - 0.11], [height * 0.05 - s.y / 3.35 - height / 48.5 + 0.11, s.x * 0.3 + 0.15 + 0.11]
+    bounds: [[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 * 0.0206) - 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 * 0.0206) + 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: chosenSeat && chosenSeat.seat.ssId === s.ssId && processing ? 100 : 0,
+    opacity: s.loading ? 100 : 0,
     zIndex: 10
   }), !priceSectionId || s.psId === priceSectionId ? s.s === 6 ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
     url: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTBweCIgaGVpZ2h0PSI1MHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIHZlcnNpb249IjEuMSI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDpyZ2IoMCUsMCUsMCUpO2ZpbGwtb3BhY2l0eToxOyIgZD0iTSAzNC4xMjg5MDYgNDEuMzA0Njg4IEMgMzMuMjY5NTMxIDQwLjQ0OTIxOSAzMS45MDYyNSA0MC4zNzUgMzAuOTY0ODQ0IDQxLjE0MDYyNSBDIDI4LjY0ODQzOCA0My4wMTk1MzEgMjUuNzczNDM4IDQ0LjA2NjQwNiAyMi43MzgyODEgNDQuMDY2NDA2IEMgMTUuNDU3MDMxIDQ0LjA2NjQwNiA5LjUzMTI1IDM4LjE0MDYyNSA5LjUzMTI1IDMwLjg1NTQ2OSBDIDkuNTMxMjUgMjcuNjI4OTA2IDEwLjcxODc1IDI0LjU2NjQwNiAxMi44MzU5MzggMjIuMTcxODc1IEMgMTMuNSAyMS40MTc5NjkgMTMuNDg0Mzc1IDIwLjI4MTI1IDEyLjc4OTA2MiAxOS41NTA3ODEgQyAxMi4zMzk4NDQgMTkuMDc0MjE5IDExLjg5NDUzMSAxOC41OTc2NTYgMTEuNDQ1MzEyIDE4LjEyMTA5NCBDIDExLjA4MjAzMSAxNy43MzgyODEgMTAuNTc4MTI1IDE3LjUyMzQzOCAxMC4wNTA3ODEgMTcuNTIzNDM4IEMgOS41MjM0MzggMTcuNTI3MzQ0IDkuMDIzNDM4IDE3Ljc1IDguNjY3OTY5IDE4LjEzNjcxOSBDIDcuNTY2NDA2IDE5LjMyODEyNSA2LjYxNzE4OCAyMC42NTIzNDQgNS44NjcxODggMjIuMDg1OTM4IEMgNC40NjA5MzggMjQuNzczNDM4IDMuNzE4NzUgMjcuODA4NTk0IDMuNzE4NzUgMzAuODU1NDY5IEMgMy43MTg3NSA0MS4zNDM3NSAxMi4yNTM5MDYgNDkuODc4OTA2IDIyLjc0MjE4OCA0OS44Nzg5MDYgQyAyNS43Njk1MzEgNDkuODc4OTA2IDI4Ljc4NTE1NiA0OS4xNDQ1MzEgMzEuNDY0ODQ0IDQ3Ljc1NzgxMiBDIDMyLjYyNSA0Ny4xNTYyNSAzMy43MjI2NTYgNDYuNDI5Njg4IDM0LjczODI4MSA0NS42MDE1NjIgQyAzNS4yNTM5MDYgNDUuMTc5Njg4IDM1LjU3MDMxMiA0NC41NTQ2ODggMzUuNjA1NDY5IDQzLjg4NjcxOSBDIDM1LjYzNjcxOSA0My4yMTg3NSAzNS4zOTA2MjUgNDIuNTY2NDA2IDM0LjkxNDA2MiA0Mi4wOTM3NSBaIE0gMzQuMTI4OTA2IDQxLjMwNDY4OCAiLz4KPHBhdGggc3R5bGU9IiBzdHJva2U6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztmaWxsOnJnYigwJSwwJSwwJSk7ZmlsbC1vcGFjaXR5OjE7IiBkPSJNIDE2LjgxMjUgOS4yODUxNTYgQyAxOS4zNzEwOTQgOS4yODUxNTYgMjEuNDUzMTI1IDcuMjAzMTI1IDIxLjQ1MzEyNSA0LjY0NDUzMSBDIDIxLjQ1MzEyNSAyLjA4MjAzMSAxOS4zNzEwOTQgMCAxNi44MTI1IDAgQyAxNC4yNSAwIDEyLjE2Nzk2OSAyLjA4MjAzMSAxMi4xNjc5NjkgNC42NDQ1MzEgQyAxMi4xNjc5NjkgNy4yMDMxMjUgMTQuMjUgOS4yODUxNTYgMTYuODEyNSA5LjI4NTE1NiBaIE0gMTYuODEyNSA5LjI4NTE1NiAiLz4KPHBhdGggc3R5bGU9IiBzdHJva2U6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztmaWxsOnJnYigwJSwwJSwwJSk7ZmlsbC1vcGFjaXR5OjE7IiBkPSJNIDQ2LjIzNDM3NSA0Ni41NzAzMTIgTCA0My4zMTY0MDYgMzAuNjA5Mzc1IEMgNDMuMTQwNjI1IDI5LjYyNSA0Mi41NTg1OTQgMjguNzQyMTg4IDQxLjczNDM3NSAyOC4xNzk2ODggQyA0MS4xMTMyODEgMjcuNzU3ODEyIDQwLjM4MjgxMiAyNy41MzEyNSAzOS42Mjg5MDYgMjcuNTMxMjUgQyAzOS4zODI4MTIgMjcuNTMxMjUgMzkuMTMyODEyIDI3LjU1NDY4OCAzOC44OTQ1MzEgMjcuNjAxNTYyIEwgMjUuNTg1OTM4IDMwLjI2MTcxOSBDIDI1LjUzOTA2MiAzMC4yNzM0MzggMjUuNDkyMTg4IDMwLjI3NzM0NCAyNS40NDUzMTIgMzAuMjc3MzQ0IEMgMjUuMTEzMjgxIDMwLjI3NzM0NCAyNC44MjQyMTkgMzAuMDM5MDYyIDI0Ljc1NzgxMiAyOS43MTA5MzggTCAyMy42NjAxNTYgMjQuMzA4NTk0IEwgMzIuODk4NDM4IDIyLjczNDM3NSBDIDM0LjM0NzY1NiAyMi40ODQzNzUgMzUuMzI4MTI1IDIxLjEwNTQ2OSAzNS4wNzgxMjUgMTkuNjU2MjUgQyAzNC44NTkzNzUgMTguMzcxMDk0IDMzLjc1MzkwNiAxNy40Mzc1IDMyLjQ0NTMxMiAxNy40Mzc1IEMgMzIuMjk2ODc1IDE3LjQzNzUgMzIuMTQ4NDM4IDE3LjQ0OTIxOSAzMiAxNy40NzI2NTYgTCAyMi41OTc2NTYgMTkuMDc4MTI1IEwgMjEuMzkwNjI1IDEzLjEyODkwNiBDIDIxLjEzNjcxOSAxMS43NDYwOTQgMTkuOTM3NSAxMC43NDYwOTQgMTguNTM1MTU2IDEwLjc0NjA5NCBDIDE4LjM1OTM3NSAxMC43NDYwOTQgMTguMTc5Njg4IDEwLjc2MTcxOSAxOC4wMDc4MTIgMTAuNzkyOTY5IEMgMTcuMjQyMTg4IDEwLjkyOTY4OCAxNi41NzgxMjUgMTEuMzU5Mzc1IDE2LjE0MDYyNSAxMiBDIDE1LjY5NTMxMiAxMi42NDA2MjUgMTUuNTMxMjUgMTMuNDEwMTU2IDE1LjY3MTg3NSAxNC4xNzk2ODggTCAxOS41MTk1MzEgMzMuNTc0MjE5IEMgMTkuNzE0ODQ0IDM0LjU1ODU5NCAyMC4yODEyNSAzNS40MDYyNSAyMS4xMTMyODEgMzUuOTYwOTM4IEMgMjEuNzM0Mzc1IDM2LjM3NSAyMi40NTMxMjUgMzYuNTkzNzUgMjMuMTk5MjE5IDM2LjU5Mzc1IEMgMjMuNDQ1MzEyIDM2LjU5Mzc1IDIzLjY5MTQwNiAzNi41NzAzMTIgMjMuOTMzNTk0IDM2LjUxOTUzMSBMIDM3LjI2OTUzMSAzMy44NTkzNzUgQyAzNy40NTcwMzEgMzMuODIwMzEyIDM3LjY1MjM0NCAzMy44NTkzNzUgMzcuODA4NTk0IDMzLjk2NDg0NCBDIDM3Ljk2MDkzOCAzNC4wNzAzMTIgMzguMDcwMzEyIDM0LjIzODI4MSAzOC4xMDU0NjkgMzQuNDIxODc1IEwgNDAuNTE1NjI1IDQ3LjYxNzE4OCBDIDQwLjc2NTYyNSA0OSA0MS45Njg3NSA1MC4wMDM5MDYgNDMuMzcxMDk0IDUwLjAwMzkwNiBDIDQzLjU0Njg3NSA1MC4wMDM5MDYgNDMuNzE4NzUgNDkuOTg0Mzc1IDQzLjg5NDUzMSA0OS45NTMxMjUgQyA0NC42NjAxNTYgNDkuODE2NDA2IDQ1LjMyMDMxMiA0OS4zODY3MTkgNDUuNzYxNzE5IDQ4Ljc0NjA5NCBDIDQ2LjIwNzAzMSA0OC4xMDkzNzUgNDYuMzcxMDk0IDQ3LjMzNTkzOCA0Ni4yMzQzNzUgNDYuNTcwMzEyIFogTSA0Ni4yMzQzNzUgNDYuNTcwMzEyICIvPgo8L2c+Cjwvc3ZnPgo=',
@@ -434,7 +465,7 @@ const SeatingPlan = _ref => {
     //   height * 0.0302 - s.y * 0.602 + 0.17,
     //   s.x * 0.61 + 0.17,
     // ],
-    [height * 0.05 - s.y / 3.35 - height / 48.5 - 0.11, s.x * 0.3 + 0.15 - 0.11], [height * 0.05 - s.y / 3.35 - height / 48.5 + 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 * 0.0206) - 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 * 0.0206) + 0.11, s.x * 0.3 + 0.15 + 0.11]],
     zIndex: 10
   }) : /*#__PURE__*/_react.default.createElement(_reactLeaflet.Circle, {
     center: [
@@ -443,7 +474,12 @@ const SeatingPlan = _ref => {
     //   height * (height > 700 ? 0.0001 : 0.0006),
     // s.x * 0.6 + 0.25,
 
-    height * 0.05 - s.y / 3.35 - height / 48.5, s.x * 0.3 + 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 * 0.0206), s.x * 0.3 + 0.15
+
+    // height * 0.04 -
+    //   s.y / (height > 800 ? 3.5 : 3.35) -
+    //   (height > 800 ? height * 0.0101 : height * 0.0206),
+    // s.x * 0.3 + 0.15,
 
     // -s.y * (height * 0.00037) + 24.2,
     // s.x * 0.3 + 0.15,
@@ -455,7 +491,7 @@ const SeatingPlan = _ref => {
       click: e => handleClick(e, s)
     }
     // value={s}
-  }, s.s === 1 && !processing && /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, null, /*#__PURE__*/_react.default.createElement("p", {
+  }, s.s === 1 && /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, null, /*#__PURE__*/_react.default.createElement("p", {
     style: {
       marginTop: '0.2rem',
       marginBottom: '0.2rem',
@@ -472,7 +508,10 @@ const SeatingPlan = _ref => {
       cursor: 'pointer'
     },
     className: "priceage",
-    onClick: () => addTicketToCart(s, price.paId)
+    onClick: () => {
+      s.loading = true;
+      addTicketToCart(s, price.paId);
+    }
   }, /*#__PURE__*/_react.default.createElement("p", {
     style: {
       margin: '0px'
@@ -481,7 +520,7 @@ const SeatingPlan = _ref => {
     style: {
       float: 'right'
     }
-  }, NZDollar.format(price.p))))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)))) : /*#__PURE__*/_react.default.createElement("div", {
+  }, 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",

package/package.json

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