tf-checkout-react 1.2.30 → 1.3.0

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

@@ -65,6 +65,8 @@ var TablePagination = _interopDefault(require('@mui/material/TablePagination'));
 var TableRow = _interopDefault(require('@mui/material/TableRow'));
 var _has = _interopDefault(require('lodash/has'));
 var Radio = _interopDefault(require('@mui/material/Radio'));
+var _isNull = _interopDefault(require('lodash/isNull'));
+var _reverse = _interopDefault(require('lodash/reverse'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1177,6 +1179,12 @@ var createCheckoutDataBodyWithDefaultHolder = function createCheckoutDataBodyWit
   return body;
 };
 
+var createMarkup = function createMarkup(data) {
+  return {
+    __html: data
+  };
+};
+
 var isWindowDefined = typeof window !== 'undefined';
 var isDocumentDefined = typeof document !== 'undefined';
 
@@ -1435,7 +1443,8 @@ var getStates = function getStates(countryId) {
   return publicRequest.get("/countries/" + countryId + "/states/");
 };
 var getOrders = function getOrders(page, limit, eventSlug) {
-  return publicRequest.get("v1/account/orders/?page=" + page + "&limit=" + limit + "&filter[event]=" + eventSlug + "&filter[brand]=" + CONFIGS.BRAND_SLUG + "&filter[subbrands]=true");
+  return publicRequest.get( // eslint-disable-next-line max-len
+  "v1/account/orders/?page=" + page + "&limit=" + limit + "&filter[event]=" + eventSlug + "&filter[brand]=" + CONFIGS.BRAND_SLUG + "&filter[subbrands]=true");
 };
 var getOrderDetails = function getOrderDetails(orderId) {
   return publicRequest.get("v1/account/order/" + orderId);
@@ -1505,6 +1514,59 @@ var validatePhoneNumber = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
+var getAddons = /*#__PURE__*/function () {
+  var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(eventId) {
+    var result, addons;
+    return runtime_1.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return publicRequest.get("/v1/event/" + eventId + "/add-ons");
+
+          case 2:
+            result = _context2.sent;
+            addons = _get(result, 'data.data.attributes', []);
+            return _context2.abrupt("return", addons);
+
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function getAddons(_x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var getCheckoutPageConfigs = /*#__PURE__*/function () {
+  var _ref3 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
+    var response;
+    return runtime_1.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.next = 2;
+            return publicRequest.get("v1/checkout-configs");
+
+          case 2:
+            response = _context3.sent;
+            return _context3.abrupt("return", response.data);
+
+          case 4:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  }));
+
+  return function getCheckoutPageConfigs() {
+    return _ref3.apply(this, arguments);
+  };
+}();
 
 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() {
@@ -1799,7 +1861,11 @@ var SelectField = function SelectField(_ref) {
       _ref$form = _ref.form,
       touched = _ref$form.touched,
       errors = _ref$form.errors,
-      theme = _ref.theme;
+      setFieldValue = _ref$form.setFieldValue,
+      theme = _ref.theme,
+      _ref$onChange = _ref.onChange,
+      _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+
   var isTouched = Boolean(_get(touched, field.name));
 
   var error = _get(errors, field.name);
@@ -1827,7 +1893,12 @@ var SelectField = function SelectField(_ref) {
       className: theme
     }
   }, field, {
-    style: customTheme == null ? void 0 : customTheme.input
+    style: customTheme == null ? void 0 : customTheme.input,
+    onChange: function onChange(e) {
+      _onChange(e);
+
+      setFieldValue(field.name, e.target.value);
+    }
   }), _map(selectOptions, function (option) {
     return React__default.createElement("option", {
       key: option.value,
@@ -2949,6 +3020,12 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
   var flagRequirePhone = getQueryVariable('phone_required') === 'true'; // Get prevProps
 
   var prevData = React.useRef(data);
+
+  var addAddOnsInAttributes = function addAddOnsInAttributes(checkoutBody) {
+    var selectedAddOns = window.localStorage.getItem('add_ons') || '{}';
+    checkoutBody.attributes.add_ons = JSON.parse(selectedAddOns);
+  };
+
   React.useEffect(function () {
     var hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId');
 
@@ -3146,42 +3223,47 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
             switch (_context5.prev = _context5.next) {
               case 0:
                 if (!(skipPage && !_isEmpty(ticketsQuantity) && !showDOB)) {
-                  _context5.next = 17;
+                  _context5.next = 18;
                   break;
                 }
 
                 setLoading(true);
                 checkoutBody = createCheckoutDataBodyWithDefaultHolder(ticketsQuantity.length, userData);
                 _context5.prev = 3;
-                _context5.next = 6;
+
+                if (isWindowDefined) {
+                  addAddOnsInAttributes(checkoutBody);
+                }
+
+                _context5.next = 7;
                 return postOnCheckout(checkoutBody, access_token);
 
-              case 6:
+              case 7:
                 res = _context5.sent;
                 removeReferralKey();
                 onSkipBillingPage(_get(res, 'data.data.attributes'));
                 setLoading(false);
-                _context5.next = 15;
+                _context5.next = 16;
                 break;
 
-              case 12:
-                _context5.prev = 12;
+              case 13:
+                _context5.prev = 13;
                 _context5.t0 = _context5["catch"](3);
                 onSubmitError(_context5.t0);
 
-              case 15:
-                _context5.next = 18;
+              case 16:
+                _context5.next = 19;
                 break;
 
-              case 17:
+              case 18:
                 setLoading(false);
 
-              case 18:
+              case 19:
               case "end":
                 return _context5.stop();
             }
           }
-        }, _callee5, null, [[3, 12]]);
+        }, _callee5, null, [[3, 13]]);
       }));
 
       return function collectPaymentData() {
@@ -3256,49 +3338,54 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
                 _context6.prev = 0;
 
                 if (!isLoggedIn) {
-                  _context6.next = 16;
+                  _context6.next = 17;
                   break;
                 }
 
                 _checkoutBody = collectCheckoutBody(values, userData);
-                _context6.next = 5;
+
+                if (isWindowDefined) {
+                  addAddOnsInAttributes(_checkoutBody);
+                }
+
+                _context6.next = 6;
                 return postOnCheckout(_checkoutBody, access_token);
 
-              case 5:
+              case 6:
                 _res = _context6.sent;
                 removeReferralKey(); // After checkout is successful recover updated profile and store it on local storage if needed
 
                 if (!isWindowDefined) {
-                  _context6.next = 14;
+                  _context6.next = 15;
                   break;
                 }
 
-                _context6.next = 10;
+                _context6.next = 11;
                 return getProfileData(access_token);
 
-              case 10:
+              case 11:
                 updatedUserData = _context6.sent;
                 _profileSpecifiedData = _get(updatedUserData, 'data.data');
                 _profileDataObj = setLoggedUserData$1(_profileSpecifiedData);
                 window.localStorage.setItem('user_data', JSON.stringify(_profileDataObj));
 
-              case 14:
+              case 15:
                 handleSubmit(values, formikHelpers, eventId, _res);
                 return _context6.abrupt("return");
 
-              case 16:
+              case 17:
                 checkoutBodyForRegistration = createCheckoutDataBody(ticketsQuantity.length, values, {
                   emailLogged: emailLogged,
                   firstNameLogged: firstNameLogged,
                   lastNameLogged: lastNameLogged
                 }, showDOB);
                 bodyFormData = createRegisterFormData(values, checkoutBodyForRegistration);
-                _context6.prev = 18;
+                _context6.prev = 19;
                 setLoading(true);
-                _context6.next = 22;
+                _context6.next = 23;
                 return register(bodyFormData);
 
-              case 22:
+              case 23:
                 resRegister = _context6.sent;
                 _xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce');
                 accessToken = _get(resRegister, 'data.data.attributes.access_token');
@@ -3310,12 +3397,12 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
                   refreshToken: refreshToken,
                   userProfile: userProfile
                 });
