tf-checkout-react 1.0.103 → 1.0.106

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

@@ -1,4 +1,4 @@
-import React, { Component, useState, useRef, useEffect, Fragment } from 'react';
+import React, { Component, useState, memo, useRef, useEffect, Fragment } from 'react';
 import { connect, Formik, Form, Field } from 'formik';
 import Button from '@mui/material/Button';
 import _identity from 'lodash-es/identity';
@@ -23,24 +23,26 @@ import TextField$1 from '@mui/material/TextField';
 import MuiPhoneNumber from 'material-ui-phone-number';
 import CircularProgress from '@mui/material/CircularProgress';
 import Select from '@mui/material/Select';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Backdrop from '@mui/material/Backdrop';
 import Countdown$1 from 'react-countdown';
 import _isNumber from 'lodash-es/isNumber';
+import SVG from 'react-inlinesvg';
+import DatePicker from '@mui/lab/DatePicker';
+import AdapterMoment from '@mui/lab/AdapterMoment';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
 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 { 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 Button$1 from 'react-bootstrap/Button';
 import jwt_decode from 'jwt-decode';
 import _sortBy from 'lodash-es/sortBy';
 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';
@@ -1114,6 +1116,13 @@ var publicRequest = /*#__PURE__*/axios.create({
   headers: ttfHeaders
 });
 publicRequest.interceptors.response.use(function (response) {
+  var authGuestToken = _get(response, 'headers.authorization-guest');
+
+  if (isWindowDefined && authGuestToken) {
+    window.localStorage.setItem('auth_guest_token', authGuestToken);
+    publicRequest.setGuestToken(authGuestToken);
+  }
+
   return response;
 }, function (error) {
   var _error$response;
@@ -1122,7 +1131,6 @@ publicRequest.interceptors.response.use(function (response) {
     if (isWindowDefined) {
       var _error$response2, _error$response2$data;
 
-      window.localStorage.removeItem('auth_guest_token');
       window.localStorage.removeItem('user_data');
       window.localStorage.removeItem('access_token');
       var errorType = error == null ? void 0 : (_error$response2 = error.response) == null ? void 0 : (_error$response2$data = _error$response2.data) == null ? void 0 : _error$response2$data.error;
@@ -1133,6 +1141,13 @@ publicRequest.interceptors.response.use(function (response) {
     }
   }
 
+  var authGuestToken = _get(error, 'response.headers.authorization-guest');
+
+  if (isWindowDefined && authGuestToken) {
+    window.localStorage.setItem('auth_guest_token', authGuestToken);
+    publicRequest.setGuestToken(authGuestToken);
+  }
+
   return Promise.reject(error);
 });
 publicRequest.interceptors.request.use(function (config) {
@@ -1318,8 +1333,14 @@ var postReferralVisits = function postReferralVisits(eventId, referralId) {
     referrer: "" + referralId
   });
 };
-var checkTicketStatus = function checkTicketStatus(hash) {
-  return publicRequest.post("v1/ticket/" + hash + "/status/");
+var processTicket = function processTicket(hash) {
+  return publicRequest.post("v1/ticket/" + hash + "/process/");
+};
+var declineInvitation = function declineInvitation(hash) {
+  return publicRequest.post("v1/ticket/" + hash + "/decline");
+};
+var sendRSVPInfo = function sendRSVPInfo(eventId, data) {
+  return publicRequest.post("v1/event/" + eventId + "/send-rsvp-info", data);
 };
 
 var style = {
@@ -1788,6 +1809,7 @@ var createRegisterFormData = function createRegisterFormData(values, checkoutBod
   bodyFormData.append('password_confirmation', values.confirmPassword);
   bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
   bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
+  bodyFormData.append('check_cart_expiration', 'true');
 
   _forEach(checkoutBody.attributes, function (item, key) {
     bodyFormData.append(key, item);
@@ -1954,13 +1976,21 @@ var CustomField = function CustomField(_ref) {
       touched = _ref$form.touched,
       errors = _ref$form.errors,
       submitCount = _ref$form.submitCount,
-      theme = _ref.theme;
+      theme = _ref.theme,
+      _ref$inputProps = _ref.inputProps,
+      pInputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+      _ref$InputProps = _ref.InputProps,
+      InputProps = _ref$InputProps === void 0 ? {} : _ref$InputProps,
+      inputRef = _ref.inputRef;
   var isSelectField = type === 'select';
 
   var error = _get(errors, field.name);
 
   var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
   var customTheme = useTheme();
+  var inputProps = {
+    sx: customTheme == null ? void 0 : customTheme.input
+  };
   return React.createElement(TextField$1, Object.assign({
     id: field.name,
     label: label,
@@ -1977,12 +2007,11 @@ var CustomField = function CustomField(_ref) {
       }
     },
     InputLabelProps: {
-      sx: customTheme == null ? void 0 : customTheme.input,
-      shrink: field.name === 'holderAge' ? true : undefined
-    },
-    inputProps: {
       sx: customTheme == null ? void 0 : customTheme.input
-    }
+    },
+    InputProps: InputProps,
+    inputProps: _extends({}, inputProps, pInputProps),
+    inputRef: inputRef
   }, field), isSelectField ? _map(selectOptions, function (option) {
     return React.createElement("option", {
       key: option.value,
@@ -2169,6 +2198,25 @@ var showZero = function showZero(value) {
   return _isNumber(intNumber) ? intNumber >= 0 && intNumber < 10 ? '0' + intNumber : intNumber : null;
 };
 
+var getImage = function getImage(name) {
+  if (name === void 0) {
+    name = '';
+  }
+
+  var image = '';
+
+  if (!name.trim().length) {
+    return image;
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    image = require("./images/" + name);
+    return image["default"];
+  }
+
+  return image;
+};
+
 var TimerWidget = function TimerWidget(_ref) {
   var expires_at = _ref.expires_at,
       buyLoading = _ref.buyLoading,
@@ -2201,9 +2249,25 @@ var TimerWidget = function TimerWidget(_ref) {
     return React.createElement("span", null, showZero(minutes), ":", showZero(seconds));
   };
 
+  var hideTimer = function hideTimer() {
+    var timerRl = document.querySelector('.timer');
+
+    if (timerRl) {
+      timerRl.style.visibility = "hidden";
+    }
+  };
+
   return showTimer && !!expires_at ? React.createElement("div", {
     className: "timer"
   }, React.createElement("div", {
+    className: 'close-icon',
+    onClick: hideTimer
+  }, React.createElement(SVG, {
+    src: getImage('cross.svg'),
+    width: '10',
+    height: '10',
+    fill: '#fff'
+  })), React.createElement("div", {
     className: "toast-message"
   }, React.createElement("p", null, "Please complete your purchase before the timer reaches zero."), React.createElement("p", {
     className: "countdown"
@@ -2217,6 +2281,8 @@ var TimerWidget = function TimerWidget(_ref) {
   })))) : null;
 };
 
+var TimerWidget$1 = /*#__PURE__*/memo(TimerWidget);
+
 var SnackbarAlert = function SnackbarAlert(_ref) {
   var isOpen = _ref.isOpen,
       message = _ref.message,
@@ -2253,6 +2319,79 @@ var SnackbarAlert = function SnackbarAlert(_ref) {
   }, message)));
 };
 
+var DATE_SIZE = 32;
+var compactStyles = {
+  '& > div': {
+    minWidth: 256
+  },
+  '& > div > div, & > div > div > div, & .MuiCalendarPicker-root': {
+    width: 256
+  },
+  '& .MuiTypography-caption': {
+    width: DATE_SIZE,
+    margin: 0
+  },
+  '& .PrivatePickersSlideTransition-root': {
+    minHeight: DATE_SIZE * 6
+  },
+  '& .PrivatePickersSlideTransition-root [role="row"]': {
+    margin: 0
+  },
+  '& .MuiPickersDay-dayWithMargin': {
+    margin: 0
+  },
+  '& .MuiPickersDay-root': {
+    width: DATE_SIZE,
+    height: DATE_SIZE
+  }
+};
+var compactStyleTheme = /*#__PURE__*/createTheme({
+  components: {
+    MuiPaper: {
+      defaultProps: {
+        sx: compactStyles
+      }
+    }
+  }
+});
+var DatePickerField = function DatePickerField(_ref) {
+  var label = _ref.label,
+      field = _ref.field,
+      form = _ref.form,
+      theme = _ref.theme,
+      _ref$useCompact = _ref.useCompact,
+      useCompact = _ref$useCompact === void 0 ? true : _ref$useCompact;
+  return React.createElement(ThemeProvider, {
+    theme: useCompact ? compactStyleTheme : {}
+  }, React.createElement(LocalizationProvider, {
+    dateAdapter: AdapterMoment
+  }, React.createElement(DatePicker, {
+    value: field.value || '',
+    onChange: function onChange(value) {
+      return form.setFieldValue(field.name, value);
+    },
+    PopperProps: {
+      placement: 'bottom-start'
+    },
+    showDaysOutsideCurrentMonth: true,
+    disableFuture: true,
+    inputFormat: "DD/MM/YYYY",
+    mask: "__/__/____",
+    renderInput: function renderInput(params) {
+      return React.createElement(CustomField, Object.assign({}, params, {
+        inputProps: _extends({}, params.inputProps, {
+          placeholder: 'dd/mm/yyyy'
+        }),
+        theme: theme,
+        field: field,
+        form: form,
+        label: label,
+        type: "tel"
+      }));
+    }
+  })));
+};
+
 var LogicRunner = function LogicRunner(_ref) {
   var values = _ref.values,
       setStates = _ref.setStates,
@@ -2508,7 +2647,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   var hideTtfOptIn = _get(cartInfoData, 'hide_ttf_opt_in', true);
 
-  var expirationTime = _get(cartInfoData, 'expires_at');
+  var expirationTime = _get(cartInfoData, 'expiresAt');
 
   var flagRequirePhone = getQueryVariable('phone_required') === 'true'; // Get prevProps
 
@@ -2709,7 +2848,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             switch (_context5.prev = _context5.next) {
               case 0:
                 if (!(skipPage && !_isEmpty(ticketsQuantity) && !showDOB)) {
-                  _context5.next = 16;
+                  _context5.next = 17;
                   break;
                 }
 
@@ -2721,29 +2860,30 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
               case 6:
                 res = _context5.sent;
+                removeReferralKey();
                 onSkipBillingPage(_get(res, 'data.data.attributes'));
                 setLoading(false);
-                _context5.next = 14;
+                _context5.next = 15;
                 break;
 
-              case 11:
-                _context5.prev = 11;
+              case 12:
+                _context5.prev = 12;
                 _context5.t0 = _context5["catch"](3);
                 onSubmitError(_context5.t0);
 
-              case 14:
-                _context5.next = 17;
+              case 15:
+                _context5.next = 18;
                 break;
 
-              case 16:
+              case 17:
                 setLoading(false);
 
-              case 17:
+              case 18:
               case "end":
                 return _context5.stop();
             }
           }
-        }, _callee5, null, [[3, 11]]);
+        }, _callee5, null, [[3, 12]]);
       }));
 
       return function collectPaymentData() {
@@ -2768,10 +2908,19 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     }
 
     return checkoutBody;
+  };
+
+  var removeReferralKey = function removeReferralKey() {
+    localStorage.removeItem('referral_key');
   }; // Displaying loader
 
 
-  if (loading) {
+  if (loading || enableTimer && !expirationTime && typeof window !== 'undefined') {
+    if (expirationTime === 0) {
+      // Redirect to homepage (countdown finished and browser reloaded case)
+      window.location.href = '/';
+    }
+
     return React.createElement(Backdrop, {
       sx: {
         color: '#fff'
@@ -2784,7 +2933,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   return React.createElement(ThemeProvider, {
     theme: themeMui
-  }, expirationTime && enableTimer && React.createElement(TimerWidget, {
+  }, !!expirationTime && enableTimer && React.createElement(TimerWidget$1, {
     expires_at: expirationTime,
     onCountdownFinish: onCountdownFinish
   }), React.createElement(Formik, {
@@ -2806,7 +2955,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 _context6.prev = 0;
 
                 if (!isLoggedIn) {
-                  _context6.next = 15;
+                  _context6.next = 16;
                   break;
                 }
 
@@ -2834,10 +2983,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
               case 12:
                 _res = _context6.sent;
+                removeReferralKey();
                 handleSubmit(values, formikHelpers, eventId, _res);
                 return _context6.abrupt("return");
 
-              case 15:
+              case 16:
                 checkoutBodyForRegistration = createCheckoutDataBody(ticketsQuantity.length, values, {
                   emailLogged: emailLogged,
                   firstNameLogged: firstNameLogged,
@@ -2845,11 +2995,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 }, showDOB);
                 bodyFormData = createRegisterFormData(values, checkoutBodyForRegistration);
                 access_token_register = null;
-                _context6.prev = 18;
-                _context6.next = 21;
+                _context6.prev = 19;
+                _context6.next = 22;
                 return register(bodyFormData);
 
-              case 21:
+              case 22:
                 resRegister = _context6.sent;
                 access_token_register = _get(resRegister, 'data.data.attributes.access_token');
                 refreshToken = _get(resRegister, 'data.data.attributes.refresh_token');
@@ -2859,12 +3009,12 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                   refreshToken: refreshToken
                 };
                 onRegisterSuccess(tokens);
-                _context6.next = 33;
+                _context6.next = 34;
                 break;
 
-              case 29:
-                _context6.prev = 29;
-                _context6.t0 = _context6["catch"](18);
+              case 30:
+                _context6.prev = 30;
+                _context6.t0 = _context6["catch"](19);
 
                 if (axios.isAxiosError(_context6.t0)) {
                   _error = _context6.t0 == null ? void 0 : (_e$response = _context6.t0.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message;
@@ -2893,11 +3043,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
                 return _context6.abrupt("return");
 
-              case 33:
-                _context6.next = 35;
+              case 34:
+                _context6.next = 36;
                 return getProfileData(access_token_register);
 
-              case 35:
+              case 36:
                 profileData = _context6.sent;
                 profileSpecifiedData = _get(profileData, 'data.data');
                 profileDataObj = setLoggedUserData(profileSpecifiedData);
@@ -2907,17 +3057,18 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 }
 
                 checkoutBody = collectCheckoutBody(values);
-                _context6.next = 42;
+                _context6.next = 43;
                 return postOnCheckout(checkoutBody, access_token_register);
 
-              case 42:
+              case 43:
                 res = _context6.sent;
+                removeReferralKey();
                 handleSubmit(values, formikHelpers, eventId, res);
-                _context6.next = 49;
+                _context6.next = 51;
                 break;
 
-              case 46:
-                _context6.prev = 46;
+              case 48:
+                _context6.prev = 48;
                 _context6.t1 = _context6["catch"](0);
 
                 if (axios.isAxiosError(_context6.t1)) {
@@ -2937,12 +3088,12 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                   onSubmitError(_context6.t1);
                 }
 
-              case 49:
+              case 51:
               case "end":
                 return _context6.stop();
             }
           }
-        }, _callee6, null, [[0, 46], [18, 29]]);
+        }, _callee6, null, [[0, 48], [19, 30]]);
       }));
 
       function onSubmit(_x2, _x3) {
@@ -3020,10 +3171,6 @@ 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.createElement(React.Fragment, {
@@ -3037,7 +3184,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             validate: getValidateFunctions(element, states, props.values),
             setFieldValue: props.setFieldValue,
             onBlur: props.handleBlur,
-            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? FormikPhoneNumberField : CustomField,
+            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? FormikPhoneNumberField : element.type === 'date' ? DatePickerField : CustomField,
             selectOptions: element.name === 'country' ? countries : element.name === 'state' ? states : [],
             theme: theme
           })));
@@ -3179,7 +3326,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              handleSetLoading(true);
+              setStripeError(null);
               _context.prev = 1;
               event.preventDefault();
 
@@ -3239,17 +3386,18 @@ var CheckoutForm = function CheckoutForm(_ref) {
               return _context.abrupt("return");
 
             case 20:
-              _context.next = 22;
+              handleSetLoading(true);
+              _context.next = 23;
               return stripe.confirmCardPayment(stripe_client_secret, {
                 payment_method: paymentMethodReq.paymentMethod.id
               });
 
-            case 22:
+            case 23:
               _yield$stripe$confirm = _context.sent;
               _error = _yield$stripe$confirm.error;
 
               if (!_error) {
-                _context.next = 28;
+                _context.next = 29;
                 break;
               }
 
@@ -3257,22 +3405,22 @@ var CheckoutForm = function CheckoutForm(_ref) {
               handleSetLoading(false);
               return _context.abrupt("return");
 
-            case 28:
+            case 29:
               onSubmit(null);
-              _context.next = 34;
+              _context.next = 35;
               break;
 
-            case 31:
-              _context.prev = 31;
+            case 32:
+              _context.prev = 32;
               _context.t0 = _context["catch"](1);
               onSubmit(_context.t0);
 
-            case 34:
+            case 35:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[1, 31]]);
+      }, _callee, null, [[1, 32]]);
     }));
 
     return function handleSubmit(_x) {
@@ -3582,37 +3730,36 @@ var PaymentContainer = function PaymentContainer(_ref) {
               _context3.prev = 0;
 
               if (!error) {
-                _context3.next = 4;
+                _context3.next = 3;
                 break;
               }
 
-              setPaymentIsLoading(false);
               throw error;
 
-            case 4:
+            case 3:
               order_hash = reviewData.order_details.order_hash;
 
               if (!(total === "0.00")) {
-                _context3.next = 11;
+                _context3.next = 10;
                 break;
               }
 
-              _context3.next = 8;
+              _context3.next = 7;
               return handleFreeSuccess(order_hash);
 
-            case 8:
+            case 7:
               _context3.t0 = _context3.sent;
-              _context3.next = 14;
+              _context3.next = 13;
               break;
 
-            case 11:
-              _context3.next = 13;
+            case 10:
+              _context3.next = 12;
               return handlePaymentSuccess(order_hash);
 
-            case 13:
+            case 12:
               _context3.t0 = _context3.sent;
 
-            case 14:
+            case 13:
               paymentSuccessResponse = _context3.t0;
 
               if (paymentSuccessResponse.status === 200) {
@@ -3623,10 +3770,11 @@ var PaymentContainer = function PaymentContainer(_ref) {
               _context3.next = 22;
               break;
 
-            case 18:
-              _context3.prev = 18;
+            case 17:
+              _context3.prev = 17;
               _context3.t1 = _context3["catch"](0);
               setError(_get(_context3.t1, 'response.data.message'));
+              setPaymentIsLoading(false);
               onPaymentError(_context3.t1.response);
 
             case 22:
@@ -3634,7 +3782,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[0, 18]]);
+      }, _callee3, null, [[0, 17]]);
     }));
 
     return function handlePaymentMiddleWare(_x) {
@@ -3647,7 +3795,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     theme: themeMui
   }, React.createElement("div", {
     className: "payment_page"
-  }, !paymentIsLoading && !error && enableTimer && React.createElement(TimerWidget, {
+  }, enableTimer && React.createElement(TimerWidget$1, {
     expires_at: _get(reviewData, 'expires_at', 0),
     buyLoading: paymentIsLoading,
     onCountdownFinish: onCountdownFinish
@@ -3705,6 +3853,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     disabled: paymentIsLoading,
     type: "button",
     onClick: function onClick() {
+      setPaymentIsLoading(true);
       handlePaymentMiddleWare(null);
     }
   }, paymentIsLoading ? React.createElement(CircularProgress, {
@@ -4141,11 +4290,12 @@ var TicketsSection = function TicketsSection(_ref) {
   var ticketsList = _ref.ticketsList,
       selectedTickets = _ref.selectedTickets,
       handleTicketSelect = _ref.handleTicketSelect,
-      promoCodeIsApplied = _ref.promoCodeIsApplied;
-
-  var sortedTicketsList = _sortBy(ticketsList, 'sortOrder');
-
-  return React.createElement(React.Fragment, null, sortedTicketsList.map(function (ticket, i, arr) {
+      codeIsApplied = _ref.codeIsApplied,
+      sortBySoldOut = _ref.sortBySoldOut,
+      ticketsHeaderComponent = _ref.ticketsHeaderComponent,
+      hideTicketsHeader = _ref.hideTicketsHeader;
+  var sortedTicketsList = sortBySoldOut ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut') : _sortBy(ticketsList, 'sortOrder');
+  return React.createElement(React.Fragment, null, !hideTicketsHeader && ticketsHeaderComponent, sortedTicketsList.map(function (ticket, i, arr) {
     var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
 
     var ticketSelect = function ticketSelect(event) {
@@ -4155,12 +4305,12 @@ var TicketsSection = function TicketsSection(_ref) {
 
     var ticketIsDiscounted = false;
 
-    if (ticket.oldPrice && promoCodeIsApplied && !isSoldOut && ticket.oldPrice !== ticket.price) {
+    if (ticket.oldPrice && codeIsApplied && !isSoldOut && ticket.oldPrice !== ticket.price) {
       ticketIsDiscounted = true;
     }
 
-    var ticketIsFree = (+ticket.cost || +ticket.price) === 0;
-    var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "$ " + (+ticket.cost || +ticket.price).toFixed(2);
+    var ticketIsFree = +ticket.price === 0;
+    var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "$ " + (+ticket.price).toFixed(2);
     return React.createElement("div", {
       key: ticket.id || ticket.name,
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
@@ -4352,36 +4502,14 @@ var WaitingList = function WaitingList(_ref) {
   }) : 'ADD TO WAITING LIST')))));
 };
 
-var getImage = function getImage(name) {
-  if (name === void 0) {
-    name = '';
-  }
-
-  var image = '';
-
-  if (!name.trim().length) {
-    return image;
-  }
-
-  if (process.env.NODE_ENV === 'production') {
-    image = require("./images/" + name);
-    return image["default"];
-  }
-
-  return image;
-};
-
 var PromoCodeSection = function PromoCodeSection(_ref) {
-  var promoCode = _ref.promoCode,
-      promoCodeIsApplied = _ref.promoCodeIsApplied,
+  var code = _ref.code,
+      codeIsApplied = _ref.codeIsApplied,
       showPromoInput = _ref.showPromoInput,
-      isPromotionsEnabled = _ref.isPromotionsEnabled,
-      setPromoCode = _ref.setPromoCode,
-      setPromoCodeUpdated = _ref.setPromoCodeUpdated,
+      setCode = _ref.setCode,
       setShowPromoInput = _ref.setShowPromoInput,
-      isAccessCodeEnabled = _ref.isAccessCodeEnabled,
-      isPromoLoading = _ref.isPromoLoading;
-  var isPromoCodeHasValue = !!promoCode.trim();
+      updateTickets = _ref.updateTickets;
+  var isPromoCodeHasValue = !!code.trim();
 
   var renderInputField = function renderInputField() {
     return React.createElement("div", {
@@ -4390,30 +4518,30 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       className: "promo-code-block"
     }, React.createElement("p", {
       className: "promo-code-text"
-    }, isAccessCodeEnabled ? 'Access code required' : 'Promo code')), React.createElement("input", {
+    }, "Promo code")), React.createElement("input", {
       className: "promo-code-input",
       placeholder: "",
       onChange: function onChange(e) {
-        setPromoCode(e.target.value);
+        setCode(e.target.value);
       },
       onKeyPress: function onKeyPress(event) {
         if (event.key === 'Enter' && isPromoCodeHasValue) {
-          setPromoCodeUpdated(promoCode);
           setShowPromoInput(false);
+          updateTickets(true);
         }
       }
     }), React.createElement(Button$1, {
       className: "promo-submit-button",
       onClick: function onClick() {
         if (isPromoCodeHasValue) {
-          setPromoCodeUpdated(promoCode);
           setShowPromoInput(false);
+          updateTickets(true);
         }
       }
-    }, isAccessCodeEnabled ? 'ENTER' : 'APPLY'));
+    }, "APPLY"));
   };
 
-  return isPromoLoading ? React.createElement(Loader, null) : React.createElement("div", null, promoCodeIsApplied ? React.createElement("div", {
+  return React.createElement("div", null, codeIsApplied ? React.createElement("div", {
     className: "alert-info"
   }, React.createElement(SVG, {
     src: getImage('done.svg'),
@@ -4422,13 +4550,45 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
     }
   }), React.createElement("p", {
     className: "promo-code-success"
-  }, "PROMO CODE APPLIED SUCCESSFULLY")) : null, showPromoInput && renderInputField(), isPromotionsEnabled && !showPromoInput && !isAccessCodeEnabled ? React.createElement(Button$1, {
+  }, "PROMO CODE APPLIED SUCCESSFULLY")) : null, !showPromoInput && React.createElement(Button$1, {
     className: "promo-code-button",
     placeholder: "Promo Codes",
     onClick: function onClick() {
       setShowPromoInput(true);
     }
-  }, "Got a promo code? Click here") : !isPromotionsEnabled && !showPromoInput && isAccessCodeEnabled && !promoCodeIsApplied ? renderInputField() : null);
+  }, "Got a promo code? Click here"), showPromoInput && renderInputField());
+};
+
+var AccessCodeSection = function AccessCodeSection(_ref) {
+  var code = _ref.code,
+      setCode = _ref.setCode,
+      updateTickets = _ref.updateTickets;
+  var isAccessCodeHasValue = !!code.trim();
+  return React.createElement("div", {
+    className: "access-code-block"
+  }, React.createElement("div", {
+    className: "access-code-block"
+  }, React.createElement("p", {
+    className: "access-code-text"
+  }, "Access code required")), React.createElement("input", {
+    className: "access-code-input",
+    placeholder: "",
+    onChange: function onChange(e) {
+      setCode(e.target.value);
+    },
+    onKeyPress: function onKeyPress(event) {
+      if (event.key === 'Enter' && isAccessCodeHasValue) {
+        updateTickets(true);
+      }
+    }
+  }), React.createElement(Button$1, {
+    className: "access-submit-button",
+    onClick: function onClick() {
+      if (isAccessCodeHasValue) {
+        updateTickets(true);
+      }
+    }
+  }, "ENTER"));
 };
 
 var isTimeExpired = function isTimeExpired(startDate, timezone) {
@@ -4443,8 +4603,11 @@ function Countdown(_ref) {
       title = _ref$title === void 0 ? '' : _ref$title,
       _ref$message = _ref.message,
       message = _ref$message === void 0 ? '' : _ref$message,
+      _ref$disableLeadingZe = _ref.disableLeadingZero,
+      disableLeadingZero = _ref$disableLeadingZe === void 0 ? false : _ref$disableLeadingZe,
       _ref$callback = _ref.callback,
-      callback = _ref$callback === void 0 ? function () {} : _ref$callback;
+      callback = _ref$callback === void 0 ? function () {} : _ref$callback,
+      isLoggedIn = _ref.isLoggedIn;
 
   var _useState = useState(''),
       duration = _useState[0],
@@ -4466,6 +4629,7 @@ function Countdown(_ref) {
           clearInterval(timer);
           setTimeExpired(true);
           callback();
+          return;
         }
 
         var currentDate = moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss');
@@ -4483,7 +4647,11 @@ function Countdown(_ref) {
 
         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];
+          var val = dateArr[date];
+
+          if (!disableLeadingZero && String(dateArr[date]).length === 1) {
+            val = '0' + dateArr[date];
+          }
 
           if (timeLeft) {
             timeLeft += ", " + val + " " + unit;
@@ -4501,7 +4669,7 @@ function Countdown(_ref) {
     };
   }, [timeExpired]);
   return React.createElement(React.Fragment, null, !timeExpired && duration && React.createElement("div", {
-    className: 'countdown'
+    className: "countdown " + (!isLoggedIn ? 'countdown-on-bottom' : '')
   }, React.createElement("div", null, React.createElement("p", {
     className: 'title'
   }, title), React.createElement("p", null, duration)), React.createElement("p", {
@@ -4516,7 +4684,8 @@ var ReferralLogic = function ReferralLogic(props) {
     if (isWindowDefined) {
       var params = new URL("" + window.location).searchParams;
       var referralId = params.get('ttf_r') || '';
-      var isAlreadyCounted = !!localStorage.getItem('referral_key');
+      var referralValue = [eventId, '.', referralId].join('');
+      var isAlreadyCounted = localStorage.getItem('referral_key') === referralValue;
 
       if (referralId && eventId && !isAlreadyCounted) {
         _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
@@ -4529,7 +4698,7 @@ var ReferralLogic = function ReferralLogic(props) {
                   return postReferralVisits("" + eventId, referralId);
 
                 case 3:
-                  localStorage.setItem('referral_key', [eventId, '.', referralId].join(''));
+                  localStorage.setItem('referral_key', referralValue);
                   _context.next = 8;
                   break;
 
@@ -4577,7 +4746,17 @@ var TicketsContainer = function TicketsContainer(_ref) {
       _ref$hideWaitingList = _ref.hideWaitingList,
       hideWaitingList = _ref$hideWaitingList === void 0 ? false : _ref$hideWaitingList,
       _ref$isButtonScrollab = _ref.isButtonScrollable,
-      isButtonScrollable = _ref$isButtonScrollab === void 0 ? false : _ref$isButtonScrollab;
+      isButtonScrollable = _ref$isButtonScrollab === void 0 ? false : _ref$isButtonScrollab,
+      _ref$sortBySoldOut = _ref.sortBySoldOut,
+      sortBySoldOut = _ref$sortBySoldOut === void 0 ? false : _ref$sortBySoldOut,
+      _ref$disableCountdown = _ref.disableCountdownLeadingZero,
+      disableCountdownLeadingZero = _ref$disableCountdown === void 0 ? false : _ref$disableCountdown,
+      _ref$isLoggedIn = _ref.isLoggedIn,
+      isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
+      ActionsSectionComponent = _ref.actionsSectionComponent,
+      ticketsHeaderComponent = _ref.ticketsHeaderComponent,
+      _ref$hideTicketsHeade = _ref.hideTicketsHeader,
+      hideTicketsHeader = _ref$hideTicketsHeade === void 0 ? false : _ref$hideTicketsHeade;
 
   var _useState = useState({}),
       selectedTickets = _useState[0],
@@ -4605,33 +4784,37 @@ var TicketsContainer = function TicketsContainer(_ref) {
       showWaitingList = _useState6[0],
       setShowWaitingList = _useState6[1];
 
-  var _useState7 = useState(false),
+  var _useState7 = useState(true),
       isLoading = _useState7[0],
       setIsLoading = _useState7[1];
 
   var _useState8 = useState(false),
-      isPromoLoading = _useState8[0],
-      setIsPromoLoading = _useState8[1];
+      codeIsLoading = _useState8[0],
+      setCodeIsLoading = _useState8[1];
 
   var _useState9 = useState(false),
       handleBookIsLoading = _useState9[0],
       setHandleBookIsLoading = _useState9[1];
 
-  var _useState10 = useState(''),
-      promoCode = _useState10[0],
-      setPromoCode = _useState10[1];
+  var _useState10 = useState(getQueryVariable('r') || queryPromoCode),
+      code = _useState10[0],
+      setCode = _useState10[1];
 
-  var _useState11 = useState(getQueryVariable('r') || queryPromoCode),
-      promoCodeUpdated = _useState11[0],
-      setPromoCodeUpdated = _useState11[1];
+  var _useState11 = useState(false),
+      showPromoInput = _useState11[0],
+      setShowPromoInput = _useState11[1];
 
   var _useState12 = useState(false),
-      showPromoInput = _useState12[0],
-      setShowPromoInput = _useState12[1];
+      codeIsApplied = _useState12[0],
+      setCodeIsApplied = _useState12[1];
 
-  var _useState13 = useState(false),
-      promoCodeIsApplied = _useState13[0],
-      setPromoCodeIsApplied = _useState13[1];
+  var _useState13 = useState(isAccessCodeEnabled),
+      showAccessCodeSection = _useState13[0],
+      setShowAccessCodeSection = _useState13[1];
+
+  var _useState14 = useState(isPromotionsEnabled),
+      showPromoCodeSection = _useState14[0],
+      setShowPromoCodeSection = _useState14[1];
 
   var ticketsContainerRef = useRef(null);
   useEffect(function () {
@@ -4649,8 +4832,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
     }
   }, []);
   useEffect(function () {
-    !!eventId && getTicketsApi(!!promoCodeUpdated);
-  }, [eventId, promoCodeUpdated]);
+    !!eventId && getTicketsApi();
+  }, [eventId]);
 
   var handleLogout = function handleLogout() {
     if (isWindowDefined) {
@@ -4699,7 +4882,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }
 
   function _getTicketsApi() {
-    _getTicketsApi = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(isUpdateingPromoCode) {
+    _getTicketsApi = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(isUpdateingCode) {
       var response, eventResponse, attributes, _event2;
 
       return runtime_1.wrap(function _callee2$(_context2) {
@@ -4707,27 +4890,27 @@ var TicketsContainer = function TicketsContainer(_ref) {
           switch (_context2.prev = _context2.next) {
             case 0:
               _context2.prev = 0;
-              !isUpdateingPromoCode && setIsLoading(true);
-              setIsPromoLoading(true);
-              _context2.next = 5;
-              return getTickets(eventId, promoCodeUpdated);
+              isUpdateingCode ? setCodeIsLoading(true) : setIsLoading(true);
+              _context2.next = 4;
+              return getTickets(eventId, code);
 
-            case 5:
+            case 4:
               response = _context2.sent;
-              _context2.next = 8;
+              _context2.next = 7;
               return getEvent(eventId);
 
-            case 8:
+            case 7:
               eventResponse = _context2.sent;
 
               if (response.data.success) {
-                setCustomHeader(response);
                 attributes = _get(response, 'data.data.attributes');
-                setPromoCodeIsApplied(attributes.ValidPromoCode);
+                setCodeIsApplied(attributes.ValidPromoCode);
                 setTickets(_get(attributes, 'tickets'));
                 setShowWaitingList(attributes.showWaitingList);
                 onGetTicketsSuccess(response.data);
-                setPromoCode('');
+                setCode('');
+                setShowAccessCodeSection(attributes.is_access_code);
+                setShowPromoCodeSection(attributes.isPromotionsEnabled);
               }
 
               if (eventResponse.data.success) {
@@ -4735,29 +4918,29 @@ var TicketsContainer = function TicketsContainer(_ref) {
                 setEvent(_event2);
               }
 
-              _context2.next = 16;
+              _context2.next = 15;
               break;
 
-            case 13:
-              _context2.prev = 13;
+            case 12:
+              _context2.prev = 12;
               _context2.t0 = _context2["catch"](0);
 
               if (axios.isAxiosError(_context2.t0)) {
                 onGetTicketsError(_context2.t0);
               }
 
-            case 16:
-              _context2.prev = 16;
+            case 15:
+              _context2.prev = 15;
               setIsLoading(false);
-              setIsPromoLoading(false);
-              return _context2.finish(16);
+              setCodeIsLoading(false);
+              return _context2.finish(15);
 
-            case 20:
+            case 19:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[0, 13, 16, 20]]);
+      }, _callee2, null, [[0, 12, 15, 19]]);
     }));
     return _getTicketsApi.apply(this, arguments);
   }
@@ -4784,7 +4967,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     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, _result$data$data$att5, _result$data4, _result$data4$data, _result$data4$data$at, skipBillingPage, nameIsRequired, ageIsRequired, phoneIsRequired, hash, _isWindowDefined, userData, access_token, 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, _result$data$data$att5, _result$data4, _result$data4$data, _result$data4$data$at, skipBillingPage, nameIsRequired, ageIsRequired, phoneIsRequired, hash, total, _isWindowDefined, userData, access_token, checkoutBody, checkoutResult;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
@@ -4817,19 +5000,19 @@ var TicketsContainer = function TicketsContainer(_ref) {
               result = _context.sent;
 
               if (!(result.status === 200)) {
-                _context.next = 27;
+                _context.next = 28;
                 break;
               }
 
-              setCustomHeader(result);
               skipBillingPage = (_result$data$data$att = result == null ? void 0 : (_result$data = result.data) == null ? void 0 : (_result$data$data = _result$data.data) == null ? void 0 : (_result$data$data$att2 = _result$data$data.attributes) == null ? void 0 : _result$data$data$att2.skip_billing_page) != null ? _result$data$data$att : false;
               nameIsRequired = (_result$data$data$att3 = result == null ? void 0 : (_result$data2 = result.data) == null ? void 0 : (_result$data2$data = _result$data2.data) == null ? void 0 : (_result$data2$data$at = _result$data2$data.attributes) == null ? void 0 : _result$data2$data$at.names_required) != null ? _result$data$data$att3 : false;
               ageIsRequired = (_result$data$data$att4 = result == null ? void 0 : (_result$data3 = result.data) == null ? void 0 : (_result$data3$data = _result$data3.data) == null ? void 0 : (_result$data3$data$at = _result$data3$data.attributes) == null ? void 0 : _result$data3$data$at.age_required) != null ? _result$data$data$att4 : false;
               phoneIsRequired = (_result$data$data$att5 = result == null ? void 0 : (_result$data4 = result.data) == null ? void 0 : (_result$data4$data = _result$data4.data) == null ? void 0 : (_result$data4$data$at = _result$data4$data.attributes) == null ? void 0 : _result$data4$data$at.phone_required) != null ? _result$data$data$att5 : false;
               hash = '';
+              total = '';
 
               if (!skipBillingPage) {
-                _context.next = 26;
+                _context.next = 27;
                 break;
               }
 
@@ -4844,40 +5027,42 @@ var TicketsContainer = function TicketsContainer(_ref) {
             case 24:
               checkoutResult = _context.sent;
               hash = _get(checkoutResult, 'data.data.attributes.hash');
+              total = _get(checkoutResult, 'data.data.attributes.total');
 
-            case 26:
+            case 27:
               onAddToCartSuccess({
                 skip_billing_page: skipBillingPage,
                 names_required: nameIsRequired,
                 phone_required: phoneIsRequired,
                 age_required: ageIsRequired,
                 event_id: String(eventId),
-                hash: hash
+                hash: hash,
+                total: total
               });
 
-            case 27:
-              _context.next = 32;
+            case 28:
+              _context.next = 33;
               break;
 
-            case 29:
-              _context.prev = 29;
+            case 30:
+              _context.prev = 30;
               _context.t0 = _context["catch"](6);
 
               if (axios.isAxiosError(_context.t0)) {
                 onAddToCartError(_context.t0);
               }
 
-            case 32:
-              _context.prev = 32;
+            case 33:
+              _context.prev = 33;
               setHandleBookIsLoading(false);
-              return _context.finish(32);
+              return _context.finish(33);
 
-            case 35:
+            case 36:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[6, 29, 32, 35]]);
+      }, _callee, null, [[6, 30, 33, 36]]);
     }));
 
     return function handleBook() {
@@ -4885,14 +5070,10 @@ var TicketsContainer = function TicketsContainer(_ref) {
     };
   }();
 
-  var updateTickets = function updateTickets() {
-    getTicketsApi();
+  var updateTickets = function updateTickets(isUpdateingCode) {
+    getTicketsApi(isUpdateingCode);
   };
 
-  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;
   });
@@ -4926,9 +5107,15 @@ var TicketsContainer = function TicketsContainer(_ref) {
   };
 
   var bookButtonIsDisabled = handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0;
+  var wrappedActionsSectionComponent = React.isValidElement(ActionsSectionComponent) ? React.cloneElement(ActionsSectionComponent, {
+    handleGetTicketClick: handleGetTicketClick,
+    isTicketOnSale: isTicketOnSale
+  }) : null;
+  var externalUrl = event == null ? void 0 : event.redirectUrl;
+  var eventSaleIsNotStarted = !(event != null && event.salesStarted) && (event == null ? void 0 : event.salesStart);
   return React.createElement(ThemeProvider$1, {
     theme: themeMui
-  }, React.createElement(ReferralLogic, {
+  }, !isLoading && React.createElement(ReferralLogic, {
     eventId: eventId
   }), React.createElement("div", {
     className: "get-tickets-page " + theme,
@@ -4939,32 +5126,37 @@ var TicketsContainer = function TicketsContainer(_ref) {
     ticketsList: tickets,
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
-    promoCodeIsApplied: promoCodeIsApplied
-  }), 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, {
+    codeIsApplied: codeIsApplied,
+    sortBySoldOut: sortBySoldOut,
+    ticketsHeaderComponent: ticketsHeaderComponent,
+    hideTicketsHeader: hideTicketsHeader || _isEmpty(tickets)
+  }), externalUrl ? null : event != null && event.salesEnded ? React.createElement("p", {
+    className: "event-closed-message " + (!isLoggedIn ? 'event-closed-on-bottom' : '')
+  }, "Sales for this event are closed.") : eventSaleIsNotStarted ? React.createElement(Countdown, {
     startDate: event.salesStart,
     timezone: event.timezone,
     title: "Sales start in:",
     message: "No tickets are currently available for this event.",
-    callback: updateTickets
+    callback: updateTickets,
+    disableLeadingZero: disableCountdownLeadingZero,
+    isLoggedIn: isLoggedIn
   }) : null, showWaitingList && event.salesStarted && !hideWaitingList && React.createElement(WaitingList, {
     tickets: tickets,
     eventId: eventId
-  }), React.createElement(PromoCodeSection, {
-    promoCode: promoCode,
-    promoCodeIsApplied: promoCodeIsApplied,
+  }), codeIsLoading ? React.createElement(Loader, null) : showAccessCodeSection ? React.createElement(AccessCodeSection, {
+    code: code,
+    setCode: setCode,
+    updateTickets: updateTickets
+  }) : showPromoCodeSection ? React.createElement(PromoCodeSection, {
+    code: code,
+    codeIsApplied: codeIsApplied,
     showPromoInput: showPromoInput,
-    setPromoCode: setPromoCode,
-    setPromoCodeUpdated: setPromoCodeUpdated,
     setShowPromoInput: setShowPromoInput,
-    isPromotionsEnabled: isPromotionsEnabled,
-    isAccessCodeEnabled: isAccessCodeEnabled,
-    isAllTicketsSoldOut: isAllTicketsSoldOut,
-    isPromoLoading: isPromoLoading
-  }), (isTicketOnSale || !(event != null && event.salesEnded)) && React.createElement(Button$1, {
+    setCode: setCode,
+    updateTickets: updateTickets
+  }) : null, wrappedActionsSectionComponent, !wrappedActionsSectionComponent && !eventSaleIsNotStarted && isTicketOnSale && !(event != null && event.salesEnded) && !externalUrl && React.createElement(Button$1, {
     "aria-hidden": true,
-    className: "book-button \n                  " + (bookButtonIsDisabled ? 'disabled' : '') + "  \n                  " + (isButtonScrollable ? 'is-scrollable' : '') + "\n                ",
+    className: "book-button \n                  " + (bookButtonIsDisabled ? 'disabled' : '') + "  \n                  " + (isButtonScrollable ? 'is-scrollable' : '') + "\n                  " + (!isLoggedIn ? 'on-bottom' : '') + "\n                ",
     onClick: handleGetTicketClick
   }, getTicketsLabel || 'GET TICKETS'), isLogged && !hideSessionButtons ? React.createElement("div", {
     className: "session-wrapper"
@@ -5258,7 +5450,7 @@ 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("span", {
+    }, 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, ticket.status !== "Sold" && React.createElement("span", {
       "aria-hidden": true,
       className: "action-button",
       onClick: function onClick() {
@@ -5364,7 +5556,8 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
       holder_name = ticket.holder_name,
       event_name = ticket.event_name,
       currency = ticket.currency,
-      resale_fee_amount = ticket.resale_fee_amount;
+      resale_fee_amount = ticket.resale_fee_amount,
+      ticket_type_is_active = ticket.ticket_type_is_active;
   return React.createElement(Modal, {
     open: true,
     onClose: onClose,
@@ -5437,7 +5630,7 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
       label: 'Confirm Email address',
       type: 'text',
       component: CustomField
-    }))))), React.createElement("div", null, React.createElement(Field, {
+    }))))), ticket_type_is_active && React.createElement("div", null, React.createElement(Field, {
       name: 'to',
       label: 'I will sell my ticket to anyone who wants to buy it',
       type: 'radio',
@@ -5576,7 +5769,15 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   }, []);
 
   var handleSellTicket = function handleSellTicket(ticket) {
-    setActiveTicket(ticket);
+    var ticketTypesArr = data.items.ticket_types;
+
+    var sellTicketType = _find(ticketTypesArr, function (ticketType) {
+      return ticketType.hash === ticket.ticket_type_hash;
+    });
+
+    setActiveTicket(_extends({}, ticket, {
+      ticket_type_is_active: sellTicketType == null ? void 0 : sellTicketType.active
+    }));
     setShowResaleModal(true);
   };
 
@@ -5755,81 +5956,294 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
 };
 
 var TicketResaleContainer = function TicketResaleContainer(_ref) {
-  var _ref$onCheckTicketSta = _ref.onCheckTicketStatusSuccess,
-      onCheckTicketStatusSuccess = _ref$onCheckTicketSta === void 0 ? function () {} : _ref$onCheckTicketSta,
-      _ref$onCheckTicketSta2 = _ref.onCheckTicketStatusError,
-      onCheckTicketStatusError = _ref$onCheckTicketSta2 === void 0 ? function () {} : _ref$onCheckTicketSta2,
+  var _ref$onProcessTicketS = _ref.onProcessTicketSuccess,
+      onProcessTicketSuccess = _ref$onProcessTicketS === void 0 ? function () {} : _ref$onProcessTicketS,
+      _ref$onProcessTicketE = _ref.onProcessTicketError,
+      onProcessTicketError = _ref$onProcessTicketE === void 0 ? function () {} : _ref$onProcessTicketE,
+      _ref$onDeclineTicketP = _ref.onDeclineTicketPurchaseSuccess,
+      onDeclineTicketPurchaseSuccess = _ref$onDeclineTicketP === void 0 ? function () {} : _ref$onDeclineTicketP,
+      _ref$onDeclineTicketP2 = _ref.onDeclineTicketPurchaseError,
+      onDeclineTicketPurchaseError = _ref$onDeclineTicketP2 === void 0 ? function () {} : _ref$onDeclineTicketP2,
       orderHash = _ref.orderHash;
   var isWindowDefined = typeof window !== 'undefined';
 
-  var _useState = useState(null),
+  var _useState = useState(''),
       error = _useState[0],
       setError = _useState[1];
 
+  var _useState2 = useState(''),
+      successMessage = _useState2[0],
+      setSuccessMessage = _useState2[1];
+
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var params, hash, response, data, age_required, names_required, event_id, _error$response, _error$response$data;
+      var params, hash, isDeclined, response, _error$response, _error$response$data, _response, data, age_required, names_required, event_id, _error$response2, _error$response2$data;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               if (!isWindowDefined) {
-                _context.next = 24;
+                _context.next = 38;
                 break;
               }
 
               params = new URL("" + window.location).searchParams;
-              hash = params.get('o') || orderHash || null;
+              hash = params.get('invitation_hash') || orderHash || null;
+              isDeclined = params.get('decline') || false;
 
               if (!hash) {
-                _context.next = 23;
+                _context.next = 37;
                 break;
               }
 
-              _context.prev = 4;
-              _context.next = 7;
-              return checkTicketStatus(hash);
+              if (!isDeclined) {
+                _context.next = 19;
+                break;
+              }
 
-            case 7:
+              _context.prev = 6;
+              _context.next = 9;
+              return declineInvitation(hash);
+
+            case 9:
               response = _context.sent;
-              data = _get(response, 'data.data.attributes');
+              onDeclineTicketPurchaseSuccess(response);
+              setSuccessMessage("Thanks for letting us know! We'll offer this ticket to someone else!");
+              _context.next = 18;
+              break;
+
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](6);
+              setError(_context.t0 == null ? void 0 : (_error$response = _context.t0.response) == null ? void 0 : (_error$response$data = _error$response.data) == null ? void 0 : _error$response$data.message);
+              onDeclineTicketPurchaseError(_context.t0.response);
+
+            case 18:
+              return _context.abrupt("return");
+
+            case 19:
+              _context.prev = 19;
+              _context.next = 22;
+              return processTicket(hash);
+
+            case 22:
+              _response = _context.sent;
+              data = _get(_response, 'data.data.attributes');
               age_required = _get(data, 'age_required', false);
               names_required = _get(data, 'names_required', false);
               event_id = _get(data, 'event_id');
-              onCheckTicketStatusSuccess(response.data);
+              onProcessTicketSuccess(_response.data);
               window.location.href = "/billing/billing-info/?age_required=" + age_required + "&names_required=" + names_required + "&event_id=" + event_id;
-              _context.next = 21;
+              _context.next = 35;
               break;
 
-            case 16:
-              _context.prev = 16;
-              _context.t0 = _context["catch"](4);
-              console.log(_context.t0);
-              setError(_context.t0 == null ? void 0 : (_error$response = _context.t0.response) == null ? void 0 : (_error$response$data = _error$response.data) == null ? void 0 : _error$response$data.message);
-              onCheckTicketStatusError(_context.t0.response);
+            case 31:
+              _context.prev = 31;
+              _context.t1 = _context["catch"](19);
+              setError(_context.t1 == null ? void 0 : (_error$response2 = _context.t1.response) == null ? void 0 : (_error$response2$data = _error$response2.data) == null ? void 0 : _error$response2$data.message);
+              onProcessTicketError(_context.t1.response);
 
-            case 21:
-              _context.next = 24;
+            case 35:
+              _context.next = 38;
               break;
 
-            case 23:
+            case 37:
               window.location.href = '/';
 
-            case 24:
+            case 38:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 16]]);
+      }, _callee, null, [[6, 14], [19, 31]]);
     }))();
   }, []);
   return React.createElement("div", {
     className: "ticket-resale-page"
   }, React.createElement("div", {
-    className: "error-block"
-  }, React.createElement("h3", null, error)));
+    className: "" + (successMessage ? 'success-block' : 'error-block')
+  }, React.createElement("h3", null, successMessage ? successMessage : error)));
+};
+
+var style$3 = {
+  position: 'absolute',
+  top: '10%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px',
+  maxHeight: '85vh',
+  overflow: 'auto'
+};
+var RedirectModal = function RedirectModal(_ref) {
+  var _ref$message = _ref.message,
+      message = _ref$message === void 0 ? 'Your cart has expired. Please click on "OK" to return to the ticket selection page.' : _ref$message,
+      _ref$onClickOk = _ref.onClickOk,
+      onClickOk = _ref$onClickOk === void 0 ? function () {} : _ref$onClickOk;
+  return React.createElement(Modal, {
+    open: true,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "redirect-modal"
+  }, React.createElement(Box, {
+    style: style$3
+  }, React.createElement("p", null, message), React.createElement("div", {
+    className: "footer"
+  }, React.createElement("button", {
+    onClick: onClickOk
+  }, "OK"))));
+};
+
+var style$4 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px',
+  maxHeight: '85vh',
+  overflow: 'auto'
+};
+var RsvpContainer = function RsvpContainer(_ref) {
+  var _ref$showSection = _ref.showSection,
+      showSection = _ref$showSection === void 0 ? false : _ref$showSection,
+      eventId = _ref.eventId;
+  var userDataEncoded = typeof window !== 'undefined' ? window.localStorage.getItem('user_data') : '';
+  var parsedData = JSON.parse(userDataEncoded || '{}');
+
+  var _useState = useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
+
+  var _useState2 = useState({
+    isOpen: false,
+    text: ''
+  }),
+      modal = _useState2[0],
+      setModal = _useState2[1];
+
+  var handleModalClose = function handleModalClose() {
+    setModal({
+      isOpen: false,
+      text: ''
+    });
+  };
+
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
+      var requestData, _yield$sendRSVPInfo, data, _error$response$data;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              requestData = {
+                data: {
+                  email: values.email
+                }
+              };
+              _context.next = 5;
+              return sendRSVPInfo(eventId, requestData);
+
+            case 5:
+              _yield$sendRSVPInfo = _context.sent;
+              data = _yield$sendRSVPInfo.data;
+              setModal({
+                isOpen: true,
+                text: data.message
+              });
+              _context.next = 13;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](0);
+
+              if (_context.t0.response.status === 403) {
+                setModal({
+                  isOpen: true,
+                  text: (_error$response$data = _context.t0.response.data) == null ? void 0 : _error$response$data.message
+                });
+              }
+
+            case 13:
+              _context.prev = 13;
+              setLoading(false);
+              return _context.finish(13);
+
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 10, 13, 16]]);
+    }));
+
+    return function handleSubmit(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  if (!showSection) {
+    return null;
+  }
+
+  return React.createElement(React.Fragment, null, React.createElement(Modal, {
+    open: modal.isOpen,
+    onClose: handleModalClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "rsvp-modal"
+  }, React.createElement(Box, {
+    style: style$4,
+    className: "rsvp-modal-box"
+  }, React.createElement("div", {
+    className: "rsvp-modal-container"
+  }, React.createElement("div", {
+    className: "rsvp-modal-header"
+  }, modal.text), React.createElement("div", {
+    className: "rsvp-modal-button"
+  }, React.createElement("button", {
+    onClick: handleModalClose
+  }, "OK"))))), React.createElement("div", {
+    className: "rsvp-container"
+  }, loading ? React.createElement(Loader, null) : React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "rsvp-header"
+  }, "RSVP"), React.createElement("div", {
+    className: "rsvp-email-container"
+  }, React.createElement(Formik, {
+    initialValues: {
+      email: (parsedData == null ? void 0 : parsedData.email) || ''
+    },
+    onSubmit: handleSubmit,
+    enableReinitialize: true
+  }, React.createElement(Form, null, React.createElement("div", {
+    className: "rsvp-email-input-container"
+  }, React.createElement(Field, {
+    name: "email",
+    label: "EMAIL ADDRESS",
+    type: "email",
+    validate: combineValidators(function (value) {
+      return requiredValidator(value, 'Please enter your Email');
+    }, function (value) {
+      return emailValidator(value);
+    }),
+    component: CustomField
+  })), React.createElement("div", {
+    className: "rsvp-button-container"
+  }, React.createElement(Button, {
+    type: "submit"
+  }, "RSVP"))))))));
 };
 
-export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, TicketResaleContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
+export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, RedirectModal, RsvpContainer, TicketResaleContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
 //# sourceMappingURL=tf-checkout-react.esm.js.map