tf-checkout-react 1.6.6-beta.13 → 1.6.6-beta.16

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

@@ -12,8 +12,9 @@ export interface IAddonContainterProps {
     onCountdownFinish?: () => void;
     onPendingVerification?: () => void;
     samePage?: boolean;
+    descriptionTrigger?: "click" | "hover";
 }
 export interface ObjectLiteral {
     [key: string]: any;
 }
-export declare const AddonsContainter: ({ classNamePrefix, enableBillingInfoAutoCreate, enableTimer, onGetAddonsPageInfoSuccess, onGetAddonsPageInfoError, onPostCheckoutSuccess, onPostCheckoutError, onConfirmSelectionSuccess, onConfirmSelectionError, onCountdownFinish, onPendingVerification, samePage, }: IAddonContainterProps) => JSX.Element;
+export declare const AddonsContainter: ({ classNamePrefix, enableBillingInfoAutoCreate, enableTimer, onGetAddonsPageInfoSuccess, onGetAddonsPageInfoError, onPostCheckoutSuccess, onPostCheckoutError, onConfirmSelectionSuccess, onConfirmSelectionError, onCountdownFinish, onPendingVerification, samePage, descriptionTrigger, }: IAddonContainterProps) => JSX.Element;

package/dist/components/ticketsContainer/InfoIcon.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
-declare const InfoIcon: () => JSX.Element;
+declare const InfoIcon: ({ size }: {
+    size?: number | undefined;
+}) => JSX.Element;
 export default InfoIcon;

package/dist/constants/index.d.ts

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

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { LoginModal } from './components/loginModal';
 export { MyTicketsContainer } from './components/myTicketsContainer';
 export { OrderDetailsContainer } from './components/orderDetailsContainer';
 export { setConfigs } from './utils/setConfigs';
+export { DEFAULT_FEES_STYLE } from './constants/index';
 export { TicketResaleContainer } from './components';
 export { RedirectModal } from './components/common/RedirectModal';
 export { RsvpContainer } from './components/rsvpContainer';

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

@@ -21,6 +21,7 @@ var _map = _interopDefault(require('lodash/map'));
 var nanoid = require('nanoid');
 var React = require('react');
 var React__default = _interopDefault(React);
+var reactTooltip = require('react-tooltip');
 var Box = _interopDefault(require('@mui/material/Box'));
 var CircularProgress = _interopDefault(require('@mui/material/CircularProgress'));
 var Countdown$1 = _interopDefault(require('react-countdown'));
@@ -506,7 +507,16 @@ publicRequest.setGuestToken = function (guestToken) {
   return publicRequest.defaults.headers.common['Authorization-Guest'] = guestToken;
 };
 
-var CONFIGS = {};
+var X_TF_ECOMMERCE = 'X-TF-ECOMMERCE';
+var FEES_STYLES = {
+  TRADITIONAL: 'TRADITIONAL',
+  DISPLAY_BOTH: 'DISPLAY_BOTH'
+};
+var DEFAULT_FEES_STYLE = FEES_STYLES.TRADITIONAL;
+
+var CONFIGS = {
+  FEES_STYLE: DEFAULT_FEES_STYLE
+};
 var setConfigs = function setConfigs(configs) {
   _forEach(configs, function (value, key) {
     CONFIGS[key] = value;
@@ -2356,6 +2366,36 @@ var VerificationPendingModal = function VerificationPendingModal(props) {
   }, React__default.createElement("div", null, message))) : null;
 };
 
