tf-checkout-react 1.0.47 → 1.0.51

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

@@ -18,12 +18,14 @@ var Modal = _interopDefault(require('@mui/material/Modal'));
 var Box = _interopDefault(require('@mui/material/Box'));
 var _forEach = _interopDefault(require('lodash/forEach'));
 var _flatMapDeep = _interopDefault(require('lodash/flatMapDeep'));
+var _isArray = _interopDefault(require('lodash/isArray'));
+var nanoid = require('nanoid');
 var TextField = _interopDefault(require('@mui/material/TextField'));
 var styles = require('@mui/styles');
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
-var nanoid = require('nanoid');
+var Select = _interopDefault(require('@mui/material/Select'));
 var Container = _interopDefault(require('@mui/material/Container'));
 var Alert = _interopDefault(require('@mui/material/Alert'));
 var reactStripeJs = require('@stripe/react-stripe-js');
@@ -39,7 +41,6 @@ var _sortBy = _interopDefault(require('lodash/sortBy'));
 var _has = _interopDefault(require('lodash/has'));
 var FormControl = _interopDefault(require('@mui/material/FormControl'));
 var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
-var Select = _interopDefault(require('@mui/material/Select'));
 var Button$1 = _interopDefault(require('@mui/material/Button'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -96,6 +97,22 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -1530,6 +1547,7 @@ var setLoggedUserData = function setLoggedUserData(data) {
     first_name: data.firstName,
     last_name: data.lastName,
     email: data.email,
+    confirmEmail: data.email,
     city: (data == null ? void 0 : data.city) || '',
     country: (data == null ? void 0 : data.country) || '',
     phone: (data == null ? void 0 : data.phone) || '',
@@ -1610,11 +1628,43 @@ var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, va
 
   return body;
 };
+var getValidateFunctions = function getValidateFunctions(element, states) {
+  var validationFunctions = [];
+
+  if (element.required) {
+    if (element.name !== 'state' || element.name === 'state' && states.length) {
+      validationFunctions.push(requiredValidator);
+    }
+  }
+
+  if (element.onValidate) {
+    validationFunctions.push(element.onValidate);
+  }
+
+  return combineValidators.apply(void 0, validationFunctions);
+};
+var assingUniqueIds = function assingUniqueIds(data) {
+  if (_get(data[0], 'uniqueId')) {
+    return data;
+  }
+
+  return _map(data, function (item) {
+    _forEach(item, function (itemValue, key) {
+      if (_isArray(itemValue)) {
+        item[key] = assingUniqueIds(itemValue);
+      }
+    });
+
+    return _extends({}, item, {
+      uniqueId: nanoid.nanoid()
+    });
+  });
+};
 
 var useStyles = /*#__PURE__*/styles.makeStyles({
   input: {
-    "&::placeholder": {
-      color: "gray"
+    '&::placeholder': {
+      color: 'gray'
     }
   }
 });
@@ -1627,13 +1677,14 @@ 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));
 
   var error = _get(errors, field.name);
 
+  var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error;
   var classes = useStyles();
   return React__default.createElement(TextField, Object.assign({
     id: field.name,
@@ -1652,7 +1703,11 @@ var CustomField = function CustomField(_ref) {
       }
     },
     SelectProps: {
-      "native": true
+      "native": true,
+      className: theme,
+      MenuProps: {
+        className: theme
+      }
     }
   }, field), isSelectField ? _map(selectOptions, function (option) {
     return React__default.createElement("option", {
@@ -1663,7 +1718,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,
@@ -1692,6 +1747,101 @@ var getQueryVariable = function getQueryVariable(variable) {
   return false;
 };
 
+var useStyles$1 = /*#__PURE__*/styles.makeStyles({
+  input: {
+    '&::placeholder': {
+      color: 'gray'
+    }
+  }
+});
+var SelectField = function SelectField(_ref) {
+  var label = _ref.label,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      field = _ref.field,
+      _ref$selectOptions = _ref.selectOptions,
+      selectOptions = _ref$selectOptions === void 0 ? [] : _ref$selectOptions,
+      _ref$form = _ref.form,
+      touched = _ref$form.touched,
+      errors = _ref$form.errors,
+      theme = _ref.theme;
+  var isTouched = Boolean(_get(touched, field.name));
+
+  var error = _get(errors, field.name);
+
+  var classes = useStyles$1();
+  return React__default.createElement(material.FormControl, {
+    fullWidth: true
+  }, React__default.createElement(material.InputLabel, {
+    htmlFor: field.name,
+    error: !!error && isTouched
+  }, label), React__default.createElement(Select, Object.assign({
+    id: field.name,
+    label: label,
+    type: type,
+    fullWidth: true,
+    error: !!error && isTouched,
+    inputProps: {
+      id: field.name,
+      classes: {
+        input: classes.input
+      }
+    },
+    "native": true,
+    className: theme,
+    MenuProps: {
+      className: theme
+    }
+  }, field), _map(selectOptions, function (option) {
+    return React__default.createElement("option", {
+      key: option.value,
+      value: option.value,
+      disabled: option.disabled
+    }, option.label);
+  })), isTouched && error ? React__default.createElement(material.FormHelperText, {
+    error: !!error && isTouched
+  }, error) : null);
+};
+
+var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ErrorFocusInternal, _Component);
+
+  function ErrorFocusInternal() {
+    var _this;
+
+    _this = _Component.apply(this, arguments) || this;
+
+    _this.render = function () {
+      return null;
+    };
+
+    return _this;
+  }
+
+  var _proto = ErrorFocusInternal.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _prevProps$formik = prevProps.formik,
+        isSubmitting = _prevProps$formik.isSubmitting,
+        isValidating = _prevProps$formik.isValidating,
+        errors = _prevProps$formik.errors;
+    var keys = Object.keys(errors);
+
+    if (keys.length > 0 && isSubmitting && !isValidating) {
+      var selector = "[name=\"" + keys[0] + "\"]";
+      var errorElement = document.querySelector(selector);
+
+      if (errorElement) {
+        errorElement.focus();
+      }
+    }
+  };
+
+  return ErrorFocusInternal;
+}(React.Component);
+
+var ErrorFocus = /*#__PURE__*/formik.connect(ErrorFocusInternal);
+
 var LogicRunner = function LogicRunner(_ref) {
   var values = _ref.values,
       setStates = _ref.setStates,
@@ -1763,7 +1913,7 @@ var LogicRunner = function LogicRunner(_ref) {
               lastName: parsedData == null ? void 0 : parsedData.last_name,
               email: (parsedData == null ? void 0 : parsedData.email) || '',
               phone: (parsedData == null ? void 0 : parsedData.phone) || '',
-              confirmEmail: '',
+              confirmEmail: (parsedData == null ? void 0 : parsedData.email) || '',
               state: (parsedData == null ? void 0 : parsedData.state) || '',
               street_address: (parsedData == null ? void 0 : parsedData.street_address) || '',
               country: (parsedData == null ? void 0 : parsedData.country) || 1,
@@ -1785,93 +1935,88 @@ var LogicRunner = function LogicRunner(_ref) {
   return null;
 };
 
-var SectionContainer = function SectionContainer(_ref3) {
-  var children = _ref3.children;
-  return React__default.createElement(React__default.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') || '' : '';
 
-  var _useState = React.useState({}),
-      cartInfoData = _useState[0],
-      setCartInfo = _useState[1];
+  var _useState = React.useState(data),
+      dataWithUniqueIds = _useState[0],
+      setDataWithUniqueIds = _useState[1];
 
-  var _useState2 = React.useState([]),
-      countries = _useState2[0],
-      setCountries = _useState2[1];
+  var _useState2 = React.useState({}),
+      cartInfoData = _useState2[0],
+      setCartInfo = _useState2[1];
 
   var _useState3 = React.useState([]),
-      states = _useState3[0],
-      setStates = _useState3[1];
+      countries = _useState3[0],
+      setCountries = _useState3[1];
 
-  var _useState4 = React.useState(false),
-      showModalLogin = _useState4[0],
-      setShowModalLogin = _useState4[1];
+  var _useState4 = React.useState([]),
+      states = _useState4[0],
+      setStates = _useState4[1];
 
   var _useState5 = React.useState(false),
-      alreadyHasUser = _useState5[0],
-      setAlreadyHasUser = _useState5[1];
+      showModalLogin = _useState5[0],
+      setShowModalLogin = _useState5[1];
 
   var _useState6 = React.useState(false),
-      userExpired = _useState6[0],
-      setUserExpired = _useState6[1];
+      alreadyHasUser = _useState6[0],
+      setAlreadyHasUser = _useState6[1];
 
   var _useState7 = React.useState(false),
-      showModalRegister = _useState7[0],
-      setShowModalRegister = _useState7[1];
+      userExpired = _useState7[0],
+      setUserExpired = _useState7[1];
 
-  var _useState8 = React.useState([]),
-      ticketsQuantity = _useState8[0],
-      setTicketsQuantity = _useState8[1];
+  var _useState8 = React.useState(false),
+      showModalRegister = _useState8[0],
+      setShowModalRegister = _useState8[1];
 
   var _useState9 = React.useState([]),
-      conditions = _useState9[0],
-      setConditions = _useState9[1];
+      ticketsQuantity = _useState9[0],
+      setTicketsQuantity = _useState9[1];
 
   var _useState10 = React.useState({
     firstName: '',
@@ -1905,7 +2050,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
 
   var optedInFieldValue = _get(cartInfoData, 'optedIn', false);
 
-  var hideOptIn = _get(cartInfoData, 'hide_ttf_opt_in', false);
+  var hideTtfOptIn = _get(cartInfoData, 'hide_ttf_opt_in', true);
+
+  if (!_get(dataWithUniqueIds, '[0].uniqueId')) {
+    setDataWithUniqueIds(assingUniqueIds(data));
+  }
 
   var getQuantity = function getQuantity(cart) {
     if (cart === void 0) {
@@ -1921,60 +2070,20 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
 
 
   React.useEffect(function () {
-    // fetch conditions data
-    var fetchConditions = /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
-        var res, conditionsInfo;
+    // 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:
-                if (!eventId) {
-                  _context2.next = 6;
-                  break;
-                }
-
+                _context2.prev = 0;
                 _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.nanoid(),
-                    text: item
-                  };
-                }) : []);
-
-              case 6:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2);
-      }));
-
-      return function fetchConditions() {
-        return _ref5.apply(this, arguments);
-      };
-    }();
-
-    fetchConditions(); // fetch countries data
-
-    var fetchCountries = /*#__PURE__*/function () {
-      var _ref6 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
-        var res;
-        return runtime_1.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                _context3.prev = 0;
-                _context3.next = 3;
                 return getCountries();
 
               case 3:
-                res = _context3.sent;
+                res = _context2.sent;
                 setCustomHeader(res);
                 setCountries(_map(_get(res, 'data.data'), function (item, key) {
                   return {
@@ -1983,27 +2092,27 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                   };
                 }));
                 onGetCountriesSuccess(res.data);
-                _context3.next = 12;
+                _context2.next = 12;
                 break;
 
               case 9:
-                _context3.prev = 9;
-                _context3.t0 = _context3["catch"](0);
+                _context2.prev = 9;
+                _context2.t0 = _context2["catch"](0);
 
-                if (axios.isAxiosError(_context3.t0)) {
-                  onGetCountriesError(_context3.t0);
+                if (axios.isAxiosError(_context2.t0)) {
+                  onGetCountriesError(_context2.t0);
                 }
 
               case 12:
               case "end":
-                return _context3.stop();
+                return _context2.stop();
             }
           }
-        }, _callee3, null, [[0, 9]]);
+        }, _callee2, null, [[0, 9]]);
       }));
 
       return function fetchCountries() {
-        return _ref6.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }();
 
