tf-checkout-react 1.0.46 → 1.0.50

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

@@ -16,6 +16,7 @@ import { makeStyles } from '@mui/styles';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
+import { nanoid } from 'nanoid';
 import Container from '@mui/material/Container';
 import Alert from '@mui/material/Alert';
 import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement, Elements } from '@stripe/react-stripe-js';
@@ -1097,6 +1098,9 @@ var getStates = function getStates(countryId) {
 var addToWaitingList = function addToWaitingList(id, data) {
   return publicRequest.post("/v1/event/" + id + "/add_to_waiting_list", data);
 };
+var getConditions = function getConditions(eventId) {
+  return publicRequest.get("v1/event/" + eventId + "/conditions");
+};
 
 var css_248z$1 = ".style_modal-title__2sUq_{align-items:center;background-color:#fff;display:flex;font-family:Inter;font-size:18px;font-weight:700;height:49px;line-height:22px;padding-left:25px;position:relative}.style_login-modal-body__2sFg5{padding:15px 25px}.style_login-modal-body__2sFg5 input{background:#fff!important}.style_login-modal-body__email__2nnEH,.style_login-modal-body__password__qS3g7{margin-bottom:20px}.style_login-action-button__1g9qt button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin:10px 0;outline:none;padding:10px;width:100%}.style_login-action-button__1g9qt button:hover{background-color:#505050;border-color:#505050}.style_server_auth__error__1340S{color:red;font-family:Inter;font-size:12px;font-style:normal;padding-left:25px;padding-top:15px}.style_info-text-for-login__28JQf{font-size:14px;margin-bottom:4px;padding-left:10px}";
 styleInject(css_248z$1);
@@ -1638,8 +1642,8 @@ var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, va
 
 var useStyles = /*#__PURE__*/makeStyles({
   input: {
-    "&::placeholder": {
-      color: "gray"
+    '&::placeholder': {
+      color: 'gray'
     }
   }
 });
@@ -1652,7 +1656,8 @@ var CustomField = function CustomField(_ref) {
       selectOptions = _ref$selectOptions === void 0 ? [] : _ref$selectOptions,
       _ref$form = _ref.form,
       touched = _ref$form.touched,
-      errors = _ref$form.errors;
+      errors = _ref$form.errors,
+      theme = _ref.theme;
   var isSelectField = type === 'select';
   var isShrink = Boolean(field.value) || type === 'date' || type === 'select';
   var isTouched = Boolean(_get(touched, field.name));
@@ -1677,7 +1682,11 @@ var CustomField = function CustomField(_ref) {
       }
     },
     SelectProps: {
-      "native": true
+      "native": true,
+      className: theme,
+      MenuProps: {
+        className: theme
+      }
     }
   }, field), isSelectField ? _map(selectOptions, function (option) {
     return React.createElement("option", {
@@ -1688,7 +1697,7 @@ var CustomField = function CustomField(_ref) {
   }) : null);
 };
 
-var _excluded$1 = ["label", "field"];
+var _excluded$1 = ["label", "field", "selectOptions", "theme"];
 var CheckboxField = function CheckboxField(_ref) {
   var label = _ref.label,
       field = _ref.field,
@@ -1810,55 +1819,50 @@ var LogicRunner = function LogicRunner(_ref) {
   return null;
 };
 
-var SectionContainer = function SectionContainer(_ref3) {
-  var children = _ref3.children;
-  return React.createElement(React.Fragment, null, children);
-};
-
-var BillingInfoContainer = function BillingInfoContainer(_ref4) {
-  var _ref4$data = _ref4.data,
-      data = _ref4$data === void 0 ? [] : _ref4$data,
-      _ref4$ticketHoldersFi = _ref4.ticketHoldersFields,
-      ticketHoldersFields = _ref4$ticketHoldersFi === void 0 ? {
+var BillingInfoContainer = function BillingInfoContainer(_ref3) {
+  var _ref3$data = _ref3.data,
+      data = _ref3$data === void 0 ? [] : _ref3$data,
+      _ref3$ticketHoldersFi = _ref3.ticketHoldersFields,
+      ticketHoldersFields = _ref3$ticketHoldersFi === void 0 ? {
     id: 1,
     fields: []
-  } : _ref4$ticketHoldersFi,
-      _ref4$initialValues = _ref4.initialValues,
-      initialValues = _ref4$initialValues === void 0 ? {} : _ref4$initialValues,
-      _ref4$buttonName = _ref4.buttonName,
-      buttonName = _ref4$buttonName === void 0 ? 'Submit' : _ref4$buttonName,
-      _ref4$handleSubmit = _ref4.handleSubmit,
-      handleSubmit = _ref4$handleSubmit === void 0 ? _identity : _ref4$handleSubmit,
-      _ref4$theme = _ref4.theme,
-      theme = _ref4$theme === void 0 ? 'light' : _ref4$theme,
-      _ref4$onRegisterSucce = _ref4.onRegisterSuccess,
-      onRegisterSuccess = _ref4$onRegisterSucce === void 0 ? function () {} : _ref4$onRegisterSucce,
-      _ref4$onRegisterError = _ref4.onRegisterError,
-      onRegisterError = _ref4$onRegisterError === void 0 ? function () {} : _ref4$onRegisterError,
-      _ref4$onSubmitError = _ref4.onSubmitError,
-      onSubmitError = _ref4$onSubmitError === void 0 ? function () {} : _ref4$onSubmitError,
-      _ref4$onGetCartSucces = _ref4.onGetCartSuccess,
-      onGetCartSuccess = _ref4$onGetCartSucces === void 0 ? function () {} : _ref4$onGetCartSucces,
-      _ref4$onGetCartError = _ref4.onGetCartError,
-      onGetCartError = _ref4$onGetCartError === void 0 ? function () {} : _ref4$onGetCartError,
-      _ref4$onGetCountriesS = _ref4.onGetCountriesSuccess,
-      onGetCountriesSuccess = _ref4$onGetCountriesS === void 0 ? function () {} : _ref4$onGetCountriesS,
-      _ref4$onGetCountriesE = _ref4.onGetCountriesError,
-      onGetCountriesError = _ref4$onGetCountriesE === void 0 ? function () {} : _ref4$onGetCountriesE,
-      _ref4$onGetStatesSucc = _ref4.onGetStatesSuccess,
-      onGetStatesSuccess = _ref4$onGetStatesSucc === void 0 ? function () {} : _ref4$onGetStatesSucc,
-      _ref4$onGetStatesErro = _ref4.onGetStatesError,
-      onGetStatesError = _ref4$onGetStatesErro === void 0 ? function () {} : _ref4$onGetStatesErro,
-      _ref4$onGetProfileDat = _ref4.onGetProfileDataSuccess,
-      onGetProfileDataSuccess = _ref4$onGetProfileDat === void 0 ? function () {} : _ref4$onGetProfileDat,
-      _ref4$onGetProfileDat2 = _ref4.onGetProfileDataError,
-      onGetProfileDataError = _ref4$onGetProfileDat2 === void 0 ? function () {} : _ref4$onGetProfileDat2,
-      _ref4$onAuthorizeSucc = _ref4.onAuthorizeSuccess,
-      onAuthorizeSuccess = _ref4$onAuthorizeSucc === void 0 ? function () {} : _ref4$onAuthorizeSucc,
-      _ref4$onAuthorizeErro = _ref4.onAuthorizeError,
-      onAuthorizeError = _ref4$onAuthorizeErro === void 0 ? function () {} : _ref4$onAuthorizeErro,
-      _ref4$onLogin = _ref4.onLogin,
-      onLogin = _ref4$onLogin === void 0 ? function () {} : _ref4$onLogin;
+  } : _ref3$ticketHoldersFi,
+      _ref3$initialValues = _ref3.initialValues,
+      initialValues = _ref3$initialValues === void 0 ? {} : _ref3$initialValues,
+      _ref3$buttonName = _ref3.buttonName,
+      buttonName = _ref3$buttonName === void 0 ? 'Submit' : _ref3$buttonName,
+      _ref3$handleSubmit = _ref3.handleSubmit,
+      handleSubmit = _ref3$handleSubmit === void 0 ? _identity : _ref3$handleSubmit,
+      _ref3$theme = _ref3.theme,
+      theme = _ref3$theme === void 0 ? 'light' : _ref3$theme,
+      _ref3$onRegisterSucce = _ref3.onRegisterSuccess,
+      onRegisterSuccess = _ref3$onRegisterSucce === void 0 ? function () {} : _ref3$onRegisterSucce,
+      _ref3$onRegisterError = _ref3.onRegisterError,
+      onRegisterError = _ref3$onRegisterError === void 0 ? function () {} : _ref3$onRegisterError,
+      _ref3$onSubmitError = _ref3.onSubmitError,
+      onSubmitError = _ref3$onSubmitError === void 0 ? function () {} : _ref3$onSubmitError,
+      _ref3$onGetCartSucces = _ref3.onGetCartSuccess,
+      onGetCartSuccess = _ref3$onGetCartSucces === void 0 ? function () {} : _ref3$onGetCartSucces,
+      _ref3$onGetCartError = _ref3.onGetCartError,
+      onGetCartError = _ref3$onGetCartError === void 0 ? function () {} : _ref3$onGetCartError,
+      _ref3$onGetCountriesS = _ref3.onGetCountriesSuccess,
+      onGetCountriesSuccess = _ref3$onGetCountriesS === void 0 ? function () {} : _ref3$onGetCountriesS,
+      _ref3$onGetCountriesE = _ref3.onGetCountriesError,
+      onGetCountriesError = _ref3$onGetCountriesE === void 0 ? function () {} : _ref3$onGetCountriesE,
+      _ref3$onGetStatesSucc = _ref3.onGetStatesSuccess,
+      onGetStatesSuccess = _ref3$onGetStatesSucc === void 0 ? function () {} : _ref3$onGetStatesSucc,
+      _ref3$onGetStatesErro = _ref3.onGetStatesError,
+      onGetStatesError = _ref3$onGetStatesErro === void 0 ? function () {} : _ref3$onGetStatesErro,
+      _ref3$onGetProfileDat = _ref3.onGetProfileDataSuccess,
+      onGetProfileDataSuccess = _ref3$onGetProfileDat === void 0 ? function () {} : _ref3$onGetProfileDat,
+      _ref3$onGetProfileDat2 = _ref3.onGetProfileDataError,
+      onGetProfileDataError = _ref3$onGetProfileDat2 === void 0 ? function () {} : _ref3$onGetProfileDat2,
+      _ref3$onAuthorizeSucc = _ref3.onAuthorizeSuccess,
+      onAuthorizeSuccess = _ref3$onAuthorizeSucc === void 0 ? function () {} : _ref3$onAuthorizeSucc,
+      _ref3$onAuthorizeErro = _ref3.onAuthorizeError,
+      onAuthorizeError = _ref3$onAuthorizeErro === void 0 ? function () {} : _ref3$onAuthorizeErro,
+      _ref3$onLogin = _ref3.onLogin,
+      onLogin = _ref3$onLogin === void 0 ? function () {} : _ref3$onLogin;
   var userData = typeof window !== 'undefined' && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
   var access_token = typeof window !== 'undefined' && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
 
@@ -1890,7 +1894,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
       showModalRegister = _useState7[0],
       setShowModalRegister = _useState7[1];
 
-  var _useState8 = useState(1),
+  var _useState8 = useState([]),
       ticketsQuantity = _useState8[0],
       setTicketsQuantity = _useState8[1];
 
@@ -1922,9 +1926,12 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
 
   var showDOB = getQueryVariable('age_required') === 'true';
   var showTicketHolderName = getQueryVariable('names_required') === 'true';
+  var eventId = getQueryVariable('event_id');
 
   var optedInFieldValue = _get(cartInfoData, 'optedIn', false);
 
+  var hideOptIn = _get(cartInfoData, 'hide_ttf_opt_in', false);
+
   var getQuantity = function getQuantity(cart) {
     if (cart === void 0) {
       cart = [];
@@ -1935,46 +1942,99 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
       qty += +item.quantity;
     });
     return qty;
-  }; // fetch cart data
+  }; //just once
+
+
+  useEffect(function () {
+    // fetch countries data
+    var fetchCountries = /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+        var res;
+        return runtime_1.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.prev = 0;
+                _context2.next = 3;
+                return getCountries();
+
+              case 3:
+                res = _context2.sent;
+                setCustomHeader(res);
+                setCountries(_map(_get(res, 'data.data'), function (item, key) {
+                  return {
+                    label: item,
+                    value: Number(key)
+                  };
+                }));
+                onGetCountriesSuccess(res.data);
+                _context2.next = 12;
+                break;
+
+              case 9:
+                _context2.prev = 9;
+                _context2.t0 = _context2["catch"](0);
+
+                if (axios.isAxiosError(_context2.t0)) {
+                  onGetCountriesError(_context2.t0);
+                }
 
+              case 12:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[0, 9]]);
+      }));
+
+      return function fetchCountries() {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+
+    fetchCountries();
+    fetchCart();
+  }, []); // fetch cart data
 
   var fetchCart = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
       var res, cartInfo, _cartInfo$cart, cart;
 
