tf-checkout-react 1.3.51 → 1.4.0

package/dist/tf-checkout-react.esm.js

@@ -1,4 +1,4 @@
-import { Snackbar, Alert, Modal as Modal$1, Box, CircularProgress, TextField as TextField$1, FormControl, FormHelperText, InputLabel, createTheme as createTheme$1 } from '@mui/material';
+import { Snackbar, Alert, Modal as Modal$1, Box, CircularProgress, TextField as TextField$1, FormControl, FormHelperText, InputLabel, createTheme as createTheme$1, Select as Select$1 } from '@mui/material';
 import Backdrop from '@mui/material/Backdrop';
 import Button from '@mui/material/Button';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
@@ -51,6 +51,7 @@ import { loadStripe } from '@stripe/stripe-js';
 import { FacebookShareButton, FacebookIcon, FacebookMessengerShareButton, FacebookMessengerIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon, PinterestShareButton, PinterestIcon, VKShareButton, VKIcon, OKShareButton, OKIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, RedditShareButton, RedditIcon, TumblrShareButton, TumblrIcon, MailruShareButton, MailruIcon, EmailShareButton, EmailIcon, LivejournalShareButton, LivejournalIcon, ViberShareButton, ViberIcon, WorkplaceShareButton, WorkplaceIcon, LineShareButton, LineIcon, PocketShareButton, PocketIcon, InstapaperShareButton, InstapaperIcon, WeiboShareButton, WeiboIcon, HatenaShareButton, HatenaIcon } from 'react-share';
 import { ThemeProvider as ThemeProvider$1 } from '@mui/private-theming';
 import jwt_decode from 'jwt-decode';
+import _filter from 'lodash-es/filter';
 import _some from 'lodash-es/some';
 import Button$1 from 'react-bootstrap/Button';
 import moment from 'moment-timezone';
@@ -67,6 +68,15 @@ import TableRow from '@mui/material/TableRow';
 import _has from 'lodash-es/has';
 import _isNull from 'lodash-es/isNull';
 import _reverse from 'lodash-es/reverse';
+import { identity } from 'lodash-es';
+import _keys from 'lodash-es/keys';
+import _values from 'lodash-es/values';
+import moment$1 from 'moment';
+import 'tf-seat-map-view/dist/index.css';
+import ReactDom from 'react-dom';
+import SeatMapView from 'tf-seat-map-view';
+import InputLabel$1 from '@mui/material/InputLabel';
+import { Button as Button$2 } from 'react-bootstrap';
 
 function _regeneratorRuntime() {
   _regeneratorRuntime = function () {
@@ -727,6 +737,7 @@ publicRequest.interceptors.response.use(function (response) {
   return Promise.reject(error);
 });
 publicRequest.interceptors.request.use(function (config) {
+  var _document$cookie;
   var guestToken = isWindowDefined ? window.localStorage.getItem('auth_guest_token') : null;
   var userData = isWindowDefined ? window.localStorage.getItem('user_data') : null;
   var accessToken = isWindowDefined ? window.localStorage.getItem('access_token') : null;
@@ -749,6 +760,13 @@ publicRequest.interceptors.request.use(function (config) {
     });
     config.headers = _updatedHeaders2;
   }
+  var additionalCookiesHeaderValue = (_document$cookie = document.cookie) != null ? _document$cookie : '';
+  if (additionalCookiesHeaderValue !== '') {
+    var _updatedHeaders3 = _extends({}, config.headers, {
+      'Additional-Cookies': additionalCookiesHeaderValue
+    });
+    config.headers = _updatedHeaders3;
+  }
   if (CONFIGS.X_SOURCE_ORIGIN) {
     var _updatedHeaders4 = _extends({}, config.headers, {
       'X-Source-Origin': CONFIGS.X_SOURCE_ORIGIN
@@ -1039,6 +1057,121 @@ var getCheckoutPageConfigs = /*#__PURE__*/function () {
     return _ref3.apply(this, arguments);
   };
 }();
+// seat map <--start-->
+// const makeId = (length = 20) => {
+//   let result = ''
+//   const characters =
+//     'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+//   const charactersLength = characters.length
+//   for (let i = 0; i < length; i++) {
+//     result += characters.charAt(Math.floor(Math.random() * charactersLength))
+//   }
+//   return result
+// }
+var getSeatMapData = /*#__PURE__*/function () {
+  var _ref4 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(eventId) {
+    var reservedSeatsHash, params, response;
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          localStorage.setItem('tierId', '');
+          reservedSeatsHash = getQueryVariable('reserved_seats_hash');
+          params = {};
+          if (reservedSeatsHash) {
+            params.reserved_seats_hash = reservedSeatsHash;
+          }
+          _context4.next = 6;
+          return publicRequest.get("v1/event/" + eventId + "/seat-map-data", {
+            params: params
+          });
+        case 6:
+          response = _context4.sent;
+          return _context4.abrupt("return", response.data);
+        case 8:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return function getSeatMapData(_x3) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+var getSeatMapStatuses = /*#__PURE__*/function () {
+  var _ref5 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(eventId) {
+    var response;
+    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _context5.next = 2;
+          return publicRequest.get("v1/event/" + eventId + "/seats/status");
+        case 2:
+          response = _context5.sent;
+          return _context5.abrupt("return", response.data);
+        case 4:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  }));
+  return function getSeatMapStatuses(_x4) {
+    return _ref5.apply(this, arguments);
+  };
+}();
+var reserveSeat = /*#__PURE__*/function () {
+  var _ref6 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(eventId, tierId, seatId) {
+    var response;
+    return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          _context6.next = 2;
+          return publicRequest.post("v1/event/" + eventId + "/seats/reserve", {
+            data: {
+              tierId: tierId,
+              seatId: seatId,
+              ttl: 10
+            }
+          });
+        case 2:
+          response = _context6.sent;
+          return _context6.abrupt("return", response.data);
+        case 4:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  }));
+  return function reserveSeat(_x5, _x6, _x7) {
+    return _ref6.apply(this, arguments);
+  };
+}();
+var removeSeatReserve = /*#__PURE__*/function () {
+  var _ref7 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(eventId, tierId, seatIds) {
+    var response;
+    return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _context7.next = 2;
+          return publicRequest["delete"]("v1/event/" + eventId + "/seats/delete-reserved", {
+            data: {
+              tierId: tierId,
+              seatIds: seatIds
+            }
+          });
+        case 2:
+          response = _context7.sent;
+          return _context7.abrupt("return", response.data);
+        case 4:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  }));
+  return function removeSeatReserve(_x8, _x9, _x10) {
+    return _ref7.apply(this, arguments);
+  };
+}();
+// seat map <--end-->
 function getPixelScript(id, pageOptions) {
   var response = publicRequest.get("v1/event/" + id + "/track", {
     params: {
@@ -1051,54 +1184,54 @@ function getPixelScript(id, pageOptions) {
 }
 // ID Verification
 var getNetverifyUrl = /*#__PURE__*/function () {
-  var _ref4 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+  var _ref8 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
     var response;
-    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+    return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
         case 0:
-          _context4.next = 2;
+          _context8.next = 2;
           return publicRequest.get('v1/authenticate/verify');
         case 2:
-          response = _context4.sent;
-          return _context4.abrupt("return", response.data);
+          response = _context8.sent;
+          return _context8.abrupt("return", response.data);
         case 4:
         case "end":
-          return _context4.stop();
+          return _context8.stop();
       }
-    }, _callee4);
+    }, _callee8);
   }));
   return function getNetverifyUrl() {
-    return _ref4.apply(this, arguments);
+    return _ref8.apply(this, arguments);
   };
 }();
 var checkVerificationStatus = /*#__PURE__*/function () {
-  var _ref5 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+  var _ref9 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
     var response;
-    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
+    return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
         case 0:
-          _context5.next = 2;
+          _context9.next = 2;
           return publicRequest.get('v1/authenticate/get-verification-info');
         case 2:
-          response = _context5.sent;
-          return _context5.abrupt("return", response.data);
+          response = _context9.sent;
+          return _context9.abrupt("return", response.data);
         case 4:
         case "end":
-          return _context5.stop();
+          return _context9.stop();
       }
-    }, _callee5);
+    }, _callee9);
   }));
   return function checkVerificationStatus() {
-    return _ref5.apply(this, arguments);
+    return _ref9.apply(this, arguments);
   };
 }();
 var updateVerificationStatus = /*#__PURE__*/function () {
-  var _ref6 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+  var _ref10 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
     var response;
-    return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
+    return _regeneratorRuntime().wrap(function _callee10$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
         case 0:
-          _context6.next = 2;
+          _context10.next = 2;
           return publicRequest.patch('v1/authenticate/verify', {
             data: {
               verification: {
@@ -1107,16 +1240,37 @@ var updateVerificationStatus = /*#__PURE__*/function () {
             }
           });
         case 2:
-          response = _context6.sent;
-          return _context6.abrupt("return", response.data);
+          response = _context10.sent;
+          return _context10.abrupt("return", response.data);
         case 4:
         case "end":
-          return _context6.stop();
+          return _context10.stop();
       }
-    }, _callee6);
+    }, _callee10);
   }));
   return function updateVerificationStatus() {
-    return _ref6.apply(this, arguments);
+    return _ref10.apply(this, arguments);
+  };
+}();
+var checkCustomerOrder = /*#__PURE__*/function () {
+  var _ref11 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11(orderHash) {
+    var response;
+    return _regeneratorRuntime().wrap(function _callee11$(_context11) {
+      while (1) switch (_context11.prev = _context11.next) {
+        case 0:
+          _context11.next = 2;
+          return publicRequest.get("v1/order/" + orderHash + "/verify-customer-order");
+        case 2:
+          response = _context11.sent;
+          return _context11.abrupt("return", response.data);
+        case 4:
+        case "end":
+          return _context11.stop();
+      }
+    }, _callee11);
+  }));
+  return function checkCustomerOrder(_x11) {
+    return _ref11.apply(this, arguments);
   };
 }();
 
@@ -1137,6 +1291,32 @@ function appendScriptsToHeader(code) {
     }
   }
 }
