tf-checkout-react 1.7.3 → 1.7.5

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

@@ -1,4 +1,4 @@
-import { CircularProgress, Modal as Modal$1, FormControl, FormHelperText, InputLabel, Snackbar, Alert, Box as Box$1, Button as Button$1, TextField as TextField$1, Backdrop as Backdrop$1, Select as Select$1 } from '@mui/material';
+import { CircularProgress, Modal as Modal$1, FormControl, FormHelperText, InputLabel, Snackbar, Alert, Box as Box$1, Grid, Button as Button$1, TextField as TextField$1, Backdrop as Backdrop$1, Select as Select$1 } from '@mui/material';
 import Backdrop from '@mui/material/Backdrop';
 import Button from '@mui/material/Button';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
@@ -31,15 +31,16 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
+import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 import _includes from 'lodash-es/includes';
 import _isFunction from 'lodash-es/isFunction';
 import _isObject from 'lodash-es/isObject';
-import MuiPhoneNumber from 'material-ui-phone-number';
+import 'material-ui-phone-number';
 import _debounce from 'lodash-es/debounce';
+import { MuiTelInput } from 'mui-tel-input';
 import FormHelperText$1 from '@mui/material/FormHelperText';
 import ListItemText from '@mui/material/ListItemText';
-import MenuItem from '@mui/material/MenuItem';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import Select from '@mui/material/Select';
 import Modal$2 from '@mui/material/Modal';
