tf-checkout-react 1.0.106-beta.7 → 1.0.106-beta.8

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

@@ -19,14 +19,15 @@ var _forEach = _interopDefault(require('lodash/forEach'));
 var material = require('@mui/material');
 var Modal = _interopDefault(require('@mui/material/Modal'));
 var Box = _interopDefault(require('@mui/material/Box'));
+var TextField = _interopDefault(require('@mui/material/TextField'));
+var styles = require('@mui/styles');
+var Yup = require('yup');
 var _flatMapDeep = _interopDefault(require('lodash/flatMapDeep'));
 var _isArray = _interopDefault(require('lodash/isArray'));
 var nanoid = require('nanoid');
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
-var styles = require('@mui/styles');
-var TextField = _interopDefault(require('@mui/material/TextField'));
 require('material-ui-phone-number');
 var _debounce = _interopDefault(require('lodash/debounce'));
 var CircularProgress = _interopDefault(require('@mui/material/CircularProgress'));
@@ -63,7 +64,6 @@ var Paper = _interopDefault(require('@mui/material/Paper'));
 var TablePagination = _interopDefault(require('@mui/material/TablePagination'));
 var Autocomplete = _interopDefault(require('@mui/material/Autocomplete'));
 var _has = _interopDefault(require('lodash/has'));
-var yup = require('yup');
 var Radio = _interopDefault(require('@mui/material/Radio'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -1340,6 +1340,12 @@ var postReferralVisits = function postReferralVisits(eventId, referralId) {
   return publicRequest.post("v1/event/" + eventId + "/referrer/", {
     referrer: "" + referralId
   });
+}; // forgot password
+
+var forgotPassword = function forgotPassword(email) {
+  return publicRequest.post("/v1/oauth/restore-password-rn", {
+    email: email
+  });
 };
 var processTicket = function processTicket(hash) {
   return publicRequest.post("v1/ticket/" + hash + "/process/");
@@ -1402,20 +1408,22 @@ var LoginModal = function LoginModal(_ref) {
       onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? function () {} : _ref$onGetProfileData,
       _ref$onGetProfileData2 = _ref.onGetProfileDataError,
       onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2,
+      _ref$onForgotPassword = _ref.onForgotPassword,
+      onForgotPassword = _ref$onForgotPassword === void 0 ? function () {} : _ref$onForgotPassword,
+      _ref$onSignup = _ref.onSignup,
+      onSignup = _ref$onSignup === void 0 ? function () {} : _ref$onSignup,
       _ref$modalClassname = _ref.modalClassname,
       modalClassname = _ref$modalClassname === void 0 ? '' : _ref$modalClassname,
-      logo = _ref.logo;
+      logo = _ref.logo,
+      _ref$showForgotPasswo = _ref.showForgotPasswordButton,
+      showForgotPasswordButton = _ref$showForgotPasswo === void 0 ? false : _ref$showForgotPasswo,
+      _ref$showSignUpButton = _ref.showSignUpButton,
+      showSignUpButton = _ref$showSignUpButton === void 0 ? false : _ref$showSignUpButton;
 
   var _useState = React.useState(''),
       error = _useState[0],
       setError = _useState[1];
 
-  var handleForgotPassword = function handleForgotPassword() {
-    if (typeof window !== 'undefined') {
-      window.open(CONFIGS.BASE_URL + "/password-restore/");
-    }
-  };
-
   return React__default.createElement(Modal, {
     open: true,
     onClose: onClose,
@@ -1596,204 +1604,370 @@ var LoginModal = function LoginModal(_ref) {
       className: "login-action-button"
     }, React__default.createElement("button", {
       type: "submit"
-    }, "Login")), React__default.createElement("div", {
-      className: 'forgot-password'
+    }, "Login")), showForgotPasswordButton && React__default.createElement("div", {
+      className: "forgot-password"
+    }, React__default.createElement("span", {
+      onClick: onForgotPassword
+    }, "Forgot password?")), showSignUpButton && React__default.createElement("div", {
+      className: "forgot-password"
     }, React__default.createElement("span", {
-      onClick: handleForgotPassword
-    }, "Forgot password?"))));
+      onClick: onSignup
+    }, "Sign up"))));
   }))));
 };
 