-                _context6.next = 35;
+                _context6.next = 36;
                 break;
 
-              case 30:
-                _context6.prev = 30;
-                _context6.t0 = _context6["catch"](18);
+              case 31:
+                _context6.prev = 31;
+                _context6.t0 = _context6["catch"](19);
                 setLoading(false);
 
                 if (axios.isAxiosError(_context6.t0)) {
@@ -3345,11 +3432,11 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
 
                 return _context6.abrupt("return");
 
-              case 35:
-                _context6.next = 37;
+              case 36:
+                _context6.next = 38;
                 return getProfileData();
 
-              case 37:
+              case 38:
                 profileData = _context6.sent;
                 profileSpecifiedData = _get(profileData, 'data.data');
                 profileDataObj = setLoggedUserData$1(profileSpecifiedData);
@@ -3359,18 +3446,23 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
                 }
 
                 checkoutBody = collectCheckoutBody(values, profileDataObj);
-                _context6.next = 44;
+
+                if (isWindowDefined) {
+                  addAddOnsInAttributes(checkoutBody);
+                }
+
+                _context6.next = 46;
                 return postOnCheckout(checkoutBody);
 
-              case 44:
+              case 46:
                 res = _context6.sent;
                 removeReferralKey();
                 handleSubmit(values, formikHelpers, eventId, res);
-                _context6.next = 53;
+                _context6.next = 55;
                 break;
 
-              case 49:
-                _context6.prev = 49;
+              case 51:
+                _context6.prev = 51;
                 _context6.t1 = _context6["catch"](0);
                 setLoading(false);
 
@@ -3391,17 +3483,17 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
                   onSubmitError(_context6.t1);
                 }
 
-              case 53:
-                _context6.prev = 53;
+              case 55:
+                _context6.prev = 55;
                 setLoading(false);
-                return _context6.finish(53);
+                return _context6.finish(55);
 
-              case 56:
+              case 58:
               case "end":
                 return _context6.stop();
             }
           }