+var addGTagToHeader = function addGTagToHeader(tagId, links) {
+  var _document, _document2;
+  if ((_document = document) != null && _document.head && (_document2 = document) != null && _document2.body && tagId) {
+    var script = document.createElement('script');
+    script.innerHTML = ("(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\n    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\n    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n    })(window,document,'script','dataLayer','" + tagId + "');").trim();
+    document.head.append(script);
+    var scriptBody = document.createElement('noscript');
+    scriptBody.innerHTML = "<iframe src=\"https://www.googletagmanager.com/ns.html?id=" + tagId + "\"\n    height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe>";
+    document.body.append(scriptBody);
+    window.dataLayer = window.dataLayer || [];
+    window.gtag = function gtag() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      window.dataLayer.push(args);
+    };
+    if (links) {
+      var _window;
+      (_window = window) == null ? void 0 : _window.gtag('set', 'linker', {
+        'domains': links
+      });
+    }
+    window.gtag('js', new Date());
+    window.gtag('config', tagId);
+  }
+};
 var usePixel = /*#__PURE__*/function () {
   var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(eventId, options) {
     var getScript;
@@ -1145,7 +1325,7 @@ var usePixel = /*#__PURE__*/function () {
         case 0:
           getScript = /*#__PURE__*/function () {
             var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-              var response, pixels;
+              var response, pixels, brandGoogleTagKey, eventGoogleTagKey, eventGoogleTagManagerLinkerDomains;
               return _regeneratorRuntime().wrap(function _callee$(_context) {
                 while (1) switch (_context.prev = _context.next) {
                   case 0:
@@ -1162,17 +1342,24 @@ var usePixel = /*#__PURE__*/function () {
                     response = _context.sent;
                     pixels = _get(response, 'data.data.attributes.pixels', '');
                     appendScriptsToHeader(pixels);
-                    _context.next = 13;
+                    brandGoogleTagKey = _get(response, 'data.data.attributes.brandGoogleTagKey', '');
+                    eventGoogleTagKey = _get(response, 'data.data.attributes.eventGoogleTagKey', '');
+                    eventGoogleTagManagerLinkerDomains = _get(response, 'data.data.attributes.eventGoogleTagManagerLinkerDomains', '');
+                    addGTagToHeader(brandGoogleTagKey, eventGoogleTagManagerLinkerDomains);
+                    if (eventGoogleTagKey) {
+                      addGTagToHeader(eventGoogleTagKey, eventGoogleTagManagerLinkerDomains);
+                    }
+                    _context.next = 18;
                     break;
-                  case 10:
-                    _context.prev = 10;
+                  case 15:
+                    _context.prev = 15;
                     _context.t0 = _context["catch"](2);
                     console.error(_context.t0);
-                  case 13:
+                  case 18:
                   case "end":
                     return _context.stop();
                 }
-              }, _callee, null, [[2, 10]]);
+              }, _callee, null, [[2, 15]]);
             }));
             return function getScript() {
               return _ref2.apply(this, arguments);
@@ -2097,11 +2284,11 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
   }));
 };
 
-function Loader() {
+var Loader = function Loader() {
   return React.createElement("div", {
     className: "loader-container"
   }, React.createElement(CircularProgress$1, null));
-}
+};
 
 var NativeSelectField = function NativeSelectField(_ref) {
   var label = _ref.label,
@@ -2819,15 +3006,18 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var _useState14 = useState(true),
     loading = _useState14[0],
     setLoading = _useState14[1];
-  var _useState15 = useState(true),
-    isCountriesLoading = _useState15[0],
-    setIsCountriesLoading = _useState15[1];
-  var _useState16 = useState(null),
-    error = _useState16[0],
-    setError = _useState16[1];
-  var _useState17 = useState(false),
-    phoneValidationIsLoading = _useState17[0],
-    setPhoneValidationIsLoading = _useState17[1];
+  var _useState15 = useState(false),
+    cardLoading = _useState15[0],
+    setCardLoading = _useState15[1];
+  var _useState16 = useState(true),
+    isCountriesLoading = _useState16[0],
+    setIsCountriesLoading = _useState16[1];
+  var _useState17 = useState(null),
+    error = _useState17[0],
+    setError = _useState17[1];
+  var _useState18 = useState(false),
+    phoneValidationIsLoading = _useState18[0],
+    setPhoneValidationIsLoading = _useState18[1];
   var emailLogged = _get(userData, 'email', '') || _get(userValues, 'email', '');
   var firstNameLogged = _get(userData, 'first_name', '') || _get(userValues, 'first_name', '');
   var lastNameLogged = _get(userData, 'last_name', '') || _get(userValues, 'last_name', '');
@@ -2836,6 +3026,7 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var eventId = getQueryVariable('event_id') || '';
   var optedInFieldValue = brandOptIn ? brandOptIn : _get(cartInfoData, 'optedIn', false);
   var ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false));
+  var isTable = Boolean(_get(cartInfoData, 'is_table', false));
   var hideTtfOptIn = _get(cartInfoData, 'hide_ttf_opt_in', true);
   var expirationTime = _get(cartInfoData, 'expiresAt');
   var flagRequirePhone = getQueryVariable('phone_required') === 'true';
@@ -2844,9 +3035,9 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var flagFreeTicket = getQueryVariable('free_ticket') === 'true';
   var hidePhoneField = getQueryVariable('hide_phone_field') === 'true';
   var hideWalletAddressField = !collectOptionalWalletAddress && !collectMandatoryWalletAddress;
-  var _useState18 = useState(),
-    pendingVerificationMessage = _useState18[0],
-    setPendingVerificationMessage = _useState18[1];
+  var _useState19 = useState(),
+    pendingVerificationMessage = _useState19[0],
+    setPendingVerificationMessage = _useState19[1];
   // Get prevProps
   var prevData = useRef(data);
   var addAddOnsInAttributes = function addAddOnsInAttributes(checkoutBody) {
@@ -2926,9 +3117,10 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
             _context3.prev = 0;
-            _context3.next = 3;
+            setCardLoading(true);
+            _context3.next = 4;
             return getCart();
-          case 3:
+          case 4:
             res = _context3.sent;
             setCustomHeader(res);
             cartInfo = _get(res, 'data.data.attributes');
@@ -2938,19 +3130,23 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
               return nanoid();
             }));
             onGetCartSuccess(res.data);
-            _context3.next = 15;
+            _context3.next = 16;
             break;
-          case 12:
-            _context3.prev = 12;
+          case 13:
+            _context3.prev = 13;
             _context3.t0 = _context3["catch"](0);
             if (axios.isAxiosError(_context3.t0)) {
               onGetCartError(_context3.t0);
             }
-          case 15:
+          case 16:
+            _context3.prev = 16;
+            setCardLoading(false);
+            return _context3.finish(16);
+          case 19:
           case "end":
             return _context3.stop();
         }
-      }, _callee3, null, [[0, 12]]);
+      }, _callee3, null, [[0, 13, 16, 19]]);
     }));
     return function fetchCart() {
       return _ref6.apply(this, arguments);
@@ -3089,9 +3285,12 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
     page: 'billing',
     pageUrl: pageUrl
   });
