tf-checkout-react 1.3.11 → 1.3.12-beta.2

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

@@ -1023,7 +1023,7 @@ function setCustomCookie(name, value, days) {
 
   if (typeof window !== 'undefined') {
     var domain = getDomain(window.location.hostname);
-    document.cookie = name + '=' + (value || '') + expires + '; path=/' + ("; domain=" + domain);
+    document.cookie = name + '=' + (value || '') + expires + ("; path=/; domain=" + domain);
   }
 }
 function getCookieByName(cname) {
@@ -1034,11 +1034,11 @@ function getCookieByName(cname) {
   for (var i = 0; i < ca.length; i++) {
     var c = ca[i];
 
-    while (c.charAt(0) == ' ') {
+    while (c.charAt(0) === ' ') {
       c = c.substring(1);
     }
 
-    if (c.indexOf(name) == 0) {
+    if (c.indexOf(name) === 0) {
       return c.substring(name.length, c.length);
     }
   }
@@ -1185,6 +1185,20 @@ var createMarkup = function createMarkup(data) {
   };
 };
 
+var replaceVarInString = function replaceVarInString(message, varArray) {
+  if (message === void 0) {
+    message = '';
+  }
+
+  var re = new RegExp(/\{.*?\}/g);
+  var index = 0;
+  return message.replace(re, function (_) {
+    var value = varArray[index] || '';
+    index++;
+    return value;
+  });
+};
+
 var isWindowDefined = typeof window !== 'undefined';
 var isDocumentDefined = typeof document !== 'undefined';
 
@@ -1567,6 +1581,36 @@ var getCheckoutPageConfigs = /*#__PURE__*/function () {
     return _ref3.apply(this, arguments);
   };
 }();
+var confirmPreRegistration = /*#__PURE__*/function () {
+  var _ref4 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4(eventId, data) {
+    var response;
+    return runtime_1.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.next = 2;
+            return publicRequest.post("v1/event/" + eventId + "/pre-registration/confirm", {
+              data: {
+                attributes: data
+              }
+            });
+
+          case 2:
+            response = _context4.sent;
+            return _context4.abrupt("return", response.data);
+
+          case 4:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  }));
+
+  return function confirmPreRegistration(_x3, _x4) {
+    return _ref4.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() {
@@ -1913,7 +1957,7 @@ var SelectField = function SelectField(_ref) {
       id: field.name
     },
     "native": true,
-    className: theme,
+    className: "Mui-Select " + theme,
     MenuProps: {
       className: theme
     }
@@ -1988,8 +2032,8 @@ var Schema = /*#__PURE__*/Yup.object().shape({
 var ForgotPasswordModal = function ForgotPasswordModal(_ref) {
   var _ref$onClose = _ref.onClose,
       onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      _ref$onLogin = _ref.onLogin,
-      onLogin = _ref$onLogin === void 0 ? function () {} : _ref$onLogin,
+      _ref$onLoginButtonCli = _ref.onLoginButtonClick,
+      onLoginButtonClick = _ref$onLoginButtonCli === void 0 ? function () {} : _ref$onLoginButtonCli,
       _ref$onForgotPassword = _ref.onForgotPasswordSuccess,
       onForgotPasswordSuccess = _ref$onForgotPassword === void 0 ? function () {} : _ref$onForgotPassword,
       _ref$onForgotPassword2 = _ref.onForgotPasswordError,
@@ -2089,21 +2133,11 @@ var ForgotPasswordModal = function ForgotPasswordModal(_ref) {
     }) : 'Submit')), React__default.createElement("div", {
       className: "login"
     }, React__default.createElement("span", {
-      onClick: onLogin
+      onClick: onLoginButtonClick
     }, "Back to Log In")));
   }))));
 };
 