@@ -53,6 +54,9 @@ import RadioGroup from '@mui/material/RadioGroup';
 import _reverse from 'lodash-es/reverse';
 import _sortBy from 'lodash-es/sortBy';
 import { object, string, ref, boolean } from 'yup';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import Alert$1 from '@mui/material/Alert';
 import Container from '@mui/material/Container';
 import { Elements, useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
@@ -496,7 +500,8 @@ if (isWindowDefined && authGuestToken) {
 }
 var publicRequest = /*#__PURE__*/axios.create({
   baseURL: 'https://www.ticketfairy.com/api',
-  headers: headers
+  headers: headers,
+  withCredentials: true
 });
 publicRequest.interceptors.request.use(function (config) {
   if (getCookieByName('X-TF-ECOMMERCE')) {
@@ -2506,6 +2511,12 @@ var passwordValidator = function passwordValidator(password) {
   }
   return '';
 };
+var confirmPasswordValidator = function confirmPasswordValidator(confirmPassword, password) {
+  if (confirmPassword !== password) {
+    return 'Passwords do not match.';
+  }
+  return '';
+};
 
 var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
   return !value ? '' : getCurrencySymbolByCurrency(currency) + " " + value;
@@ -2825,7 +2836,7 @@ var Checkbox = function Checkbox(_ref) {
 };
 
 var CustomField = function CustomField(_ref2) {
-  var _ref$current, _customTheme$input;
+  var _ref$current, _ref$current2, _customTheme$input;
   var label = _ref2.label,
     _ref2$type = _ref2.type,
     type = _ref2$type === void 0 ? 'text' : _ref2$type,
@@ -2856,7 +2867,7 @@ var CustomField = function CustomField(_ref2) {
     showPassword = _useState2[0],
     setShowPassword = _useState2[1];
   var _ref = useRef(null);
-  var isAutoFilled = (_ref$current = _ref.current) == null ? void 0 : _ref$current.matches(':-webkit-autofill');
+  var isAutoFilled = (_ref$current = _ref.current) != null && _ref$current.matches ? (_ref$current2 = _ref.current) == null ? void 0 : _ref$current2.matches(':-webkit-autofill') : false;
   var isSelectField = type === 'select';
   var isPasswordField = type === 'password';
   var error = _get(errors, field.name);
@@ -2906,10 +2917,18 @@ var CustomField = function CustomField(_ref2) {
       setIsShrinked(true);
     },
     SelectProps: {
-      "native": true,
+      "native": false,
       className: theme,
       MenuProps: {
-        className: theme
+        className: theme,
+        PaperProps: {
+          sx: {
+            '& .MuiMenuItem-root': {
+              paddingLeft: '16px',
+              paddingRight: '16px'
+            }
+          }
+        }
       }
     },
     InputLabelProps: {
@@ -2931,7 +2950,7 @@ var CustomField = function CustomField(_ref2) {
     },
     onChange: onChange != null ? onChange : field.onChange
   }), isSelectField ? _map(selectOptions, function (option) {
-    return React.createElement("option", {
+    return React.createElement(MenuItem, {
       key: option.value,
       value: option.value,
       disabled: option.disabled
@@ -2958,8 +2977,7 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
     defaultCountry = _ref$defaultCountry === void 0 ? 'us' : _ref$defaultCountry,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? false : _ref$fill,
-    setPhoneValidationIsLoading = _ref.setPhoneValidationIsLoading,
-    isCountryCodeEditable = _ref.isCountryCodeEditable;
+    setPhoneValidationIsLoading = _ref.setPhoneValidationIsLoading;
   var error = _get(errors, field.name);
   var isTouched = Boolean(_get(touched, field.name));
   var isSubmitAttempted = Boolean(submitCount && submitCount > 0);
@@ -3019,11 +3037,11 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
     })));
     // eslint-disable-next-line
   }, [field.value]);
-  return React.createElement(React.Fragment, null, React.createElement(MuiPhoneNumber, {
+  return React.createElement(React.Fragment, null, React.createElement(MuiTelInput, {
     name: field.name,
     value: fill ? values[field.name] : initialValues[field.name],
-    onChange: function onChange(value, country) {
-      if ("+" + (country == null ? void 0 : country.dialCode) === value || value === '+') {
+    onChange: function onChange(value) {
+      if (!value || value.length <= 4) {
         setFieldValue(field.name, '');
         setFieldError(field.name, '');
       } else {
@@ -3032,15 +3050,14 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
       }
     },
     variant: "outlined",
-    defaultCountry: defaultCountry,
+    defaultCountry: defaultCountry.toUpperCase(),
     disableDropdown: disableDropdown,
     label: label,
     error: !!error && (isTouched || fill || isSubmitAttempted),
     helperText: (isTouched || fill || isSubmitAttempted) && error,
     fullWidth: true,
-    autoFormat: false,
-    disableAreaCodes: true,
-    countryCodeEditable: isCountryCodeEditable
+    forceCallingCode: true,
+    focusOnSelectCountry: true
   }));
 };
 
@@ -4827,16 +4844,441 @@ var ForgotPasswordModal = function ForgotPasswordModal(_ref) {
   }))));
 };
 
+// Theme colors
+var COLORS = {
+  PRIMARY: '#212529',
+  SECONDARY: '#666',
+  BACKGROUND: '#fff',
+  BORDER: 'white',
+  INDICATOR: '#212529'
+};
+// Typography
+var TYPOGRAPHY = {
+  FONT_FAMILY: 'Inter',
+  FONT_WEIGHT: {
+    SEMIBOLD: 600,
+    BOLD: 700
+  },
+  FONT_SIZE: {
+    TAB: '16px',
+    TITLE: '18px'
+  }
+};
+// Modal dimensions
+var MODAL_DIMENSIONS = {
+  WIDTH: {
+    DESKTOP: 480,
+    MOBILE: 345
+  }
+};
+// Tab configuration
+var TAB_STYLES = {
+  BACKGROUND_COLOR: COLORS.BACKGROUND,
+  MARGIN_BOTTOM: '30px',
+  LABEL: {
+    FONT_FAMILY: TYPOGRAPHY.FONT_FAMILY,
+    FONT_WEIGHT: TYPOGRAPHY.FONT_WEIGHT.SEMIBOLD,
+    FONT_SIZE: TYPOGRAPHY.FONT_SIZE.TAB,
+    TEXT_TRANSFORM: 'none',
+    COLOR: COLORS.SECONDARY,
+    SELECTED_COLOR: COLORS.PRIMARY
+  },
+  INDICATOR: {
+    BACKGROUND_COLOR: COLORS.INDICATOR
+  }
+};
+
+var SignUpForm = function SignUpForm(_ref) {
+  var onSignUpSuccess = _ref.onSignUpSuccess,
+    _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
+    onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? function () {} : _ref$onGetProfileData,
+    _ref$onGetProfileData2 = _ref.onGetProfileDataError,
+    onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2,
+    logo = _ref.logo;
+  var _useState = useState(''),
+    error = _useState[0],
+    setError = _useState[1];
+  var _useState2 = useState(false),
+    isSubmitting = _useState2[0],
+    setIsSubmitting = _useState2[1];
+  var _useState3 = useState([]),
+    countries = _useState3[0],
+    setCountries = _useState3[1];
+  var _useState4 = useState([]),
+    states = _useState4[0],
+    setStates = _useState4[1];
+  var _useState5 = useState(false),
+    phoneValidationIsLoading = _useState5[0],
+    setPhoneValidationIsLoading = _useState5[1];
+  // Fetch countries on mount
+  useEffect(function () {
+    var fetchCountries = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var res, mappedCountries;
+        return _regeneratorRuntime().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;
+              mappedCountries = _map(res.data, function (item) {
+                return {
+                  id: item.id,
+                  name: item.name,
+                  code: item.code
+                };
+              });
+              setCountries(mappedCountries);
+              _context.next = 11;
+              break;
+            case 8:
+              _context.prev = 8;
+              _context.t0 = _context["catch"](0);
+              console.error('Error fetching countries:', _context.t0);
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 8]]);
+      }));
+      return function fetchCountries() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    fetchCountries();
+  }, []);
+  return React.createElement(Formik, {
+    enableReinitialize: true,
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+      passwordConfirmation: '',
+      phone: '',
+      country: '1',
+      city: '',
+      state: '',
+      streetAddress: '',
+      zip: ''
+    },
+    onSubmit: function () {
+      var _onSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(values) {
+        var formData, profileResponse, profileSpecifiedData, profileDataObj, event, errorData, errorMessages;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              setIsSubmitting(true);
+              setError('');
+              _context2.prev = 2;
+              formData = new FormData();
+              formData.append('first_name', values.firstName);
+              formData.append('last_name', values.lastName);
+              formData.append('email', values.email);
+              formData.append('password', values.password);
+              formData.append('password_confirmation', values.passwordConfirmation);
+              formData.append('phone', values.phone);
+              formData.append('country', values.country);
+              formData.append('city', values.city);
+              formData.append('state', values.state);
+              formData.append('street_address', values.streetAddress);
+              formData.append('zip', values.zip);
+              formData.append('client_id', CONFIGS.CLIENT_ID || '');
+              formData.append('client_secret', CONFIGS.CLIENT_SECRET || '');
+              _context2.next = 19;
+              return register(formData);
+            case 19:
+              _context2.prev = 19;
+              _context2.next = 22;
+              return getProfileData();
+            case 22:
+              profileResponse = _context2.sent;
+              onGetProfileDataSuccess(profileResponse.data);
+              profileSpecifiedData = profileResponse.data;
+              profileDataObj = setLoggedUserData(profileSpecifiedData);
+              if (isBrowser) {
+                window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
+                event = new window.CustomEvent('tf-login');
+                window.document.dispatchEvent(event);
+              }
+              onSignUpSuccess(_get(profileResponse, 'data.data', {}));
+              _context2.next = 34;
+              break;
+            case 30:
+              _context2.prev = 30;
+              _context2.t0 = _context2["catch"](19);
+              if (_context2.t0.isAxiosError) {
+                onGetProfileDataError(_context2.t0);
+              }
+              setError('Registration successful but failed to fetch profile data');
+            case 34:
+              _context2.next = 40;
+              break;
+            case 36:
+              _context2.prev = 36;
+              _context2.t1 = _context2["catch"](2);
+              errorData = _get(_context2.t1, 'response.data.message', ''); // Check if error is an object with field-specific errors
+              if (typeof errorData === 'object' && errorData !== null) {
+                errorMessages = Object.entries(errorData).map(function (_ref3) {
+                  var field = _ref3[0],
+                    messages = _ref3[1];
+                  var fieldName = field.replace(/_/g, ' ').replace(/\b\w/g, function (l) {
+                    return l.toUpperCase();
+                  });
+                  var messageArray = Array.isArray(messages) ? messages : [messages];
+                  return fieldName + ": " + messageArray.join(', ');
+                }).join('\n');
+                setError(errorMessages || 'Registration failed. Please try again.');
+              } else {
+                setError(String(errorData) || 'Registration failed. Please try again.');
+              }
+            case 40:
+              _context2.prev = 40;
+              setIsSubmitting(false);
+              return _context2.finish(40);
+            case 43:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[2, 36, 40, 43], [19, 30]]);
+      }));
+      function onSubmit(_x) {
+        return _onSubmit.apply(this, arguments);
+      }
+      return onSubmit;
+    }()
+  }, function (props) {
+    return React.createElement(Form, {
+      onSubmit: props.handleSubmit
+    }, React.createElement("div", {
+      className: "login-logo-container"
+    }, React.createElement("img", {
+      className: "login-logo-tff",
+      src: logo || 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg',
+      alt: "logo"
+    })), error && React.createElement("div", {
+      className: "server_auth__error",
+      style: {
+        whiteSpace: 'pre-line'
+      }
+    }, error), React.createElement(Grid, {
+      container: true,
+      spacing: 2,
+      sx: {
+        padding: '15px 25px',
+        maxHeight: {
+          xs: '40vh',
+          sm: '60vh'
+        },
+        overflowY: 'auto'
+      }
+    }, React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6
+    }, React.createElement(Field, {
+      name: "firstName",
+      label: "First Name",
+      type: "text",
+      component: CustomField,
+      theme: "light",
+      validate: requiredValidator
+    })), React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6
+    }, React.createElement(Field, {
+      name: "lastName",
+      label: "Last Name",
+      type: "text",
+      component: CustomField,
+      theme: "light",
+      validate: requiredValidator
+    })), React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6
+    }, React.createElement(Field, {
+      name: "email",
+      label: "Email",
+      type: "email",
+      component: CustomField,
+      theme: "light",
+      validate: function validate(value) {
+        var required = requiredValidator(value);
+        if (required) return required;
+        return emailValidator(value);
+      }
+    })), React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6
+    }, React.createElement(Field, {
+      name: "streetAddress",
+      label: "Street Address",
+      type: "text",
+      component: CustomField,
+      theme: "light",
+      validate: requiredValidator
+    })), React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6
+    }, React.createElement(Field, {
+      name: "zip",
+      label: "Zip / Postal Code",
+      type: "text",
+      component: CustomField,
+      theme: "light",
+      validate: requiredValidator
+    })), React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6
+    }, React.createElement(Field, {
+      name: "country",
+      label: "Country",
+      type: "select",
+      component: CustomField,
+      theme: "light",
+      validate: requiredValidator,
+      selectOptions: _map(countries, function (item) {
+        return {
+          value: item.id,
+          label: item.name
+        };
+      }),
+      onChange: function onChange(e) {
+        props.setFieldValue('country', e.target.value);
+        props.setFieldValue('state', '');
+        // Fetch states for selected country
+        var fetchStatesForCountry = /*#__PURE__*/function () {
+          var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+            var res, mappedStates;
+            return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+              while (1) switch (_context3.prev = _context3.next) {
+                case 0:
+                  _context3.prev = 0;
+                  _context3.next = 3;
+                  return getStates(e.target.value);
+                case 3:
+                  res = _context3.sent;
+                  mappedStates = _map(res.data, function (item, key) {
+                    return {
+                      label: item,
+                      value: key
+                    };
+                  });
+                  setStates(mappedStates);
+                  _context3.next = 12;
+                  break;
+                case 8:
+                  _context3.prev = 8;
+                  _context3.t0 = _context3["catch"](0);
+                  console.error('Error fetching states:', _context3.t0);
+                  setStates([]);
+                case 12:
+                case "end":
+                  return _context3.stop();
+              }
+            }, _callee3, null, [[0, 8]]);
+          }));
+          return function fetchStatesForCountry() {
+            return _ref4.apply(this, arguments);
+          };
+        }();
+        fetchStatesForCountry();
+      }
+    })), React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6
+    }, React.createElement(Field, {
+      name: "state",
+      label: "State / Province",
+      type: "select",
+      component: CustomField,
+      theme: "light",
+      validate: requiredValidator,
+      selectOptions: [{
+        value: '',
+        label: 'Select State/Province',
+        disabled: true
+      }].concat(states)
+    })), React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6
+    }, React.createElement(Field, {
+      name: "city",
+      label: "City",
+      type: "text",
+      component: CustomField,
+      theme: "light",
+      validate: requiredValidator
+    })), React.createElement(Grid, {
+      item: true,
+      xs: 12
+    }, React.createElement(Field, {
+      name: "phone",
+      label: "Phone",
+      type: "phone",
+      component: PhoneNumberField,
+      fill: true,
+      disableDropdown: false,
+      setPhoneValidationIsLoading: setPhoneValidationIsLoading,
+      defaultCountry: "us",
+      isCountryCodeEditable: true
+    })), React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6
+    }, React.createElement(Field, {
+      name: "password",
+      label: "Password",
+      type: "password",
+      component: CustomField,
+      theme: "light",
+      validate: passwordValidator
+    })), React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6
+    }, React.createElement(Field, {
+      name: "passwordConfirmation",
+      label: "Confirm Password",
+      type: "password",
+      component: CustomField,
+      theme: "light",
+      validate: function validate(value) {
+        return confirmPasswordValidator(value, props.values.password);
+      }
+    }))), React.createElement("div", {
+      className: "login-modal-body"
+    }, React.createElement("div", {
+      className: "login-action-button"
+    }, React.createElement("button", {
+      type: "submit",
+      disabled: isSubmitting || phoneValidationIsLoading
+    }, isSubmitting ? 'Creating Account...' : 'Create Account'))));
+  });
+};
+
 var style$2 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
