tf-checkout-react 1.0.77 → 1.0.81

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

@@ -1,13 +1,14 @@
-import React, { Component, useState, useCallback, useEffect, useRef, Fragment } from 'react';
+import React, { Component, useState, useRef, useEffect, useCallback, Fragment } from 'react';
 import { connect, Formik, Form, Field } from 'formik';
 import Button from '@mui/material/Button';
 import _identity from 'lodash-es/identity';
 import _map from 'lodash-es/map';
 import _get from 'lodash-es/get';
 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, InputLabel, FormHelperText, CircularProgress } from '@mui/material';
+import { TextField, FormControl, FormHelperText, InputLabel, 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';
@@ -37,6 +38,8 @@ import _has from 'lodash-es/has';
 import FormControl$1 from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
 import SVG from 'react-inlinesvg';
+import moment from 'moment-timezone';
+import { ThemeProvider as ThemeProvider$1 } from '@mui/private-theming';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -987,6 +990,61 @@ var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
 
 var ErrorFocus = /*#__PURE__*/connect(ErrorFocusInternal);
 
+var downloadPDF = function downloadPDF(pdfUrl) {
+  if (typeof window === 'undefined') return;
+  var accessToken = localStorage.getItem('access_token');
+  if (!accessToken) return;
+  fetch(pdfUrl, {
+    headers: {
+      Authorization: "Bearer " + accessToken
+    }
+  }).then( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(response) {
+      var blobValue, fileNameHeader, fileName;
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return response.blob();
+
+            case 2:
+              blobValue = _context.sent;
+              fileNameHeader = response.headers.get("content-disposition") || '';
+              fileName = fileNameHeader.split('"')[1];
+              return _context.abrupt("return", {
+                blobValue: blobValue,
+                fileName: fileName
+              });
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }()).then(function (_ref2) {
+    var blobValue = _ref2.blobValue,
+        fileName = _ref2.fileName;
+    if (!fileName) return;
+    var file = new Blob([blobValue], {
+      type: 'application/pdf'
+    });
+    var fileURL = URL.createObjectURL(file);
+    var link = document.createElement('a');
+    link.href = fileURL;
+    link.setAttribute('download', fileName);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  });
+};
+
 var createCheckoutDataBodyWithDefaultHolder = function createCheckoutDataBodyWithDefaultHolder(ticketsQuantity, logedInValues) {
   var ticket_holders = [];
   var first_name = _get(logedInValues, 'firstName') || _get(logedInValues, 'first_name') || '';
@@ -1127,6 +1185,14 @@ var handleSetAccessToken = function handleSetAccessToken(token) {
     }
   }
 };