-      return runtime_1.wrap(function _callee2$(_context2) {
+      return runtime_1.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              _context2.prev = 0;
-              _context2.next = 3;
+              _context3.prev = 0;
+              _context3.next = 3;
               return getCart();
 
             case 3:
-              res = _context2.sent;
+              res = _context3.sent;
               setCustomHeader(res);
               cartInfo = _get(res, 'data.data.attributes');
               setCartInfo(cartInfo);
               _cartInfo$cart = cartInfo.cart, cart = _cartInfo$cart === void 0 ? [] : _cartInfo$cart;
-              setTicketsQuantity(getQuantity(cart));
+              setTicketsQuantity(new Array(getQuantity(cart)).fill(null).map(function () {
+                return nanoid();
+              }));
               onGetCartSuccess(res.data);
-              _context2.next = 15;
+              _context3.next = 15;
               break;
 
             case 12:
-              _context2.prev = 12;
-              _context2.t0 = _context2["catch"](0);
+              _context3.prev = 12;
+              _context3.t0 = _context3["catch"](0);
 
-              if (axios.isAxiosError(_context2.t0)) {
-                onGetCartError(_context2.t0);
+              if (axios.isAxiosError(_context3.t0)) {
+                onGetCartError(_context3.t0);
               }
 
             case 15:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2, null, [[0, 12]]);
+      }, _callee3, null, [[0, 12]]);
     }));
 
     return function fetchCart() {
@@ -1984,24 +2044,24 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
 
 
   var fetchUserData = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(token) {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4(token) {
       var userDataResponse, profileSpecifiedData, profileDataObj;
-      return runtime_1.wrap(function _callee3$(_context3) {
+      return runtime_1.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context3.prev = 0;
+              _context4.prev = 0;
 
               if (!(typeof window !== 'undefined' && token)) {
-                _context3.next = 10;
+                _context4.next = 10;
                 break;
               }
 
-              _context3.next = 4;
+              _context4.next = 4;
               return getProfileData(token);
 
             case 4:
-              userDataResponse = _context3.sent;
+              userDataResponse = _context4.sent;
               profileSpecifiedData = _get(userDataResponse, 'data.data');
               profileDataObj = setLoggedUserData(profileSpecifiedData);
               setUserValues(profileDataObj);
@@ -2009,23 +2069,23 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
               onGetProfileDataSuccess(userDataResponse.data);
 
             case 10:
-              _context3.next = 15;
+              _context4.next = 15;
               break;
 
             case 12:
-              _context3.prev = 12;
-              _context3.t0 = _context3["catch"](0);
+              _context4.prev = 12;
+              _context4.t0 = _context4["catch"](0);
 
-              if (axios.isAxiosError(_context3.t0)) {
-                onGetProfileDataError(_context3.t0);
+              if (axios.isAxiosError(_context4.t0)) {
+                onGetProfileDataError(_context4.t0);
               }
 
             case 15:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3, null, [[0, 12]]);
+      }, _callee4, null, [[0, 12]]);
     }));
 
     return function fetchUserData(_x) {
@@ -2034,58 +2094,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
   }();
 
   useEffect(function () {
-    fetchCart();
-    fetchUserData(access_token); // fetch countries data
-
-    var fetchCountries = /*#__PURE__*/function () {
-      var _ref7 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4() {
-        var res;
-        return runtime_1.wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                _context4.prev = 0;
-                _context4.next = 3;
-                return getCountries();
-
-              case 3:
-                res = _context4.sent;
-                setCustomHeader(res);
-                setCountries(_map(_get(res, 'data.data'), function (item, key) {
-                  return {
-                    label: item,
-                    value: Number(key)
-                  };
-                }));
-                onGetCountriesSuccess(res.data);
-                _context4.next = 12;
-                break;
-
-              case 9:
-                _context4.prev = 9;
-                _context4.t0 = _context4["catch"](0);
-
-                if (axios.isAxiosError(_context4.t0)) {
-                  onGetCountriesError(_context4.t0);
-                }
-
-              case 12:
-              case "end":
-                return _context4.stop();
-            }
-          }
-        }, _callee4, null, [[0, 9]]);
-      }));
-
-      return function fetchCountries() {
-        return _ref7.apply(this, arguments);
-      };
-    }();
-
-    if (!(countries && countries.length)) {
-      fetchCountries();
-    }
-  }, [access_token, countries]);
+    fetchUserData(access_token);
+  }, [access_token]);
   return React.createElement(React.Fragment, null, React.createElement(Formik, {
     initialValues: getInitialValues(data, _extends({}, initialValues, {
       email: emailLogged,
@@ -2128,7 +2138,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                 }
 
               case 9:
-                _checkoutBody = createCheckoutDataBody(ticketsQuantity, values, {
+                _checkoutBody = createCheckoutDataBody(ticketsQuantity.length, values, {
                   emailLogged: emailLogged,
                   firstNameLogged: firstNameLogged,
                   lastNameLogged: lastNameLogged
@@ -2138,7 +2148,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
 
               case 12:
                 _res = _context5.sent;
-                handleSubmit(values, formikHelpers, _res);
+                handleSubmit(values, formikHelpers, eventId, _res);
                 return _context5.abrupt("return");
 
               case 15:
@@ -2200,7 +2210,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                   window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
                 }
 
-                checkoutBody = createCheckoutDataBody(ticketsQuantity, values, {
+                checkoutBody = createCheckoutDataBody(ticketsQuantity.length, values, {
                   emailLogged: emailLogged,
                   firstNameLogged: firstNameLogged,
                   lastNameLogged: lastNameLogged
@@ -2210,7 +2220,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
 
               case 41:
                 res = _context5.sent;
-                handleSubmit(values, formikHelpers, res);
+                handleSubmit(values, formikHelpers, eventId, res);
                 _context5.next = 48;
                 break;
 
@@ -2270,8 +2280,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
         setShowModalLogin(true);
       }
     }, "Login"))), _map(data, function (item) {
-      var id = item.id,
-          label = item.label,
+      var label = item.label,
           labelClassName = item.labelClassName,
           fields = item.fields;
 
@@ -2279,8 +2288,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
         return null;
       }
 
-      return React.createElement(SectionContainer, {
-        key: id
+      return React.createElement(React.Fragment, {
+        key: nanoid()
       }, React.createElement("p", {
         className: labelClassName
       }, label), _map(fields, function (group) {
@@ -2288,8 +2297,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
             groupItems = group.groupItems,
             groupLabel = group.groupLabel,
             groupLabelClassName = group.groupLabelClassName;
-        return React.createElement(SectionContainer, {
-          key: group.id
+        return React.createElement(React.Fragment, {
+          key: nanoid()
         }, !isLoggedIn && React.createElement("div", {
           className: groupLabelClassName
         }, groupLabel), React.createElement("div", {
@@ -2307,38 +2316,49 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
             return false;
           }
 
+          if (el.name === 'brand_opt_in' && hideOptIn) {
+            return false;
+          }
+
           return true;
         }), function (element) {
-          return ['password', 'confirmPassword'].includes(element.name) && isLoggedIn ? null : React.createElement("div", {
-            className: element.className,
-            key: element.name
+          return ['password', 'confirmPassword'].includes(element.name) && isLoggedIn ? null : React.createElement(React.Fragment, {
+            key: nanoid()
+          }, element.name === 'email' ? React.createElement("div", {
+            className: "email-checking"
+          }, "IMPORTANT: Please double check that your email address is correct. It's where we send your confirmation and e-tickets to!") : null, React.createElement("div", {
+            className: element.className
           }, element.component ? element.component : React.createElement(Field, {
             name: element.name,
             label: element.label,
             type: element.type,
             validate: combineValidators(element.required ? requiredValidator : function () {}, element.onValidate ? element.onValidate : function () {}),
             component: element.type === 'checkbox' ? CheckboxField : CustomField,
-            selectOptions: element.name === 'country' ? countries : element.name === 'state' ? states : []
-          }));
+            selectOptions: element.name === 'country' ? countries : element.name === 'state' ? states : [],
+            theme: theme
+          })));
         })));
       }));
-    }), showTicketHolderName && React.createElement("div", null, React.createElement("p", null, ticketHoldersFields.label), _map(new Array(ticketsQuantity), function (_item, index) {
+    }), showTicketHolderName && React.createElement(React.Fragment, {
+      key: nanoid()
+    }, React.createElement("div", {
+      className: "ticket-holders-fields"
+    }, React.createElement("p", null, ticketHoldersFields.label), _map(ticketsQuantity, function (_item, index) {
       return React.createElement("div", {
-        key: index
+        key: nanoid()
       }, React.createElement("h5", null, "Ticket ", index + 1), _map(ticketHoldersFields.fields, function (group) {
         var groupClassname = group.groupClassname,
             groupItems = group.groupItems;
         return React.createElement("div", {
-          key: group.id
+          key: nanoid()
         }, React.createElement("div", {
           className: groupClassname
         }, _map(groupItems, function (element) {
           return React.createElement("div", {
             className: element.className,
-            key: element.name + "-" + index
+            key: nanoid()
           }, React.createElement(Field, {
             name: element.name + "-" + index,
-            key: element.name + "-" + index,
             label: element.label,
             type: element.type,
             required: true,
@@ -2347,8 +2367,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
           }));
         })));
       }));
-    })), React.createElement("div", {
-      className: "button-container"
+    }))), React.createElement("div", {
+      className: "button-container",
+      key: nanoid()
     }, React.createElement(LoadingButton, {
       type: "submit",
       variant: "contained",
@@ -2386,10 +2407,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
   }));
 };
 
-var css_248z$3 = ".style_payment_page__1PUd8{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.style_payment_page__1PUd8 .style_order_info_section__J1olw{padding:15px 0}.style_payment_page__1PUd8 .style_order_info_section__J1olw .style_order_info_block__3kZN4{padding-bottom:15px;padding-top:15px}.style_payment_page__1PUd8 .style_order_info_section__J1olw .style_order_info_block__3kZN4 .style_field-underline__2M8Bd{border-bottom:1px solid #000;padding-bottom:15px}.style_payment_page__1PUd8 .style_order_info_section__J1olw .style_order_info_block__3kZN4 .style_order_info_title__1MBgS{font-size:14px;font-weight:700;padding-bottom:3px}.style_payment_page__1PUd8 .style_order_info_section__J1olw .style_order_info_block__3kZN4 .style_order_info_text__3gSEK{font-size:16px;line-height:1.15;outline:none}.style_payment_page__1PUd8 .style_MuiBox-root__2LeaA{margin-left:auto;margin-right:auto;padding:20px;text-align:center}.style_payment_page__1PUd8 .style_payment_info_label__3Zmjp{padding:20px 0;text-align:center}.style_payment_page__1PUd8 .style_payment_form__2arf4{color:#fff;padding:20px}.style_payment_page__1PUd8 .style_payment_form__2arf4 input,.style_payment_page__1PUd8 .style_payment_form__2arf4 label{color:#fff}.style_payment_page__1PUd8 .style_payment_button__3WzAn{padding-top:20px;text-align:center}";
+var css_248z$3 = ".style_payment_page__1PUd8{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.style_payment_page__1PUd8 .style_order_info_section__J1olw{padding:15px 0}.style_payment_page__1PUd8 .style_order_info_section__J1olw .style_order_info_block__3kZN4{padding-bottom:15px;padding-top:15px}.style_payment_page__1PUd8 .style_order_info_section__J1olw .style_order_info_block__3kZN4 .style_field-underline__2M8Bd{border-bottom:1px solid #000;padding-bottom:15px}.style_payment_page__1PUd8 .style_order_info_section__J1olw .style_order_info_block__3kZN4 .style_order_info_title__1MBgS{font-size:14px;font-weight:700;padding-bottom:3px}.style_payment_page__1PUd8 .style_order_info_section__J1olw .style_order_info_block__3kZN4 .style_order_info_text__3gSEK{font-size:16px;line-height:1.15;outline:none}.style_payment_page__1PUd8 .style_MuiBox-root__2LeaA{margin-left:auto;margin-right:auto;padding:20px;text-align:center}.style_payment_page__1PUd8 .style_payment_info_label__3Zmjp{padding:20px 0;text-align:center}.style_payment_page__1PUd8 .style_payment_form__2arf4{color:#fff;padding:20px}.style_payment_page__1PUd8 .style_payment_form__2arf4 input,.style_payment_page__1PUd8 .style_payment_form__2arf4 label{color:#fff}.style_payment_page__1PUd8 .style_payment_button__3WzAn{padding-top:20px;text-align:center}.style_conditions-block__3XPwW{background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;box-shadow:inset 0 1px 1px rgba(0,0,0,.05);padding:19px}";
 styleInject(css_248z$3);
 
-var css_248z$4 = ".style_card_form_inner__7vzGq{background:#232323;border-radius:8px;padding:15px}.style_card_form_inner__7vzGq .style_card_label_text__F7GFa{color:#fff}.style_card_form_inner__7vzGq .style_StripeElement__jS5TJ{margin:5px 0 10px}.style_card_label_text__F7GFa{color:#fff}.style_payment_button__2rkp8{padding-top:15px;text-align:center}.style_payment_button__2rkp8 button{background-color:#212529;border-radius:8px;color:#fff;cursor:pointer;font-size:26px;padding:15px 30px;transition:opacity .5s;width:200px}.style_payment_button__2rkp8 button:hover{opacity:.7}.style_checkout_error_block__3LUN5{color:#e53935;font-weight:600;padding:15px 0}.style_zip_element__31oFa p{margin-bottom:0}.style_zip_element__31oFa input{background-color:#232323;border:none;color:#fff;font-size:18px;margin-top:5px;outline:none;width:100%}";
+var css_248z$4 = ".style_card_form_inner__7vzGq{background:#232323;border-radius:8px;padding:15px}.style_card_form_inner__7vzGq .style_card_label_text__F7GFa{color:#fff}.style_card_form_inner__7vzGq .style_StripeElement__jS5TJ{margin:5px 0 10px}.style_card_label_text__F7GFa{color:#fff}.style_payment_button__2rkp8{padding-top:15px;text-align:center}.style_payment_button__2rkp8 button{background-color:#212529;border-radius:8px;color:#fff;cursor:pointer;font-size:26px;padding:15px 30px;transition:opacity .5s;width:200px}.style_payment_button__2rkp8 button:hover{opacity:.7}.style_disabled-payment-button__3MiUR button{opacity:.3;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.style_checkout_error_block__3LUN5{color:#e53935;font-weight:600;padding:15px 0}.style_zip_element__31oFa p{margin-bottom:0}.style_zip_element__31oFa input{background-color:#232323;border:none;color:#fff;font-size:18px;margin-top:5px;outline:none;width:100%}";
 styleInject(css_248z$4);
 
 var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
@@ -2462,6 +2483,7 @@ var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency)
 var options = {
   style: {
     base: {
+      backgroundColor: '#232323',
       fontSize: '18px',
       color: '#ffffff',
       letterSpacing: '1px',
@@ -2489,7 +2511,9 @@ var CheckoutForm = function CheckoutForm(_ref) {
       _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
       _ref$handleSetLoading = _ref.handleSetLoading,
-      handleSetLoading = _ref$handleSetLoading === void 0 ? function () {} : _ref$handleSetLoading;
+      handleSetLoading = _ref$handleSetLoading === void 0 ? function () {} : _ref$handleSetLoading,
+      _ref$conditions = _ref.conditions,
+      conditions = _ref$conditions === void 0 ? [] : _ref$conditions;
   var stripe = useStripe();
   var elements = useElements();
 
@@ -2518,7 +2542,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
                 break;
               }
 
-              setStripeError("Please enter your zip code.");
+              setStripeError('Please enter your zip code.');
               handleSetLoading(false);
               return _context.abrupt("return");
 
@@ -2619,6 +2643,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
       zipCode && setPostalCode(zipCode);
     }
   }, []);
+  var buttonIsDiabled = !stripe || !!error || isLoading;
   return React.createElement("div", {
     className: "stripe_payment_container"
   }, !!stripeError && React.createElement("div", {
@@ -2658,10 +2683,21 @@ var CheckoutForm = function CheckoutForm(_ref) {
     value: postalCode,
     onChange: onChangePostalCode,
     placeholder: "ZIP"
-  }))), React.createElement("div", {
-    className: "payment_button"
+  }))), conditions == null ? void 0 : conditions.map(function (checkbox) {
+    return React.createElement("div", {
+      className: 'billing-info-container__singleField',
+      key: checkbox.id
+    }, React.createElement("div", {
+      className: "conditions-block"
+    }, React.createElement(CheckboxField, {
+      name: checkbox.id,
+      label: checkbox.text,
+      required: true
+    })));
+  }), React.createElement("div", {
+    className: "payment_button " + (buttonIsDiabled ? 'disabled-payment-button' : '')
   }, React.createElement("button", {
-    disabled: !stripe || !!error || isLoading,
+    disabled: buttonIsDiabled,
     type: "submit"
   }, isLoading ? React.createElement(CircularProgress$1, null) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
 };
@@ -2719,8 +2755,13 @@ var PaymentContainer = function PaymentContainer(_ref) {
       paymentIsLoading = _useState4[0],
       setPaymentIsLoading = _useState4[1];
 
+  var _useState5 = useState([]),
+      conditions = _useState5[0],
+      setConditions = _useState5[1];
+
   var showFormTitle = Boolean(formTitle);
   var showErrorText = Boolean(errorText);
+  var eventId = getQueryVariable('event_id');
   useEffect(function () {
     var hash = checkoutData.hash;
 
@@ -2771,21 +2812,64 @@ var PaymentContainer = function PaymentContainer(_ref) {
         }
       }, _callee, null, [[0, 7]]);
     }))();
-  }, [checkoutData]); // 1. get payment data   ---> v1/order/${hash}/review/ done
+  }, [checkoutData]); //just once
+
+  useEffect(function () {
+    // fetch conditions data
+    var fetchConditions = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+        var res, conditionsInfo;
+        return runtime_1.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!eventId) {
+                  _context2.next = 6;
+                  break;
+                }
+
+                _context2.next = 3;
+                return getConditions(eventId);
+
+              case 3:
+                res = _context2.sent;
+                conditionsInfo = _get(res, 'data.data.attributes');
+                setConditions(conditionsInfo ? conditionsInfo.map(function (item) {
+                  return {
+                    id: nanoid(),
+                    text: item
+                  };
+                }) : []);
+
+              case 6:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      return function fetchConditions() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+
+    fetchConditions();
+  }, []); // 1. get payment data   ---> v1/order/${hash}/review/ done
   // 2. handle payment     ---> v1/order/${orderHash}/pay/
   // 3. redirect to confirmation page
 
   var handlePaymentMiddleWare = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(error) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(error) {
       var order_hash, paymentSuccessResponse;
-      return runtime_1.wrap(function _callee2$(_context2) {
+      return runtime_1.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              _context2.prev = 0;
+              _context3.prev = 0;
 
               if (!error) {
-                _context2.next = 4;
+                _context3.next = 4;
                 break;
               }
 
@@ -2794,36 +2878,36 @@ var PaymentContainer = function PaymentContainer(_ref) {
 
             case 4:
               order_hash = reviewData.order_details.order_hash;
-              _context2.next = 7;
+              _context3.next = 7;
               return handlePaymentSuccess(order_hash);
 
             case 7:
-              paymentSuccessResponse = _context2.sent;
+              paymentSuccessResponse = _context3.sent;
 
               if (paymentSuccessResponse.status === 200) {
                 handlePayment(paymentSuccessResponse);
                 setPaymentIsLoading(false);
               }
 
-              _context2.next = 15;
+              _context3.next = 15;
               break;
 
             case 11:
-              _context2.prev = 11;
-              _context2.t0 = _context2["catch"](0);
-              setError(_get(_context2.t0, 'response.data.message'));
-              onPaymentError(_context2.t0.response);
+              _context3.prev = 11;
+              _context3.t0 = _context3["catch"](0);
+              setError(_get(_context3.t0, 'response.data.message'));
+              onPaymentError(_context3.t0.response);
 
             case 15:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2, null, [[0, 11]]);
+      }, _callee3, null, [[0, 11]]);
     }));
 
     return function handlePaymentMiddleWare(_x) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
 
