tf-checkout-react 1.0.62 → 1.0.66

package/dist/api/index.d.ts

@@ -16,7 +16,7 @@ export declare const getAccessToken: (data: FormData) => Promise<import("axios")
 export declare const getPaymentData: (hash: string) => Promise<import("axios").AxiosResponse<any, any>>;
 export declare const handlePaymentData: (orderHash: string, data: any) => Promise<import("axios").AxiosResponse<any, any>>;
 export declare const handlePaymentSuccess: (orderHash: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const getProfileData: (accessToken: any) => Promise<import("axios").AxiosResponse<any, any>>;
+export declare const getProfileData: (accessToken: any) => Promise<any>;
 export declare const getCountries: () => Promise<import("axios").AxiosResponse<any, any>>;
 export declare const getConfirmationData: (orderHash: string) => Promise<import("axios").AxiosResponse<any, any>>;
 export declare const getStates: (countryId: string) => Promise<import("axios").AxiosResponse<any, any>>;

package/dist/components/billing-info-container/index.d.ts

@@ -29,5 +29,6 @@ export interface IBillingInfoPage {
     buttonName?: string;
     theme?: 'light' | 'dark';
     isLoggedIn?: boolean;
+    fontFamily?: string;
 }
-export declare const BillingInfoContainer: ({ data, ticketHoldersFields, initialValues, buttonName, handleSubmit, theme, onRegisterSuccess, onRegisterError, onSubmitError, onGetCartSuccess, onGetCartError, onGetCountriesSuccess, onGetCountriesError, onGetStatesSuccess, onGetStatesError, onGetProfileDataSuccess, onGetProfileDataError, onAuthorizeSuccess, onAuthorizeError, onLogin, onLoginSuccess, isLoggedIn: pIsLoggedIn, }: IBillingInfoPage) => JSX.Element;
+export declare const BillingInfoContainer: ({ data, ticketHoldersFields, initialValues, buttonName, handleSubmit, theme, onRegisterSuccess, onRegisterError, onSubmitError, onGetCartSuccess, onGetCartError, onGetCountriesSuccess, onGetCountriesError, onGetStatesSuccess, onGetStatesError, onGetProfileDataSuccess, onGetProfileDataError, onAuthorizeSuccess, onAuthorizeError, onLogin, onLoginSuccess, isLoggedIn: pIsLoggedIn, fontFamily }: IBillingInfoPage) => JSX.Element;

package/dist/components/myTicketsContainer/index.d.ts

@@ -4,6 +4,7 @@ interface MyTicketsTypes {
     handleDetailsInfo: (id: string) => void;
     onGetOrdersSuccess: (res: any) => void;
     onGetOrdersError: (err: any) => void;
+    theme?: 'light' | 'dark';
 }
-export declare const MyTicketsContainer: ({ handleDetailsInfo, onGetOrdersSuccess, onGetOrdersError }: MyTicketsTypes) => JSX.Element;
+export declare const MyTicketsContainer: ({ handleDetailsInfo, onGetOrdersSuccess, onGetOrdersError, theme, }: MyTicketsTypes) => JSX.Element;
 export {};

package/dist/components/orderDetailsContainer/index.d.ts

@@ -4,5 +4,5 @@ interface OrderDetailsTypes {
     onGetOrdersSuccess: (res: any) => void;
     onGetOrdersError: (err: any) => void;
 }
-export declare const OrderDetailsContainer: ({ onGetOrdersSuccess, onGetOrdersError }: OrderDetailsTypes) => JSX.Element;
+export declare const OrderDetailsContainer: ({ onGetOrdersSuccess, onGetOrdersError, }: OrderDetailsTypes) => JSX.Element;
 export {};

package/dist/components/paymentContainer/index.d.ts

@@ -14,5 +14,6 @@ export interface IPaymentPage {
     onGetPaymentDataError: (value: AxiosError) => void;
     onPaymentError: (value: AxiosError) => void;
     stripeCardOptions?: StripeCardNumberElementOptions;
+    fontFamily?: string;
 }
-export declare const PaymentContainer: ({ paymentFields, handlePayment, formTitle, errorText, checkoutData, onErrorClose, onGetPaymentDataSuccess, onGetPaymentDataError, onPaymentError, stripeCardOptions, }: IPaymentPage) => JSX.Element;
+export declare const PaymentContainer: ({ paymentFields, handlePayment, formTitle, errorText, checkoutData, onErrorClose, onGetPaymentDataSuccess, onGetPaymentDataError, onPaymentError, stripeCardOptions, fontFamily, }: IPaymentPage) => JSX.Element;

package/dist/index.d.ts

@@ -2,5 +2,7 @@ export { BillingInfoContainer } from './components/billing-info-container/index'
 export { PaymentContainer } from './components/paymentContainer/index';
 export { ConfirmationContainer } from './components/confirmationContainer/index';
 export { TicketsContainer } from './components/ticketsContainer/index';
-export { currencyNormalizerCreator, createFixedFloatNormalizer } from './normalizers';
+export { currencyNormalizerCreator, createFixedFloatNormalizer, } from './normalizers';
 export { LoginModal } from './components/loginModal';
+export { MyTicketsContainer } from './components/myTicketsContainer';
+export { OrderDetailsContainer } from './components/orderDetailsContainer';

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

@@ -21,11 +21,11 @@ var _flatMapDeep = _interopDefault(require('lodash/flatMapDeep'));
 var _isArray = _interopDefault(require('lodash/isArray'));
 var nanoid = require('nanoid');
 var TextField = _interopDefault(require('@mui/material/TextField'));
-var styles = require('@mui/styles');
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
 var Select = _interopDefault(require('@mui/material/Select'));
+var styles = require('@mui/material/styles');
 var Container = _interopDefault(require('@mui/material/Container'));
 var Alert = _interopDefault(require('@mui/material/Alert'));
 var reactStripeJs = require('@stripe/react-stripe-js');
@@ -42,6 +42,15 @@ var _has = _interopDefault(require('lodash/has'));
 var FormControl = _interopDefault(require('@mui/material/FormControl'));
 var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
 var Button$1 = _interopDefault(require('@mui/material/Button'));
+var Table = _interopDefault(require('@mui/material/Table'));
+var TableBody = _interopDefault(require('@mui/material/TableBody'));
+var TableCell = _interopDefault(require('@mui/material/TableCell'));
+var TableContainer = _interopDefault(require('@mui/material/TableContainer'));
+var TableHead = _interopDefault(require('@mui/material/TableHead'));
+var TableRow = _interopDefault(require('@mui/material/TableRow'));
+var Paper = _interopDefault(require('@mui/material/Paper'));
+var TablePagination = _interopDefault(require('@mui/material/TablePagination'));
+var Autocomplete = _interopDefault(require('@mui/material/Autocomplete'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1078,6 +1087,13 @@ var getProfileData = function getProfileData(accessToken) {
     headers: _extends({}, ttfHeaders, {
       Authorization: "Bearer " + accessToken
     })
+  })["catch"](function (e) {
+    if (isWindowDefined) {
+      var event = new window.CustomEvent('auth_error', e);
+      window.document.dispatchEvent(event);
+    }
+
+    return e;
   });
 };
 var getCountries = function getCountries() {
@@ -1089,6 +1105,12 @@ var getConfirmationData = function getConfirmationData(orderHash) {
 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);
+};
+var getOrderDetails = function getOrderDetails(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);
 };