-var RegisterModal = function RegisterModal(_ref) {
-  var onClose = _ref.onClose,
-      _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
-      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? function () {} : _ref$onGetProfileData,
-      _ref$onGetProfileData2 = _ref.onGetProfileDataError,
-      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2;
-  return React__default.createElement("div", {
-    style: {
-      display: 'flex',
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      right: 0,
-      left: 0,
-      backgroundColor: 'white',
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 10
-    }
-  }, React__default.createElement(formik.Formik, {
-    initialValues: {
-      firstName: '',
-      lastName: '',
-      email: '',
-      password: '',
-      confirmPassword: ''
+var CustomField = function CustomField(_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,
+      submitCount = _ref$form.submitCount,
+      theme = _ref.theme,
+      _ref$inputProps = _ref.inputProps,
+      pInputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+      _ref$InputProps = _ref.InputProps,
+      InputProps = _ref$InputProps === void 0 ? {} : _ref$InputProps,
+      inputRef = _ref.inputRef;
+  var isSelectField = type === 'select';
+
+  var error = _get(errors, field.name);
+
+  var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
+  var customTheme = styles.useTheme();
+  var inputProps = {
+    sx: customTheme == null ? void 0 : customTheme.input
+  };
+  return React__default.createElement(TextField, Object.assign({
+    id: field.name,
+    label: label,
+    type: type,
+    select: isSelectField,
+    fullWidth: true,
+    error: !!error && isTouched,
+    helperText: isTouched && error,
+    SelectProps: {
+      "native": true,
+      className: theme,
+      MenuProps: {
+        className: theme
+      }
     },
-    onSubmit: function () {
-      var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
-        var firstName, lastName, email, password, confirmPassword, bodyFormData, resRegister, access_token, profileResponse, profileSpecifiedData, profileDataObj;
-        return runtime_1.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                firstName = _ref2.firstName, lastName = _ref2.lastName, email = _ref2.email, password = _ref2.password, confirmPassword = _ref2.confirmPassword;
-                bodyFormData = new FormData();
-                bodyFormData.append('first_name', firstName);
-                bodyFormData.append('last_name', lastName);
-                bodyFormData.append('email', email);
-                bodyFormData.append('password', password);
-                bodyFormData.append('password_confirmation', confirmPassword);
-                bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
-                bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
-                _context.next = 11;
-                return register(bodyFormData);
+    InputLabelProps: {
+      sx: customTheme == null ? void 0 : customTheme.input
+    },
+    InputProps: InputProps,
+    inputProps: _extends({}, inputProps, pInputProps),
+    inputRef: inputRef
+  }, field), isSelectField ? _map(selectOptions, function (option) {
+    return React__default.createElement("option", {
+      key: option.value,
+      value: option.value,
+      disabled: option.disabled
+    }, option.label);
+  }) : null);
+};
 
-              case 11:
-                resRegister = _context.sent;
-                access_token = _get(resRegister, 'data.data.attributes.access_token');
-                handleSetAccessToken(access_token);
-                profileResponse = null;
-                _context.prev = 15;
-                _context.next = 18;
-                return getProfileData(access_token);
+var style$1 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#fff',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px'
+};
+var SignupSchema = /*#__PURE__*/Yup.object().shape({
+  firstName: /*#__PURE__*/Yup.string().required('Required'),
+  lastName: /*#__PURE__*/Yup.string().required('Required'),
+  email: /*#__PURE__*/Yup.string().email('Invalid email').required('Required'),
+  password: /*#__PURE__*/Yup.string().min(6, 'Password must have 5+ characters').required('Required'),
+  confirmPassword: /*#__PURE__*/Yup.string().required('Required').oneOf([/*#__PURE__*/Yup.ref('password'), null], 'Passwords must match')
+});
+var SignupModal = function SignupModal(_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$onRegisterSucces = _ref.onRegisterSuccess,
+      onRegisterSuccess = _ref$onRegisterSucces === void 0 ? function () {} : _ref$onRegisterSucces,
+      _ref$onRegisterError = _ref.onRegisterError,
+      onRegisterError = _ref$onRegisterError === void 0 ? function () {} : _ref$onRegisterError;
 
-              case 18:
-                profileResponse = _context.sent;
-                onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 26;
-                break;
+  var _useState = React.useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
 
-              case 22:
-                _context.prev = 22;
-                _context.t0 = _context["catch"](15);
-                onGetProfileDataError(_context.t0.response);
-                return _context.abrupt("return");
+  var onSignup = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
+      var formData, res, access_token_register, refreshToken, tokens;
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              formData = new FormData();
+              formData.set('first_name', values.firstName);
+              formData.set('last_name', values.lastName);
+              formData.set('email', values.email);
+              formData.set('password', values.password);
+              formData.set('password_confirmation', values.confirmPassword);
+              formData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
+              formData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
+              _context.next = 12;
+              return register(formData);
 
-              case 26:
-                profileSpecifiedData = _get(profileResponse, 'data.data');
-                profileDataObj = {
-                  id: profileSpecifiedData.id,
-                  first_name: profileSpecifiedData.firstName,
-                  last_name: profileSpecifiedData.lastName,
-                  email: profileSpecifiedData.email
-                };
+            case 12:
+              res = _context.sent;
+              access_token_register = _get(res, 'data.data.attributes.access_token');
+              refreshToken = _get(res, 'data.data.attributes.refresh_token');
+              handleSetAccessToken(access_token_register);
+              tokens = {
+                accessToken: access_token_register,
+                refreshToken: refreshToken
+              };
+              onRegisterSuccess(tokens);
+              onClose();
+              _context.next = 24;
+              break;
 
-                if (typeof window !== 'undefined') {
-                  window.localStorage.setItem('access_token', access_token);
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
-                }
+            case 21:
+              _context.prev = 21;
+              _context.t0 = _context["catch"](0);
 
-                onClose();
+              if (axios.isAxiosError(_context.t0)) {
+                onRegisterError(_context.t0, values.email);
+              }
 
-              case 30:
-              case "end":
-                return _context.stop();
-            }
+            case 24:
+              _context.prev = 24;
+              setLoading(false);
+              return _context.finish(24);
+
+            case 27:
+            case "end":
+              return _context.stop();
           }
-        }, _callee, null, [[15, 22]]);
-      }));
+        }
+      }, _callee, null, [[0, 21, 24, 27]]);
+    }));
 