@@ -2012,19 +2121,19 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
   }, []); // fetch cart data
 
   var fetchCart = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4() {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
       var res, cartInfo, _cartInfo$cart, cart;
 
-      return runtime_1.wrap(function _callee4$(_context4) {
+      return runtime_1.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context4.prev = _context4.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              _context4.prev = 0;
-              _context4.next = 3;
+              _context3.prev = 0;
+              _context3.next = 3;
               return getCart();
 
             case 3:
-              res = _context4.sent;
+              res = _context3.sent;
               setCustomHeader(res);
               cartInfo = _get(res, 'data.data.attributes');
               setCartInfo(cartInfo);
@@ -2033,50 +2142,50 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                 return nanoid.nanoid();
               }));
               onGetCartSuccess(res.data);
-              _context4.next = 15;
+              _context3.next = 15;
               break;
 
             case 12:
-              _context4.prev = 12;
-              _context4.t0 = _context4["catch"](0);
+              _context3.prev = 12;
+              _context3.t0 = _context3["catch"](0);
 
-              if (axios.isAxiosError(_context4.t0)) {
-                onGetCartError(_context4.t0);
+              if (axios.isAxiosError(_context3.t0)) {
+                onGetCartError(_context3.t0);
               }
 
             case 15:
             case "end":
-              return _context4.stop();
+              return _context3.stop();
           }
         }