-        }, _callee6, null, [[0, 49, 53, 56], [18, 30]]);
+        }, _callee6, null, [[0, 51, 55, 58], [19, 31]]);
       }));
 
       function onSubmit(_x2, _x3) {
@@ -3488,7 +3580,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
           return ['password', 'confirmPassword', 'password-info'].includes(element.name) && isLoggedIn ? null : React__default.createElement(React__default.Fragment, {
             key: element.uniqueId
           }, React__default.createElement("div", {
-            className: element.className
+            className: element.className + " " + (props == null ? void 0 : props.errors[element.name])
           }, element.component ? element.component : React__default.createElement(formik.Field, {
             setPhoneValidationIsLoading: element.type === 'phone' ? setPhoneValidationIsLoading : undefined,
             name: element.name,
@@ -3960,7 +4052,8 @@ var initialOrderValues = {
   quantity: '',
   price: '',
   total: '',
-  currency: ''
+  currency: '',
+  add_ons: []
 };
 var initialReviewValues = {
   order_details: {
@@ -4061,7 +4154,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
                   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
+                  currency: order_details == null ? void 0 : order_details.currency,
+                  add_ons: (order_details == null ? void 0 : order_details.add_ons) || []
                 };
                 setOrderData(_orderData);
                 onGetPaymentDataSuccess(response.data);
@@ -4232,6 +4326,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
         className = _field$className === void 0 ? '' : _field$className,
         _field$normalizer = field.normalizer,
         normalizer = _field$normalizer === void 0 ? _identity : _field$normalizer;
+    var currency = orderData.currency;
+    var value = orderData[id];
     return React__default.createElement("div", {
       key: id,
       className: "order_info_block"
@@ -4239,7 +4335,16 @@ var PaymentContainer = function PaymentContainer(_ref) {
       className: "order_info_title"
     }, label), React__default.createElement("div", {
       className: className + " order_info_text"
-    }, normalizer(orderData[id], orderData.currency)));
+    }, typeof value === 'string' ? normalizer(value, currency) : _map(value, function (item) {
+      return React__default.createElement("div", {
+        key: item.id,
+        className: "add-on-container"
+      }, React__default.createElement("span", null, item.quantity), React__default.createElement("span", {
+        className: "add-on-x"
+      }, ' x '), React__default.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React__default.createElement("span", null, item.name), React__default.createElement("span", null, ' - '), React__default.createElement("span", null, currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency)), React__default.createElement("span", {
+        className: "add-on-each"
+      }, ' each'));
+    })));
   })), enablePaymentPlan && React__default.createElement("div", {
     className: "payment_toggle"
   }, React__default.createElement("label", {
@@ -5161,7 +5266,9 @@ var TicketsSection = function TicketsSection(_ref) {
       className: "event-detail__tier-price"
     }, ticketIsDiscounted && React__default.createElement("p", {
       className: "old-price"
-    }, "$ ", (+ticket.oldPrice).toFixed(2)), React__default.createElement("p", null, ticketPrice), !isSoldOut && !ticketIsFree && React__default.createElement("p", {
+    }, "$ ", (+ticket.oldPrice).toFixed(2)), React__default.createElement("p", {
+      className: isSoldOut ? 'sold-out' : ''
+    }, ticketPrice), !isSoldOut && !ticketIsFree && React__default.createElement("p", {
       className: "fees"
     }, ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')), React__default.createElement("div", {
       className: "event-detail__tier-state",
@@ -5185,15 +5292,15 @@ var TicketsContainer = function TicketsContainer(_ref) {
       _ref$contentStyle = _ref.contentStyle,
       contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
       _ref$onAddToCartError = _ref.onAddToCartError,
-      onAddToCartError = _ref$onAddToCartError === void 0 ? function () {} : _ref$onAddToCartError,
+      onAddToCartError = _ref$onAddToCartError === void 0 ? _identity : _ref$onAddToCartError,
       _ref$onGetTicketsSucc = _ref.onGetTicketsSuccess,
-      onGetTicketsSuccess = _ref$onGetTicketsSucc === void 0 ? function () {} : _ref$onGetTicketsSucc,
+      onGetTicketsSuccess = _ref$onGetTicketsSucc === void 0 ? _identity : _ref$onGetTicketsSucc,
       _ref$onGetTicketsErro = _ref.onGetTicketsError,
-      onGetTicketsError = _ref$onGetTicketsErro === void 0 ? function () {} : _ref$onGetTicketsErro,
+      onGetTicketsError = _ref$onGetTicketsErro === void 0 ? _identity : _ref$onGetTicketsErro,
       _ref$onLogoutSuccess = _ref.onLogoutSuccess,
-      onLogoutSuccess = _ref$onLogoutSuccess === void 0 ? function () {} : _ref$onLogoutSuccess,
+      onLogoutSuccess = _ref$onLogoutSuccess === void 0 ? _identity : _ref$onLogoutSuccess,
       _ref$onLogoutError = _ref.onLogoutError,
-      onLogoutError = _ref$onLogoutError === void 0 ? function () {} : _ref$onLogoutError,
+      onLogoutError = _ref$onLogoutError === void 0 ? _identity : _ref$onLogoutError,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'light' : _ref$theme,
       _ref$queryPromoCode = _ref.queryPromoCode,
@@ -5419,6 +5526,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
 
               if (axios.isAxiosError(_context3.t0)) {
                 onGetTicketsError(_context3.t0);
+                setError(_get(_context3.t0, 'response.data.message'));
               }
 
             case 16:
@@ -5463,7 +5571,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
       var _product_options, _product_options2, _ticket_types;
 
-      var ticket, optionName, ticketId, ticketQuantity, data, result, _result$data$data$att, _result$data, _result$data$data, _result$data$data$att2, _result$data$data$att3, _result$data2, _result$data2$data, _result$data2$data$at, _result$data$data$att4, _result$data3, _result$data3$data, _result$data3$data$at, _result$data$data$att5, _result$data4, _result$data4$data, _result$data4$data$at, skipBillingPage, nameIsRequired, ageIsRequired, phoneIsRequired, hash, total, _isWindowDefined, userData, access_token, checkoutBody, checkoutResult;
+      var ticket, optionName, ticketId, ticketQuantity, data, result, pageConfigsDataResponse, _pageConfigsData$skip, _pageConfigsData$name, _pageConfigsData$age_, _pageConfigsData$phon, _pageConfigsData$has_, pageConfigsData, skipBillingPage, nameIsRequired, ageIsRequired, phoneIsRequired, hasAddOn, hash, total, _isWindowDefined, userData, access_token, checkoutBody, checkoutResult;
 
       return runtime_1.wrap(function _callee2$(_context2) {
         while (1) {
@@ -5494,52 +5602,63 @@ var TicketsContainer = function TicketsContainer(_ref) {
 
             case 9:
               result = _context2.sent;
+              _context2.next = 12;
+              return getCheckoutPageConfigs();
 
-              if (!(result.status === 200)) {
-                _context2.next = 33;
+            case 12:
+              pageConfigsDataResponse = _context2.sent;
+
+              if (!(result.status === 200 && pageConfigsDataResponse.status === 200)) {
+                _context2.next = 39;
                 break;
               }
 
-              skipBillingPage = (_result$data$data$att = result == null ? void 0 : (_result$data = result.data) == null ? void 0 : (_result$data$data = _result$data.data) == null ? void 0 : (_result$data$data$att2 = _result$data$data.attributes) == null ? void 0 : _result$data$data$att2.skip_billing_page) != null ? _result$data$data$att : false;
-              nameIsRequired = (_result$data$data$att3 = result == null ? void 0 : (_result$data2 = result.data) == null ? void 0 : (_result$data2$data = _result$data2.data) == null ? void 0 : (_result$data2$data$at = _result$data2$data.attributes) == null ? void 0 : _result$data2$data$at.names_required) != null ? _result$data$data$att3 : false;
-              ageIsRequired = (_result$data$data$att4 = result == null ? void 0 : (_result$data3 = result.data) == null ? void 0 : (_result$data3$data = _result$data3.data) == null ? void 0 : (_result$data3$data$at = _result$data3$data.attributes) == null ? void 0 : _result$data3$data$at.age_required) != null ? _result$data$data$att4 : false;
-              phoneIsRequired = (_result$data$data$att5 = result == null ? void 0 : (_result$data4 = result.data) == null ? void 0 : (_result$data4$data = _result$data4.data) == null ? void 0 : (_result$data4$data$at = _result$data4$data.attributes) == null ? void 0 : _result$data4$data$at.phone_required) != null ? _result$data$data$att5 : false;
+              pageConfigsData = _get(pageConfigsDataResponse, 'data.attributes') || {};
+              skipBillingPage = (_pageConfigsData$skip = pageConfigsData.skip_billing_page) != null ? _pageConfigsData$skip : false;
+              nameIsRequired = (_pageConfigsData$name = pageConfigsData.names_required) != null ? _pageConfigsData$name : false;
+              ageIsRequired = (_pageConfigsData$age_ = pageConfigsData.age_required) != null ? _pageConfigsData$age_ : false;
+              phoneIsRequired = (_pageConfigsData$phon = pageConfigsData.phone_required) != null ? _pageConfigsData$phon : false;
+              hasAddOn = (_pageConfigsData$has_ = pageConfigsData.has_add_on) != null ? _pageConfigsData$has_ : false;
               hash = '';
               total = '';
+              _isWindowDefined = typeof window !== 'undefined';
 
-              if (!skipBillingPage) {
-                _context2.next = 32;
+              if (!(skipBillingPage && !hasAddOn)) {
+                _context2.next = 37;
                 break;
               }
 
               // Get user data for checkout data
-              _isWindowDefined = typeof window !== 'undefined';
               userData = _isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
               access_token = _isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
               checkoutBody = createCheckoutDataBodyWithDefaultHolder(ticketQuantity, userData);
 
               if (!enableBillingInfoAutoCreate) {
-                _context2.next = 28;
+                _context2.next = 33;
                 break;
               }
 
-              _context2.next = 25;
+              _context2.next = 30;
               return postOnCheckout(checkoutBody, access_token);
 
-            case 25:
+            case 30:
               _context2.t0 = _context2.sent;
-              _context2.next = 29;
+              _context2.next = 34;
               break;
 
-            case 28:
+            case 33:
               _context2.t0 = null;
 
-            case 29:
+            case 34:
               checkoutResult = _context2.t0;
               hash = _get(checkoutResult, 'data.data.attributes.hash');
               total = _get(checkoutResult, 'data.data.attributes.total');
 
-            case 32:
+            case 37:
+              if (hasAddOn && _isWindowDefined) {
+                window.localStorage.setItem('tickets_quantity', String(ticketQuantity));
+              }
+
               onAddToCartSuccess({
                 skip_billing_page: skipBillingPage,
                 names_required: nameIsRequired,
@@ -5547,15 +5666,16 @@ var TicketsContainer = function TicketsContainer(_ref) {
                 age_required: ageIsRequired,
                 event_id: String(eventId),
                 hash: hash,
-                total: total
+                total: total,
+                hasAddOn: hasAddOn
               });
 
-            case 33:
-              _context2.next = 38;
+            case 39:
+              _context2.next = 44;
               break;
 
-            case 35:
-              _context2.prev = 35;
+            case 41:
+              _context2.prev = 41;
               _context2.t1 = _context2["catch"](6);
 
               if (axios.isAxiosError(_context2.t1)) {
@@ -5563,17 +5683,17 @@ var TicketsContainer = function TicketsContainer(_ref) {
                 setError(_get(_context2.t1, 'response.data.message'));
               }
 
-            case 38:
-              _context2.prev = 38;
+            case 44:
+              _context2.prev = 44;
               setHandleBookIsLoading(false);
-              return _context2.finish(38);
+              return _context2.finish(44);
 
-            case 41:
+            case 47:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[6, 35, 38, 41]]);
+      }, _callee2, null, [[6, 41, 44, 47]]);
     }));
 
     return function handleBook() {
@@ -6351,6 +6471,9 @@ var TicketsTable = function TicketsTable(_ref) {
 };
 
 var getTotal = function getTotal(data) {
+  var _data$tickets$;
+
+  if (data != null && data.total && data != null && data.tickets && (_data$tickets$ = data.tickets[0]) != null && _data$tickets$.currency) return data.tickets[0].currency + data.total;
   if (!(data != null && data.total) || !_has(data, 'items.ticket_types.length')) return '';
   return data.items.ticket_types[0].currency + data.total;
 };
@@ -6639,7 +6762,7 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
         window.location.assign('/orders');
       }
     }
-  }, "Back to Orders")))), React__default.createElement("div", {
+  }, "Back to Orders")))), !(data != null && data.disable_referral) && React__default.createElement("div", {
     className: "personal-link"
   }, React__default.createElement("div", {
     className: "link-item"
@@ -6945,6 +7068,634 @@ var TicketResaleContainer = function TicketResaleContainer(_ref) {
   }, React__default.createElement("h3", null, successMessage ? successMessage : error)));
 };
 
