tf-checkout-react 1.6.6-beta.35 → 1.6.6-beta.36

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

@@ -36,5 +36,7 @@ export interface IConfirmationPage {
     showReferralsInfoText?: boolean;
     showCopyInfoModal?: boolean;
     showPricingNoteSection?: boolean;
+    showOrderDetailsBtn?: boolean;
+    onOrderDetailsClick?: (data: ICheckoutCompleteData) => void;
 }
-export declare const ConfirmationContainer: ({ confirmationLabels, hasCopyIcon, isReferralEnabled, showDefaultShareButtons, messengerAppId, shareButtons, onGetConfirmationDataSuccess, onGetConfirmationDataError, orderHash, onLinkCopied, clientLabel, showReferralsInfoText, showCopyInfoModal, showPricingNoteSection, }: IConfirmationPage) => JSX.Element;
+export declare const ConfirmationContainer: ({ confirmationLabels, hasCopyIcon, isReferralEnabled, showDefaultShareButtons, messengerAppId, shareButtons, onGetConfirmationDataSuccess, onGetConfirmationDataError, orderHash, onLinkCopied, clientLabel, showReferralsInfoText, showCopyInfoModal, showPricingNoteSection, showOrderDetailsBtn, onOrderDetailsClick, }: IConfirmationPage) => JSX.Element;

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

