tf-checkout-react 1.4.7 → 1.4.9

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

@@ -76,6 +76,7 @@ import 'tf-seat-map-view/dist/index.css';
 import ReactDom from 'react-dom';
 import SeatMapView from 'tf-seat-map-view';
 import InputLabel$1 from '@mui/material/InputLabel';
+import Tooltip from '@mui/material/Tooltip';
 import { Button as Button$2 } from 'react-bootstrap';
 
 function _regeneratorRuntime() {
@@ -6743,7 +6744,7 @@ var TicketsTable = function TicketsTable(_ref) {
     }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null, "Add-On"), React.createElement(TableCell, null, "Status"))), React.createElement(TableBody, null, ticket.add_ons.map(function (add_on, index) {
       return React.createElement(TableRow, {
         key: index
-      }, React.createElement(TableCell, null, add_on.groupName, ":", add_on.name), React.createElement(TableCell, null, add_on.status));
+      }, React.createElement(TableCell, null, add_on.groupName && add_on.groupName + ": ", " ", add_on.name), React.createElement(TableCell, null, add_on.status));
     }))))));
   })))));
 };
@@ -7047,7 +7048,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.createElement(TableRow, {
       key: index
-    }, React.createElement(TableCell, null, React.createElement("div", null, React.createElement("b", null, "Add-On"), React.createElement("div", null, ticket.groupName, ": ", ticket.name))), React.createElement(TableCell, null, ticket.currency + ticket.price), React.createElement(TableCell, null, ticket.quantity), React.createElement(TableCell, null, ticket.currency + ticket.total));
+    }, React.createElement(TableCell, null, React.createElement("div", null, React.createElement("b", null, "Add-On"), React.createElement("div", null, ticket.groupName && ticket.groupName + ": ", " ", ticket.name))), React.createElement(TableCell, null, ticket.currency + ticket.price), React.createElement(TableCell, null, ticket.quantity), React.createElement(TableCell, null, ticket.currency + ticket.total));
   }), React.createElement(TableRow, {
     className: "total-row"
   }, React.createElement(TableCell, null), React.createElement(TableCell, null), React.createElement(TableCell, null, "Total"), React.createElement(TableCell, null, getTotal(data))))))), React.createElement(TicketsTable, {
@@ -8169,6 +8170,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,
@@ -8177,6 +8180,9 @@ var TicketsSection$1 = function TicketsSection(props) {
     guestCounts = props.guestCounts,
     setGuestCounts = props.setGuestCounts,
     isAddingToCart = props.isAddingToCart;
+  var _useState = useState({}),
+    selectedTicketsInfo = _useState[0],
+    setSelectedTicketsInfo = _useState[1];
   var bookButtonIsDisabled = _some(selectedTickets, function (item) {
     return !item;
   }) || _isEmpty(reservedSeats) || reservedSeats.length !== _keys(selectedTickets).length;
@@ -8188,6 +8194,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.createElement(ThemeProvider$1, {
     theme: themeMui
   }, React.createElement("div", {
@@ -8207,6 +8219,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);
@@ -8250,10 +8263,9 @@ var TicketsSection$1 = function TicketsSection(props) {
       onClick: function onClick() {
         handleCancelReservation(dropdownData.seatId, dropdownData.tierId);
       }
-    }, ticketDeleteButtonContent)), selectedTicketData && React.createElement("div", {
+    }, ticketDeleteButtonContent)), selectedTicketData && React.createElement(React.Fragment, null, React.createElement("div", {
       style: {
-        display: 'flex',
-        flexDirection: 'row'
+        display: 'flex'
       }
     }, React.createElement("div", {
       style: {
@@ -8270,14 +8282,38 @@ var TicketsSection$1 = function TicketsSection(props) {
       className: "ticketDeposit"
     }, "Deposit:", React.createElement("span", {
       className: "ticketPrice-value"
-    }, " " + (selectedTicketData == null ? void 0 : selectedTicketData.ticket_type_deposit) + "%"))), showGuestCountDropdown && React.createElement("div", {
+    }, " " + (selectedTicketData == null ? void 0 : selectedTicketData.ticket_type_deposit) + "%"))), React.createElement("div", {
       style: {
         width: '100%',
         display: 'flex',
         justifyContent: 'end',
+        alignItems: 'center',
         marginRight: 16
       }
-    }, React.createElement(FormControl$1, {
+    }, showDescription && React.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.createElement("div", {
+      className: "ticket-info",
+      onClick: function onClick() {
+        return handleShowtTicketInfo(dropdownData.seatId);
+      },
+      onKeyDown: function onKeyDown() {
+        return handleShowtTicketInfo(dropdownData.seatId);
+      }
+    }, ticketInfoContent)), showGuestCountDropdown && React.createElement(FormControl$1, {
       variant: "outlined",
       sx: {
         m: 1,
@@ -8291,8 +8327,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'
@@ -8318,7 +8354,10 @@ var TicketsSection$1 = function TicketsSection(props) {
         value: option,
         key: index
       }, option);
-    }))))));
+    }))))), selectedTicketsInfo[dropdownData.seatId] && React.createElement("div", {
+      className: "ticket-description-content",
+      dangerouslySetInnerHTML: createMarkup(selectedTicketData.description || "")
+    })));
   })), React.createElement("div", null, React.createElement(Button$2, {
     className: "book-button\n              " + (bookButtonIsDisabled ? 'disabled' : '') + "\n              " + (isButtonScrollable ? 'is-scrollable' : '') + "\n            ",
     onClick: !bookButtonIsDisabled ? handleGetTicketClick : _identity,
@@ -8344,7 +8383,8 @@ var SeatMapContainer = function SeatMapContainer(props) {
     onAddToCartSuccess = _props$onAddToCartSuc === void 0 ? identity : _props$onAddToCartSuc,
     _props$onCountdownFin = props.onCountdownFinish,
     onCountdownFinish = _props$onCountdownFin === void 0 ? identity : _props$onCountdownFin,
-    ticketDeleteButtonContent = props.ticketDeleteButtonContent;
+    ticketDeleteButtonContent = props.ticketDeleteButtonContent,
+    ticketInfoContent = props.ticketInfoContent;
   var _useState = useState({
       seatMap: ''
     }),
@@ -8760,6 +8800,7 @@ var SeatMapContainer = function SeatMapContainer(props) {
     isAddingToCart: isAddingToCart,
     reservedSeats: reservedSeats,
     ticketDeleteButtonContent: ticketDeleteButtonContent,
+    ticketInfoContent: ticketInfoContent,
     ticketTypeTierRelations: ticketTypeTierRelationsRef.current,
     currencySymbol: symbol,
     tableMapEnabled: Boolean(tableMapEnabled),