+function getEvent(id) {
+  var response = publicRequest.get("v1/event/" + id, {
+    headers: ttfHeaders
+  })["catch"](function (error) {
+    throw error;
+  });
+  return response;
+}
 function getTickets(id, promoCode) {
   var response = publicRequest.get("v1/event/" + id + "/tickets/", {
     headers: promoCode ? _extends({}, ttfHeaders, {
@@ -1262,7 +1328,7 @@ var LoginModal = function LoginModal(_ref) {
     },
     onSubmit: function () {
       var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
-        var email, password, bodyFormData, resAutorize, bodyFormDataToken, resAccessToken, accessToken, profileResponse, profileSpecifiedData, profileDataObj, _e$response, _e$response$data, _error;
+        var email, password, bodyFormData, resAutorize, bodyFormDataToken, resAccessToken, accessToken, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
 
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
@@ -1341,6 +1407,8 @@ var LoginModal = function LoginModal(_ref) {
                 if (typeof window !== 'undefined') {
                   window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
                   window.localStorage.setItem('access_token', accessToken);
+                  event = new window.CustomEvent('tf-login');
+                  window.document.dispatchEvent(event);
                 }
 
                 onLogin();
@@ -1846,18 +1914,22 @@ var CustomField = function CustomField(_ref) {
 
 var _excluded$1 = ["label", "field", "selectOptions", "theme", "setFieldValue"];
 var CheckboxField = function CheckboxField(_ref) {
+  var _rest$form, _field$name, _rest$form2, _field$name2;
+
   var label = _ref.label,
       field = _ref.field,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   var customTheme = useTheme();
-  return React.createElement(FormGroup, null, React.createElement(FormControlLabel, {
+  return React.createElement(FormControl, {
+    error: !!(rest != null && (_rest$form = rest.form) != null && _rest$form.errors && rest.form.errors[(_field$name = field == null ? void 0 : field.name) != null ? _field$name : ""])
+  }, React.createElement(FormGroup, null, React.createElement(FormControlLabel, {
     control: React.createElement(Checkbox, Object.assign({}, field, rest)),
     label: label,
     componentsProps: {
       typography: customTheme == null ? void 0 : customTheme.checkbox
     }
-  }));
+  })), !!(rest != null && (_rest$form2 = rest.form) != null && _rest$form2.errors && rest.form.errors[(_field$name2 = field == null ? void 0 : field.name) != null ? _field$name2 : ""]) ? React.createElement(FormHelperText, null, "Required") : null);
 };
 
 var SelectField = function SelectField(_ref) {
@@ -1991,6 +2063,7 @@ var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
       _ref$form = _ref.form,
       touched = _ref$form.touched,
       errors = _ref$form.errors,
+      initialValues = _ref$form.initialValues,
       setFieldValue = _ref.setFieldValue,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
@@ -2000,6 +2073,7 @@ var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
   var customTheme = useTheme();
   return React.createElement(MuiPhoneNumber, Object.assign({
     name: 'phone',
+    value: initialValues.phone,
     onChange: function onChange(e) {
       return setFieldValue("phone", removePlusSign(e));
     },
@@ -2020,6 +2094,14 @@ 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,
@@ -2157,7 +2239,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       _ref3$onGetStatesErro = _ref3.onGetStatesError,
       onGetStatesError = _ref3$onGetStatesErro === void 0 ? function () {} : _ref3$onGetStatesErro,
       _ref3$onGetProfileDat = _ref3.onGetProfileDataSuccess,
-      onGetProfileDataSuccess = _ref3$onGetProfileDat === void 0 ? function () {} : _ref3$onGetProfileDat,
+      _onGetProfileDataSuccess = _ref3$onGetProfileDat === void 0 ? function () {} : _ref3$onGetProfileDat,
       _ref3$onGetProfileDat2 = _ref3.onGetProfileDataError,
       onGetProfileDataError = _ref3$onGetProfileDat2 === void 0 ? function () {} : _ref3$onGetProfileDat2,
       _ref3$onAuthorizeSucc = _ref3.onAuthorizeSuccess,
@@ -2173,6 +2255,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       accountInfoTitle = _ref3$accountInfoTitl === void 0 ? '' : _ref3$accountInfoTitl,
       hideLogo = _ref3.hideLogo,
       themeOptions = _ref3.themeOptions;
+
   var themeMui = createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
   var userData = isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
@@ -2247,9 +2330,14 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   var optedInFieldValue = _get(cartInfoData, 'optedIn', false);
 
-  var hideTtfOptIn = _get(cartInfoData, 'hide_ttf_opt_in', true);
+  var ttfOptIn = _get(cartInfoData, 'ttfOptIn', false);
+
+  var hideTtfOptIn = _get(cartInfoData, 'hide_ttf_opt_in', true); // Get prevProps
 
-  if (!_get(dataWithUniqueIds, '[0].uniqueId')) {
+
+  var prevData = usePrevious(data);
+
+  if (!_get(dataWithUniqueIds, '[0].uniqueId') || !_isEqual(prevData, data)) {
     setDataWithUniqueIds(assingUniqueIds(data));
   }
 
@@ -2404,7 +2492,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 lastName: profileDataObj.last_name
               }));
               window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
-              onGetProfileDataSuccess(userDataResponse.data);
+
+              _onGetProfileDataSuccess(userDataResponse.data);
 
             case 10:
               _context4.next = 15;
@@ -2440,7 +2529,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({}, initialValues, {
       country: _get(userData, 'country', '') || "1",
       state: _get(userData, 'state', '') || "1",
-      brand_opt_in: optedInFieldValue
+      brand_opt_in: optedInFieldValue,
+      ttf_opt_in: ttfOptIn
     }), userValues),
     enableReinitialize: true,
     onSubmit: function () {
@@ -2684,13 +2774,13 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
         var groupClassname = group.groupClassname,
             groupItems = group.groupItems;
         return React.createElement("div", {
-          key: group.uniqueId
+          key: group.id
         }, React.createElement("div", {
           className: groupClassname
         }, _map(groupItems, function (element) {
           return React.createElement("div", {
             className: element.className,
-            key: element.uniqueId
+            key: element.name
           }, React.createElement(Field, {
             name: element.name + "-" + index,
             label: element.label,
@@ -2724,7 +2814,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     userExpired: userExpired,
     onAuthorizeSuccess: onAuthorizeSuccess,
     onAuthorizeError: onAuthorizeError,
-    onGetProfileDataSuccess: onGetProfileDataSuccess,
+    onGetProfileDataSuccess: function onGetProfileDataSuccess(data) {
+      fetchCart();
+
+      _onGetProfileDataSuccess(data);
+    },
     onGetProfileDataError: onGetProfileDataError
   }), showModalRegister && React.createElement(RegisterModal, {
     onClose: function onClose() {
@@ -2733,7 +2827,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     onRegister: function onRegister() {
       setShowModalRegister(false);
     },
-    onGetProfileDataSuccess: onGetProfileDataSuccess,
+    onGetProfileDataSuccess: function onGetProfileDataSuccess(data) {
+      fetchCart();
+
+      _onGetProfileDataSuccess(data);
+    },
     onGetProfileDataError: onGetProfileDataError
   }));
 };
@@ -2957,7 +3055,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("span", {
     className: "card_label_text"
   }, "Card number"), React.createElement(CardNumberElement, {
-    options: _extends({}, options.style, stripeCardOptions),
+    options: _extends({}, options, stripeCardOptions),
     onReady: _identity,
     onChange: _identity,
     onBlur: _identity,
@@ -2967,13 +3065,13 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("span", {
     className: "card_label_text"
   }, "Expiration date"), React.createElement(CardExpiryElement, {
-    options: _extends({}, options.style, stripeCardOptions)
+    options: _extends({}, options, stripeCardOptions)
   })), React.createElement("label", {
     className: "cvc_element"
   }, React.createElement("span", {
     className: "card_label_text"
   }, "CVC"), React.createElement(CardCvcElement, {
-    options: _extends({}, options.style, stripeCardOptions)
+    options: _extends({}, options, stripeCardOptions)
   })), !disableZipSection && React.createElement("label", {
     className: "zip_element"
   }, React.createElement("p", {
@@ -3065,7 +3163,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
       stripeCardOptions = _ref$stripeCardOption === void 0 ? {} : _ref$stripeCardOption,
       _ref$disableZipSectio = _ref.disableZipSection,
       disableZipSection = _ref$disableZipSectio === void 0 ? false : _ref$disableZipSectio,
-      themeOptions = _ref.themeOptions;
+      themeOptions = _ref.themeOptions,
+      elementsOptions = _ref.elementsOptions;
 
   var _useState = useState(initialReviewValues),
       reviewData = _useState[0],
@@ -3286,7 +3385,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
   }, "Please provide your payment information"), showErrorText && React.createElement("p", {
     className: "payment_info__error"
   }, errorText), React.createElement("div", null, React.createElement(Elements, {
-    stripe: getStripePromise(reviewData)
+    stripe: getStripePromise(reviewData),
+    options: elementsOptions
   }, React.createElement(CheckoutForm, {
     stripe_client_secret: _get(reviewData, 'payment_method.stripe_client_secret'),
     total: orderData.total,
@@ -3769,12 +3869,14 @@ var TicketsSection = function TicketsSection(_ref) {
       style: {
         minWidth: 55
       }
-    }, React.createElement(TicketRow, {
+    }, ticket.salesStarted ? React.createElement(TicketRow, {
       ticketTier: ticket,
       prevTicketTier: arr[i - 1],
       selectedTickets: selectedTickets,
       handleTicketSelect: ticketSelect
-    }))));
+    }) : React.createElement("p", {
+      className: 'ticket-not-started-message'
+    }, "Sales not started"))));
   }));
 };
 
@@ -3794,8 +3896,7 @@ var generateQuantity = function generateQuantity(n) {
 var WaitingList = function WaitingList(_ref) {
   var _ref$tickets = _ref.tickets,
       tickets = _ref$tickets === void 0 ? {} : _ref$tickets,
-      eventId = _ref.eventId,
-      isPromotionsEnabled = _ref.isPromotionsEnabled;
+      eventId = _ref.eventId;
 
   var _useState = useState(false),
       showSuccessMessage = _useState[0],
@@ -3870,9 +3971,7 @@ var WaitingList = function WaitingList(_ref) {
     className: "success-message"
   }, React.createElement("p", {
     className: "added-success-message"
-  }, "You've been added to the waiting list!"), React.createElement("p", null, "You'll be notified if tickets become available.")) : React.createElement(React.Fragment, null, !isPromotionsEnabled && React.createElement("p", {
-    className: "no-tickets-text"
-  }, "No tickets are currently available for this event."), React.createElement("h2", null, "WAITING LIST"), React.createElement(Formik, {
+  }, "You've been added to the waiting list!"), React.createElement("p", null, "You'll be notified if tickets become available.")) : React.createElement(React.Fragment, null, React.createElement("h2", null, "WAITING LIST"), React.createElement(Formik, {
     initialValues: {
       ticketTypeId: '',
       quantity: '',
@@ -3967,10 +4066,42 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       promoCodeIsApplied = _ref.promoCodeIsApplied,
       showPromoInput = _ref.showPromoInput,
       isPromotionsEnabled = _ref.isPromotionsEnabled,
-      isAllTicketsSoldOut = _ref.isAllTicketsSoldOut,
       setPromoCode = _ref.setPromoCode,
       setPromoCodeUpdated = _ref.setPromoCodeUpdated,
-      setShowPromoInput = _ref.setShowPromoInput;
+      setShowPromoInput = _ref.setShowPromoInput,
+      isAccessCodeEnabled = _ref.isAccessCodeEnabled;
+  var isPromoCodeHasValue = !!promoCode.trim();
+
+  var renderInputField = function renderInputField() {
+    return React.createElement("div", {
+      className: "promo-code-block"
+    }, React.createElement("div", {
+      className: "promo-code-block"
+    }, React.createElement("p", {
+      className: "promo-code-text"
+    }, isAccessCodeEnabled ? 'Access code required' : 'Promo code')), React.createElement("input", {
+      className: "promo-code-input",
+      placeholder: "",
+      onChange: function onChange(e) {
+        setPromoCode(e.target.value);
+      },
+      onKeyPress: function onKeyPress(event) {
+        if (event.key === 'Enter' && isPromoCodeHasValue) {
+          setPromoCodeUpdated(promoCode);
+          setShowPromoInput(false);
+        }
+      }
+    }), React.createElement(Button$1, {
+      className: "promo-submit-button",
+      onClick: function onClick() {
+        if (isPromoCodeHasValue) {
+          setPromoCodeUpdated(promoCode);
+          setShowPromoInput(false);
+        }
+      }
+    }, isAccessCodeEnabled ? 'ENTER' : 'APPLY'));
+  };
+
   return React.createElement("div", null, promoCodeIsApplied ? React.createElement("div", {
     className: "alert-info"
   }, React.createElement(SVG, {
@@ -3978,35 +4109,95 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
     preProcessor: function preProcessor(code) {
       return code.replace(/fill=".*?"/g, 'fill="currentColor"');
     }
-  }), React.createElement("p", null, "PROMO CODE APPLIED SUCCESSFULLY")) : null, showPromoInput && React.createElement("div", {
-    className: "promo-code-block"
-  }, React.createElement("input", {
-    placeholder: "Promo Code",
-    onChange: function onChange(e) {
-      setPromoCode(e.target.value);
-    },
-    onKeyPress: function onKeyPress(event) {
-      if (event.key === 'Enter') {
-        setPromoCodeUpdated(promoCode);
-      }
-    }
-  }), React.createElement(Button$1, {
-    className: "promo-apply-button",
-    placeholder: "Promo Code",
-    onClick: function onClick() {
-      setPromoCodeUpdated(promoCode);
-    }
-  }, "Apply")), isPromotionsEnabled && !showPromoInput && isAllTicketsSoldOut && React.createElement("p", {
-    className: "promo-code-text"
-  }, "Access code needed"), isPromotionsEnabled && !showPromoInput ? React.createElement(Button$1, {
+  }), React.createElement("p", {
+    className: "promo-code-success"
+  }, "PROMO CODE APPLIED SUCCESSFULLY")) : null, showPromoInput && renderInputField(), isPromotionsEnabled && !showPromoInput && !isAccessCodeEnabled ? React.createElement(Button$1, {
     className: "promo-code-button",
     placeholder: "Promo Codes",
     onClick: function onClick() {
       setShowPromoInput(true);
     }
-  }, "Got a promo code? Click here") : null);
+  }, "Got a promo code? Click here") : !isPromotionsEnabled && !showPromoInput && isAccessCodeEnabled && !promoCodeIsApplied ? renderInputField() : null);
+};
+
+var isTimeExpired = function isTimeExpired(startDate, timezone) {
+  return !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'));
 };
 
+function Countdown(_ref) {
+  var startDate = _ref.startDate,
+      _ref$timezone = _ref.timezone,
+      timezone = _ref$timezone === void 0 ? moment.tz.guess() : _ref$timezone,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$message = _ref.message,
+      message = _ref$message === void 0 ? '' : _ref$message,
+      _ref$callback = _ref.callback,
+      callback = _ref$callback === void 0 ? function () {} : _ref$callback;
+
+  var _useState = useState(''),
+      duration = _useState[0],
+      setDuration = _useState[1];
+
+  var _useState2 = useState(false),
+      timeExpired = _useState2[0],
+      setTimeExpired = _useState2[1];
+
+  useEffect(function () {
+    setTimeExpired(isTimeExpired(startDate, timezone));
+  }, []);
+  useEffect(function () {
+    var timer;
+
+    if (!timeExpired) {
+      timer = setInterval(function () {
+        if (isTimeExpired(startDate, timezone)) {
+          clearInterval(timer);
+          setTimeExpired(true);
+          callback();
+        }
+
+        var currentDate = moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss');
+        var diffTime = moment(startDate).diff(currentDate);
+        var duration = moment.duration(diffTime);
+        var dateArr = {
+          year: duration.years(),
+          month: duration.months(),
+          day: duration.days(),
+          hour: duration.hours(),
+          minute: duration.minutes(),
+          second: duration.seconds()
+        };
+        var timeLeft = '';
+
+        for (var date in dateArr) {
+          var unit = dateArr[date] === 1 ? date : date + 's';
+          var val = String(dateArr[date]).length === 1 ? '0' + dateArr[date] : dateArr[date];
+
+          if (timeLeft) {
+            timeLeft += ", " + val + " " + unit;
+          } else if (dateArr[date]) {
+            timeLeft += val + " " + unit;
+          }
+        }
+
+        setDuration(timeLeft);
+      }, 1000);
+    }
+
+    return function () {
+      clearInterval(timer);
+    };
+  }, [timeExpired]);
+  return React.createElement(React.Fragment, null, !timeExpired && duration && React.createElement("div", {
+    className: 'countdown'
+  }, React.createElement("div", null, React.createElement("p", {
+    className: 'title'
+  }, title), React.createElement("p", null, duration)), React.createElement("p", {
+    className: 'message'
+  }, message)));
+}
+
 function Loader$1() {
   return React.createElement("div", {
     className: "loader-container"
@@ -4014,7 +4205,8 @@ function Loader$1() {
 }
 
 var TicketsContainer = function TicketsContainer(_ref) {
-  var getTicketsLabel = _ref.getTicketsLabel,
+  var onLoginSuccess = _ref.onLoginSuccess,
+      getTicketsLabel = _ref.getTicketsLabel,
       eventId = _ref.eventId,
       onAddToCartSuccess = _ref.onAddToCartSuccess,
       _ref$contentStyle = _ref.contentStyle,
@@ -4030,43 +4222,62 @@ var TicketsContainer = function TicketsContainer(_ref) {
       _ref$queryPromoCode = _ref.queryPromoCode,
       queryPromoCode = _ref$queryPromoCode === void 0 ? '' : _ref$queryPromoCode,
       _ref$isPromotionsEnab = _ref.isPromotionsEnabled,
-      isPromotionsEnabled = _ref$isPromotionsEnab === void 0 ? true : _ref$isPromotionsEnab;
+      isPromotionsEnabled = _ref$isPromotionsEnab === void 0 ? true : _ref$isPromotionsEnab,
+      themeOptions = _ref.themeOptions,
+      _ref$isAccessCodeEnab = _ref.isAccessCodeEnabled,
+      isAccessCodeEnabled = _ref$isAccessCodeEnab === void 0 ? false : _ref$isAccessCodeEnab,
+      _ref$hideSessionButto = _ref.hideSessionButtons,
+      hideSessionButtons = _ref$hideSessionButto === void 0 ? false : _ref$hideSessionButto;
 
   var _useState = useState({}),
       selectedTickets = _useState[0],
       setSelectedTickets = _useState[1];
 
-  var _useState2 = useState([]),
-      tickets = _useState2[0],
-      setTickets = _useState2[1];
+  var isWindowDefined = typeof window !== 'undefined';
 
-  var _useState3 = useState(false),
-      showWaitingList = _useState3[0],
-      setShowWaitingList = _useState3[1];
+  var _useState2 = useState(isWindowDefined ? !!window.localStorage.getItem('access_token') : false),
+      isLogged = _useState2[0],
+      setIsLogged = _useState2[1];
 
-  var _useState4 = useState(false),
-      isLoading = _useState4[0],
-      setIsLoading = _useState4[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 _useState4 = useState(null),
+      event = _useState4[0],
+      setEvent = _useState4[1];
 
   var _useState5 = useState(false),
-      handleBookIsLoading = _useState5[0],
-      setHandleBookIsLoading = _useState5[1];
+      showWaitingList = _useState5[0],
+      setShowWaitingList = _useState5[1];
 
-  var _useState6 = useState(''),
-      promoCode = _useState6[0],
-      setPromoCode = _useState6[1];
+  var _useState6 = useState(false),
+      isLoading = _useState6[0],
+      setIsLoading = _useState6[1];
 
-  var _useState7 = useState(queryPromoCode),
-      promoCodeUpdated = _useState7[0],
-      setPromoCodeUpdated = _useState7[1];
+  var _useState7 = useState(false),
+      handleBookIsLoading = _useState7[0],
+      setHandleBookIsLoading = _useState7[1];
 
-  var _useState8 = useState(false),
-      showPromoInput = _useState8[0],
-      setShowPromoInput = _useState8[1];
+  var _useState8 = useState(''),
+      promoCode = _useState8[0],
+      setPromoCode = _useState8[1];
 
-  var _useState9 = useState(false),
-      promoCodeIsApplied = _useState9[0],
-      setPromoCodeIsApplied = _useState9[1];
+  var _useState9 = useState(queryPromoCode),
+      promoCodeUpdated = _useState9[0],
+      setPromoCodeUpdated = _useState9[1];
+
+  var _useState10 = useState(false),
+      showPromoInput = _useState10[0],
+      setShowPromoInput = _useState10[1];
+
+  var _useState11 = useState(false),
+      promoCodeIsApplied = _useState11[0],
+      setPromoCodeIsApplied = _useState11[1];
 
   useEffect(function () {
     if (typeof window !== 'undefined') {
@@ -4083,62 +4294,103 @@ var TicketsContainer = function TicketsContainer(_ref) {
     }
   }, []);
   useEffect(function () {
-    function getTicketsApi() {
-      return _getTicketsApi.apply(this, arguments);
-    }
+    getTicketsApi();
+  }, [eventId, promoCodeUpdated]);
 
-    function _getTicketsApi() {
-      _getTicketsApi = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var response, attributes;
-        return runtime_1.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.prev = 0;
-                setIsLoading(true);
-                _context.next = 4;
-                return getTickets(eventId, promoCodeUpdated);
-
-              case 4:
-                response = _context.sent;
-
-                if (response.data.success) {
-                  setCustomHeader(response);
-                  attributes = _get(response, 'data.data.attributes');
-                  setPromoCodeIsApplied(attributes.ValidPromoCode);
-                  setTickets(_get(attributes, 'tickets'));
-                  setShowWaitingList(attributes.showWaitingList);
-                  onGetTicketsSuccess(response.data);
-                }
+  var handleLogout = function handleLogout() {
+    if (isWindowDefined) {
+      window.localStorage.removeItem('access_token');
+      window.localStorage.removeItem('user_data');
+      setIsLogged(false);
 
-                _context.next = 11;
-                break;
+      var _event = new window.CustomEvent('tf-logout');
 
-              case 8:
-                _context.prev = 8;
-                _context.t0 = _context["catch"](0);
+      window.document.dispatchEvent(_event);
+    }
+  };
 
-                if (axios.isAxiosError(_context.t0)) {
-                  onGetTicketsError(_context.t0);
-                }
+  var handleExternalLogin = function handleExternalLogin() {
+    setIsLogged(true);
+  };
 
-              case 11:
-                _context.prev = 11;
-                setIsLoading(false);
-                return _context.finish(11);
+  var handleOnClose = function handleOnClose() {
+    setShowLoginModal(false);
+  };
 
-              case 14:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[0, 8, 11, 14]]);
-      }));
-      return _getTicketsApi.apply(this, arguments);
+  var handleOnLogin = function handleOnLogin() {
+    setShowLoginModal(false);
+    setIsLogged(true);
+
+    if (onLoginSuccess) {
+      onLoginSuccess();
     }
+  };
 
-    getTicketsApi();
-  }, [eventId, promoCodeUpdated]);
+  function getTicketsApi() {
+    return _getTicketsApi.apply(this, arguments);
+  }
+
+  function _getTicketsApi() {
+    _getTicketsApi = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+      var response, eventResponse, attributes, _event2;
+
+      return runtime_1.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              setIsLoading(true);
+              _context2.next = 4;
+              return getTickets(eventId, promoCodeUpdated);
+
+            case 4:
+              response = _context2.sent;
+              _context2.next = 7;
+              return getEvent(eventId);
+
+            case 7:
+              eventResponse = _context2.sent;
+
+              if (response.data.success) {
+                setCustomHeader(response);
+                attributes = _get(response, 'data.data.attributes');
+                setPromoCodeIsApplied(attributes.ValidPromoCode);
+                setTickets(_get(attributes, 'tickets'));
+                setShowWaitingList(attributes.showWaitingList);
+                onGetTicketsSuccess(response.data);
+                setPromoCode('');
+              }
+
+              if (eventResponse.data.success) {
+                _event2 = _get(eventResponse, 'data.data.attributes');
+                setEvent(_event2);
+              }
+
+              _context2.next = 15;
+              break;
+
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](0);
+
+              if (axios.isAxiosError(_context2.t0)) {
+                onGetTicketsError(_context2.t0);
+              }
+
+            case 15:
+              _context2.prev = 15;
+              setIsLoading(false);
+              return _context2.finish(15);
+
+            case 18:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 12, 15, 18]]);
+    }));
+    return _getTicketsApi.apply(this, arguments);
+  }
 
   var handleTicketSelect = function handleTicketSelect(key, value) {
     setSelectedTickets(function (prevState) {
@@ -4152,15 +4404,21 @@ var TicketsContainer = function TicketsContainer(_ref) {
     });
   };
 
+  var handleOrdersClick = function handleOrdersClick() {
+    if (isWindowDefined) {
+      window.location.href = '/orders';
+    }
+  };
+
   var handleBook = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
       var _product_options, _product_options2, _ticket_types;
 
-      var ticket, optionName, ticketId, ticketQuantity, data, result, _result$data$data$att, _result$data, _result$data$data, _result$data$data$att2, _result$data$data$att3, _result$data2, _result$data2$data, _result$data2$data$at, _result$data$data$att4, _result$data3, _result$data3$data, _result$data3$data$at, skipBillingPage, nameIsRequired, ageIsRequired, hash, isWindowDefined, userData, access_token, ticketsQuantity, checkoutBody, checkoutResult;
+      var ticket, optionName, ticketId, ticketQuantity, data, result, _result$data$data$att, _result$data, _result$data$data, _result$data$data$att2, _result$data$data$att3, _result$data2, _result$data2$data, _result$data2$data$at, _result$data$data$att4, _result$data3, _result$data3$data, _result$data3$data$at, skipBillingPage, nameIsRequired, ageIsRequired, hash, _isWindowDefined, userData, access_token, ticketsQuantity, checkoutBody, checkoutResult;
 
-      return runtime_1.wrap(function _callee2$(_context2) {
+      return runtime_1.wrap(function _callee$(_context) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context.prev = _context.next) {
             case 0:
               setHandleBookIsLoading(true);
               ticket = _find(tickets, function (item) {
@@ -4181,15 +4439,15 @@ var TicketsContainer = function TicketsContainer(_ref) {
                   }, _ticket_types)
                 }
               };
-              _context2.prev = 6;
-              _context2.next = 9;
+              _context.prev = 6;
+              _context.next = 9;
               return addToCart(eventId, data);
 
             case 9:
-              result = _context2.sent;
+              result = _context.sent;
 
               if (!(result.status === 200)) {
-                _context2.next = 27;
+                _context.next = 27;
                 break;
               }
 
@@ -4200,21 +4458,21 @@ var TicketsContainer = function TicketsContainer(_ref) {
               hash = '';
 
               if (!skipBillingPage) {
-                _context2.next = 26;
+                _context.next = 26;
                 break;
               }
 
               // Get user data for checkout data
-              isWindowDefined = typeof window !== 'undefined';
-              userData = isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
-              access_token = isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
+              _isWindowDefined = typeof window !== 'undefined';
+              userData = _isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
+              access_token = _isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
               ticketsQuantity = Object.keys(selectedTickets).length;
               checkoutBody = createCheckoutDataBodyWithDefaultHolder(ticketsQuantity, userData);
-              _context2.next = 24;
+              _context.next = 24;
               return postOnCheckout(checkoutBody, access_token);
 
             case 24:
-              checkoutResult = _context2.sent;
+              checkoutResult = _context.sent;
               hash = _get(checkoutResult, 'data.data.attributes.hash');
 
             case 26:
@@ -4227,28 +4485,28 @@ var TicketsContainer = function TicketsContainer(_ref) {
               });
 
             case 27:
-              _context2.next = 32;
+              _context.next = 32;
               break;
 
             case 29:
-              _context2.prev = 29;
-              _context2.t0 = _context2["catch"](6);
+              _context.prev = 29;
+              _context.t0 = _context["catch"](6);
 
-              if (axios.isAxiosError(_context2.t0)) {
-                onAddToCartError(_context2.t0);
+              if (axios.isAxiosError(_context.t0)) {
+                onAddToCartError(_context.t0);
               }
 
             case 32:
-              _context2.prev = 32;
+              _context.prev = 32;
               setHandleBookIsLoading(false);
-              return _context2.finish(32);
+              return _context.finish(32);
 
             case 35:
             case "end":
-              return _context2.stop();
+              return _context.stop();
           }
         }
-      }, _callee2, null, [[6, 29, 32, 35]]);
+      }, _callee, null, [[6, 29, 32, 35]]);
     }));
 
     return function handleBook() {
@@ -4256,10 +4514,29 @@ var TicketsContainer = function TicketsContainer(_ref) {
     };
   }();
 
