tf-checkout-react 1.0.63 → 1.0.67

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/common/FormikPhoneNumberField.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FieldInputProps } from 'formik';
+export interface INumberInField {
+    label: string | number | JSX.Element;
+    field: FieldInputProps<any>;
+}
+interface IOtherProps {
+    [key: string]: any;
+}
+export declare const FormikPhoneNumberField: ({ label, field, form: { touched, errors }, setFieldValue, ...rest }: INumberInField & IOtherProps) => JSX.Element;
+export {};

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/normalizers/index.d.ts

@@ -1,3 +1,4 @@
 export declare const currencyNormalizerCreator: (value: string | number, currency: string) => string;
 export declare const createFixedFloatNormalizer: (fixedValue: number) => (value: string | number) => string;
 export declare const getCurrencySymbolByCurrency: (currency?: string) => "£" | "€" | "₹" | "J$" | "NZ$" | "RM" | "Mex$" | "S$" | "A$" | "R" | "Ksh" | "₺" | "CA$" | "฿" | "Kr" | "kr" | "US$";
+export declare const removePlusSign: (string?: string) => string;

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

@@ -21,11 +21,12 @@ 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 MuiPhoneNumber = _interopDefault(require('material-ui-phone-number'));
+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');
@@ -934,6 +935,8 @@ var ENV = {
 };
 
 var isWindowDefined = typeof window !== 'undefined';
