tf-checkout-react 1.7.7 → 1.7.13

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

@@ -33,6 +33,7 @@ export interface IPaymentPage {
     stripePublishableKey?: string;
     stripeAccountId?: string;
     onStripeReady?: (stripe: any, elements: any) => void;
+    onPaymentElementChange?: (event: any) => void;
     enablePaymentPlan?: boolean;
 }
-export declare const PaymentContainer: ({ paymentFields, handlePayment, formTitle, errorText, checkoutData, onErrorClose, onGetPaymentDataSuccess, onGetPaymentDataError, onPaymentError, themeOptions, elementsOptions, paymentElementOptions, onCountdownFinish, enableTimer, orderInfoLabel, paymentInfoLabel, displayPaymentButton, hidePaymentForm, hideFieldsBlock, isSinglePageCheckout, stripePublishableKey, stripeAccountId, onStripeReady, enablePaymentPlan, }: IPaymentPage) => JSX.Element;
+export declare const PaymentContainer: ({ paymentFields, handlePayment, formTitle, errorText, checkoutData, onErrorClose, onGetPaymentDataSuccess, onGetPaymentDataError, onPaymentError, themeOptions, elementsOptions, paymentElementOptions, onCountdownFinish, enableTimer, orderInfoLabel, paymentInfoLabel, displayPaymentButton, hidePaymentForm, hideFieldsBlock, isSinglePageCheckout, stripePublishableKey, stripeAccountId, onStripeReady, onPaymentElementChange, enablePaymentPlan, }: IPaymentPage) => JSX.Element;

package/dist/constants/index.d.ts

@@ -2,5 +2,6 @@ export declare const X_TF_ECOMMERCE = "X-TF-ECOMMERCE";
 export declare const FEES_STYLES: {
     TRADITIONAL: string;
     DISPLAY_BOTH: string;
+    FINAL_WITH_BREAKDOWN: string;
 };
 export declare const DEFAULT_FEES_STYLE: string;

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