-      function onSubmit(_x) {
-        return _onSubmit.apply(this, arguments);
-      }
+    return function onSignup(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
 
-      return onSubmit;
-    }()
-  }, function (props) {
+  var _onClose = loading ? function () {} : onClose;
+
+  return React__default.createElement(material.Modal, {
+    open: true,
+    onClose: _onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "signup-modal"
+  }, React__default.createElement(material.Box, {
+    style: style$1
+  }, React__default.createElement("div", null, React__default.createElement(formik.Formik, {
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+      confirmPassword: ''
+    },
+    validationSchema: SignupSchema,
+    onSubmit: onSignup
+  }, function (_ref3) {
+    var isValid = _ref3.isValid,
+        dirty = _ref3.dirty,
+        handleSubmit = _ref3.handleSubmit;
     return React__default.createElement(formik.Form, {
-      onSubmit: props.handleSubmit
+      onSubmit: handleSubmit
     }, React__default.createElement("div", {
-      className: "register-container"
-    }, React__default.createElement("div", null, "Create account"), React__default.createElement("button", {
-      type: "button",
-      onClick: onClose
-    }, "Close"), React__default.createElement("div", {
-      className: "register-container__twoFields"
+      className: "signup-container"
+    }, React__default.createElement("div", {
+      className: "title"
+    }, "Create an Account"), React__default.createElement("div", {
+      className: "signup-container__twoFields"
     }, React__default.createElement("div", {
       className: "is-half"
     }, React__default.createElement(formik.Field, {
-      name: 'firstName',
-      validate: requiredValidator()
-    }, function (_ref3) {
-      var field = _ref3.field,
-          meta = _ref3.meta;
-      return React__default.createElement(material.TextField, Object.assign({
-        label: 'First Name',
-        type: 'text',
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
+      name: "firstName",
+      label: "First Name",
+      component: CustomField
     })), React__default.createElement("div", {
       className: "is-half"
     }, React__default.createElement(formik.Field, {
-      name: 'lastName',
-      validate: requiredValidator()
-    }, function (_ref4) {
-      var field = _ref4.field,
-          meta = _ref4.meta;
-      return React__default.createElement(material.TextField, Object.assign({
-        label: 'Last Name',
-        type: 'text',
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
+      name: "lastName",
+      label: "Last Name",
+      component: CustomField
     }))), React__default.createElement("div", {
-      className: "register-container__singleField"
+      className: "signup-container__singleField"
     }, React__default.createElement("div", {
       className: ""
     }, React__default.createElement(formik.Field, {
-      name: 'email',
-      validate: requiredValidator()
-    }, function (_ref5) {
-      var field = _ref5.field,
-          meta = _ref5.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",
+      component: CustomField
     }))), React__default.createElement("div", {
-      className: "register-container__twoFields"
+      className: "signup-container__twoFields"
     }, React__default.createElement("div", {
       className: "is-half"
     }, React__default.createElement(formik.Field, {
-      name: 'password',
-      validate: requiredValidator()
-    }, function (_ref6) {
-      var field = _ref6.field,
-          meta = _ref6.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));
+      name: "password",
+      label: "Password",
+      type: "password",
+      component: CustomField
     })), React__default.createElement("div", {
       className: "is-half"
     }, React__default.createElement(formik.Field, {
-      name: 'confirmPassword',
-      validate: requiredValidator()
-    }, function (_ref7) {
-      var field = _ref7.field,
-          meta = _ref7.meta;
-      return React__default.createElement(material.TextField, Object.assign({
-        label: 'Confirm Passwod',
-        type: 'password',
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
-    })))), React__default.createElement("button", {
-      type: "submit"
-    }, "Submit"));
-  }));
+      name: "confirmPassword",
+      label: "Confirm Password",
+      type: "password",
+      component: CustomField
+    })))), React__default.createElement("div", {
+      className: "signup-action-button"
+    }, React__default.createElement("button", {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, loading ? React__default.createElement(material.CircularProgress, {
+      size: "22px"
+    }) : 'Submit')), React__default.createElement("div", {
+      className: "login"
+    }, React__default.createElement("span", {
+      onClick: onLogin
+    }, "Login")));
+  }))));
+};
+
+var style$2 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#fff',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px'
+};
+var Schema = /*#__PURE__*/Yup.object().shape({
+  email: /*#__PURE__*/Yup.string().email('Invalid email').required('Required')
+});
+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$onForgotPassword = _ref.onForgotPasswordSuccess,
+      onForgotPasswordSuccess = _ref$onForgotPassword === void 0 ? function () {} : _ref$onForgotPassword,
+      _ref$onForgotPassword2 = _ref.onForgotPasswordError,
+      onForgotPasswordError = _ref$onForgotPassword2 === void 0 ? function () {} : _ref$onForgotPassword2;
+
+  var _useState = React.useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
+
+  var onForgotPassword = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
+      var email, _yield$forgotPassword, data;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              email = _ref2.email;
+              _context.prev = 1;
+              setLoading(true);
+              _context.next = 5;
+              return forgotPassword(email);
+
+            case 5:
+              _yield$forgotPassword = _context.sent;
+              data = _yield$forgotPassword.data;
+              onForgotPasswordSuccess(data);
+              onClose();
+              _context.next = 14;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](1);
+
+              if (axios.isAxiosError(_context.t0)) {
+                onForgotPasswordError(_context.t0);
+              }
+
+            case 14:
+              _context.prev = 14;
+              setLoading(false);
+              return _context.finish(14);
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 11, 14, 17]]);
+    }));
+
+    return function onForgotPassword(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var _onClose = loading ? function () {} : onClose;
+
+  return React__default.createElement(material.Modal, {
+    open: true,
+    onClose: _onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "forgot-password-modal"
+  }, React__default.createElement(material.Box, {
+    style: style$2
+  }, React__default.createElement("div", null, React__default.createElement(formik.Formik, {
+    initialValues: {
+      email: ''
+    },
+    validationSchema: Schema,
+    onSubmit: onForgotPassword
+  }, function (_ref4) {
+    var isValid = _ref4.isValid,
+        dirty = _ref4.dirty,
+        handleSubmit = _ref4.handleSubmit;
+    return React__default.createElement(formik.Form, {
+      onSubmit: handleSubmit
+    }, React__default.createElement("div", {
+      className: "forgot-password-container"
+    }, React__default.createElement("div", {
+      className: "title"
+    }, "Password Reset"), React__default.createElement("div", {
+      className: "forgot-password-container__singleField"
+    }, React__default.createElement(formik.Field, {
+      name: "email",
+      label: "Email",
+      component: CustomField
+    }))), React__default.createElement("div", {
+      className: "forgot-password-action-button"
+    }, React__default.createElement("button", {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, loading ? React__default.createElement(material.CircularProgress, {
+      size: "22px"
+    }) : 'Submit')), React__default.createElement("div", {
+      className: "login"
+    }, React__default.createElement("span", {
+      onClick: onLogin
+    }, "Back to Log In")));
+  }))));
 };
 
 var _excluded = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
@@ -2002,62 +2176,6 @@ var CheckboxField = function CheckboxField(_ref) {
   })), !!(rest != null && (_rest$form2 = rest.form) != null && _rest$form2.errors && rest.form.errors[(_field$name2 = field == null ? void 0 : field.name) != null ? _field$name2 : ""]) ? React__default.createElement(material.FormHelperText, null, "Required") : null);
 };
 
