tf-checkout-react 1.2.13 → 1.2.16

package/dist/tf-checkout-react.cjs.development.js

@@ -28,10 +28,8 @@ var styles$1 = require('@mui/styles');
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
-require('material-ui-phone-number');
-require('react-phone-input-2/lib/material.css');
+var MuiPhoneNumber = _interopDefault(require('material-ui-phone-number'));
 var _debounce = _interopDefault(require('lodash/debounce'));
-var PhoneInput = _interopDefault(require('react-phone-input-2'));
 var CircularProgress = _interopDefault(require('@mui/material/CircularProgress'));
 var Select = _interopDefault(require('@mui/material/Select'));
 var Yup = require('yup');
@@ -1684,7 +1682,6 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
       errors = _ref$form.errors,
       touched = _ref$form.touched,
       setFieldError = _ref$form.setFieldError,
-      setStatus = _ref$form.setStatus,
       values = _ref$form.values,
       initialValues = _ref$form.initialValues,
       setFieldValue = _ref$form.setFieldValue,
@@ -1705,31 +1702,25 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
     if (field.value === '+') {
       setFieldError(field.name, '');
       setFieldTouched(field.name, false);
+      setFieldValue(field.name, '');
       return;
     }
 
-    if (field.value) {
-      var _setStatus;
-
-      setStatus((_setStatus = {}, _setStatus[field.name] = true, _setStatus));
-    }
-
     debounceCb( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var message, _setStatus2;
-
+      var message;
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
 
-              if (!field.value) {
+              if (!values[field.name]) {
                 _context.next = 4;
                 break;
               }
 
               _context.next = 4;
-              return validatePhoneNumber(field.value);
+              return validatePhoneNumber(values[field.name]);
 
             case 4:
               setFieldError(field.name, '');
@@ -1740,55 +1731,41 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
               _context.prev = 7;
               _context.t0 = _context["catch"](0);
               message = _get(_context.t0, 'response.data.message', 'Invalid phone number');
-              setFieldError(field.name, message);
 
-            case 11:
-              _context.prev = 11;
-              setStatus((_setStatus2 = {}, _setStatus2[field.name] = false, _setStatus2));
-              return _context.finish(11);
+              if (values[field.name]) {
+                setFieldError(field.name, message);
+              }
 
-            case 14:
+            case 11:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 7, 11, 14]]);
+      }, _callee, null, [[0, 7]]);
     }))); // eslint-disable-next-line
   }, [field.value]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(PhoneInput, {
-    key: field.name,
-    value: fill ? values.phone : initialValues.phone,
-    onChange: function onChange(value, data) {
-      if (data.dialCode !== value) {
-        setFieldTouched(field.name, true);
-        setFieldValue(field.name, value);
-      } else {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(MuiPhoneNumber, {
+    name: field.name,
+    value: fill ? values[field.name] : initialValues[field.name],
+    onChange: function onChange(value, country) {
+      if ("+" + (country == null ? void 0 : country.dialCode) === value || value === '+') {
         setFieldValue(field.name, '');
         setFieldError(field.name, '');
+      } else {
+        setFieldTouched(field.name, true);
+        setFieldValue(field.name, value);
       }
     },
-    country: "us",
+    variant: "outlined",
+    defaultCountry: "us",
     disableDropdown: disableDropdown,
-    specialLabel: label,
+    label: label,
+    error: !!error && isTouched,
+    helperText: isTouched && error,
+    fullWidth: true,
     autoFormat: false,
-    inputStyle: {
-      width: '100%'
-    }
-  }), !!error && isTouched && React__default.createElement("p", {
-    style: {
-      fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-      fontWeight: '400',
-      fontSize: '0.75rem',
-      lineHeight: '1.66',
-      letterSpacing: '0.03333em',
-      textAlign: 'left',
-      marginTop: '3px',
-      marginRight: '14px',
-      marginBottom: '0',
-      marginLeft: '14px',
-      color: '#d32f2f'
-    }
-  }, error));
+    disableAreaCodes: true
+  }));
 };
 
 function Loader() {
@@ -5957,119 +5934,47 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
   })));
 };
 