@@ -525,7 +525,8 @@ publicRequest.setGuestToken = function (guestToken) {
 var X_TF_ECOMMERCE = 'X-TF-ECOMMERCE';
 var FEES_STYLES = {
   TRADITIONAL: 'TRADITIONAL',
-  DISPLAY_BOTH: 'DISPLAY_BOTH'
+  DISPLAY_BOTH: 'DISPLAY_BOTH',
+  FINAL_WITH_BREAKDOWN: 'FINAL_WITH_BREAKDOWN'
 };
 var DEFAULT_FEES_STYLE = FEES_STYLES.TRADITIONAL;
 
@@ -5640,7 +5641,8 @@ var PaymentPlanSection = function PaymentPlanSection(props) {
 // Wrapper component to access Stripe hooks inside Elements context
 var StripeWrapper = function StripeWrapper(_ref) {
   var options = _ref.options,
-    onStripeReady = _ref.onStripeReady;
+    onStripeReady = _ref.onStripeReady,
+    onPaymentElementChange = _ref.onPaymentElementChange;
   var stripe = reactStripeJs.useStripe();
   var elements = reactStripeJs.useElements();
   React.useEffect(function () {
@@ -5649,7 +5651,8 @@ var StripeWrapper = function StripeWrapper(_ref) {
     }
   }, [stripe, elements, onStripeReady]);
   return React__default.createElement(reactStripeJs.PaymentElement, {
-    options: options
+    options: options,
+    onChange: onPaymentElementChange
   });
 };
 var initialPaymentPlanConfiguration = {
@@ -5741,6 +5744,7 @@ var PaymentContainer = function PaymentContainer(_ref2) {
     stripeAccountId = _ref2.stripeAccountId,
     _ref2$onStripeReady = _ref2.onStripeReady,
     onStripeReady = _ref2$onStripeReady === void 0 ? _identity : _ref2$onStripeReady,
+    onPaymentElementChange = _ref2.onPaymentElementChange,
     _ref2$enablePaymentPl = _ref2.enablePaymentPlan,
     enablePaymentPlan = _ref2$enablePaymentPl === void 0 ? true : _ref2$enablePaymentPl;
   var _useState = React.useState(initialReviewValues),
@@ -6089,11 +6093,13 @@ var PaymentContainer = function PaymentContainer(_ref2) {
         className: "add-on-container"
       }, React__default.createElement("span", null, item.quantity), React__default.createElement("span", {
         className: "add-on-x"
-      }, ' x '), React__default.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React__default.createElement("span", null, item.name), React__default.createElement("span", null, ' - '), React__default.createElement("span", null, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency) + ' (incl. fees)', CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)), React__default.createElement("span", {
+      }, ' x '), React__default.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React__default.createElement("span", null, item.name), React__default.createElement("span", null, ' - '), React__default.createElement("span", null, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency) + ' (incl. fees)', CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency), CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency)), React__default.createElement("span", {
         className: "add-on-each"
       }, ' each')), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && React__default.createElement("p", {
         className: "fees"
-      }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)"));
+      }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)"), CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && parseFloat(item.price) - parseFloat(item.cost) > 0 && React__default.createElement("p", {
+        className: "fees"
+      }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency) + " + " + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price) - parseFloat(item.cost)), currency) + " fee)"));
     })));
   })), !isFreeTickets && paymentPlanIsAvailable && React__default.createElement("div", {
     className: "payment_toggle"
@@ -6122,7 +6128,8 @@ var PaymentContainer = function PaymentContainer(_ref2) {
     options: elementsOptions
   }, React__default.createElement(StripeWrapper, {
     onStripeReady: onStripeReady,
-    options: paymentElementOptions
+    options: paymentElementOptions,
+    onPaymentElementChange: onPaymentElementChange
   })))) : displayPaymentButton ? React__default.createElement("div", {
     className: "payment_button " + (paymentIsLoading ? 'disabled-payment-button' : '')
   }, React__default.createElement("button", {
@@ -6439,38 +6446,34 @@ var useStripePayment = function useStripePayment(_ref) {
     isBrowser = _ref.isBrowser;
   var processPayment = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(paymentDataResponse, values, formikHelpers, checkoutResponse, checkoutUpdateResponse, paymentData) {
-      var attributes, isFreeTickets, updatedOrderData, eventId, _yield$elementsRef$cu, submitError, paymentContext, _yield$stripeRef$curr, confirmError, paymentResponse;
+      var attributes, isFreeTickets, updatedOrderData, eventId, _yield$elementsRef$cu, submitError, paymentContext, confirmParams, rawPhone, e164Phone, _yield$stripeRef$curr, confirmError, paymentResponse;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             attributes = paymentData.attributes, isFreeTickets = paymentData.isFreeTickets, updatedOrderData = paymentData.updatedOrderData, eventId = paymentData.eventId;
             if (isFreeTickets) {
-              _context.next = 25;
+              _context.next = 23;
               break;
             }
             if (stripeRef.current) {
-              _context.next = 6;
+              _context.next = 5;
               break;
             }
             setError('Stripe is not ready');
-            console.log('Stripe is not ready in billing-info-container');
             return _context.abrupt("return", null);
-          case 6:
-            console.log('Stripe confirmPayment in billing-info-container');
-            // Step 1: Submit elements first
-            _context.next = 9;
+          case 5:
+            _context.next = 7;
             return elementsRef.current.submit();
-          case 9:
+          case 7:
             _yield$elementsRef$cu = _context.sent;
             submitError = _yield$elementsRef$cu.error;
             if (!submitError) {
-              _context.next = 15;
+              _context.next = 12;
               break;
             }
             setError('' + (submitError == null ? void 0 : submitError.message));
-            console.log('Stripe elements.submit() error in billing-info-container', submitError);
             return _context.abrupt("return", null);
-          case 15:
+          case 12:
             // Step 2: Store payment context before potential redirect
             paymentContext = {
               attributes: attributes,
@@ -6485,30 +6488,38 @@ var useStripePayment = function useStripePayment(_ref) {
             };
             localStorage.setItem('stripe_payment_context', JSON.stringify(paymentContext));
             // Step 3: Confirm payment with current page return URL
-            _context.next = 19;
+            confirmParams = {
+              return_url: window.location.href + (window.location.href.includes('?') ? '&' : '?') + 'payment_return=true'
+            };
+            if (values != null && values.phone) {
+              rawPhone = String(values.phone).replace(/[\s\-().]/g, '');
+              e164Phone = rawPhone.startsWith('+') ? rawPhone : "+" + rawPhone;
+              confirmParams.payment_method_data = {
+                billing_details: {
+                  phone: e164Phone
+                }
+              };
+            }
+            _context.next = 18;
             return stripeRef.current.confirmPayment({
               clientSecret: paymentDataResponse.data.attributes.payment_method.stripe_client_secret,
               elements: elementsRef.current,
-              confirmParams: {
-                return_url: window.location.href + (window.location.href.includes('?') ? '&' : '?') + 'payment_return=true'
-              },
+              confirmParams: confirmParams,
               redirect: 'if_required'
             });
-          case 19:
+          case 18:
             _yield$stripeRef$curr = _context.sent;
             confirmError = _yield$stripeRef$curr.error;
             if (!confirmError) {
-              _context.next = 25;
+              _context.next = 23;
               break;
             }
             setError('' + (confirmError == null ? void 0 : confirmError.message));
-            console.log('Stripe confirmPayment error in billing-info-container');
             return _context.abrupt("return", null);
-          case 25:
-            console.log('Stripe confirmPayment success in billing-info-container');
+          case 23:
             // Handle payment middleware for non-redirect payments
             paymentResponse = null;
-            _context.next = 29;
+            _context.next = 26;
             return handlePaymentMiddleWare(null, {}, {
               reviewData: attributes,
               isFreeTickets: isFreeTickets,
@@ -6526,9 +6537,9 @@ var useStripePayment = function useStripePayment(_ref) {
                 throw error;
               }
             });
-          case 29:
+          case 26:
             return _context.abrupt("return", paymentResponse);
-          case 30:
+          case 27:
           case "end":
             return _context.stop();
         }
@@ -7015,7 +7026,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref6) {
     setSingleCheckoutAddOns = _useState25[1];
   var orderIsFree = !Number(checkoutData == null ? void 0 : checkoutData.total);
   React.useEffect(function () {
-    var hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId');
+    var hasUniqueId = _get(data, '[0].uniqueId');
     var isEqualData = _isEqual(prevData.current, data);
     if (!hasUniqueId || !isEqualData) {
       setDataWithUniqueIds(assingUniqueIds(data));
@@ -7023,7 +7034,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref6) {
         prevData.current = data;
       }
     }
-  }, [dataWithUniqueIds, data]);
+  }, [data]);
   var getQuantity = React.useCallback(function (cart) {
     if (cart === void 0) {
       cart = [];
@@ -7979,6 +7990,11 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref6) {
       checkoutData: checkoutData,
       elementsOptions: elementsOptions,
       paymentElementOptions: {
+        fields: {
+          billingDetails: {
+            phone: 'never'
+          }
+        },
         wallets: {
           applePay: (checkoutUpdateData == null ? void 0 : (_checkoutUpdateData$a6 = checkoutUpdateData.additional_payment_information) == null ? void 0 : (_checkoutUpdateData$a7 = _checkoutUpdateData$a6.stripe_wallets) == null ? void 0 : _checkoutUpdateData$a7.applePay) || 'never',
           googlePay: (checkoutUpdateData == null ? void 0 : (_checkoutUpdateData$a8 = checkoutUpdateData.additional_payment_information) == null ? void 0 : (_checkoutUpdateData$a9 = _checkoutUpdateData$a8.stripe_wallets) == null ? void 0 : _checkoutUpdateData$a9.googlePay) || 'never'
@@ -10271,6 +10287,12 @@ var TicketsSection = function TicketsSection(_ref) {
     var ticketPriceWithFees = priceSymbol + " " + (+ticket.basePrice).toFixed(2);
     var ticketOldPriceWithFees = priceSymbol + " " + (+ticket.oldBasePrice).toFixed(2);
     var ticketOldPriceWithoutFees = priceSymbol + " " + (+ticket.oldCost).toFixed(2);
+    var ticketFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost;
+    var ticketFinalPriceFormatted = priceSymbol + " " + Math.round(ticketFinalPrice);
+    var ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost;
+    var ticketOldFinalPriceFormatted = priceSymbol + " " + Math.round(ticketOldFinalPrice);
+    var ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2);
+    var ticketBreakdown = !ticket.feeIncluded ? '(+ fees at checkout)' : !ticket.isForward ? null : parseFloat(ticketFeeAmount) > 0 ? "(" + priceSymbol + " " + (+ticket.cost).toFixed(2) + " + " + priceSymbol + " " + ticketFeeAmount + " fee)" : null;
     var isSoldOut = ticket.sold_out || !(ticket.displayTicket || ticket.slotGroupId) || ticket.soldOut;
     var ticketSelect = function ticketSelect(event) {
       var value = event.target.value;
@@ -10281,8 +10303,8 @@ var TicketsSection = function TicketsSection(_ref) {
       ticketIsDiscounted = true;
     }
     var ticketIsFree = +ticket.price === 0;
-    var discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketOldPriceWithoutFees : ticketOldPriceWithFees;
-    var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketPriceWithoutFees : ticketPriceWithFees;
+    var discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN ? ticketOldFinalPriceFormatted : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketOldPriceWithoutFees : ticketOldPriceWithFees;
+    var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN ? ticketFinalPriceFormatted : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketPriceWithoutFees : ticketPriceWithFees;
     var isNewGroupTicket = (ticket == null ? void 0 : ticket.groupName) !== ((_arr = arr[i - 1]) == null ? void 0 : _arr.groupName);
     return React__default.createElement(React__default.Fragment, {
       key: ticket.id || ticket.name
@@ -10325,7 +10347,7 @@ var TicketsSection = function TicketsSection(_ref) {
       className: isSoldOut ? 'sold-out' : ''
     }, ticketPriceElem), !isSoldOut && !ticketIsFree && React__default.createElement("p", {
       className: "fees"
-    }, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && "(" + ticketPriceWithFees + " with fees)")), React__default.createElement("div", {
+    }, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && "(" + ticketPriceWithFees + " with fees)", CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && ticketBreakdown)), React__default.createElement("div", {
       className: "event-detail__tier-state",
       style: {
         minWidth: 55
@@ -10349,6 +10371,12 @@ var TicketsSection = function TicketsSection(_ref) {
     var ticketPriceWithFees = priceSymbol + " " + (+ticket.basePrice).toFixed(2);
     var ticketOldPriceWithFees = priceSymbol + " " + (+ticket.oldBasePrice).toFixed(2);
     var ticketOldPriceWithoutFees = priceSymbol + " " + (+ticket.oldCost).toFixed(2);
+    var ticketFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost;
+    var ticketFinalPriceFormatted = priceSymbol + " " + Math.round(ticketFinalPrice);
+    var ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost;
+    var ticketOldFinalPriceFormatted = priceSymbol + " " + Math.round(ticketOldFinalPrice);
+    var ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2);
+    var ticketBreakdown = !ticket.feeIncluded ? '(+ fees at checkout)' : !ticket.isForward ? null : parseFloat(ticketFeeAmount) > 0 ? "(" + priceSymbol + " " + (+ticket.cost).toFixed(2) + " + " + priceSymbol + " " + ticketFeeAmount + " fee)" : null;
     var isSoldOut = ticket.sold_out || !(ticket.displayTicket || ticket.slotGroupId) || ticket.soldOut;
     var ticketSelect = function ticketSelect(event) {
       var value = event.target.value;
@@ -10359,8 +10387,8 @@ var TicketsSection = function TicketsSection(_ref) {
       ticketIsDiscounted = true;
     }
     var ticketIsFree = +ticket.price === 0;
-    var discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketOldPriceWithoutFees : ticketOldPriceWithFees;
-    var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketPriceWithoutFees : ticketPriceWithFees;
+    var discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN ? ticketOldFinalPriceFormatted : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketOldPriceWithoutFees : ticketOldPriceWithFees;
+    var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN ? ticketFinalPriceFormatted : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketPriceWithoutFees : ticketPriceWithFees;
     var isNewGroupTicket = (ticket == null ? void 0 : ticket.groupName) !== ((_arr2 = arr[i - 1]) == null ? void 0 : _arr2.groupName);
     return React__default.createElement(React__default.Fragment, {
       key: ticket.id || ticket.name
@@ -10403,7 +10431,7 @@ var TicketsSection = function TicketsSection(_ref) {
       className: isSoldOut ? 'sold-out' : ''
     }, ticketPriceElem), !isSoldOut && !ticketIsFree && React__default.createElement("p", {
       className: "fees"
-    }, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && "(" + ticketPriceWithFees + " with fees)"), ticket.depositPercent && React__default.createElement("p", {
+    }, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && "(" + ticketPriceWithFees + " with fees)", CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && ticketBreakdown), ticket.depositPercent && React__default.createElement("p", {
       className: "deposits"
     }, ticket.depositPercent + '% DEPOSIT')), React__default.createElement("div", {
       className: "event-detail__tier-state",
@@ -10461,13 +10489,19 @@ var TimeSlotTicketRow = function TimeSlotTicketRow(_ref) {
   var ticketPriceWithFees = priceSymbol + " " + (+ticket.basePrice).toFixed(2);
   var ticketOldPriceWithFees = priceSymbol + " " + (+ticket.oldBasePrice).toFixed(2);
   var ticketOldPriceWithoutFees = priceSymbol + " " + (+ticket.oldCost).toFixed(2);
+  var ticketFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost;
+  var ticketFinalPriceFormatted = priceSymbol + " " + Math.round(ticketFinalPrice);
+  var ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost;
+  var ticketOldFinalPriceFormatted = priceSymbol + " " + Math.round(ticketOldFinalPrice);
+  var ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2);
+  var ticketBreakdown = !ticket.feeIncluded ? '(+ fees at checkout)' : !ticket.isForward ? null : parseFloat(ticketFeeAmount) > 0 ? "(" + priceSymbol + " " + (+ticket.cost).toFixed(2) + " + " + priceSymbol + " " + ticketFeeAmount + " fee)" : null;
   var ticketIsDiscounted = false;
   if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
     ticketIsDiscounted = true;
   }
   var ticketIsFree = +ticket.price === 0;
-  var discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketOldPriceWithoutFees : ticketOldPriceWithFees;
-  var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketPriceWithoutFees : ticketPriceWithFees;
+  var discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN ? ticketOldFinalPriceFormatted : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketOldPriceWithoutFees : ticketOldPriceWithFees;
+  var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN ? ticketFinalPriceFormatted : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ? ticketPriceWithoutFees : ticketPriceWithFees;
   var handleTimeChange = function handleTimeChange(event) {
     var selectedTimeKey = event.target.value;
     var selectedOption = availableTimeSlots.find(function (slot) {
@@ -10521,7 +10555,7 @@ var TimeSlotTicketRow = function TimeSlotTicketRow(_ref) {
     className: isSoldOut ? 'sold-out' : ''
   }, ticketPriceElem), !isSoldOut && !ticketIsFree && React__default.createElement("p", {
     className: "fees"
-  }, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && "(" + ticketPriceWithFees + " with fees)")), !isSoldOut && React__default.createElement("div", {
+  }, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && "(" + ticketPriceWithFees + " with fees)", CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && ticketBreakdown)), !isSoldOut && React__default.createElement("div", {
     className: "event-detail__tier-state time-slot-selectors-container"
   }, React__default.createElement(Box, {
     sx: {
@@ -15887,19 +15921,23 @@ var OrderDetails = function OrderDetails(_ref3) {
       className: "add-on-container"
     }, React__default.createElement("span", null, item.quantity), React__default.createElement("span", {
       className: "add-on-x"
-    }, ' x '), React__default.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React__default.createElement("span", null, item.name), React__default.createElement("span", null, ' - '), React__default.createElement("span", null, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency) + ' (incl. fees)', CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)), React__default.createElement("span", {
+    }, ' x '), React__default.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React__default.createElement("span", null, item.name), React__default.createElement("span", null, ' - '), React__default.createElement("span", null, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency) + ' (incl. fees)', CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency), CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency)), React__default.createElement("span", {
       className: "add-on-each"
     }, ' each')), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && React__default.createElement("p", {
       className: "fees"
-    }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)"));
+    }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)"), CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && parseFloat(item.price) - parseFloat(item.cost) > 0 && React__default.createElement("p", {
+      className: "fees"
+    }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency) + " + " + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price) - parseFloat(item.cost)), currency) + " fee)"));
   };
   var defaultTableRenderer = function defaultTableRenderer(item) {
     return React__default.createElement("div", null, React__default.createElement("div", {
       key: item.id,
       className: "table-type-container"
-    }, React__default.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React__default.createElement("span", null, item.name), React__default.createElement("span", null, ' - '), React__default.createElement("span", null, "Guest Count", ': '), React__default.createElement("span", null, item.guestCount)), React__default.createElement("div", null, React__default.createElement("span", null, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency) + ' (incl. fees)', CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)), React__default.createElement("br", null), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && React__default.createElement("p", {
+    }, React__default.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React__default.createElement("span", null, item.name), React__default.createElement("span", null, ' - '), React__default.createElement("span", null, "Guest Count", ': '), React__default.createElement("span", null, item.guestCount)), React__default.createElement("div", null, React__default.createElement("span", null, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency) + ' (incl. fees)', CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency), CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency)), React__default.createElement("br", null), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && React__default.createElement("p", {
+      className: "fees"
+    }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)"), CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && parseFloat(item.price) - parseFloat(item.cost) > 0 && React__default.createElement("p", {
       className: "fees"
-    }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)")));
+    }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency) + " + " + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price) - parseFloat(item.cost)), currency) + " fee)")));
   };
   return React__default.createElement("div", {
     className: "payment_page payment_page_single"