tf-checkout-react 1.0.101 → 1.0.102

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

@@ -9,7 +9,7 @@ import _isEqual from 'lodash-es/isEqual';
 import _isEmpty from 'lodash-es/isEmpty';
 import axios from 'axios';
 import _forEach from 'lodash-es/forEach';
-import { TextField, FormControl, FormHelperText, InputLabel, CircularProgress as CircularProgress$1, Alert, createTheme as createTheme$1 } from '@mui/material';
+import { TextField, FormControl, FormHelperText, InputLabel, Snackbar, Alert, CircularProgress as CircularProgress$1, createTheme as createTheme$1 } from '@mui/material';
 import Modal from '@mui/material/Modal';
 import Box from '@mui/material/Box';
 import _flatMapDeep from 'lodash-es/flatMapDeep';
@@ -25,12 +25,12 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Select from '@mui/material/Select';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Backdrop from '@mui/material/Backdrop';
+import Countdown$1 from 'react-countdown';
+import _isNumber from 'lodash-es/isNumber';
 import Container from '@mui/material/Container';
 import Alert$1 from '@mui/material/Alert';
 import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
-import Countdown$1 from 'react-countdown';
-import _isNumber from 'lodash-es/isNumber';
 import { FacebookShareButton, FacebookIcon, FacebookMessengerShareButton, FacebookMessengerIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon, PinterestShareButton, PinterestIcon, VKShareButton, VKIcon, OKShareButton, OKIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, RedditShareButton, RedditIcon, TumblrShareButton, TumblrIcon, MailruShareButton, MailruIcon, EmailShareButton, EmailIcon, LivejournalShareButton, LivejournalIcon, ViberShareButton, ViberIcon, WorkplaceShareButton, WorkplaceIcon, LineShareButton, LineIcon, PocketShareButton, PocketIcon, InstapaperShareButton, InstapaperIcon, WeiboShareButton, WeiboIcon, HatenaShareButton, HatenaIcon } from 'react-share';
 import _some from 'lodash-es/some';
 import _every from 'lodash-es/every';