-var TicketsTable = function TicketsTable(_ref) {
-  var _ref$tickets = _ref.tickets,
-      tickets = _ref$tickets === void 0 ? [] : _ref$tickets,
-      _ref$handleSellTicket = _ref.handleSellTicket,
-      handleSellTicket = _ref$handleSellTicket === void 0 ? _identity : _ref$handleSellTicket,
-      _ref$handleRemoveFrom = _ref.handleRemoveFromResale,
-      handleRemoveFromResale = _ref$handleRemoveFrom === void 0 ? _identity : _ref$handleRemoveFrom,
-      _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? '' : _ref$icon;
-
-  var _useState = React.useState(null),
-      pdfError = _useState[0],
-      setPdfError = _useState[1];
-
-  return React__default.createElement("div", {
-    className: "tickets-box"
-  }, React__default.createElement(SnackbarAlert, {
-    type: "error",
-    isOpen: !!pdfError,
-    message: pdfError || '',
-    onClose: function onClose() {
-      return setPdfError(null);
-    }
-  }), React__default.createElement("h4", {
-    className: "sub-title"
-  }, "Your Tickets"), React__default.createElement(TableContainer, {
-    component: Paper
-  }, React__default.createElement(Table, {
-    "aria-label": "collapsible table"
-  }, React__default.createElement(TableHead, null, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null))), React__default.createElement(TableBody, null, tickets.map(function (ticket, index) {
-    var _ticket$add_ons;
-
-    return React__default.createElement(React.Fragment, {
-      key: index
-    }, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, React__default.createElement("div", {
-      className: "cell-block"
-    }, React__default.createElement("span", null, "Ticket ID"), React__default.createElement("span", null, ticket.hash))), React__default.createElement(TableCell, null, React__default.createElement("div", {
-      className: "cell-block"
-    }, React__default.createElement("span", null, "Ticket Type"), React__default.createElement("span", null, ticket.ticket_type))), React__default.createElement(TableCell, null, React__default.createElement("div", {
-      className: "cell-block"
-    }, React__default.createElement("span", null, "Ticket Holder"), React__default.createElement("span", null, ticket.holder_name))), React__default.createElement(TableCell, null, React__default.createElement("div", {
-      className: "cell-block"
-    }, React__default.createElement("span", null, "Status"), React__default.createElement("span", null, ticket.status))), ticket.pdf_link && ticket.status !== "Sold" ? React__default.createElement(TableCell, null, Boolean(icon) && React__default.createElement("img", {
-      src: icon,
-      alt: "nodata"
-    }), React__default.createElement("span", {
-      "aria-hidden": true,
-      className: "action-button",
-      onClick: function () {
-        var _onClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-          var pdfDownloadError;
-          return runtime_1.wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  _context.prev = 0;
-                  _context.next = 3;
-                  return downloadPDF(ticket.pdf_link);
-
-                case 3:
-                  pdfDownloadError = _context.sent;
-
-                  if (pdfDownloadError) {
-                    setPdfError(pdfDownloadError == null ? void 0 : pdfDownloadError.message);
-                  }
-
-                  _context.next = 10;
-                  break;
-
-                case 7:
-                  _context.prev = 7;
-                  _context.t0 = _context["catch"](0);
-
-                  if (_context.t0 && typeof _context.t0 === 'string') {
-                    setPdfError(_context.t0);
-                  }
-
-                case 10:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee, null, [[0, 7]]);
-        }));
-
-        function onClick() {
-          return _onClick.apply(this, arguments);
-        }
+var style$3 = {
+  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'
+};
 
-        return onClick;
-      }()
-    }, "Download")) : null, React__default.createElement(TableCell, null, ticket.is_sellable && React__default.createElement("span", {
-      "aria-hidden": true,
-      className: "action-button",
-      onClick: function onClick() {
-        return handleSellTicket(ticket);
-      }
-    }, "Sell Ticket"), ticket.is_on_sale && React__default.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__default.createElement(TableRow, null, React__default.createElement(TableCell, {
-      colSpan: 6
-    }, React__default.createElement(Table, {
-      className: "ticket-add-on-table"
-    }, React__default.createElement(TableHead, null, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, "Add-On"), React__default.createElement(TableCell, null, "Status"))), React__default.createElement(TableBody, null, ticket.add_ons.map(function (add_on, index) {
-      return React__default.createElement(TableRow, {
-        key: index
-      }, React__default.createElement(TableCell, null, add_on.name), React__default.createElement(TableCell, null, add_on.status));
-    }))))));
-  })))));
+var ConfirmModal = function ConfirmModal(_ref) {
+  var _ref$message = _ref.message,
+      message = _ref$message === void 0 ? '' : _ref$message,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      _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__default.createElement(Modal, {
+    open: true,
+    onClose: onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: 'confirm-modal'
+  }, React__default.createElement(Box, {
+    style: style$3
+  }, React__default.createElement("p", null, message), React__default.createElement("div", {
+    className: 'footer'
+  }, React__default.createElement(Button, {
+    onClick: onClose,
+    disabled: loading
+  }, "Cancel"), React__default.createElement(Button, {
+    onClick: onConfirm
+  }, loading ? React__default.createElement(CircularProgress, {
+    size: "22px"
+  }) : 'OK'))));
 };
 
 var _excluded$2 = ["label", "field", "theme", "disableDropdown"];
