iticket-seatingplan-dev 1.5.2 → 1.5.4

package/dist/components/styles/pos.css

@@ -0,0 +1,233 @@
+/* Popup to select prices */
+
+.pricing-popup-backdrop {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 1001;
+  animation: fade-in 400ms;
+}
+
+.pricing-popup {
+  position: absolute;
+  z-index: 1002;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: fade-in 400ms;
+  background-color: #fff;
+  /* font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; */
+  font-family: inherit;
+  padding: 1rem;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+  border-radius: 12px;
+  min-width: 20rem;
+}
+
+.pricing-popup .popup-header {
+  margin-top: 0;
+}
+
+.pricing-popup .popup-header .close-button {
+  margin: -2px -2px 0px 0px;
+}
+
+.pricing-popup h3,
+.pricing-popup h4 {
+  font-weight: bold;
+  margin: 0;
+}
+
+.pricing-popup p {
+  margin: 0;
+  max-width: 30rem;
+}
+
+.pricing-popup .seat-names {
+  font-size: 0.9rem;
+}
+
+.pricing-popup .seat-list {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.pricing-popup .seat-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.pricing-popup .seat-group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 1rem;
+  font-size: 0.9rem;
+}
+
+.pricing-popup select {
+  flex: 1;
+  padding: 0.3rem 0.2rem;
+}
+
+.pricing-popup .buttons {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1.2rem;
+}
+
+.pricing-popup .buttons button {
+  display: block;
+  background: transparent;
+  min-width: 12rem;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  border: 1px solid #333;
+  margin-bottom: 0.2rem;
+  cursor: pointer;
+  margin-bottom: 0;
+}
+
+.pricing-popup .buttons button:disabled {
+  cursor: default;
+  color: #bdc3c7;
+  border-color: #bdc3c7;
+}
+
+.pricing-popup .buttons button:hover:not(:disabled) {
+  background: #ecf0f1;
+  transition: 0.2s;
+}
+
+.pricing-popup .no-prices-available {
+  font-size: 0.8rem;
+  color: red;
+}
+
+.pricing-popup button.cancel {
+  background: #ecf0f1;
+  border: none;
+}
+
+.pricing-popup .price-select {
+  display: flex;
+  gap: 8px;
+}
+
+.pricing-popup .flexi-button {
+  width: max-content;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  border: none;
+  text-decoration: underline;
+  background: transparent;
+  cursor: pointer;
+  animation: fade-in 200ms;
+  font-weight: 600;
+  transition: 0.2s;
+}
+
+.flexi-button:hover {
+  background: #ecf0f1;
+}
+
+/* Button controls */
+
+.leaflet-draw.leaflet-control {
+  margin-bottom: 0;
+}
+
+.leaflet-draw.leaflet-control .leaflet-draw-toolbar {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.extra-controls.multi-select-control {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top: 0;
+}
+
+.extra-controls.multi-select-control button {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top: 1px solid #ccc;
+}
+
+.cancel-button {
+  margin-top: 1px;
+}
+
+.cancel-button a {
+  display: block;
+}
+
+.remove-seats .cancel-button {
+  margin-top: 31px;
+}
+
+.leaflet-draw-toolbar.leaflet-bar a.leaflet-draw-draw-rectangle,
+.drag-button span,
+.single-button span,
+.remove-button span {
+  background-image: none;
+  background-color: black;
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  transition: background-color 100ms ease-in-out;
+}
+
+.drag-button span,
+.single-button span,
+.remove-button span {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.leaflet-draw-toolbar.leaflet-bar a.leaflet-draw-draw-rectangle {
+  mask-size: 22px;
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iNSIgeT0iNSIgd2lkdGg9IjQwIiBoZWlnaHQ9IjMwIiByeD0iMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWRhc2hhcnJheT0iOCA0IiAvPjxwb2x5Z29uIHBvaW50cz0iMzcsMjcgNjAsMzUgNDUsNTAiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz48bGluZSB4MT0iNTIiIHkxPSI0MiIgeDI9IjYwIiB5Mj0iNTAiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjUiIC8+PC9zdmc+");
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iNSIgeT0iNSIgd2lkdGg9IjQwIiBoZWlnaHQ9IjMwIiByeD0iMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWRhc2hhcnJheT0iOCA0IiAvPjxwb2x5Z29uIHBvaW50cz0iMzcsMjcgNjAsMzUgNDUsNTAiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz48bGluZSB4MT0iNTIiIHkxPSI0MiIgeDI9IjYwIiB5Mj0iNTAiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjUiIC8+PC9zdmc+");
+}
+
+.drag-button span {
+  mask-size: 15px;
+  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik00NDggMjQwdjk2YzAgMy4xLS40IDYuMi0xLjEgOS4ybC0zMiAxMzZDNDEwLjcgNDk5LjIgMzk0LjYgNTEyIDM3NiA1MTJIMTY4YTQwIDQwIDAgMCAxIC0zMi40LTE2LjVsLTEyOC0xNzZjLTEzLTE3LjktOS00Mi45IDguOC01NS45IDE3LjktMTMgNDIuOS05IDU1LjkgOC44TDEwNCAzMTZWNDBjMC0yMi4xIDE3LjktNDAgNDAtNDBzNDAgMTcuOSA0MCA0MHYyMDBoOHYtNDBjMC0yMi4xIDE3LjktNDAgNDAtNDBzNDAgMTcuOSA0MCA0MHY0MGg4di0yNGMwLTIyLjEgMTcuOS00MCA0MC00MHM0MCAxNy45IDQwIDQwdjI0aDhjMC0yMi4xIDE3LjktNDAgNDAtNDBzNDAgMTcuOSA0MCA0MHptLTI1NiA4MGgtOHY5Nmg4di05NnptODggMGgtOHY5Nmg4di05NnptODggMGgtOHY5Nmg4di05NnoiLz48L3N2Zz4=");
+  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik00NDggMjQwdjk2YzAgMy4xLS40IDYuMi0xLjEgOS4ybC0zMiAxMzZDNDEwLjcgNDk5LjIgMzk0LjYgNTEyIDM3NiA1MTJIMTY4YTQwIDQwIDAgMCAxIC0zMi40LTE2LjVsLTEyOC0xNzZjLTEzLTE3LjktOS00Mi45IDguOC01NS45IDE3LjktMTMgNDIuOS05IDU1LjkgOC44TDEwNCAzMTZWNDBjMC0yMi4xIDE3LjktNDAgNDAtNDBzNDAgMTcuOSA0MCA0MHYyMDBoOHYtNDBjMC0yMi4xIDE3LjktNDAgNDAtNDBzNDAgMTcuOSA0MCA0MHY0MGg4di0yNGMwLTIyLjEgMTcuOS00MCA0MC00MHM0MCAxNy45IDQwIDQwdjI0aDhjMC0yMi4xIDE3LjktNDAgNDAtNDBzNDAgMTcuOSA0MCA0MHptLTI1NiA4MGgtOHY5Nmg4di05NnptODggMGgtOHY5Nmg4di05NnptODggMGgtOHY5Nmg4di05NnoiLz48L3N2Zz4=");
+}
+
+.single-button span {
+  mask-size: 12px;
+  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi43LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA1NS4yTDAgNDI2YzAgMTIuMiA5LjkgMjIgMjIgMjJjNi4zIDAgMTIuNC0yLjcgMTYuNi03LjVMMTIxLjIgMzQ2bDU4LjEgMTE2LjNjNy45IDE1LjggMjcuMSAyMi4yIDQyLjkgMTQuM3MyMi4yLTI3LjEgMTQuMy00Mi45TDE3OS44IDMyMGwxMTguMSAwYzEyLjIgMCAyMi4xLTkuOSAyMi4xLTIyLjFjMC02LjMtMi43LTEyLjMtNy40LTE2LjVMMzguNiAzNy45QzM0LjMgMzQuMSAyOC45IDMyIDIzLjIgMzJDMTAuNCAzMiAwIDQyLjQgMCA1NS4yeiIvPjwvc3ZnPg==");
+  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi43LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMCA1NS4yTDAgNDI2YzAgMTIuMiA5LjkgMjIgMjIgMjJjNi4zIDAgMTIuNC0yLjcgMTYuNi03LjVMMTIxLjIgMzQ2bDU4LjEgMTE2LjNjNy45IDE1LjggMjcuMSAyMi4yIDQyLjkgMTQuM3MyMi4yLTI3LjEgMTQuMy00Mi45TDE3OS44IDMyMGwxMTguMSAwYzEyLjIgMCAyMi4xLTkuOSAyMi4xLTIyLjFjMC02LjMtMi43LTEyLjMtNy40LTE2LjVMMzguNiAzNy45QzM0LjMgMzQuMSAyOC45IDMyIDIzLjIgMzJDMTAuNCAzMiAwIDQyLjQgMCA1NS4yeiIvPjwvc3ZnPg==");
+}
+
+.remove-button span {
+  mask-size: 12px;
+  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDM4NCA1MTIiPjxwYXRoIGQ9Ik0zNzYuNiA4NC41YzExLjMtMTMuNiA5LjUtMzMuOC00LjEtNDUuMXMtMzMuOC05LjUtNDUuMSA0LjFMMTkyIDIwNiA1Ni42IDQzLjVDNDUuMyAyOS45IDI1LjEgMjguMSAxMS41IDM5LjRTLTMuOSA3MC45IDcuNCA4NC41TDE1MC4zIDI1NiA3LjQgNDI3LjVjLTExLjMgMTMuNi05LjUgMzMuOCA0LjEgNDUuMXMzMy44IDkuNSA0NS4xLTQuMUwxOTIgMzA2IDMyNy40IDQ2OC41YzExLjMgMTMuNiAzMS41IDE1LjQgNDUuMSA0LjFzMTUuNC0zMS41IDQuMS00NS4xTDIzMy43IDI1NiAzNzYuNiA4NC41eiIvPjwvc3ZnPg==");
+  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDM4NCA1MTIiPjxwYXRoIGQ9Ik0zNzYuNiA4NC41YzExLjMtMTMuNiA5LjUtMzMuOC00LjEtNDUuMXMtMzMuOC05LjUtNDUuMSA0LjFMMTkyIDIwNiA1Ni42IDQzLjVDNDUuMyAyOS45IDI1LjEgMjguMSAxMS41IDM5LjRTLTMuOSA3MC45IDcuNCA4NC41TDE1MC4zIDI1NiA3LjQgNDI3LjVjLTExLjMgMTMuNi05LjUgMzMuOCA0LjEgNDUuMXMzMy44IDkuNSA0NS4xLTQuMUwxOTIgMzA2IDMyNy40IDQ2OC41YzExLjMgMTMuNiAzMS41IDE1LjQgNDUuMSA0LjFzMTUuNC0zMS41IDQuMS00NS4xTDIzMy43IDI1NiAzNzYuNiA4NC41eiIvPjwvc3ZnPg==");
+}
+
+[data-mode="draw"]
+  .leaflet-draw-toolbar.leaflet-bar
+  a.leaflet-draw-draw-rectangle,
+[data-mode="drag"] .drag-button span,
+[data-mode="single"] .single-button span,
+[data-mode="remove"] .remove-button span {
+  background-color: #00cc00;
+}

package/dist/index.js

@@ -1,27 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Badge", {
-  enumerable: true,
-  get: function get() {
-    return _Badge.default;
-  }
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function get() {
-    return _Button.default;
-  }
-});
-Object.defineProperty(exports, "SeatingPlan", {
-  enumerable: true,
-  get: function get() {
-    return _SeatingPlan.default;
-  }
-});
-var _Badge = _interopRequireDefault(require("./components/Badge"));
-var _Button = _interopRequireDefault(require("./components/Button"));
-var _SeatingPlan = _interopRequireDefault(require("./components/SeatingPlan"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import Badge from './components/Badge'
+import Button from './components/Button'
+import SeatingPlan from './components/SeatingPlan'
+
+export { Badge, Button, SeatingPlan }

package/dist/utils/enums.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.statuses = exports.statusColors = void 0;
+exports.statuses = exports.statusColors = exports.modes = exports.bookingModes = void 0;
 const statusColors = exports.statusColors = {
   unknown: "#95a5a6",
   available: "#00E640",
@@ -11,7 +11,9 @@ const statusColors = exports.statusColors = {
   reserved: "#95a5a6",
   pending: "#e74c3c",
   booked: "#e74c3c",
-  bookedWithDifferentPrice: "#fab1a0"
+  bookedWithDifferentPrice: "#fab1a0",
+  // TODO temporary selected state
+  selected: "#049CDB"
 };
 const statuses = exports.statuses = {
   UNSOLD: 1,
@@ -24,4 +26,14 @@ const statuses = exports.statuses = {
   ON_HOLD: 8,
   REAL_TIME_DOOR_SALES: 9,
   CANCELLED: 10
+};
+const modes = exports.modes = {
+  DRAW: "draw",
+  DRAG: "drag",
+  SINGLE: "single",
+  REMOVE: "remove"
+};
+const bookingModes = exports.bookingModes = {
+  POS: "pos",
+  SHOPSITE: "shopsite"
 };

package/dist/utils/helpers.js

@@ -5,7 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getInitialColor = exports.calculateCenterOfMap = exports.NZDollar = void 0;
 var _enums = require("./enums");
-const getInitialColor = (s, price) => {
+const getInitialColor = (s, price, selected) => {
+  // TEST selected state for multiselect
+  // if (selected) {
+  //   return {
+  //     fillColor: statusColors.selected,
+  //     color: "none",
+  //     fillOpacity: s.loading ? 0 : 1,
+  //   };
+  // }
+
   return {
     fillColor: s.s === _enums.statuses.UNSOLD ? _enums.statusColors.available : s.s === _enums.statuses.USER_PENDING ? s.bookedPrice === price ? _enums.statusColors.booked : _enums.statusColors.bookedWithDifferentPrice : _enums.statusColors.sold,
     color: "none",

package/dist/utils/index.js

@@ -1,27 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _enums = require("./enums");
-Object.keys(_enums).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _enums[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _enums[key];
-    }
-  });
-});
-var _helpers = require("./helpers");
-Object.keys(_helpers).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _helpers[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _helpers[key];
-    }
-  });
-});
+export * from "./enums";
+export * from "./helpers";

