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

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import './style.css';
-import { IActionColumns, ITicketTypes } from './ticketsTable';
 import { ThemeOptions } from "@mui/material";
 import { CSSProperties } from "@mui/styles";
+import { IActionColumns, ITicketTypes } from './ticketsTable';
 interface OrderDetailsTypes {
     columns: Array<{
         label: string;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const InfoIcon: () => JSX.Element;
+export default InfoIcon;

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

@@ -14,6 +14,7 @@ interface ITicketsSectionProps {
     showGroupNameBlock?: boolean;
     currencySybmol?: string;
     isSeatMapAllowed?: boolean;
+    descriptionTrigger?: "click" | "hover";
 }
-export declare const TicketsSection: ({ event, ticketsList, selectedTickets, handleTicketSelect, sortBySoldOut, ticketsHeaderComponent, tableTicketsHeaderComponent, hideTicketsHeader, hideTableTicketsHeader, showGroupNameBlock, currencySybmol, isSeatMapAllowed, tableTickets, }: ITicketsSectionProps) => JSX.Element;
+export declare const TicketsSection: ({ event, ticketsList, selectedTickets, handleTicketSelect, sortBySoldOut, ticketsHeaderComponent, tableTicketsHeaderComponent, hideTicketsHeader, hideTableTicketsHeader, showGroupNameBlock, currencySybmol, isSeatMapAllowed, tableTickets, descriptionTrigger, }: ITicketsSectionProps) => JSX.Element;
 export {};

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

@@ -1699,7 +1699,7 @@ var getCustomFields = /*#__PURE__*/function () {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           _context3.next = 2;
-          return publicRequest.get("/v1/event/" + eventId + "/custom_fields");
+          return publicRequest.get("/v1/event/" + eventId + "/fields");
         case 2:
           response = _context3.sent;
           customFields = _get(response, 'data.data.attributes', []);
@@ -2075,7 +2075,7 @@ var withCustomFields = function withCustomFields(Children) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
-              eventId = getQueryVariable('event_id') || '';
+              eventId = getQueryVariable('event_id') || getQueryVariable("eventId") || '';
               _context.next = 4;
               return getCustomFields(eventId);
             case 4:
@@ -7292,6 +7292,34 @@ 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;
@@ -7405,6 +7433,11 @@ var TicketRow = function TicketRow(_ref) {
   return React__default.createElement(React__default.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,
@@ -7418,13 +7451,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 = React.useState(null),
+    visibleDescription = _useState[0],
+    setVisibleDescription = _useState[1];
+  var handleDescriptionToggle = function handleDescriptionToggle(ticketId) {
+    setVisibleDescription(function (current) {
+      return current === ticketId ? null : ticketId;
+    });
+  };
   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);
@@ -7449,7 +7492,30 @@ var TicketsSection = function TicketsSection(_ref) {
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
     }, React__default.createElement("div", {
       className: "event-detail__tier-name"
-    }, ticket.displayName || ticket.name), React__default.createElement("div", {
+    }, ticket.displayName || ticket.name, ticket.descriptionRich && React__default.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__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", {
       className: "event-tickets-container"
     }, React__default.createElement("div", {
       className: "event-detail__tier-price"
@@ -7495,7 +7561,30 @@ var TicketsSection = function TicketsSection(_ref) {
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
     }, React__default.createElement("div", {
       className: "event-detail__tier-name"
-    }, ticket.displayName || ticket.name), React__default.createElement("div", {
+    }, ticket.displayName || ticket.name, ticket.descriptionRich && React__default.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__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", {
       className: "event-tickets-container"
     }, React__default.createElement("div", {
       className: "event-detail__tier-price"