tf-checkout-react 1.0.99 → 1.0.103

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/billing-info-container/utils.d.ts

@@ -26,6 +26,7 @@ interface IUserData {
     email: string;
     city?: string;
     country?: string;
+    countryId?: string;
     phone?: string;
     streetAddress?: string;
     state?: string;

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/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'));
@@ -1810,7 +1810,7 @@ var setLoggedUserData = function setLoggedUserData(data) {
     email: data.email,
     confirmEmail: data.email,
     city: (data == null ? void 0 : data.city) || '',
-    country: (data == null ? void 0 : data.country) || '',
+    country: (data == null ? void 0 : data.countryId) || (data == null ? void 0 : data.country) || '',
     phone: (data == null ? void 0 : data.phone) || '',
     street_address: (data == null ? void 0 : data.streetAddress) || '',
     state: (data == null ? void 0 : data.stateId) || '',
@@ -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"
@@ -2921,6 +3027,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             el.required = flagRequirePhone;
           }
 
+          if (el.name === 'street_address') {
+            el.required = true;
+          }
+
           return true;
         }), function (element) {
           return ['password', 'confirmPassword', 'password-info'].includes(element.name) && isLoggedIn ? null : React__default.createElement(React__default.Fragment, {
@@ -3279,63 +3389,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 +3890,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 +4030,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 +4577,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 +4591,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');
@@ -4607,6 +4666,19 @@ var TicketsContainer = function TicketsContainer(_ref) {
     }
   };
 
+  React.useEffect(function () {
+    try {
+      if (typeof window !== 'undefined') {
+        var userData = window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '{}') : {};
+
+        if (userData.country === '') {
+          handleLogout();
+          window.open("https://www.ticketfairy.com/account/change_information?need_country=true");
+        }
+      }
+    } catch (e) {}
+  }, []);
+
   var handleExternalLogin = function handleExternalLogin() {
     setIsLogged(true);
   };
@@ -4840,6 +4912,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, {
@@ -4847,7 +4935,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,
@@ -4876,8 +4966,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", {
@@ -4987,16 +5077,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) {
@@ -5013,25 +5117,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) {
@@ -5057,7 +5173,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) {
@@ -5096,6 +5227,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
   })));
 };