+var InfoIcon = function InfoIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 17 : _ref$size;
+  return React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 17 17",
+    fill: "none"
+  }, React__default.createElement("circle", {
+    cx: "8.5",
+    cy: "8.5",
+    r: "8",
+    stroke: "black",
+    strokeWidth: "1"
+  }), React__default.createElement("rect", {
+    x: "7.5",
+    y: "4",
+    width: "2",
+    height: "2",
+    fill: "black"
+  }), React__default.createElement("rect", {
+    x: "7.5",
+    y: "7",
+    width: "2",
+    height: "5",
+    fill: "black"
+  }));
+};
+
 var Cross = "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\r\n<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\r\n<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\r\n\t width=\"94.926px\" height=\"94.926px\" viewBox=\"0 0 94.926 94.926\" style=\"enable-background:new 0 0 94.926 94.926;\"\r\n\t xml:space=\"preserve\">\r\n<g>\r\n\t<path d=\"M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0\r\n\t\tc-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096\r\n\t\tc-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476\r\n\t\tc0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62\r\n\t\ts1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z\"/>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n</svg>";
 
 var showZero = function showZero(value) {
@@ -3248,7 +3288,9 @@ var AddonsContainter = function AddonsContainter(_ref) {
     _onCountdownFinish = _ref$onCountdownFinis === void 0 ? _identity : _ref$onCountdownFinis,
     _ref$onPendingVerific = _ref.onPendingVerification,
     onPendingVerification = _ref$onPendingVerific === void 0 ? _identity : _ref$onPendingVerific,
-    samePage = _ref.samePage;
+    samePage = _ref.samePage,
+    _ref$descriptionTrigg = _ref.descriptionTrigger,
+    descriptionTrigger = _ref$descriptionTrigg === void 0 ? 'click' : _ref$descriptionTrigg;
   var eventId = getQueryVariable('event_id');
   var _useState = React.useState([]),
     addons = _useState[0],
@@ -3271,6 +3313,14 @@ var AddonsContainter = function AddonsContainter(_ref) {
   var _useState7 = React.useState(),
     pendingVerificationMessage = _useState7[0],
     setPendingVerificationMessage = _useState7[1];
+  var _useState8 = React.useState(null),
+    visibleDescription = _useState8[0],
+    setVisibleDescription = _useState8[1];
+  var handleDescriptionToggle = function handleDescriptionToggle(ticketId) {
+    setVisibleDescription(function (current) {
+      return current === ticketId ? null : ticketId;
+    });
+  };
   React.useEffect(function () {
     if (samePage) {
       window.localStorage.removeItem('add_ons');
@@ -3519,9 +3569,11 @@ var AddonsContainter = function AddonsContainter(_ref) {
       autoComplete: "off",
       className: "form_holder"
     }, React__default.createElement(React__default.Fragment, null, (isResale && addOnIsIncluded ? [] : addons).map(function (addon) {
+      var _addon$cost, _addon$price;
       var price = addon.feeIncluded ? addon.price : addon.cost;
-      var isAddonFree = Number(price) === 0;
-      var addonNormalizedPrice = isAddonFree ? 'FREE' : currencyNormalizerCreator(getNormalizedPrice(price), addon.currency);
+      var isAddonFree = Number(addon == null ? void 0 : addon.price) === 0;
+      var addOnNormalizedCost = isAddonFree ? 'FREE' : currencyNormalizerCreator(getNormalizedPrice((_addon$cost = addon == null ? void 0 : addon.cost) != null ? _addon$cost : 0), addon.currency);
+      var addonNormalizedPrice = isAddonFree ? 'FREE' : currencyNormalizerCreator(getNormalizedPrice(CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH ? (_addon$price = addon == null ? void 0 : addon.price) != null ? _addon$price : price : price), addon.currency);
       return React__default.createElement("div", {
         key: addon.id,
         className: classNamePrefix + "_product_block"
@@ -3536,11 +3588,37 @@ var AddonsContainter = function AddonsContainter(_ref) {
         className: classNamePrefix + "_product_info_block"
       }, React__default.createElement("div", {
         className: classNamePrefix + "_product_title"
-      }, addon.name), React__default.createElement("div", {
+      }, addon.name, addon.description && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
+        "aria-hidden": true,
+        className: "info-icon",
+        onClick: descriptionTrigger === 'click' ? function () {
+          return handleDescriptionToggle(addon.id);
+        } : undefined,
+        onMouseEnter: descriptionTrigger === 'hover' ? function () {
+          return setVisibleDescription(addon.id);
+        } : undefined,
+        onMouseLeave: descriptionTrigger === 'hover' ? function () {
+          return setVisibleDescription(null);
+        } : undefined,
+        style: {
+          marginLeft: 8,
+          cursor: 'pointer',
+          display: "flex"
+        },
+        "data-tooltip-id": "tooltip-" + addon.id,
+        "data-tooltip-content": "View Add-On info"
+      }, React__default.createElement(InfoIcon, {
+        size: 14
+      })), React__default.createElement(reactTooltip.Tooltip, {
+        id: "tooltip-" + addon.id,
+        place: "top"
+      }, addon.description || "No description available"))), React__default.createElement("div", {
         className: classNamePrefix + "_product_price"
-      }, addonNormalizedPrice, !isAddonFree && React__default.createElement("span", {
+      }, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL ? addonNormalizedPrice : addOnNormalizedCost, !isAddonFree && CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && React__default.createElement("span", {
+        className: classNamePrefix + "_product_fee"
+      }, "(" + addonNormalizedPrice + " with fees)"), !isAddonFree && CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
         className: classNamePrefix + "_product_fee"
-      }, addon.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'))), React__default.createElement("div", {
+      }, "(" + addonNormalizedPrice + " with fees)")))), visibleDescription === addon.id && React__default.createElement("div", {
         className: classNamePrefix + "_product_desc",
         dangerouslySetInnerHTML: createMarkup(addon.description)
       }), React__default.createElement("div", {
@@ -5823,7 +5901,8 @@ var initialOrderValues = {
   currency: '',
   guest_count: '',
   pay_now: '',
-  add_ons: []
+  add_ons: [],
+  cost: ''
 };
 var initialReviewValues = {
   order_details: {
@@ -5965,6 +6044,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
                   ticketType: item == null ? void 0 : item.name,
                   quantity: item == null ? void 0 : item.guest_count,
                   price: item == null ? void 0 : item.price,
+                  cost: item == null ? void 0 : item.cost,
                   id: item.id,
                   count: item == null ? void 0 : item.quantity
                 };
@@ -5981,7 +6061,10 @@ var PaymentContainer = function PaymentContainer(_ref) {
                 pay_now: (order_details == null ? void 0 : order_details.pay_now) || '',
                 guest_count: (order_details == null ? void 0 : order_details.guest_count) || '',
                 debt: (order_details == null ? void 0 : order_details.debt) || null,
-                tableTypes: orderDataArray
+                tableTypes: orderDataArray,
+                cost: ticket == null ? void 0 : ticket.cost,
+                subtotal: order_details == null ? void 0 : order_details.subtotal,
+                fees: order_details == null ? void 0 : order_details.fees
               };
               setOrderData(_orderData);
               setCurrency(order_details == null ? void 0 : order_details.currency);
@@ -5992,7 +6075,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
           case 7:
             _context.prev = 7;
             _context.t0 = _context["catch"](0);
-            setError(_get(_context.t0, 'response.data.message'));
+            setError(_get(_context.t0, 'response.data.message', null));
             onGetPaymentDataError(_context.t0.response);
           case 11:
             _context.prev = 11;
@@ -6015,7 +6098,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               if (!eventId) {
-                _context2.next = 7;
+                _context2.next = 6;
                 break;
               }
               _context2.next = 3;
@@ -6023,7 +6106,6 @@ var PaymentContainer = function PaymentContainer(_ref) {
             case 3:
               conditionsResponse = _context2.sent;
               conditionsInfo = conditionsResponse.data.attributes;
-              console.log('🚀 ~ file: index.tsx:258 ~ fetchConditions ~ conditionsInfo:', conditionsResponse);
               setConditions(conditionsInfo ? conditionsInfo.map(function (item) {
                 return {
                   id: nanoid.nanoid(),
@@ -6031,7 +6113,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
                   checked: false
                 };
               }) : []);
-            case 7:
+            case 6:
             case "end":
               return _context2.stop();
           }
@@ -6109,7 +6191,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
           case 22:
             _context3.prev = 22;
             _context3.t0 = _context3["catch"](0);
-            setError(_get(_context3.t0, 'response.data.message'));
+            setError(_get(_context3.t0, 'response.data.message', null));
             setPaymentIsLoading(false);
             onPaymentError(_context3.t0.response || _context3.t0, reviewData.event_details.slug);
           case 27:
@@ -6151,7 +6233,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     label: 'Add-ons',
     id: 'add_ons'
   }, {
-    label: 'Total (incl. fees, card processing and taxes)',
+    label: 'Total (2.5% merchant processing fee)',
     id: 'total',
     normalizer: function normalizer(value, currency) {
       return currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(value)), currency);
@@ -6198,7 +6280,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
       className = _field$className === void 0 ? '' : _field$className,
       _field$normalizer = field.normalizer,
       normalizer = _field$normalizer === void 0 ? _identity : _field$normalizer;
-    var value = orderData[id];
+    var value = orderData[id] || "";
     var component = null;
     if (field.id === 'add_ons' && _isEmpty(value)) {
       return false;
@@ -6246,20 +6328,22 @@ var PaymentContainer = function PaymentContainer(_ref) {
     }
     return component || React__default.createElement("div", {
       key: id,
-      className: "order_info_block"
+      className: "order_info_block " + className
     }, React__default.createElement("div", {
       className: "order_info_title"
     }, label), React__default.createElement("div", {
       className: className + " order_info_text"
-    }, typeof value === 'string' || typeof value === 'number' ? normalizer(value, currency) : _map(value, function (item) {
-      return React__default.createElement("div", {
+    }, typeof value === 'string' || typeof value === 'number' ? normalizer(value, currency, orderData) : _map(value, function (item) {
+      return React__default.createElement("div", null, React__default.createElement("div", {
         key: item.id,
         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, currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), 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)), React__default.createElement("span", {
         className: "add-on-each"
-      }, ' 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)"));
     })));
   })), !isFreeTickets && paymentPlanIsAvailable && React__default.createElement("div", {
     className: "payment_toggle"
@@ -6268,7 +6352,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
       className: "payment_plan_toggle_label"
     }, "Click to checkout using Payment Plan"),
     required: true,
-    onChange: function onChange(_) {
+    onChange: function onChange() {
       setShowPaymentPlanSection(!showPaymentPlanSection);
     },
     checked: showPaymentPlanSection
@@ -6867,8 +6951,6 @@ var submitShareAction = /*#__PURE__*/function () {
   };
 }();
 
-var X_TF_ECOMMERCE = 'X-TF-ECOMMERCE';
-
 var useCookieListener = function useCookieListener(key, handler) {
   var getCookie = function getCookie() {
     return getCookieByName(key);
@@ -7292,34 +7374,6 @@ var ReferralLogic = function ReferralLogic(props) {
   return null;
 };
 
-var InfoIcon = function InfoIcon() {
-  return React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "17",
-    height: "17",
-    viewBox: "0 0 17 17",
-    fill: "none"
-  }, React__default.createElement("circle", {
-    cx: "8.5",
-    cy: "8.5",
-    r: "8",
-    stroke: "black",
-    strokeWidth: "1"
-  }), React__default.createElement("rect", {
-    x: "7.5",
-    y: "4",
-    width: "2",
-    height: "2",
-    fill: "black"
-  }), React__default.createElement("rect", {
-    x: "7.5",
-    y: "7",
-    width: "2",
-    height: "5",
-    fill: "black"
-  }));
-};
-
 var getTicketSelectOptions = function getTicketSelectOptions(maxCount, minCount, multiplier) {
   if (maxCount === void 0) {
     maxCount = 10;
@@ -7470,7 +7524,8 @@ var TicketsSection = function TicketsSection(_ref) {
   };
   return React__default.createElement(React__default.Fragment, null, !hideTicketsHeader && ticketsHeaderComponent, sortedTicketsList.map(function (ticket, i, arr) {
     var _arr;
-    var ticketPrice = priceSymbol + " " + (+ticket.price).toFixed(2);
+    var ticketPriceWithoutFees = priceSymbol + " " + (+ticket.cost).toFixed(2);
+    var ticketPriceWithFees = priceSymbol + " " + (+ticket.price).toFixed(2);
     var ticketOldPrice = priceSymbol + " " + (+ticket.oldPrice).toFixed(2);
     var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
     var ticketSelect = function ticketSelect(event) {
@@ -7482,7 +7537,7 @@ var TicketsSection = function TicketsSection(_ref) {
       ticketIsDiscounted = true;
     }
     var ticketIsFree = +ticket.price === 0;
-    var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : ticketPrice;
+    var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : CONFIGS.FEES_STYLE == FEES_STYLES.DISPLAY_BOTH ? 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
@@ -7492,30 +7547,29 @@ var TicketsSection = function TicketsSection(_ref) {
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
     }, React__default.createElement("div", {
       className: "event-detail__tier-name"
-    }, ticket.displayName || ticket.name, ticket.descriptionRich && React__default.createElement("span", {
+    }, ticket.displayName || ticket.name, ticket.descriptionRich && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
       "aria-hidden": true,
       className: "info-icon",
-      onClick: descriptionTrigger === 'click' ? function () {
+      onClick: descriptionTrigger === "click" ? function () {
         return handleDescriptionToggle(ticket.id);
       } : undefined,
-      onMouseEnter: descriptionTrigger === 'hover' ? function () {
+      onMouseEnter: descriptionTrigger === "hover" ? function () {
         return setVisibleDescription(ticket.id);
       } : undefined,
-      onMouseLeave: descriptionTrigger === 'hover' ? function () {
+      onMouseLeave: descriptionTrigger === "hover" ? function () {
         return setVisibleDescription(null);
       } : undefined,
+      "data-tooltip-id": "tooltip-" + ticket.id,
+      "data-tooltip-content": "View ticket info",
       style: {
         marginLeft: 8,
-        cursor: 'pointer',
+        cursor: "pointer",
         display: "flex"
       }
-    }, React__default.createElement(InfoIcon, null))), visibleDescription === ticket.id && React__default.createElement("div", {
-      className: "ticket-description"
-    }, React__default.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: decodeHTML(ticket.descriptionRich)
-      }
-    })), React__default.createElement("div", {
+    }, React__default.createElement(InfoIcon, null)), React__default.createElement(reactTooltip.Tooltip, {
+      id: "tooltip-" + ticket.id,
+      place: "top"
+    }, ticket.description || "No description available"))), React__default.createElement("div", {
       className: "event-tickets-container"
     }, React__default.createElement("div", {
       className: "event-detail__tier-price"
@@ -7525,7 +7579,7 @@ var TicketsSection = function TicketsSection(_ref) {
       className: isSoldOut ? 'sold-out' : ''
     }, ticketPriceElem), !isSoldOut && !ticketIsFree && React__default.createElement("p", {
       className: "fees"
-    }, ticket.feeIncluded ? '(incl. Fees)' : '(excl. 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)")), React__default.createElement("div", {
       className: "event-detail__tier-state",
       style: {
         minWidth: 55
@@ -7536,10 +7590,17 @@ var TicketsSection = function TicketsSection(_ref) {
       selectedTickets: selectedTickets,
       handleTicketSelect: ticketSelect,
       event: event
-    })))));
+    }))), visibleDescription === ticket.id && React__default.createElement("div", {
+      className: "ticket-description"
+    }, React__default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: decodeHTML(ticket.descriptionRich)
+      }
+    }))));
   }), !hideTableTicketsHeader && tableTicketsHeaderComponent, tableTickets.map(function (ticket, i, arr) {
     var _arr2;
-    var ticketPrice = priceSymbol + " " + (+ticket.price).toFixed(2);
+    var ticketPriceWithoutFees = priceSymbol + " " + (+ticket.cost).toFixed(2);
+    var ticketPriceWithFees = priceSymbol + " " + (+ticket.price).toFixed(2);
     var ticketOldPrice = priceSymbol + " " + (+ticket.oldPrice).toFixed(2);
     var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
     var ticketSelect = function ticketSelect(event) {
@@ -7551,7 +7612,7 @@ var TicketsSection = function TicketsSection(_ref) {
       ticketIsDiscounted = true;
     }
     var ticketIsFree = +ticket.price === 0;
-    var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : ticketPrice;
+    var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH ? 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, null, React__default.createElement(React__default.Fragment, {
       key: ticket.id || ticket.name
@@ -7561,7 +7622,7 @@ var TicketsSection = function TicketsSection(_ref) {
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
     }, React__default.createElement("div", {
       className: "event-detail__tier-name"
-    }, ticket.displayName || ticket.name, ticket.descriptionRich && React__default.createElement("span", {
+    }, ticket.displayName || ticket.name, ticket.descriptionRich && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
       "aria-hidden": true,
       className: "info-icon",
       onClick: descriptionTrigger === 'click' ? function () {
@@ -7577,14 +7638,13 @@ var TicketsSection = function TicketsSection(_ref) {
         marginLeft: 8,
         cursor: 'pointer',
         display: "flex"
-      }
-    }, React__default.createElement(InfoIcon, null))), visibleDescription === ticket.id && React__default.createElement("div", {
-      className: "ticket-description"
-    }, React__default.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: decodeHTML(ticket.descriptionRich)
-      }
-    })), React__default.createElement("div", {
+      },
+      "data-tooltip-id": "tooltip-" + ticket.id,
+      "data-tooltip-content": "View ticket info"
+    }, React__default.createElement(InfoIcon, null)), React__default.createElement(reactTooltip.Tooltip, {
+      id: "tooltip-" + ticket.id,
+      place: "top"
+    }, ticket.description || "No description available"))), React__default.createElement("div", {
       className: "event-tickets-container"
     }, React__default.createElement("div", {
       className: "event-detail__tier-price"
@@ -7594,7 +7654,7 @@ var TicketsSection = function TicketsSection(_ref) {
       className: isSoldOut ? 'sold-out' : ''
     }, ticketPriceElem), !isSoldOut && !ticketIsFree && React__default.createElement("p", {
       className: "fees"
-    }, ticket.feeIncluded ? '(incl. Fees)' : '(excl. 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)"), ticket.depositPercent && React__default.createElement("p", {
       className: "deposits"
     }, ticket.depositPercent + '% DEPOSIT')), React__default.createElement("div", {
       className: "event-detail__tier-state",
@@ -7609,7 +7669,13 @@ var TicketsSection = function TicketsSection(_ref) {
       handleTicketSelect: ticketSelect,
       isSeatMapAllowed: isSeatMapAllowed,
       event: event
-    }))))));
+    }))), visibleDescription === ticket.id && React__default.createElement("div", {
+      className: "ticket-description"
+    }, React__default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: decodeHTML(ticket.descriptionRich)
+      }
+    })))));
   }));
 };
 
@@ -8235,7 +8301,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
       return setTicketsNotAvailableModalOpen(false);
     }
   }), isLoading ? React__default.createElement(Loader, null) : React__default.createElement("div", {
-    ref: ticketsContainerRef
+    ref: ticketsContainerRef,
+    className: 'tickets-section-container'
   }, !isSalesClosed && React__default.createElement(TicketsSection, {
     event: event,
     ticketsList: ordinarTickets,
@@ -13408,6 +13475,7 @@ var PreRegistrationInformations = function PreRegistrationInformations(props) {
 exports.AddonsContainter = AddonsContainter;
 exports.BillingInfoContainer = WithCustomFieldsBillingInfoContainer;
 exports.ConfirmationContainer = ConfirmationContainer;
+exports.DEFAULT_FEES_STYLE = DEFAULT_FEES_STYLE;
 exports.DelegationsContainer = DelegationsContainer;
 exports.ForgotPasswordModal = ForgotPasswordModal;
 exports.IDVerification = IDVerification;