tf-checkout-react 1.6.6-beta.18 → 1.6.6-beta.19

package/dist/tf-checkout-react.cjs.development.js

@@ -28,6 +28,8 @@ var Countdown$1 = _interopDefault(require('react-countdown'));
 var SVG = _interopDefault(require('react-inlinesvg'));
 var _isNumber = _interopDefault(require('lodash/isNumber'));
 var _isNull = _interopDefault(require('lodash/isNull'));
+var _flatMapDeep = _interopDefault(require('lodash/flatMapDeep'));
+var _isArray = _interopDefault(require('lodash/isArray'));
 var Checkbox$1 = _interopDefault(require('@mui/material/Checkbox'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
@@ -53,8 +55,6 @@ var RadioGroup = _interopDefault(require('@mui/material/RadioGroup'));
 var _reverse = _interopDefault(require('lodash/reverse'));
 var _sortBy = _interopDefault(require('lodash/sortBy'));
 var Yup = require('yup');
-var _flatMapDeep = _interopDefault(require('lodash/flatMapDeep'));
-var _isArray = _interopDefault(require('lodash/isArray'));
 var Alert = _interopDefault(require('@mui/material/Alert'));
 var Container = _interopDefault(require('@mui/material/Container'));
 var reactStripeJs = require('@stripe/react-stripe-js');
@@ -808,6 +808,26 @@ var getDataWithCustomFields = function getDataWithCustomFields(initialData, tick
     ticketHoldersWithCustomFields: ticketHoldersWithCustomFields
   };
 };
+var getAddOnDataWithCustomFields = function getAddOnDataWithCustomFields(customFields) {
+  // Custom Fields are not specified case
+  if (_isEmpty(customFields)) {
+    return {
+      addOnDataWithCustomFields: {}
+    };
+  }
+  // Add Custom Fields for Order
+  var orderWithCustomFields = {
+    id: 1,
+    groupClassname: 'billing-info-container__customFields',
+    groupItems: [].concat(customFields.addOnFields)
+  };
+  var addOnDataWithCustomFields = {
+    fields: orderWithCustomFields
+  };
+  return {
+    addOnDataWithCustomFields: addOnDataWithCustomFields
+  };
+};
 var getFieldsKeys = function getFieldsKeys(customFields) {
   return _map(customFields, function (field) {
     return field.name;
@@ -940,19 +960,25 @@ var fieldDataAdapter = function fieldDataAdapter(field) {
 var customFieldsDataAdapter = function customFieldsDataAdapter(data) {
   var adaptedTicketFields = [];
   var adaptedOrderFields = [];
+  var adaptedAddOnFields = [];
   _forEach(data, function (field) {
     var ticketFields = _get(field, 'ticket.group.fields');
     var orderFields = _get(field, 'order.group.fields');
+    var addOnFields = _get(field, 'add-on.group.fields');
     _forEach(ticketFields, function (ticketField) {
       adaptedTicketFields.push(fieldDataAdapter(ticketField));
     });
     _forEach(orderFields, function (orderField) {
       adaptedOrderFields.push(fieldDataAdapter(orderField));
     });
+    _forEach(addOnFields, function (addOnField) {
+      adaptedAddOnFields.push(fieldDataAdapter(addOnField));
+    });
   });
   return {
     ticketsFields: adaptedTicketFields,
-    orderFields: adaptedOrderFields
+    orderFields: adaptedOrderFields,
+    addOnFields: adaptedAddOnFields
   };
 };
 
@@ -1264,14 +1290,14 @@ var getTickets = /*#__PURE__*/function () {
     return _ref2.apply(this, arguments);
   };
 }();
-var getCountries = /*#__PURE__*/function () {
-  var _ref3 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+var getTimeSlotsData = /*#__PURE__*/function () {
+  var _ref3 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(eventId) {
     var response;
     return _regeneratorRuntime().wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           _context3.next = 2;
-          return publicRequest.get('/countries/list');
+          return publicRequest.get("/event/" + eventId + "/time-slot-groups-dates/");
         case 2:
           response = _context3.sent;
           return _context3.abrupt("return", response.data);
@@ -1281,18 +1307,18 @@ var getCountries = /*#__PURE__*/function () {
       }
     }, _callee3);
   }));
-  return function getCountries() {
+  return function getTimeSlotsData(_x6) {
     return _ref3.apply(this, arguments);
   };
 }();
-var getStates = /*#__PURE__*/function () {
-  var _ref4 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(countryId) {
+var getCountries = /*#__PURE__*/function () {
+  var _ref4 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
     var response;
     return _regeneratorRuntime().wrap(function _callee4$(_context4) {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
           _context4.next = 2;
-          return publicRequest.get("/countries/" + countryId + "/states/");
+          return publicRequest.get('/countries/list');
         case 2:
           response = _context4.sent;
           return _context4.abrupt("return", response.data);
@@ -1302,18 +1328,18 @@ var getStates = /*#__PURE__*/function () {
       }
     }, _callee4);
   }));
-  return function getStates(_x6) {
+  return function getCountries() {
     return _ref4.apply(this, arguments);
   };
 }();
-var sendRSVPInfo = /*#__PURE__*/function () {
-  var _ref5 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(eventId, data) {
+var getStates = /*#__PURE__*/function () {
+  var _ref5 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(countryId) {
     var response;
     return _regeneratorRuntime().wrap(function _callee5$(_context5) {
       while (1) switch (_context5.prev = _context5.next) {
         case 0:
           _context5.next = 2;
-          return publicRequest.post("v1/event/" + eventId + "/send-rsvp-info", data);
+          return publicRequest.get("/countries/" + countryId + "/states/");
         case 2:
           response = _context5.sent;
           return _context5.abrupt("return", response.data);
@@ -1323,20 +1349,18 @@ var sendRSVPInfo = /*#__PURE__*/function () {
       }
     }, _callee5);
   }));
-  return function sendRSVPInfo(_x7, _x8) {
+  return function getStates(_x7) {
     return _ref5.apply(this, arguments);
   };
 }();
-var addToWaitingList = /*#__PURE__*/function () {
-  var _ref6 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(id, data) {
+var sendRSVPInfo = /*#__PURE__*/function () {
+  var _ref6 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(eventId, data) {
     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/" + id + "/add_to_waiting_list", {
-            data: data
-          });
+          return publicRequest.post("v1/event/" + eventId + "/send-rsvp-info", data);
         case 2:
           response = _context6.sent;
           return _context6.abrupt("return", response.data);
@@ -1346,19 +1370,19 @@ var addToWaitingList = /*#__PURE__*/function () {
       }
     }, _callee6);
   }));
-  return function addToWaitingList(_x9, _x10) {
+  return function sendRSVPInfo(_x8, _x9) {
     return _ref6.apply(this, arguments);
   };
 }();
-var postReferralVisits = /*#__PURE__*/function () {
-  var _ref7 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(eventId, referralId) {
+var addToWaitingList = /*#__PURE__*/function () {
+  var _ref7 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(id, data) {
     var response;
     return _regeneratorRuntime().wrap(function _callee7$(_context7) {
       while (1) switch (_context7.prev = _context7.next) {
         case 0:
           _context7.next = 2;
-          return publicRequest.post("v1/event/" + eventId + "/referrer/", {
-            referrer: "" + referralId
+          return publicRequest.post("v1/event/" + id + "/add_to_waiting_list", {
+            data: data
           });
         case 2:
           response = _context7.sent;
@@ -1369,18 +1393,20 @@ var postReferralVisits = /*#__PURE__*/function () {
       }
     }, _callee7);
   }));
-  return function postReferralVisits(_x11, _x12) {
+  return function addToWaitingList(_x10, _x11) {
     return _ref7.apply(this, arguments);
   };
 }();
-var validatePhoneNumber = /*#__PURE__*/function () {
-  var _ref8 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(phone) {
+var postReferralVisits = /*#__PURE__*/function () {
+  var _ref8 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(eventId, referralId) {
     var response;
     return _regeneratorRuntime().wrap(function _callee8$(_context8) {
       while (1) switch (_context8.prev = _context8.next) {
         case 0:
           _context8.next = 2;
-          return publicRequest.get("/v1/account/validate_phone?phone=" + phone);
+          return publicRequest.post("v1/event/" + eventId + "/referrer/", {
+            referrer: "" + referralId
+          });
         case 2:
           response = _context8.sent;
           return _context8.abrupt("return", response.data);
@@ -1390,10 +1416,31 @@ var validatePhoneNumber = /*#__PURE__*/function () {
       }
     }, _callee8);
   }));
-  return function validatePhoneNumber(_x13) {
+  return function postReferralVisits(_x12, _x13) {
     return _ref8.apply(this, arguments);
   };
 }();
+var validatePhoneNumber = /*#__PURE__*/function () {
+  var _ref9 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(phone) {
+    var response;
+    return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          _context9.next = 2;
+          return publicRequest.get("/v1/account/validate_phone?phone=" + phone);
+        case 2:
+          response = _context9.sent;
+          return _context9.abrupt("return", response.data);
+        case 4:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee9);
+  }));
+  return function validatePhoneNumber(_x14) {
+    return _ref9.apply(this, arguments);
+  };
+}();
 
 var getPaymentData = /*#__PURE__*/function () {
   var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(hash) {
@@ -2078,9 +2125,12 @@ var withCustomFields = function withCustomFields(Children) {
     var _useState4 = React.useState([]),
       customFieldsTicketHolderKeys = _useState4[0],
       setCustomFieldsTicketHolderKeys = _useState4[1];
+    var _useState5 = React.useState([]),
+      customFieldsAddOnKeys = _useState5[0],
+      setCustomFieldsAddOnKeys = _useState5[1];
     var getFields = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var eventId, customFields, orderFieldsKeys, ticketHoldersFieldsKeys;
+        var eventId, customFields, orderFieldsKeys, ticketHoldersFieldsKeys, addOnFieldsKeys;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -2092,25 +2142,27 @@ var withCustomFields = function withCustomFields(Children) {
               customFields = _context.sent;
               orderFieldsKeys = getFieldsKeys(_get(customFields, 'orderFields', []));
               ticketHoldersFieldsKeys = getFieldsKeys(_get(customFields, 'ticketsFields', []));
+              addOnFieldsKeys = getFieldsKeys(_get(customFields, 'addOnFields', []));
               setCustomFieldsTicketHolderKeys(ticketHoldersFieldsKeys);
               setCustomFieldsOrderKeys(orderFieldsKeys);
               setCustomFieldsData(customFields);
+              setCustomFieldsAddOnKeys(addOnFieldsKeys);
               onGetCustomFieldsSuccess(customFields);
-              _context.next = 16;
+              _context.next = 18;
               break;
-            case 13:
-              _context.prev = 13;
+            case 15:
+              _context.prev = 15;
               _context.t0 = _context["catch"](0);
               onGetCustomFieldsError(_context.t0);
-            case 16:
-              _context.prev = 16;
+            case 18:
+              _context.prev = 18;
               setLoading(false);
-              return _context.finish(16);
-            case 19:
+              return _context.finish(18);
+            case 21:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[0, 13, 16, 19]]);
+        }, _callee, null, [[0, 15, 18, 21]]);
       }));
       return function getFields() {
         return _ref.apply(this, arguments);
@@ -2124,6 +2176,8 @@ var withCustomFields = function withCustomFields(Children) {
     var _getDataWithCustomFie = getDataWithCustomFields(data, ticketHoldersFields, customFieldsData),
       dataWithCustomFields = _getDataWithCustomFie.dataWithCustomFields,
       ticketHoldersWithCustomFields = _getDataWithCustomFie.ticketHoldersWithCustomFields;
+    var _getAddOnDataWithCust = getAddOnDataWithCustomFields(customFieldsData),
+      addOnDataWithCustomFields = _getAddOnDataWithCust.addOnDataWithCustomFields;
     if (lodaing) {
       return React__default.createElement(material.CircularProgress, {
         size: 50
@@ -2133,7 +2187,9 @@ var withCustomFields = function withCustomFields(Children) {
       data: dataWithCustomFields,
       ticketHoldersFields: ticketHoldersWithCustomFields,
       customFieldsOrderKeys: customFieldsOrderKeys,
-      customFieldsTicketHolderKeys: customFieldsTicketHolderKeys
+      customFieldsTicketHolderKeys: customFieldsTicketHolderKeys,
+      customFieldsAddOnKeys: customFieldsAddOnKeys,
+      addOnDataWithCustomFields: addOnDataWithCustomFields
     }));
   };
 };
@@ -2515,6 +2571,44 @@ var cartAdapter = function cartAdapter(cart) {
   };
 };
 
+var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+var combineValidators = function combineValidators() {
+  for (var _len = arguments.length, validators = new Array(_len), _key = 0; _key < _len; _key++) {
+    validators[_key] = arguments[_key];
+  }
+  return function () {
+    for (var i = 0; i < validators.length; ++i) {
+      var error_message = validators[i].apply(validators, arguments);
+      if (error_message) return error_message;
+    }
+  };
+};
+function isFalsy(item) {
+  try {
+    if (!item ||
+    // handles most, like false, 0, null, etc
+    typeof item === 'object' && Object.keys(item).length === 0 &&
+    // for empty objects, like {}, []
+    !(typeof item.addEventListener === 'function') // omit webpage elements
+    ) {
+      return true;
+    }
+  } catch (err) {
+    return true;
+  }
+  return false;
+}
+var requiredValidator = function requiredValidator(value, message) {
+  var errorMessage = '';
+  if (isFalsy(typeof value === 'string' ? value.trim() : value)) {
+    errorMessage = message || 'Required';
+  }
+  return errorMessage;
+};
+var emailValidator = function emailValidator(email) {
+  return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
+};
+
 var CheckboxField = function CheckboxField(_ref) {
   var label = _ref.label,
     field = _ref.field,
@@ -3050,230 +3144,479 @@ var RadioGroupField = function RadioGroupField(_ref) {
   })));
 };
 
