tf-checkout-react 1.0.81 → 1.0.85

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

@@ -8,7 +8,7 @@ import _includes from 'lodash-es/includes';
 import _isEqual from 'lodash-es/isEqual';
 import axios from 'axios';
 import _forEach from 'lodash-es/forEach';
-import { TextField, FormControl, FormHelperText, InputLabel, CircularProgress, createTheme as createTheme$1 } from '@mui/material';
+import { TextField, FormControl, FormHelperText, InputLabel, Alert, CircularProgress, 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';
@@ -24,11 +24,12 @@ import MuiPhoneNumber from 'material-ui-phone-number';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 import CircularProgress$1 from '@mui/material/CircularProgress';
-import Alert from '@mui/material/Alert';
+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 { 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';
 import _find from 'lodash-es/find';
 import _isEmpty from 'lodash-es/isEmpty';
 import Button$1 from 'react-bootstrap/Button';
@@ -1251,8 +1252,14 @@ var getProfileData = function getProfileData(accessToken) {
       Authorization: "Bearer " + accessToken
     })
   })["catch"](function (e) {
+    var _e$response, _e$response$data;
+
+    var errorType = e == null ? void 0 : (_e$response = e.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.error;
+
     if (isWindowDefined) {
-      var event = new window.CustomEvent('auth_error', e);
+      var event = new window.CustomEvent('auth_error', {
+        detail: errorType
+      });
       window.document.dispatchEvent(event);
     }
 
@@ -2094,14 +2101,6 @@ var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
   }, rest));
 };
 
-var usePrevious = function usePrevious(value) {
-  var ref = useRef();
-  useEffect(function () {
-    ref.current = value;
-  });
-  return ref.current;
-};
-
 var LogicRunner = function LogicRunner(_ref) {
   var values = _ref.values,
       setStates = _ref.setStates,
@@ -2254,7 +2253,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       _ref3$accountInfoTitl = _ref3.accountInfoTitle,
       accountInfoTitle = _ref3$accountInfoTitl === void 0 ? '' : _ref3$accountInfoTitl,
       hideLogo = _ref3.hideLogo,
-      themeOptions = _ref3.themeOptions;
+      themeOptions = _ref3.themeOptions,
+      _ref3$onErrorClose = _ref3.onErrorClose,
+      onErrorClose = _ref3$onErrorClose === void 0 ? function () {} : _ref3$onErrorClose;
 
   var themeMui = createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
@@ -2319,6 +2320,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       userValues = _useState11[0],
       setUserValues = _useState11[1];
 
+  var _useState12 = useState(null),
+      error = _useState12[0],
+      setError = _useState12[1];
+
   var emailLogged = _get(userData, 'email', '') || _get(userValues, 'email', '');
 
   var firstNameLogged = _get(userData, 'first_name', '') || _get(userValues, 'first_name', '');
@@ -2330,16 +2335,25 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   var optedInFieldValue = _get(cartInfoData, 'optedIn', false);
 
-  var ttfOptIn = _get(cartInfoData, 'ttfOptIn', false);
+  var ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false));
 
   var hideTtfOptIn = _get(cartInfoData, 'hide_ttf_opt_in', true); // Get prevProps
 
 