-var CustomField = function CustomField(_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,
-      submitCount = _ref$form.submitCount,
-      theme = _ref.theme,
-      _ref$inputProps = _ref.inputProps,
-      pInputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
-      _ref$InputProps = _ref.InputProps,
-      InputProps = _ref$InputProps === void 0 ? {} : _ref$InputProps,
-      inputRef = _ref.inputRef;
-  var isSelectField = type === 'select';
-
-  var error = _get(errors, field.name);
-
-  var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
-  var customTheme = styles.useTheme();
-  var inputProps = {
-    sx: customTheme == null ? void 0 : customTheme.input
-  };
-  return React__default.createElement(TextField, Object.assign({
-    id: field.name,
-    label: label,
-    type: type,
-    select: isSelectField,
-    fullWidth: true,
-    error: !!error && isTouched,
-    helperText: isTouched && error,
-    SelectProps: {
-      "native": true,
-      className: theme,
-      MenuProps: {
-        className: theme
-      }
-    },
-    InputLabelProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    InputProps: InputProps,
-    inputProps: _extends({}, inputProps, pInputProps),
-    inputRef: inputRef
-  }, field), isSelectField ? _map(selectOptions, function (option) {
-    return React__default.createElement("option", {
-      key: option.value,
-      value: option.value,
-      disabled: option.disabled
-    }, option.label);
-  }) : null);
-};
-
 var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
   return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
 };