package/dist/utils/types.d.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -2,7 +2,7 @@
   "name": "iticket-seatingplan-dev",
   "description": "Seating plan with FLEXi pricing",
   "author": "gedwyne",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "private": false,
   "keywords": [
     "iticket",
@@ -16,12 +16,16 @@
   ],
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
+    "@types/leaflet": "^1.9.14",
+    "@types/leaflet-draw": "^1.0.11",
     "leaflet": "^1.9.3",
+    "leaflet-draw": "^1.0.4",
     "leaflet-gesture-handling": "^1.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-leaflet": "^4.2.1",
     "react-leaflet-custom-control": "^1.3.5",
+    "react-leaflet-draw": "^0.20.4",
     "react-scripts": "^5.0.1"
   },
   "codependencies": {
@@ -30,7 +34,7 @@
     "react-leaflet": "^4.2.1"
   },
   "scripts": {
-    "build": "babel src/lib --out-dir dist --copy-files",
+    "build": "babel src/lib --out-dir dist --extensions '.tsx,.ts,.js' --copy-files",
     "start": "react-scripts start"
   },
   "browserslist": {
@@ -48,7 +52,12 @@
   "devDependencies": {
     "@babel/cli": "^7.22.5",
     "@babel/core": "^7.22.5",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5"
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.26.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.7.2"
   }
 }