@@ -6088,7 +5993,7 @@ var RadioField = function RadioField(_ref) {
   }));
 };
 
-var style$3 = {
+var style$4 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -6143,7 +6048,9 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
       _ref$onClose = _ref.onClose,
       onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
       _ref$onSubmit = _ref.onSubmit,
-      onSubmit = _ref$onSubmit === void 0 ? function () {} : _ref$onSubmit;
+      onSubmit = _ref$onSubmit === void 0 ? function () {} : _ref$onSubmit,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading;
   var hash = ticket.hash,
       holder_name = ticket.holder_name,
       event_name = ticket.event_name,
@@ -6157,7 +6064,7 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
     "aria-describedby": "modal-modal-description",
     className: 'resale-modal'
   }, React__default.createElement(Box, {
-    style: style$3
+    style: style$4
   }, React__default.createElement("h3", null, "Sell Ticket"), React__default.createElement("div", null, React__default.createElement("h3", null, "Ticket Details"), React__default.createElement("div", null, React__default.createElement("h4", null, "Event"), React__default.createElement("p", null, event_name)), React__default.createElement("div", null, React__default.createElement("h4", null, "Ticket Holder"), React__default.createElement("p", null, holder_name)), React__default.createElement("div", null, React__default.createElement("h4", null, "Ticket ID"), React__default.createElement("p", null, hash))), React__default.createElement("div", null, React__default.createElement("h3", null, "Sell to Whom"), React__default.createElement(formik.Formik, {
     initialValues: initialValues,
     validationSchema: schema,
@@ -6238,46 +6145,125 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
     }, React__default.createElement(Button, {
       type: "submit",
       disabled: !(isValid && dirty)
-    }, "Sell Ticket")));
+    }, loading ? React__default.createElement(CircularProgress, {
+      size: "22px"
+    }) : 'Sell Ticket')));
   }))));
 };
 
