tf-checkout-react 1.0.101 → 1.0.102

package/dist/components/billing-info-container/index.d.ts

@@ -42,5 +42,7 @@ export interface IBillingInfoPage {
     onSkipBillingPage: (data: any) => void;
     skipPage?: boolean;
     canSkipHolderNames?: boolean;
+    onCountdownFinish?: () => void;
+    enableTimer?: boolean;
 }
-export declare const BillingInfoContainer: ({ data, ticketHoldersFields, initialValues, buttonName, handleSubmit, theme, onRegisterSuccess, onRegisterError, onSubmitError, onGetCartSuccess, onGetCartError, onGetCountriesSuccess, onGetCountriesError, onGetStatesSuccess, onGetStatesError, onGetProfileDataSuccess, onGetProfileDataError, onAuthorizeSuccess, onAuthorizeError, onLogin, onLoginSuccess, isLoggedIn: pIsLoggedIn, accountInfoTitle, hideLogo, themeOptions, onErrorClose, hideErrorsAlertSection, onSkipBillingPage, skipPage, canSkipHolderNames }: IBillingInfoPage) => JSX.Element;
+export declare const BillingInfoContainer: ({ data, ticketHoldersFields, initialValues, buttonName, handleSubmit, theme, onRegisterSuccess, onRegisterError, onSubmitError, onGetCartSuccess, onGetCartError, onGetCountriesSuccess, onGetCountriesError, onGetStatesSuccess, onGetStatesError, onGetProfileDataSuccess, onGetProfileDataError, onAuthorizeSuccess, onAuthorizeError, onLogin, onLoginSuccess, isLoggedIn: pIsLoggedIn, accountInfoTitle, hideLogo, themeOptions, onErrorClose, hideErrorsAlertSection, onSkipBillingPage, skipPage, canSkipHolderNames, onCountdownFinish, enableTimer }: IBillingInfoPage) => JSX.Element;

package/dist/components/common/SnackbarAlert.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { AlertColor, SnackbarOrigin } from '@mui/material';
+interface ISnackbarAlertProps {
+    isOpen: boolean;
+    message: string;
+    type: AlertColor;
+    position?: SnackbarOrigin;
+    autoHideDuration?: number;
+    variant?: 'filled' | 'standard' | 'outlined';
+    onClose: () => void;
+}
+declare const SnackbarAlert: ({ isOpen, message, type, position, autoHideDuration, variant, onClose, }: ISnackbarAlertProps) => JSX.Element;
+export default SnackbarAlert;

package/dist/components/confirmationContainer/index.d.ts

@@ -14,6 +14,7 @@ export interface IConfirmationPage {
     shareButtons: IShareButton[];
     onGetConfirmationDataSuccess: (res: any) => void;
     onGetConfirmationDataError: (e: AxiosError) => void;
+    onLinkCopied: () => void;
     orderHash?: string;
 }
-export declare const ConfirmationContainer: ({ isReferralEnabled, showDefaultShareButtons, messengerAppId, shareButtons, onGetConfirmationDataSuccess, onGetConfirmationDataError, orderHash, }: IConfirmationPage) => JSX.Element;
+export declare const ConfirmationContainer: ({ isReferralEnabled, showDefaultShareButtons, messengerAppId, shareButtons, onGetConfirmationDataSuccess, onGetConfirmationDataError, orderHash, onLinkCopied }: IConfirmationPage) => JSX.Element;

package/dist/components/ticketsContainer/index.d.ts