-  minWidth: 480,
+  width: MODAL_DIMENSIONS.WIDTH.DESKTOP,
   backgroundColor: '#e3e3e3',
-  border: '1px solid white',
+  border: "1px solid " + COLORS.BORDER,
   outline: 'none'
 };
+var mobileStyle = /*#__PURE__*/_extends({}, style$2, {
+  width: MODAL_DIMENSIONS.WIDTH.MOBILE
+});
 var LoginModal = function LoginModal(_ref) {
   var onClose = _ref.onClose,
     onLogin = _ref.onLogin,
@@ -4860,12 +5302,19 @@ var LoginModal = function LoginModal(_ref) {
     _ref$showSignUpButton = _ref.showSignUpButton,
     showSignUpButton = _ref$showSignUpButton === void 0 ? false : _ref$showSignUpButton,
     _ref$showPoweredByIma = _ref.showPoweredByImage,
-    showPoweredByImage = _ref$showPoweredByIma === void 0 ? false : _ref$showPoweredByIma,
-    _ref$registerUrl = _ref.registerUrl,
-    registerUrl = _ref$registerUrl === void 0 ? 'https://www.ticketfairy.com/register' : _ref$registerUrl;
+    showPoweredByImage = _ref$showPoweredByIma === void 0 ? false : _ref$showPoweredByIma;
   var _useState = useState(''),
     error = _useState[0],
     setError = _useState[1];
+  var _useState2 = useState('login'),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var isMobile = useMediaQuery('(max-width:600px)');
+  // If onSignup is provided (custom callback), use old behavior
+  var useCustomSignup = onSignup !== _identity;
+  var handleTabChange = function handleTabChange(_event, newValue) {
+    setActiveTab(newValue);
+  };
   return React.createElement(Modal$2, {
     open: true,
     onClose: onClose,
@@ -4873,8 +5322,51 @@ var LoginModal = function LoginModal(_ref) {
     "aria-describedby": "modal-modal-description",
     className: "login-modal " + modalClassname
   }, React.createElement(Box, {
-    style: style$2
-  }, React.createElement("div", null, React.createElement(Formik, {
+    style: isMobile ? mobileStyle : style$2,
+    sx: {
+      '@media screen and (orientation:landscape)': {
+        maxHeight: '80vh',
+        overflowY: 'auto'
+      }
+    }
+  }, React.createElement("div", null, showSignUpButton && !useCustomSignup && React.createElement(Tabs, {
+    value: activeTab,
+    onChange: handleTabChange,
+    variant: "fullWidth",
+    sx: {
+      backgroundColor: TAB_STYLES.BACKGROUND_COLOR,
+      marginBottom: TAB_STYLES.MARGIN_BOTTOM,
+      '& .MuiTabs-indicator': {
+        backgroundColor: TAB_STYLES.INDICATOR.BACKGROUND_COLOR
+      }
+    }
+  }, React.createElement(Tab, {
+    label: "Login",
+    value: "login",
+    sx: {
+      fontFamily: TAB_STYLES.LABEL.FONT_FAMILY,
+      fontWeight: TAB_STYLES.LABEL.FONT_WEIGHT,
+      fontSize: TAB_STYLES.LABEL.FONT_SIZE,
+      textTransform: TAB_STYLES.LABEL.TEXT_TRANSFORM,
+      color: TAB_STYLES.LABEL.COLOR,
+      '&.Mui-selected': {
+        color: TAB_STYLES.LABEL.SELECTED_COLOR
+      }
+    }
+  }), React.createElement(Tab, {
+    label: "Sign Up",
+    value: "signup",
+    sx: {
+      fontFamily: TAB_STYLES.LABEL.FONT_FAMILY,
+      fontWeight: TAB_STYLES.LABEL.FONT_WEIGHT,
+      fontSize: TAB_STYLES.LABEL.FONT_SIZE,
+      textTransform: TAB_STYLES.LABEL.TEXT_TRANSFORM,
+      color: TAB_STYLES.LABEL.COLOR,
+      '&.Mui-selected': {
+        color: TAB_STYLES.LABEL.SELECTED_COLOR
+      }
+    }
+  })), activeTab === 'login' ? React.createElement(Formik, {
     initialValues: {
       email: '',
       password: ''
@@ -4946,8 +5438,6 @@ var LoginModal = function LoginModal(_ref) {
     return React.createElement(Form, {
       onSubmit: props.handleSubmit
     }, React.createElement("div", {
-      className: "modal-title"
-    }, "Login"), React.createElement("div", {
       className: "login-logo-container"
     }, React.createElement("img", {
       className: "login-logo-tff",
@@ -4988,19 +5478,20 @@ var LoginModal = function LoginModal(_ref) {
     }, React.createElement("span", {
       "aria-hidden": "true",
       onClick: onForgotPassword
-    }, "Forgot password?")), showSignUpButton && React.createElement("div", {
+    }, "Forgot password?")), showSignUpButton && useCustomSignup && React.createElement("div", {
       className: "forgot-password"
-    }, onSignup !== _identity ? React.createElement("span", {
+    }, React.createElement("span", {
       "aria-hidden": "true",
       onClick: onSignup,
       style: {
         cursor: 'pointer'
       }
-    }, "Sign up") : React.createElement("a", {
-      href: registerUrl,
-      target: "_blank",
-      rel: "noopener noreferrer"
     }, "Sign up")), showPoweredByImage ? React.createElement(PoweredBy, null) : null));
+  }) : React.createElement(SignUpForm, {
+    onSignUpSuccess: onLogin,
+    onGetProfileDataSuccess: onGetProfileDataSuccess,
+    onGetProfileDataError: onGetProfileDataError,
+    logo: logo
   }))));
 };
 
@@ -6330,7 +6821,7 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref6) {
     enableTimer = _ref6$enableTimer === void 0 ? false : _ref6$enableTimer,
     logo = _ref6.logo,
     _ref6$showForgotPassw = _ref6.showForgotPasswordButton,
-    showForgotPasswordButton = _ref6$showForgotPassw === void 0 ? false : _ref6$showForgotPassw,
+    showForgotPasswordButton = _ref6$showForgotPassw === void 0 ? true : _ref6$showForgotPassw,
     _ref6$showSignUpButto = _ref6.showSignUpButton,
     showSignUpButton = _ref6$showSignUpButto === void 0 ? false : _ref6$showSignUpButto,
     _ref6$brandOptIn = _ref6.brandOptIn,
@@ -7846,7 +8337,12 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     _ref$showOrderDetails = _ref.showOrderDetailsBtn,
     showOrderDetailsBtn = _ref$showOrderDetails === void 0 ? false : _ref$showOrderDetails,
     _ref$onOrderDetailsCl = _ref.onOrderDetailsClick,
-    onOrderDetailsClick = _ref$onOrderDetailsCl === void 0 ? _identity : _ref$onOrderDetailsCl;
+    onOrderDetailsClick = _ref$onOrderDetailsCl === void 0 ? _identity : _ref$onOrderDetailsCl,
+    _ref$showProductImage = _ref.showProductImage,
+    showProductImage = _ref$showProductImage === void 0 ? true : _ref$showProductImage,
+    eventTitle = _ref.eventTitle,
+    eventDate = _ref.eventDate,
+    eventLocation = _ref.eventLocation;
   var inputRef = useRef(null);
   var _useState = useState(null),
     data = _useState[0],
@@ -7859,12 +8355,12 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   var eventId = (data == null ? void 0 : data.product_id) || '';
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var _data$product_price, confirmationDataResponse, _data;
+      var _data$product_price, confirmationDataResponse, _data, isLoggedIn;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             if (!hash) {
-              _context.next = 16;
+              _context.next = 17;
               break;
             }
             _context.prev = 1;
@@ -7897,17 +8393,24 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
             }
             setData(_data);
             onGetConfirmationDataSuccess(confirmationDataResponse.data.attributes);
-            _context.next = 16;
+            // Clear user_data for non-logged-in users after successful purchase
+            if (isBrowser) {
+              isLoggedIn = Boolean(getCookieByName('X-TF-ECOMMERCE'));
+              if (!isLoggedIn) {
+                window.localStorage.removeItem('user_data');
+              }
+            }
+            _context.next = 17;
             break;
-          case 13:
-            _context.prev = 13;
+          case 14:
+            _context.prev = 14;
             _context.t0 = _context["catch"](1);
             if (axios.isAxiosError(_context.t0)) onGetConfirmationDataError(_context.t0);
-          case 16:
+          case 17:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[1, 13]]);
+      }, _callee, null, [[1, 14]]);
     }))();
   }, [hash]);
   var _useState2 = useState(false),