-  var prevData = usePrevious(data);
+  var prevData = useRef(data);
+  useEffect(function () {
+    var hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId');
 
-  if (!_get(dataWithUniqueIds, '[0].uniqueId') || !_isEqual(prevData, data)) {
-    setDataWithUniqueIds(assingUniqueIds(data));
-  }
+    var isEqualData = _isEqual(prevData.current, data);
+
+    if (!hasUniqueId || !isEqualData) {
+      setDataWithUniqueIds(assingUniqueIds(data));
+
+      if (!isEqualData) {
+        prevData.current = data;
+      }
+    }
+  }, [dataWithUniqueIds, data]);
 
   var getQuantity = function getQuantity(cart) {
     if (cart === void 0) {
@@ -2353,8 +2367,12 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     return qty;
   };
 
-  var handleAuthErrors = useCallback(function () {
+  var handleAuthErrors = useCallback(function (e) {
     setIsLoggedIn(false);
+
+    if (isWindowDefined && (e == null ? void 0 : e.detail) === 'invalid_token') {
+      window.location.href = '/';
+    }
   }, []);
   useEffect(function () {
     isWindowDefined && window.document.addEventListener('auth_error', handleAuthErrors);
@@ -2535,7 +2553,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     enableReinitialize: true,
     onSubmit: function () {
       var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5(values, formikHelpers) {
-        var updatedUserData, _profileSpecifiedData, _profileDataObj, _checkoutBody, _res, checkoutBodyForRegistration, bodyFormData, access_token_register, resRegister, refreshToken, tokens, _e$response, _e$response$data, error, profileData, profileSpecifiedData, profileDataObj, checkoutBody, res, _e$response2;
+        var updatedUserData, _profileSpecifiedData, _profileDataObj, _checkoutBody, _res, checkoutBodyForRegistration, bodyFormData, access_token_register, resRegister, refreshToken, tokens, _e$response, _e$response$data, _error, profileData, profileSpecifiedData, profileDataObj, checkoutBody, res, _e$response2, _e$response3;
 
         return runtime_1.wrap(function _callee5$(_context5) {
           while (1) {
@@ -2544,7 +2562,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 _context5.prev = 0;
 
                 if (!isLoggedIn) {
-                  _context5.next = 15;
+                  _context5.next = 17;
                   break;
                 }
 
@@ -2576,10 +2594,14 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
               case 12:
                 _res = _context5.sent;
+                _context5.next = 15;
+                return getPaymentData(_res.data.data.attributes.hash);
+
+              case 15:
                 handleSubmit(values, formikHelpers, eventId, _res);
                 return _context5.abrupt("return");
 
-              case 15:
+              case 17:
                 checkoutBodyForRegistration = createCheckoutDataBody(ticketsQuantity.length, values, {
                   emailLogged: emailLogged,
                   firstNameLogged: firstNameLogged,
@@ -2587,11 +2609,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 }, showDOB);
                 bodyFormData = createRegisterFormData(values, checkoutBodyForRegistration);
                 access_token_register = null;
-                _context5.prev = 18;
-                _context5.next = 21;
+                _context5.prev = 20;
+                _context5.next = 23;
                 return register(bodyFormData);
 
-              case 21:
+              case 23:
                 resRegister = _context5.sent;
                 access_token_register = _get(resRegister, 'data.data.attributes.access_token');
                 refreshToken = _get(resRegister, 'data.data.attributes.refresh_token');
@@ -2601,26 +2623,26 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                   refreshToken: refreshToken
                 };
                 onRegisterSuccess(tokens);
-                _context5.next = 33;
+                _context5.next = 35;
                 break;
 
-              case 29:
-                _context5.prev = 29;
-                _context5.t0 = _context5["catch"](18);
+              case 31:
+                _context5.prev = 31;
+                _context5.t0 = _context5["catch"](20);
 
                 if (axios.isAxiosError(_context5.t0)) {
-                  error = _context5.t0 == null ? void 0 : (_e$response = _context5.t0.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message;
+                  _error = _context5.t0 == null ? void 0 : (_e$response = _context5.t0.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message;
 
-                  if (_includes(error, 'You must be aged')) {
-                    formikHelpers.setFieldError('holderAge', error);
+                  if (_includes(_error, 'You must be aged')) {
+                    formikHelpers.setFieldError('holderAge', _error);
                   }
 
-                  if (error != null && error.password) {
-                    formikHelpers.setFieldError('password', error.password);
-                    formikHelpers.setFieldError('confirmPassword', error.password);
+                  if (_error != null && _error.password) {
+                    formikHelpers.setFieldError('password', _error.password);
+                    formikHelpers.setFieldError('confirmPassword', _error.password);
                   }
 
-                  if (error != null && error.email && !onLogin) {
+                  if (_error != null && _error.email && !onLogin) {
                     // False will stand for outside controll
                     setAlreadyHasUser(true);
                     setShowModalLogin(true);
@@ -2631,11 +2653,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
                 return _context5.abrupt("return");
 
-              case 33:
-                _context5.next = 35;
+              case 35:
+                _context5.next = 37;
                 return getProfileData(access_token_register);
 
-              case 35:
+              case 37:
                 profileData = _context5.sent;
                 profileSpecifiedData = _get(profileData, 'data.data');
                 profileDataObj = setLoggedUserData(profileSpecifiedData);
@@ -2649,17 +2671,21 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                   firstNameLogged: firstNameLogged,
                   lastNameLogged: lastNameLogged
                 }, showDOB);
-                _context5.next = 42;
+                _context5.next = 44;
                 return postOnCheckout(checkoutBody, access_token_register);
 
-              case 42:
+              case 44:
                 res = _context5.sent;
+                _context5.next = 47;
+                return getPaymentData(res.data.data.attributes.hash);
+
+              case 47:
                 handleSubmit(values, formikHelpers, eventId, res);
-                _context5.next = 49;
+                _context5.next = 53;
                 break;
 
-              case 46:
-                _context5.prev = 46;
+              case 50:
+                _context5.prev = 50;
                 _context5.t1 = _context5["catch"](0);
 
                 if (axios.isAxiosError(_context5.t1)) {
@@ -2672,15 +2698,23 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                     }
                   }
 
+                  if ((_e$response3 = _context5.t1.response) != null && _e$response3.data.message) {
+                    if (typeof document !== undefined) {
+                      document.body.scrollTop = document.documentElement.scrollTop = 0;
+                    }
+
+                    setError(_get(_context5.t1, 'response.data.message'));
+                  }
+
                   onSubmitError(_context5.t1);
                 }
 
-              case 49:
+              case 53:
               case "end":
                 return _context5.stop();
             }
           }
-        }, _callee5, null, [[0, 46], [18, 29]]);
+        }, _callee5, null, [[0, 50], [20, 31]]);
       }));
 
       function onSubmit(_x2, _x3) {
@@ -2702,7 +2736,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       onGetStatesError: onGetStatesError
     }), React.createElement("div", {
       className: "billing-info-container " + theme
-    }, !isLoggedIn && React.createElement("div", {
+    }, error && React.createElement(Alert, {
+      severity: "error",
+      onClose: onErrorClose,
+      variant: "filled"
+    }, error), !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"
@@ -3353,7 +3391,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     theme: themeMui
   }, React.createElement("div", {
     className: "payment_page"
-  }, error && React.createElement(Alert, {
+  }, error && React.createElement(Alert$1, {
     severity: "error",
     onClose: onErrorClose,
     variant: "filled"
@@ -3984,7 +4022,7 @@ var WaitingList = function WaitingList(_ref) {
     className: "field-item"
   }, React.createElement(Field, {
     name: "ticketTypeId",
-    label: "Ticket types",
+    label: "Type of Ticket",
     type: "select",
     component: CustomField,
     selectOptions: [{
@@ -3996,7 +4034,7 @@ var WaitingList = function WaitingList(_ref) {
     className: "field-item"
   }, React.createElement(Field, {
     name: "quantity",
-    label: "Quantity",
+    label: "Quantity Requested",
     type: "select",
     component: CustomField,
     selectOptions: [{
@@ -4518,9 +4556,14 @@ var TicketsContainer = function TicketsContainer(_ref) {
     getTicketsApi();
   };
 
-  var isAllTicketsSoldOut = !_some(tickets, function (item) {
-    return !(item.sold_out || item.soldOut);
+  var isAllTicketsSoldOut = _every(tickets, function (item) {
+    return item.sold_out || item.soldOut;
+  });
+
+  var isTicketOnSale = _some(tickets, function (item) {
+    return item.salesStarted && !item.salesEnded && !item.soldOut;
   });
+
   var themeMui = createTheme$1(themeOptions);
   useEffect(function () {
     isWindowDefined && window.document.addEventListener('custom-logout', handleLogout);
@@ -4544,7 +4587,9 @@ var TicketsContainer = function TicketsContainer(_ref) {
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
     promoCodeIsApplied: promoCodeIsApplied
-  }), event != null && event.salesEnded ? React.createElement("p", null, "Sales for this event are closed.") : event != null && event.salesStart ? React.createElement(Countdown, {
+  }), event != null && event.salesEnded ? React.createElement("p", {
+    className: 'event-closed-message'
+  }, "Sales for this event are closed.") : !(event != null && event.salesStarted) && event != null && event.salesStart ? React.createElement(Countdown, {
     startDate: event.salesStart,
     timezone: event.timezone,
     title: "Sales start in:",
@@ -4563,7 +4608,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     isPromotionsEnabled: isPromotionsEnabled,
     isAccessCodeEnabled: isAccessCodeEnabled,
     isAllTicketsSoldOut: isAllTicketsSoldOut
-  }), !isAllTicketsSoldOut && React.createElement(Button$1, {
+  }), isTicketOnSale && 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 () {}