+  if (isTable) {
+    dataWithUniqueIds[0].label = 'Get Your Tables';
+  }
   return React.createElement(ThemeProvider, {
     theme: themeMui
-  }, (loading || isCountriesLoading) && React.createElement(Backdrop, {
+  }, (loading || cardLoading || isCountriesLoading) && React.createElement(Backdrop, {
     sx: {
       color: '#fff',
       backgroundColor: '#000000bd',
@@ -3306,7 +3505,7 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
     }, React.createElement("img", {
       src: theme === 'dark' ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg' : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg',
       alt: "nodata"
-    })))), _map(dataWithUniqueIds, function (item) {
+    })))), !cardLoading && _map(dataWithUniqueIds, function (item) {
       var label = item.label,
         labelClassName = item.labelClassName,
         fields = item.fields;
@@ -3786,12 +3985,15 @@ var getStripePromise = function getStripePromise(reviewData) {
   return loadStripe(stripePublishableKey, options);
 };
 var initialOrderValues = {
+  id: '',
   product_name: '',
   ticketType: '',
   quantity: '',
   price: '',
   total: '',
   currency: '',
+  guest_count: '',
+  pay_now: '',
   add_ons: []
 };
 var initialReviewValues = {
@@ -3862,7 +4064,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
   var eventId = getQueryVariable('event_id') || _get(reviewData, 'cart[0].product_id') || '';
   var hash = checkoutData.hash,
     total = checkoutData.total;
-  var isFreeTickets = !Number(total) && !Number(orderData.total);
+  var isFreeTickets = !Number(total) && !Number(orderData.total) || !Number(orderData.pay_now);
   var pageUrl = isBrowser ? window.location.href.split('?')[0] : '';
   usePixel(eventId, {
     page: 'review',
@@ -3870,7 +4072,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
   });
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var response, _cart$, attributes, cart, order_details, _order_details$ticket, ticket, _orderData;
+      var response, _cart$2, attributes, cart, order_details, _order_details$ticket, ticket, orderDataArray, _orderData;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -3884,14 +4086,30 @@ var PaymentContainer = function PaymentContainer(_ref) {
               setReviewData(attributes);
               cart = attributes.cart, order_details = attributes.order_details;
               _order_details$ticket = order_details.tickets, ticket = _order_details$ticket[0];
+              orderDataArray = _map(order_details.tickets, function (item) {
+                var _cart$;
+                return {
+                  product_name: (_cart$ = cart[0]) == null ? void 0 : _cart$.product_name,
+                  ticketType: item == null ? void 0 : item.name,
+                  quantity: item == null ? void 0 : item.guest_count,
+                  price: item == null ? void 0 : item.price,
+                  id: item.id,
+                  count: item == null ? void 0 : item.quantity
+                };
+              });
               _orderData = {
-                product_name: (_cart$ = cart[0]) == null ? void 0 : _cart$.product_name,
+                id: order_details == null ? void 0 : order_details.id,
+                product_name: (_cart$2 = cart[0]) == null ? void 0 : _cart$2.product_name,
                 ticketType: ticket == null ? void 0 : ticket.name,
                 quantity: ticket == null ? void 0 : ticket.quantity,
                 price: ticket == null ? void 0 : ticket.price,
                 total: order_details == null ? void 0 : order_details.total,
                 currency: order_details == null ? void 0 : order_details.currency,
-                add_ons: (order_details == null ? void 0 : order_details.add_ons) || []
+                add_ons: (order_details == null ? void 0 : order_details.add_ons) || [],
+                pay_now: (order_details == null ? void 0 : order_details.pay_now) || '',
+                guest_count: (order_details == null ? void 0 : order_details.guest_count) || null,
+                debt: (order_details == null ? void 0 : order_details.debt) || null,
+                tableTypes: orderDataArray
               };
               setOrderData(_orderData);
               onGetPaymentDataSuccess(response.data);
@@ -3956,7 +4174,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
   // 3. redirect to confirmation page
   var handlePaymentMiddleWare = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(error) {
-      var order_hash, paymentSuccessResponse;
+      var order_hash, paymentSuccessResponse, isWindowDefined, _window;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -3988,6 +4206,20 @@ var PaymentContainer = function PaymentContainer(_ref) {
             if (paymentSuccessResponse.status === 200) {
               handlePayment(paymentSuccessResponse);
               setPaymentIsLoading(false);
+              // clear seat-map related data from localStorage
+              localStorage.removeItem('reservationData');
+              localStorage.removeItem("reservationStart-" + eventId);
+              localStorage.removeItem('ownReservations');
+              localStorage.removeItem('tierId');
+              isWindowDefined = typeof window !== "undefined";
+              if (isWindowDefined) {
+                (_window = window) == null ? void 0 : _window.dataLayer.push({
+                  'event': 'Purchase',
+                  'orderValue': orderData.total,
+                  'orderCurrency': orderData.currency,
+                  'orderId': orderData.id
+                });
+              }
             }
             _context3.next = 22;
             break;
@@ -4008,6 +4240,33 @@ var PaymentContainer = function PaymentContainer(_ref) {
     };
   }();
   var themeMui = createTheme(themeOptions);
+  var hasTableTypes = Boolean(Number(orderData.guest_count));
+  var paymentFieldsData = hasTableTypes ? [{
+    label: 'Event',
+    id: 'product_name'
+  }, {
+    label: '',
+    id: 'tableTypes'
+  }, {
+    label: 'Total (incl. fees, card processing and taxes)',
+    id: 'total',
+    normalizer: function normalizer(value, currency) {
+      return currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(value)), currency);
+    }
+  }, {
+    label: 'Pay Now',
+    id: 'pay_now',
+    normalizer: function normalizer(value, currency) {
+      return currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(value)), currency);
+    }
+  }, {
+    label: 'Pay On Check-in',
+    id: 'debt',
+    normalizer: function normalizer(value, currency) {
+      return currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(value)), currency);
+    }
+  }] : paymentFields;
+  var isTable = orderData == null ? void 0 : orderData.guest_count;
   return React.createElement(ThemeProvider, {
     theme: themeMui
   }, React.createElement("div", {
@@ -4022,11 +4281,14 @@ var PaymentContainer = function PaymentContainer(_ref) {
     variant: "filled"
   }, error), paymentDataIsLoading && React.createElement(Loader, null), !paymentDataIsLoading && React.createElement(Container, {
     maxWidth: "md"
-  }, showFormTitle && React.createElement("h1", null, formTitle), React.createElement("div", {
+  }, showFormTitle && React.createElement("h1", null, isTable ? 'Get Your Tables' : formTitle), React.createElement("div", {
     className: "order_info_text"
   }, orderInfoLabel), React.createElement("div", {
-    className: "order_info_section"
-  }, _map(paymentFields, function (field) {
+    className: "order_info_section",
+    style: {
+      display: hasTableTypes ? 'block' : 'grid'
+    }
+  }, _map(paymentFieldsData, function (field) {
     var id = field.id,
       label = field.label,
       _field$className = field.className,
@@ -4035,10 +4297,49 @@ var PaymentContainer = function PaymentContainer(_ref) {
       normalizer = _field$normalizer === void 0 ? _identity : _field$normalizer;
     var currency = orderData.currency;
     var value = orderData[id];
+    var component = null;
     if (field.id === 'add_ons' && _isEmpty(value)) {
       return false;
     }
-    return React.createElement("div", {
+    if (field.id === 'tableTypes') {
+      var valueArray = value;
+      component = React.createElement("div", {
+        key: id,
+        className: "order_info_block",
+        style: {
+          display: 'flex',
+          flexDirection: 'column'
+        }
+      }, _map(valueArray, function (tableTypeItem) {
+        return React.createElement("div", {
+          key: tableTypeItem.id,
+          style: {
+            display: 'grid',
+            gridTemplateColumns: '33% 33% 33%',
+            gridColumnGap: '10%'
+          }
+        }, React.createElement("div", {
+          className: "order_info_block"
+        }, React.createElement("div", {
+          className: "order_info_title"
+        }, "Table Type"), React.createElement("div", {
+          className: className + " order_info_text"
+        }, tableTypeItem.ticketType)), React.createElement("div", {
+          className: "order_info_block"
+        }, React.createElement("div", {
+          className: "order_info_title"
+        }, "Number of Tables"), React.createElement("div", {
+          className: className + " order_info_text"
+        }, tableTypeItem.count)), React.createElement("div", {
+          className: "order_info_block"
+        }, React.createElement("div", {
+          className: "order_info_title"
+        }, "Guest Count"), React.createElement("div", {
+          className: className + " order_info_text"
+        }, tableTypeItem.quantity)));
+      }));
+    }
+    return component || React.createElement("div", {
       key: id,
       className: "order_info_block"
     }, React.createElement("div", {
@@ -4088,7 +4389,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     options: elementsOptions
   }, React.createElement(CheckoutForm, {
     stripe_client_secret: _get(reviewData, 'payment_method.stripe_client_secret'),
-    total: orderData.total,
+    total: orderData.guest_count ? orderData.pay_now : orderData.total,
     onSubmit: handlePaymentMiddleWare,
     error: error,
     currency: orderData.currency,
@@ -4288,12 +4589,12 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     _ref$shareButtons = _ref.shareButtons,
     shareButtons = _ref$shareButtons === void 0 ? [] : _ref$shareButtons,
     _ref$onGetConfirmatio = _ref.onGetConfirmationDataSuccess,
-    onGetConfirmationDataSuccess = _ref$onGetConfirmatio === void 0 ? function () {} : _ref$onGetConfirmatio,
+    onGetConfirmationDataSuccess = _ref$onGetConfirmatio === void 0 ? _identity : _ref$onGetConfirmatio,
     _ref$onGetConfirmatio2 = _ref.onGetConfirmationDataError,
-    onGetConfirmationDataError = _ref$onGetConfirmatio2 === void 0 ? function () {} : _ref$onGetConfirmatio2,
+    onGetConfirmationDataError = _ref$onGetConfirmatio2 === void 0 ? _identity : _ref$onGetConfirmatio2,
     orderHash = _ref.orderHash,
     _ref$onLinkCopied = _ref.onLinkCopied,
-    onLinkCopied = _ref$onLinkCopied === void 0 ? function () {} : _ref$onLinkCopied,
+    onLinkCopied = _ref$onLinkCopied === void 0 ? _identity : _ref$onLinkCopied,
     clientLabel = _ref.clientLabel,
     _ref$showReferralsInf = _ref.showReferralsInfoText,
     showReferralsInfoText = _ref$showReferralsInf === void 0 ? false : _ref$showReferralsInf,
@@ -4310,7 +4611,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     hash: orderHash
   };
   var hash = dataDecoded.hash;
-  // 1. get payment complete data ---> v1/order/${orderHash}/payment/complete/
+  var eventId = (data == null ? void 0 : data.product_id) || '';
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var _data$product_price, response, _data;
@@ -4379,7 +4680,6 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     confirmationMain = _confirmationLabels$c2 === void 0 ? 'Your tickets are available in My Tickets section' : _confirmationLabels$c2,
     _confirmationLabels$c3 = confirmationLabels.confirmationHelper,
     confirmationHelper = _confirmationLabels$c3 === void 0 ? 'Please bring them with you to the event' : _confirmationLabels$c3;
-  var eventId = (data == null ? void 0 : data.product_id) || '';
   var pageUrl = isBrowser ? window.location.href.split('?')[0] : '';
   usePixel(eventId, {
     page: 'complete',
@@ -4470,6 +4770,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     value: data.personal_share_link,
     onChange: onChangeShareLink
   }), React.createElement("div", {
+    "aria-hidden": true,
     className: "share-by-link-copy-icon",
     onClick: function onClick() {
       navigator.clipboard.writeText(_get(inputRef, 'current.value'));
@@ -4973,14 +5274,21 @@ var TicketRow = function TicketRow(_ref) {
   var ticketTier = _ref.ticketTier,
     prevTicketTier = _ref.prevTicketTier,
     selectedTickets = _ref.selectedTickets,
-    handleTicketSelect = _ref.handleTicketSelect;
+    handleTicketSelect = _ref.handleTicketSelect,
+    isSeatMapAllowed = _ref.isSeatMapAllowed,
+    tableType = _ref.tableType;
   var soldOutMessage = ticketTier.soldOutMessage ? ("" + ticketTier.soldOutMessage).toUpperCase() : 'SOLD OUT';
   var isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded;
-  var options = getTicketSelectOptions(ticketTier.maxQuantity, ticketTier.minQuantity, ticketTier.multiplier);
+  var maxCount = tableType ? ticketTier.maxGuests : ticketTier.maxQuantity;
+  var minCount = tableType ? ticketTier.minGuests : ticketTier.minQuantity;
+  var multiplier = ticketTier.multiplier;
+  var options = getTicketSelectOptions(maxCount, minCount, multiplier);
   var ticketsClosedMessage = !ticketTier.salesStarted ? 'Sales not started' : 'Sales Ended';
+  var canPurchaseTicket = ticketTier.displayTicket && ticketTier.maxQuantity;
+  var isDirectPurchaseAllowed = _get(ticketTier, 'allowDirectPurchase', false);
   var onSaleContent = React.createElement("div", {
     className: "get-tickets"
-  }, React.createElement(Box$1, {
+  }, ticketTier.isTable && React.createElement("span", null, "GUESTS"), React.createElement(Box$1, {
     className: "get-tickets__selectbox"
   }, React.createElement(FormControl$1, {
     fullWidth: true
@@ -5015,7 +5323,10 @@ var TicketRow = function TicketRow(_ref) {
     returnValue = soldOutMessage;
   } else if (isSalesClosed) {
     returnValue = ticketsClosedMessage;
-  } else if (ticketTier.displayTicket && ticketTier.maxQuantity) {
+  } else if (canPurchaseTicket && isSeatMapAllowed && !isDirectPurchaseAllowed) {
+    // Seat Map Tickets renderer logic
+    returnValue = null;
+  } else if (canPurchaseTicket) {
     returnValue = onSaleContent;
   } else if (_get(prevTicketTier, 'in_stock')) {
     returnValue = 'SOON';
@@ -5033,9 +5344,13 @@ var TicketsSection = function TicketsSection(_ref) {
     handleTicketSelect = _ref.handleTicketSelect,
     sortBySoldOut = _ref.sortBySoldOut,
     ticketsHeaderComponent = _ref.ticketsHeaderComponent,
+    tableTicketsHeaderComponent = _ref.tableTicketsHeaderComponent,
     hideTicketsHeader = _ref.hideTicketsHeader,
+    hideTableTicketsHeader = _ref.hideTableTicketsHeader,
     showGroupNameBlock = _ref.showGroupNameBlock,
-    currencySybmol = _ref.currencySybmol;
+    currencySybmol = _ref.currencySybmol,
+    isSeatMapAllowed = _ref.isSeatMapAllowed,
+    tableTickets = _ref.tableTickets;
   var symbol = event.currency.symbol;
   var sortedTicketsList = sortBySoldOut ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut') : _sortBy(ticketsList, 'sortOrder');
   var showGroup = !!sortedTicketsList.find(function (ticket) {
@@ -5087,6 +5402,55 @@ var TicketsSection = function TicketsSection(_ref) {
       selectedTickets: selectedTickets,
       handleTicketSelect: ticketSelect
     })))));
+  }), !hideTableTicketsHeader && tableTicketsHeaderComponent, tableTickets.map(function (ticket, i, arr) {
+    var _arr2;
+    var ticketPrice = priceSymbol + " " + (+ticket.price).toFixed(2);
+    var ticketOldPrice = priceSymbol + " " + (+ticket.oldPrice).toFixed(2);
+    var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
+    var ticketSelect = function ticketSelect(event) {
+      var value = event.target.value;
+      handleTicketSelect(ticket.id, value, true);
+    };
+    var ticketIsDiscounted = false;
+    if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
+      ticketIsDiscounted = true;
+    }
+    var ticketIsFree = +ticket.price === 0;
+    var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : ticketPrice;
+    var isNewGroupTicket = (ticket == null ? void 0 : ticket.groupName) !== ((_arr2 = arr[i - 1]) == null ? void 0 : _arr2.groupName);
+    return React.createElement(React.Fragment, null, React.createElement(React.Fragment, {
+      key: ticket.id || ticket.name
+    }, showGroupNameBlock && showGroup && isNewGroupTicket ? React.createElement("div", {
+      className: "event-detail__tier group-title"
+    }, ticket.groupName || '') : null, React.createElement("div", {
+      className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
+    }, React.createElement("div", {
+      className: "event-detail__tier-name"
+    }, ticket.displayName || ticket.name), React.createElement("div", {
+      className: "event-tickets-container"
+    }, React.createElement("div", {
+      className: "event-detail__tier-price"
+    }, ticketIsDiscounted && React.createElement("p", {
+      className: "old-price"
+    }, ticketOldPrice), React.createElement("p", {
+      className: isSoldOut ? 'sold-out' : ''
+    }, ticketPriceElem), !isSoldOut && !ticketIsFree && React.createElement("p", {
+      className: "fees"
+    }, ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'), ticket.depositPercent && React.createElement("p", {
+      className: "deposits"
+    }, ticket.depositPercent + '% DEPOSIT')), React.createElement("div", {
+      className: "event-detail__tier-state",
+      style: {
+        minWidth: 55
+      }
+    }, React.createElement(TicketRow, {
+      tableType: true,
+      ticketTier: ticket,
+      prevTicketTier: arr[i - 1],
+      selectedTickets: selectedTickets,
+      handleTicketSelect: ticketSelect,
+      isSeatMapAllowed: isSeatMapAllowed
+    }))))));
   }));
 };
 
@@ -5138,6 +5502,9 @@ var TicketsContainer = function TicketsContainer(_ref) {
     ticketsHeaderComponent = _ref.ticketsHeaderComponent,
     _ref$hideTicketsHeade = _ref.hideTicketsHeader,
     hideTicketsHeader = _ref$hideTicketsHeade === void 0 ? false : _ref$hideTicketsHeade,
+    tableTicketsHeaderComponent = _ref.tableTicketsHeaderComponent,
+    _ref$hideTableTickets = _ref.hideTableTicketsHeader,
+    hideTableTicketsHeader = _ref$hideTableTickets === void 0 ? false : _ref$hideTableTickets,
     _ref$enableInfluencer = _ref.enableInfluencersSection,
     enableInfluencersSection = _ref$enableInfluencer === void 0 ? true : _ref$enableInfluencer,
     _ref$enableAddOns = _ref.enableAddOns,
@@ -5154,6 +5521,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
     showGroupNameBlock = _ref$showGroupNameBlo === void 0 ? false : _ref$showGroupNameBlo,
     _ref$currencySybmol = _ref.currencySybmol,
     currencySybmol = _ref$currencySybmol === void 0 ? '' : _ref$currencySybmol,
+    _ref$onReserveButtonC = _ref.onReserveButtonClick,
+    onReserveButtonClick = _ref$onReserveButtonC === void 0 ? _identity : _ref$onReserveButtonC,
     _ref$onPendingVerific = _ref.onPendingVerification,
     onPendingVerification = _ref$onPendingVerific === void 0 ? _identity : _ref$onPendingVerific;
   var _useState = useState({}),
@@ -5357,13 +5726,16 @@ var TicketsContainer = function TicketsContainer(_ref) {
     }));
     return _getTicketsApi.apply(this, arguments);
   }
-  var handleTicketSelect = function handleTicketSelect(key, value) {
+  var handleTicketSelect = function handleTicketSelect(key, value, isTable) {
+    if (isTable === void 0) {
+      isTable = false;
+    }
     setSelectedTickets(function (prevState) {
       var _ref3;
       if (Object.keys(prevState)[0] !== key && !value) {
         return prevState;
       }
-      return _ref3 = {}, _ref3[key] = value, _ref3;
+      return _ref3 = {}, _ref3[key] = value, _ref3.isTable = isTable, _ref3;
     });
   };
   var handleOrdersClick = function handleOrdersClick() {
@@ -5377,7 +5749,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
   var handleBook = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
       var _product_options, _product_options2, _ticket_types;
-      var ticket, optionName, ticketId, ticketQuantity, data, result, pageConfigsDataResponse, _pageConfigsData$skip, _pageConfigsData$name, _pageConfigsData$age_, _pageConfigsData$phon, _pageConfigsData$hide, _pageConfigsData$has_, _pageConfigsData$free, _pageConfigsData$coll, _pageConfigsData$coll2, pageConfigsData, skipBillingPage, nameIsRequired, ageIsRequired, phoneIsRequired, hidePhoneField, hasAddOn, freeTicket, collectOptionalWalletAddress, collectMandatoryWalletAddress, hash, total, _isWindowDefined, userData, access_token, checkoutBody, checkoutResult, _e$response, _e$response$data, _e$response$data$data, _e$response2, _e$response2$data, message, _isInvalidLinkError, _isNotInvitedError;
+      var ticket, optionName, ticketId, isTableType, productCartQuantity, ticketQuantity, data, result, pageConfigsDataResponse, _pageConfigsData$skip, _pageConfigsData$name, _pageConfigsData$age_, _pageConfigsData$phon, _pageConfigsData$hide, _pageConfigsData$has_, _pageConfigsData$free, _pageConfigsData$coll, _pageConfigsData$coll2, pageConfigsData, skipBillingPage, nameIsRequired, ageIsRequired, phoneIsRequired, hidePhoneField, hasAddOn, freeTicket, collectOptionalWalletAddress, collectMandatoryWalletAddress, hash, total, _isWindowDefined, userData, access_token, checkoutBody, checkoutResult, _e$response, _e$response$data, _e$response$data$data, _e$response2, _e$response2$data, message, _isInvalidLinkError, _isNotInvitedError;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -5387,11 +5759,13 @@ var TicketsContainer = function TicketsContainer(_ref) {
             }) || {};
             optionName = _get(ticket, 'optionName');
             ticketId = _get(ticket, 'id');
-            ticketQuantity = +selectedTickets[ticket.id];
+            isTableType = _get(ticket, 'isTable', false);
+            productCartQuantity = +selectedTickets[ticket.id];
+            ticketQuantity = isTableType ? 1 : +selectedTickets[ticket.id];
             data = {
               attributes: {
                 alternative_view_id: null,
-                product_cart_quantity: ticketQuantity,
+                product_cart_quantity: productCartQuantity,
                 product_options: (_product_options = {}, _product_options[optionName] = ticketId, _product_options),
                 product_id: eventId,
                 ticket_types: (_ticket_types = {}, _ticket_types[ticketId] = {
@@ -5400,32 +5774,32 @@ var TicketsContainer = function TicketsContainer(_ref) {
                 }, _ticket_types)
               }
             };
-            _context2.prev = 6;
-            _context2.next = 9;
+            _context2.prev = 8;
+            _context2.next = 11;
             return addToCart(eventId, data);
-          case 9:
+          case 11:
             result = _context2.sent;
             if (!enableAddOns) {
-              _context2.next = 16;
+              _context2.next = 18;
               break;
             }
-            _context2.next = 13;
+            _context2.next = 15;
             return getCheckoutPageConfigs();
-          case 13:
+          case 15:
             _context2.t0 = _context2.sent;
-            _context2.next = 17;
+            _context2.next = 19;
             break;
-          case 16:
+          case 18:
             _context2.t0 = {
               status: 200,
               data: {
                 attributes: _get(result, 'data.data.attributes')
               }
             };
-          case 17:
+          case 19:
             pageConfigsDataResponse = _context2.t0;
             if (!(result.status === 200 && pageConfigsDataResponse.status === 200)) {
-              _context2.next = 48;
+              _context2.next = 50;
               break;
             }
             pageConfigsData = _get(pageConfigsDataResponse, 'data.attributes') || {};
@@ -5443,7 +5817,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
             _isWindowDefined = typeof window !== 'undefined';
             _isWindowDefined && window.localStorage.removeItem('add_ons');
             if (!(skipBillingPage && !hasAddOn)) {
-              _context2.next = 47;
+              _context2.next = 49;
               break;
             }
             // Get user data for checkout data
@@ -5451,22 +5825,22 @@ var TicketsContainer = function TicketsContainer(_ref) {
             access_token = _isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
             checkoutBody = createCheckoutDataBodyWithDefaultHolder(ticketQuantity, userData);
             if (!enableBillingInfoAutoCreate) {
-              _context2.next = 43;
+              _context2.next = 45;
               break;
             }
-            _context2.next = 40;
+            _context2.next = 42;
             return postOnCheckout(checkoutBody, access_token, freeTicket);
-          case 40:
+          case 42:
             _context2.t1 = _context2.sent;
-            _context2.next = 44;
+            _context2.next = 46;
             break;
-          case 43:
+          case 45:
             _context2.t1 = null;
-          case 44:
+          case 46:
             checkoutResult = _context2.t1;
             hash = _get(checkoutResult, 'data.data.attributes.hash');
             total = _get(checkoutResult, 'data.data.attributes.total');
-          case 47:
+          case 49:
             onAddToCartSuccess({
               skip_billing_page: skipBillingPage,
               names_required: nameIsRequired,
@@ -5481,12 +5855,12 @@ var TicketsContainer = function TicketsContainer(_ref) {
               total: total,
               hasAddOn: hasAddOn
             });
-          case 48:
-            _context2.next = 53;
-            break;
           case 50:
-            _context2.prev = 50;
-            _context2.t2 = _context2["catch"](6);
+            _context2.next = 55;
+            break;
+          case 52:
+            _context2.prev = 52;
+            _context2.t2 = _context2["catch"](8);
             if ((_e$response = _context2.t2.response) != null && (_e$response$data = _e$response.data) != null && (_e$response$data$data = _e$response$data.data) != null && _e$response$data$data.hasUnverifiedOrder) {
               setPendingVerificationMessage((_e$response2 = _context2.t2.response) == null ? void 0 : (_e$response2$data = _e$response2.data) == null ? void 0 : _e$response2$data.message);
             } else if (axios.isAxiosError(_context2.t2)) {
@@ -5502,15 +5876,15 @@ var TicketsContainer = function TicketsContainer(_ref) {
                 setError(message);
               }
             }
-          case 53:
-            _context2.prev = 53;
+          case 55:
+            _context2.prev = 55;
             setHandleBookIsLoading(false);
-            return _context2.finish(53);
-          case 56:
+            return _context2.finish(55);
+          case 58:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[6, 50, 53, 56]]);
+      }, _callee2, null, [[8, 52, 55, 58]]);
     }));
     return function handleBook() {
       return _ref4.apply(this, arguments);
@@ -5574,7 +5948,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
       }
     }
   };
-  var bookButtonIsDisabled = handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0;
+  var bookButtonIsDisabled = (handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0) && !(event != null && event.flagSeatMapAllowed);
   var isTicketAvailable = _some(tickets, function (ticket) {
     return ticket.displayTicket && !ticket.soldOut && ticket.salesStarted;
   });
@@ -5602,6 +5976,17 @@ var TicketsContainer = function TicketsContainer(_ref) {
     setIsInvalidLinkError('');
   };
   var hideTopInfluencers = event == null ? void 0 : event.hideTopInfluencers;
+  var isSeatMapAllowed = _get(event, 'seatMapAllowed', false);
+  var isTableMapEnabled = _get(event, 'tableMapEnabled', false);
+  var tableTickets = _filter(tickets, function (ticket) {
+    return ticket.isTable;
+  });
+  var ordinarTickets = {};
+  _forEach(tickets, function (ticket, key) {
+    if (!ticket.isTable) {
+      ordinarTickets[key] = ticket;
+    }
+  });
   return React.createElement(ThemeProvider$1, {
     theme: themeMui
   }, !isLoading && React.createElement(ReferralLogic, {
@@ -5638,14 +6023,18 @@ var TicketsContainer = function TicketsContainer(_ref) {
     ref: ticketsContainerRef
   }, !isSalesClosed && React.createElement(TicketsSection, {
     event: event,
-    ticketsList: tickets,
+    ticketsList: ordinarTickets,
+    tableTickets: tableTickets,
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
     sortBySoldOut: sortBySoldOut,
     ticketsHeaderComponent: ticketsHeaderComponent,
-    hideTicketsHeader: hideTicketsHeader || _isEmpty(tickets),
+    tableTicketsHeaderComponent: tableTicketsHeaderComponent,
+    hideTableTicketsHeader: hideTableTicketsHeader || _isEmpty(tableTickets),
+    hideTicketsHeader: hideTicketsHeader || _isEmpty(ordinarTickets),
     showGroupNameBlock: showGroupNameBlock,
-    currencySybmol: currencySybmol
+    currencySybmol: currencySybmol,
+    isSeatMapAllowed: isSeatMapAllowed
   }), externalUrl ? null : isSalesClosed ? React.createElement("p", {
     className: "event-closed-message " + (!isLoggedIn ? 'event-closed-on-bottom' : '')
   }, "Sales for this event are closed.") : eventSaleIsNotStarted ? React.createElement(Countdown, {
@@ -5658,7 +6047,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     disableLeadingZero: disableCountdownLeadingZero,
     isLoggedIn: isLoggedIn
   }) : null, showWaitingList && event.salesStarted && !hideWaitingList && React.createElement(WaitingList, {
-    tickets: tickets,
+    tickets: ordinarTickets,
     eventId: eventId,
     defaultMaxQuantity: event.waitingListMaxQuantity
   }), codeIsLoading ? React.createElement(Loader, null) : isSalesClosed ? null : showAccessCodeSection ? React.createElement(AccessCodeSection, {
@@ -5680,7 +6069,11 @@ var TicketsContainer = function TicketsContainer(_ref) {
     "aria-hidden": true,
     className: "book-button \n                  " + (bookButtonIsDisabled ? 'disabled' : '') + "  \n                  " + (isButtonScrollable ? 'is-scrollable' : '') + "\n                  " + (!isLoggedIn ? 'on-bottom' : '') + "\n                ",
     onClick: handleGetTicketClick
-  }, getTicketsLabel || 'GET TICKETS'), isLogged && !hideSessionButtons ? React.createElement("div", {
+  }, selectedTickets.isTable ? 'RESERVE TABLES' : getTicketsLabel || 'GET TICKETS'), isSeatMapAllowed && !(event != null && event.salesEnded) && isTicketAvailable && React.createElement(Button$1, {
+    className: "reserve-button",
+    "aria-hidden": true,
+    onClick: onReserveButtonClick
+  }, isTableMapEnabled ? 'Select on map' : 'Select your seats'), isLogged && !hideSessionButtons ? React.createElement("div", {
     className: "session-wrapper"
   }, React.createElement("span", {
     className: "session-container"
@@ -6483,6 +6876,17 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     var date = moment.tz(data.date, data.timezone).format('dddd, DD MMMM YYYY');
     orderSummery += " " + date;
   }
+  var columnsProps = data.tickets && data.tickets[0].is_table ? [{
+    label: 'Items'
+  }, {
+    label: 'Price'
+  }, {
+    label: 'Guests count'
+  }, {
+    label: 'Deposit paid'
+  }, {
+    label: 'Remaining'
+  }] : columns;
   return React.createElement("div", {
     className: "order-details"
   }, loading ? React.createElement("div", {
@@ -6529,12 +6933,14 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   }, React.createElement(Table, {
     className: "tt-type",
     "aria-label": "collapsible table"
-  }, React.createElement(TableHead, null, React.createElement(TableRow, null, _map(columns, function (item) {
+  }, React.createElement(TableHead, null, React.createElement(TableRow, null, _map(columnsProps, function (item) {
     return React.createElement(TableCell, null, item.label || '');
   }))), React.createElement(TableBody, null, data == null ? void 0 : (_data$items = data.items) == null ? void 0 : (_data$items$ticket_ty = _data$items.ticket_types) == null ? void 0 : _data$items$ticket_ty.map(function (ticket, index) {
-    return React.createElement(TableRow, {
+    return data != null && data.tickets && !(data != null && data.tickets[0].is_table) ? React.createElement(TableRow, {
       key: index
-    }, React.createElement(TableCell, null, React.createElement("b", null, "Ticket Type:"), " ", ticket.name), React.createElement(TableCell, null, ticket.currency + ticket.price), React.createElement(TableCell, null, ticket.quantity), React.createElement(TableCell, null, ticket.currency + ticket.total));
+    }, React.createElement(TableCell, null, React.createElement("b", null, "Ticket Type:"), " ", ticket.name), React.createElement(TableCell, null, ticket.currency + ticket.price), React.createElement(TableCell, null, ticket.quantity), React.createElement(TableCell, null, ticket.currency + ticket.total)) : React.createElement(TableRow, {
+      key: index
+    }, React.createElement(TableCell, null, React.createElement("b", null, "Ticket Type:"), " ", ticket.name), React.createElement(TableCell, null, ticket.currency + ticket.price), React.createElement(TableCell, null, ticket.guests_count), React.createElement(TableCell, null, ticket.deposit_paid), React.createElement(TableCell, null, ticket.remaining));
   }), data == null ? void 0 : (_data$items2 = data.items) == null ? void 0 : (_data$items2$add_ons = _data$items2.add_ons) == null ? void 0 : _data$items2$add_ons.map(function (ticket, index) {
     return React.createElement(TableRow, {
       key: index
@@ -7416,16 +7822,850 @@ var AddonsContainter = function AddonsContainter(_ref) {
   }));
 };
 
+var addToCartFunc = /*#__PURE__*/function () {
+  var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+    var eventId, data, ticketQuantity, _ref$enableBillingInf, enableBillingInfoAutoCreate, isWindowDefined, result, pageConfigsDataResponse, pageConfigsData, _pageConfigsData$skip, skipBillingPage, _pageConfigsData$name, nameIsRequired, _pageConfigsData$age_, ageIsRequired, _pageConfigsData$phon, phoneIsRequired, _pageConfigsData$hide, hidePhoneField, _pageConfigsData$has_, hasAddOn, _pageConfigsData$free, freeTicket, _pageConfigsData$coll, collectOptionalWalletAddress, _pageConfigsData$coll2, collectMandatoryWalletAddress, hash, total, userData, checkoutBody, checkoutResult;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          eventId = _ref.eventId, data = _ref.data, ticketQuantity = _ref.ticketQuantity, _ref$enableBillingInf = _ref.enableBillingInfoAutoCreate, enableBillingInfoAutoCreate = _ref$enableBillingInf === void 0 ? true : _ref$enableBillingInf;
+          isWindowDefined = typeof window !== 'undefined';
+          _context.next = 4;
+          return addToCart(eventId, data);
+        case 4:
+          result = _context.sent;
+          _context.next = 7;
+          return getCheckoutPageConfigs();
+        case 7:
+          pageConfigsDataResponse = _context.sent;
+          if (!(result.status === 200 && pageConfigsDataResponse.status === 200)) {
+            _context.next = 28;
+            break;
+          }
+          pageConfigsData = _get(pageConfigsDataResponse, 'data.attributes') || {};
+          _pageConfigsData$skip = pageConfigsData.skip_billing_page, skipBillingPage = _pageConfigsData$skip === void 0 ? false : _pageConfigsData$skip, _pageConfigsData$name = pageConfigsData.names_required, nameIsRequired = _pageConfigsData$name === void 0 ? false : _pageConfigsData$name, _pageConfigsData$age_ = pageConfigsData.age_required, ageIsRequired = _pageConfigsData$age_ === void 0 ? false : _pageConfigsData$age_, _pageConfigsData$phon = pageConfigsData.phone_required, phoneIsRequired = _pageConfigsData$phon === void 0 ? false : _pageConfigsData$phon, _pageConfigsData$hide = pageConfigsData.hide_phone_field, hidePhoneField = _pageConfigsData$hide === void 0 ? false : _pageConfigsData$hide, _pageConfigsData$has_ = pageConfigsData.has_add_on, hasAddOn = _pageConfigsData$has_ === void 0 ? false : _pageConfigsData$has_, _pageConfigsData$free = pageConfigsData.free_ticket, freeTicket = _pageConfigsData$free === void 0 ? false : _pageConfigsData$free, _pageConfigsData$coll = pageConfigsData.collect_optional_wallet_address, collectOptionalWalletAddress = _pageConfigsData$coll === void 0 ? false : _pageConfigsData$coll, _pageConfigsData$coll2 = pageConfigsData.collect_mandatory_wallet_address, collectMandatoryWalletAddress = _pageConfigsData$coll2 === void 0 ? false : _pageConfigsData$coll2;
+          hash = '';
+          total = '';
+          isWindowDefined && window.localStorage.removeItem('add_ons');
+          if (!(skipBillingPage && !hasAddOn)) {
+            _context.next = 27;
+            break;
+          }
+          // Get user data for checkout data
+          userData = isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
+          checkoutBody = createCheckoutDataBodyWithDefaultHolder(ticketQuantity, userData);
+          if (!enableBillingInfoAutoCreate) {
+            _context.next = 23;
+            break;
+          }
+          _context.next = 20;
+          return postOnCheckout(checkoutBody, undefined, freeTicket);
+        case 20:
+          _context.t0 = _context.sent;
+          _context.next = 24;
+          break;
+        case 23:
+          _context.t0 = null;
+        case 24:
+          checkoutResult = _context.t0;
+          hash = _get(checkoutResult, 'data.data.attributes.hash') || '';
+          total = _get(checkoutResult, 'data.data.attributes.total') || '';
+        case 27:
+          return _context.abrupt("return", {
+            skip_billing_page: skipBillingPage,
+            names_required: nameIsRequired,
+            phone_required: phoneIsRequired,
+            age_required: ageIsRequired,
+            hide_phone_field: hidePhoneField,
+            free_ticket: freeTicket,
+            collect_optional_wallet_address: collectOptionalWalletAddress,
+            collect_mandatory_wallet_address: collectMandatoryWalletAddress,
+            event_id: String(eventId),
+            hash: hash,
+            total: total,
+            hasAddOn: hasAddOn
+          });
+        case 28:
+          return _context.abrupt("return", null);
+        case 29:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function addToCartFunc(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+var getTierIdBasedOnSeatId = function getTierIdBasedOnSeatId(seatId, eventSeats) {
+  var tierId = '';
+  _forEach(eventSeats, function (group) {
+    _forEach(group.seats, function (seatsCount, rowId) {
+      var _seatId$split = seatId.split(':'),
+        row_id = _seatId$split[0],
+        seat_id = _seatId$split[1];
+      if (row_id === rowId && seat_id <= seatsCount) {
+        tierId = Number(group.tier_id);
+        return false;
+      }
+      return true;
+    });
+  });
+  return tierId;
+};
+var getButtonLabel = function getButtonLabel(count, tableMapEnabled) {
+  if (!count) {
+    return tableMapEnabled ? "GET TABLES" : "GET TICKETS";
+  } else if (count === 1) {
+    return tableMapEnabled ? "GET " + count + " TABLE" : "GET " + count + " TICKET";
+  }
+  return tableMapEnabled ? "GET " + count + " TABLES" : "GET " + count + " TICKETS";
+};
+var getOwnReservationsBasedOnStatuses = function getOwnReservationsBasedOnStatuses(statuses) {
+  var ownReservations = [];
+  Object.keys(statuses).forEach(function (groupRowId) {
+    return Object.keys(statuses[groupRowId]).forEach(function (seatIndex) {
+      if (statuses[groupRowId][seatIndex] === 'OR') {
+        ownReservations.push(groupRowId + ":" + seatIndex);
+      } else if (statuses[groupRowId][seatIndex] === 'H') {
+        statuses[groupRowId][seatIndex] = 'BLOCKED';
+      }
+    });
+  });
+  return ownReservations;
+};
+var getTicketDropdownData = function getTicketDropdownData(reservationData, tierReleations) {
+  var ticketsDropdownsData = [];
+  _forEach(reservationData, function (reservation) {
+    if (tierReleations[reservation.tierId]) {
+      var ticketsData = _values(tierReleations[reservation.tierId]);
+      ticketsDropdownsData.push({
+        seatId: reservation.seatId,
+        tierId: reservation.tierId,
+        ticketsData: ticketsData
+      });
+    } else {
+      ticketsDropdownsData.push({
+        seatId: reservation.seatId,
+        tierId: reservation.tierId,
+        ticketsData: [{
+          ticket_type_tier_id: reservation.tierId,
+          ticket_type_name: 'Please select Ticket Type',
+          ticket_type_price: '',
+          ticket_type_id: 'default'
+        }]
+      });
+    }
+  });
+  return ticketsDropdownsData;
+};
+var getAddToCartRequestData = function getAddToCartRequestData(_ref) {
+  var eventId = _ref.eventId,
+    _ref$reservations = _ref.reservations,
+    reservations = _ref$reservations === void 0 ? [] : _ref$reservations,
+    _ref$selectedSeats = _ref.selectedSeats,
+    selectedSeats = _ref$selectedSeats === void 0 ? [] : _ref$selectedSeats,
+    _ref$selectedTickets = _ref.selectedTickets,
+    selectedTickets = _ref$selectedTickets === void 0 ? [] : _ref$selectedTickets,
+    _ref$guestCounts = _ref.guestCounts,
+    guestCounts = _ref$guestCounts === void 0 ? {} : _ref$guestCounts;
+  var hasGuests = !_isEmpty(guestCounts);
+  var addToCartData = {
+    attributes: {
+      alternative_view_id: null,
+      product_cart_quantity: reservations.length,
+      product_options: {},
+      product_id: eventId,
+      ticket_types: {}
+    }
+  };
+  var productOptions = {};
+  var ticketTypes = {};
+  _forEach(reservations, function (item, index) {
+    var _ticketTypes$ticket$t, _product_options;
+    var ticket = _find(selectedSeats[item], function (sitem) {
+      return sitem.ticket_type_id === selectedTickets[item];
+    });
+    productOptions[ticket.ticket_type_option] = ticket.ticket_type_id;
+    var ticketTypesKey = hasGuests ? index : ticket.ticket_type_id;
+    var quantity = hasGuests ? guestCounts[item] : (((_ticketTypes$ticket$t = ticketTypes[ticket.ticket_type_id]) == null ? void 0 : _ticketTypes$ticket$t.quantity) || 0) + 1;
+    ticketTypes[ticketTypesKey] = {
+      quantity: quantity,
+      product_options: (_product_options = {}, _product_options[ticket.ticket_type_option] = ticket.ticket_type_id, _product_options.ticket_price = ticket.ticket_type_price, _product_options)
+    };
+  });
+  addToCartData.attributes.product_options = productOptions;
+  addToCartData.attributes.ticket_types = ticketTypes;
+  return addToCartData;
+};
+var getTierRelationsArray = function getTierRelationsArray(data) {
+  var ticketTypeTireRelationsArray = [];
+  _forEach(data, function (item) {
+    ticketTypeTireRelationsArray.push.apply(ticketTypeTireRelationsArray, _values(item));
+  });
+  return ticketTypeTireRelationsArray;
+};
+
+var CONTAINER_DEFAULT_ID = 'seat_map_default_container';
+var SeatMapComponent = function SeatMapComponent(props) {
+  var seatMapProps = props.seatMapProps,
+    mapContainerId = props.mapContainerId;
+  var seatData = seatMapProps.seatData,
+    statuses = seatMapProps.statuses,
+    _seatMapProps$seatMap = seatMapProps.seatMapType,
+    seatMapType = _seatMapProps$seatMap === void 0 ? null : _seatMapProps$seatMap,
+    _seatMapProps$seatMap2 = seatMapProps.seatMapEvents,
+    seatMapEvents = _seatMapProps$seatMap2 === void 0 ? {} : _seatMapProps$seatMap2,
+    _seatMapProps$ticketT = seatMapProps.ticketTypeTierRelations,
+    ticketTypeTierRelations = _seatMapProps$ticketT === void 0 ? {} : _seatMapProps$ticketT,
+    tierPrices = seatMapProps.tierPrices,
+    isReserving = seatMapProps.isReserving,
+    predefinedSeats = seatMapProps.predefinedSeats;
+  useEffect(function () {
+    var parentElement = document.getElementById(mapContainerId || CONTAINER_DEFAULT_ID);
+    // Temp solution
+    window.tierPrices = tierPrices;
+    if (Boolean(parentElement)) {
+      var mapComponent = React.createElement(SeatMapView, {
+        disabled: isReserving,
+        loading: isReserving,
+        events: seatMapEvents,
+        isSelectionOn: false,
+        seatData: seatData,
+        statuses: statuses,
+        ticketTypeTireRelationsArray: getTierRelationsArray(ticketTypeTierRelations),
+        width: Math.min((parentElement == null ? void 0 : parentElement.clientWidth) || 800, 800),
+        height: Math.min((parentElement == null ? void 0 : parentElement.clientWidth) || 800, 800),
+        isBlockMap: seatMapType === 'block',
+        isTableMap: seatMapType === 'table',
+        predefinedSeats: predefinedSeats
+      });
+      ReactDom.render(mapComponent, parentElement);
+    }
+  }, [isReserving, mapContainerId, seatData, seatMapEvents, seatMapType, tierPrices, statuses, ticketTypeTierRelations]);
+  return React.createElement("div", {
+    id: CONTAINER_DEFAULT_ID
+  });
+};
+
+var TicketsSection$1 = function TicketsSection(props) {
+  var ticketTypeTierRelations = props.ticketTypeTierRelations,
+    reservedSeats = props.reservedSeats,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'light' : _props$theme,
+    getTicketsBtnLabel = props.getTicketsBtnLabel,
+    _props$contentStyle = props.contentStyle,
+    contentStyle = _props$contentStyle === void 0 ? {} : _props$contentStyle,
+    _props$isButtonScroll = props.isButtonScrollable,
+    isButtonScrollable = _props$isButtonScroll === void 0 ? false : _props$isButtonScroll,
+    themeOptions = props.themeOptions,
+    handleGetTicketClick = props.handleGetTicketClick,
+    handleCancelReservation = props.handleCancelReservation,
+    _props$ticketDeleteBu = props.ticketDeleteButtonContent,
+    ticketDeleteButtonContent = _props$ticketDeleteBu === void 0 ? 'Delete' : _props$ticketDeleteBu,
+    selectedTickets = props.selectedTickets,
+    handleTicketSelect = props.handleTicketSelect,
+    currencySymbol = props.currencySymbol,
+    _props$tableMapEnable = props.tableMapEnabled,
+    tableMapEnabled = _props$tableMapEnable === void 0 ? false : _props$tableMapEnable,
+    guestCounts = props.guestCounts,
+    setGuestCounts = props.setGuestCounts,
+    isAddingToCart = props.isAddingToCart;
+  var bookButtonIsDisabled = _some(selectedTickets, function (item) {
+    return !item;
+  }) || _isEmpty(reservedSeats) || reservedSeats.length !== _keys(selectedTickets).length;
+  var themeMui = createTheme$1(themeOptions);
+  var ticketsDropdownsData = getTicketDropdownData(reservedSeats, ticketTypeTierRelations);
+  var handleTicketChange = function handleTicketChange(event, seatId) {
+    var value = event.target.value;
+    if (value !== 'default') {
+      handleTicketSelect(value, seatId);
+    }
+  };
+  return React.createElement(ThemeProvider$1, {
+    theme: themeMui
+  }, React.createElement("div", {
+    className: "get-tickets-page " + theme,
+    style: contentStyle
+  }, React.createElement("div", {
+    className: "tickets-section"
+  }, _map(selectedTickets, function (ticketItem, key) {
+    var dropdownData = _find(ticketsDropdownsData, function (item) {
+      return item.seatId === key;
+    }) || {};
+    var selectedTicketData = _find(dropdownData.ticketsData, function (ticket) {
+      return ticket.ticket_type_id === ticketItem;
+    });
+    // guest count dropdown options
+    var startNum = Number(selectedTicketData == null ? void 0 : selectedTicketData.ticket_type_min_number_of_guests);
+    var endNum = Number(selectedTicketData == null ? void 0 : selectedTicketData.ticket_type_max_number_of_guests);
+    var numLength = endNum - startNum + 1;
+    var showGuestCountDropdown = Boolean(startNum && endNum);
+    // prices
+    var guestPrice = (guestCounts[dropdownData.seatId] - startNum) * Number(selectedTicketData == null ? void 0 : selectedTicketData.guest_price);
+    var finalPrice = createFixedFloatNormalizer(2)((selectedTicketData == null ? void 0 : selectedTicketData.ticket_type_price) + guestPrice);
+    return React.createElement("div", {
+      className: "ticket",
+      key: key
+    }, React.createElement("div", {
+      className: "ticketsDropdowns"
+    }, React.createElement(Select$1, {
+      value: ticketItem || 'default',
+      onChange: function onChange(event) {
+        return handleTicketChange(event, dropdownData.seatId);
+      },
+      inputProps: {
+        'aria-label': 'Without label'
+      },
+      MenuProps: {
+        PaperProps: {
+          sx: {
+            maxHeight: 150
+          },
+          className: 'get-tickets-paper'
+        }
+      },
+      displayEmpty: true,
+      sx: {
+        borderRadius: 0
+      }
+    }, React.createElement(MenuItem, {
+      value: 'default'
+    }, "Please select " + (tableMapEnabled ? 'Table Type' : 'Ticket Type')), _map(dropdownData.ticketsData, function (option, index) {
+      if (option.ticket_type_id !== 'default') {
+        return React.createElement(MenuItem, {
+          value: option.ticket_type_id,
+          key: index
+        }, option.ticket_type_name);
+      }
+      return null;
+    })), React.createElement(Button$2, {
+      className: "ticket-delete",
+      onClick: function onClick() {
+        handleCancelReservation(dropdownData.seatId, dropdownData.tierId);
+      }
+    }, ticketDeleteButtonContent)), selectedTicketData && React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'row'
+      }
+    }, React.createElement("div", {
+      style: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center'
+      }
+    }, React.createElement("div", {
+      className: "ticketPrice"
+    }, "Price:", React.createElement("span", {
+      className: "ticketPrice-value"
+    }, currencySymbol + " " + finalPrice)), !_isEmpty(selectedTicketData.ticket_type_deposit) && React.createElement("div", {
+      className: "ticketDeposit"
+    }, "Deposit:", React.createElement("span", {
+      className: "ticketPrice-value"
+    }, " " + (selectedTicketData == null ? void 0 : selectedTicketData.ticket_type_deposit) + "%"))), showGuestCountDropdown && React.createElement("div", {
+      style: {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'end',
+        marginRight: 16
+      }
+    }, React.createElement(FormControl$1, {
+      variant: "outlined",
+      sx: {
+        m: 1,
+        minWidth: 80
+      }
+    }, React.createElement(InputLabel$1, {
+      id: "demo-simple-select-standard-label",
+      shrink: true
+    }, "GUESTS"), React.createElement(Select$1, {
+      label: "GUESTS",
+      labelId: "demo-simple-select-standard-label",
+      value: guestCounts[dropdownData.seatId] || startNum,
+      onChange: function onChange(event) {
+        var _extends2;
+        setGuestCounts(_extends({}, guestCounts, (_extends2 = {}, _extends2[dropdownData.seatId] = Number(event.target.value), _extends2)));
+      },
+      inputProps: {
+        'aria-label': 'Without label'
+      },
+      MenuProps: {
+        PaperProps: {
+          sx: {
+            maxHeight: 150
+          },
+          className: 'get-tickets-paper'
+        }
+      },
+      displayEmpty: true,
+      sx: {
+        borderRadius: 0
+      }
+    }, _map(Array.from({
+      length: numLength
+    }, function (_, i) {
+      return startNum + i;
+    }), function (option, index) {
+      return React.createElement(MenuItem, {
+        value: option,
+        key: index
+      }, option);
+    }))))));
+  })), React.createElement("div", null, React.createElement(Button$2, {
+    className: "book-button\n              " + (bookButtonIsDisabled ? 'disabled' : '') + "\n              " + (isButtonScrollable ? 'is-scrollable' : '') + "\n            ",
+    onClick: !bookButtonIsDisabled ? handleGetTicketClick : _identity,
+    disabled: isAddingToCart
+  }, isAddingToCart ? React.createElement(CircularProgress$1, {
+    size: 20,
+    style: {
+      marginLeft: 10
+    }
+  }) : getTicketsBtnLabel || getButtonLabel(reservedSeats.length, tableMapEnabled)))));
+};
+
+var SeatMapContainer = function SeatMapContainer(props) {
+  var _props$event = props.event,
+    eventId = _props$event.id,
+    symbol = _props$event.currency.symbol,
+    tableMapEnabled = _props$event.tableMapEnabled,
+    country = _props$event.country,
+    mapContainerId = props.mapContainerId,
+    _props$timerMessage = props.timerMessage,
+    timerMessage = _props$timerMessage === void 0 ? '' : _props$timerMessage,
+    _props$onAddToCartSuc = props.onAddToCartSuccess,
+    onAddToCartSuccess = _props$onAddToCartSuc === void 0 ? identity : _props$onAddToCartSuc,
+    _props$onCountdownFin = props.onCountdownFinish,
+    onCountdownFinish = _props$onCountdownFin === void 0 ? identity : _props$onCountdownFin,
+    ticketDeleteButtonContent = props.ticketDeleteButtonContent;
+  var _useState = useState({
+      seatMap: ''
+    }),
+    seatMapData = _useState[0],
+    setSeatMapData = _useState[1];
+  var eventSeatsRef = useRef([]);
+  var ticketTypeTierRelationsRef = useRef({});
+  var _useState2 = useState({}),
+    selectedTickets = _useState2[0],
+    setSelectedTickets = _useState2[1];
+  var _useState3 = useState(''),
+    seatMapStatuses = _useState3[0],
+    setSeatMapStatuses = _useState3[1];
+  var _useState4 = useState([]),
+    reservedSeats = _useState4[0],
+    setReservedSeats = _useState4[1];
+  var _useState5 = useState(false),
+    isReserving = _useState5[0],
+    setIsReserving = _useState5[1];
+  var _useState6 = useState(false),
+    isAddingToCart = _useState6[0],
+    setIsAddingToCart = _useState6[1];
+  var _useState7 = useState(null),
+    error = _useState7[0],
+    setError = _useState7[1];
+  var _useState8 = useState(Date.now() <= Number(localStorage.getItem("reservationStart-" + eventId))),
+    showTimer = _useState8[0],
+    setShowTimer = _useState8[1];
+  var _useState9 = useState({}),
+    guestCounts = _useState9[0],
+    setGuestCounts = _useState9[1];
+  var updateGuestCounts = function updateGuestCounts(data) {
+    _forEach(data, function (item) {
+      var tierTickets = ticketTypeTierRelationsRef.current[item.tierId];
+      var seatTicketsArray = _values(tierTickets);
+      setGuestCounts(function (prevState) {
+        var _extends2;
+        return _extends({}, prevState, (_extends2 = {}, _extends2[item.seatId] = Number(seatTicketsArray[0].ticket_type_min_number_of_guests), _extends2));
+      });
+    });
+  };
+  var fetchSeatMapData = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var seatMapDataResponse, _seatMapDataResponse$, seatData, ticketTypeTierRelations, eventSeats, seatReservationTime, seatMapType, tierPrices, predefinedSeats;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return getSeatMapData(eventId);
+        case 3:
+          seatMapDataResponse = _context.sent;
+          _seatMapDataResponse$ = seatMapDataResponse.data.attributes, seatData = _seatMapDataResponse$.seatData, ticketTypeTierRelations = _seatMapDataResponse$.ticketTypeTierRelations, eventSeats = _seatMapDataResponse$.eventSeats, seatReservationTime = _seatMapDataResponse$.seatReservationTime, seatMapType = _seatMapDataResponse$.seatMapType, tierPrices = _seatMapDataResponse$.tierPrices, predefinedSeats = _seatMapDataResponse$.predefinedSeats;
+          eventSeatsRef.current = eventSeats;
+          ticketTypeTierRelationsRef.current = ticketTypeTierRelations;
+          setSeatMapData({
+            seatMap: JSON.parse(seatData),
+            seatReservationTime: seatReservationTime,
+            seatMapType: seatMapType,
+            tierPrices: tierPrices,
+            predefinedSeats: predefinedSeats
+          });
+          _context.next = 13;
+          break;
+        case 10:
+          _context.prev = 10;
+          _context.t0 = _context["catch"](0);
+          setError('Something went wrong');
+        case 13:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 10]]);
+  })), [eventId]);
+  var fetchSeatMapReservations = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var statusesResponse, statuses, reservationData, ownReservations;
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          _context2.next = 3;
+          return getSeatMapStatuses(eventId);
+        case 3:
+          statusesResponse = _context2.sent;
+          statuses = _get(statusesResponse, 'data.attributes') || {};
+          reservationData = [];
+          ownReservations = getOwnReservationsBasedOnStatuses(statuses);
+          _forEach(ownReservations, function (reservation) {
+            var tierIdOfReservation = getTierIdBasedOnSeatId(reservation, eventSeatsRef.current);
+            reservationData.push({
+              seatId: reservation,
+              tierId: tierIdOfReservation,
+              type: 'reserve'
+            });
+          });
+          localStorage.setItem('reservationData', JSON.stringify(reservationData));
+          setSeatMapStatuses(statusesResponse.data.attributes);
+          setReservedSeats(reservationData);
+          // automatically set ticket/table type if it's the only one
+          if (ticketTypeTierRelationsRef.current) {
+            _forEach(reservationData, function (item) {
+              var tierTickets = ticketTypeTierRelationsRef.current[item.tierId];
+              var seatTicketsArray = _values(tierTickets);
+              setSelectedTickets(function (prevState) {
+                var _extends3;
+                return _extends({}, prevState, (_extends3 = {}, _extends3[item.seatId] = seatTicketsArray.length === 1 ? seatTicketsArray[0].ticket_type_id : '', _extends3));
+              });
+            });
+            if (_isEmpty(reservationData)) {
+              setGuestCounts({});
+              setSelectedTickets({});
+            }
+          }
+          _context2.next = 17;
+          break;
+        case 14:
+          _context2.prev = 14;
+          _context2.t0 = _context2["catch"](0);
+          setError('Something went wrong');
+        case 17:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[0, 14]]);
+  })), [eventId]);
+  var startTimer = useCallback(function (duration) {
+    setShowTimer(true);
+    if (!localStorage.getItem("reservationStart-" + eventId)) {
+      localStorage.setItem("reservationStart-" + eventId, String(Date.now() + duration));
+    }
+  }, []);
+  var endTimer = useCallback(function () {
+    localStorage.removeItem("reservationStart-" + eventId);
+    setShowTimer(false);
+  }, []);
+  var handleSeatReservation = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(eventId, tierId, seatId) {
+      var reservationData, relations, _keys2, firstItem;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            setIsReserving(true);
+            _context3.prev = 1;
+            _context3.next = 4;
+            return reserveSeat(eventId, tierId, seatId);
+          case 4:
+            _context3.next = 6;
+            return fetchSeatMapReservations();
+          case 6:
+            startTimer(seatMapData.seatReservationTime * 60000);
+            reservationData = JSON.parse(localStorage.getItem('reservationData') || '');
+            setReservedSeats(reservationData);
+            updateGuestCounts(reservationData);
+            // automatically set ticket/table type if it's the only one
+            relations = _keys(ticketTypeTierRelationsRef.current[tierId]);
+            _keys2 = _keys(ticketTypeTierRelationsRef.current[tierId]), firstItem = _keys2[0];
+            handleTicketSelect(relations.length === 1 ? firstItem : '', seatId);
+            _context3.next = 18;
+            break;
+          case 15:
+            _context3.prev = 15;
+            _context3.t0 = _context3["catch"](1);
+            setError('Something went wrong');
+          case 18:
+            _context3.prev = 18;
+            setIsReserving(false);
+            return _context3.finish(18);
+          case 21:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[1, 15, 18, 21]]);
+    }));
+    return function handleSeatReservation(_x, _x2, _x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var handleCancelSeatReservtion = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(eventId, tierId, seatId) {
+      var reservationData, currentSelectedTickets;
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            setIsReserving(true);
+            _context4.prev = 1;
+            _context4.next = 4;
+            return removeSeatReserve(eventId, tierId, [seatId]);
+          case 4:
+            _context4.next = 6;
+            return fetchSeatMapReservations();
+          case 6:
+            if (_isEmpty(JSON.parse(localStorage.getItem('reservationData')))) {
+              endTimer();
+            }
+            reservationData = JSON.parse(localStorage.getItem('reservationData') || '');
+            currentSelectedTickets = _extends({}, selectedTickets);
+            delete currentSelectedTickets[seatId];
+            setReservedSeats(reservationData);
+            setSelectedTickets(currentSelectedTickets);
+            _context4.next = 17;
+            break;
+          case 14:
+            _context4.prev = 14;
+            _context4.t0 = _context4["catch"](1);
+            setError('Something went wrong');
+          case 17:
+            _context4.prev = 17;
+            setIsReserving(false);
+            return _context4.finish(17);
+          case 20:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, null, [[1, 14, 17, 20]]);
+    }));
+    return function handleCancelSeatReservtion(_x4, _x5, _x6) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var onSeatClick = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(seatInfo) {
+      var _seatInfo$seat, tierId, seatId, status, reservationData;
+      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            _seatInfo$seat = seatInfo.seat, tierId = _seatInfo$seat.tierId, seatId = _seatInfo$seat.seatId, status = _seatInfo$seat.status;
+            reservationData = JSON.parse(localStorage.getItem('reservationData') || '[]');
+            if (!(status === 'B' || status === 'R' || status === 'BLOCKED' || status === 'RE')) {
+              _context5.next = 4;
+              break;
+            }
+            return _context5.abrupt("return");
+          case 4:
+            if (_find(reservationData, function (data) {
+              return data.seatId === seatId;
+            })) {
+              handleCancelSeatReservtion(eventId, tierId, seatId);
+            } else if (reservationData.length >= 10) {
+              setError('Limit exceeded');
+            } else {
+              handleSeatReservation(eventId, tierId, seatId);
+            }
+          case 5:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    return function onSeatClick(_x7) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var handleTicketSelect = function handleTicketSelect(ticketId, seatId) {
+    var currentSelectedTickets = _extends({}, selectedTickets);
+    currentSelectedTickets[seatId] = ticketId;
+    setSelectedTickets(currentSelectedTickets);
+  };
+  var handleGetTicketBtnClick = /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+      var ticketsDropdownsData, selectedSeats, addToCartData, _addToCartData$attrib, response, message;
+      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            setIsAddingToCart(true);
+            ticketsDropdownsData = getTicketDropdownData(reservedSeats, ticketTypeTierRelationsRef.current);
+            selectedSeats = {};
+            _forEach(ticketsDropdownsData, function (ticketData) {
+              var _extends4;
+              selectedSeats = _extends({}, selectedSeats, (_extends4 = {}, _extends4[ticketData.seatId] = ticketData.ticketsData, _extends4));
+            });
+            addToCartData = getAddToCartRequestData({
+              eventId: eventId,
+              reservations: _map(reservedSeats, function (seat) {
+                return seat.seatId;
+              }),
+              selectedSeats: selectedSeats,
+              selectedTickets: selectedTickets,
+              guestCounts: guestCounts
+            });
+            _context6.prev = 5;
+            _context6.next = 8;
+            return addToCartFunc({
+              eventId: eventId,
+              data: addToCartData,
+              ticketQuantity: addToCartData == null ? void 0 : (_addToCartData$attrib = addToCartData.attributes) == null ? void 0 : _addToCartData$attrib.product_cart_quantity
+            });
+          case 8:
+            response = _context6.sent;
+            localStorage.removeItem('reservationData');
+            onAddToCartSuccess(response);
+            _context6.next = 16;
+            break;
+          case 13:
+            _context6.prev = 13;
+            _context6.t0 = _context6["catch"](5);
+            if (axios.isAxiosError(_context6.t0)) {
+              message = _get(_context6.t0, 'response.data.message', '');
+              setError(message);
+            }
+          case 16:
+            _context6.prev = 16;
+            setIsAddingToCart(false);
+            return _context6.finish(16);
+          case 19:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6, null, [[5, 13, 16, 19]]);
+    }));
+    return function handleGetTicketBtnClick() {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    if (Date.now() > Number(localStorage.getItem("reservationStart-" + eventId))) {
+      setSelectedTickets({});
+      setReservedSeats([]);
+    }
+    var makeRequests = /*#__PURE__*/function () {
+      var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+        return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
+            case 0:
+              _context7.prev = 0;
+              _context7.next = 3;
+              return fetchSeatMapData();
+            case 3:
+              fetchSeatMapReservations();
+              _context7.next = 9;
+              break;
+            case 6:
+              _context7.prev = 6;
+              _context7.t0 = _context7["catch"](0);
+              setError('Something went wrong');
+            case 9:
+            case "end":
+              return _context7.stop();
+          }
+        }, _callee7, null, [[0, 6]]);
+      }));
+      return function makeRequests() {
+        return _ref7.apply(this, arguments);
+      };
+    }();
+    makeRequests();
+    if (country) {
+      localStorage.setItem('eventCountry', country);
+    }
+    var intervalId = setInterval(function () {
+      fetchSeatMapReservations();
+    }, 3000);
+    return function () {
+      clearInterval(intervalId);
+    };
+  }, [fetchSeatMapData, fetchSeatMapReservations]);
+  return React.createElement(React.Fragment, null, error && React.createElement(Alert, {
+    severity: "error",
+    onClose: function onClose() {
+      setError(null);
+    },
+    variant: "filled",
+    style: {
+      width: '350px'
+    }
+  }, error), showTimer && React.createElement(Countdown$1, {
+    date: moment$1(Number(localStorage.getItem("reservationStart-" + eventId))).valueOf(),
+    renderer: function renderer(props) {
+      return React.createElement("div", {
+        className: "reservation-countdown"
+      }, React.createElement("span", {
+        className: "reservation-message"
+      }, timerMessage), React.createElement("span", {
+        className: "reservation-timer"
+      }, showZero(props.minutes), ":", showZero(props.seconds)));
+    },
+    onComplete: function onComplete() {
+      endTimer();
+      setSelectedTickets({});
+      setReservedSeats([]);
+      if (onCountdownFinish) {
+        onCountdownFinish();
+      }
+    }
+  }), React.createElement(TicketsSection$1, {
+    selectedTickets: selectedTickets,
+    handleTicketSelect: handleTicketSelect,
+    handleCancelReservation: function handleCancelReservation(seatId, tireId) {
+      return handleCancelSeatReservtion(eventId, tireId, seatId);
+    },
+    handleGetTicketClick: handleGetTicketBtnClick,
+    isAddingToCart: isAddingToCart,
+    reservedSeats: reservedSeats,
+    ticketDeleteButtonContent: ticketDeleteButtonContent,
+    ticketTypeTierRelations: ticketTypeTierRelationsRef.current,
+    currencySymbol: symbol,
+    tableMapEnabled: Boolean(tableMapEnabled),
+    guestCounts: guestCounts,
+    setGuestCounts: setGuestCounts
+  }), seatMapData.seatMap && seatMapStatuses && React.createElement(SeatMapComponent, {
+    seatMapProps: {
+      seatData: seatMapData.seatMap,
+      statuses: seatMapStatuses,
+      tierPrices: seatMapData.tierPrices,
+      seatMapType: seatMapData.seatMapType,
+      ticketTypeTierRelations: ticketTypeTierRelationsRef.current,
+      seatMapEvents: {
+        onSeatClick: onSeatClick
+      },
+      isReserving: isReserving,
+      predefinedSeats: seatMapData.predefinedSeats
+    },
+    mapContainerId: mapContainerId
+  }));
+};
+
 /* eslint-disable max-len */
 var VERIFICATION_STATUSES = {
   PENDING: 'PENDING',
   APPROVED: 'APPROVED_VERIFIED',
-  FAILED: 'FAILED'
+  FAILED: 'FAILED',
+  WRONG_CUSTOMER: 'WRONG_CUSTOMER'
 };
 var VERIFICATION_MESSAGES = {
   PENDING: 'Your ID verification is currently being processed. We will notify you as soon as it is completed. Thank you for your patience.',
   APPROVED: 'Your ID verification is approved!',
-  FAILED: 'Unfortunately your ID verification has failed. Please try again.'
+  FAILED: 'Unfortunately your ID verification has failed. Please try again.',
+  WRONG_CUSTOMER: 'The order does not belong to the customer.'
 };
 
 var IDVerification = function IDVerification(props) {
@@ -7462,7 +8702,7 @@ var IDVerification = function IDVerification(props) {
     }),
     modalData = _useState5[0],
     setModalData = _useState5[1];
