tf-checkout-react 1.0.96 → 1.0.98

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

@@ -9,23 +9,23 @@ import _isEqual from 'lodash-es/isEqual';
 import _isEmpty from 'lodash-es/isEmpty';
 import axios from 'axios';
 import _forEach from 'lodash-es/forEach';
-import { TextField, FormControl, FormHelperText, InputLabel, CircularProgress, Alert, createTheme as createTheme$1 } from '@mui/material';
+import { TextField, FormControl, FormHelperText, InputLabel, CircularProgress as CircularProgress$1, Alert, 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';
 import _isArray from 'lodash-es/isArray';
 import { nanoid } from 'nanoid';
-import TextField$1 from '@mui/material/TextField';
-import { useTheme } from '@mui/styles';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import Select from '@mui/material/Select';
+import { useTheme } from '@mui/styles';
+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 Backdrop from '@mui/material/Backdrop';
 import Container from '@mui/material/Container';
-import CircularProgress$1 from '@mui/material/CircularProgress';
 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';
@@ -53,6 +53,8 @@ import Paper from '@mui/material/Paper';
 import TablePagination from '@mui/material/TablePagination';
 import Autocomplete from '@mui/material/Autocomplete';
 import _has from 'lodash-es/has';
+import { object, string, ref, boolean } from 'yup';
+import Radio from '@mui/material/Radio';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1248,13 +1250,13 @@ var postOnCheckout = function postOnCheckout(data, accessToken) {
   return res;
 };
 var authorize = function authorize(data) {
-  return publicRequest.post("/v1/oauth/authorize-rn?client_id=" + (CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'), data);
+  return publicRequest.post("v1/oauth/authorize-rn?client_id=" + (CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'), data);
 };
 var register = function register(data) {
-  return publicRequest.post('/v1/oauth/register-rn', data);
+  return publicRequest.post('v1/oauth/register-rn', data);
 };
 var getAccessToken = function getAccessToken(data) {
-  return publicRequest.post('/v1/oauth/access_token', data);
+  return publicRequest.post('v1/oauth/access_token', data);
 };
 var getPaymentData = function getPaymentData(hash) {
   var response = publicRequest.get("v1/order/" + hash + "/review/")["catch"](function (error) {
@@ -1287,28 +1289,38 @@ var getCountries = function getCountries() {
   return publicRequest.get('/countries/');
 };
 var getConfirmationData = function getConfirmationData(orderHash) {
-  return publicRequest.get("/v1/order/" + orderHash + "/payment/complete");
+  return publicRequest.get("v1/order/" + orderHash + "/payment/complete");
 };
 var getStates = function getStates(countryId) {
   return publicRequest.get("/countries/" + countryId + "/states/");
 };
 var getOrders = function getOrders(page, limit, eventSlug) {
-  return publicRequest.get("/v1/account/orders/?page=" + page + "&limit=" + limit + "&filter[event]=" + eventSlug + "&filter[brand]=" + CONFIGS.BRAND_SLUG);
+  return publicRequest.get("v1/account/orders/?page=" + page + "&limit=" + limit + "&filter[event]=" + eventSlug + "&filter[brand]=" + CONFIGS.BRAND_SLUG);
 };
 var getOrderDetails = function getOrderDetails(orderId) {
-  return publicRequest.get("/v1/account/order/" + orderId);
+  return publicRequest.get("v1/account/order/" + orderId);
 };
 var addToWaitingList = function addToWaitingList(id, data) {
-  return publicRequest.post("/v1/event/" + id + "/add_to_waiting_list", data);
+  return publicRequest.post("v1/event/" + id + "/add_to_waiting_list", data);
 };
 var getConditions = function getConditions(eventId) {
   return publicRequest.get("v1/event/" + eventId + "/conditions");
+}; // resale
+
+var resaleTicket = function resaleTicket(data, hash) {
+  return publicRequest.post("v1/ticket/" + hash + "/sell", data);
+};
+var removeFromResale = function removeFromResale(hash) {
+  return publicRequest["delete"]("v1/ticket/" + hash + "/sell");
 };
 var postReferralVisits = function postReferralVisits(eventId, referralId) {
-  return publicRequest.post("/v1/event/" + eventId + "/referrer/", {
+  return publicRequest.post("v1/event/" + eventId + "/referrer/", {
     referrer: "" + referralId
   });
 };
+var checkTicketStatus = function checkTicketStatus(hash) {
+  return publicRequest.post("v1/ticket/" + hash + "/status/");
+};
 
 var style = {
   position: 'absolute',
@@ -1911,6 +1923,26 @@ var assingUniqueIds = function assingUniqueIds(data) {
   });
 };
 
+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(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 CustomField = function CustomField(_ref) {
   var label = _ref.label,
       _ref$type = _ref.type,
@@ -1960,76 +1992,6 @@ var CustomField = function CustomField(_ref) {
   }) : null);
 };
 
-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(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) {
-  var label = _ref.label,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      field = _ref.field,
-      _ref$selectOptions = _ref.selectOptions,
-      selectOptions = _ref$selectOptions === void 0 ? [] : _ref$selectOptions,
-      _ref$form = _ref.form,
-      touched = _ref$form.touched,
-      errors = _ref$form.errors,
-      theme = _ref.theme;
-  var isTouched = Boolean(_get(touched, field.name));
-
-  var error = _get(errors, field.name);
-
-  var customTheme = useTheme();
-  return React.createElement(FormControl, {
-    fullWidth: true
-  }, React.createElement(InputLabel, {
-    style: customTheme == null ? void 0 : customTheme.input,
-    htmlFor: field.name,
-    error: !!error && isTouched,
-    shrink: true
-  }, label), React.createElement(Select, Object.assign({
-    id: field.name,
-    label: label,
-    type: type,
-    fullWidth: true,
-    error: !!error && isTouched,
-    inputProps: {
-      id: field.name
-    },
-    "native": true,
-    className: theme,
-    MenuProps: {
-      className: theme
-    }
-  }, field, {
-    style: customTheme == null ? void 0 : customTheme.input
-  }), _map(selectOptions, function (option) {
-    return React.createElement("option", {
-      key: option.value,
-      value: option.value,
-      disabled: option.disabled
-    }, option.label);
-  })), isTouched && error ? React.createElement(FormHelperText, {
-    error: !!error && isTouched
-  }, error) : null);
-};
-
 var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
   return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
 };
@@ -2142,6 +2104,62 @@ var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
   }, rest));
 };
 
+function Loader() {
+  return React.createElement("div", {
+    className: "loader-container"
+  }, React.createElement(CircularProgress, null));
+}
+
+var SelectField = function SelectField(_ref) {
+  var label = _ref.label,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      field = _ref.field,
+      _ref$selectOptions = _ref.selectOptions,
+      selectOptions = _ref$selectOptions === void 0 ? [] : _ref$selectOptions,
+      _ref$form = _ref.form,
+      touched = _ref$form.touched,
+      errors = _ref$form.errors,
+      theme = _ref.theme;
+  var isTouched = Boolean(_get(touched, field.name));
+
+  var error = _get(errors, field.name);
+
+  var customTheme = useTheme();
+  return React.createElement(FormControl, {
+    fullWidth: true
+  }, React.createElement(InputLabel, {
+    style: customTheme == null ? void 0 : customTheme.input,
+    htmlFor: field.name,
+    error: !!error && isTouched,
+    shrink: true
+  }, label), React.createElement(Select, Object.assign({
+    id: field.name,
+    label: label,
+    type: type,
+    fullWidth: true,
+    error: !!error && isTouched,
+    inputProps: {
+      id: field.name
+    },
+    "native": true,
+    className: theme,
+    MenuProps: {
+      className: theme
+    }
+  }, field, {
+    style: customTheme == null ? void 0 : customTheme.input
+  }), _map(selectOptions, function (option) {
+    return React.createElement("option", {
+      key: option.value,
+      value: option.value,
+      disabled: option.disabled
+    }, option.label);
+  })), isTouched && error ? React.createElement(FormHelperText, {
+    error: !!error && isTouched
+  }, error) : null);
+};
+
 var LogicRunner = function LogicRunner(_ref) {
   var values = _ref.values,
       setStates = _ref.setStates,
@@ -2661,7 +2679,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
         color: '#fff'
       },
       open: true
-    }, React.createElement(CircularProgress, {
+    }, React.createElement(CircularProgress$1, {
       color: "inherit"
     }));
   }
@@ -2949,7 +2967,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       variant: "contained",
       className: "login-register-button",
       disabled: props.isSubmitting
-    }, props.isSubmitting ? React.createElement(CircularProgress, {
+    }, props.isSubmitting ? React.createElement(CircularProgress$1, {
       size: 26
     }) : buttonName))));
   }), showModalLogin && React.createElement(LoginModal, {
@@ -3250,7 +3268,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("button", {
     disabled: buttonIsDiabled,
     type: "submit"
-  }, isLoading ? React.createElement(CircularProgress$1, {
+  }, isLoading ? React.createElement(CircularProgress, {
     size: 26
   }) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
 };
@@ -3328,12 +3346,6 @@ var getStripePromise = function getStripePromise(reviewData) {
   return loadStripe(stripePublishableKey, options);
 };
 
-function Loader() {
-  return React.createElement("div", {
-    className: "loader-container"
-  }, React.createElement(CircularProgress$1, null));
-}
-
 var initialOrderValues = {
   product_name: '',
   ticketType: '',
@@ -3643,7 +3655,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     onClick: function onClick() {
       handlePaymentMiddleWare(null);
     }
-  }, paymentIsLoading ? React.createElement(CircularProgress$1, {
+  }, paymentIsLoading ? React.createElement(CircularProgress, {
     size: 26
   }) : "Complete Registration")))));
 };