-      }, _callee4, null, [[0, 12]]);
+      }, _callee3, null, [[0, 12]]);
     }));
 
     return function fetchCart() {
-      return _ref7.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }(); // fetch user data
 
 
   var fetchUserData = /*#__PURE__*/function () {
-    var _ref8 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5(token) {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4(token) {
       var userDataResponse, profileSpecifiedData, profileDataObj;
-      return runtime_1.wrap(function _callee5$(_context5) {
+      return runtime_1.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context5.prev = 0;
+              _context4.prev = 0;
 
               if (!(typeof window !== 'undefined' && token)) {
-                _context5.next = 10;
+                _context4.next = 10;
                 break;
               }
 
-              _context5.next = 4;
+              _context4.next = 4;
               return getProfileData(token);
 
             case 4:
-              userDataResponse = _context5.sent;
+              userDataResponse = _context4.sent;
               profileSpecifiedData = _get(userDataResponse, 'data.data');
               profileDataObj = setLoggedUserData(profileSpecifiedData);
               setUserValues(profileDataObj);
@@ -2084,27 +2193,27 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
               onGetProfileDataSuccess(userDataResponse.data);
 
             case 10:
-              _context5.next = 15;
+              _context4.next = 15;
               break;
 
             case 12:
-              _context5.prev = 12;
-              _context5.t0 = _context5["catch"](0);
+              _context4.prev = 12;
+              _context4.t0 = _context4["catch"](0);
 
-              if (axios.isAxiosError(_context5.t0)) {
-                onGetProfileDataError(_context5.t0);
+              if (axios.isAxiosError(_context4.t0)) {
+                onGetProfileDataError(_context4.t0);
               }
 
             case 15:
             case "end":
-              return _context5.stop();
+              return _context4.stop();
           }
         }
-      }, _callee5, null, [[0, 12]]);
+      }, _callee4, null, [[0, 12]]);
     }));
 
     return function fetchUserData(_x) {
-      return _ref8.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
 
@@ -2112,7 +2221,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
     fetchUserData(access_token);
   }, [access_token]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(formik.Formik, {
-    initialValues: getInitialValues(data, _extends({}, initialValues, {
+    initialValues: getInitialValues(dataWithUniqueIds, _extends({}, initialValues, {
       email: emailLogged,
       firstName: firstNameLogged,
       lastName: lastNameLogged,
@@ -2121,30 +2230,30 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
     }), userValues),
     enableReinitialize: true,
     onSubmit: function () {
-      var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee6(values, formikHelpers) {
+      var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5(values, formikHelpers) {
         var updatedUserData, _profileSpecifiedData, _profileDataObj, _checkoutBody, _res, bodyFormData, access_token_register, resRegister, refreshToken, tokens, _e$response, _e$response$data, error, profileData, profileSpecifiedData, profileDataObj, checkoutBody, res, _e$response2;
 
-        return runtime_1.wrap(function _callee6$(_context6) {
+        return runtime_1.wrap(function _callee5$(_context5) {
           while (1) {
-            switch (_context6.prev = _context6.next) {
+            switch (_context5.prev = _context5.next) {
               case 0:
-                _context6.prev = 0;
+                _context5.prev = 0;
 
                 if (!isLoggedIn) {
-                  _context6.next = 15;
+                  _context5.next = 15;
                   break;
                 }
 
                 if (!access_token) {
-                  _context6.next = 9;
+                  _context5.next = 9;
                   break;
                 }
 
-                _context6.next = 5;
+                _context5.next = 5;
                 return getProfileData(access_token);
 
               case 5:
-                updatedUserData = _context6.sent;
+                updatedUserData = _context5.sent;
                 _profileSpecifiedData = _get(updatedUserData, 'data.data');
                 _profileDataObj = setLoggedUserData(_profileSpecifiedData);
 
@@ -2158,23 +2267,23 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                   firstNameLogged: firstNameLogged,
                   lastNameLogged: lastNameLogged
                 }, showDOB);
-                _context6.next = 12;
+                _context5.next = 12;
                 return postOnCheckout(_checkoutBody, access_token);
 
               case 12:
-                _res = _context6.sent;
-                handleSubmit(values, formikHelpers, _res);
-                return _context6.abrupt("return");
+                _res = _context5.sent;
+                handleSubmit(values, formikHelpers, eventId, _res);
+                return _context5.abrupt("return");
 
               case 15:
                 bodyFormData = createRegisterFormData(values);
                 access_token_register = null;
-                _context6.prev = 17;
-                _context6.next = 20;
+                _context5.prev = 17;
+                _context5.next = 20;
                 return register(bodyFormData);
 
               case 20:
-                resRegister = _context6.sent;
+                resRegister = _context5.sent;
                 access_token_register = _get(resRegister, 'data.data.attributes.access_token');
                 refreshToken = _get(resRegister, 'data.data.attributes.refresh_token');
                 handleSetAccessToken(access_token_register);
@@ -2183,15 +2292,15 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                   refreshToken: refreshToken
                 };
                 onRegisterSuccess(tokens);
-                _context6.next = 32;
+                _context5.next = 32;
                 break;
 
               case 28:
-                _context6.prev = 28;
-                _context6.t0 = _context6["catch"](17);
+                _context5.prev = 28;
+                _context5.t0 = _context5["catch"](17);
 
-                if (axios.isAxiosError(_context6.t0)) {
-                  error = _context6.t0 == null ? void 0 : (_e$response = _context6.t0.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message;
+                if (axios.isAxiosError(_context5.t0)) {
+                  error = _context5.t0 == null ? void 0 : (_e$response = _context5.t0.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message;
 
                   if (_includes(error, 'You must be aged')) {
                     formikHelpers.setFieldError('holderAge', error);
@@ -2207,17 +2316,17 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                     setShowModalLogin(true);
                   }
 
-                  onRegisterError(_context6.t0);
+                  onRegisterError(_context5.t0);
                 }
 
-                return _context6.abrupt("return");
+                return _context5.abrupt("return");
 
               case 32:
-                _context6.next = 34;
+                _context5.next = 34;
                 return getProfileData(access_token_register);
 
               case 34:
-                profileData = _context6.sent;
+                profileData = _context5.sent;
                 profileSpecifiedData = _get(profileData, 'data.data');
                 profileDataObj = setLoggedUserData(profileSpecifiedData);
 
@@ -2230,21 +2339,21 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                   firstNameLogged: firstNameLogged,
                   lastNameLogged: lastNameLogged
                 }, showDOB);
-                _context6.next = 41;
+                _context5.next = 41;
                 return postOnCheckout(checkoutBody, access_token_register);
 
               case 41:
-                res = _context6.sent;
-                handleSubmit(values, formikHelpers, res);
-                _context6.next = 48;
+                res = _context5.sent;
+                handleSubmit(values, formikHelpers, eventId, res);
+                _context5.next = 48;
                 break;
 
               case 45:
-                _context6.prev = 45;
-                _context6.t1 = _context6["catch"](0);
+                _context5.prev = 45;
+                _context5.t1 = _context5["catch"](0);
 
-                if (axios.isAxiosError(_context6.t1)) {
-                  if (((_e$response2 = _context6.t1.response) == null ? void 0 : _e$response2.data.error) === 'invalid_token') {
+                if (axios.isAxiosError(_context5.t1)) {
+                  if (((_e$response2 = _context5.t1.response) == null ? void 0 : _e$response2.data.error) === 'invalid_token') {
                     if (typeof window !== 'undefined') {
                       window.localStorage.removeItem('user_data');
                       window.localStorage.removeItem('access_token');
@@ -2253,15 +2362,15 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                     }
                   }
 
-                  onSubmitError(_context6.t1);
+                  onSubmitError(_context5.t1);
                 }
 
               case 48:
               case "end":
-                return _context6.stop();
+                return _context5.stop();
             }
           }
-        }, _callee6, null, [[0, 45], [17, 28]]);
+        }, _callee5, null, [[0, 45], [17, 28]]);
       }));
 
       function onSubmit(_x2, _x3) {
@@ -2273,7 +2382,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
   }, function (props) {
     return React__default.createElement(formik.Form, {
       onSubmit: props.handleSubmit
-    }, React__default.createElement(LogicRunner, {
+    }, React__default.createElement(ErrorFocus, null), React__default.createElement(LogicRunner, {
       values: props.values,
       setStates: setStates,
       setFieldValue: props.setFieldValue,
@@ -2294,9 +2403,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
         onLogin();
         setShowModalLogin(true);
       }
-    }, "Login"))), _map(data, function (item) {
-      var id = item.id,
-          label = item.label,
+    }, "Login"))), _map(dataWithUniqueIds, function (item) {
+      var label = item.label,
           labelClassName = item.labelClassName,
           fields = item.fields;
 
@@ -2304,8 +2412,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
         return null;
       }
 
-      return React__default.createElement(SectionContainer, {
-        key: id
+      return React__default.createElement(React__default.Fragment, {
+        key: item.uniqueId
       }, React__default.createElement("p", {
         className: labelClassName
       }, label), _map(fields, function (group) {
@@ -2313,8 +2421,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
             groupItems = group.groupItems,
             groupLabel = group.groupLabel,
             groupLabelClassName = group.groupLabelClassName;
-        return React__default.createElement(SectionContainer, {
-          key: group.id
+        return React__default.createElement(React__default.Fragment, {
+          key: group.uniqueId
         }, !isLoggedIn && React__default.createElement("div", {
           className: groupLabelClassName
         }, groupLabel), React__default.createElement("div", {
@@ -2332,42 +2440,47 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
             return false;
           }
 
-          if (el.name === 'brand_opt_in' && hideOptIn) {
+          if (el.name === 'ttf_opt_in' && hideTtfOptIn) {
             return false;
           }
 
           return true;
         }), function (element) {
-          return ['password', 'confirmPassword'].includes(element.name) && isLoggedIn ? null : React__default.createElement("div", {
-            className: element.className,
-            key: element.name
+          return ['password', 'confirmPassword'].includes(element.name) && isLoggedIn ? null : React__default.createElement(React__default.Fragment, {
+            key: element.uniqueId
+          }, element.name === 'email' ? React__default.createElement("div", {
+            className: "email-checking"
+          }, "IMPORTANT: Please double check that your\n                                        email address is correct. It's where we\n                                        send your confirmation and e-tickets to!") : null, React__default.createElement("div", {
+            className: element.className
           }, element.component ? element.component : React__default.createElement(formik.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 : []
-          }));
+            validate: getValidateFunctions(element, states),
+            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : CustomField,
+            selectOptions: element.name === 'country' ? countries : element.name === 'state' ? states : [],
+            theme: theme
+          })));
         })));
       }));
-    }), showTicketHolderName && React__default.createElement(React__default.Fragment, null, React__default.createElement("p", null, ticketHoldersFields.label), _map(ticketsQuantity, function (_item, index) {
+    }), showTicketHolderName && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: "ticket-holders-fields"
+    }, React__default.createElement("p", null, ticketHoldersFields.label), _map(ticketsQuantity, function (_item, index) {
       return React__default.createElement("div", {
         key: _item
       }, React__default.createElement("h5", null, "Ticket ", index + 1), _map(ticketHoldersFields.fields, function (group) {
         var groupClassname = group.groupClassname,
             groupItems = group.groupItems;
         return React__default.createElement("div", {
-          key: group.id
+          key: group.uniqueId
         }, React__default.createElement("div", {
           className: groupClassname
         }, _map(groupItems, function (element) {
           return React__default.createElement("div", {
             className: element.className,
-            key: element.name + "-" + index
+            key: element.uniqueId
           }, React__default.createElement(formik.Field, {
             name: element.name + "-" + index,
-            key: element.name + "-" + index,
             label: element.label,
             type: element.type,
             required: true,
@@ -2376,21 +2489,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
           }));
         })));
       }));
-    })), conditions == null ? void 0 : conditions.map(function (checkbox) {
-      return React__default.createElement("div", {
-        className: 'billing-info-container__singleField',
-        key: checkbox.id
-      }, React__default.createElement("div", {
-        className: "width-fc"
-      }, React__default.createElement(formik.Field, {
-        name: checkbox.id,
-        label: checkbox.text,
-        type: 'checkbox',
-        required: true,
-        component: CheckboxField,
-        validate: combineValidators(requiredValidator)
-      })));
-    }), React__default.createElement("div", {
+    }))), React__default.createElement("div", {
       className: "button-container"
     }, React__default.createElement(LoadingButton, {
       type: "submit",
@@ -2499,6 +2598,7 @@ var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency)
 var options = {
   style: {
     base: {
+      backgroundColor: '#232323',
       fontSize: '18px',
       color: '#ffffff',
       letterSpacing: '1px',
@@ -2526,7 +2626,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 = reactStripeJs.useStripe();
   var elements = reactStripeJs.useElements();
 
@@ -2555,7 +2657,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");
 
@@ -2656,6 +2758,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
       zipCode && setPostalCode(zipCode);
     }
   }, []);
+  var buttonIsDiabled = !stripe || !!error || isLoading;
   return React__default.createElement("div", {
     className: "stripe_payment_container"
   }, !!stripeError && React__default.createElement("div", {
@@ -2695,10 +2798,21 @@ var CheckoutForm = function CheckoutForm(_ref) {
     value: postalCode,
     onChange: onChangePostalCode,
     placeholder: "ZIP"
-  }))), React__default.createElement("div", {
-    className: "payment_button"
+  }))), conditions == null ? void 0 : conditions.map(function (checkbox) {
+    return React__default.createElement("div", {
+      className: 'billing-info-container__singleField',
+      key: checkbox.id
+    }, React__default.createElement("div", {
+      className: "conditions-block"
+    }, React__default.createElement(CheckboxField, {
+      name: checkbox.id,
+      label: checkbox.text,
+      required: true
+    })));
+  }), React__default.createElement("div", {
+    className: "payment_button " + (buttonIsDiabled ? 'disabled-payment-button' : '')
   }, React__default.createElement("button", {
-    disabled: !stripe || !!error || isLoading,
+    disabled: buttonIsDiabled,
     type: "submit"
   }, isLoading ? React__default.createElement(CircularProgress, null) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
 };
@@ -2756,8 +2870,13 @@ var PaymentContainer = function PaymentContainer(_ref) {
       paymentIsLoading = _useState4[0],
       setPaymentIsLoading = _useState4[1];
 
+  var _useState5 = React.useState([]),
+      conditions = _useState5[0],
+      setConditions = _useState5[1];
+
   var showFormTitle = Boolean(formTitle);
   var showErrorText = Boolean(errorText);
+  var eventId = getQueryVariable('event_id');
   React.useEffect(function () {
     var hash = checkoutData.hash;
 
@@ -2808,21 +2927,64 @@ var PaymentContainer = function PaymentContainer(_ref) {
         }
       }, _callee, null, [[0, 7]]);
     }))();