-var style$1 = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: 480,
-  backgroundColor: '#e3e3e3',
-  border: '1px solid white',
-  outline: 'none'
-};
 var setLoggedUserData = function setLoggedUserData(data) {
   return {
     id: data.id,
@@ -2119,23 +2153,23 @@ var setLoggedUserData = function setLoggedUserData(data) {
     zip: (data == null ? void 0 : data.zip) || (data == null ? void 0 : data.zipCode) || ''
   };
 };
-var LoginModal = function LoginModal(_ref) {
-  var onClose = _ref.onClose,
-      onLogin = _ref.onLogin,
-      _ref$alreadyHasUser = _ref.alreadyHasUser,
+var LoginForm = function LoginForm(_ref) {
+  var _ref$alreadyHasUser = _ref.alreadyHasUser,
       alreadyHasUser = _ref$alreadyHasUser === void 0 ? false : _ref$alreadyHasUser,
       _ref$userExpired = _ref.userExpired,
       userExpired = _ref$userExpired === void 0 ? false : _ref$userExpired,
+      _ref$onLoginSuccess = _ref.onLoginSuccess,
+      onLoginSuccess = _ref$onLoginSuccess === void 0 ? _identity : _ref$onLoginSuccess,
+      _ref$onLoginError = _ref.onLoginError,
+      onLoginError = _ref$onLoginError === void 0 ? _identity : _ref$onLoginError,
       _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
       onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? _identity : _ref$onGetProfileData,
       _ref$onGetProfileData2 = _ref.onGetProfileDataError,
       onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? _identity : _ref$onGetProfileData2,
-      _ref$onForgotPassword = _ref.onForgotPassword,
-      onForgotPassword = _ref$onForgotPassword === void 0 ? _identity : _ref$onForgotPassword,
-      _ref$onSignup = _ref.onSignup,
-      onSignup = _ref$onSignup === void 0 ? _identity : _ref$onSignup,
-      _ref$modalClassname = _ref.modalClassname,
-      modalClassname = _ref$modalClassname === void 0 ? '' : _ref$modalClassname,
+      _ref$onForgotPassword = _ref.onForgotPasswordButtonClick,
+      onForgotPasswordButtonClick = _ref$onForgotPassword === void 0 ? _identity : _ref$onForgotPassword,
+      _ref$onSignupButtonCl = _ref.onSignupButtonClick,
+      onSignupButtonClick = _ref$onSignupButtonCl === void 0 ? _identity : _ref$onSignupButtonCl,
       logo = _ref.logo,
       _ref$showForgotPasswo = _ref.showForgotPasswordButton,
       showForgotPasswordButton = _ref$showForgotPasswo === void 0 ? false : _ref$showForgotPasswo,
@@ -2146,22 +2180,14 @@ var LoginModal = function LoginModal(_ref) {
       error = _useState[0],
       setError = _useState[1];
 
-  return React__default.createElement(Modal, {
-    open: true,
-    onClose: onClose,
-    "aria-labelledby": "modal-modal-title",
-    "aria-describedby": "modal-modal-description",
-    className: "login-modal " + modalClassname
-  }, React__default.createElement(Box, {
-    style: style$1
-  }, React__default.createElement("div", null, React__default.createElement(formik.Formik, {
+  return React__default.createElement("div", null, React__default.createElement(formik.Formik, {
     initialValues: {
       email: '',
       password: ''
     },
     onSubmit: function () {
       var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
-        var email, password, body, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
+        var email, password, body, authRes, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
 
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
@@ -2177,20 +2203,21 @@ var LoginModal = function LoginModal(_ref) {
                 return authorize(body);
 
               case 5:
+                authRes = _context.sent;
                 profileResponse = null;
-                _context.prev = 6;
-                _context.next = 9;
+                _context.prev = 7;
+                _context.next = 10;
                 return getProfileData();
 
-              case 9:
+              case 10:
                 profileResponse = _context.sent;
-                onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 17;
+                onGetProfileDataSuccess(_get(profileResponse, 'data.data'));
+                _context.next = 18;
                 break;
 
-              case 13:
-                _context.prev = 13;
-                _context.t0 = _context["catch"](6);
+              case 14:
+                _context.prev = 14;
+                _context.t0 = _context["catch"](7);
 
                 if (axios.isAxiosError(_context.t0)) {
                   onGetProfileDataError(_context.t0);
@@ -2198,7 +2225,7 @@ var LoginModal = function LoginModal(_ref) {
 
                 return _context.abrupt("return");
 
-              case 17:
+              case 18:
                 profileSpecifiedData = _get(profileResponse, 'data.data');
                 profileDataObj = setLoggedUserData(profileSpecifiedData);
 
@@ -2208,27 +2235,28 @@ var LoginModal = function LoginModal(_ref) {
                   window.document.dispatchEvent(event);
                 }
 
-                onLogin();
-                _context.next = 26;
+                onLoginSuccess(_get(authRes, 'data.data'));
+                _context.next = 27;
                 break;
 
-              case 23:
-                _context.prev = 23;
+              case 24:
+                _context.prev = 24;
                 _context.t1 = _context["catch"](1);
 
                 if (axios.isAxiosError(_context.t1)) {
                   _error = (_context.t1 == null ? void 0 : (_e$response = _context.t1.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message) || 'Error';
                   setError(_error);
+                  onLoginError(_context.t1);
                 } else if (_context.t1 instanceof Error) {
                   setError((_context.t1 == null ? void 0 : _context.t1.message) || 'Error');
                 }
 
-              case 26:
+              case 27:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[1, 23], [6, 13]]);
+        }, _callee, null, [[1, 24], [7, 14]]);
       }));
 
       function onSubmit(_x) {
@@ -2243,10 +2271,10 @@ var LoginModal = function LoginModal(_ref) {
     }, React__default.createElement("div", {
       className: "modal-title"
     }, "Login"), React__default.createElement("div", {
-      className: 'login-logo-container'
+      className: "login-logo-container"
     }, React__default.createElement("img", {
       className: "login-logo-tff",
-      src: logo || "https://www.ticketfairy.com/resources/images/logo-ttf-black.svg",
+      src: logo || 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg',
       alt: "logo"
     })), React__default.createElement("div", {
       className: "server_auth__error"
@@ -2259,33 +2287,19 @@ var LoginModal = function LoginModal(_ref) {
     }, React__default.createElement("div", {
       className: "login-modal-body__email"
     }, React__default.createElement(formik.Field, {
-      name: 'email',
-      validate: requiredValidator
-    }, function (_ref3) {
-      var field = _ref3.field,
-          meta = _ref3.meta;
-      return React__default.createElement(material.TextField, Object.assign({
-        label: 'Email',
-        type: 'email',
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
+      name: "email",
+      label: "Email",
+      type: "email",
+      component: CustomField,
+      validate: combineValidators(requiredValidator, emailValidator)
     })), React__default.createElement("div", {
       className: "login-modal-body__password"
     }, React__default.createElement(formik.Field, {
-      name: 'password',
+      name: "password",
+      label: "Password",
+      type: "password",
+      component: CustomField,
       validate: requiredValidator
-    }, function (_ref4) {
-      var field = _ref4.field,
-          meta = _ref4.meta;
-      return React__default.createElement(material.TextField, Object.assign({
-        label: "Password",
-        type: "password",
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
     })), React__default.createElement("div", {
       className: "login-action-button"
     }, React__default.createElement("button", {
@@ -2294,14 +2308,60 @@ var LoginModal = function LoginModal(_ref) {
       className: "forgot-password"
     }, React__default.createElement("span", {
       "aria-hidden": "true",
-      onClick: onForgotPassword
+      onClick: onForgotPasswordButtonClick
     }, "Forgot password?")), showSignUpButton && React__default.createElement("div", {
       className: "forgot-password"
     }, React__default.createElement("span", {
       "aria-hidden": "true",
-      onClick: onSignup
+      onClick: onSignupButtonClick
     }, "Sign up"))));
-  }))));
+  }));
+};
+
+var style$1 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none'
+};
+var LoginModal = function LoginModal(_ref) {
+  var onClose = _ref.onClose,
+      onLogin = _ref.onLogin,
+      alreadyHasUser = _ref.alreadyHasUser,
+      userExpired = _ref.userExpired,
+      onGetProfileDataSuccess = _ref.onGetProfileDataSuccess,
+      onGetProfileDataError = _ref.onGetProfileDataError,
+      onForgotPassword = _ref.onForgotPassword,
+      onSignup = _ref.onSignup,
+      _ref$modalClassname = _ref.modalClassname,
+      modalClassname = _ref$modalClassname === void 0 ? '' : _ref$modalClassname,
+      logo = _ref.logo,
+      showForgotPasswordButton = _ref.showForgotPasswordButton,
+      showSignUpButton = _ref.showSignUpButton;
+  return React__default.createElement(Modal, {
+    open: true,
+    onClose: onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "login-modal " + modalClassname
+  }, React__default.createElement(Box, {
+    style: style$1
+  }, React__default.createElement(LoginForm, {
+    alreadyHasUser: alreadyHasUser,
+    userExpired: userExpired,
+    onLoginSuccess: onLogin,
+    onGetProfileDataSuccess: onGetProfileDataSuccess,
+    onGetProfileDataError: onGetProfileDataError,
+    onForgotPasswordButtonClick: onForgotPassword,
+    onSignupButtonClick: onSignup,
+    logo: logo,
+    showForgotPasswordButton: showForgotPasswordButton,
+    showSignUpButton: showSignUpButton
+  })));
 };
 
 var style$2 = {
@@ -2915,10 +2975,6 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
       _onGetProfileDataSuccess = _ref3$onGetProfileDat === void 0 ? _identity : _ref3$onGetProfileDat,
       _ref3$onGetProfileDat2 = _ref3.onGetProfileDataError,
       onGetProfileDataError = _ref3$onGetProfileDat2 === void 0 ? _identity : _ref3$onGetProfileDat2,
-      _ref3$onAuthorizeSucc = _ref3.onAuthorizeSuccess,
-      onAuthorizeSuccess = _ref3$onAuthorizeSucc === void 0 ? _identity : _ref3$onAuthorizeSucc,
-      _ref3$onAuthorizeErro = _ref3.onAuthorizeError,
-      onAuthorizeError = _ref3$onAuthorizeErro === void 0 ? _identity : _ref3$onAuthorizeErro,
       onLogin = _ref3.onLogin,
       _ref3$onLoginSuccess = _ref3.onLoginSuccess,
       onLoginSuccess = _ref3$onLoginSuccess === void 0 ? _identity : _ref3$onLoginSuccess,
@@ -3366,7 +3422,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
     enableReinitialize: false,
     onSubmit: function () {
       var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee6(values, formikHelpers) {
-        var _checkoutBody, _res, updatedUserData, _profileSpecifiedData, _profileDataObj, checkoutBodyForRegistration, bodyFormData, resRegister, _xtfCookie, accessToken, refreshToken, userProfile, _e$response, _e$response$data, _error, profileData, profileSpecifiedData, profileDataObj, checkoutBody, res, _e$response2, _e$response3;
+        var _checkoutBody, _res, updatedUserData, _profileSpecifiedData, _profileDataObj, checkoutBodyForRegistration, bodyFormData, resRegister, _xtfCookie, accessToken, refreshToken, userProfile, _e$response, _e$response$data, _error, profileData, profileSpecifiedData, profileDataObj, checkoutBody, res, _e$response2, _e$response3, _e$response3$data, _e$response4, event;
 
         return runtime_1.wrap(function _callee6$(_context6) {
           while (1) {
@@ -3504,16 +3560,22 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
                 setLoading(false);
 
                 if (axios.isAxiosError(_context6.t1)) {
-                  if (((_e$response2 = _context6.t1.response) == null ? void 0 : _e$response2.data.error) === 'invalid_token') {
+                  if (((_e$response2 = _context6.t1.response) == null ? void 0 : _e$response2.status) === 401 || ((_e$response3 = _context6.t1.response) == null ? void 0 : (_e$response3$data = _e$response3.data) == null ? void 0 : _e$response3$data.error) === 'invalid_token') {
                     if (isWindowDefined) {
                       window.localStorage.removeItem('user_data');
                       window.localStorage.removeItem('access_token');
                       setUserExpired(true);
                       setShowModalLogin(true);
+                      setIsLoggedIn(false);
+                      setShowModalSignup(false);
+                      setShowModalForgotPassword(false);
+                      event = new window.CustomEvent('tf-logout');
+                      deleteCookieByName('X-TF-ECOMMERCE');
+                      window.document.dispatchEvent(event);
                     }
                   }
 
-                  if ((_e$response3 = _context6.t1.response) != null && _e$response3.data.message && !hideErrorsAlertSection) {
+                  if ((_e$response4 = _context6.t1.response) != null && _e$response4.data.message && !hideErrorsAlertSection) {
                     setError(_get(_context6.t1, 'response.data.message'));
                   }
 
@@ -3695,8 +3757,6 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
     },
     alreadyHasUser: alreadyHasUser,
     userExpired: userExpired,
-    onAuthorizeSuccess: onAuthorizeSuccess,
-    onAuthorizeError: onAuthorizeError,
     onGetProfileDataSuccess: function onGetProfileDataSuccess(data) {
       fetchCart();
 
@@ -3727,7 +3787,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
     onClose: function onClose() {
       setShowModalForgotPassword(false);
     },
-    onLogin: function onLogin() {
+    onLoginButtonClick: function onLoginButtonClick() {
       setShowModalForgotPassword(false);
       setShowModalLogin(true);
     },
@@ -8044,6 +8104,561 @@ var RsvpContainer = function RsvpContainer(_ref) {
   }, "RSVP"))))))));
 };
 
+var useCookieListener = function useCookieListener(key, handler) {
+  var getCookie = function getCookie() {
+    return getCookieByName(key);
+  };
+
+  var _useState = React.useState(),
+      intervalValue = _useState[0],
+      setIntervalValue = _useState[1];
+
+  var cookieRef = React.useRef(getCookie());
+
+  var handleCookieChange = function handleCookieChange() {
+    var currentCookie = getCookie();
+    var prevCookie = cookieRef.current;
+
+    if (currentCookie !== prevCookie) {
+      cookieRef.current = getCookie();
+      handler(cookieRef.current);
+    }
+  };
+
+  React.useEffect(function () {
+    var interval = setInterval(handleCookieChange, 500);
+    setIntervalValue(interval);
+    return function () {
+      intervalValue && clearInterval(intervalValue);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+
+var formFieldsNotLoggedIn = [{
+  name: 'basic-info',
+  groupLabel: 'Create (or log in to) your account, then click on Confirm Registration.',
+  groupLabelClassName: '',
+  groupClassName: '',
+  fields: [{
+    className: 'half-width',
+    name: 'firstName',
+    label: 'First Name',
+    type: 'text',
+    required: true,
+    onValidate: null
+  }, {
+    className: 'half-width',
+    name: 'lastName',
+    label: 'Last Name',
+    type: 'text',
+    required: true,
+    onValidate: null
+  }, {
+    name: 'email',
+    label: 'Email',
+    type: 'email',
+    required: true,
+    onValidate: null
+  }, {
+    name: 'confirmEmail',
+    label: 'Confirm Email',
+    type: 'email',
+    required: true,
+    onValidate: null
+  }]
+}, {
+  name: 'billing-info',
+  groupLabel: '',
+  groupLabelClassName: '',
+  groupClassName: '',
+  fields: [{
+    className: 'half-width',
+    name: 'zip',
+    label: 'Post Code/Zip',
+    type: 'text',
+    required: true,
+    onValidate: null
+  }, {
+    className: 'half-width',
+    name: 'country',
+    label: 'Country',
+    type: 'select',
+    required: true,
+    onValidate: null
+  }]
+}, {
+  name: 'password-info',
+  groupLabel: /*#__PURE__*/React__default.createElement("div", {
+    className: "email-info-block"
+  }, /*#__PURE__*/React__default.createElement("span", null, "Choose a password for your new"), /*#__PURE__*/React__default.createElement("b", null, " Mana Common "), /*#__PURE__*/React__default.createElement("span", null, "account")),
+  groupLabelClassName: '',
+  groupClassName: '',
+  fields: [{
+    className: 'half-width',
+    name: 'password',
+    label: 'Password',
+    type: 'password',
+    required: true,
+    onValidate: null
+  }, {
+    className: 'half-width',
+    name: 'confirmPassword',
+    label: 'Confirm Password',
+    type: 'password',
+    required: true,
+    onValidate: null
+  }]
+}];
+var formFieldsLoggedIn = [{
+  name: 'basic-info-logged-in',
+  groupLabel: 'To confirm your pre-registration for {event_name} simply click on the confirmation button below.',
+  groupLabelClassName: '',
+  groupClassName: '',
+  fields: [{
+    name: 'email',
+    label: 'Email',
+    type: 'email',
+    required: true,
+    onValidate: null
+  }, {
+    name: 'confirmEmail',
+    label: 'Confirm Email',
+    type: 'email',
+    required: true,
+    onValidate: null
+  }]
+}, {
+  name: 'billing-info-logged-in',
+  groupLabel: '',
+  groupLabelClassName: '',
+  groupClassName: '',
+  fields: [{
+    name: 'numTickets',
+    label: 'How many tickets do you want to buy?',
+    type: 'select',
+    required: true,
+    options: /*#__PURE__*/new Array(10).fill(null).map(function (_, index) {
+      return {
+        label: index + 1,
+        value: index + 1
+      };
+    }),
+    onValidate: null
+  }, {
+    name: 'holderAge',
+    label: 'Ticket Holder Age',
+    type: 'date',
+    required: true,
+    onValidate: null
+  }, {
+    name: 'brandOptIn',
+    label: 'I would like to be updated on Mana Common news, events and offers.',
+    type: 'checkbox'
+  }]
+}];
+
+var getValidateFunctions$1 = function getValidateFunctions(_ref) {
+  var element = _ref.element,
+      values = _ref.values;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var validationFunctions = [];
+
+  if (element.required) {
+    validationFunctions.push(requiredValidator);
+  }
+
+  if (element.onValidate) {
+    validationFunctions.push(element.onValidate);
+  }
+
+  if (element.name === 'confirmEmail') {
+    var isSameEmail = function isSameEmail(confirmEmail) {
+      return values.email !== confirmEmail ? 'Please confirm your email address correctly' : null;
+    };
+
+    validationFunctions.push(isSameEmail);
+  }
+
+  if (element.name === 'confirmPassword') {
+    var isSame = function isSame(confirmPassword) {
+      return values.password !== confirmPassword ? 'Password confirmation does not match' : null;
+    };
+
+    validationFunctions.push(isSame);
+  }
+
+  return combineValidators.apply(void 0, validationFunctions);
+};
+var getFormInitialValues = function getFormInitialValues(fieldsSections) {
+  var initialValues = {};
+  var isWindowDefined = typeof window !== 'undefined';
+  var userData = JSON.parse(isWindowDefined ? window.localStorage.getItem('user_data') || '{}' : '{}');
+
+  _forEach(fieldsSections, function (item) {
+    _forEach(item.fields, function (fieldItem) {
+      switch (fieldItem.name) {
+        case 'country':
+        case 'numTickets':
+          initialValues[fieldItem.name] = 1;
+          break;
+
+        case 'brandOptIn':
+          initialValues[fieldItem.name] = true;
+          break;
+
+        default:
+          initialValues[fieldItem.name] = _get(userData, fieldItem.name) || '';
+          break;
+      }
+    });
+  });
+
+  return initialValues;
+};
+var updateFormFieldsAttributes = function updateFormFieldsAttributes(formFields, attributes) {
+  if (attributes && !_isEmpty(attributes)) {
+    var updatedFormFields = _map(formFields, function (fieldSection) {
+      var fieldSectionAttributes = attributes[fieldSection.name] || {};
+
+      var updatedFields = _map(fieldSection.fields, function (fieldItem) {
+        var fieldItemAttributes = attributes[fieldItem.name] || {};
+        return _extends({}, fieldItem, fieldItemAttributes);
+      });
+
+      return _extends({}, fieldSection, fieldSectionAttributes, {
+        fields: updatedFields
+      });
+    });
+
+    return updatedFormFields;
+  }
+
+  return formFields;
+};
+
+var SectionContainer = function SectionContainer(_ref) {
+  var children = _ref.children,
+      className = _ref.className;
+  return React__default.createElement("div", {
+    className: className
+  }, children);
+};
+
+var insertHTML = function insertHTML(elementId, text) {
+  if (text === void 0) {
+    text = '';
+  }
+
+  var elem = document && document.getElementById(elementId);
+
+  if (!(elem != null && elem.childNodes.length)) {
+    elem == null ? void 0 : elem.insertAdjacentHTML('afterbegin', text);
+  }
+
+  return null;
+};
+
+var getFieldClassNames = function getFieldClassNames(id, existingClassNames) {
+  var _elem$parentElement;
+
+  var elem = document && document.getElementById(id);
+
+  if (((elem == null ? void 0 : (_elem$parentElement = elem.parentElement) == null ? void 0 : _elem$parentElement.clientWidth) || 0) < 375) {
+    return existingClassNames + ' full-width';
+  }
+
+  return existingClassNames;
+};
+
+var FieldsSection = function FieldsSection(_ref2) {
+  var _ref2$formFields = _ref2.formFields,
+      formFields = _ref2$formFields === void 0 ? [] : _ref2$formFields,
+      _ref2$countries = _ref2.countries,
+      countries = _ref2$countries === void 0 ? [] : _ref2$countries,
+      values = _ref2.values,
+      setFieldValue = _ref2.setFieldValue,
+      theme = _ref2.theme,
+      _ref2$containerClass = _ref2.containerClass,
+      containerClass = _ref2$containerClass === void 0 ? '' : _ref2$containerClass;
+  return React__default.createElement(React__default.Fragment, null, _map(formFields, function (item, index) {
+    var name = item.name,
+        groupLabel = item.groupLabel,
+        _item$groupLabelVars = item.groupLabelVars,
+        groupLabelVars = _item$groupLabelVars === void 0 ? [] : _item$groupLabelVars,
+        groupLabelClassName = item.groupLabelClassName,
+        _item$groupClassName = item.groupClassName,
+        groupClassName = _item$groupClassName === void 0 ? '' : _item$groupClassName,
+        fields = item.fields;
+    return React__default.createElement(SectionContainer, {
+      key: name,
+      className: groupClassName
+    }, React__default.createElement("span", {
+      id: "group_label_" + index,
+      className: groupLabelClassName
+    }, typeof groupLabel === 'string' ? insertHTML("group_label_" + index, replaceVarInString(groupLabel, groupLabelVars)) : groupLabel), React__default.createElement("div", {
+      className: "fields-container " + groupClassName
+    }, _map(fields, function (fieldData, fieldIndex) {
+      var name = fieldData.name,
+          label = fieldData.label,
+          _fieldData$className = fieldData.className,
+          className = _fieldData$className === void 0 ? 'full-width' : _fieldData$className,
+          type = fieldData.type,
+          component = fieldData.component,
+          _fieldData$options = fieldData.options,
+          options = _fieldData$options === void 0 ? [] : _fieldData$options;
+      var id = name + "-" + fieldIndex;
+      var classNames = containerClass + "-container__field " + className;
+      return component || React__default.createElement("div", {
+        key: name,
+        id: id,
+        className: getFieldClassNames(id, classNames)
+      }, React__default.createElement(formik.Field, {
+        name: name,
+        label: label,
+        type: type,
+        validate: getValidateFunctions$1({
+          element: fieldData,
+          values: values
+        }),
+        setFieldValue: setFieldValue,
+        component: type === 'checkbox' ? CheckboxField : type === 'select' ? SelectField : type === 'phone' ? PhoneNumberField : type === 'date' ? DatePickerField : CustomField,
+        selectOptions: name === 'country' ? countries : options,
+        theme: theme
+      }));
+    })));
+  }));
+};
+
+var X_TF_ECOMMERCE = 'X-TF-ECOMMERCE';
+var PreRegistration = function PreRegistration(_ref) {
+  var eventId = _ref.eventId,
+      pFormFields = _ref.formFields,
+      additionalFieldAttribute = _ref.additionalFieldAttribute,
+      logo = _ref.logo,
+      showForgotPasswordButton = _ref.showForgotPasswordButton,
+      _ref$onLoginSuccess = _ref.onLoginSuccess,
+      onLoginSuccess = _ref$onLoginSuccess === void 0 ? _identity : _ref$onLoginSuccess,
+      _ref$onForgotPassword = _ref.onForgotPasswordSuccess,
+      onForgotPasswordSuccess = _ref$onForgotPassword === void 0 ? _identity : _ref$onForgotPassword,
+      _ref$onForgotPassword2 = _ref.onForgotPasswordError,
+      onForgotPasswordError = _ref$onForgotPassword2 === void 0 ? _identity : _ref$onForgotPassword2;
+
+  var _useState = React.useState(''),
+      error = _useState[0],
+      setError = _useState[1];
+
+  var _useState2 = React.useState(false),
+      showModalLogin = _useState2[0],
+      setShowModalLogin = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      showModalForgotPassword = _useState3[0],
+      setShowModalForgotPassword = _useState3[1];
+
+  var _useState4 = React.useState([]),
+      countries = _useState4[0],
+      setCountries = _useState4[1];
+
+  var _useState5 = React.useState(Boolean(getCookieByName(X_TF_ECOMMERCE))),
+      isLoggedIn = _useState5[0],
+      setIsLoggedIn = _useState5[1];
+
+  useCookieListener(X_TF_ECOMMERCE, function (value) {
+    return setIsLoggedIn(Boolean(value));
+  });
+  var formFields = updateFormFieldsAttributes(pFormFields || isLoggedIn ? formFieldsLoggedIn : formFieldsNotLoggedIn, additionalFieldAttribute);
+  React.useEffect(function () {
+    // fetch countries data
+    var fetchCountries = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+        var res, _e$response, _e$response$data, _error;
+
+        return runtime_1.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                _context.next = 3;
+                return getCountries();
+
+              case 3:
+                res = _context.sent;
+                setCountries(_map(_get(res, 'data.data'), function (item, key) {
+                  return {
+                    label: item,
+                    value: key
+                  };
+                })); // onGetCountriesSuccess(res.data)
+
+                _context.next = 10;
+                break;
+
+              case 7:
+                _context.prev = 7;
+                _context.t0 = _context["catch"](0);
+
+                if (axios.isAxiosError(_context.t0)) {
+                  _error = (_context.t0 == null ? void 0 : (_e$response = _context.t0.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message) || 'Error';
+                  setError(_error); // onGetCountriesError(e)
+                }
+
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+
+      return function fetchCountries() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    fetchCountries();
+  }, []);
+  return React__default.createElement("div", {
+    className: "pre-registration-container"
+  }, React__default.createElement(SnackbarAlert, {
+    type: "error",
+    isOpen: !!error,
+    message: error || '',
+    onClose: function onClose() {
+      setError('');
+    }
+  }), !isLoggedIn && React__default.createElement("div", {
+    className: "account-actions-block"
+  }, React__default.createElement("div", {
+    className: "action-item"
+  }, React__default.createElement("div", null, "Got a ", React__default.createElement("strong", null, "MANA Common"), " account?"), React__default.createElement("div", null, "Login & skip ahead:")), React__default.createElement("div", {
+    className: "action-item login-block"
+  }, React__default.createElement("button", {
+    className: "login-register-button",
+    type: "button",
+    onClick: function onClick() {
+      setShowModalLogin(true);
+    }
+  }, "Login"))), showModalLogin && React__default.createElement(LoginModal, {
+    logo: logo,
+    onClose: function onClose() {
+      setShowModalLogin(false);
+    },
+    onLogin: function onLogin(res) {
+      setShowModalLogin(false);
+      onLoginSuccess(res);
+    },
+    showForgotPasswordButton: showForgotPasswordButton,
+    onForgotPassword: function onForgotPassword() {
+      setShowModalLogin(false);
+      setShowModalForgotPassword(true);
+    }
+  }), showModalForgotPassword && React__default.createElement(ForgotPasswordModal, {
+    onClose: function onClose() {
+      setShowModalForgotPassword(false);
+    },
+    onLoginButtonClick: function onLoginButtonClick() {
+      setShowModalForgotPassword(false);
+      setShowModalLogin(true);
+    },
+    onForgotPasswordSuccess: onForgotPasswordSuccess,
+    onForgotPasswordError: onForgotPasswordError
+  }), React__default.createElement("h2", null, "Pre-Registration"), React__default.createElement(formik.Formik, {
+    initialValues: getFormInitialValues(formFields),
+    enableReinitialize: true,
+    onSubmit: function () {
+      var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(values) {
+        var updatedValues, holderAgeDate, bodyFormData, _e$response2, _e$response2$data, _error2;
+
+        return runtime_1.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.prev = 0;
+
+                if (!isLoggedIn) {
+                  _context2.next = 12;
+                  break;
+                }
+
+                updatedValues = _extends({}, values);
+                holderAgeDate = new Date(values.holderAge);
+                updatedValues.dobDay = holderAgeDate.getDate();
+                updatedValues.dobMonth = holderAgeDate.getMonth() + 1;
+                updatedValues.dobYear = holderAgeDate.getFullYear(); // remove date picker string value
+
+                delete updatedValues.holderAge;
+                _context2.next = 10;
+                return confirmPreRegistration(eventId, updatedValues);
+
+              case 10:
+                _context2.next = 24;
+                break;
+
+              case 12:
+                bodyFormData = new FormData();
+                bodyFormData.append('first_name', values.firstName);
+                bodyFormData.append('last_name', values.lastName);
+                bodyFormData.append('email', values.email);
+                bodyFormData.append('confirm_email', values.confirmEmail);
+                bodyFormData.append('zip', values.zip);
+                bodyFormData.append('country', values.country);
+                bodyFormData.append('password', values.password);
+                bodyFormData.append('password_confirmation', values.confirmPassword);
+                bodyFormData.append('register_for', 'prereg');
+                _context2.next = 24;
+                return register(bodyFormData);
+
+              case 24:
+                _context2.next = 29;
+                break;
+
+              case 26:
+                _context2.prev = 26;
+                _context2.t0 = _context2["catch"](0);
+
+                if (axios.isAxiosError(_context2.t0)) {
+                  _error2 = (_context2.t0 == null ? void 0 : (_e$response2 = _context2.t0.response) == null ? void 0 : (_e$response2$data = _e$response2.data) == null ? void 0 : _e$response2$data.message) || 'Error';
+                  setError(_error2);
+                } else if (_context2.t0 instanceof Error) {
+                  setError((_context2.t0 == null ? void 0 : _context2.t0.message) || 'Error');
+                }
+
+              case 29:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[0, 26]]);
+      }));
+
+      function onSubmit(_x) {
+        return _onSubmit.apply(this, arguments);
+      }
+
+      return onSubmit;
+    }()
+  }, function (props) {
+    return React__default.createElement(formik.Form, null, React__default.createElement("div", {
+      className: "login-modal-body"
+    }, React__default.createElement(FieldsSection, {
+      formFields: formFields,
+      values: props.values,
+      setFieldValue: props.setFieldValue,
+      containerClass: "pre-registration",
+      countries: countries
+    })), React__default.createElement("div", {
+      className: "button-container"
+    }, React__default.createElement(material.Button, {
+      type: "submit",
+      variant: "contained",
+      className: "login-register-button",
+      disabled: props.isSubmitting
+    }, props.isSubmitting ? React__default.createElement(material.CircularProgress, {
+      size: 26
+    }) : isLoggedIn ? 'Confirm Pre-Registration' : 'Create Account')));
+  }));
+};
+
 exports.AddonsContainter = AddonsContainter;
 exports.BillingInfoContainer = BillingInfoContainer;
 exports.ConfirmationContainer = ConfirmationContainer;
@@ -8052,6 +8667,7 @@ exports.LoginModal = LoginModal;
 exports.MyTicketsContainer = MyTicketsContainer;
 exports.OrderDetailsContainer = OrderDetailsContainer;
 exports.PaymentContainer = PaymentContainer;
+exports.PreRegistration = PreRegistration;
 exports.RedirectModal = RedirectModal;
 exports.ResetPasswordContainer = ResetPasswordContainer;
 exports.RsvpContainer = RsvpContainer;