-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 TicketsTable = function TicketsTable(_ref) {
+  var _ref$tickets = _ref.tickets,
+      tickets = _ref$tickets === void 0 ? [] : _ref$tickets,
+      _ref$handleSellTicket = _ref.handleSellTicket,
+      handleSellTicket = _ref$handleSellTicket === void 0 ? _identity : _ref$handleSellTicket,
+      _ref$handleRemoveFrom = _ref.handleRemoveFromResale,
+      handleRemoveFromResale = _ref$handleRemoveFrom === void 0 ? _identity : _ref$handleRemoveFrom,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? '' : _ref$icon;
 
-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__default.createElement(Modal, {
-    open: true,
-    onClose: onClose,
-    "aria-labelledby": "modal-modal-title",
-    "aria-describedby": "modal-modal-description",
-    className: 'confirm-modal'
-  }, React__default.createElement(Box, {
-    style: style$4
-  }, React__default.createElement("p", null, message), React__default.createElement("div", {
-    className: 'footer'
-  }, React__default.createElement(Button, {
-    onClick: onClose
-  }, "Cancel"), React__default.createElement(Button, {
-    onClick: onConfirm
-  }, "OK"))));
+  var _useState = React.useState(null),
+      pdfError = _useState[0],
+      setPdfError = _useState[1];
+
+  return React__default.createElement("div", {
+    className: "tickets-box"
+  }, React__default.createElement(SnackbarAlert, {
+    type: "error",
+    isOpen: !!pdfError,
+    message: pdfError || '',
+    onClose: function onClose() {
+      return setPdfError(null);
+    }
+  }), React__default.createElement("h4", {
+    className: "sub-title"
+  }, "Your Tickets"), React__default.createElement(TableContainer, {
+    component: Paper
+  }, React__default.createElement(Table, {
+    "aria-label": "collapsible table"
+  }, React__default.createElement(TableHead, null, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null))), React__default.createElement(TableBody, null, tickets.map(function (ticket, index) {
+    var _ticket$add_ons;
+
+    return React__default.createElement(React.Fragment, {
+      key: index
+    }, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, React__default.createElement("div", {
+      className: "cell-block"
+    }, React__default.createElement("span", null, "Ticket ID"), React__default.createElement("span", null, ticket.hash))), React__default.createElement(TableCell, null, React__default.createElement("div", {
+      className: "cell-block"
+    }, React__default.createElement("span", null, "Ticket Type"), React__default.createElement("span", null, ticket.ticket_type))), React__default.createElement(TableCell, null, React__default.createElement("div", {
+      className: "cell-block"
+    }, React__default.createElement("span", null, "Ticket Holder"), React__default.createElement("span", null, ticket.holder_name))), React__default.createElement(TableCell, null, React__default.createElement("div", {
+      className: "cell-block"
+    }, React__default.createElement("span", null, "Status"), React__default.createElement("span", null, ticket.status))), ticket.pdf_link && ticket.status !== "Sold" ? React__default.createElement(TableCell, null, Boolean(icon) && React__default.createElement("img", {
+      src: icon,
+      alt: "nodata"
+    }), React__default.createElement("span", {
+      "aria-hidden": true,
+      className: "action-button",
+      onClick: function () {
+        var _onClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+          var pdfDownloadError;
+          return runtime_1.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.prev = 0;
+                  _context.next = 3;
+                  return downloadPDF(ticket.pdf_link);
+
+                case 3:
+                  pdfDownloadError = _context.sent;
+
+                  if (pdfDownloadError) {
+                    setPdfError(pdfDownloadError == null ? void 0 : pdfDownloadError.message);
+                  }
+
+                  _context.next = 10;
+                  break;
+
+                case 7:
+                  _context.prev = 7;
+                  _context.t0 = _context["catch"](0);
+
+                  if (_context.t0 && typeof _context.t0 === 'string') {
+                    setPdfError(_context.t0);
+                  }
+
+                case 10:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee, null, [[0, 7]]);
+        }));
+
+        function onClick() {
+          return _onClick.apply(this, arguments);
+        }
+
+        return onClick;
+      }()
+    }, "Download")) : null, React__default.createElement(TableCell, null, ticket.is_sellable && React__default.createElement("span", {
+      "aria-hidden": true,
+      className: "action-button",
+      onClick: function onClick() {
+        return handleSellTicket(ticket);
+      }
+    }, "Sell Ticket"), ticket.is_on_sale && React__default.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__default.createElement(TableRow, null, React__default.createElement(TableCell, {
+      colSpan: 6
+    }, React__default.createElement(Table, {
+      className: "ticket-add-on-table"
+    }, React__default.createElement(TableHead, null, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, "Add-On"), React__default.createElement(TableCell, null, "Status"))), React__default.createElement(TableBody, null, ticket.add_ons.map(function (add_on, index) {
+      return React__default.createElement(TableRow, {
+        key: index
+      }, React__default.createElement(TableCell, null, add_on.name), React__default.createElement(TableCell, null, add_on.status));
+    }))))));
+  })))));
 };
 
 var getTotal = function getTotal(data) {
@@ -6294,6 +6280,14 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
       onGetOrdersSuccess = _ref$onGetOrdersSucce === void 0 ? function () {} : _ref$onGetOrdersSucce,
       _ref$onGetOrdersError = _ref.onGetOrdersError,
       onGetOrdersError = _ref$onGetOrdersError === void 0 ? function () {} : _ref$onGetOrdersError,
+      _ref$onRemoveFromResa = _ref.onRemoveFromResaleSuccess,
+      onRemoveFromResaleSuccess = _ref$onRemoveFromResa === void 0 ? function () {} : _ref$onRemoveFromResa,
+      _ref$onRemoveFromResa2 = _ref.onRemoveFromResaleError,
+      onRemoveFromResaleError = _ref$onRemoveFromResa2 === void 0 ? function () {} : _ref$onRemoveFromResa2,
+      _ref$onResaleTicketSu = _ref.onResaleTicketSuccess,
+      onResaleTicketSuccess = _ref$onResaleTicketSu === void 0 ? function () {} : _ref$onResaleTicketSu,
+      _ref$onResaleTicketEr = _ref.onResaleTicketError,
+      onResaleTicketError = _ref$onResaleTicketEr === void 0 ? function () {} : _ref$onResaleTicketEr,
       onReturnButtonClick = _ref.onReturnButtonClick,
       _ref$personalLinkIcon = _ref.personalLinkIcon,
       personalLinkIcon = _ref$personalLinkIcon === void 0 ? '' : _ref$personalLinkIcon;
@@ -6307,16 +6301,24 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
       setLoading = _useState2[1];
 
   var _useState3 = React.useState(false),
-      showResaleModal = _useState3[0],
-      setShowResaleModal = _useState3[1];
+      removeFromResaleLoading = _useState3[0],
+      setRemoveFromResaleLoading = _useState3[1];
 
   var _useState4 = React.useState(false),
-      showRemoveResaleModal = _useState4[0],
-      setShowRemoveResaleModal = _useState4[1];
+      resaleTicketLoading = _useState4[0],
+      setResaleTicketLoading = _useState4[1];
 
-  var _useState5 = React.useState(null),
-      activeTicket = _useState5[0],
-      setActiveTicket = _useState5[1];
+  var _useState5 = React.useState(false),
+      showResaleModal = _useState5[0],
+      setShowResaleModal = _useState5[1];
+
+  var _useState6 = React.useState(false),
+      showRemoveResaleModal = _useState6[0],
+      setShowRemoveResaleModal = _useState6[1];
+
+  var _useState7 = React.useState(null),
+      activeTicket = _useState7[0],
+      setActiveTicket = _useState7[1];
 
   React.useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
@@ -6391,8 +6393,16 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              _context2.prev = 0;
-              setLoading(true);
+              if (!resaleTicketLoading) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 2:
+              _context2.prev = 2;
+              setResaleTicketLoading(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);
@@ -6401,10 +6411,10 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
               formData.append('email', email);
               formData.append('confirm_email', confirm_email);
               formData.append('confirm', String(confirm));
-              _context2.next = 12;
+              _context2.next = 14;
               return resaleTicket(formData, activeTicket.hash);
 
-            case 12:
+            case 14:
               updatedData = _extends({}, data);
               updatedData == null ? void 0 : (_updatedData$tickets = updatedData.tickets) == null ? void 0 : _updatedData$tickets.forEach(function (ticket) {
                 if (ticket.hash === activeTicket.hash) {
@@ -6413,25 +6423,27 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
                 }
               });
               setData(updatedData);
-              _context2.next = 19;
+              onResaleTicketSuccess();
+              _context2.next = 23;
               break;
 
-            case 17:
-              _context2.prev = 17;
-              _context2.t0 = _context2["catch"](0);
+            case 20:
+              _context2.prev = 20;
+              _context2.t0 = _context2["catch"](2);
+              onResaleTicketError(_context2.t0);
 
-            case 19:
-              _context2.prev = 19;
+            case 23:
+              _context2.prev = 23;
               setShowResaleModal(false);
-              setLoading(false);
-              return _context2.finish(19);
+              setResaleTicketLoading(false);
+              return _context2.finish(23);
 
-            case 23:
+            case 27:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[0, 17, 19, 23]]);
+      }, _callee2, null, [[2, 20, 23, 27]]);
     }));
 
     return function handleOnSubmit(_x) {
@@ -6457,12 +6469,20 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
-              _context3.prev = 0;
-              setLoading(true);
-              _context3.next = 4;
+              if (!removeFromResaleLoading) {
+                _context3.next = 2;
+                break;
+              }
+
+              return _context3.abrupt("return");
+
+            case 2:
+              _context3.prev = 2;
+              setRemoveFromResaleLoading(true);
+              _context3.next = 6;
               return removeFromResale(activeTicket.hash);
 
-            case 4:
+            case 6:
               updatedData = _extends({}, data);
               updatedData == null ? void 0 : (_updatedData$tickets2 = updatedData.tickets) == null ? void 0 : _updatedData$tickets2.forEach(function (ticket) {
                 if (ticket.hash === activeTicket.hash) {
@@ -6471,25 +6491,27 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
                 }
               });
               setData(updatedData);
-              _context3.next = 11;
+              onRemoveFromResaleSuccess();
+              _context3.next = 15;
               break;
 
-            case 9:
-              _context3.prev = 9;
-              _context3.t0 = _context3["catch"](0);
+            case 12:
+              _context3.prev = 12;
+              _context3.t0 = _context3["catch"](2);
+              onRemoveFromResaleError(_context3.t0);
 
-            case 11:
-              _context3.prev = 11;
+            case 15:
+              _context3.prev = 15;
               setShowRemoveResaleModal(false);
-              setLoading(false);
-              return _context3.finish(11);
+              setRemoveFromResaleLoading(false);
+              return _context3.finish(15);
 
-            case 15:
+            case 19:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[0, 9, 11, 15]]);
+      }, _callee3, null, [[2, 12, 15, 19]]);
     }));
 
     return function onConfirmRemoveResale() {
@@ -6500,7 +6522,7 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   var orderSummery = "ID " + data.id + ", placed";
 
   if (data.date && data.timezone) {
-    var date = moment.tz(data.date, data.timezone).format("dddd, DD MMMM YYYY");
+    var date = moment.tz(data.date, data.timezone).format('dddd, DD MMMM YYYY');
     orderSummery += " " + date;
   }
 
@@ -6581,11 +6603,13 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   }, "Return to Order History"))), showResaleModal && React__default.createElement(TicketResaleModal, {
     ticket: activeTicket,
     onClose: handleOnClose,
-    onSubmit: handleOnSubmit
+    onSubmit: handleOnSubmit,
+    loading: resaleTicketLoading
   }), showRemoveResaleModal && React__default.createElement(ConfirmModal, {
     message: "Are you sure you want to withdraw your ticket from resale?",
     onClose: onCloseRemoveResale,
-    onConfirm: onConfirmRemoveResale
+    onConfirm: onConfirmRemoveResale,
+    loading: removeFromResaleLoading
   }));
 };