@@ -2617,11 +2735,19 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       skipPage = _ref3$skipPage === void 0 ? false : _ref3$skipPage,
       _ref3$canSkipHolderNa = _ref3.canSkipHolderNames,
       canSkipHolderNames = _ref3$canSkipHolderNa === void 0 ? false : _ref3$canSkipHolderNa,
+      _ref3$onForgotPasswor = _ref3.onForgotPasswordSuccess,
+      onForgotPasswordSuccess = _ref3$onForgotPasswor === void 0 ? function () {} : _ref3$onForgotPasswor,
+      _ref3$onForgotPasswor2 = _ref3.onForgotPasswordError,
+      onForgotPasswordError = _ref3$onForgotPasswor2 === void 0 ? function () {} : _ref3$onForgotPasswor2,
       _ref3$onCountdownFini = _ref3.onCountdownFinish,
       onCountdownFinish = _ref3$onCountdownFini === void 0 ? function () {} : _ref3$onCountdownFini,
       _ref3$enableTimer = _ref3.enableTimer,
       enableTimer = _ref3$enableTimer === void 0 ? false : _ref3$enableTimer,
-      logo = _ref3.logo;
+      logo = _ref3.logo,
+      _ref3$showForgotPassw = _ref3.showForgotPasswordButton,
+      showForgotPasswordButton = _ref3$showForgotPassw === void 0 ? false : _ref3$showForgotPassw,
+      _ref3$showSignUpButto = _ref3.showSignUpButton,
+      showSignUpButton = _ref3$showSignUpButto === void 0 ? false : _ref3$showSignUpButto;
 
   var themeMui = styles$1.createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
@@ -2661,14 +2787,18 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       setUserExpired = _useState8[1];
 
   var _useState9 = React.useState(false),
-      showModalRegister = _useState9[0],
-      setShowModalRegister = _useState9[1];
+      showModalSignup = _useState9[0],
+      setShowModalSignup = _useState9[1];
 
-  var _useState10 = React.useState([]),
-      ticketsQuantity = _useState10[0],
-      setTicketsQuantity = _useState10[1];
+  var _useState10 = React.useState(false),
+      showModalForgotPassword = _useState10[0],
+      setShowModalForgotPassword = _useState10[1];
 