+var addonsWithGroupsAdapter = function addonsWithGroupsAdapter(data) {
+  var addonsData = _extends({}, data);
+
+  var addOnsGroups = _get(addonsData, 'add_on_groups', []);
+
+  var addons = _get(addonsData, 'add_ons', []);
+
+  if (!_isEmpty(addOnsGroups)) {
+    var addOnGroupsWithVariants = [];
+    var addOnsWithoutVariants = [];
+    addons.forEach(function (addon) {
+      if (addon.attributes.addOnGroupId) {
+        // Collect addons groups inside with their variants
+        var currentGroupId = addon.attributes.addOnGroupId;
+        var exsistingGroupIndex = addOnGroupsWithVariants.findIndex(function (item) {
+          return item.id === currentGroupId;
+        });
+
+        if (addOnGroupsWithVariants[exsistingGroupIndex]) {
+          var addOnGroup = addOnGroupsWithVariants[exsistingGroupIndex];
+          addOnGroupsWithVariants[exsistingGroupIndex] = _extends({}, addOnGroup, {
+            variants: [].concat(addOnGroup.variants, addon.attributes)
+          });
+        } else {
+          var group = addOnsGroups.find(function (group) {
+            return group.attributes.id === currentGroupId;
+          }) || {};
+          addOnGroupsWithVariants.push(_extends({}, group.attributes, {
+            variants: [].concat(addon.attributes)
+          }));
+        }
+      } else {
+        addOnsWithoutVariants.push(addon.attributes);
+      }
+    });
+    return addOnGroupsWithVariants.concat(addOnsWithoutVariants);
+  } // Adapt only simple addons data
+
+
+  var adaptedAddons = addons.map(function (addon) {
+    return _extends({}, addon.attributes);
+  });
+  return adaptedAddons;
+};
+var cartAdapter = function cartAdapter(cart) {
+  var cartData = _get(cart, 'data.data.attributes.cart', []);
+
+  return cartData[0] || {};
+};
+
+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: SelectField,
+    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;
+  }
+
+  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 setted any restriction
+    if (_isNull(availableStock)) {
+      filteredStockCount = 10;
+    } else {
+      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) {
+      addon.sortOrder = Number(addon.variants[0].sortOrder);
+    } else {
+      addon.sortOrder = Number(addon.sortOrder);
+    }
+  });
+
+  var sortedAddons = _sortBy(addonsCopy, function (addon) {
+    return addon.sortOrder;
+  });
+
+  if (sortDirection === "desc") {
+    return _reverse(sortedAddons);
+  }
+
+  return sortedAddons;
+};
+
+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$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,
+      onPostCheckoutSuccess = _ref$onPostCheckoutSu === void 0 ? _identity : _ref$onPostCheckoutSu,
+      _ref$onPostCheckoutEr = _ref.onPostCheckoutError,
+      onPostCheckoutError = _ref$onPostCheckoutEr === void 0 ? _identity : _ref$onPostCheckoutEr,
+      _ref$onConfirmSelecti = _ref.onConfirmSelectionSuccess,
+      onConfirmSelectionSuccess = _ref$onConfirmSelecti === void 0 ? _identity : _ref$onConfirmSelecti,
+      _ref$onConfirmSelecti2 = _ref.onConfirmSelectionError,
+      onConfirmSelectionError = _ref$onConfirmSelecti2 === void 0 ? _identity : _ref$onConfirmSelecti2;
+  var eventId = getQueryVariable('event_id');
+
+  var _useState = React.useState([]),
+      addons = _useState[0],
+      setAddons = _useState[1];
+
+  var _useState2 = React.useState({}),
+      addonsOptions = _useState2[0],
+      setAddonsOptions = _useState2[1];
+
+  var _useState3 = React.useState({}),
+      groupsWithSelectedVariants = _useState3[0],
+      setGroupsWithSelectedVariants = _useState3[1];
+
+  var _useState4 = React.useState({}),
+      groupsWithInitialVariantsValues = _useState4[0],
+      setGroupsWithInitialVariantsValues = _useState4[1];
+
+  var _useState5 = React.useState(true),
+      loading = _useState5[0],
+      setLoading = _useState5[1];
+
+  React.useEffect(function () {
+    var getAddonsPageInfo = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+        var cart, cartAdaptedData, choosedTicketCount, choosedTicketID, addonsData, adaptedAddons, ticketRelatedAddons, sortedTicketAddons, _getAddonSelectOption, addonsWithOptions, groupsWithSelectedVariantsInfo, groupsWithVariants;
+
+        return runtime_1.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+
+                if (!eventId) {
+                  _context.next = 21;
+                  break;
+                }
+
+                setLoading(true); // Get choosed ticket info (id, count) from Cart request for addons options calculations
+
+                _context.next = 5;
+                return getCart();
+
+              case 5:
+                cart = _context.sent;
+                cartAdaptedData = cartAdapter(cart) || {};
+                choosedTicketCount = Number(cartAdaptedData.quantity);
+                choosedTicketID = cartAdaptedData.id;
+                _context.next = 11;
+                return getAddons(eventId);
+
+              case 11:
+                addonsData = _context.sent;
+                adaptedAddons = addonsWithGroupsAdapter(addonsData);
+                ticketRelatedAddons = getTicketRelatedAddons(adaptedAddons, choosedTicketID);
+                sortedTicketAddons = getSortedAddons(ticketRelatedAddons);
+                setAddons(sortedTicketAddons); // Collect addons and addon group options
+
+                _getAddonSelectOption = getAddonSelectOptions(adaptedAddons, choosedTicketCount), addonsWithOptions = _getAddonSelectOption.addonsWithOptions, groupsWithSelectedVariantsInfo = _getAddonSelectOption.groupsWithSelectedVariantsInfo, groupsWithVariants = _getAddonSelectOption.groupsWithVariants;
+                setAddonsOptions(addonsWithOptions);
+                setGroupsWithSelectedVariants(groupsWithSelectedVariantsInfo);
+                setGroupsWithInitialVariantsValues(groupsWithVariants); // Success callback props
+
+                onGetAddonsPageInfoSuccess(addonsData);
+
+              case 21:
+                _context.next = 26;
+                break;
+
+              case 23:
+                _context.prev = 23;
+                _context.t0 = _context["catch"](0);
+                // Callback error props
+                onGetAddonsPageInfoError(_context.t0);
+
+              case 26:
+                _context.prev = 26;
+                setLoading(false);
+                return _context.finish(26);
+
+              case 29:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[0, 23, 26, 29]]);
+      }));
+
+      return function getAddonsPageInfo() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    getAddonsPageInfo();
+  }, []);
+
+  var recreateGroupVariantsSelectOptions = function recreateGroupVariantsSelectOptions(groupId, changedGroupd) {
+    var choosedVariants = changedGroupd.choosedVariants,
+        limit = changedGroupd.limit,
+        selectedCount = changedGroupd.selectedCount;
+    var remainingGroupStock = limit - selectedCount;
+    var recreatedVariantsOptions = {}; // Regenerate variants allowed stock counts
+
+    for (var variant in choosedVariants) {
+      var variantId = variant;
+      var variantCurrSelectedValue = choosedVariants[variant];
+      var allowedOptionCount = void 0; // Formula for regenerating
+
+      if (remainingGroupStock >= groupsWithInitialVariantsValues[groupId][variantId] - variantCurrSelectedValue) {
+        allowedOptionCount = groupsWithInitialVariantsValues[groupId][variantId];
+      } else {
+        allowedOptionCount = remainingGroupStock + variantCurrSelectedValue;
+      }
+
+      recreatedVariantsOptions[variantId] = generateSelectOptions(0, allowedOptionCount);
+    }
+
+    setAddonsOptions(function (prevState) {
+      return Object.assign({}, prevState, recreatedVariantsOptions);
+    });
+  };
+
+  var onFieldChange = function onFieldChange(id, value, addon) {
+    // If changeableGroup exsists it means that group with limitation variant was changed
+    var changeableGroup = groupsWithSelectedVariants[addon.id];
+
+    if (changeableGroup) {
+      var _extends2, _extends3;
+
+      var currGroupId = addon.id;
+      var currSelectedVariantId = id;
+      var currSelectedVariantCount = Number(value);
+      var currSelectedVariantPrevCount = groupsWithSelectedVariants[currGroupId].choosedVariants[currSelectedVariantId];
+      var currSelectedGroupCount = changeableGroup.selectedCount + (currSelectedVariantCount - currSelectedVariantPrevCount); // Update Group info
+
+      var updatedGroupsWithSelectedVariants = _extends({}, groupsWithSelectedVariants, (_extends3 = {}, _extends3[currGroupId] = _extends({}, groupsWithSelectedVariants[currGroupId], {
+        selectedCount: currSelectedGroupCount,
+        choosedVariants: _extends({}, groupsWithSelectedVariants[currGroupId].choosedVariants, (_extends2 = {}, _extends2[currSelectedVariantId] = currSelectedVariantCount, _extends2))
+      }), _extends3));
+
+      setGroupsWithSelectedVariants(updatedGroupsWithSelectedVariants); // Recreate Select Options for Addon Group Variants
+
+      recreateGroupVariantsSelectOptions(currGroupId, updatedGroupsWithSelectedVariants[currGroupId]);
+    }
+  };
+
+  var handleConfirm = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(values) {
+      var _pageConfigsData$skip, _pageConfigsData$name, _pageConfigsData$age_, _pageConfigsData$phon, _pageConfigsData$has_, pageConfigsDataResponse, pageConfigsData, isWindowDefined, skipBillingPage, nameIsRequired, ageIsRequired, phoneIsRequired, hasAddOn, ticketsQuantity, userData, checkoutBody, checkoutResponse, hash, total;
+
+      return runtime_1.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return getCheckoutPageConfigs();
+
+            case 3:
+              pageConfigsDataResponse = _context2.sent;
+              pageConfigsData = _get(pageConfigsDataResponse, 'data.attributes') || {};
+              isWindowDefined = typeof window !== 'undefined';
+              skipBillingPage = (_pageConfigsData$skip = pageConfigsData.skip_billing_page) != null ? _pageConfigsData$skip : false;
+              nameIsRequired = (_pageConfigsData$name = pageConfigsData.names_required) != null ? _pageConfigsData$name : false;
+              ageIsRequired = (_pageConfigsData$age_ = pageConfigsData.age_required) != null ? _pageConfigsData$age_ : false;
+              phoneIsRequired = (_pageConfigsData$phon = pageConfigsData.phone_required) != null ? _pageConfigsData$phon : false;
+              hasAddOn = (_pageConfigsData$has_ = pageConfigsData.has_add_on) != null ? _pageConfigsData$has_ : false;
+
+              if (!(skipBillingPage && enableBillingInfoAutoCreate)) {
+                _context2.next = 32;
+                break;
+              }
+
+              ticketsQuantity = window.localStorage.getItem('quantity');
+              userData = JSON.parse(window.localStorage.getItem('user_data') || '{}');
+              checkoutBody = createCheckoutDataBodyWithDefaultHolder(Number(ticketsQuantity) || 0, userData);
+              _context2.prev = 15;
+              _context2.next = 18;
+              return postOnCheckout(_extends({}, checkoutBody, {
+                attributes: _extends({}, checkoutBody.attributes, {
+                  add_ons: values
+                })
+              }));
+
+            case 18:
+              checkoutResponse = _context2.sent;
+              hash = _get(checkoutResponse, 'data.data.attributes.hash');
+              total = _get(checkoutResponse, 'data.data.attributes.total');
+              isWindowDefined && window.localStorage.removeItem('quantity');
+              onPostCheckoutSuccess(checkoutResponse == null ? void 0 : checkoutResponse.data);
+              onConfirmSelectionSuccess({
+                skip_billing_page: skipBillingPage,
+                names_required: nameIsRequired,
+                phone_required: phoneIsRequired,
+                age_required: ageIsRequired,
+                event_id: String(eventId),
+                hash: hash,
+                total: total,
+                hasAddOn: hasAddOn
+              });
+              _context2.next = 30;
+              break;
+
+            case 26:
+              _context2.prev = 26;
+              _context2.t0 = _context2["catch"](15);
+              onPostCheckoutError(_context2.t0);
+              onConfirmSelectionError(_context2.t0);
+
+            case 30:
+              _context2.next = 33;
+              break;
+
+            case 32:
+              if (isWindowDefined) {
+                window.localStorage.setItem('add_ons', JSON.stringify(values));
+                onConfirmSelectionSuccess({
+                  skip_billing_page: skipBillingPage && enableBillingInfoAutoCreate,
+                  names_required: nameIsRequired,
+                  phone_required: phoneIsRequired,
+                  age_required: ageIsRequired,
+                  event_id: String(eventId),
+                  hasAddOn: hasAddOn
+                });
+              } else {
+                onConfirmSelectionError({
+                  error: true,
+                  message: 'Window is not defined'
+                });
+              }
+
+            case 33:
+              _context2.next = 38;
+              break;
+
+            case 35:
+              _context2.prev = 35;
+              _context2.t1 = _context2["catch"](0);
+              onConfirmSelectionError(_context2.t1);
+
+            case 38:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 35], [15, 26]]);
+    }));
+
+    return function handleConfirm(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  if (loading) {
+    return React__default.createElement("div", {
+      className: classNamePrefix + "_loader"
+    }, React__default.createElement(material.CircularProgress, {
+      size: 50
+    }));
+  }
+
+  return React__default.createElement("div", {
+    className: classNamePrefix + "_container"
+  }, React__default.createElement("div", {
+    className: classNamePrefix + "_block"
+  }, React__default.createElement("div", {
+    className: classNamePrefix + "_line_block"
+  }, React__default.createElement("div", {
+    className: classNamePrefix + "_line"
+  }), React__default.createElement("p", {
+    className: classNamePrefix + "_info_title"
+  }, "Get Your Tickets")), React__default.createElement("div", {
+    className: classNamePrefix + "_title"
+  }, "UPGRADES & ADD-ONS"), React__default.createElement("div", {
+    className: classNamePrefix + "_subtitle"
+  }, "PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW"), React__default.createElement(formik.Formik, {
+    initialValues: {},
+    onSubmit: handleConfirm
+  }, function (_ref4) {
+    var values = _ref4.values;
+
+    var isConfirmDisabled = _isEmpty(values);
+
+    return React__default.createElement(formik.Form, {
+      autoComplete: "off",
+      className: "form_holder"
+    }, React__default.createElement(React__default.Fragment, null, addons.map(function (addon) {
+      var price = addon.feeIncluded ? addon.price : addon.cost;
+      var isAddonFree = Number(price) === 0;
+      var addonNormalizedPrice = isAddonFree ? 'FREE' : currencyNormalizerCreator(getNormalizedPrice(price), addon.currency);
+      return React__default.createElement("div", {
+        key: addon.id,
+        className: classNamePrefix + "_product_block"
+      }, React__default.createElement("div", {
+        className: classNamePrefix + "_product_images"
+      }, addon.imageUrl && React__default.createElement("div", {
+        className: classNamePrefix + "_product_image_block"
+      }, React__default.createElement("img", {
+        src: addon.imageUrl,
+        alt: "No Data"
+      }))), React__default.createElement("div", {
+        className: classNamePrefix + "_product_info_block"
+      }, React__default.createElement("div", {
+        className: classNamePrefix + "_product_title"
+      }, addon.name), React__default.createElement("div", {
+        className: classNamePrefix + "_product_price"
+      }, addonNormalizedPrice, !isAddonFree && React__default.createElement("span", {
+        className: classNamePrefix + "_product_fee"
+      }, addon.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'))), React__default.createElement("div", {
+        className: classNamePrefix + "_product_desc",
+        dangerouslySetInnerHTML: createMarkup(addon.description)
+      }), React__default.createElement("div", {
+        className: classNamePrefix + "_product_select_container"
+      }, addon.variants ? addon.variants.map(function (variant) {
+        return (// Group Variants
+          React__default.createElement(AddonComponent, {
+            key: variant.id,
+            data: variant,
+            selectOptions: addonsOptions[variant.id],
+            classNamePrefix: classNamePrefix,
+            handleAddonChange: function handleAddonChange(id, value) {
+              return onFieldChange(id, value, addon);
+            }
+          })
+        );
+      }) : // Simple Addon
+      React__default.createElement(AddonComponent, {
+        key: addon.id,
+        data: addon,
+        selectOptions: addonsOptions[addon.id],
+        classNamePrefix: classNamePrefix,
+        handleAddonChange: function handleAddonChange(id, value) {
+          return onFieldChange(id, value, addon);
+        }
+      })));
+    }), React__default.createElement("button", {
+      type: "submit",
+      className: (isConfirmDisabled ? classNamePrefix + "_is_disabled" : '') + " " + classNamePrefix + "_submit_button",
+      disabled: isConfirmDisabled
+    }, "CONFIRM SELECTION")));
+  })));
+};
+
 var style$5 = {
   position: 'absolute',
   top: '10%',
@@ -7124,6 +7875,7 @@ var RsvpContainer = function RsvpContainer(_ref) {
   }, "RSVP"))))))));
 };
 
+exports.AddonsContainter = AddonsContainter;
 exports.BillingInfoContainer = BillingInfoContainer;
 exports.ConfirmationContainer = ConfirmationContainer;
 exports.ForgotPasswordModal = ForgotPasswordModal;