-var AddonComponent = function AddonComponent(_ref) {
-  var _ref$classNamePrefix = _ref.classNamePrefix,
-    classNamePrefix = _ref$classNamePrefix === void 0 ? '' : _ref$classNamePrefix,
-    data = _ref.data,
-    selectOptions = _ref.selectOptions,
-    _ref$handleAddonChang = _ref.handleAddonChange,
-    handleAddonChange = _ref$handleAddonChang === void 0 ? _identity : _ref$handleAddonChang;
-  var id = data.id,
-    name = data.name,
-    active = data.active,
-    stock = data.stock;
-  return React__default.createElement("div", {
-    key: id,
-    className: classNamePrefix + "_product_select_container"
-  }, React__default.createElement("div", {
-    className: classNamePrefix + "_product_select_block",
-    key: name
-  }, React__default.createElement("div", {
-    className: classNamePrefix + "_product_size"
-  }, name), React__default.createElement("div", {
-    className: classNamePrefix + "_product_qty_select_block"
-  }, !active || !_isNull(stock) && stock <= 0 ? React__default.createElement("div", {
-    className: "sold_out"
-  }, "SOLD OUT") : React__default.createElement("div", {
-    className: classNamePrefix + "_product_qty_select"
-  }, React__default.createElement(formik.Field, {
-    name: id,
-    selectOptions: selectOptions,
-    component: NativeSelectField,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      handleAddonChange(id, value);
-    }
-  })))));
-};
-
-var getNormalizedPrice = function getNormalizedPrice(value) {
-  var minimizedValue = Number(value) / 100;
-  var normalized = minimizedValue.toFixed(2);
-  return normalized;
-};
-
-var generateSelectOptions = function generateSelectOptions(minCount, maxCount) {
-  if (minCount === void 0) {
-    minCount = 1;
+var _excluded$3 = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
+var getInitialValues = function getInitialValues(data, propsInitialValues, userValues, ticketHoldersFields, ticketsQuantity) {
+  var _ticketHoldersFields, _ticketHoldersFields$, _ticketHoldersFields$2;
+  if (data === void 0) {
+    data = [];
   }
-  if (maxCount === void 0) {
-    maxCount = 10;
+  if (propsInitialValues === void 0) {
+    propsInitialValues = {};
   }
-  var options = [];
-  for (var i = minCount; i <= maxCount; i++) {
-    options.push({
-      label: i,
-      value: i
-    });
+  if (userValues === void 0) {
+    userValues = {};
   }
-  return options;
-};
-var generateStockBasedOnLimitations = function generateStockBasedOnLimitations(addon, ticketQuantity) {
-  // Generate addon available stock count based on limitations
-  var flagLimitToTicketQuantity = addon.flagLimitToTicketQuantity,
-    maxQuantity = addon.maxQuantity,
-    limitPerTicket = addon.limitPerTicket;
-  var allowedStockCount;
-  // Generate stock
-  if (flagLimitToTicketQuantity) {
-    // Limited to ticket quantity case
-    allowedStockCount = ticketQuantity;
-  } else if (maxQuantity && limitPerTicket) {
-    var stockBasedOnLimitPerTicket = limitPerTicket * ticketQuantity;
-    // Both maximum quantity and limited to per ticket selected case, stock is minimum of them
-    allowedStockCount = maxQuantity <= stockBasedOnLimitPerTicket ? maxQuantity : stockBasedOnLimitPerTicket;
-  } else if (maxQuantity && !limitPerTicket) {
-    // Limited to maximum quantity case
-    allowedStockCount = maxQuantity;
-  } else if (!maxQuantity && limitPerTicket) {
-    // Limited to per ticket case
-    allowedStockCount = limitPerTicket * ticketQuantity;
+  if (ticketHoldersFields === void 0) {
+    ticketHoldersFields = {};
   }
-  return Number(allowedStockCount);
-};
-var filterStockBasedOnAvailability = function filterStockBasedOnAvailability(generatedStock, availableStock) {
-  //  Check generated stock count admissibility with addon stock availability
-  var filteredStockCount = generatedStock;
-  if (generatedStock) {
-    if (generatedStock > availableStock && !_isNull(availableStock)) {
-      filteredStockCount = availableStock;
-    }
-  } else {
-    // Not set any restriction
-    // Here 10 value is business logic
-    filteredStockCount = 10;
-    if (!_isNull(availableStock) && availableStock < filteredStockCount) {
-      filteredStockCount = availableStock;
+  if (ticketsQuantity === void 0) {
+    ticketsQuantity = [];
+  }
+  var results = _flatMapDeep(data, function (_ref) {
+    var fields = _ref.fields;
+    return _map(fields, function (_ref2) {
+      var groupItems = _ref2.groupItems;
+      return _map(groupItems, function (_ref3) {
+        var name = _ref3.name,
+          value = _ref3.value;
+        return {
+          name: name,
+          value: value
+        };
+      });
+    });
+  });
+  // Add Ticket Holder default values for custom fields
+  var ticketHoldersCustomFields = ((_ticketHoldersFields = ticketHoldersFields) == null ? void 0 : (_ticketHoldersFields$ = _ticketHoldersFields.fields) == null ? void 0 : (_ticketHoldersFields$2 = _ticketHoldersFields$.find(function (groupItem) {
+    return groupItem.customFields;
+  })) == null ? void 0 : _ticketHoldersFields$2.groupItems) || [];
+  var ticketHoldersCustomFieldsInitValues = {};
+  var selectedTicketsCount = ticketsQuantity.length || localStorage.getItem('selectedTicketsQuantity') || 0;
+  if (!_isEmpty(ticketHoldersCustomFields)) {
+    for (var _iterator = _createForOfIteratorHelperLoose(ticketHoldersCustomFields), _step; !(_step = _iterator()).done;) {
+      var customField = _step.value;
+      for (var i = 0; i < selectedTicketsCount; i++) {
+        var fieldName = customField.name + "-" + i;
+        var fieldValue = customField.value;
+        ticketHoldersCustomFieldsInitValues[fieldName] = fieldValue;
+      }
     }
   }
-  return filteredStockCount;
-};
-var getAddonSelectOptions = function getAddonSelectOptions(addons, choosedTicketCount) {
-  var addonsWithOptions = {};
-  var groupsWithSelectedVariantsInfo = {};
-  var groupsWithVariants = {};
-  addons.forEach(function (addon) {
-    // Here addon can act either as simple Addon or Addon Group
-    var id = addon.id,
-      simpleAddonStock = addon.stock,
-      variants = addon.variants,
-      active = addon.active,
-      flagLimitToTicketQuantity = addon.flagLimitToTicketQuantity,
-      maxQuantity = addon.maxQuantity,
-      limitPerTicket = addon.limitPerTicket;
-    if (variants) {
-      // Addon Group with inside addon variants case
-      variants.forEach(function (variant) {
-        var variantId = variant.id,
-          variantStock = variant.stock;
-        // null checking is for unlimited stock value
-        if (active && (variantStock > 0 || _isNull(variantStock))) {
-          var _extends3;
-          // Generate Addon Group allowed stock count based on limitations
-          var stockBasedOnLimitation = generateStockBasedOnLimitations(addon, choosedTicketCount);
-          // Detect if group has limitation or not
-          if (flagLimitToTicketQuantity || maxQuantity || limitPerTicket) {
-            // Generate Group with inside variants info
-            if (groupsWithSelectedVariantsInfo[id]) {
-              var _extends2;
-              // Set group limit
-              if (groupsWithSelectedVariantsInfo[id].limit < stockBasedOnLimitation) {
-                groupsWithSelectedVariantsInfo[id].limit = stockBasedOnLimitation;
-              }
-              // Set choosed variants info
-              groupsWithSelectedVariantsInfo[id] = _extends({}, groupsWithSelectedVariantsInfo[id], {
-                choosedVariants: _extends({}, groupsWithSelectedVariantsInfo[id].choosedVariants, (_extends2 = {}, _extends2[variantId] = 0, _extends2))
-              });
-            } else {
-              var _choosedVariants;
-              groupsWithSelectedVariantsInfo[id] = {
-                limit: stockBasedOnLimitation,
-                selectedCount: 0,
-                choosedVariants: (_choosedVariants = {}, _choosedVariants[variantId] = 0, _choosedVariants)
-              };
-            }
-          }
-          // Check stock admissibility with addon stock availability
-          var allowedVariantStockCount = filterStockBasedOnAvailability(stockBasedOnLimitation, variantStock);
-          // Generate options for variant
-          var variantOptions = generateSelectOptions(0, allowedVariantStockCount);
-          addonsWithOptions[variantId] = [].concat(variantOptions);
-          // Generate Group with its variants list
-          groupsWithVariants[id] = _extends({}, groupsWithVariants[id], (_extends3 = {}, _extends3[variantId] = allowedVariantStockCount, _extends3));
-        }
-      });
-    } else {
-      // Simple addon case, null checking is for unlimited stock value
-      if (active && (simpleAddonStock > 0 || _isNull(simpleAddonStock))) {
-        // Generate Addon Group allowed stock count based on limitations
-        var stockBasedOnLimitation = generateStockBasedOnLimitations(addon, choosedTicketCount);
-        // Check stock admissibility with addon stock availability
-        var allowedVariantStockCount = filterStockBasedOnAvailability(stockBasedOnLimitation, simpleAddonStock);
-        var addonOptions = generateSelectOptions(0, allowedVariantStockCount);
-        addonsWithOptions[id] = [].concat(addonOptions);
-      }
-    }
+  var initialValues = {};
+  _forEach(results, function (groupItem) {
+    var name = groupItem.name,
+      value = groupItem.value;
+    initialValues[name] = value || propsInitialValues[name] || userValues[name] || '';
   });
-  return {
-    addonsWithOptions: addonsWithOptions,
-    groupsWithSelectedVariantsInfo: groupsWithSelectedVariantsInfo,
-    groupsWithVariants: groupsWithVariants
-  };
+  // set logged in user as first ticket holder
+  initialValues['holderFirstName-0'] = propsInitialValues.firstName || userValues.firstName || '';
+  initialValues['holderLastName-0'] = propsInitialValues.lastName || userValues.lastName || '';
+  initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || '';
+  return _extends({}, initialValues, ticketHoldersCustomFieldsInitValues);
 };
-var getTicketRelatedAddons = function getTicketRelatedAddons(addons, ticketId) {
-  // Filter addons based on choosed ticket
-  var filteredAddons = addons.filter(function (addon) {
-    return _isNull(addon.prerequisiteTicketTypeIds) || addon.prerequisiteTicketTypeIds.includes(ticketId);
+var createRegisterFormData = function createRegisterFormData(values, checkoutBody, flagFreeTicket) {
+  if (values === void 0) {
+    values = {};
+  }
+  if (flagFreeTicket === void 0) {
+    flagFreeTicket = false;
+  }
+  var bodyFormData = new FormData();
+  bodyFormData.append('first_name', values.firstName);
+  bodyFormData.append('last_name', values.lastName);
+  bodyFormData.append('email', values.email);
+  bodyFormData.append('password', values.password);
+  bodyFormData.append('password_confirmation', values.confirmPassword);
+  bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
+  bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
+  bodyFormData.append('check_cart_expiration', 'true');
+  _forEach(checkoutBody.attributes, function (item, key) {
+    if (!(flagFreeTicket && ['country', 'state', 'city', 'street_address'].includes(key))) {
+      bodyFormData.append(key, item);
+    }
   });
-  return filteredAddons;
+  return bodyFormData;
 };
-var getSortedAddons = function getSortedAddons(addons, sortDirection) {
-  if (sortDirection === void 0) {
-    sortDirection = 'asc';
+var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, values, logedInValues, includeDob) {
+  if (values === void 0) {
+    values = {};
   }
-  var addonsCopy = [].concat(addons);
-  addonsCopy.forEach(function (addon) {
-    if (addon.variants) {
-      var unsortedVariants = [];
-      addon.variants.forEach(function (variant) {
-        unsortedVariants.push(_extends({}, variant, {
-          sortOrder: Number(variant.sortOrder)
-        }));
-      });
-      addon.sortOrder = Number(addon.variants[0].sortOrder);
-      var sortedVariants = _sortBy(unsortedVariants, function (variant) {
-        return variant.sortOrder;
-      });
-      addon.variants = sortedVariants;
-    } else {
-      addon.sortOrder = Number(addon.sortOrder);
+  if (logedInValues === void 0) {
+    logedInValues = {};
+  }
+  if (includeDob === void 0) {
+    includeDob = false;
+  }
+  var _values = values,
+    firstName = _values.firstName,
+    lastName = _values.lastName,
+    holderAge = _values.holderAge,
+    restValues = _objectWithoutPropertiesLoose(_values, _excluded$3);
+  var holders = [];
+  var ticket_holders = [];
+  var _loop = function _loop(i) {
+    var individualHolder = Object.fromEntries(Object.entries(values).filter(function (_ref4) {
+      var key = _ref4[0];
+      return key.includes(String(i));
+    }));
+    holders.push(individualHolder);
+  };
+  for (var i = 0; i <= ticketsQuantity; i++) {
+    _loop(i);
+  }
+  var filteredHolders = holders.filter(function (holder) {
+    return Object.entries(holder).length > 0;
+  });
+  ticket_holders = filteredHolders.map(function (item, index) {
+    return {
+      first_name: !index ? item["holderFirstName-" + index] || logedInValues.firstNameLogged || '' : item["holderFirstName-" + index] || '',
+      last_name: !index ? item["holderLastName-" + index] || logedInValues.lastNameLogged || '' : item["holderLastName-" + index] || '',
+      phone: item["holderPhone-" + index] || '',
+      email: !index ? item["holderEmail-" + index] || logedInValues.emailLogged || '' : item["holderEmail-" + index] || ''
+    };
+  });
+  var filteredRestValue = {};
+  _forEach(restValues, function (value, key) {
+    if (!key.includes('holder')) {
+      filteredRestValue[key] = value;
     }
   });
-  var sortedAddons = _sortBy(addonsCopy, function (addon) {
-    return addon.sortOrder;
+  var body = {
+    attributes: _extends({}, filteredRestValue, {
+      email: restValues.email || logedInValues.emailLogged,
+      confirm_email: restValues.email || logedInValues.emailLogged,
+      first_name: firstName || logedInValues.firstNameLogged,
+      last_name: lastName || logedInValues.lastNameLogged,
+      ticket_holders: ticket_holders
+    })
+  };
+  if (includeDob) {
+    var holderAgeDate = new Date(holderAge);
+    body.attributes.dob_day = holderAgeDate.getDate();
+    body.attributes.dob_month = holderAgeDate.getMonth() + 1;
+    body.attributes.dob_year = holderAgeDate.getFullYear();
+  }
+  return body;
+};
+var getValidateFunctions = function getValidateFunctions(element, states, values, errors) {
+  var validationFunctions = [];
+  if (element.required) {
+    if (element.name !== 'state' || element.name === 'state' && states.length) {
+      validationFunctions.push(requiredValidator);
+    }
+  }
+  if (element.onValidate) {
+    validationFunctions.push(element.onValidate);
+  }
+  if (element.name === 'phone') {
+    var invalidPhone = function invalidPhone() {
+      return errors.phone === 'Invalid phone number' ? 'Invalid phone number' : null;
+    };
+    validationFunctions.push(invalidPhone);
+  }
+  if (element.name === 'confirmEmail') {
+    var isSameEmail = function isSameEmail(confirmEmail) {
+      return values.email !== confirmEmail ? 'Please confirm your email address correctly' : null;
+    };
+    validationFunctions.push(isSameEmail);
+  }
+  if (element.name === 'confirmPassword') {
+    var isSame = function isSame(confirmPassword) {
+      return values.password !== confirmPassword ? 'Password confirmation does not match' : null;
+    };
+    validationFunctions.push(isSame);
+  }
+  return combineValidators.apply(void 0, validationFunctions);
+};
+var assingUniqueIds = function assingUniqueIds(data) {
+  if (_get(data[0], 'uniqueId')) {
+    return data;
+  }
+  return _map(data, function (item) {
+    _forEach(item, function (itemValue, key) {
+      if (_isArray(itemValue) && !itemValue.some(function (item) {
+        return typeof item === 'string';
+      })) {
+        item[key] = assingUniqueIds(itemValue);
+      }
+    });
+    return _extends({}, item, {
+      uniqueId: nanoid.nanoid()
+    });
   });
-  if (sortDirection === 'desc') {
-    return _reverse(sortedAddons);
+};
+var isRequiredField = function isRequiredField(element, configs) {
+  var name = element.name,
+    required = element.required;
+  var flagRequirePhone = _get(configs, 'phone_required', false);
+  var collectMandatoryWalletAddress = _get(configs, 'collect_mandatory_wallet_address', false);
+  if (required || name === 'phone' && flagRequirePhone || name === 'data_capture[wallet_address]' && !collectMandatoryWalletAddress) {
+    return true;
   }
-  return sortedAddons;
+  return false;
 };
-var isAtLeastOneAddonSelected = function isAtLeastOneAddonSelected(value) {
-  var selectedAddons = Object.fromEntries(Object.entries(value).filter(function (_ref) {
-    var count = _ref[1];
-    return Number(count) !== 0;
-  }));
-  return !_isEmpty(selectedAddons);
+var getFieldLabel = function getFieldLabel(element, configs) {
+  if (isRequiredField(element, configs) || React__default.isValidElement(element.label)) {
+    return element.label;
+  }
+  return element.label + " (optional)";
 };
-
-var AddonsContainter = function AddonsContainter(_ref) {
-  var _ref$classNamePrefix = _ref.classNamePrefix,
-    classNamePrefix = _ref$classNamePrefix === void 0 ? 'add_on' : _ref$classNamePrefix,
-    _ref$enableBillingInf = _ref.enableBillingInfoAutoCreate,
-    enableBillingInfoAutoCreate = _ref$enableBillingInf === void 0 ? true : _ref$enableBillingInf,
-    _ref$enableTimer = _ref.enableTimer,
-    enableTimer = _ref$enableTimer === void 0 ? false : _ref$enableTimer,
-    _ref$onGetAddonsPageI = _ref.onGetAddonsPageInfoSuccess,
-    onGetAddonsPageInfoSuccess = _ref$onGetAddonsPageI === void 0 ? _identity : _ref$onGetAddonsPageI,
+var getFieldComponent = function getFieldComponent(element) {
+  var type = _get(element, 'type', 'text');
+  var fieldComponentConfigs = {
+    checkbox: CheckboxField,
+    select: CustomField,
+    select_multi: SelectField,
+    phone: PhoneNumberField,
+    date: DatePickerField,
+    radio: RadioGroupField,
+    text: CustomField
+  };
+  var fieldComponent = _get(fieldComponentConfigs, type, CustomField);
+  return fieldComponent;
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var AddonComponent = function AddonComponent(_ref) {
+  var _ref$classNamePrefix = _ref.classNamePrefix,
+    classNamePrefix = _ref$classNamePrefix === void 0 ? '' : _ref$classNamePrefix,
+    data = _ref.data,
+    selectOptions = _ref.selectOptions,
+    _ref$handleAddonChang = _ref.handleAddonChange,
+    handleAddonChange = _ref$handleAddonChang === void 0 ? _identity : _ref$handleAddonChang,
+    addOnDataWithCustomFields = _ref.addOnDataWithCustomFields,
+    configs = _ref.configs,
+    values = _ref.values,
+    errors = _ref.errors;
+  var id = data.id,
+    name = data.name,
+    active = data.active,
+    stock = data.stock;
+  return React__default.createElement("div", {
+    key: id,
+    className: classNamePrefix + "_product_select_container"
+  }, React__default.createElement("div", {
+    className: classNamePrefix + "_product_select_block",
+    key: name
+  }, React__default.createElement("div", {
+    className: classNamePrefix + "_product_size"
+  }, name), React__default.createElement("div", {
+    className: classNamePrefix + "_product_qty_select_block"
+  }, !active || !_isNull(stock) && stock <= 0 ? React__default.createElement("div", {
+    className: "sold_out"
+  }, "SOLD OUT") : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: classNamePrefix + "_product_qty_select"
+  }, React__default.createElement(formik.Field, {
+    name: id,
+    selectOptions: selectOptions,
+    component: NativeSelectField,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      handleAddonChange(id, value);
+    }
+  })), !_isEmpty(addOnDataWithCustomFields == null ? void 0 : addOnDataWithCustomFields.fields) && React__default.createElement("div", {
+    className: "ticket-holders-fields"
+  }, React__default.createElement("h2", null, addOnDataWithCustomFields.label), _map(addOnDataWithCustomFields.fields, function (group) {
+    var id = group.id,
+      groupClassname = group.groupClassname,
+      groupItems = group.groupItems;
+    return React__default.createElement("div", {
+      key: id
+    }, React__default.createElement("div", {
+      className: groupClassname
+    }, _map(groupItems, function (element) {
+      return React__default.createElement("div", {
+        className: element.className,
+        key: element.name
+      }, React__default.createElement(formik.Field, Object.assign({}, element, {
+        type: element.type === 'radio' || element.type === 'checkbox' ? undefined : element.type,
+        name: "" + element.name,
+        label: getFieldLabel(element, configs),
+        component: getFieldComponent(element),
+        validate: getValidateFunctions(element, [], values, errors)
+      })));
+    })));
+  }))))));
+};
+
+var getNormalizedPrice = function getNormalizedPrice(value) {
+  var minimizedValue = Number(value) / 100;
+  var normalized = minimizedValue.toFixed(2);
+  return normalized;
+};
+
+var generateSelectOptions = function generateSelectOptions(minCount, maxCount) {
+  if (minCount === void 0) {
+    minCount = 1;
+  }
+  if (maxCount === void 0) {
+    maxCount = 10;
+  }
+  var options = [];
+  for (var i = minCount; i <= maxCount; i++) {
+    options.push({
+      label: i,
+      value: i
+    });
+  }
+  return options;
+};
+var generateStockBasedOnLimitations = function generateStockBasedOnLimitations(addon, ticketQuantity) {
+  // Generate addon available stock count based on limitations
+  var flagLimitToTicketQuantity = addon.flagLimitToTicketQuantity,
+    maxQuantity = addon.maxQuantity,
+    limitPerTicket = addon.limitPerTicket;
+  var allowedStockCount;
+  // Generate stock
+  if (flagLimitToTicketQuantity) {
+    // Limited to ticket quantity case
+    allowedStockCount = ticketQuantity;
+  } else if (maxQuantity && limitPerTicket) {
+    var stockBasedOnLimitPerTicket = limitPerTicket * ticketQuantity;
+    // Both maximum quantity and limited to per ticket selected case, stock is minimum of them
+    allowedStockCount = maxQuantity <= stockBasedOnLimitPerTicket ? maxQuantity : stockBasedOnLimitPerTicket;
+  } else if (maxQuantity && !limitPerTicket) {
+    // Limited to maximum quantity case
+    allowedStockCount = maxQuantity;
+  } else if (!maxQuantity && limitPerTicket) {
+    // Limited to per ticket case
+    allowedStockCount = limitPerTicket * ticketQuantity;
+  }
+  return Number(allowedStockCount);
+};
+var filterStockBasedOnAvailability = function filterStockBasedOnAvailability(generatedStock, availableStock) {
+  //  Check generated stock count admissibility with addon stock availability
+  var filteredStockCount = generatedStock;
+  if (generatedStock) {
+    if (generatedStock > availableStock && !_isNull(availableStock)) {
+      filteredStockCount = availableStock;
+    }
+  } else {
+    // Not set any restriction
+    // Here 10 value is business logic
+    filteredStockCount = 10;
+    if (!_isNull(availableStock) && availableStock < filteredStockCount) {
+      filteredStockCount = availableStock;
+    }
+  }
+  return filteredStockCount;
+};
+var getAddonSelectOptions = function getAddonSelectOptions(addons, choosedTicketCount) {
+  var addonsWithOptions = {};
+  var groupsWithSelectedVariantsInfo = {};
+  var groupsWithVariants = {};
+  addons.forEach(function (addon) {
+    // Here addon can act either as simple Addon or Addon Group
+    var id = addon.id,
+      simpleAddonStock = addon.stock,
+      variants = addon.variants,
+      active = addon.active,
+      flagLimitToTicketQuantity = addon.flagLimitToTicketQuantity,
+      maxQuantity = addon.maxQuantity,
+      limitPerTicket = addon.limitPerTicket;
+    if (variants) {
+      // Addon Group with inside addon variants case
+      variants.forEach(function (variant) {
+        var variantId = variant.id,
+          variantStock = variant.stock;
+        // null checking is for unlimited stock value
+        if (active && (variantStock > 0 || _isNull(variantStock))) {
+          var _extends3;
+          // Generate Addon Group allowed stock count based on limitations
+          var stockBasedOnLimitation = generateStockBasedOnLimitations(addon, choosedTicketCount);
+          // Detect if group has limitation or not
+          if (flagLimitToTicketQuantity || maxQuantity || limitPerTicket) {
+            // Generate Group with inside variants info
+            if (groupsWithSelectedVariantsInfo[id]) {
+              var _extends2;
+              // Set group limit
+              if (groupsWithSelectedVariantsInfo[id].limit < stockBasedOnLimitation) {
+                groupsWithSelectedVariantsInfo[id].limit = stockBasedOnLimitation;
+              }
+              // Set choosed variants info
+              groupsWithSelectedVariantsInfo[id] = _extends({}, groupsWithSelectedVariantsInfo[id], {
+                choosedVariants: _extends({}, groupsWithSelectedVariantsInfo[id].choosedVariants, (_extends2 = {}, _extends2[variantId] = 0, _extends2))
+              });
+            } else {
+              var _choosedVariants;
+              groupsWithSelectedVariantsInfo[id] = {
+                limit: stockBasedOnLimitation,
+                selectedCount: 0,
+                choosedVariants: (_choosedVariants = {}, _choosedVariants[variantId] = 0, _choosedVariants)
+              };
+            }
+          }
+          // Check stock admissibility with addon stock availability
+          var allowedVariantStockCount = filterStockBasedOnAvailability(stockBasedOnLimitation, variantStock);
+          // Generate options for variant
+          var variantOptions = generateSelectOptions(0, allowedVariantStockCount);
+          addonsWithOptions[variantId] = [].concat(variantOptions);
+          // Generate Group with its variants list
+          groupsWithVariants[id] = _extends({}, groupsWithVariants[id], (_extends3 = {}, _extends3[variantId] = allowedVariantStockCount, _extends3));
+        }
+      });
+    } else {
+      // Simple addon case, null checking is for unlimited stock value
+      if (active && (simpleAddonStock > 0 || _isNull(simpleAddonStock))) {
+        // Generate Addon Group allowed stock count based on limitations
+        var stockBasedOnLimitation = generateStockBasedOnLimitations(addon, choosedTicketCount);
+        // Check stock admissibility with addon stock availability
+        var allowedVariantStockCount = filterStockBasedOnAvailability(stockBasedOnLimitation, simpleAddonStock);
+        var addonOptions = generateSelectOptions(0, allowedVariantStockCount);
+        addonsWithOptions[id] = [].concat(addonOptions);
+      }
+    }
+  });
+  return {
+    addonsWithOptions: addonsWithOptions,
+    groupsWithSelectedVariantsInfo: groupsWithSelectedVariantsInfo,
+    groupsWithVariants: groupsWithVariants
+  };
+};
+var getTicketRelatedAddons = function getTicketRelatedAddons(addons, ticketId) {
+  // Filter addons based on choosed ticket
+  var filteredAddons = addons.filter(function (addon) {
+    return _isNull(addon.prerequisiteTicketTypeIds) || addon.prerequisiteTicketTypeIds.includes(ticketId);
+  });
+  return filteredAddons;
+};
+var getSortedAddons = function getSortedAddons(addons, sortDirection) {
+  if (sortDirection === void 0) {
+    sortDirection = 'asc';
+  }
+  var addonsCopy = [].concat(addons);
+  addonsCopy.forEach(function (addon) {
+    if (addon.variants) {
+      var unsortedVariants = [];
+      addon.variants.forEach(function (variant) {
+        unsortedVariants.push(_extends({}, variant, {
+          sortOrder: Number(variant.sortOrder)
+        }));
+      });
+      addon.sortOrder = Number(addon.variants[0].sortOrder);
+      var sortedVariants = _sortBy(unsortedVariants, function (variant) {
+        return variant.sortOrder;
+      });
+      addon.variants = sortedVariants;
+    } else {
+      addon.sortOrder = Number(addon.sortOrder);
+    }
+  });
+  var sortedAddons = _sortBy(addonsCopy, function (addon) {
+    return addon.sortOrder;
+  });
+  if (sortDirection === 'desc') {
+    return _reverse(sortedAddons);
+  }
+  return sortedAddons;
+};
+var isAtLeastOneAddonSelected = function isAtLeastOneAddonSelected(value) {
+  var selectedAddons = Object.fromEntries(Object.entries(value).filter(function (_ref) {
+    var count = _ref[1];
+    return Number(count) !== 0;
+  }));
+  return !_isEmpty(selectedAddons);
+};
+
+var AddonsContainter = function AddonsContainter(_ref) {
+  var _ref$classNamePrefix = _ref.classNamePrefix,
+    classNamePrefix = _ref$classNamePrefix === void 0 ? 'add_on' : _ref$classNamePrefix,
+    _ref$enableBillingInf = _ref.enableBillingInfoAutoCreate,
+    enableBillingInfoAutoCreate = _ref$enableBillingInf === void 0 ? true : _ref$enableBillingInf,
+    _ref$enableTimer = _ref.enableTimer,
+    enableTimer = _ref$enableTimer === void 0 ? false : _ref$enableTimer,
+    _ref$onGetAddonsPageI = _ref.onGetAddonsPageInfoSuccess,
+    onGetAddonsPageInfoSuccess = _ref$onGetAddonsPageI === void 0 ? _identity : _ref$onGetAddonsPageI,
     _ref$onGetAddonsPageI2 = _ref.onGetAddonsPageInfoError,
     onGetAddonsPageInfoError = _ref$onGetAddonsPageI2 === void 0 ? _identity : _ref$onGetAddonsPageI2,
     _ref$onPostCheckoutSu = _ref.onPostCheckoutSuccess,
@@ -3290,7 +3633,9 @@ var AddonsContainter = function AddonsContainter(_ref) {
     onPendingVerification = _ref$onPendingVerific === void 0 ? _identity : _ref$onPendingVerific,
     samePage = _ref.samePage,
     _ref$descriptionTrigg = _ref.descriptionTrigger,
-    descriptionTrigger = _ref$descriptionTrigg === void 0 ? 'click' : _ref$descriptionTrigg;
+    descriptionTrigger = _ref$descriptionTrigg === void 0 ? 'click' : _ref$descriptionTrigg,
+    addOnDataWithCustomFields = _ref.addOnDataWithCustomFields,
+    configs = _ref.configs;
   var eventId = getQueryVariable('event_id');
   var _useState = React.useState([]),
     addons = _useState[0],
@@ -3563,7 +3908,8 @@ var AddonsContainter = function AddonsContainter(_ref) {
       }
     } : undefined
   }, function (_ref4) {
-    var values = _ref4.values;
+    var values = _ref4.values,
+      errors = _ref4.errors;
     var isConfirmDisabled = !isAtLeastOneAddonSelected(values);
     return React__default.createElement(formik.Form, {
       autoComplete: "off",
@@ -3633,7 +3979,11 @@ var AddonsContainter = function AddonsContainter(_ref) {
             classNamePrefix: classNamePrefix,
             handleAddonChange: function handleAddonChange(id, value) {
               return onFieldChange(id, value, addon);
-            }
+            },
+            addOnDataWithCustomFields: addOnDataWithCustomFields,
+            configs: configs,
+            values: values,
+            errors: errors
           })
         );
       }) :
@@ -3645,7 +3995,11 @@ var AddonsContainter = function AddonsContainter(_ref) {
         classNamePrefix: classNamePrefix,
         handleAddonChange: function handleAddonChange(id, value) {
           return onFieldChange(id, value, addon);
-        }
+        },
+        addOnDataWithCustomFields: addOnDataWithCustomFields,
+        configs: configs,
+        values: values,
+        errors: errors
       })));
     }), samePage ? null : React__default.createElement("button", {
       type: "submit",
@@ -3822,44 +4176,6 @@ var ForgotPasswordModal = function ForgotPasswordModal(_ref) {
   }))));
 };
 
-var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-var combineValidators = function combineValidators() {
-  for (var _len = arguments.length, validators = new Array(_len), _key = 0; _key < _len; _key++) {
-    validators[_key] = arguments[_key];
-  }
-  return function () {
-    for (var i = 0; i < validators.length; ++i) {
-      var error_message = validators[i].apply(validators, arguments);
-      if (error_message) return error_message;
-    }
-  };
-};
-function isFalsy(item) {
-  try {
-    if (!item ||
-    // handles most, like false, 0, null, etc
-    typeof item === 'object' && Object.keys(item).length === 0 &&
-    // for empty objects, like {}, []
-    !(typeof item.addEventListener === 'function') // omit webpage elements
-    ) {
-      return true;
-    }
-  } catch (err) {
-    return true;
-  }
-  return false;
-}
-var requiredValidator = function requiredValidator(value, message) {
-  var errorMessage = '';
-  if (isFalsy(typeof value === 'string' ? value.trim() : value)) {
-    errorMessage = message || 'Required';
-  }
-  return errorMessage;
-};
-var emailValidator = function emailValidator(email) {
-  return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
-};
-
 var style$2 = {
   position: 'absolute',
   top: '50%',
@@ -4100,324 +4416,102 @@ var SignupModal = function SignupModal(_ref) {
             _context.prev = 17;
             _context.t0 = _context["catch"](0);
             if (axios.isAxiosError(_context.t0)) {
-              onRegisterError(_context.t0, values.email);
-            }
-          case 20:
-            _context.prev = 20;
-            setLoading(false);
-            return _context.finish(20);
-          case 23:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 17, 20, 23]]);
-    }));
-    return function onSignup(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var _onClose = loading ? function () {} : onClose;
-  return React__default.createElement(material.Modal, {
-    open: true,
-    onClose: _onClose,
-    "aria-labelledby": "modal-modal-title",
-    "aria-describedby": "modal-modal-description",
-    className: "signup-modal"
-  }, React__default.createElement(material.Box, {
-    style: style$3
-  }, React__default.createElement("div", null, React__default.createElement(formik.Formik, {
-    initialValues: {
-      firstName: '',
-      lastName: '',
-      email: '',
-      password: '',
-      confirmPassword: ''
-    },
-    validationSchema: SignupSchema,
-    onSubmit: onSignup
-  }, function (_ref3) {
-    var isValid = _ref3.isValid,
-      dirty = _ref3.dirty,
-      handleSubmit = _ref3.handleSubmit;
-    return React__default.createElement(formik.Form, {
-      onSubmit: handleSubmit
-    }, React__default.createElement("div", {
-      className: "signup-container"
-    }, React__default.createElement("div", {
-      className: "title"
-    }, "Create an Account"), React__default.createElement("div", {
-      className: "signup-container__twoFields"
-    }, React__default.createElement("div", {
-      className: "is-half"
-    }, React__default.createElement(formik.Field, {
-      name: "firstName",
-      label: "First Name",
-      component: CustomField
-    })), React__default.createElement("div", {
-      className: "is-half"
-    }, React__default.createElement(formik.Field, {
-      name: "lastName",
-      label: "Last Name",
-      component: CustomField
-    }))), React__default.createElement("div", {
-      className: "signup-container__singleField"
-    }, React__default.createElement("div", {
-      className: ""
-    }, React__default.createElement(formik.Field, {
-      name: "email",
-      label: "Email",
-      component: CustomField
-    }))), React__default.createElement("div", {
-      className: "signup-container__twoFields"
-    }, React__default.createElement("div", {
-      className: "is-half"
-    }, React__default.createElement(formik.Field, {
-      name: "password",
-      label: "Password",
-      type: "password",
-      component: CustomField
-    })), React__default.createElement("div", {
-      className: "is-half"
-    }, React__default.createElement(formik.Field, {
-      name: "confirmPassword",
-      label: "Confirm Password",
-      type: "password",
-      component: CustomField
-    })))), React__default.createElement("div", {
-      className: "signup-action-button"
-    }, React__default.createElement("button", {
-      type: "submit",
-      disabled: !(isValid && dirty)
-    }, loading ? React__default.createElement(material.CircularProgress, {
-      size: "22px"
-    }) : 'Submit')), React__default.createElement("div", {
-      className: "login"
-    }, React__default.createElement("span", {
-      onClick: onLogin
-    }, "Login")), showPoweredByImage ? React__default.createElement(PoweredBy, null) : null);
-  }))));
-};
-
-var _excluded$3 = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
-var getInitialValues = function getInitialValues(data, propsInitialValues, userValues, ticketHoldersFields, ticketsQuantity) {
-  var _ticketHoldersFields, _ticketHoldersFields$, _ticketHoldersFields$2;
-  if (data === void 0) {
-    data = [];
-  }
-  if (propsInitialValues === void 0) {
-    propsInitialValues = {};
-  }
-  if (userValues === void 0) {
-    userValues = {};
-  }
-  if (ticketHoldersFields === void 0) {
-    ticketHoldersFields = {};
-  }
-  if (ticketsQuantity === void 0) {
-    ticketsQuantity = [];
-  }
-  var results = _flatMapDeep(data, function (_ref) {
-    var fields = _ref.fields;
-    return _map(fields, function (_ref2) {
-      var groupItems = _ref2.groupItems;
-      return _map(groupItems, function (_ref3) {
-        var name = _ref3.name,
-          value = _ref3.value;
-        return {
-          name: name,
-          value: value
-        };
-      });
-    });
-  });
-  // Add Ticket Holder default values for custom fields
-  var ticketHoldersCustomFields = ((_ticketHoldersFields = ticketHoldersFields) == null ? void 0 : (_ticketHoldersFields$ = _ticketHoldersFields.fields) == null ? void 0 : (_ticketHoldersFields$2 = _ticketHoldersFields$.find(function (groupItem) {
-    return groupItem.customFields;
-  })) == null ? void 0 : _ticketHoldersFields$2.groupItems) || [];
-  var ticketHoldersCustomFieldsInitValues = {};
-  var selectedTicketsCount = ticketsQuantity.length || localStorage.getItem('selectedTicketsQuantity') || 0;
-  if (!_isEmpty(ticketHoldersCustomFields)) {
-    for (var _iterator = _createForOfIteratorHelperLoose(ticketHoldersCustomFields), _step; !(_step = _iterator()).done;) {
-      var customField = _step.value;
-      for (var i = 0; i < selectedTicketsCount; i++) {
-        var fieldName = customField.name + "-" + i;
-        var fieldValue = customField.value;
-        ticketHoldersCustomFieldsInitValues[fieldName] = fieldValue;
-      }
-    }
-  }
-  var initialValues = {};
-  _forEach(results, function (groupItem) {
-    var name = groupItem.name,
-      value = groupItem.value;
-    initialValues[name] = value || propsInitialValues[name] || userValues[name] || '';
-  });
-  // set logged in user as first ticket holder
-  initialValues['holderFirstName-0'] = propsInitialValues.firstName || userValues.firstName || '';
-  initialValues['holderLastName-0'] = propsInitialValues.lastName || userValues.lastName || '';
-  initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || '';
-  return _extends({}, initialValues, ticketHoldersCustomFieldsInitValues);
-};
-var createRegisterFormData = function createRegisterFormData(values, checkoutBody, flagFreeTicket) {
-  if (values === void 0) {
-    values = {};
-  }
-  if (flagFreeTicket === void 0) {
-    flagFreeTicket = false;
-  }
-  var bodyFormData = new FormData();
-  bodyFormData.append('first_name', values.firstName);
-  bodyFormData.append('last_name', values.lastName);
-  bodyFormData.append('email', values.email);
-  bodyFormData.append('password', values.password);
-  bodyFormData.append('password_confirmation', values.confirmPassword);
-  bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
-  bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
-  bodyFormData.append('check_cart_expiration', 'true');
-  _forEach(checkoutBody.attributes, function (item, key) {
-    if (!(flagFreeTicket && ['country', 'state', 'city', 'street_address'].includes(key))) {
-      bodyFormData.append(key, item);
-    }
-  });
-  return bodyFormData;
-};
-var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, values, logedInValues, includeDob) {
-  if (values === void 0) {
-    values = {};
-  }
-  if (logedInValues === void 0) {
-    logedInValues = {};
-  }
-  if (includeDob === void 0) {
-    includeDob = false;
-  }
-  var _values = values,
-    firstName = _values.firstName,
-    lastName = _values.lastName,
-    holderAge = _values.holderAge,
-    restValues = _objectWithoutPropertiesLoose(_values, _excluded$3);
-  var holders = [];
-  var ticket_holders = [];
-  var _loop = function _loop(i) {
-    var individualHolder = Object.fromEntries(Object.entries(values).filter(function (_ref4) {
-      var key = _ref4[0];
-      return key.includes(String(i));
-    }));
-    holders.push(individualHolder);
-  };
-  for (var i = 0; i <= ticketsQuantity; i++) {
-    _loop(i);
-  }
-  var filteredHolders = holders.filter(function (holder) {
-    return Object.entries(holder).length > 0;
-  });
-  ticket_holders = filteredHolders.map(function (item, index) {
-    return {
-      first_name: !index ? item["holderFirstName-" + index] || logedInValues.firstNameLogged || '' : item["holderFirstName-" + index] || '',
-      last_name: !index ? item["holderLastName-" + index] || logedInValues.lastNameLogged || '' : item["holderLastName-" + index] || '',
-      phone: item["holderPhone-" + index] || '',
-      email: !index ? item["holderEmail-" + index] || logedInValues.emailLogged || '' : item["holderEmail-" + index] || ''
-    };
-  });
-  var filteredRestValue = {};
-  _forEach(restValues, function (value, key) {
-    if (!key.includes('holder')) {
-      filteredRestValue[key] = value;
-    }
-  });
-  var body = {
-    attributes: _extends({}, filteredRestValue, {
-      email: restValues.email || logedInValues.emailLogged,
-      confirm_email: restValues.email || logedInValues.emailLogged,
-      first_name: firstName || logedInValues.firstNameLogged,
-      last_name: lastName || logedInValues.lastNameLogged,
-      ticket_holders: ticket_holders
-    })
-  };
-  if (includeDob) {
-    var holderAgeDate = new Date(holderAge);
-    body.attributes.dob_day = holderAgeDate.getDate();
-    body.attributes.dob_month = holderAgeDate.getMonth() + 1;
-    body.attributes.dob_year = holderAgeDate.getFullYear();
-  }
-  return body;
-};
-var getValidateFunctions = function getValidateFunctions(element, states, values, errors) {
-  var validationFunctions = [];
-  if (element.required) {
-    if (element.name !== 'state' || element.name === 'state' && states.length) {
-      validationFunctions.push(requiredValidator);
-    }
-  }
-  if (element.onValidate) {
-    validationFunctions.push(element.onValidate);
-  }
-  if (element.name === 'phone') {
-    var invalidPhone = function invalidPhone() {
-      return errors.phone === 'Invalid phone number' ? 'Invalid phone number' : null;
-    };
-    validationFunctions.push(invalidPhone);
-  }
-  if (element.name === 'confirmEmail') {
-    var isSameEmail = function isSameEmail(confirmEmail) {
-      return values.email !== confirmEmail ? 'Please confirm your email address correctly' : null;
-    };
-    validationFunctions.push(isSameEmail);
-  }
-  if (element.name === 'confirmPassword') {
-    var isSame = function isSame(confirmPassword) {
-      return values.password !== confirmPassword ? 'Password confirmation does not match' : null;
+              onRegisterError(_context.t0, values.email);
+            }
+          case 20:
+            _context.prev = 20;
+            setLoading(false);
+            return _context.finish(20);
+          case 23:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 17, 20, 23]]);
+    }));
+    return function onSignup(_x) {
+      return _ref2.apply(this, arguments);
     };