-  }, [checkoutData]); // 1. get payment data   ---> v1/order/${hash}/review/ done
+  }, [checkoutData]); //just once
+
+  React.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.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;
               }
 
@@ -2831,36 +2993,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);
     };
   }();
 
@@ -2909,7 +3071,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
     isLoading: paymentIsLoading,
     handleSetLoading: function handleSetLoading(value) {
       return setPaymentIsLoading(value);
-    }
+    },
+    conditions: conditions
   }))))));
 };
 
@@ -3241,6 +3404,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) {
@@ -3269,25 +3433,24 @@ var WaitingList = function WaitingList(_ref) {
                 setShowSuccessMessage(true);
               }
 
-              _context.next = 14;
+              _context.next = 13;
               break;
 
             case 11:
               _context.prev = 11;
               _context.t0 = _context["catch"](0);
-              console.log(_context.t0);
 
-            case 14:
-              _context.prev = 14;
+            case 13:
+              _context.prev = 13;
               setLoading(false);
-              return _context.finish(14);
+              return _context.finish(13);
 
-            case 17:
+            case 16:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 11, 14, 17]]);
+      }, _callee, null, [[0, 11, 13, 16]]);
     }));
 
     return function handleSubmit(_x) {
@@ -3308,7 +3471,7 @@ var WaitingList = function WaitingList(_ref) {
       email: ''
     },
     onSubmit: handleSubmit
-  }, React__default.createElement(formik.Form, null, React__default.createElement("div", {
+  }, React__default.createElement(formik.Form, null, React__default.createElement(ErrorFocus, null), showTicketsField && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "field-item"
   }, React__default.createElement(formik.Field, {
     name: "ticketTypeId",
@@ -3332,7 +3495,7 @@ var WaitingList = function WaitingList(_ref) {
       value: '',
       disabled: true
     }].concat(generateQuantity(10))
-  })), React__default.createElement("div", {
+  }))), React__default.createElement("div", {
     className: "field-item"
   }, React__default.createElement(formik.Field, {
     name: "firstName",