@@ -7947,7 +8450,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     showCopyModal: showCopyModal
   }), data && React.createElement(React.Fragment, null, React.createElement("div", {
     className: "header-container"
-  }, React.createElement("div", {
+  }, showProductImage && React.createElement("div", {
     className: "header-product-image"
   }, React.createElement("img", {
     alt: "",
@@ -7957,7 +8460,15 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     className: "header-product-text"
   }, React.createElement("p", {
     className: "title"
-  }, data.is_payment_plan ? paymentPlanConfirmationTitle : confirmationTitle), React.createElement("div", {
+  }, data.is_payment_plan ? paymentPlanConfirmationTitle : confirmationTitle), (eventTitle || eventDate || eventLocation) && React.createElement("div", {
+    className: "event-details"
+  }, eventTitle && React.createElement("div", {
+    className: "event-title"
+  }, eventTitle), eventDate && React.createElement("div", {
+    className: "event-date"
+  }, eventDate), eventLocation && React.createElement("div", {
+    className: "event-location"
+  }, eventLocation)), React.createElement("div", {
     className: "share-message-section",
     dangerouslySetInnerHTML: data.custom_confirmation_page_text && data.custom_confirmation_page_text_full_replacement ? createMarkup(data.custom_confirmation_page_text) : undefined
   }, data.custom_confirmation_page_text && data.custom_confirmation_page_text_full_replacement ? undefined : React.createElement(React.Fragment, null, Boolean(data.is_payment_plan) && React.createElement(React.Fragment, null, React.createElement("span", {
@@ -8978,7 +9489,8 @@ var PreRegistrationComplete = function PreRegistrationComplete(_ref) {
     onLogin: function onLogin(res) {
       setShowModalLogin(false);
       onLoginSuccess(res);
-    }
+    },
+    showForgotPasswordButton: true
   }), !_isEmpty(error) && React.createElement(ConfirmModal, {
     hideCancelBtn: true,
     message: error.message,
@@ -9912,6 +10424,168 @@ var TicketsSection = function TicketsSection(_ref) {
   }));
 };
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function decodeHTML$1(html) {
+  var textArea = document.createElement('textarea');
+  textArea.innerHTML = html;
+  return textArea.value;
+}
+var TimeSlotTicketRow = function TimeSlotTicketRow(_ref) {
+  var _availableTimeSlots$f;
+  var ticketKey = _ref.ticketKey,
+    ticket = _ref.ticket,
+    availableTimeSlots = _ref.availableTimeSlots,
+    selectedTickets = _ref.selectedTickets,
+    selectedTimeSlots = _ref.selectedTimeSlots,
+    handleTicketSelect = _ref.handleTicketSelect,
+    handleTimeSlotSelect = _ref.handleTimeSlotSelect,
+    priceSymbol = _ref.priceSymbol,
+    isSoldOut = _ref.isSoldOut;
+  var _useState = useState(false),
+    visibleDescription = _useState[0],
+    setVisibleDescription = _useState[1];
+  var currentSelectedTimeKey = selectedTimeSlots[ticketKey] || '';
+  var currentTicketInstance = (_availableTimeSlots$f = availableTimeSlots.find(function (slot) {
+    return slot.timeKey === currentSelectedTimeKey;
+  })) == null ? void 0 : _availableTimeSlots$f.ticketInstance;
+  var currentSelectedQuantity = currentTicketInstance ? selectedTickets[currentTicketInstance.id] || 0 : 0;
+  var maxCount = ticket.maxQuantity;
+  var minCount = ticket.minQuantity;
+  var multiplier = ticket.multiplier;
+  var options = getTicketSelectOptions(maxCount, minCount, multiplier);
+  var ticketPriceWithoutFees = priceSymbol + " " + (+ticket.cost).toFixed(2);
+  var ticketPriceWithFees = priceSymbol + " " + (+ticket.basePrice).toFixed(2);
+  var ticketOldPriceWithFees = priceSymbol + " " + (+ticket.oldBasePrice).toFixed(2);
+  var ticketOldPriceWithoutFees = priceSymbol + " " + (+ticket.oldCost).toFixed(2);
+  var ticketIsDiscounted = false;
+  if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
+    ticketIsDiscounted = true;
+  }
+  var ticketIsFree = +ticket.price === 0;
+  var discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketOldPriceWithoutFees : ticketOldPriceWithFees;
+  var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketPriceWithoutFees : ticketPriceWithFees;
+  var handleTimeChange = function handleTimeChange(event) {
+    var selectedTimeKey = event.target.value;
+    var selectedOption = availableTimeSlots.find(function (slot) {
+      return slot.timeKey === selectedTimeKey;
+    });
+    if (selectedOption) {
+      handleTimeSlotSelect(ticketKey, selectedOption.timeKey, selectedOption.ticketInstance);
+    }
+  };
+  var handleQuantityChange = function handleQuantityChange(event) {
+    var value = event.target.value;
+    // Only allow quantity selection if a time slot is selected
+    if (!currentSelectedTimeKey && value > 0) {
+      return;
+    }
+    if (currentTicketInstance) {
+      handleTicketSelect(ticketKey, value, currentTicketInstance);
+    }
+  };
+  var handleDescriptionToggle = function handleDescriptionToggle() {
+    setVisibleDescription(function (current) {
+      return !current;
+    });
+  };
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "event-detail__tier " + (isSoldOut ? 'disabled' : ''),
+    id: ticketKey
+  }, React.createElement("div", {
+    className: "event-detail__tier-name"
+  }, ticket.displayName || ticket.name, ticket.descriptionRich && React.createElement(React.Fragment, null, React.createElement("span", {
+    "aria-hidden": true,
+    className: "info-icon",
+    onClick: handleDescriptionToggle,
+    "data-tooltip-id": "tooltip-" + ticketKey,
+    "data-tooltip-content": "View ticket info",
+    style: {
+      marginLeft: 8,
+      cursor: 'pointer',
+      display: 'flex'
+    }
+  }, React.createElement(InfoIcon, null)), React.createElement(Tooltip, {
+    id: "tooltip-" + ticketKey,
+    place: "top"
+  }, ticket.description || 'No description available'))), React.createElement("div", {
+    className: "event-tickets-container"
+  }, React.createElement("div", {
+    className: "event-detail__tier-price"
+  }, ticketIsDiscounted && React.createElement("p", {
+    className: "old-price"
+  }, discountTicketPriceElem), React.createElement("p", {
+    className: isSoldOut ? 'sold-out' : ''
+  }, ticketPriceElem), !isSoldOut && !ticketIsFree && React.createElement("p", {
+    className: "fees"
+  }, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && "(" + ticketPriceWithFees + " with fees)")), !isSoldOut && React.createElement("div", {
+    className: "event-detail__tier-state time-slot-selectors-container"
+  }, React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 2,
+      marginTop: 2
+    }
+  }, React.createElement(FormControl$1, null, React.createElement(Select, {
+    sx: {
+      borderRadius: 0,
+      minWidth: 120
+    },
+    value: currentSelectedTimeKey,
+    onChange: handleTimeChange,
+    displayEmpty: true,
+    inputProps: {
+      'aria-label': 'Select time slot'
+    },
+    MenuProps: {
+      PaperProps: {
+        className: 'get-tickets-paper'
+      }
+    }
+  }, React.createElement(MenuItem, {
+    value: "",
+    disabled: true
+  }, "Time"), availableTimeSlots.map(function (slot, index) {
+    return React.createElement(MenuItem, {
+      key: index,
+      value: slot.timeKey
+    }, moment(slot.ticketInstance.slotStartDate).format('hh:mm A'));
+  }))), React.createElement(FormControl$1, null, React.createElement(Select, {
+    sx: {
+      borderRadius: 0,
+      minWidth: 60
+    },
+    value: currentSelectedQuantity,
+    onChange: handleQuantityChange,
+    displayEmpty: true,
+    disabled: !currentSelectedTimeKey,
+    inputProps: {
+      'aria-label': 'Select quantity'
+    },
+    MenuProps: {
+      PaperProps: {
+        sx: {
+          maxHeight: 150
+        },
+        className: 'get-tickets-paper'
+      }
+    }
+  }, options.map(function (option, index) {
+    return React.createElement(MenuItem, {
+      key: index,
+      value: option.value
+    }, option.value);
+  })))))), visibleDescription && ticket.descriptionRich && React.createElement("div", {
+    className: "ticket-description"
+  }, React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: decodeHTML$1(ticket.descriptionRich)
+    }
+  }))));
+};
+
 var TimeSlotsSection = function TimeSlotsSection(_ref) {
   var event = _ref.event,
     availableDates = _ref.availableDates,
@@ -9924,42 +10598,44 @@ var TimeSlotsSection = function TimeSlotsSection(_ref) {
     sortBySoldOut = _ref.sortBySoldOut,
     hideTicketsHeader = _ref.hideTicketsHeader,
     ticketsHeaderComponent = _ref.ticketsHeaderComponent,
-    showGroupNameBlock = _ref.showGroupNameBlock,
-    currencySymbol = _ref.currencySymbol,
-    isSeatMapAllowed = _ref.isSeatMapAllowed;
+    currencySymbol = _ref.currencySymbol;
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
+  var _useState2 = useState({}),
+    selectedTimeSlots = _useState2[0],
+    setSelectedTimeSlots = _useState2[1];
   var handleDateChange = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(date) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             setSelectedDate(date);
+            setSelectedTimeSlots({}); // Reset time slot selections when date changes
             if (!date) {
-              _context.next = 14;
+              _context.next = 15;
               break;
             }
             setLoading(true);
-            _context.prev = 3;
-            _context.next = 6;
+            _context.prev = 4;
+            _context.next = 7;
             return getTimeSlots(date);
-          case 6:
-            _context.next = 11;
+          case 7:
+            _context.next = 12;
             break;
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](3);
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](4);
             console.error('Error fetching time slots:', _context.t0);