-    validationFunctions.push(isSame);
-  }
-  return combineValidators.apply(void 0, validationFunctions);
-};
-var assingUniqueIds = function assingUniqueIds(data) {
-  if (_get(data[0], 'uniqueId')) {
-    return data;
-  }
-  return _map(data, function (item) {
-    _forEach(item, function (itemValue, key) {
-      if (_isArray(itemValue) && !itemValue.some(function (item) {
-        return typeof item === 'string';
-      })) {
-        item[key] = assingUniqueIds(itemValue);
-      }
-    });
-    return _extends({}, item, {
-      uniqueId: nanoid.nanoid()
-    });
-  });
-};
-var isRequiredField = function isRequiredField(element, configs) {
-  var name = element.name,
-    required = element.required;
-  var flagRequirePhone = _get(configs, 'phone_required', false);
-  var collectMandatoryWalletAddress = _get(configs, 'collect_mandatory_wallet_address', false);
-  if (required || name === 'phone' && flagRequirePhone || name === 'data_capture[wallet_address]' && !collectMandatoryWalletAddress) {
-    return true;
-  }
-  return false;
-};
-var getFieldLabel = function getFieldLabel(element, configs) {
-  if (isRequiredField(element, configs) || React__default.isValidElement(element.label)) {
-    return element.label;
-  }
-  return element.label + " (optional)";
-};
-var getFieldComponent = function getFieldComponent(element) {
-  var type = _get(element, 'type', 'text');
-  var fieldComponentConfigs = {
-    checkbox: CheckboxField,
-    select: CustomField,
-    select_multi: SelectField,
-    phone: PhoneNumberField,
-    date: DatePickerField,
-    radio: RadioGroupField,
-    text: CustomField
-  };
-  var fieldComponent = _get(fieldComponentConfigs, type, CustomField);
-  return fieldComponent;
+  }();
+  var _onClose = loading ? function () {} : onClose;
+  return React__default.createElement(material.Modal, {
+    open: true,
+    onClose: _onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "signup-modal"
+  }, React__default.createElement(material.Box, {
+    style: style$3
+  }, React__default.createElement("div", null, React__default.createElement(formik.Formik, {
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+      confirmPassword: ''
+    },
+    validationSchema: SignupSchema,
+    onSubmit: onSignup
+  }, function (_ref3) {
+    var isValid = _ref3.isValid,
+      dirty = _ref3.dirty,
+      handleSubmit = _ref3.handleSubmit;
+    return React__default.createElement(formik.Form, {
+      onSubmit: handleSubmit
+    }, React__default.createElement("div", {
+      className: "signup-container"
+    }, React__default.createElement("div", {
+      className: "title"
+    }, "Create an Account"), React__default.createElement("div", {
+      className: "signup-container__twoFields"
+    }, React__default.createElement("div", {
+      className: "is-half"
+    }, React__default.createElement(formik.Field, {
+      name: "firstName",
+      label: "First Name",
+      component: CustomField
+    })), React__default.createElement("div", {
+      className: "is-half"
+    }, React__default.createElement(formik.Field, {
+      name: "lastName",
+      label: "Last Name",
+      component: CustomField
+    }))), React__default.createElement("div", {
+      className: "signup-container__singleField"
+    }, React__default.createElement("div", {
+      className: ""
+    }, React__default.createElement(formik.Field, {
+      name: "email",
+      label: "Email",
+      component: CustomField
+    }))), React__default.createElement("div", {
+      className: "signup-container__twoFields"
+    }, React__default.createElement("div", {
+      className: "is-half"
+    }, React__default.createElement(formik.Field, {
+      name: "password",
+      label: "Password",
+      type: "password",
+      component: CustomField
+    })), React__default.createElement("div", {
+      className: "is-half"
+    }, React__default.createElement(formik.Field, {
+      name: "confirmPassword",
+      label: "Confirm Password",
+      type: "password",
+      component: CustomField
+    })))), React__default.createElement("div", {
+      className: "signup-action-button"
+    }, React__default.createElement("button", {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, loading ? React__default.createElement(material.CircularProgress, {
+      size: "22px"
+    }) : 'Submit')), React__default.createElement("div", {
+      className: "login"
+    }, React__default.createElement("span", {
+      onClick: onLogin
+    }, "Login")), showPoweredByImage ? React__default.createElement(PoweredBy, null) : null);
+  }))));
 };
 
 var LogicRunner = function LogicRunner(_ref) {
@@ -4604,7 +4698,8 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     onGetCheckoutConfigsError = _ref4$onGetCheckoutCo2 === void 0 ? _identity : _ref4$onGetCheckoutCo2,
     _ref4$includeAddons = _ref4.includeAddons,
     includeAddons = _ref4$includeAddons === void 0 ? false : _ref4$includeAddons,
-    addonsProps = _ref4.addonsProps;
+    addonsProps = _ref4.addonsProps,
+    addOnDataWithCustomFields = _ref4.addOnDataWithCustomFields;
   var _useState = React.useState(null),
     extraData = _useState[0],
     setExtraData = _useState[1];
@@ -5261,7 +5356,10 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     }, React__default.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"
-    })))), includeAddons ? React__default.createElement(AddonsContainter, Object.assign({}, addonsProps != null ? addonsProps : {})) : null, !cardLoading && _map(dataWithUniqueIds, function (item) {
+    })))), includeAddons ? React__default.createElement(AddonsContainter, Object.assign({}, addonsProps != null ? addonsProps : {}, {
+      addOnDataWithCustomFields: addOnDataWithCustomFields,
+      configs: configs
+    })) : null, !cardLoading && _map(dataWithUniqueIds, function (item) {
       var label = item.label,
         labelClassName = item.labelClassName,
         fields = item.fields;
@@ -7471,7 +7569,7 @@ var TicketRow = function TicketRow(_ref) {
   })))));
   var returnValue = '';
   // ticketTier.soldOut === false --> means that ticket is in the stock