-  var isAccountVerifiedOrPending = verificationStatus === VERIFICATION_STATUSES.APPROVED || verificationStatus === VERIFICATION_STATUSES.PENDING;
+  var isAccountVerifiedOrPending = (verificationStatus === VERIFICATION_STATUSES.APPROVED || verificationStatus === VERIFICATION_STATUSES.PENDING) && verificationStatus !== VERIFICATION_STATUSES.WRONG_CUSTOMER;
   var handleClose = function handleClose() {
     setModalData({
       message: '',
@@ -7522,6 +8762,8 @@ var IDVerification = function IDVerification(props) {
     };
   }, []);
   useEffect(function () {
+    var intervalId = null;
+    var orderHash = getQueryVariable('order_hash') || '';
     var getUrl = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
         var urlResponse;
@@ -7592,17 +8834,81 @@ var IDVerification = function IDVerification(props) {
         return _ref3.apply(this, arguments);
       };
     }();
-    getUrl();
-    getVerificationStatus();
-    // Check the verification status every 30 seconds
-    var intervalId = setInterval(function () {
-      getVerificationStatus();
-    }, 10000);
+    var getCustomerOrderStatus = /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+        var customerOrderResponse;
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.prev = 0;
+              _context4.next = 3;
+              return checkCustomerOrder(orderHash);
+            case 3:
+              customerOrderResponse = _context4.sent;
+              return _context4.abrupt("return", customerOrderResponse);
+            case 7:
+              _context4.prev = 7;
+              _context4.t0 = _context4["catch"](0);
+              throw _context4.t0;
+            case 10:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, null, [[0, 7]]);
+      }));
+      return function getCustomerOrderStatus() {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+    var makeRequests = /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+        var _error$response, _error$response$data;
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              _context5.prev = 0;
+              if (!orderHash) {
+                _context5.next = 4;
+                break;
+              }
+              _context5.next = 4;
+              return getCustomerOrderStatus();
+            case 4:
+              getUrl();
+              getVerificationStatus();
+              // Check the verification status every 30 seconds
+              intervalId = setInterval(function () {
+                getVerificationStatus();
+              }, 10000);
+              _context5.next = 12;
+              break;
+            case 9:
+              _context5.prev = 9;
+              _context5.t0 = _context5["catch"](0);
+              if (((_error$response = _context5.t0.response) == null ? void 0 : (_error$response$data = _error$response.data) == null ? void 0 : _error$response$data.message) === VERIFICATION_MESSAGES.WRONG_CUSTOMER) {
+                setVerificationStatus(VERIFICATION_STATUSES.WRONG_CUSTOMER);
+                setModalData({
+                  displaModal: true,
+                  hideCancelBtn: true,
+                  message: VERIFICATION_MESSAGES.WRONG_CUSTOMER
+                });
+              }
+            case 12:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5, null, [[0, 9]]);
+      }));
+      return function makeRequests() {
+        return _ref5.apply(this, arguments);
+      };
+    }();
+    makeRequests();
     // Clear the interval when the component unmounts
     return function () {
       return clearInterval(intervalId);
     };
-  }, [verificationStatus]);
+  }, []);
   var iframe = function iframe(netverifyUrl) {
     // eslint-disable-next-line max-len
     var iframe = "<iframe allowFullScreen id=\"verificationIframe\" frameBorder=\"0\" width=\"100%\" height=\"570px\" allow=\"camera;fullscreen;accelerometer;gyroscope;magnetometer\" src=\"" + netverifyUrl + "\"></iframe>";
@@ -7824,5 +9130,5 @@ var RsvpContainer = function RsvpContainer(_ref) {
   }, "RSVP"))))))));
 };
 
-export { AddonsContainter, BillingInfoContainer, ConfirmationContainer, ForgotPasswordModal, IDVerification, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, PoweredBy, RedirectModal, ResetPasswordContainer, RsvpContainer, TicketResaleContainer, TicketsContainer, VERIFICATION_STATUSES, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
+export { AddonsContainter, BillingInfoContainer, ConfirmationContainer, ForgotPasswordModal, IDVerification, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, PoweredBy, RedirectModal, ResetPasswordContainer, RsvpContainer, SeatMapContainer, TicketResaleContainer, TicketsContainer, VERIFICATION_STATUSES, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
 //# sourceMappingURL=tf-checkout-react.esm.js.map