iticket-seatingplan-dev 0.0.3 → 0.0.6

package/dist/components/SeatingPlan.js

@@ -17,10 +17,12 @@ const SeatingPlan = _ref => {
     sessionId,
     showingId,
     priceAgeId,
+    priceSectionId,
     price,
     quantity,
     callbackFunction,
-    apiKey
+    apiKey,
+    baseUrl
   } = _ref;
   const [position, setPosition] = (0, _react.useState)(null);
   const [height, setHeight] = (0, _react.useState)(0);
@@ -36,11 +38,12 @@ const SeatingPlan = _ref => {
     sold: '#95a5a6',
     reserved: '#95a5a6',
     pending: '#e74c3c',
-    booked: '#e74c3c'
+    booked: '#e74c3c',
+    bookedWithDifferentPrice: '#fab1a0'
   };
   const setInitialColor = s => {
     return {
-      fillColor: s.status === 1 ? statusColors.available : s.status === 4 ? statusColors.booked : statusColors.sold,
+      fillColor: s.status === 1 ? statusColors.available : s.status === 4 ? s.bookedPrice === price ? statusColors.booked : statusColors.bookedWithDifferentPrice : statusColors.sold,
       color: 'none',
       fillOpacity: 100
     };
@@ -82,6 +85,7 @@ const SeatingPlan = _ref => {
         }
       }).then(response => response.json()).then(response => {
         s.status = 4;
+        s.bookedPrice = price;
         e.target.setStyle({
           fillColor: statusColors.booked
         });
@@ -116,53 +120,69 @@ const SeatingPlan = _ref => {
         setProcessing(false);
       });
     } else {
-      fetch("https://apim.iticket.co.nz/seatingplan/removeseat", {
-        method: 'POST',
-        body: JSON.stringify({
-          basketKey: '',
-          seatId: s.showingSeatId
-        }),
-        headers: {
-          'content-type': 'application/json',
-          'session-id': "ASP.NET_SessionId=".concat(sessionId),
-          'showingseat-id': s.showingSeatId
-        }
-      }).then(response => response.json()).then(response => {
-        s.status = 1;
-        e.target.setStyle({
-          fillColor: statusColors.available
-        });
-        setBookedSeats(bookedSeats.filter(bs => bs.showingSeatId !== s.showingSeatId));
-        setProcessing(false);
-      }).catch(error => {
-        e.target.setStyle({
-          fillColor: statusColors.booked
+      if (s.bookedPrice === price) {
+        fetch("https://apim.iticket.co.nz/seatingplan/removeseat", {
+          method: 'POST',
+          body: JSON.stringify({
+            basketKey: '',
+            seatId: s.showingSeatId
+          }),
+          headers: {
+            'content-type': 'application/json',
+            'session-id': "ASP.NET_SessionId=".concat(sessionId),
+            'showingseat-id': s.showingSeatId
+          }
+        }).then(response => response.json()).then(response => {
+          s.status = 1;
+          s.bookedPrice = null;
+          e.target.setStyle({
+            fillColor: statusColors.available
+          });
+          setBookedSeats(bookedSeats.filter(bs => bs.showingSeatId !== s.showingSeatId));
+          setProcessing(false);
+        }).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);
         });
+      } else {
         const event = {
           type: 'error',
           details: {
             error: {
-              code: 500,
-              message: 'Oops! Something went wrong. Please try again.'
+              code: 403,
+              message: "Unable to remove seat. Price specified does not match the selected seat price, please select $".concat(s.bookedPrice, " to be able to remove this seat.")
             }
           }
         };
         callbackFunction(event);
         setProcessing(false);
-      });
+      }
     }
   };
+  // https://ecommerce-main-f0c3c0b.d2.zuplo.dev
   (0, _react.useEffect)(() => {
     if (!position && !error) {
-      fetch("https://ecommerce-main-f0c3c0b.d2.zuplo.dev/ecommerce/v1/events/".concat(eventId, "/showings/").concat(showingUid, "/seats?priceage=").concat(priceAgeId), {
+      fetch("".concat(baseUrl, "/ecommerce/v1/events/").concat(eventId, "/showings/").concat(showingId, "/seats?priceage=").concat(priceAgeId), {
         headers: {
-          'session-id': sessionId,
+          basketId: sessionId,
           Authorization: "Bearer ".concat(apiKey)
         }
       }).then(response => response.json() || null).then(data => {
         const img = new Image();
         img.src = data.background;
-        setBookedSeats(data.seats.filter(s => s.status === 4).map(s => ({
+        setBookedSeats(data.seats.filter(s => s.status === 4 && s.bookedPrice === price).map(s => ({
           showingSeatId: s.showingSeatId,
           rowName: s.rowName,
           columnName: s.columnName,
@@ -207,6 +227,7 @@ const SeatingPlan = _ref => {
   // return seating plan
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
+      width: '100%',
       height: '100%'
     }
   }, error ? /*#__PURE__*/_react.default.createElement("div", {
@@ -231,7 +252,7 @@ const SeatingPlan = _ref => {
     bounds: [[height * 0.03 - s.raw_y * 0.61 - 0.2, s.raw_x * 0.615 - 0.2], [height * 0.03 - s.raw_y * 0.61 + 0.2, s.raw_x * 0.615 + 0.2]],
     opacity: chosenSeat && chosenSeat.seat.showingSeatId === s.showingSeatId ? 100 : 0,
     zIndex: 10
-  }), s.status === 6 ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
+  }), !priceSectionId || s.priceSectionId === priceSectionId ? s.status === 6 ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
     url: wheelchairSeat,
     bounds: [[height * 0.03 - s.raw_y * 0.61 - 0.17, s.raw_x * 0.615 - 0.17], [height * 0.03 - s.raw_y * 0.61 + 0.17, s.raw_x * 0.615 + 0.17]],
     zIndex: 10
@@ -249,7 +270,7 @@ const SeatingPlan = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.Tooltip, {
     direction: 'top',
     offset: [0, height * 0.03 + -30]
-  }, s.rowName + '-' + s.columnName))))) : /*#__PURE__*/_react.default.createElement("div", {
+  }, s.rowName + '-' + s.columnName, ' ', s.bookedPrice && s.bookedPrice !== price && "(Select $".concat(s.bookedPrice, " to remove from cart.)"))) : /*#__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/dist/components/styles/index.css

@@ -248,7 +248,7 @@ svg.leaflet-zoom-animated {
 /* cursors */
 
 .leaflet-interactive {
-	cursor: pointer;
+	cursor: default;
 	}
 .leaflet-grab {
 	cursor: -webkit-grab;

package/package.json

@@ -2,7 +2,7 @@
   "name": "iticket-seatingplan-dev",
   "description": "Seating plan with FLEXi pricing",
   "author": "gedwyne",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "private": false,
   "keywords": [
     "iticket",
@@ -19,6 +19,11 @@
     "leaflet": "^1.9.3",
     "react-leaflet": "^4.2.1"
   },
+  "codependencies": {
+    "@babel/polyfill": "^7.12.1",
+    "leaflet": "^1.9.3",
+    "react-leaflet": "^4.2.1"
+  },
   "scripts": {
     "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
     "start": "react-scripts start"