tf-checkout-react 1.4.7 → 1.4.9

package/dist/components/seatMapContainer/utils.d.ts

@@ -11,4 +11,4 @@ export declare const getAddToCartRequestData: ({ eventId, reservations, selected
         ticket_types: {};
     };
 };
-export declare const getTierRelationsArray: (data: Array<TicketTypeTierRelationsData>) => (string | number)[];
+export declare const getTierRelationsArray: (data: Array<TicketTypeTierRelationsData>) => (string | number | null)[];

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

@@ -83,6 +83,7 @@ require('tf-seat-map-view/dist/index.css');
 var ReactDom = _interopDefault(require('react-dom'));
 var SeatMapView = _interopDefault(require('tf-seat-map-view'));
 var InputLabel = _interopDefault(require('@mui/material/InputLabel'));
+var Tooltip = _interopDefault(require('@mui/material/Tooltip'));
 var reactBootstrap = require('react-bootstrap');
 
 function _regeneratorRuntime() {
@@ -6750,7 +6751,7 @@ var TicketsTable = function TicketsTable(_ref) {
     }, React__default.createElement(TableHead, null, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, "Add-On"), React__default.createElement(TableCell, null, "Status"))), React__default.createElement(TableBody, null, ticket.add_ons.map(function (add_on, index) {
       return React__default.createElement(TableRow, {
         key: index
-      }, React__default.createElement(TableCell, null, add_on.groupName, ":", add_on.name), React__default.createElement(TableCell, null, add_on.status));
+      }, React__default.createElement(TableCell, null, add_on.groupName && add_on.groupName + ": ", " ", add_on.name), React__default.createElement(TableCell, null, add_on.status));
     }))))));
   })))));
 };