@@ -30,6 +30,7 @@ export interface IGetTickets {
     isAccessCodeEnabled?: boolean;
     hideSessionButtons?: boolean;
     hideWaitingList?: boolean;
+    isButtonScrollable?: boolean;
 }
 export interface ITicket {
     id: string | number;
@@ -38,5 +39,5 @@ export interface ITicket {
 export interface ISelectedTickets {
     [key: string]: string | number;
 }
-export declare const TicketsContainer: ({ onLoginSuccess, getTicketsLabel, eventId, onAddToCartSuccess, contentStyle, onAddToCartError, onGetTicketsSuccess, onGetTicketsError, theme, queryPromoCode, isPromotionsEnabled, themeOptions, isAccessCodeEnabled, hideSessionButtons, hideWaitingList }: IGetTickets) => JSX.Element;
+export declare const TicketsContainer: ({ onLoginSuccess, getTicketsLabel, eventId, onAddToCartSuccess, contentStyle, onAddToCartError, onGetTicketsSuccess, onGetTicketsError, theme, queryPromoCode, isPromotionsEnabled, themeOptions, isAccessCodeEnabled, hideSessionButtons, hideWaitingList, isButtonScrollable }: IGetTickets) => JSX.Element;
 export {};

package/dist/env.d.ts

@@ -4,6 +4,7 @@ export declare const ENV: {
     CLIENT_ID: string;
     CLIENT_SECRET: string;
     STRIPE_PUBLISHABLE_KEY: string;
+    BRAND_SLUG: string;
 };
 export declare const ENV_PROD: {
     EVENT_ID: number;

package/dist/images/done.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47717 15.5228 0 10 0C4.47717 0 0 4.47717 0 10C0 15.5228 4.47717 20 10 20ZM8.14661 15.8678L16.8782 6.39722C16.9561 6.31335 17 6.19922 17 6.08008C17 5.96094 16.9561 5.8468 16.8782 5.76282L16.3016 5.12854C16.1386 4.95715 15.8796 4.95715 15.7167 5.12854L7.85004 13.661L4.28326 9.79236C4.20593 9.70776 4.10071 9.66016 3.99084 9.66016C3.9353 9.66016 3.88086 9.67236 3.83069 9.69531C3.78168 9.71777 3.73663 9.75061 3.69843 9.79236L3.12183 10.4177C3.07635 10.4667 3.04248 10.5259 3.02216 10.5905C3.00763 10.6365 3 10.6853 3 10.735C3 10.8541 3.04388 10.9683 3.12183 11.0521L7.56177 15.8678C7.6391 15.9524 7.74438 16 7.85419 16C7.96399 16 8.06927 15.9524 8.14661 15.8678Z" fill="#569F44"/>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47717 15.5228 0 10 0C4.47717 0 0 4.47717 0 10C0 15.5228 4.47717 20 10 20ZM8.14661 15.8678L16.8782 6.39722C16.9561 6.31335 17 6.19922 17 6.08008C17 5.96094 16.9561 5.8468 16.8782 5.76282L16.3016 5.12854C16.1386 4.95715 15.8796 4.95715 15.7167 5.12854L7.85004 13.661L4.28326 9.79236C4.20593 9.70776 4.10071 9.66016 3.99084 9.66016C3.9353 9.66016 3.88086 9.67236 3.83069 9.69531C3.78168 9.71777 3.73663 9.75061 3.69843 9.79236L3.12183 10.4177C3.07635 10.4667 3.04248 10.5259 3.02216 10.5905C3.00763 10.6365 3 10.6853 3 10.735C3 10.8541 3.04388 10.9683 3.12183 11.0521L7.56177 15.8678C7.6391 15.9524 7.74438 16 7.85419 16C7.96399 16 8.06927 15.9524 8.14661 15.8678Z" fill="#569F44"/>
+</svg>

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

@@ -32,12 +32,12 @@ var CircularProgress = _interopDefault(require('@mui/material/CircularProgress')
 var Select = _interopDefault(require('@mui/material/Select'));
 var styles$1 = require('@mui/material/styles');
 var Backdrop = _interopDefault(require('@mui/material/Backdrop'));
+var Countdown$1 = _interopDefault(require('react-countdown'));
+var _isNumber = _interopDefault(require('lodash/isNumber'));
 var Container = _interopDefault(require('@mui/material/Container'));
 var Alert = _interopDefault(require('@mui/material/Alert'));
 var reactStripeJs = require('@stripe/react-stripe-js');
 var stripeJs = require('@stripe/stripe-js');
-var Countdown$1 = _interopDefault(require('react-countdown'));
-var _isNumber = _interopDefault(require('lodash/isNumber'));
 var reactShare = require('react-share');
 var _some = _interopDefault(require('lodash/some'));
 var _every = _interopDefault(require('lodash/every'));
@@ -2167,6 +2167,99 @@ var SelectField = function SelectField(_ref) {
   }, error) : null);
 };
 
+var showZero = function showZero(value) {
+  if (value === void 0) {
+    value = 0;
+  }
+
+  var intNumber = Number(value);
+  return _isNumber(intNumber) ? intNumber >= 0 && intNumber < 10 ? '0' + intNumber : intNumber : null;
+};
+
+var TimerWidget = function TimerWidget(_ref) {
+  var expires_at = _ref.expires_at,
+      buyLoading = _ref.buyLoading,
+      _ref$onCountdownFinis = _ref.onCountdownFinish,
+      onCountdownFinish = _ref$onCountdownFinis === void 0 ? function () {} : _ref$onCountdownFinis;
+
+  var _useState = React.useState(true),
+      showTimer = _useState[0],
+      setShowTimer = _useState[1];
+
+  var handleCountdownFinish = function handleCountdownFinish() {
+    setShowTimer(false);
+
+    if (!buyLoading) {
+      onCountdownFinish();
+    }
+  };
+
+  var _renderer = function renderer(_ref2) {
+    var minutes = _ref2.minutes,
+        seconds = _ref2.seconds,
+        completed = _ref2.completed,
+        handleCountdownFinish = _ref2.handleCountdownFinish;
+
+    if (completed) {
+      handleCountdownFinish();
+      return null;
+    }
+
+    return React__default.createElement("span", null, showZero(minutes), ":", showZero(seconds));
+  };
+
+  return showTimer && !!expires_at ? React__default.createElement("div", {
+    className: "timer"
+  }, React__default.createElement("div", {
+    className: "toast-message"
+  }, React__default.createElement("p", null, "Please complete your purchase before the timer reaches zero."), React__default.createElement("p", {
+    className: "countdown"
+  }, React__default.createElement(Countdown$1, {
+    date: Date.now() + expires_at * 1000,
+    renderer: function renderer(props) {
+      return _renderer(_extends({}, props, {
+        handleCountdownFinish: handleCountdownFinish
+      }));
+    }
+  })))) : null;
+};
+
+var SnackbarAlert = function SnackbarAlert(_ref) {
+  var isOpen = _ref.isOpen,
+      message = _ref.message,
+      type = _ref.type,
+      position = _ref.position,
+      _ref$autoHideDuration = _ref.autoHideDuration,
+      autoHideDuration = _ref$autoHideDuration === void 0 ? 3000 : _ref$autoHideDuration,
+      variant = _ref.variant,
+      onClose = _ref.onClose;
+  return React__default.createElement("div", {
+    className: "snackbar-alert-container"
+  }, React__default.createElement(material.Snackbar, {
+    autoHideDuration: autoHideDuration,
+    open: isOpen,
+    anchorOrigin: position || {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    onClose: onClose,
+    classes: {
+      root: 'snackbar-alert-snackbar-root'
+    }
+  }, React__default.createElement(material.Alert, {
+    severity: type,
+    onClose: onClose,
+    variant: variant || 'filled',
+    classes: {
+      icon: 'snackbar-alert-icon',
+      root: 'snackbar-alert-alert-root',
+      action: 'snackbar-alert-action',
+      message: 'snackbar-alert-message',
+      filled: 'snackbar-alert-filled'
+    }
+  }, message)));
+};
+
 var LogicRunner = function LogicRunner(_ref) {
   var values = _ref.values,
       setStates = _ref.setStates,
@@ -2329,7 +2422,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       _ref3$skipPage = _ref3.skipPage,
       skipPage = _ref3$skipPage === void 0 ? false : _ref3$skipPage,
       _ref3$canSkipHolderNa = _ref3.canSkipHolderNames,
-      canSkipHolderNames = _ref3$canSkipHolderNa === void 0 ? false : _ref3$canSkipHolderNa;
+      canSkipHolderNames = _ref3$canSkipHolderNa === void 0 ? false : _ref3$canSkipHolderNa,
+      _ref3$onCountdownFini = _ref3.onCountdownFinish,
+      onCountdownFinish = _ref3$onCountdownFini === void 0 ? function () {} : _ref3$onCountdownFini,
+      _ref3$enableTimer = _ref3.enableTimer,
+      enableTimer = _ref3$enableTimer === void 0 ? false : _ref3$enableTimer;
 
   var themeMui = styles$1.createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
@@ -2418,6 +2515,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   var hideTtfOptIn = _get(cartInfoData, 'hide_ttf_opt_in', true);
 
+  var expirationTime = _get(cartInfoData, 'expires_at');
+
   var flagRequirePhone = getQueryVariable('phone_required') === 'true'; // Get prevProps
 
   var prevData = React.useRef(data);
@@ -2692,7 +2791,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   return React__default.createElement(styles$1.ThemeProvider, {
     theme: themeMui
-  }, React__default.createElement(formik.Formik, {
+  }, expirationTime && enableTimer && React__default.createElement(TimerWidget, {
+    expires_at: expirationTime,
+    onCountdownFinish: onCountdownFinish
+  }), React__default.createElement(formik.Formik, {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({}, initialValues, {
       country: _get(userData, 'country', '') || '1',
       state: _get(userData, 'state', '') || '1',
@@ -2789,6 +2891,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                     setShowModalLogin(true);
                   }
 
+                  if (_includes(_error, 'The cart is expired') && !hideErrorsAlertSection) {
+                    setError(_error);
+                  }
+
                   onRegisterError(_context6.t0, values.email);
                 }
 
@@ -2831,11 +2937,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                     }
                   }
 
-                  if ((_e$response3 = _context6.t1.response) != null && _e$response3.data.message) {
-                    if (typeof document !== undefined) {
-                      document.body.scrollTop = document.documentElement.scrollTop = 0;
-                    }
-
+                  if ((_e$response3 = _context6.t1.response) != null && _e$response3.data.message && !hideErrorsAlertSection) {
                     setError(_get(_context6.t1, 'response.data.message'));
                   }
 
@@ -2869,11 +2971,15 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       onGetStatesError: onGetStatesError
     }), React__default.createElement("div", {
       className: "billing-info-container " + theme
-    }, error && !hideErrorsAlertSection && React__default.createElement(material.Alert, {
-      severity: "error",
-      onClose: onErrorClose,
-      variant: "filled"
-    }, error), !isLoggedIn && React__default.createElement("div", {
+    }, React__default.createElement(SnackbarAlert, {
+      type: "error",
+      isOpen: !!error,
+      message: error || '',
+      onClose: function onClose() {
+        setError(null);
+        onErrorClose();
+      }
+    }), !isLoggedIn && React__default.createElement("div", {
       className: "account-actions-block"
     }, React__default.createElement("div", null, accountInfoTitle), React__default.createElement("div", null, "Login & skip ahead:"), React__default.createElement("div", {
       className: "login-block"
@@ -3279,63 +3385,6 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
 };
 
-var showZero = function showZero(value) {
-  if (value === void 0) {
-    value = 0;
-  }
-
-  var intNumber = Number(value);
-  return _isNumber(intNumber) ? intNumber >= 0 && intNumber < 10 ? '0' + intNumber : intNumber : null;
-};
-
-var TimerWidget = function TimerWidget(_ref) {
-  var expires_at = _ref.expires_at,
-      buyLoading = _ref.buyLoading,
-      _ref$onCountdownFinis = _ref.onCountdownFinish,
-      onCountdownFinish = _ref$onCountdownFinis === void 0 ? function () {} : _ref$onCountdownFinis;
-
-  var _useState = React.useState(true),
-      showTimer = _useState[0],
-      setShowTimer = _useState[1];
-
-  var handleCountdownFinish = function handleCountdownFinish() {
-    setShowTimer(false);
-
-    if (!buyLoading) {
-      onCountdownFinish();
-    }
-  };
-
-  var _renderer = function renderer(_ref2) {
-    var minutes = _ref2.minutes,
-        seconds = _ref2.seconds,
-        completed = _ref2.completed,
-        handleCountdownFinish = _ref2.handleCountdownFinish;
-
-    if (completed) {
-      handleCountdownFinish();
-      return null;
-    }
-
-    return React__default.createElement("span", null, showZero(minutes), ":", showZero(seconds));
-  };
-
-  return showTimer && !!expires_at ? React__default.createElement("div", {
-    className: "timer"
-  }, React__default.createElement("div", {
-    className: "toast-message"
-  }, React__default.createElement("p", null, "Please complete your purchase before the timer reaches zero."), React__default.createElement("p", {
-    className: "countdown"
-  }, React__default.createElement(Countdown$1, {
-    date: Date.now() + expires_at * 1000,
-    renderer: function renderer(props) {
-      return _renderer(_extends({}, props, {
-        handleCountdownFinish: handleCountdownFinish
-      }));
-    }
-  })))) : null;
-};
-
 var publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || '';
 
 var getStripePromise = function getStripePromise(reviewData) {
@@ -3837,7 +3886,9 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
       onGetConfirmationDataSuccess = _ref$onGetConfirmatio === void 0 ? function () {} : _ref$onGetConfirmatio,
       _ref$onGetConfirmatio2 = _ref.onGetConfirmationDataError,
       onGetConfirmationDataError = _ref$onGetConfirmatio2 === void 0 ? function () {} : _ref$onGetConfirmatio2,
-      orderHash = _ref.orderHash;
+      orderHash = _ref.orderHash,
+      _ref$onLinkCopied = _ref.onLinkCopied,
+      onLinkCopied = _ref$onLinkCopied === void 0 ? function () {} : _ref$onLinkCopied;
   var inputRef = React.useRef(null);
 
   var _useState = React.useState(null),
@@ -3975,7 +4026,8 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }), React__default.createElement("div", {
     className: "share-by-link-copy-icon",
     onClick: function onClick() {
-      return navigator.clipboard.writeText(_get(inputRef, 'current.value'));
+      navigator.clipboard.writeText(_get(inputRef, 'current.value'));
+      onLinkCopied();
     }
   }, React__default.createElement("img", {
     src: "https://img.icons8.com/office/50/000000/copy.png",
@@ -4521,7 +4573,9 @@ var TicketsContainer = function TicketsContainer(_ref) {
       _ref$hideSessionButto = _ref.hideSessionButtons,
       hideSessionButtons = _ref$hideSessionButto === void 0 ? false : _ref$hideSessionButto,
       _ref$hideWaitingList = _ref.hideWaitingList,
-      hideWaitingList = _ref$hideWaitingList === void 0 ? false : _ref$hideWaitingList;
+      hideWaitingList = _ref$hideWaitingList === void 0 ? false : _ref$hideWaitingList,
+      _ref$isButtonScrollab = _ref.isButtonScrollable,
+      isButtonScrollable = _ref$isButtonScrollab === void 0 ? false : _ref$isButtonScrollab;
 
   var _useState = React.useState({}),
       selectedTickets = _useState[0],
@@ -4533,50 +4587,51 @@ var TicketsContainer = function TicketsContainer(_ref) {
       isLogged = _useState2[0],
       setIsLogged = _useState2[1];
 
-  var _React$useState = React__default.useState(false),
-      showLoginModal = _React$useState[0],
-      setShowLoginModal = _React$useState[1];
-
-  var _useState3 = React.useState([]),
-      tickets = _useState3[0],
-      setTickets = _useState3[1];
+  var _useState3 = React.useState(false),
+      showLoginModal = _useState3[0],
+      setShowLoginModal = _useState3[1];
 
-  var _useState4 = React.useState(null),
-      event = _useState4[0],
-      setEvent = _useState4[1];
+  var _useState4 = React.useState([]),
+      tickets = _useState4[0],
+      setTickets = _useState4[1];
 
-  var _useState5 = React.useState(false),
-      showWaitingList = _useState5[0],
-      setShowWaitingList = _useState5[1];
+  var _useState5 = React.useState(null),
+      event = _useState5[0],
+      setEvent = _useState5[1];
 
   var _useState6 = React.useState(false),
-      isLoading = _useState6[0],
-      setIsLoading = _useState6[1];
+      showWaitingList = _useState6[0],
+      setShowWaitingList = _useState6[1];
 
   var _useState7 = React.useState(false),
-      isPromoLoading = _useState7[0],
-      setIsPromoLoading = _useState7[1];
+      isLoading = _useState7[0],
+      setIsLoading = _useState7[1];
 
   var _useState8 = React.useState(false),
-      handleBookIsLoading = _useState8[0],
-      setHandleBookIsLoading = _useState8[1];
+      isPromoLoading = _useState8[0],
+      setIsPromoLoading = _useState8[1];
 
-  var _useState9 = React.useState(''),
-      promoCode = _useState9[0],
-      setPromoCode = _useState9[1];
+  var _useState9 = React.useState(false),
+      handleBookIsLoading = _useState9[0],
+      setHandleBookIsLoading = _useState9[1];
 
-  var _useState10 = React.useState(getQueryVariable('r') || queryPromoCode),
-      promoCodeUpdated = _useState10[0],
-      setPromoCodeUpdated = _useState10[1];
+  var _useState10 = React.useState(''),
+      promoCode = _useState10[0],
+      setPromoCode = _useState10[1];
 
-  var _useState11 = React.useState(false),
-      showPromoInput = _useState11[0],
-      setShowPromoInput = _useState11[1];
+  var _useState11 = React.useState(getQueryVariable('r') || queryPromoCode),
+      promoCodeUpdated = _useState11[0],
+      setPromoCodeUpdated = _useState11[1];
 
   var _useState12 = React.useState(false),
-      promoCodeIsApplied = _useState12[0],
-      setPromoCodeIsApplied = _useState12[1];
+      showPromoInput = _useState12[0],
+      setShowPromoInput = _useState12[1];
+
+  var _useState13 = React.useState(false),
+      promoCodeIsApplied = _useState13[0],
+      setPromoCodeIsApplied = _useState13[1];
 
+  var ticketsContainerRef = React.useRef(null);
   React.useEffect(function () {
     if (typeof window !== 'undefined') {
       var access_token = window.localStorage.getItem('access_token');
@@ -4614,6 +4669,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
 
         if (userData.country === '') {
           handleLogout();
+          window.open("https://www.ticketfairy.com/account/change_information?need_country=true");
         }
       }
     } catch (e) {}
@@ -4852,6 +4908,22 @@ var TicketsContainer = function TicketsContainer(_ref) {
       isWindowDefined && window.document.removeEventListener('custom-login', handleExternalLogin);
     };
   }, []);
+
+  var handleGetTicketClick = function handleGetTicketClick() {
+    if (!handleBookIsLoading && !_isEmpty(selectedTickets) && Object.values(selectedTickets)[0] > 0) {
+      handleBook();
+    } else {
+      if (isButtonScrollable && ticketsContainerRef && ticketsContainerRef.current) {
+        ticketsContainerRef.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'nearest'
+        });
+      }
+    }
+  };
+
+  var bookButtonIsDisabled = handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0;
   return React__default.createElement(privateTheming.ThemeProvider, {
     theme: themeMui
   }, React__default.createElement(ReferralLogic, {
@@ -4859,7 +4931,9 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }), React__default.createElement("div", {
     className: "get-tickets-page " + theme,
     style: contentStyle
-  }, isLoading ? React__default.createElement(Loader, null) : React__default.createElement("div", null, React__default.createElement(TicketsSection, {
+  }, isLoading ? React__default.createElement(Loader, null) : React__default.createElement("div", {
+    ref: ticketsContainerRef
+  }, React__default.createElement(TicketsSection, {
     ticketsList: tickets,
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
@@ -4888,8 +4962,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
     isPromoLoading: isPromoLoading
   }), (isTicketOnSale || !(event != null && event.salesEnded)) && React__default.createElement(Button$1, {
     "aria-hidden": true,
-    className: "book-button " + (handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0 ? 'disabled' : ''),
-    onClick: !handleBookIsLoading && !_isEmpty(selectedTickets) && Object.values(selectedTickets)[0] > 0 ? handleBook : function () {}
+    className: "book-button \n                  " + (bookButtonIsDisabled ? 'disabled' : '') + "  \n                  " + (isButtonScrollable ? 'is-scrollable' : '') + "\n                ",
+    onClick: handleGetTicketClick
   }, getTicketsLabel || 'GET TICKETS'), isLogged && !hideSessionButtons ? React__default.createElement("div", {
     className: "session-wrapper"
   }, React__default.createElement("span", {
@@ -4999,16 +5073,30 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
 
   var _useState4 = React.useState(''),
       filter = _useState4[0],
-      setFilter = _useState4[1]; //just once
+      setFilter = _useState4[1];
+
+  var isWindowDefined = typeof window !== 'undefined';
+
+  var _useState5 = React.useState(isWindowDefined ? !!window.localStorage.getItem('access_token') : false),
+      isLogged = _useState5[0],
+      setIsLogged = _useState5[1];
+
+  var _useState6 = React.useState(false),
+      showModalLogin = _useState6[0],
+      setShowModalLogin = _useState6[1];
+
+  var _useState7 = React.useState(false),
+      userExpired = _useState7[0],
+      setUserExpired = _useState7[1]; //just once
 
 
   React.useEffect(function () {
     fetchData(1, limit, filter);
-  }, []);
+  }, [isLogged]);
 
   var fetchData = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(page, limit, filter) {
-      var response, _data;
+      var response, _data, _error$response;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
@@ -5025,25 +5113,37 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
               _data = _get(response, 'data.data.attributes');
               _data.page -= 1;
               setData(_data);
-              _context.next = 14;
+              _context.next = 15;
               break;
 
             case 11:
               _context.prev = 11;
               _context.t0 = _context["catch"](0);
+
+              if (axios.isAxiosError(_context.t0)) {
+                if (((_error$response = _context.t0.response) == null ? void 0 : _error$response.data.error) === 'invalid_token') {
+                  if (isWindowDefined) {
+                    window.localStorage.removeItem('user_data');
+                    window.localStorage.removeItem('access_token');
+                    setUserExpired(true);
+                    setShowModalLogin(true);
+                  }
+                }
+              }
+
               onGetOrdersError(_context.t0);
 
-            case 14:
-              _context.prev = 14;
+            case 15:
+              _context.prev = 15;
               setLoading(false);
-              return _context.finish(14);
+              return _context.finish(15);
 
-            case 17:
+            case 18:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 11, 14, 17]]);
+      }, _callee, null, [[0, 11, 15, 18]]);
     }));
 
     return function fetchData(_x, _x2, _x3) {
@@ -5069,7 +5169,22 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     className: "my-ticket " + theme
   }, loading && React__default.createElement("div", {
     className: "loading"
-  }, React__default.createElement(CircularProgress, null)), data && React__default.createElement(React__default.Fragment, null, React__default.createElement(Autocomplete, {
+  }, React__default.createElement(CircularProgress, null)), !isLogged ? React__default.createElement("div", {
+    className: "account-actions-block"
+  }, React__default.createElement("div", {
+    className: "login-block"
+  }, React__default.createElement("button", {
+    className: "login-register-button",
+    type: "button",
+    onClick: function onClick() {
+      setShowModalLogin(true);
+    }
+  }, "Login"), React__default.createElement("div", {
+    className: "logo-image-container"
+  }, React__default.createElement("img", {
+    src: theme === 'dark' ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg' : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg',
+    alt: "nodata"
+  })))) : null, data && React__default.createElement(React__default.Fragment, null, React__default.createElement(Autocomplete, {
     disablePortal: true,
     id: "combo-box-demo",
     getOptionLabel: function getOptionLabel(option) {
@@ -5108,6 +5223,16 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     page: data.page,
     onPageChange: handleChangePage,
     onRowsPerPageChange: handleChangeRowsPerPage
+  })), React__default.createElement(React__default.Fragment, null, showModalLogin && React__default.createElement(LoginModal, {
+    onClose: function onClose() {
+      setShowModalLogin(false);
+    },
+    onLogin: function onLogin() {
+      setShowModalLogin(false);
+      setUserExpired(false);
+      setIsLogged(true);
+    },
+    userExpired: userExpired
   })));
 };