tf-checkout-react 1.6.6-beta.11 → 1.6.6-beta.12

package/dist/tf-checkout-react.esm.js

@@ -7289,6 +7289,34 @@ var ReferralLogic = function ReferralLogic(props) {
   return null;
 };
 
+var InfoIcon = function InfoIcon() {
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "17",
+    height: "17",
+    viewBox: "0 0 17 17",
+    fill: "none"
+  }, React.createElement("circle", {
+    cx: "8.5",
+    cy: "8.5",
+    r: "8",
+    stroke: "black",
+    strokeWidth: "1"
+  }), React.createElement("rect", {
+    x: "7.5",
+    y: "4",
+    width: "2",
+    height: "2",
+    fill: "black"
+  }), React.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;
@@ -7402,6 +7430,11 @@ var TicketRow = function TicketRow(_ref) {
   return React.createElement(React.Fragment, null, returnValue, " ");
 };
 
+function decodeHTML(html) {
+  var textArea = document.createElement("textarea");
+  textArea.innerHTML = html;
+  return textArea.value;
+}
 var TicketsSection = function TicketsSection(_ref) {
   var event = _ref.event,
     ticketsList = _ref.ticketsList,
@@ -7415,13 +7448,23 @@ var TicketsSection = function TicketsSection(_ref) {
     showGroupNameBlock = _ref.showGroupNameBlock,
     currencySybmol = _ref.currencySybmol,
     isSeatMapAllowed = _ref.isSeatMapAllowed,
-    tableTickets = _ref.tableTickets;
-  var symbol = _get(event, "currency.symbol");
+    tableTickets = _ref.tableTickets,
+    _ref$descriptionTrigg = _ref.descriptionTrigger,
+    descriptionTrigger = _ref$descriptionTrigg === void 0 ? 'click' : _ref$descriptionTrigg;
+  var symbol = _get(event, 'currency.symbol');
   var sortedTicketsList = sortBySoldOut ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut') : _sortBy(ticketsList, 'sortOrder');
   var showGroup = !!sortedTicketsList.find(function (ticket) {
     return ticket.groupName;
   });
-  var priceSymbol = currencySybmol ? currencySybmol : symbol;
+  var priceSymbol = currencySybmol || symbol;
+  var _useState = useState(null),
+    visibleDescription = _useState[0],
+    setVisibleDescription = _useState[1];
+  var handleDescriptionToggle = function handleDescriptionToggle(ticketId) {
+    setVisibleDescription(function (current) {
+      return current === ticketId ? null : ticketId;
+    });
+  };
   return React.createElement(React.Fragment, null, !hideTicketsHeader && ticketsHeaderComponent, sortedTicketsList.map(function (ticket, i, arr) {
     var _arr;
     var ticketPrice = priceSymbol + " " + (+ticket.price).toFixed(2);
@@ -7446,7 +7489,30 @@ var TicketsSection = function TicketsSection(_ref) {
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
     }, React.createElement("div", {
       className: "event-detail__tier-name"
-    }, ticket.displayName || ticket.name), React.createElement("div", {
+    }, ticket.displayName || ticket.name, ticket.descriptionRich && React.createElement("span", {
+      "aria-hidden": true,
+      className: "info-icon",
+      onClick: descriptionTrigger === 'click' ? function () {
+        return handleDescriptionToggle(ticket.id);
+      } : undefined,
+      onMouseEnter: descriptionTrigger === 'hover' ? function () {
+        return setVisibleDescription(ticket.id);
+      } : undefined,
+      onMouseLeave: descriptionTrigger === 'hover' ? function () {
+        return setVisibleDescription(null);
+      } : undefined,
+      style: {
+        marginLeft: 8,
+        cursor: 'pointer',
+        display: "flex"
+      }
+    }, React.createElement(InfoIcon, null))), visibleDescription === ticket.id && React.createElement("div", {
+      className: "ticket-description"
+    }, React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: decodeHTML(ticket.descriptionRich)
+      }
+    })), React.createElement("div", {
       className: "event-tickets-container"
     }, React.createElement("div", {
       className: "event-detail__tier-price"
@@ -7492,7 +7558,30 @@ var TicketsSection = function TicketsSection(_ref) {
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
     }, React.createElement("div", {
       className: "event-detail__tier-name"
-    }, ticket.displayName || ticket.name), React.createElement("div", {
+    }, ticket.displayName || ticket.name, ticket.descriptionRich && React.createElement("span", {
+      "aria-hidden": true,
+      className: "info-icon",
+      onClick: descriptionTrigger === 'click' ? function () {
+        return handleDescriptionToggle(ticket.id);
+      } : undefined,
+      onMouseEnter: descriptionTrigger === 'hover' ? function () {
+        return setVisibleDescription(ticket.id);
+      } : undefined,
+      onMouseLeave: descriptionTrigger === 'hover' ? function () {
+        return setVisibleDescription(null);
+      } : undefined,
+      style: {
+        marginLeft: 8,
+        cursor: 'pointer',
+        display: "flex"
+      }
+    }, React.createElement(InfoIcon, null))), visibleDescription === ticket.id && React.createElement("div", {
+      className: "ticket-description"
+    }, React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: decodeHTML(ticket.descriptionRich)
+      }
+    })), React.createElement("div", {
       className: "event-tickets-container"
     }, React.createElement("div", {
       className: "event-detail__tier-price"