@@ -2160,6 +2160,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 = 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.createElement("span", null, showZero(minutes), ":", showZero(seconds));
+  };
+
+  return showTimer && !!expires_at ? React.createElement("div", {
+    className: "timer"
+  }, React.createElement("div", {
+    className: "toast-message"
+  }, React.createElement("p", null, "Please complete your purchase before the timer reaches zero."), React.createElement("p", {
+    className: "countdown"
+  }, React.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.createElement("div", {
+    className: "snackbar-alert-container"
+  }, React.createElement(Snackbar, {
+    autoHideDuration: autoHideDuration,
+    open: isOpen,
+    anchorOrigin: position || {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    onClose: onClose,
+    classes: {
+      root: 'snackbar-alert-snackbar-root'
+    }
+  }, React.createElement(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,
@@ -2322,7 +2415,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 = createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
@@ -2411,6 +2508,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 = useRef(data);
@@ -2685,7 +2784,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   return React.createElement(ThemeProvider, {
     theme: themeMui
-  }, React.createElement(Formik, {
+  }, expirationTime && enableTimer && React.createElement(TimerWidget, {
+    expires_at: expirationTime,
+    onCountdownFinish: onCountdownFinish
+  }), React.createElement(Formik, {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({}, initialValues, {
       country: _get(userData, 'country', '') || '1',
       state: _get(userData, 'state', '') || '1',
@@ -2782,6 +2884,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                     setShowModalLogin(true);
                   }
 
+                  if (_includes(_error, 'The cart is expired') && !hideErrorsAlertSection) {
+                    setError(_error);
+                  }
+
                   onRegisterError(_context6.t0, values.email);
                 }
 
@@ -2824,11 +2930,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'));
                   }
 
@@ -2862,11 +2964,15 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       onGetStatesError: onGetStatesError
     }), React.createElement("div", {
       className: "billing-info-container " + theme
-    }, error && !hideErrorsAlertSection && React.createElement(Alert, {
-      severity: "error",
-      onClose: onErrorClose,
-      variant: "filled"
-    }, error), !isLoggedIn && React.createElement("div", {
+    }, React.createElement(SnackbarAlert, {
+      type: "error",
+      isOpen: !!error,
+      message: error || '',
+      onClose: function onClose() {
+        setError(null);
+        onErrorClose();
+      }
+    }), !isLoggedIn && React.createElement("div", {
       className: "account-actions-block"
     }, React.createElement("div", null, accountInfoTitle), React.createElement("div", null, "Login & skip ahead:"), React.createElement("div", {
       className: "login-block"
@@ -3272,63 +3378,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 = 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.createElement("span", null, showZero(minutes), ":", showZero(seconds));
-  };
-
-  return showTimer && !!expires_at ? React.createElement("div", {
-    className: "timer"
-  }, React.createElement("div", {
-    className: "toast-message"
-  }, React.createElement("p", null, "Please complete your purchase before the timer reaches zero."), React.createElement("p", {
-    className: "countdown"
-  }, React.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) {
@@ -3830,7 +3879,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 = useRef(null);
 
   var _useState = useState(null),
@@ -3968,7 +4019,8 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }), React.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.createElement("img", {
     src: "https://img.icons8.com/office/50/000000/copy.png",
@@ -4519,7 +4571,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 = useState({}),
       selectedTickets = _useState[0],
@@ -4531,50 +4585,51 @@ var TicketsContainer = function TicketsContainer(_ref) {
       isLogged = _useState2[0],
       setIsLogged = _useState2[1];
 
-  var _React$useState = React.useState(false),
-      showLoginModal = _React$useState[0],
-      setShowLoginModal = _React$useState[1];
-
-  var _useState3 = useState([]),
-      tickets = _useState3[0],
-      setTickets = _useState3[1];
+  var _useState3 = useState(false),
+      showLoginModal = _useState3[0],
+      setShowLoginModal = _useState3[1];
 
-  var _useState4 = useState(null),
-      event = _useState4[0],
-      setEvent = _useState4[1];
+  var _useState4 = useState([]),
+      tickets = _useState4[0],
+      setTickets = _useState4[1];
 
-  var _useState5 = useState(false),
-      showWaitingList = _useState5[0],
-      setShowWaitingList = _useState5[1];
+  var _useState5 = useState(null),
+      event = _useState5[0],
+      setEvent = _useState5[1];
 
   var _useState6 = useState(false),
-      isLoading = _useState6[0],
-      setIsLoading = _useState6[1];
+      showWaitingList = _useState6[0],
+      setShowWaitingList = _useState6[1];
 
   var _useState7 = useState(false),
-      isPromoLoading = _useState7[0],
-      setIsPromoLoading = _useState7[1];
+      isLoading = _useState7[0],
+      setIsLoading = _useState7[1];
 
   var _useState8 = useState(false),
-      handleBookIsLoading = _useState8[0],
-      setHandleBookIsLoading = _useState8[1];
+      isPromoLoading = _useState8[0],
+      setIsPromoLoading = _useState8[1];
 
-  var _useState9 = useState(''),
-      promoCode = _useState9[0],
-      setPromoCode = _useState9[1];
+  var _useState9 = useState(false),
+      handleBookIsLoading = _useState9[0],
+      setHandleBookIsLoading = _useState9[1];
 
-  var _useState10 = useState(getQueryVariable('r') || queryPromoCode),
-      promoCodeUpdated = _useState10[0],
-      setPromoCodeUpdated = _useState10[1];
+  var _useState10 = useState(''),
+      promoCode = _useState10[0],
+      setPromoCode = _useState10[1];
 
-  var _useState11 = useState(false),
-      showPromoInput = _useState11[0],
-      setShowPromoInput = _useState11[1];
+  var _useState11 = useState(getQueryVariable('r') || queryPromoCode),
+      promoCodeUpdated = _useState11[0],
+      setPromoCodeUpdated = _useState11[1];
 
   var _useState12 = useState(false),
-      promoCodeIsApplied = _useState12[0],
-      setPromoCodeIsApplied = _useState12[1];
+      showPromoInput = _useState12[0],
+      setShowPromoInput = _useState12[1];
+
+  var _useState13 = useState(false),
+      promoCodeIsApplied = _useState13[0],
+      setPromoCodeIsApplied = _useState13[1];
 
+  var ticketsContainerRef = useRef(null);
   useEffect(function () {
     if (typeof window !== 'undefined') {
       var access_token = window.localStorage.getItem('access_token');
@@ -4612,6 +4667,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
 
         if (userData.country === '') {
           handleLogout();
+          window.open("https://www.ticketfairy.com/account/change_information?need_country=true");
         }
       }
     } catch (e) {}
@@ -4850,6 +4906,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.createElement(ThemeProvider$1, {
     theme: themeMui
   }, React.createElement(ReferralLogic, {
@@ -4857,7 +4929,9 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }), React.createElement("div", {
     className: "get-tickets-page " + theme,
     style: contentStyle
-  }, isLoading ? React.createElement(Loader, null) : React.createElement("div", null, React.createElement(TicketsSection, {
+  }, isLoading ? React.createElement(Loader, null) : React.createElement("div", {
+    ref: ticketsContainerRef
+  }, React.createElement(TicketsSection, {
     ticketsList: tickets,
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
@@ -4886,8 +4960,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
     isPromoLoading: isPromoLoading
   }), (isTicketOnSale || !(event != null && event.salesEnded)) && React.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.createElement("div", {
     className: "session-wrapper"
   }, React.createElement("span", {
@@ -4997,16 +5071,30 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
 
   var _useState4 = useState(''),
       filter = _useState4[0],
-      setFilter = _useState4[1]; //just once
+      setFilter = _useState4[1];
+
+  var isWindowDefined = typeof window !== 'undefined';
+
+  var _useState5 = useState(isWindowDefined ? !!window.localStorage.getItem('access_token') : false),
+      isLogged = _useState5[0],
+      setIsLogged = _useState5[1];
+
+  var _useState6 = useState(false),
+      showModalLogin = _useState6[0],
+      setShowModalLogin = _useState6[1];
+
+  var _useState7 = useState(false),
+      userExpired = _useState7[0],
+      setUserExpired = _useState7[1]; //just once
 
 
   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) {
@@ -5023,25 +5111,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) {
@@ -5067,7 +5167,22 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     className: "my-ticket " + theme
   }, loading && React.createElement("div", {
     className: "loading"
-  }, React.createElement(CircularProgress, null)), data && React.createElement(React.Fragment, null, React.createElement(Autocomplete, {
+  }, React.createElement(CircularProgress, null)), !isLogged ? React.createElement("div", {
+    className: "account-actions-block"
+  }, React.createElement("div", {
+    className: "login-block"
+  }, React.createElement("button", {
+    className: "login-register-button",
+    type: "button",
+    onClick: function onClick() {
+      setShowModalLogin(true);
+    }
+  }, "Login"), React.createElement("div", {
+    className: "logo-image-container"
+  }, React.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.createElement(React.Fragment, null, React.createElement(Autocomplete, {
     disablePortal: true,
     id: "combo-box-demo",
     getOptionLabel: function getOptionLabel(option) {
@@ -5106,6 +5221,16 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     page: data.page,
     onPageChange: handleChangePage,
     onRowsPerPageChange: handleChangeRowsPerPage
+  })), React.createElement(React.Fragment, null, showModalLogin && React.createElement(LoginModal, {
+    onClose: function onClose() {
+      setShowModalLogin(false);
+    },
+    onLogin: function onLogin() {
+      setShowModalLogin(false);
+      setUserExpired(false);
+      setIsLogged(true);
+    },
+    userExpired: userExpired
   })));
 };