-          case 11:
-            _context.prev = 11;
+          case 12:
+            _context.prev = 12;
             setLoading(false);
-            return _context.finish(11);
-          case 14:
+            return _context.finish(12);
+          case 15:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[3, 8, 11, 14]]);
+      }, _callee, null, [[4, 9, 12, 15]]);
     }));
     return function handleDateChange(_x) {
       return _ref2.apply(this, arguments);
@@ -9969,6 +10645,64 @@ var TimeSlotsSection = function TimeSlotsSection(_ref) {
     var formattedDate = moment(date).format('YYYY-MM-DD');
     return !availableDates.includes(formattedDate);
   };
+  // Group tickets by unique ticket type using displayName + price
+  var uniqueTickets = useMemo(function () {
+    var ticketMap = {};
+    // Iterate through all time slots
+    _map(timeSlotGroups, function (tickets, timeKey) {
+      tickets.forEach(function (ticket) {
+        // Use displayName + price as the unique identifier for ticket types
+        // This handles cases where multiple ticket types share the same optionName
+        var ticketKey = (ticket.displayName || ticket.name) + "_" + ticket.price;
+        if (!ticketMap[ticketKey]) {
+          ticketMap[ticketKey] = {
+            ticket: _extends({}, ticket),
+            availableTimeSlots: []
+          };
+        }
+        // Store both the time key and the ticket instance for this slot
+        if (!ticketMap[ticketKey].availableTimeSlots.find(function (slot) {
+          return slot.timeKey === timeKey;
+        })) {
+          ticketMap[ticketKey].availableTimeSlots.push({
+            timeKey: timeKey,
+            ticketInstance: ticket
+          });
+        }
+      });
+    });
+    // Convert to array and sort
+    var ticketsArray = Object.values(ticketMap);
+    return sortBySoldOut ? _sortBy(_sortBy(ticketsArray, function (t) {
+      return t.ticket.sortOrder;
+    }), function (t) {
+      return t.ticket.soldOut;
+    }) : _sortBy(ticketsArray, function (t) {
+      return t.ticket.sortOrder;
+    });
+  }, [timeSlotGroups, sortBySoldOut]);
+  var handleTimeSlotSelect = function handleTimeSlotSelect(ticketKey, timeKey, ticketInstance) {
+    setSelectedTimeSlots(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[ticketKey] = timeKey, _extends2));
+    });
+    // Reset quantity when time slot changes
+    if (selectedTickets[ticketInstance.id]) {
+      handleTicketSelect(ticketInstance.id, 0);
+    }
+  };
+  var handleTicketSelectWithTimeSlot = function handleTicketSelectWithTimeSlot(ticketKey, quantity, ticketInstance) {
+    var timeSlot = selectedTimeSlots[ticketKey];
+    if (!timeSlot && quantity > 0) {
+      return; // Don't allow quantity selection without time slot
+    }
+
+    if (ticketInstance) {
+      handleTicketSelect(ticketInstance.id, quantity);
+    }
+  };
+  var symbol = _get(event, 'currency.symbol');
+  var priceSymbol = currencySymbol || symbol;
   return React.createElement(Box$1, {
     sx: {
       display: 'flex',
@@ -10000,30 +10734,25 @@ var TimeSlotsSection = function TimeSlotsSection(_ref) {
       marginTop: 2,
       width: '100%',
       display: 'flex',
-      flexDirection: 'column',
-      gap: 2
+      flexDirection: 'column'
     }
-  }, _map(Object.keys(timeSlotGroups).sort(), function (timeKey) {
-    return React.createElement("div", {
-      key: timeKey,
-      className: "time-slot-block"
-    }, React.createElement("div", {
-      className: "time-slot-date"
-    }, moment(timeKey).format('hh:mm A')), React.createElement(TicketsSection, {
-      event: event,
-      ticketsList: timeSlotGroups[timeKey],
-      tableTickets: [],
+  }, !hideTicketsHeader && ticketsHeaderComponent, uniqueTickets.map(function (_ref3) {
+    var ticket = _ref3.ticket,
+      availableTimeSlots = _ref3.availableTimeSlots;
+    var ticketKey = (ticket.displayName || ticket.name) + "_" + ticket.price;
+    var isSoldOut = ticket.sold_out || !(ticket.displayTicket || ticket.slotGroupId) || ticket.soldOut;
+    return React.createElement(TimeSlotTicketRow, {
+      key: ticketKey,
+      ticketKey: ticketKey,
+      ticket: ticket,
+      availableTimeSlots: availableTimeSlots,
       selectedTickets: selectedTickets,
-      handleTicketSelect: handleTicketSelect,
-      sortBySoldOut: sortBySoldOut,
-      ticketsHeaderComponent: ticketsHeaderComponent,
-      tableTicketsHeaderComponent: null,
-      hideTableTicketsHeader: true,
-      hideTicketsHeader: hideTicketsHeader || _isEmpty(timeSlotGroups[timeKey]),
-      showGroupNameBlock: showGroupNameBlock,
-      currencySymbol: currencySymbol,
-      isSeatMapAllowed: isSeatMapAllowed
-    }));
+      selectedTimeSlots: selectedTimeSlots,
+      handleTicketSelect: handleTicketSelectWithTimeSlot,
+      handleTimeSlotSelect: handleTimeSlotSelect,
+      priceSymbol: priceSymbol,
+      isSoldOut: isSoldOut
+    });
   })));
 };
 