+var allowedOrigins = ['http://localhost', 'gtsb.io', 'gatsbyjs.io', 'https://www.houseofx.nyc', 'https://tickets-staging.houseofx.nyc'];
+var origin = isWindowDefined && window.location.origin;
 var ttfHeaders = {
   Accept: 'application/vnd.api+json',
   'Content-Type': 'application/vnd.api+json'
@@ -943,7 +946,9 @@ if (isWindowDefined && localStorage.getItem('auth_guest_token')) {
   ttfHeaders['Authorization-Guest'] = /*#__PURE__*/localStorage.getItem('auth_guest_token');
 }
 
-if (isWindowDefined && window.location.origin !== 'https://www.houseofx.nyc' && window.location.origin !== 'https://tickets-staging.houseofx.nyc' && !window.location.origin.includes('http://localhost')) {
+if (isWindowDefined && !allowedOrigins.some(function (el) {
+  return origin && origin.includes(el);
+})) {
   ttfHeaders['X-Source-Origin'] = 'houseofx.nyc';
 }
 
@@ -989,7 +994,9 @@ publicRequest.interceptors.request.use(function (config) {
     config.headers = _updatedHeaders;
   }
 
-  if (isWindowDefined && window.location.origin !== 'https://www.houseofx.nyc' && window.location.origin !== 'https://tickets-staging.houseofx.nyc' && !window.location.origin.includes('http://localhost')) {
+  if (isWindowDefined && !allowedOrigins.some(function (el) {
+    return origin && origin.includes(el);
+  })) {
     var _updatedHeaders2 = _extends({}, config.headers, {
       'X-Source-Origin': 'houseofx.nyc'
     });
@@ -1087,6 +1094,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() {
@@ -1689,13 +1703,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,
@@ -1713,7 +1720,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,
@@ -1722,11 +1728,6 @@ var CustomField = function CustomField(_ref) {
     fullWidth: true,
     error: !!error && isTouched,
     helperText: isTouched && error,
-    InputProps: {
-      classes: {
-        input: classes.input
-      }
-    },
     SelectProps: {
       "native": true,
       className: theme,
@@ -1772,13 +1773,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,
@@ -1794,7 +1788,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, {
@@ -1808,10 +1801,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,
@@ -1868,6 +1858,109 @@ var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
 
 var ErrorFocus = /*#__PURE__*/formik.connect(ErrorFocusInternal);
 
+var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
+  return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
+};
+var createFixedFloatNormalizer = function createFixedFloatNormalizer(fixedValue) {
+  return function (value) {
+    return value || "" + value === '0' ? (+value).toFixed(fixedValue) : '';
+  };
+};
+var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency) {
+  if (currency === void 0) {
+    currency = '';
+  }
+
+  switch (currency) {
+    case 'GBP':
+      return '£';
+
+    case 'EUR':
+      return '€';
+
+    case 'INR':
+      return '₹';
+
+    case 'JMD':
+      return 'J$';
+
+    case 'NZD':
+      return 'NZ$';
+
+    case 'MYR':
+      return 'RM';
+
+    case 'MXN':
+      return 'Mex$';
+
+    case 'SGD':
+      return 'S$';
+
+    case 'AUD':
+      return 'A$';
+
+    case 'ZAR':
+      return 'R';
+
+    case 'ke':
+      return 'Ksh';
+
+    case 'TRY':
+      return '₺';
+
+    case 'CAD':
+      return 'CA$';
+
+    case 'THB':
+      return '฿';
+
+    case 'ISK':
+      return 'Kr';
+
+    case 'SEK':
+      return 'kr';
+
+    default:
+      return 'US$';
+  }
+};
+var removePlusSign = function removePlusSign(string) {
+  if (string === void 0) {
+    string = '';
+  }
+
+  return string.replace('+', '');
+};
+
+var _excluded$2 = ["label", "field", "form", "setFieldValue"];
+var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
+  var label = _ref.label,
+      field = _ref.field,
+      _ref$form = _ref.form,
+      touched = _ref$form.touched,
+      errors = _ref$form.errors,
+      setFieldValue = _ref.setFieldValue,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  var error = _get(errors, field.name);
+
+  var isTouched = Boolean(_get(touched, field.name));
+  return React__default.createElement(MuiPhoneNumber, Object.assign({
+    name: 'phone',
+    onChange: function onChange(e) {
+      return setFieldValue("phone", removePlusSign(e));
+    },
+    variant: "outlined",
+    defaultCountry: 'us',
+    disableDropdown: true,
+    label: label,
+    error: !!error && isTouched,
+    helperText: isTouched && error,
+    fullWidth: true,
+    autoFormat: false
+  }, rest));
+};
+
 var getImage = function getImage(name) {
   if (name === void 0) {
     name = '';
@@ -2027,7 +2120,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') || '' : '';
@@ -2119,6 +2220,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);
@@ -2276,9 +2386,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,
@@ -2506,7 +2617,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             label: element.label,
             type: element.type,
             validate: getValidateFunctions(element, states),
-            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : CustomField,
+            setFieldValue: props.setFieldValue,
+            onBlur: props.handleBlur,
+            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? FormikPhoneNumberField : CustomField,
             selectOptions: element.name === 'country' ? countries : element.name === 'state' ? states : [],
             theme: theme
           })));
@@ -2578,73 +2691,6 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   }));
 };
 
-var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
-  return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
-};
-var createFixedFloatNormalizer = function createFixedFloatNormalizer(fixedValue) {
-  return function (value) {
-    return value || "" + value === '0' ? (+value).toFixed(fixedValue) : '';
-  };
-};
-var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency) {
-  if (currency === void 0) {
-    currency = '';
-  }
-
-  switch (currency) {
-    case 'GBP':
-      return '£';
-
-    case 'EUR':
-      return '€';
-
-    case 'INR':
-      return '₹';
-
-    case 'JMD':
-      return 'J$';
-
-    case 'NZD':
-      return 'NZ$';
-
-    case 'MYR':
-      return 'RM';
-
-    case 'MXN':
-      return 'Mex$';
-
-    case 'SGD':
-      return 'S$';
-
-    case 'AUD':
-      return 'A$';
-
-    case 'ZAR':
-      return 'R';
-
-    case 'ke':
-      return 'Ksh';
-
-    case 'TRY':
-      return '₺';
-
-    case 'CAD':
-      return 'CA$';
-
-    case 'THB':
-      return '฿';
-
-    case 'ISK':
-      return 'Kr';
-
-    case 'SEK':
-      return 'kr';
-
-    default:
-      return 'US$';
-  }
-};
-
 var options = {
   style: {
     base: {
@@ -2941,7 +2987,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],
@@ -3116,7 +3163,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",
@@ -3164,7 +3220,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     },
     conditions: conditions,
     stripeCardOptions: stripeCardOptions
-  }))))));
+  })))))));
 };
 
 var defaultSvg = 'https://img.icons8.com/ios-filled/50/000000/facebook-new.svg';