-  var isSoldOut = ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut || ticketTier.soldOut === false;
+  var isSoldOut = ticketTier.sold_out || !(ticketTier.displayTicket || ticketTier.slotGroupId) || ticketTier.soldOut || ticketTier.soldOut === false;
   if (isSoldOut) {
     returnValue = soldOutMessage;
   } else if (isSalesClosed) {
@@ -7527,7 +7625,7 @@ var TicketsSection = function TicketsSection(_ref) {
     var ticketPriceWithoutFees = priceSymbol + " " + (+ticket.cost).toFixed(2);
     var ticketPriceWithFees = priceSymbol + " " + (+ticket.price).toFixed(2);
     var ticketOldPrice = priceSymbol + " " + (+ticket.oldPrice).toFixed(2);
-    var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
+    var isSoldOut = ticket.sold_out || !(ticket.displayTicket || ticket.slotGroupId) || ticket.soldOut;
     var ticketSelect = function ticketSelect(event) {
       var value = event.target.value;
       handleTicketSelect(ticket.id, value);
@@ -7602,7 +7700,7 @@ var TicketsSection = function TicketsSection(_ref) {
     var ticketPriceWithoutFees = priceSymbol + " " + (+ticket.cost).toFixed(2);
     var ticketPriceWithFees = priceSymbol + " " + (+ticket.price).toFixed(2);
     var ticketOldPrice = priceSymbol + " " + (+ticket.oldPrice).toFixed(2);
-    var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
+    var isSoldOut = ticket.sold_out || !(ticket.displayTicket || ticket.slotGroupId) || ticket.soldOut;
     var ticketSelect = function ticketSelect(event) {
       var value = event.target.value;
       handleTicketSelect(ticket.id, value, true);
@@ -7679,6 +7777,126 @@ var TicketsSection = function TicketsSection(_ref) {
   }));
 };
 
+var TimeSlotsSection = function TimeSlotsSection(_ref) {
+  var event = _ref.event,
+    eventId = _ref.eventId,
+    availableDates = _ref.availableDates,
+    selectedTickets = _ref.selectedTickets,
+    setSelectedTickets = _ref.setSelectedTickets,
+    handleTicketSelect = _ref.handleTicketSelect,
+    sortBySoldOut = _ref.sortBySoldOut,
+    hideTicketsHeader = _ref.hideTicketsHeader,
+    ticketsHeaderComponent = _ref.ticketsHeaderComponent,
+    showGroupNameBlock = _ref.showGroupNameBlock,
+    currencySybmol = _ref.currencySybmol,
+    isSeatMapAllowed = _ref.isSeatMapAllowed;
+  var _useState = React.useState(null),
+    selectedDate = _useState[0],
+    setSelectedDate = _useState[1];
+  var _useState2 = React.useState([]),
+    tickets = _useState2[0],
+    setTickets = _useState2[1];
+  var _useState3 = React.useState(false),
+    loading = _useState3[0],
+    setLoading = _useState3[1];
+  var handleDateChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(date) {
+      var response;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setSelectedDate(date);
+            if (!date) {
+              _context.next = 19;
+              break;
+            }
+            setLoading(true);
+            _context.prev = 3;
+            _context.next = 6;
+            return axios.get("/api/time-slots", {
+              params: {
+                eventId: eventId,
+                date: moment(date).format("YYYY-MM-DD")
+              }
+            });
+          case 6:
+            response = _context.sent;
+            setTickets(response.data.tickets);
+            setSelectedTickets(response.data.tickets);
+            _context.next = 16;
+            break;
+          case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](3);
+            console.error("Error fetching time slots:", _context.t0);
+            setTickets([]);
+            setSelectedTickets([]);
+          case 16:
+            _context.prev = 16;
+            setLoading(false);
+            return _context.finish(16);
+          case 19:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[3, 11, 16, 19]]);
+    }));
+    return function handleDateChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var isDateDisabled = function isDateDisabled(date) {
+    var formattedDate = moment(date).format("YYYY-MM-DD");
+    return !availableDates.includes(formattedDate);
+  };
+  return React__default.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    }
+  }, React__default.createElement(xDatePickers.LocalizationProvider, {
+    dateAdapter: AdapterMoment.AdapterMoment
+  }, React__default.createElement(xDatePickers.StaticDatePicker, {
+    value: selectedDate,
+    onChange: handleDateChange,
+    shouldDisableDate: isDateDisabled,
+    renderInput: function renderInput(params) {
+      return React__default.createElement(material.TextField, Object.assign({}, params));
+    },
+    showToolbar: false,
+    componentsProps: {
+      actionBar: {
+        actions: []
+      }
+    },
+    disablePast: true
+  })), loading ? React__default.createElement(material.CircularProgress, {
+    sx: {
+      marginTop: 2
+    }
+  }) : React__default.createElement(material.Box, {
+    sx: {
+      marginTop: 2,
+      width: "100%"
+    }
+  }, React__default.createElement(TicketsSection, {
+    event: event,
+    ticketsList: tickets,
+    tableTickets: [],
+    selectedTickets: selectedTickets,
+    handleTicketSelect: handleTicketSelect,
+    sortBySoldOut: sortBySoldOut,
+    ticketsHeaderComponent: ticketsHeaderComponent,
+    tableTicketsHeaderComponent: null,
+    hideTableTicketsHeader: true,
+    hideTicketsHeader: hideTicketsHeader || _isEmpty(tickets),
+    showGroupNameBlock: showGroupNameBlock,
+    currencySybmol: currencySybmol,
+    isSeatMapAllowed: isSeatMapAllowed
+  })));
+};
+
 var TicketsContainer = function TicketsContainer(_ref) {
   var onLoginSuccess = _ref.onLoginSuccess,
     getTicketsLabel = _ref.getTicketsLabel,
@@ -7823,6 +8041,10 @@ var TicketsContainer = function TicketsContainer(_ref) {
     setIsPreregisred = _useState22[1];
   var ticketsContainerRef = React.useRef(null);
   var pageUrl = isBrowser ? window.location.href.split('?')[0] : '';
+  var isTimeSlotEvent = event == null ? void 0 : event.isTimeSlotEvent;
+  var _useState23 = React.useState([]),
+    availableDates = _useState23[0],
+    setAvailableDates = _useState23[1];
   useCookieListener(X_TF_ECOMMERCE, function (value) {
     return setIsLogged(Boolean(value));
   });
@@ -7843,7 +8065,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
       getTicketsApi();
       fetchPreregisteredsData();
     }
-  }, [eventId]);
+  }, [eventId, isTimeSlotEvent]);
   React.useEffect(function () {
     setIsPreregisred(checkUserPreregistration());
   }, [preregistereds]);