@@ -2872,7 +2956,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
     isLoading: paymentIsLoading,
     handleSetLoading: function handleSetLoading(value) {
       return setPaymentIsLoading(value);
-    }
+    },
+    conditions: conditions
   }))))));
 };
 
@@ -3213,6 +3298,7 @@ var WaitingList = function WaitingList(_ref) {
       value: d.id
     };
   });
+  var showTicketsField = Boolean(ticketTypesList.length);
 
   var handleSubmit = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
@@ -3280,7 +3366,7 @@ var WaitingList = function WaitingList(_ref) {
       email: ''
     },
     onSubmit: handleSubmit
-  }, React.createElement(Form, null, React.createElement("div", {
+  }, React.createElement(Form, null, showTicketsField && React.createElement(React.Fragment, null, React.createElement("div", {
     className: "field-item"
   }, React.createElement(Field, {
     name: "ticketTypeId",
@@ -3304,7 +3390,7 @@ var WaitingList = function WaitingList(_ref) {
       value: '',
       disabled: true
     }].concat(generateQuantity(10))
-  })), React.createElement("div", {
+  }))), React.createElement("div", {
     className: "field-item"
   }, React.createElement(Field, {
     name: "firstName",
@@ -3524,7 +3610,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
                 onAddToCartSuccess({
                   skip_billing_page: (_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,
                   names_required: (_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,
-                  age_required: (_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
+                  age_required: (_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,
+                  event_id: String(eventId)
                 });
               }