@@ -1674,13 +1696,6 @@ var assingUniqueIds = function assingUniqueIds(data) {
   });
 };
 
-var useStyles = /*#__PURE__*/styles.makeStyles({
-  input: {
-    '&::placeholder': {
-      color: 'gray'
-    }
-  }
-});
 var CustomField = function CustomField(_ref) {
   var label = _ref.label,
       _ref$type = _ref.type,
@@ -1698,7 +1713,6 @@ var CustomField = function CustomField(_ref) {
   var error = _get(errors, field.name);
 
   var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
-  var classes = useStyles();
   return React__default.createElement(TextField, Object.assign({
     id: field.name,
     label: label,
@@ -1707,11 +1721,6 @@ var CustomField = function CustomField(_ref) {
     fullWidth: true,
     error: !!error && isTouched,
     helperText: isTouched && error,
-    InputProps: {
-      classes: {
-        input: classes.input
-      }
-    },
     SelectProps: {
       "native": true,
       className: theme,
@@ -1757,13 +1766,6 @@ var getQueryVariable = function getQueryVariable(variable) {
   return false;
 };
 
-var useStyles$1 = /*#__PURE__*/styles.makeStyles({
-  input: {
-    '&::placeholder': {
-      color: 'gray'
-    }
-  }
-});
 var SelectField = function SelectField(_ref) {
   var label = _ref.label,
       _ref$type = _ref.type,
@@ -1779,7 +1781,6 @@ var SelectField = function SelectField(_ref) {
 
   var error = _get(errors, field.name);
 
-  var classes = useStyles$1();
   return React__default.createElement(material.FormControl, {
     fullWidth: true
   }, React__default.createElement(material.InputLabel, {
@@ -1793,10 +1794,7 @@ var SelectField = function SelectField(_ref) {
     fullWidth: true,
     error: !!error && isTouched,
     inputProps: {
-      id: field.name,
-      classes: {
-        input: classes.input
-      }
+      id: field.name
     },
     "native": true,
     className: theme,
@@ -2012,7 +2010,15 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       _ref3$onLoginSuccess = _ref3.onLoginSuccess,
       onLoginSuccess = _ref3$onLoginSuccess === void 0 ? function () {} : _ref3$onLoginSuccess,
       _ref3$isLoggedIn = _ref3.isLoggedIn,
-      pIsLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn;
+      pIsLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
+      fontFamily = _ref3.fontFamily;
+  var themeMui = styles.createTheme({
+    typography: {
+      allVariants: {
+        fontFamily: fontFamily
+      }
+    }
+  });
   var isWindowDefined = typeof window !== 'undefined';
   var userData = isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
   var access_token = isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
@@ -2104,6 +2110,15 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     return qty;
   };
 
+  var handleAuthErrors = React.useCallback(function () {
+    setIsLoggedIn(false);
+  }, []);
+  React.useEffect(function () {
+    isWindowDefined && window.document.addEventListener("auth_error", handleAuthErrors);
+    return function () {
+      isWindowDefined && window.document.removeEventListener("auth_error", handleAuthErrors);
+    };
+  }, [handleAuthErrors]);
   React.useEffect(function () {
     if ((pIsLoggedIn || access_token) && !isLoggedIn) {
       setIsLoggedIn(true);
@@ -2261,9 +2276,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   React.useEffect(function () {
     fetchUserData(access_token);
   }, [access_token]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(formik.Formik, {
+  return React__default.createElement(styles.ThemeProvider, {
+    theme: themeMui
+  }, React__default.createElement(formik.Formik, {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({}, initialValues, {
-      email: emailLogged,
       firstName: firstNameLogged,
       lastName: lastNameLogged,
       country: 1,
@@ -2926,7 +2942,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
       _ref$onPaymentError = _ref.onPaymentError,
       onPaymentError = _ref$onPaymentError === void 0 ? function () {} : _ref$onPaymentError,
       _ref$stripeCardOption = _ref.stripeCardOptions,
-      stripeCardOptions = _ref$stripeCardOption === void 0 ? {} : _ref$stripeCardOption;
+      stripeCardOptions = _ref$stripeCardOption === void 0 ? {} : _ref$stripeCardOption,
+      fontFamily = _ref.fontFamily;
 
   var _useState = React.useState(initialReviewValues),
       reviewData = _useState[0],
@@ -3101,7 +3118,16 @@ var PaymentContainer = function PaymentContainer(_ref) {
     };
   }();
 
-  return React__default.createElement("div", {
+  var themeMui = styles.createTheme({
+    typography: {
+      allVariants: {
+        fontFamily: fontFamily
+      }
+    }
+  });
+  return React__default.createElement(styles.ThemeProvider, {
+    theme: themeMui
+  }, React__default.createElement("div", {
     className: "payment_page"
   }, error && React__default.createElement(Alert, {
     severity: "error",
@@ -3149,7 +3175,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     },
     conditions: conditions,
     stripeCardOptions: stripeCardOptions
-  }))))));
+  })))))));
 };
 
 var defaultSvg = 'https://img.icons8.com/ios-filled/50/000000/facebook-new.svg';
@@ -3360,6 +3386,9 @@ var TicketRow = function TicketRow(_ref) {
   }, React__default.createElement(FormControl, {
     fullWidth: true
   }, React__default.createElement(Select, {
+    sx: {
+      borderRadius: 0
+    },
     value: selectedTickets[ticketTier.id] ? selectedTickets[ticketTier.id] : 0,
     onChange: handleTicketSelect,
     displayEmpty: true,
@@ -3883,9 +3912,356 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }, getTicketsLabel || 'GET TICKETS'))));
 };
 
+var EventInfoItem = function EventInfoItem(_ref) {
+  var image = _ref.image,
+      name = _ref.name;
+  return React__default.createElement("div", {
+    className: 'event-info'
+  }, React__default.createElement("img", {
+    src: image,
+    alt: "event"
+  }), name);
+};
+
+var tableConfig = function tableConfig(key) {
+  var config;
+
+  switch (key) {
+    default:
+      config = {
+        header: ['Order No.', 'Date', 'Event', 'Total'],
+        body: [function (row) {
+          return row.id;
+        }, function (row) {
+          return row.date;
+        }, function (row) {
+          return React__default.createElement(EventInfoItem, {
+            image: row.image,
+            name: row.eventName
+          });
+        }, function (row) {
+          return row.currency + row.amount;
+        }]
+      };
+  }
+
+  return config;
+};
+
+var Row = function Row(_ref) {
+  var row = _ref.row,
+      handleDetailsInfo = _ref.handleDetailsInfo;
+  return React__default.createElement(TableRow, {
+    sx: {
+      '& > *': {
+        borderBottom: 'unset'
+      }
+    }
+  }, tableConfig().body.map(function (column, index) {
+    return React__default.createElement(TableCell, {
+      component: "th",
+      scope: "row",
+      key: index
+    }, column(row));
+  }), React__default.createElement(TableCell, {
+    component: "th",
+    scope: "row"
+  }, React__default.createElement("button", {
+    type: 'button',
+    className: "order-details-button",
+    onClick: function onClick() {
+      return handleDetailsInfo(row.id);
+    }
+  }, "Details")));
+};
+
+var MyTicketsContainer = function MyTicketsContainer(_ref) {
+  var _data$orders;
+
+  var _ref$handleDetailsInf = _ref.handleDetailsInfo,
+      handleDetailsInfo = _ref$handleDetailsInf === void 0 ? function () {} : _ref$handleDetailsInf,
+      _ref$onGetOrdersSucce = _ref.onGetOrdersSuccess,
+      onGetOrdersSuccess = _ref$onGetOrdersSucce === void 0 ? function () {} : _ref$onGetOrdersSucce,
+      _ref$onGetOrdersError = _ref.onGetOrdersError,
+      onGetOrdersError = _ref$onGetOrdersError === void 0 ? function () {} : _ref$onGetOrdersError,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'dark' : _ref$theme;
+
+  var _useState = React.useState(null),
+      data = _useState[0],
+      setData = _useState[1];
+
+  var _useState2 = React.useState(true),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var _useState3 = React.useState(10),
+      limit = _useState3[0],
+      setLimit = _useState3[1];
+
+  var _useState4 = React.useState(''),
+      filter = _useState4[0],
+      setFilter = _useState4[1]; //just once
+
+
+  React.useEffect(function () {
+    fetchData(1, limit, filter);
+  }, []);
+
+  var fetchData = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(page, limit, filter) {
+      var response, _data;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              _context.next = 4;
+              return getOrders(page, limit, filter);
+
+            case 4:
+              response = _context.sent;
+              onGetOrdersSuccess(response);
+              _data = _get(response, 'data.data.attributes');
+              _data.page -= 1;
+              setData(_data);
+              _context.next = 14;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](0);
+              onGetOrdersError(_context.t0);
+
+            case 14:
+              _context.prev = 14;
+              setLoading(false);
+              return _context.finish(14);
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 11, 14, 17]]);
+    }));
+
+    return function fetchData(_x, _x2, _x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var handleChangePage = function handleChangePage(_event, newPage) {
+    fetchData(newPage + 1, limit, filter);
+  };
+
+  var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
+    fetchData(1, +event.target.value, filter);
+    setLimit(+event.target.value);
+  };
+
+  var onChange = function onChange(_event, eventFilter) {
+    fetchData(1, limit, (eventFilter == null ? void 0 : eventFilter.url_name) || '');
+    setFilter((eventFilter == null ? void 0 : eventFilter.url_name) || '');
+  };
+
+  return React__default.createElement("div", {
+    className: "my-ticket " + theme
+  }, loading && React__default.createElement("div", {
+    className: "loading"
+  }, React__default.createElement(CircularProgress, null)), data && React__default.createElement(React__default.Fragment, null, React__default.createElement(Autocomplete, {
+    disablePortal: true,
+    id: "combo-box-demo",
+    getOptionLabel: function getOptionLabel(option) {
+      return option.event_name;
+    },
+    onChange: onChange,
+    options: data.purchased_events,
+    sx: {
+      width: 300
+    },
+    renderInput: function renderInput(params) {
+      return React__default.createElement(TextField, Object.assign({}, params, {
+        label: "Events"
+      }));
+    }
+  }), React__default.createElement(TableContainer, {
+    component: Paper,
+    className: "my-ticket-table"
+  }, React__default.createElement(Table, {
+    "aria-label": "collapsible table"
+  }, React__default.createElement(TableHead, null, React__default.createElement(TableRow, null, tableConfig().header.map(function (column, index) {
+    return React__default.createElement(TableCell, {
+      key: index
+    }, column);
+  }), React__default.createElement(TableCell, null))), React__default.createElement(TableBody, null, (_data$orders = data.orders) == null ? void 0 : _data$orders.map(function (row) {
+    return React__default.createElement(Row, {
+      key: row.id,
+      row: row,
+      handleDetailsInfo: handleDetailsInfo
+    });
+  })))), React__default.createElement(TablePagination, {
+    rowsPerPageOptions: [10, 25, 100],
+    component: "div",
+    count: data.total_count,
+    rowsPerPage: limit,
+    page: data.page,
+    onPageChange: handleChangePage,
+    onRowsPerPageChange: handleChangeRowsPerPage
+  })));
+};
+
+var TicketsTable = function TicketsTable(_ref) {
+  var _ref$tickets = _ref.tickets,
+      tickets = _ref$tickets === void 0 ? [] : _ref$tickets;
+  return React__default.createElement("div", {
+    className: 'tickets-box'
+  }, 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, "Ticket ID"), React__default.createElement(TableCell, null, "Ticket Type"), React__default.createElement(TableCell, null, "Ticket Holder Name"), React__default.createElement(TableCell, null, "Status"), React__default.createElement(TableCell, null, "Download"))), 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, ticket.hash), React__default.createElement(TableCell, null, ticket.ticket_type), React__default.createElement(TableCell, null, ticket.holder_name), React__default.createElement(TableCell, null, ticket.status), React__default.createElement(TableCell, null, React__default.createElement("a", {
+      className: 'download-button',
+      href: ticket.pdf_link,
+      download: true
+    }, "Download"))), !!((_ticket$add_ons = ticket.add_ons) != null && _ticket$add_ons.length) && React__default.createElement(TableRow, null, React__default.createElement(TableCell, {
+      colSpan: 5
+    }, 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) {
+  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 _ref$onGetOrdersSucce = _ref.onGetOrdersSuccess,
+      onGetOrdersSuccess = _ref$onGetOrdersSucce === void 0 ? function () {} : _ref$onGetOrdersSucce,
+      _ref$onGetOrdersError = _ref.onGetOrdersError,
+      onGetOrdersError = _ref$onGetOrdersError === void 0 ? function () {} : _ref$onGetOrdersError;
+
+  var _useState = React.useState({}),
+      data = _useState[0],
+      setData = _useState[1];
+
+  var _useState2 = React.useState(true),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  React.useEffect(function () {
+    _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var orderId, params, response, _data;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              orderId = '';
+
+              if (typeof window !== 'undefined') {
+                params = new URL("" + window.location).searchParams;
+                orderId = params.get('o') || '';
+              }
+
+              _context.next = 6;
+              return getOrderDetails(orderId);
+
+            case 6:
+              response = _context.sent;
+              onGetOrdersSuccess(response);
+              _data = _get(response, 'data.data.attributes');
+              setData(_data);
+              _context.next = 15;
+              break;
+
+            case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](0);
+              onGetOrdersError(_context.t0);
+
+            case 15:
+              _context.prev = 15;
+              setLoading(false);
+              return _context.finish(15);
+
+            case 18:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 12, 15, 18]]);
+    }))();
+  }, []);
+  return React__default.createElement("div", {
+    className: "order-details"
+  }, loading ? React__default.createElement("div", {
+    className: "loading"
+  }, React__default.createElement(CircularProgress, null)) : React__default.createElement(React__default.Fragment, null, React__default.createElement("h1", {
+    className: "layout-title"
+  }, "Order Details"), React__default.createElement("div", {
+    className: "order-summary-box"
+  }, React__default.createElement("h4", {
+    className: "sub-title"
+  }, "Order Summary"), React__default.createElement("div", {
+    className: "personal-link"
+  }, React__default.createElement("b", null, "Your personal share link for this event is: "), React__default.createElement("a", {
+    href: data == null ? void 0 : data.personal_share_link,
+    target: "_blank",
+    rel: "noreferrer"
+  }, data == null ? void 0 : data.personal_share_link)), 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, "Items"), React__default.createElement(TableCell, null, "Price"), React__default.createElement(TableCell, null, "Quantity"), React__default.createElement(TableCell, null, "Total"))), React__default.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) {
+    return React__default.createElement(TableRow, {
+      key: index
+    }, React__default.createElement(TableCell, null, React__default.createElement("b", null, "Ticket Type: "), ticket.name), React__default.createElement(TableCell, null, ticket.currency + ticket.price), React__default.createElement(TableCell, null, ticket.quantity), React__default.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) {
+    return React__default.createElement(TableRow, {
+      key: index
+    }, React__default.createElement(TableCell, null, React__default.createElement("b", null, "Add-On: "), ticket.name), React__default.createElement(TableCell, null, ticket.currency + ticket.price), React__default.createElement(TableCell, null, ticket.quantity), React__default.createElement(TableCell, null, ticket.currency + ticket.total));
+  }), React__default.createElement(TableRow, {
+    className: "total-row"
+  }, React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null, "Total"), React__default.createElement(TableCell, null, getTotal(data))))))), React__default.createElement(TicketsTable, {
+    tickets: data.tickets
+  }), React__default.createElement("div", {
+    className: "return-button-container"
+  }, React__default.createElement("button", {
+    type: "button",
+    className: "return-button",
+    onClick: function onClick() {
+      if (typeof window !== 'undefined') {
+        window.location.assign('/orders');
+      }
+    }
+  }, "Return to Order History"))));
+};
+
 exports.BillingInfoContainer = BillingInfoContainer;
 exports.ConfirmationContainer = ConfirmationContainer;
 exports.LoginModal = LoginModal;
+exports.MyTicketsContainer = MyTicketsContainer;
+exports.OrderDetailsContainer = OrderDetailsContainer;
 exports.PaymentContainer = PaymentContainer;
 exports.TicketsContainer = TicketsContainer;
 exports.createFixedFloatNormalizer = createFixedFloatNormalizer;