@@ -7911,21 +8133,46 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }
   function _getTicketsApi() {
     _getTicketsApi = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(isUpdateingCode, type) {
-      var previewKey, response, eventResponse, _response$data, attributes, _event2;
+      var previewKey, eventResponse, _event2, _response, response, _response$data, attributes;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
             _context4.prev = 0;
-            isUpdateingCode ? setCodeIsLoading(true) : setIsLoading(true);
+            if (isUpdateingCode) {
+              setCodeIsLoading(true);
+            } else {
+              setIsLoading(true);
+            }
             previewKey = getQueryVariable('pk') || undefined;
             _context4.next = 5;
-            return getTickets(eventId, code, previewKey);
-          case 5:
-            response = _context4.sent;
-            _context4.next = 8;
             return getEvent(eventId, previewKey);
-          case 8:
+          case 5:
             eventResponse = _context4.sent;
+            if (eventResponse.success) {
+              _event2 = eventResponse.data.attributes;
+              setEvent(_event2);
+              if (_event2.country && isBrowser) {
+                window.localStorage.setItem('eventCountry', _event2.country);
+              }
+            }
+            if (!isTimeSlotEvent) {
+              _context4.next = 14;
+              break;
+            }
+            _context4.next = 10;
+            return getTimeSlotsData(eventId);
+          case 10:
+            _response = _context4.sent;
+            console.log(_response);
+            if (_response.success) {
+              setAvailableDates(_response.data);
+            }
+            return _context4.abrupt("return");
+          case 14:
+            _context4.next = 16;
+            return getTickets(eventId, code, previewKey);
+          case 16:
+            response = _context4.sent;
             if (response.success) {
               attributes = response == null ? void 0 : (_response$data = response.data) == null ? void 0 : _response$data.attributes;
               type === 'promo' && setCodeIsApplied(attributes.ValidPromoCode);
@@ -7937,32 +8184,25 @@ var TicketsContainer = function TicketsContainer(_ref) {
               setShowAccessCodeSection(attributes.is_access_code);
               setShowPromoCodeSection(attributes.isPromotionsEnabled);
             }
-            if (eventResponse.success) {
-              _event2 = eventResponse.data.attributes;
-              setEvent(_event2);
-              if (_event2.country && isBrowser) {
-                window.localStorage.setItem('eventCountry', _event2.country);
-              }
-            }
-            _context4.next = 16;
+            _context4.next = 23;
             break;
-          case 13:
-            _context4.prev = 13;
+          case 20:
+            _context4.prev = 20;
             _context4.t0 = _context4["catch"](0);
             if (axios.isAxiosError(_context4.t0)) {
               onGetTicketsError(_context4.t0);
               setError(_get(_context4.t0, 'response.data.message', ''));
             }
-          case 16:
-            _context4.prev = 16;
+          case 23:
+            _context4.prev = 23;
             setIsLoading(false);
             setCodeIsLoading(false);
-            return _context4.finish(16);
-          case 20:
+            return _context4.finish(23);
+          case 27:
           case "end":
             return _context4.stop();
         }
-      }, _callee4, null, [[0, 13, 16, 20]]);
+      }, _callee4, null, [[0, 20, 23, 27]]);
     }));
     return _getTicketsApi.apply(this, arguments);
   }
@@ -8303,7 +8543,20 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }), isLoading ? React__default.createElement(Loader, null) : React__default.createElement("div", {
     ref: ticketsContainerRef,
     className: 'tickets-section-container'
-  }, !isSalesClosed && React__default.createElement(TicketsSection, {
+  }, isTimeSlotEvent && React__default.createElement(TimeSlotsSection, {
+    event: event,
+    eventId: eventId,
+    availableDates: availableDates,
+    selectedTickets: selectedTickets,
+    setSelectedTickets: setSelectedTickets,
+    handleTicketSelect: handleTicketSelect,
+    sortBySoldOut: sortBySoldOut,
+    ticketsHeaderComponent: ticketsHeaderComponent,
+    hideTicketsHeader: hideTicketsHeader,
+    showGroupNameBlock: showGroupNameBlock,
+    currencySybmol: currencySybmol,
+    isSeatMapAllowed: isSeatMapAllowed
+  }), !isSalesClosed && !isTimeSlotEvent && React__default.createElement(TicketsSection, {
     event: event,
     ticketsList: ordinarTickets,
     tableTickets: tableTickets,