@@ -3375,6 +3431,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,
@@ -3969,7 +4028,9 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
       _ref$onGetOrdersSucce = _ref.onGetOrdersSuccess,
       onGetOrdersSuccess = _ref$onGetOrdersSucce === void 0 ? function () {} : _ref$onGetOrdersSucce,
       _ref$onGetOrdersError = _ref.onGetOrdersError,
-      onGetOrdersError = _ref$onGetOrdersError === void 0 ? function () {} : _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],
@@ -4052,9 +4113,9 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: 'my-ticket'
+    className: "my-ticket " + theme
   }, loading && React__default.createElement("div", {
-    className: 'loading'
+    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",
@@ -4073,7 +4134,7 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     }
   }), React__default.createElement(TableContainer, {
     component: Paper,
-    className: 'my-ticket-table'
+    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) {
@@ -4142,7 +4203,7 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
       _ref$onGetOrdersError = _ref.onGetOrdersError,
       onGetOrdersError = _ref$onGetOrdersError === void 0 ? function () {} : _ref$onGetOrdersError;
 
-  var _useState = React.useState(null),
+  var _useState = React.useState({}),
       data = _useState[0],
       setData = _useState[1];
 
@@ -4152,7 +4213,7 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
 
   React.useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var orderId, response, _data;
+      var orderId, params, response, _data;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
@@ -4160,50 +4221,58 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
             case 0:
               _context.prev = 0;
               setLoading(true);
-              orderId = window.location.href.split('/').slice(-1)[0];
-              _context.next = 5;
+              orderId = '';
+
+              if (typeof window !== 'undefined') {
+                params = new URL("" + window.location).searchParams;
+                orderId = params.get('o') || '';
+              }
+
+              _context.next = 6;
               return getOrderDetails(orderId);
 
-            case 5:
+            case 6:
               response = _context.sent;
               onGetOrdersSuccess(response);
               _data = _get(response, 'data.data.attributes');
               setData(_data);
-              _context.next = 14;
+              _context.next = 15;
               break;
 
-            case 11:
-              _context.prev = 11;
+            case 12:
+              _context.prev = 12;
               _context.t0 = _context["catch"](0);
               onGetOrdersError(_context.t0);
 
-            case 14:
-              _context.prev = 14;
+            case 15:
+              _context.prev = 15;
               setLoading(false);
-              return _context.finish(14);
+              return _context.finish(15);
 
-            case 17:
+            case 18:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 11, 14, 17]]);
+      }, _callee, null, [[0, 12, 15, 18]]);
     }))();
   }, []);
   return React__default.createElement("div", {
     className: "order-details"
   }, loading ? React__default.createElement("div", {
-    className: 'loading'
+    className: "loading"
   }, React__default.createElement(CircularProgress, null)) : React__default.createElement(React__default.Fragment, null, React__default.createElement("h1", {
-    className: 'layout-title'
+    className: "layout-title"
   }, "Order Details"), React__default.createElement("div", {
-    className: 'order-summary-box'
+    className: "order-summary-box"
   }, React__default.createElement("h4", {
-    className: 'sub-title'
-  }, "Order Summary"), React__default.createElement("div", null, React__default.createElement("b", null, "Your personal share link for this event is:", " "), React__default.createElement("a", {
+    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'
+    target: "_blank",
+    rel: "noreferrer"
   }, data == null ? void 0 : data.personal_share_link)), React__default.createElement(TableContainer, {
     component: Paper
   }, React__default.createElement(Table, {
@@ -4217,10 +4286,20 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
       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'
+    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;