@@ -4280,7 +4292,7 @@ var WaitingList = function WaitingList(_ref) {
     type: "submit",
     variant: "contained",
     className: "waiting-list-button"
-  }, loading ? React.createElement(CircularProgress$1, {
+  }, loading ? React.createElement(CircularProgress, {
     size: "22px"
   }) : 'ADD TO WAITING LIST')))));
 };
@@ -4312,7 +4324,8 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       setPromoCode = _ref.setPromoCode,
       setPromoCodeUpdated = _ref.setPromoCodeUpdated,
       setShowPromoInput = _ref.setShowPromoInput,
-      isAccessCodeEnabled = _ref.isAccessCodeEnabled;
+      isAccessCodeEnabled = _ref.isAccessCodeEnabled,
+      isPromoLoading = _ref.isPromoLoading;
   var isPromoCodeHasValue = !!promoCode.trim();
 
   var renderInputField = function renderInputField() {
@@ -4345,7 +4358,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
     }, isAccessCodeEnabled ? 'ENTER' : 'APPLY'));
   };
 
-  return React.createElement("div", null, promoCodeIsApplied ? React.createElement("div", {
+  return isPromoLoading ? React.createElement(Loader, null) : React.createElement("div", null, promoCodeIsApplied ? React.createElement("div", {
     className: "alert-info"
   }, React.createElement(SVG, {
     src: getImage('done.svg'),
@@ -4482,12 +4495,6 @@ var ReferralLogic = function ReferralLogic(props) {
   return null;
 };
 
-function Loader$1() {
-  return React.createElement("div", {
-    className: "loader-container"
-  }, React.createElement(CircularProgress$1, null));
-}
-
 var TicketsContainer = function TicketsContainer(_ref) {
   var onLoginSuccess = _ref.onLoginSuccess,
       getTicketsLabel = _ref.getTicketsLabel,
@@ -4546,24 +4553,28 @@ var TicketsContainer = function TicketsContainer(_ref) {
       setIsLoading = _useState6[1];
 
   var _useState7 = useState(false),
-      handleBookIsLoading = _useState7[0],
-      setHandleBookIsLoading = _useState7[1];
+      isPromoLoading = _useState7[0],
+      setIsPromoLoading = _useState7[1];
 
-  var _useState8 = useState(''),
-      promoCode = _useState8[0],
-      setPromoCode = _useState8[1];
+  var _useState8 = useState(false),
+      handleBookIsLoading = _useState8[0],
+      setHandleBookIsLoading = _useState8[1];
 
-  var _useState9 = useState(getQueryVariable('r') || queryPromoCode),
-      promoCodeUpdated = _useState9[0],
-      setPromoCodeUpdated = _useState9[1];
+  var _useState9 = useState(''),
+      promoCode = _useState9[0],
+      setPromoCode = _useState9[1];
 
-  var _useState10 = useState(false),
-      showPromoInput = _useState10[0],
-      setShowPromoInput = _useState10[1];
+  var _useState10 = useState(getQueryVariable('r') || queryPromoCode),
+      promoCodeUpdated = _useState10[0],
+      setPromoCodeUpdated = _useState10[1];
 
   var _useState11 = useState(false),
-      promoCodeIsApplied = _useState11[0],
-      setPromoCodeIsApplied = _useState11[1];
+      showPromoInput = _useState11[0],
+      setShowPromoInput = _useState11[1];
+
+  var _useState12 = useState(false),
+      promoCodeIsApplied = _useState12[0],
+      setPromoCodeIsApplied = _useState12[1];
 
   useEffect(function () {
     if (typeof window !== 'undefined') {
@@ -4580,7 +4591,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     }
   }, []);
   useEffect(function () {
-    !!eventId && getTicketsApi();
+    !!eventId && getTicketsApi(!!promoCodeUpdated);
   }, [eventId, promoCodeUpdated]);
 
   var handleLogout = function handleLogout() {
@@ -4612,12 +4623,12 @@ var TicketsContainer = function TicketsContainer(_ref) {
     }
   };
 
-  function getTicketsApi() {
+  function getTicketsApi(_x) {
     return _getTicketsApi.apply(this, arguments);
   }
 
   function _getTicketsApi() {
-    _getTicketsApi = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+    _getTicketsApi = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(isUpdateingPromoCode) {
       var response, eventResponse, attributes, _event2;
 
       return runtime_1.wrap(function _callee2$(_context2) {
@@ -4625,16 +4636,17 @@ var TicketsContainer = function TicketsContainer(_ref) {
           switch (_context2.prev = _context2.next) {
             case 0:
               _context2.prev = 0;
-              setIsLoading(true);
-              _context2.next = 4;
+              !isUpdateingPromoCode && setIsLoading(true);
+              setIsPromoLoading(true);
+              _context2.next = 5;
               return getTickets(eventId, promoCodeUpdated);
 
-            case 4:
+            case 5:
               response = _context2.sent;
-              _context2.next = 7;
+              _context2.next = 8;
               return getEvent(eventId);
 
-            case 7:
+            case 8:
               eventResponse = _context2.sent;
 
               if (response.data.success) {
@@ -4652,28 +4664,29 @@ var TicketsContainer = function TicketsContainer(_ref) {
                 setEvent(_event2);
               }
 
-              _context2.next = 15;
+              _context2.next = 16;
               break;
 
-            case 12:
-              _context2.prev = 12;
+            case 13:
+              _context2.prev = 13;
               _context2.t0 = _context2["catch"](0);
 
               if (axios.isAxiosError(_context2.t0)) {
                 onGetTicketsError(_context2.t0);
               }
 
-            case 15:
-              _context2.prev = 15;
+            case 16:
+              _context2.prev = 16;
               setIsLoading(false);
-              return _context2.finish(15);
+              setIsPromoLoading(false);
+              return _context2.finish(16);
 
-            case 18:
+            case 20:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[0, 12, 15, 18]]);
+      }, _callee2, null, [[0, 13, 16, 20]]);
     }));
     return _getTicketsApi.apply(this, arguments);
   }
@@ -4831,7 +4844,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }), React.createElement("div", {
     className: "get-tickets-page " + theme,
     style: contentStyle
-  }, isLoading ? React.createElement(Loader$1, null) : React.createElement("div", null, React.createElement(TicketsSection, {
+  }, isLoading ? React.createElement(Loader, null) : React.createElement("div", null, React.createElement(TicketsSection, {
     ticketsList: tickets,
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
@@ -4856,7 +4869,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
     setShowPromoInput: setShowPromoInput,
     isPromotionsEnabled: isPromotionsEnabled,
     isAccessCodeEnabled: isAccessCodeEnabled,
-    isAllTicketsSoldOut: isAllTicketsSoldOut
+    isAllTicketsSoldOut: isAllTicketsSoldOut,
+    isPromoLoading: isPromoLoading
   }), (isTicketOnSale || !(event != null && event.salesEnded)) && React.createElement(Button$1, {
     "aria-hidden": true,
     className: "book-button " + (handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0 ? 'disabled' : ''),
@@ -5040,7 +5054,7 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     className: "my-ticket " + theme
   }, loading && React.createElement("div", {
     className: "loading"
-  }, React.createElement(CircularProgress$1, null)), data && React.createElement(React.Fragment, null, React.createElement(Autocomplete, {
+  }, React.createElement(CircularProgress, null)), data && React.createElement(React.Fragment, null, React.createElement(Autocomplete, {
     disablePortal: true,
     id: "combo-box-demo",
     getOptionLabel: function getOptionLabel(option) {
@@ -5084,7 +5098,11 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
 
 var TicketsTable = function TicketsTable(_ref) {
   var _ref$tickets = _ref.tickets,
-      tickets = _ref$tickets === void 0 ? [] : _ref$tickets;
+      tickets = _ref$tickets === void 0 ? [] : _ref$tickets,
+      _ref$handleSellTicket = _ref.handleSellTicket,
+      handleSellTicket = _ref$handleSellTicket === void 0 ? function () {} : _ref$handleSellTicket,
+      _ref$handleRemoveFrom = _ref.handleRemoveFromResale,
+      handleRemoveFromResale = _ref$handleRemoveFrom === void 0 ? function () {} : _ref$handleRemoveFrom;
   return React.createElement("div", {
     className: "tickets-box"
   }, React.createElement("h4", {
@@ -5093,19 +5111,31 @@ var TicketsTable = function TicketsTable(_ref) {
     component: Paper
   }, React.createElement(Table, {
     "aria-label": "collapsible table"
-  }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null, "Ticket ID"), React.createElement(TableCell, null, "Ticket Type"), React.createElement(TableCell, null, "Ticket Holder Name"), React.createElement(TableCell, null, "Status"), React.createElement(TableCell, null, "Download"))), React.createElement(TableBody, null, tickets.map(function (ticket, index) {
+  }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null, "Ticket ID"), React.createElement(TableCell, null, "Ticket Type"), React.createElement(TableCell, null, "Ticket Holder Name"), React.createElement(TableCell, null, "Status"), React.createElement(TableCell, null, "Download"), React.createElement(TableCell, null))), React.createElement(TableBody, null, tickets.map(function (ticket, index) {
     var _ticket$add_ons;
 
     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", {
       "aria-hidden": true,
-      className: "download-button",
+      className: "action-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
+    }, "Download")), React.createElement(TableCell, null, ticket.is_sellable && React.createElement("span", {
+      "aria-hidden": true,
+      className: "action-button",
+      onClick: function onClick() {
+        return handleSellTicket(ticket);
+      }
+    }, "Sell Ticket"), ticket.is_on_sale && React.createElement("span", {
+      "aria-hidden": true,
+      className: "action-button",
+      onClick: function onClick() {
+        return handleRemoveFromResale(ticket);
+      }
+    }, "Remove from Resale"))), !!((_ticket$add_ons = ticket.add_ons) != null && _ticket$add_ons.length) && React.createElement(TableRow, null, React.createElement(TableCell, {
+      colSpan: 6
     }, React.createElement(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) {
@@ -5116,13 +5146,220 @@ var TicketsTable = function TicketsTable(_ref) {
   })))));
 };
 
+var _excluded$3 = ["label", "field", "theme"];
+var RadioField = function RadioField(_ref) {
+  var label = _ref.label,
+      field = _ref.field,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
+  var customTheme = useTheme();
+  return React.createElement(FormGroup, null, React.createElement(FormControlLabel, {
+    control: React.createElement(Radio, Object.assign({}, field, rest)),
+    label: label,
+    componentsProps: {
+      typography: customTheme == null ? void 0 : customTheme.checkbox
+    }
+  }));
+};
+
+var style$1 = {
+  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 schema = /*#__PURE__*/object().shape({
+  to: /*#__PURE__*/string().required(),
+  first_name: /*#__PURE__*/string().when('to', {
+    is: function is(to) {
+      return to === 'friend';
+    },
+    then: /*#__PURE__*/string().required('First Name is required')
+  }),
+  last_name: /*#__PURE__*/string().when('to', {
+    is: function is(to) {
+      return to === 'friend';
+    },
+    then: /*#__PURE__*/string().required('Last Name is required')
+  }),
+  email: /*#__PURE__*/string().when('to', {
+    is: function is(to) {
+      return to === 'friend';
+    },
+    then: /*#__PURE__*/string().email('Invalid email').required('Email is required')
+  }),
+  confirm_email: /*#__PURE__*/string().when('to', {
+    is: function is(to) {
+      return to === 'friend';
+    },
+    then: /*#__PURE__*/string().email('Invalid email').oneOf([ref('email'), null], 'Emails must match').required('Confirm Email is required')
+  }),
+  confirm: /*#__PURE__*/boolean().oneOf([true])
+});
+var initialValues = {
+  to: 'friend',
+  first_name: '',
+  last_name: '',
+  email: '',
+  confirm_email: '',
+  confirm: false
+};
+var TicketResaleModal = function TicketResaleModal(_ref) {
+  var _ref$ticket = _ref.ticket,
+      ticket = _ref$ticket === void 0 ? {} : _ref$ticket,
+      _ref$onClose = _ref.onClose,
+      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+      _ref$onSubmit = _ref.onSubmit,
+      onSubmit = _ref$onSubmit === void 0 ? function () {} : _ref$onSubmit;
+  var hash = ticket.hash,
+      holder_name = ticket.holder_name,
+      event_name = ticket.event_name,
+      currency = ticket.currency,
+      resale_fee_amount = ticket.resale_fee_amount;
+  return React.createElement(Modal, {
+    open: true,
+    onClose: onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: 'resale-modal'
+  }, React.createElement(Box, {
+    style: style$1
+  }, React.createElement("h3", null, "Sell Ticket"), React.createElement("div", null, React.createElement("h3", null, "Ticket Details"), React.createElement("div", null, React.createElement("h4", null, "Event"), React.createElement("p", null, event_name)), React.createElement("div", null, React.createElement("h4", null, "Ticket Holder"), React.createElement("p", null, holder_name)), React.createElement("div", null, React.createElement("h4", null, "Ticket ID"), React.createElement("p", null, hash))), React.createElement("div", null, React.createElement("h3", null, "Sell to Whom"), React.createElement(Formik, {
+    initialValues: initialValues,
+    validationSchema: schema,
+    onSubmit: onSubmit
+  }, function (_ref2) {
+    var values = _ref2.values,
+        isValid = _ref2.isValid,
+        dirty = _ref2.dirty;
+    return React.createElement(Form, null, React.createElement("div", null, React.createElement(Field, {
+      name: 'to',
+      label: 'I want to sell the ticket to someone I know',
+      type: 'radio',
+      value: 'friend',
+      component: RadioField
+    }), values.to === 'friend' && React.createElement("div", {
+      className: 'sell-to-friend'
+    }, React.createElement("div", {
+      className: 'user-info-box'
+    }, React.createElement("div", {
+      className: 'field-box'
+    }, React.createElement("div", {
+      className: 'icon'
+    }, React.createElement(SVG, {
+      src: getImage('user.svg'),
+      width: '24',
+      height: '24'
+    })), React.createElement(Field, {
+      name: 'first_name',
+      label: 'First Name',
+      type: 'text',
+      component: CustomField
+    })), React.createElement("div", {
+      className: 'field-box'
+    }, React.createElement("div", {
+      className: 'empty-box'
+    }), React.createElement(Field, {
+      name: 'last_name',
+      label: 'Last Name',
+      type: 'text',
+      component: CustomField
+    }))), React.createElement("div", {
+      className: 'email-info-box'
+    }, React.createElement("div", {
+      className: 'field-box'
+    }, React.createElement("div", {
+      className: 'icon'
+    }, React.createElement(SVG, {
+      src: getImage('email.svg'),
+      width: '24',
+      height: '24'
+    })), React.createElement(Field, {
+      name: 'email',
+      label: 'Email address',
+      type: 'text',
+      component: CustomField
+    })), React.createElement("div", {
+      className: 'field-box'
+    }, React.createElement("div", {
+      className: 'empty-box'
+    }), React.createElement(Field, {
+      name: 'confirm_email',
+      label: 'Confirm Email address',
+      type: 'text',
+      component: CustomField
+    }))))), React.createElement("div", null, React.createElement(Field, {
+      name: 'to',
+      label: 'I will sell my ticket to anyone who wants to buy it',
+      type: 'radio',
+      value: 'anyone',
+      component: RadioField
+    })), React.createElement("div", null, React.createElement("h4", null, "Terms of Resale"), React.createElement("p", null, "I confirm that I want to sell this ticket and that, if someone chooses to buy it, I will no longer own it or have the right to ask for it back."), React.createElement("p", null, "I also understand that, if no one chooses to buy it, it remains my property, is valid for entry to ", React.createElement("strong", null, event_name), " and I will not receive any refund."), React.createElement("p", null, "If my ticket is sold, the original card I used to buy my ticket will be refunded with the original amount paid, minus a small handling fee of ", React.createElement("strong", null, currency + resale_fee_amount), ", and that any existing refunds due to me for referring sales for this event are no longer valid."), React.createElement(Field, {
+      name: 'confirm',
+      label: 'I agree',
+      type: 'checkbox',
+      component: CheckboxField
+    })), React.createElement("div", {
+      className: "resale-action-button"
+    }, React.createElement(Button, {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, "Sell Ticket")));
+  }))));
+};
+
+var style$2 = {
+  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 ConfirmModal = function ConfirmModal(_ref) {
+  var _ref$message = _ref.message,
+      message = _ref$message === void 0 ? '' : _ref$message,
+      _ref$onClose = _ref.onClose,
+      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+      _ref$onConfirm = _ref.onConfirm,
+      onConfirm = _ref$onConfirm === void 0 ? function () {} : _ref$onConfirm;
+  return React.createElement(Modal, {
+    open: true,
+    onClose: onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: 'confirm-modal'
+  }, React.createElement(Box, {
+    style: style$2
+  }, React.createElement("p", null, message), React.createElement("div", {
+    className: 'footer'
+  }, React.createElement(Button, {
+    onClick: onClose
+  }, "Cancel"), React.createElement(Button, {
+    onClick: onConfirm
+  }, "OK"))));
+};
+
 var getTotal = function getTotal(data) {
   if (!(data != null && data.total) || !_has(data, 'items.ticket_types.length')) return '';
   return data.items.ticket_types[0].currency + data.total;
 };
 
 var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
-  var _data$items$ticket_ty, _data$items$add_ons;
+  var _data$items, _data$items$ticket_ty, _data$items2, _data$items2$add_ons;
 
   var _ref$onGetOrdersSucce = _ref.onGetOrdersSuccess,
       onGetOrdersSuccess = _ref$onGetOrdersSucce === void 0 ? function () {} : _ref$onGetOrdersSucce,
@@ -5137,6 +5374,18 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
       loading = _useState2[0],
       setLoading = _useState2[1];
 
+  var _useState3 = useState(false),
+      showResaleModal = _useState3[0],
+      setShowResaleModal = _useState3[1];
+
+  var _useState4 = useState(false),
+      showRemoveResaleModal = _useState4[0],
+      setShowRemoveResaleModal = _useState4[1];
+
+  var _useState5 = useState(null),
+      activeTicket = _useState5[0],
+      setActiveTicket = _useState5[1];
+
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
       var orderId, params, response, _data;
@@ -5183,11 +5432,136 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
       }, _callee, null, [[0, 12, 15, 18]]);
     }))();
   }, []);
+
+  var handleSellTicket = function handleSellTicket(ticket) {
+    setActiveTicket(ticket);
+    setShowResaleModal(true);
+  };
+
+  var handleOnClose = function handleOnClose() {
+    setShowResaleModal(false);
+    setActiveTicket(null);
+  };
+
+  var handleOnSubmit = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(values) {
+      var _updatedData$tickets, to, first_name, last_name, email, confirm_email, confirm, formData, updatedData;
+
+      return runtime_1.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              setLoading(true);
+              to = values.to, first_name = values.first_name, last_name = values.last_name, email = values.email, confirm_email = values.confirm_email, confirm = values.confirm;
+              formData = new FormData();
+              formData.append('to', to);
+              formData.append('first_name', first_name);
+              formData.append('last_name', last_name);
+              formData.append('email', email);
+              formData.append('confirm_email', confirm_email);
+              formData.append('confirm', String(confirm));
+              _context2.next = 12;
+              return resaleTicket(formData, activeTicket.hash);
+
+            case 12:
+              updatedData = _extends({}, data);
+              updatedData == null ? void 0 : (_updatedData$tickets = updatedData.tickets) == null ? void 0 : _updatedData$tickets.forEach(function (ticket) {
+                if (ticket.hash === activeTicket.hash) {
+                  ticket.is_sellable = false;
+                  ticket.is_on_sale = true;
+                }
+              });
+              setData(updatedData);
+              _context2.next = 19;
+              break;
+
+            case 17:
+              _context2.prev = 17;
+              _context2.t0 = _context2["catch"](0);
+
+            case 19:
+              _context2.prev = 19;
+              setShowResaleModal(false);
+              setLoading(false);
+              return _context2.finish(19);
+
+            case 23:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 17, 19, 23]]);
+    }));
+
+    return function handleOnSubmit(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var handleRemoveFromResale = function handleRemoveFromResale(ticket) {
+    setShowRemoveResaleModal(true);
+    setActiveTicket(ticket);
+  };
+
+  var onCloseRemoveResale = function onCloseRemoveResale() {
+    setShowRemoveResaleModal(false);
+    setActiveTicket(null);
+  };
+
+  var onConfirmRemoveResale = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
+      var _updatedData$tickets2, updatedData;
+
+      return runtime_1.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              setLoading(true);
+              _context3.next = 4;
+              return removeFromResale(activeTicket.hash);
+
+            case 4:
+              updatedData = _extends({}, data);
+              updatedData == null ? void 0 : (_updatedData$tickets2 = updatedData.tickets) == null ? void 0 : _updatedData$tickets2.forEach(function (ticket) {
+                if (ticket.hash === activeTicket.hash) {
+                  ticket.is_sellable = true;
+                  ticket.is_on_sale = false;
+                }
+              });
+              setData(updatedData);
+              _context3.next = 11;
+              break;
+
+            case 9:
+              _context3.prev = 9;
+              _context3.t0 = _context3["catch"](0);
+
+            case 11:
+              _context3.prev = 11;
+              setShowRemoveResaleModal(false);
+              setLoading(false);
+              return _context3.finish(11);
+
+            case 15:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[0, 9, 11, 15]]);
+    }));
+
+    return function onConfirmRemoveResale() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
   return React.createElement("div", {
     className: "order-details"
   }, loading ? React.createElement("div", {
     className: "loading"
-  }, React.createElement(CircularProgress$1, null)) : React.createElement(React.Fragment, null, React.createElement("h1", {
+  }, React.createElement(CircularProgress, null)) : React.createElement(React.Fragment, null, React.createElement("h1", {
     className: "layout-title"
   }, "Order Details"), React.createElement("div", {
     className: "order-summary-box"
@@ -5203,18 +5577,20 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     component: Paper
   }, React.createElement(Table, {
     "aria-label": "collapsible table"
-  }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null, "Items"), React.createElement(TableCell, null, "Price"), React.createElement(TableCell, null, "Quantity"), React.createElement(TableCell, null, "Total"))), React.createElement(TableBody, null, data == null ? void 0 : (_data$items$ticket_ty = data.items.ticket_types) == null ? void 0 : _data$items$ticket_ty.map(function (ticket, index) {
+  }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null, "Items"), React.createElement(TableCell, null, "Price"), React.createElement(TableCell, null, "Quantity"), React.createElement(TableCell, null, "Total"))), React.createElement(TableBody, null, data == null ? void 0 : (_data$items = data.items) == null ? void 0 : (_data$items$ticket_ty = _data$items.ticket_types) == null ? void 0 : _data$items$ticket_ty.map(function (ticket, index) {
     return React.createElement(TableRow, {
       key: index
     }, React.createElement(TableCell, null, React.createElement("b", null, "Ticket Type: "), ticket.name), React.createElement(TableCell, null, ticket.currency + ticket.price), React.createElement(TableCell, null, ticket.quantity), React.createElement(TableCell, null, ticket.currency + ticket.total));
-  }), data == null ? void 0 : (_data$items$add_ons = data.items.add_ons) == null ? void 0 : _data$items$add_ons.map(function (ticket, index) {
+  }), data == null ? void 0 : (_data$items2 = data.items) == null ? void 0 : (_data$items2$add_ons = _data$items2.add_ons) == null ? void 0 : _data$items2$add_ons.map(function (ticket, index) {
     return React.createElement(TableRow, {
       key: index
     }, React.createElement(TableCell, null, React.createElement("b", null, "Add-On: "), ticket.name), React.createElement(TableCell, null, ticket.currency + ticket.price), React.createElement(TableCell, null, ticket.quantity), React.createElement(TableCell, null, ticket.currency + ticket.total));
   }), React.createElement(TableRow, {
     className: "total-row"
   }, React.createElement(TableCell, null), React.createElement(TableCell, null), React.createElement(TableCell, null, "Total"), React.createElement(TableCell, null, getTotal(data))))))), React.createElement(TicketsTable, {
-    tickets: data.tickets
+    tickets: data.tickets,
+    handleSellTicket: handleSellTicket,
+    handleRemoveFromResale: handleRemoveFromResale
   }), React.createElement("div", {
     className: "return-button-container"
   }, React.createElement("button", {
@@ -5225,8 +5601,93 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
         window.location.assign('/orders');
       }
     }
-  }, "Return to Order History"))));
+  }, "Return to Order History"))), showResaleModal && React.createElement(TicketResaleModal, {
+    ticket: activeTicket,
+    onClose: handleOnClose,
+    onSubmit: handleOnSubmit
+  }), showRemoveResaleModal && React.createElement(ConfirmModal, {
+    message: "Are you sure you want to withdraw your ticket from resale?",
+    onClose: onCloseRemoveResale,
+    onConfirm: onConfirmRemoveResale
+  }));
+};
+
+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,
+      orderHash = _ref.orderHash;
+  var isWindowDefined = typeof window !== 'undefined';
+
+  var _useState = useState(null),
+      error = _useState[0],
+      setError = _useState[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;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!isWindowDefined) {
+                _context.next = 24;
+                break;
+              }
+
+              params = new URL("" + window.location).searchParams;
+              hash = params.get('o') || orderHash || null;
+
+              if (!hash) {
+                _context.next = 23;
+                break;
+              }
+
+              _context.prev = 4;
+              _context.next = 7;
+              return checkTicketStatus(hash);
+
+            case 7:
+              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);
+              window.location.href = "/billing/billing-info/?age_required=" + age_required + "&names_required=" + names_required + "&event_id=" + event_id;
+              _context.next = 21;
+              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 21:
+              _context.next = 24;
+              break;
+
+            case 23:
+              window.location.href = '/';
+
+            case 24:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[4, 16]]);
+    }))();
+  }, []);
+  return React.createElement("div", {
+    className: "ticket-resale-page"
+  }, React.createElement("div", {
+    className: "error-block"
+  }, React.createElement("h3", null, error)));
 };
 
-export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
+export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, TicketResaleContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
 //# sourceMappingURL=tf-checkout-react.esm.js.map