-  var _useState11 = React.useState({
+  var _useState11 = React.useState([]),
+      ticketsQuantity = _useState11[0],
+      setTicketsQuantity = _useState11[1];
+
+  var _useState12 = React.useState({
     firstName: '',
     lastName: '',
     email: '',
@@ -2683,16 +2813,16 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     state: '',
     zip: ''
   }),
-      userValues = _useState11[0],
-      setUserValues = _useState11[1];
+      userValues = _useState12[0],
+      setUserValues = _useState12[1];
 
-  var _useState12 = React.useState(true),
-      loading = _useState12[0],
-      setLoading = _useState12[1];
+  var _useState13 = React.useState(true),
+      loading = _useState13[0],
+      setLoading = _useState13[1];
 
-  var _useState13 = React.useState(null),
-      error = _useState13[0],
-      setError = _useState13[1];
+  var _useState14 = React.useState(null),
+      error = _useState14[0],
+      setError = _useState14[1];
 
   var emailLogged = _get(userData, 'email', '') || _get(userValues, 'email', '');
 
@@ -3308,20 +3438,37 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
       _onGetProfileDataSuccess(data);
     },
-    onGetProfileDataError: onGetProfileDataError
-  }), showModalRegister && React__default.createElement(RegisterModal, {
+    onGetProfileDataError: onGetProfileDataError,
+    showSignUpButton: showSignUpButton,
+    showForgotPasswordButton: showForgotPasswordButton,
+    onForgotPassword: function onForgotPassword() {
+      setShowModalLogin(false);
+      setShowModalForgotPassword(true);
+    },
+    onSignup: function onSignup() {
+      setShowModalLogin(false);
+      setShowModalSignup(true);
+    }
+  }), showModalSignup && React__default.createElement(SignupModal, {
     onClose: function onClose() {
-      setShowModalRegister(false);
+      setShowModalSignup(false);
     },
-    onRegister: function onRegister() {
-      setShowModalRegister(false);
+    onLogin: function onLogin() {
+      setShowModalSignup(false);
+      setShowModalLogin(true);
     },
-    onGetProfileDataSuccess: function onGetProfileDataSuccess(data) {
-      fetchCart();
-
-      _onGetProfileDataSuccess(data);
+    onRegisterSuccess: onRegisterSuccess,
+    onRegisterError: onRegisterError
+  }), showModalForgotPassword && React__default.createElement(ForgotPasswordModal, {
+    onClose: function onClose() {
+      setShowModalForgotPassword(false);
     },
-    onGetProfileDataError: onGetProfileDataError
+    onLogin: function onLogin() {
+      setShowModalForgotPassword(false);
+      setShowModalLogin(true);
+    },
+    onForgotPasswordSuccess: onForgotPasswordSuccess,
+    onForgotPasswordError: onForgotPasswordError
   }));
 };
 