@@ -35,6 +35,7 @@ interface OrderDetailsTypes {
     referralTitle?: string;
     itemsTitle?: string;
     ticketsTitle?: string;
+    displayLoading?: boolean;
 }
 export interface CustomFieldOption {
     id: string;
@@ -60,5 +61,5 @@ export interface CustomFieldTypes {
     ticketHash?: string;
     options?: CustomFieldOption[];
 }
-export declare const OrderDetailsContainer: ({ columns, onGetOrdersSuccess, onGetOrdersError, onRemoveFromResaleSuccess, onRemoveFromResaleError, onResaleTicketSuccess, onResaleTicketError, onUpdateOrderCustomFieldsSuccess, onUpdateOrderCustomFieldsError, onUpdateTicketHolderCustomFieldsSuccess, onUpdateTicketHolderCustomFieldsError, onReturnButtonClick, personalLinkIcon, displayColumnNameInRow, canSellTicket, ticketsTableColumns, ordersPath, orderId: pOrderId, referralTitle, itemsTitle, ticketsTitle, themeOptions, }: OrderDetailsTypes) => JSX.Element;
+export declare const OrderDetailsContainer: ({ columns, onGetOrdersSuccess, onGetOrdersError, onRemoveFromResaleSuccess, onRemoveFromResaleError, onResaleTicketSuccess, onResaleTicketError, onUpdateOrderCustomFieldsSuccess, onUpdateOrderCustomFieldsError, onUpdateTicketHolderCustomFieldsSuccess, onUpdateTicketHolderCustomFieldsError, onReturnButtonClick, personalLinkIcon, displayColumnNameInRow, canSellTicket, ticketsTableColumns, ordersPath, orderId: pOrderId, referralTitle, itemsTitle, ticketsTitle, themeOptions, displayLoading, }: OrderDetailsTypes) => JSX.Element;
 export {};

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

@@ -7803,7 +7803,11 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     _ref$showCopyInfoModa = _ref.showCopyInfoModal,
     showCopyInfoModal = _ref$showCopyInfoModa === void 0 ? false : _ref$showCopyInfoModa,
     _ref$showPricingNoteS = _ref.showPricingNoteSection,
-    showPricingNoteSection = _ref$showPricingNoteS === void 0 ? false : _ref$showPricingNoteS;
+    showPricingNoteSection = _ref$showPricingNoteS === void 0 ? false : _ref$showPricingNoteS,
+    _ref$showOrderDetails = _ref.showOrderDetailsBtn,
+    showOrderDetailsBtn = _ref$showOrderDetails === void 0 ? false : _ref$showOrderDetails,
+    _ref$onOrderDetailsCl = _ref.onOrderDetailsClick,
+    onOrderDetailsClick = _ref$onOrderDetailsCl === void 0 ? _identity : _ref$onOrderDetailsCl;
   var inputRef = React.useRef(null);
   var _useState = React.useState(null),
     data = _useState[0],
@@ -7926,7 +7930,15 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }, data.attach_tickets ? 'Please bring them with you to the event' : confirmationHelper)))))), data.custom_confirmation_page_text && !data.custom_confirmation_page_text_full_replacement ? React__default.createElement("div", {
     className: "custom-confirmation-page-text",
     dangerouslySetInnerHTML: createMarkup(data.custom_confirmation_page_text)
-  }) : null, data.disable_referral === false && isReferralEnabled && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  }) : null, showOrderDetailsBtn && React__default.createElement("div", {
+    className: "order-details-button-container"
+  }, React__default.createElement(material.Button, {
+    className: "view-order-button",
+    variant: "contained",
+    onClick: function onClick() {
+      onOrderDetailsClick(data);
+    }
+  }, "View Order")), data.disable_referral === false && isReferralEnabled && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "referral_text_image_section"
   }, React__default.createElement("div", {
     className: "referral_text_section"
@@ -10599,7 +10611,9 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     itemsTitle = _ref$itemsTitle === void 0 ? '' : _ref$itemsTitle,
     _ref$ticketsTitle = _ref.ticketsTitle,
     ticketsTitle = _ref$ticketsTitle === void 0 ? 'Your Tickets' : _ref$ticketsTitle,
-    themeOptions = _ref.themeOptions;
+    themeOptions = _ref.themeOptions,
+    _ref$displayLoading = _ref.displayLoading,
+    displayLoading = _ref$displayLoading === void 0 ? false : _ref$displayLoading;
   var _useState = React.useState({}),
     data = _useState[0],
     setData = _useState[1];
@@ -10621,6 +10635,9 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   var _useState7 = React.useState(false),
     showOrderCustomFieldsSection = _useState7[0],
     setShowOrderCustomFieldsSection = _useState7[1];
+  var _useState8 = React.useState(false),
+    isLoading = _useState8[0],
+    setIsLoading = _useState8[1];
   var isTable = _get(data, 'tickets[0].is_table', false);
   var columnsProps = isTable ? [{
     label: 'Items'
@@ -10677,26 +10694,29 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
               _params = new URL("" + window.location).searchParams;
               _orderId = _params.get('o') || '';
             }
-            _context.next = 5;
+            setIsLoading(true);
+            _context.next = 6;
             return getOrderDetails(String(_orderId));
-          case 5:
+          case 6:
             response = _context.sent;
             onGetOrdersSuccess(response);
             _data = _get(response, 'data.attributes');
             setData(_data);
-            _context.next = 14;
+            setIsLoading(false);
+            _context.next = 17;
             break;
-          case 11:
-            _context.prev = 11;
+          case 13:
+            _context.prev = 13;
             _context.t0 = _context["catch"](0);
             onGetOrdersError(_context.t0);
-          case 14:
+            setIsLoading(false);
+          case 17:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 11]]);
+      }, _callee, null, [[0, 13]]);
     }))();
-  }, []);
+  }, [onGetOrdersError, onGetOrdersSuccess, pOrderId]);
   var handleSellTicket = function handleSellTicket(ticket) {
     var ticketTypesArr = data.items.ticket_types;
     var sellTicketType = _find(ticketTypesArr, function (ticketType) {
@@ -10913,6 +10933,18 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     };
   }();
   var theme = styles.createTheme(themeOptions != null ? themeOptions : {});
+  if (isLoading && displayLoading) {
+    return React__default.createElement(material.Backdrop, {
+      sx: {
+        color: '#fff',
+        backgroundColor: '#000000bd',
+        zIndex: 1205
+      },
+      open: true
+    }, React__default.createElement(material.CircularProgress, {
+      color: "inherit"
+    }));
+  }
   return React__default.createElement(styles.ThemeProvider, {
     theme: theme
   }, React__default.createElement("div", {