@@ -7054,7 +7055,7 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   }), data == null ? void 0 : (_data$items2 = data.items) == null ? void 0 : (_data$items2$add_ons = _data$items2.add_ons) == null ? void 0 : _data$items2$add_ons.map(function (ticket, index) {
     return React__default.createElement(TableRow, {
       key: index
-    }, React__default.createElement(TableCell, null, React__default.createElement("div", null, React__default.createElement("b", null, "Add-On"), React__default.createElement("div", null, ticket.groupName, ": ", ticket.name))), React__default.createElement(TableCell, null, ticket.currency + ticket.price), React__default.createElement(TableCell, null, ticket.quantity), React__default.createElement(TableCell, null, ticket.currency + ticket.total));
+    }, React__default.createElement(TableCell, null, React__default.createElement("div", null, React__default.createElement("b", null, "Add-On"), React__default.createElement("div", null, ticket.groupName && ticket.groupName + ": ", " ", ticket.name))), React__default.createElement(TableCell, null, ticket.currency + ticket.price), React__default.createElement(TableCell, null, ticket.quantity), React__default.createElement(TableCell, null, ticket.currency + ticket.total));
   }), React__default.createElement(TableRow, {
     className: "total-row"
   }, React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null, "Total"), React__default.createElement(TableCell, null, getTotal(data))))))), React__default.createElement(TicketsTable, {
@@ -8176,6 +8177,8 @@ var TicketsSection$1 = function TicketsSection(props) {
     handleCancelReservation = props.handleCancelReservation,
     _props$ticketDeleteBu = props.ticketDeleteButtonContent,
     ticketDeleteButtonContent = _props$ticketDeleteBu === void 0 ? 'Delete' : _props$ticketDeleteBu,
+    _props$ticketInfoCont = props.ticketInfoContent,
+    ticketInfoContent = _props$ticketInfoCont === void 0 ? 'Info' : _props$ticketInfoCont,
     selectedTickets = props.selectedTickets,
     handleTicketSelect = props.handleTicketSelect,
     currencySymbol = props.currencySymbol,
@@ -8184,6 +8187,9 @@ var TicketsSection$1 = function TicketsSection(props) {
     guestCounts = props.guestCounts,
     setGuestCounts = props.setGuestCounts,
     isAddingToCart = props.isAddingToCart;
+  var _useState = React.useState({}),
+    selectedTicketsInfo = _useState[0],
+    setSelectedTicketsInfo = _useState[1];
   var bookButtonIsDisabled = _some(selectedTickets, function (item) {
     return !item;
   }) || _isEmpty(reservedSeats) || reservedSeats.length !== _keys(selectedTickets).length;
@@ -8195,6 +8201,12 @@ var TicketsSection$1 = function TicketsSection(props) {
       handleTicketSelect(value, seatId);
     }
   };
+  var handleShowtTicketInfo = function handleShowtTicketInfo(seatId) {
+    setSelectedTicketsInfo(function (prevState) {
+      var _extends2;
+      return _extends({}, prevState, (_extends2 = {}, _extends2[seatId] = !prevState[seatId], _extends2));
+    });
+  };
   return React__default.createElement(privateTheming.ThemeProvider, {
     theme: themeMui
   }, React__default.createElement("div", {
@@ -8214,6 +8226,7 @@ var TicketsSection$1 = function TicketsSection(props) {
     var endNum = Number(selectedTicketData == null ? void 0 : selectedTicketData.ticket_type_max_number_of_guests);
     var numLength = endNum - startNum + 1;
     var showGuestCountDropdown = Boolean(startNum && endNum);
+    var showDescription = Boolean(selectedTicketData == null ? void 0 : selectedTicketData.description);
     // prices
     var guestPrice = (guestCounts[dropdownData.seatId] - startNum) * Number(selectedTicketData == null ? void 0 : selectedTicketData.guest_price);
     var finalPrice = createFixedFloatNormalizer(2)((selectedTicketData == null ? void 0 : selectedTicketData.ticket_type_price) + guestPrice);
@@ -8257,10 +8270,9 @@ var TicketsSection$1 = function TicketsSection(props) {
       onClick: function onClick() {
         handleCancelReservation(dropdownData.seatId, dropdownData.tierId);
       }
-    }, ticketDeleteButtonContent)), selectedTicketData && React__default.createElement("div", {
+    }, ticketDeleteButtonContent)), selectedTicketData && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
       style: {
-        display: 'flex',
-        flexDirection: 'row'
+        display: 'flex'
       }
     }, React__default.createElement("div", {
       style: {
@@ -8277,14 +8289,38 @@ var TicketsSection$1 = function TicketsSection(props) {
       className: "ticketDeposit"
     }, "Deposit:", React__default.createElement("span", {
       className: "ticketPrice-value"
-    }, " " + (selectedTicketData == null ? void 0 : selectedTicketData.ticket_type_deposit) + "%"))), showGuestCountDropdown && React__default.createElement("div", {
+    }, " " + (selectedTicketData == null ? void 0 : selectedTicketData.ticket_type_deposit) + "%"))), React__default.createElement("div", {
       style: {
         width: '100%',
         display: 'flex',
         justifyContent: 'end',
+        alignItems: 'center',
         marginRight: 16
       }
-    }, React__default.createElement(FormControl, {
+    }, showDescription && React__default.createElement(Tooltip, {
+      title: "View Ticket Info",
+      placement: 'left',
+      arrow: true,
+      componentsProps: {
+        tooltip: {
+          sx: {
+            backgroundColor: 'common.black',
+            marginRight: '6px !important',
+            '& .MuiTooltip-arrow': {
+              color: 'common.black'
+            }
+          }
+        }
+      }
+    }, React__default.createElement("div", {
+      className: "ticket-info",
+      onClick: function onClick() {
+        return handleShowtTicketInfo(dropdownData.seatId);
+      },
+      onKeyDown: function onKeyDown() {
+        return handleShowtTicketInfo(dropdownData.seatId);
+      }
+    }, ticketInfoContent)), showGuestCountDropdown && React__default.createElement(FormControl, {
       variant: "outlined",
       sx: {
         m: 1,
@@ -8298,8 +8334,8 @@ var TicketsSection$1 = function TicketsSection(props) {
       labelId: "demo-simple-select-standard-label",
       value: guestCounts[dropdownData.seatId] || startNum,
       onChange: function onChange(event) {
-        var _extends2;
-        setGuestCounts(_extends({}, guestCounts, (_extends2 = {}, _extends2[dropdownData.seatId] = Number(event.target.value), _extends2)));
+        var _extends3;
+        setGuestCounts(_extends({}, guestCounts, (_extends3 = {}, _extends3[dropdownData.seatId] = Number(event.target.value), _extends3)));
       },
       inputProps: {
         'aria-label': 'Without label'
@@ -8325,7 +8361,10 @@ var TicketsSection$1 = function TicketsSection(props) {
         value: option,
         key: index
       }, option);
-    }))))));
+    }))))), selectedTicketsInfo[dropdownData.seatId] && React__default.createElement("div", {
+      className: "ticket-description-content",
+      dangerouslySetInnerHTML: createMarkup(selectedTicketData.description || "")
+    })));
   })), React__default.createElement("div", null, React__default.createElement(reactBootstrap.Button, {
     className: "book-button\n              " + (bookButtonIsDisabled ? 'disabled' : '') + "\n              " + (isButtonScrollable ? 'is-scrollable' : '') + "\n            ",
     onClick: !bookButtonIsDisabled ? handleGetTicketClick : _identity,
@@ -8351,7 +8390,8 @@ var SeatMapContainer = function SeatMapContainer(props) {
     onAddToCartSuccess = _props$onAddToCartSuc === void 0 ? lodash.identity : _props$onAddToCartSuc,
     _props$onCountdownFin = props.onCountdownFinish,
     onCountdownFinish = _props$onCountdownFin === void 0 ? lodash.identity : _props$onCountdownFin,
-    ticketDeleteButtonContent = props.ticketDeleteButtonContent;
+    ticketDeleteButtonContent = props.ticketDeleteButtonContent,
+    ticketInfoContent = props.ticketInfoContent;
   var _useState = React.useState({
       seatMap: ''
     }),
@@ -8767,6 +8807,7 @@ var SeatMapContainer = function SeatMapContainer(props) {
     isAddingToCart: isAddingToCart,
     reservedSeats: reservedSeats,
     ticketDeleteButtonContent: ticketDeleteButtonContent,
+    ticketInfoContent: ticketInfoContent,
     ticketTypeTierRelations: ticketTypeTierRelationsRef.current,
     currencySymbol: symbol,
     tableMapEnabled: Boolean(tableMapEnabled),