@@ -5519,13 +5666,13 @@ var TicketsTable = function TicketsTable(_ref) {
 
     return React__default.createElement(React.Fragment, {
       key: index
-    }, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, ticket.hash), React__default.createElement(TableCell, null, ticket.ticket_type), React__default.createElement(TableCell, null, ticket.holder_name), React__default.createElement(TableCell, null, ticket.status), React__default.createElement(TableCell, null, ticket.status !== "Sold" && React__default.createElement("span", {
+    }, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, ticket.hash), React__default.createElement(TableCell, null, ticket.ticket_type), React__default.createElement(TableCell, null, ticket.holder_name), React__default.createElement(TableCell, null, ticket.status), ticket.pdf_link && ticket.status !== "Sold" ? React__default.createElement(TableCell, null, React__default.createElement("span", {
       "aria-hidden": true,
       className: "action-button",
       onClick: function onClick() {
         return downloadPDF(ticket.pdf_link);
       }
-    }, "Download")), React__default.createElement(TableCell, null, ticket.is_sellable && React__default.createElement("span", {
+    }, "Download")) : null, React__default.createElement(TableCell, null, ticket.is_sellable && React__default.createElement("span", {
       "aria-hidden": true,
       className: "action-button",
       onClick: function onClick() {
@@ -5565,7 +5712,7 @@ var RadioField = function RadioField(_ref) {
   }));
 };
 
-var style$1 = {
+var style$3 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -5578,33 +5725,33 @@ var style$1 = {
   maxHeight: '85vh',
   overflow: 'auto'
 };
-var schema = /*#__PURE__*/yup.object().shape({
-  to: /*#__PURE__*/yup.string().required(),
-  first_name: /*#__PURE__*/yup.string().when('to', {
+var schema = /*#__PURE__*/Yup.object().shape({
+  to: /*#__PURE__*/Yup.string().required(),
+  first_name: /*#__PURE__*/Yup.string().when('to', {
     is: function is(to) {
       return to === 'friend';
     },
-    then: /*#__PURE__*/yup.string().required('First Name is required')
+    then: /*#__PURE__*/Yup.string().required('First Name is required')
   }),
-  last_name: /*#__PURE__*/yup.string().when('to', {
+  last_name: /*#__PURE__*/Yup.string().when('to', {
     is: function is(to) {
       return to === 'friend';
     },
-    then: /*#__PURE__*/yup.string().required('Last Name is required')
+    then: /*#__PURE__*/Yup.string().required('Last Name is required')
   }),
-  email: /*#__PURE__*/yup.string().when('to', {
+  email: /*#__PURE__*/Yup.string().when('to', {
     is: function is(to) {
       return to === 'friend';
     },
-    then: /*#__PURE__*/yup.string().email('Invalid email').required('Email is required')
+    then: /*#__PURE__*/Yup.string().email('Invalid email').required('Email is required')
   }),
-  confirm_email: /*#__PURE__*/yup.string().when('to', {
+  confirm_email: /*#__PURE__*/Yup.string().when('to', {
     is: function is(to) {
       return to === 'friend';
     },
-    then: /*#__PURE__*/yup.string().email('Invalid email').oneOf([yup.ref('email'), null], 'Emails must match').required('Confirm Email is required')
+    then: /*#__PURE__*/Yup.string().email('Invalid email').oneOf([Yup.ref('email'), null], 'Emails must match').required('Confirm Email is required')
   }),
-  confirm: /*#__PURE__*/yup.boolean().oneOf([true])
+  confirm: /*#__PURE__*/Yup.boolean().oneOf([true])
 });
 var initialValues = {
   to: 'friend',
@@ -5634,7 +5781,7 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
     "aria-describedby": "modal-modal-description",
     className: 'resale-modal'
   }, React__default.createElement(Box, {
-    style: style$1
+    style: style$3
   }, React__default.createElement("h3", null, "Sell Ticket"), React__default.createElement("div", null, React__default.createElement("h3", null, "Ticket Details"), React__default.createElement("div", null, React__default.createElement("h4", null, "Event"), React__default.createElement("p", null, event_name)), React__default.createElement("div", null, React__default.createElement("h4", null, "Ticket Holder"), React__default.createElement("p", null, holder_name)), React__default.createElement("div", null, React__default.createElement("h4", null, "Ticket ID"), React__default.createElement("p", null, hash))), React__default.createElement("div", null, React__default.createElement("h3", null, "Sell to Whom"), React__default.createElement(formik.Formik, {
     initialValues: initialValues,
     validationSchema: schema,
@@ -5719,7 +5866,7 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
   }))));
 };
 
-var style$2 = {
+var style$4 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -5747,7 +5894,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
     "aria-describedby": "modal-modal-description",
     className: 'confirm-modal'
   }, React__default.createElement(Box, {
-    style: style$2
+    style: style$4
   }, React__default.createElement("p", null, message), React__default.createElement("div", {
     className: 'footer'
   }, React__default.createElement(Button, {
@@ -6138,7 +6285,7 @@ var TicketResaleContainer = function TicketResaleContainer(_ref) {
   }, React__default.createElement("h3", null, successMessage ? successMessage : error)));
 };
 
-var style$3 = {
+var style$5 = {
   position: 'absolute',
   top: '10%',
   left: '50%',
@@ -6162,7 +6309,7 @@ var RedirectModal = function RedirectModal(_ref) {
     "aria-describedby": "modal-modal-description",
     className: "redirect-modal"
   }, React__default.createElement(Box, {
-    style: style$3
+    style: style$5
   }, React__default.createElement("p", null, message), React__default.createElement("div", {
     className: "footer"
   }, React__default.createElement("button", {
@@ -6170,7 +6317,7 @@ var RedirectModal = function RedirectModal(_ref) {
   }, "OK"))));
 };
 
-var style$4 = {
+var style$6 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -6276,7 +6423,7 @@ var RsvpContainer = function RsvpContainer(_ref) {
     "aria-describedby": "modal-modal-description",
     className: "rsvp-modal"
   }, React__default.createElement(Box, {
-    style: style$4,
+    style: style$6,
     className: "rsvp-modal-box"
   }, React__default.createElement("div", {
     className: "rsvp-modal-container"