+  var updateTickets = function updateTickets() {
+    getTicketsApi();
+  };
+
   var isAllTicketsSoldOut = !_some(tickets, function (item) {
     return !(item.sold_out || item.soldOut);
   });
-  return React.createElement("div", {
+  var themeMui = createTheme$1(themeOptions);
+  useEffect(function () {
+    isWindowDefined && window.document.addEventListener('custom-logout', handleLogout);
+    return function () {
+      isWindowDefined && window.document.removeEventListener('custom-logout', handleLogout);
+    };
+  }, []);
+  useEffect(function () {
+    isWindowDefined && window.document.addEventListener('custom-login', handleExternalLogin);
+    return function () {
+      isWindowDefined && window.document.removeEventListener('custom-login', handleExternalLogin);
+    };
+  }, []);
+  return React.createElement(ThemeProvider$1, {
+    theme: themeMui
+  }, React.createElement("div", {
     className: "get-tickets-page " + theme,
     style: contentStyle
   }, isLoading ? React.createElement(Loader$1, null) : React.createElement("div", null, React.createElement(TicketsSection, {
@@ -4267,10 +4544,15 @@ var TicketsContainer = function TicketsContainer(_ref) {
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
     promoCodeIsApplied: promoCodeIsApplied
-  }), showWaitingList && React.createElement(WaitingList, {
+  }), event != null && event.salesEnded ? React.createElement("p", null, "Sales for this event are closed.") : event != null && event.salesStart ? React.createElement(Countdown, {
+    startDate: event.salesStart,
+    timezone: event.timezone,
+    title: "Sales start in:",
+    message: "No tickets are currently available for this event.",
+    callback: updateTickets
+  }) : null, showWaitingList && event.salesStarted && React.createElement(WaitingList, {
     tickets: tickets,
-    eventId: eventId,
-    isPromotionsEnabled: isPromotionsEnabled
+    eventId: eventId
   }), React.createElement(PromoCodeSection, {
     promoCode: promoCode,
     promoCodeIsApplied: promoCodeIsApplied,
@@ -4279,12 +4561,30 @@ var TicketsContainer = function TicketsContainer(_ref) {
     setPromoCodeUpdated: setPromoCodeUpdated,
     setShowPromoInput: setShowPromoInput,
     isPromotionsEnabled: isPromotionsEnabled,
+    isAccessCodeEnabled: isAccessCodeEnabled,
     isAllTicketsSoldOut: isAllTicketsSoldOut
   }), !isAllTicketsSoldOut && 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 () {}
-  }, getTicketsLabel || 'GET TICKETS')));
+  }, getTicketsLabel || 'GET TICKETS'), isLogged && !hideSessionButtons ? React.createElement("div", {
+    className: "session-wrapper"
+  }, React.createElement("span", {
+    className: "session-container"
+  }, React.createElement(Button$1, {
+    variant: "outline-light",
+    className: "session-buttons",
+    onClick: handleOrdersClick
+  }, "My Orders")), React.createElement("span", {
+    className: "session-container"
+  }, React.createElement(Button$1, {
+    variant: "outline-light",
+    className: "session-buttons",
+    onClick: handleLogout
+  }, "Log out"))) : ''), showLoginModal ? React.createElement(LoginModal, {
+    onClose: handleOnClose,
+    onLogin: handleOnLogin
+  }) : null));
 };
 
 var EventInfoItem = function EventInfoItem(_ref) {
@@ -4492,9 +4792,9 @@ var TicketsTable = function TicketsTable(_ref) {
   var _ref$tickets = _ref.tickets,
       tickets = _ref$tickets === void 0 ? [] : _ref$tickets;
   return React.createElement("div", {
-    className: 'tickets-box'
+    className: "tickets-box"
   }, React.createElement("h4", {
-    className: 'sub-title'
+    className: "sub-title"
   }, "Your Tickets"), React.createElement(TableContainer, {
     component: Paper
   }, React.createElement(Table, {
@@ -4504,14 +4804,16 @@ var TicketsTable = function TicketsTable(_ref) {
 
     return React.createElement(Fragment, {
       key: index
-    }, React.createElement(TableRow, null, React.createElement(TableCell, null, ticket.hash), React.createElement(TableCell, null, ticket.ticket_type), React.createElement(TableCell, null, ticket.holder_name), React.createElement(TableCell, null, ticket.status), React.createElement(TableCell, null, React.createElement("a", {
-      className: 'download-button',
-      href: ticket.pdf_link,
-      download: true
+    }, React.createElement(TableRow, null, React.createElement(TableCell, null, ticket.hash), React.createElement(TableCell, null, ticket.ticket_type), React.createElement(TableCell, null, ticket.holder_name), React.createElement(TableCell, null, ticket.status), React.createElement(TableCell, null, React.createElement("span", {
+      "aria-hidden": true,
+      className: "download-button",
+      onClick: function onClick() {
+        return downloadPDF(ticket.pdf_link);
+      }
     }, "Download"))), !!((_ticket$add_ons = ticket.add_ons) != null && _ticket$add_ons.length) && React.createElement(TableRow, null, React.createElement(TableCell, {
       colSpan: 5
     }, React.createElement(Table, {
-      className: 'ticket-add-on-table'
+      className: "ticket-add-on-table"
     }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null, "Add-On"), React.createElement(TableCell, null, "Status"))), React.createElement(TableBody, null, ticket.add_ons.map(function (add_on, index) {
       return React.createElement(TableRow, {
         key: index