@@ -10900,7 +11629,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
     onClick: handleLogout
   }, "Log out"))) : ''), showLoginModal ? React.createElement(LoginModal, {
     onClose: handleOnClose,
-    onLogin: handleOnLogin
+    onLogin: handleOnLogin,
+    showForgotPasswordButton: true
   }) : null), showPoweredByImage ? React.createElement(PoweredBy, null) : null, enableInfluencersSection && !hideTopInfluencers && influencers.length ? React.createElement("div", {
     className: "event-influencers"
   }, React.createElement("h3", null, React.createElement("span", null, "TOP"), " INFLUENCERS"), React.createElement("ol", {
@@ -11168,7 +11898,8 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
       setIsLogged(true);
     },
     userExpired: userExpired,
-    logo: logo
+    logo: logo,
+    showForgotPasswordButton: true
   }) : null), data != null && (_data$orders = data.orders) != null && _data$orders.length ? React.createElement(React.Fragment, null, React.createElement("h2", null, "My Ticket Orders"), React.createElement(Autocomplete, {
     disablePortal: true,
     id: "combo-box-demo",
@@ -11221,7 +11952,8 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
       setUserExpired(false);
       setIsLogged(true);
     },
-    userExpired: userExpired
+    userExpired: userExpired,
+    showForgotPasswordButton: true
   })));
 };