tf-checkout-react 1.6.6-beta.3 → 1.6.6-beta.31

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -1,10 +1,22 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import './style.css'
 
+import _get from 'lodash/get'
 import _sortBy from 'lodash/sortBy'
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useState } from 'react'
+import { Tooltip } from 'react-tooltip'
 
+import { FEES_STYLES } from '../../constants'
+import { CONFIGS } from '../../utils'
+import InfoIcon from './InfoIcon'
 import { TicketRow } from './TicketRow'
 
+function decodeHTML(html: string): string {
+  const textArea = document.createElement('textarea')
+  textArea.innerHTML = html
+  return textArea.value
+}
+
 interface ITicketsSectionProps {
   event: any;
   ticketsList: any;
@@ -17,12 +29,13 @@ interface ITicketsSectionProps {
   ticketsHeaderComponent?: ReactNode;
   tableTicketsHeaderComponent?: ReactNode;
   showGroupNameBlock?: boolean;
-  currencySybmol?: string;
+  currencySymbol?: string;
   isSeatMapAllowed?: boolean;
+  descriptionTrigger?: 'click' | 'hover';
 }
 
 export const TicketsSection = ({
-  event = { currency: {} },
+  event,
   ticketsList,
   selectedTickets,
   handleTicketSelect,
@@ -32,26 +45,36 @@ export const TicketsSection = ({
   hideTicketsHeader,
   hideTableTicketsHeader,
   showGroupNameBlock,
-  currencySybmol,
+  currencySymbol,
   isSeatMapAllowed,
   tableTickets,
+  descriptionTrigger = 'click',
 }: ITicketsSectionProps) => {
-  const {
-    currency: { symbol },
-  } = event
+  const symbol = _get(event, 'currency.symbol')
   const sortedTicketsList = sortBySoldOut
     ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut')
     : _sortBy(ticketsList, 'sortOrder')
   const showGroup = !!sortedTicketsList.find(ticket => ticket.groupName)
-  const priceSymbol = currencySybmol ? currencySybmol : symbol
+  const priceSymbol = currencySymbol || symbol
+
+  const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
+
+  const handleDescriptionToggle = (ticketId: string) => {
+    setVisibleDescription(current => (current === ticketId ? null : ticketId))
+  }
+
   return (
     <>
       {!hideTicketsHeader && ticketsHeaderComponent}
       {sortedTicketsList.map((ticket, i, arr) => {
-        const ticketPrice = `${priceSymbol} ${(+ticket.price).toFixed(2)}`
+        const ticketPriceWithoutFees = `${priceSymbol} ${(+ticket.cost).toFixed(2)}`
+        const ticketPriceWithFees = `${priceSymbol} ${(+ticket.price).toFixed(2)}`
         const ticketOldPrice = `${priceSymbol} ${(+ticket.oldPrice).toFixed(2)}`
 
-        const isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut
+        const isSoldOut =
+          ticket.sold_out ||
+          !(ticket.displayTicket || ticket.slotGroupId) ||
+          ticket.soldOut
         const ticketSelect = (event: any) => {
           const { value } = event.target
           handleTicketSelect(ticket.id, value)
@@ -67,7 +90,9 @@ export const TicketsSection = ({
           ? 'SOLD OUT'
           : ticketIsFree
           ? 'FREE'
-          : ticketPrice
+          : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH
+          ? ticketPriceWithoutFees
+          : ticketPriceWithFees
         const isNewGroupTicket = ticket?.groupName !== arr[i - 1]?.groupName
 
         return (
@@ -77,9 +102,48 @@ export const TicketsSection = ({
                 {ticket.groupName || ''}
               </div>
             ) : null}
-            <div className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}>
+            <div
+              className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}
+              id={ticket.id || ticket.name}
+            >
               <div className="event-detail__tier-name">
                 {ticket.displayName || ticket.name}
+                {ticket.descriptionRich && (
+                  <>
+                    <span
+                      aria-hidden
+                      className="info-icon"
+                      onClick={
+                        descriptionTrigger === 'click'
+                          ? () => handleDescriptionToggle(ticket.id)
+                          : undefined
+                      }
+                      onMouseEnter={
+                        descriptionTrigger === 'hover'
+                          ? () => setVisibleDescription(ticket.id)
+                          : undefined
+                      }
+                      onMouseLeave={
+                        descriptionTrigger === 'hover'
+                          ? () => setVisibleDescription(null)
+                          : undefined
+                      }
+                      data-tooltip-id={`tooltip-${ticket.id}`}
+                      data-tooltip-content="View ticket info"
+                      style={{
+                        marginLeft: 8,
+                        cursor: 'pointer',
+                        display: 'flex',
+                      }}
+                    >
+                      <InfoIcon />
+                    </span>
+
+                    <Tooltip id={`tooltip-${ticket.id}`} place="top">
+                      {ticket.description || 'No description available'}
+                    </Tooltip>
+                  </>
+                )}
               </div>
               <div className="event-tickets-container">
                 <div className="event-detail__tier-price">
@@ -87,7 +151,10 @@ export const TicketsSection = ({
                   <p className={isSoldOut ? 'sold-out' : ''}>{ticketPriceElem}</p>
                   {!isSoldOut && !ticketIsFree && (
                     <p className="fees">
-                      {ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}
+                      {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
+                        (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')}
+                      {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
+                        `(${ticketPriceWithFees} with fees)`}
                     </p>
                   )}
                 </div>
@@ -101,16 +168,29 @@ export const TicketsSection = ({
                   />
                 </div>
               </div>
+              {visibleDescription === ticket.id && (
+                <div className="ticket-description">
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html: decodeHTML(ticket.descriptionRich),
+                    }}
+                  />
+                </div>
+              )}
             </div>
           </React.Fragment>
         )
       })}
       {!hideTableTicketsHeader && tableTicketsHeaderComponent}
       {tableTickets.map((ticket: any, i: any, arr: any) => {
-        const ticketPrice = `${priceSymbol} ${(+ticket.price).toFixed(2)}`
+        const ticketPriceWithoutFees = `${priceSymbol} ${(+ticket.cost).toFixed(2)}`
+        const ticketPriceWithFees = `${priceSymbol} ${(+ticket.price).toFixed(2)}`
         const ticketOldPrice = `${priceSymbol} ${(+ticket.oldPrice).toFixed(2)}`
 
-        const isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut
+        const isSoldOut =
+          ticket.sold_out ||
+          !(ticket.displayTicket || ticket.slotGroupId) ||
+          ticket.soldOut
         const ticketSelect = (event: any) => {
           const { value } = event.target
           handleTicketSelect(ticket.id, value, true)
@@ -126,49 +206,95 @@ export const TicketsSection = ({
           ? 'SOLD OUT'
           : ticketIsFree
           ? 'FREE'
-          : ticketPrice
+          : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH
+          ? ticketPriceWithoutFees
+          : ticketPriceWithFees
         const isNewGroupTicket = ticket?.groupName !== arr[i - 1]?.groupName
 
         return (
-          <>
-            <React.Fragment key={ticket.id || ticket.name}>
-              {showGroupNameBlock && showGroup && isNewGroupTicket ? (
-                <div className="event-detail__tier group-title">
-                  {ticket.groupName || ''}
-                </div>
-              ) : null}
-              <div className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}>
-                <div className="event-detail__tier-name">
-                  {ticket.displayName || ticket.name}
+          <React.Fragment key={ticket.id || ticket.name}>
+            {showGroupNameBlock && showGroup && isNewGroupTicket ? (
+              <div className="event-detail__tier group-title">
+                {ticket.groupName || ''}
+              </div>
+            ) : null}
+            <div
+              className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}
+              id={ticket.id || ticket.name}
+            >
+              <div className="event-detail__tier-name">
+                {ticket.displayName || ticket.name}
+                {ticket.descriptionRich && (
+                  <>
+                    <span
+                      aria-hidden
+                      className="info-icon"
+                      onClick={
+                        descriptionTrigger === 'click'
+                          ? () => handleDescriptionToggle(ticket.id)
+                          : undefined
+                      }
+                      onMouseEnter={
+                        descriptionTrigger === 'hover'
+                          ? () => setVisibleDescription(ticket.id)
+                          : undefined
+                      }
+                      onMouseLeave={
+                        descriptionTrigger === 'hover'
+                          ? () => setVisibleDescription(null)
+                          : undefined
+                      }
+                      style={{ marginLeft: 8, cursor: 'pointer', display: 'flex' }}
+                      data-tooltip-id={`tooltip-${ticket.id}`}
+                      data-tooltip-content="View ticket info"
+                    >
+                      <InfoIcon />
+                    </span>
+                    <Tooltip id={`tooltip-${ticket.id}`} place="top">
+                      {ticket.description || 'No description available'}
+                    </Tooltip>
+                  </>
+                )}
+              </div>
+              <div className="event-tickets-container">
+                <div className="event-detail__tier-price">
+                  {ticketIsDiscounted && <p className="old-price">{ticketOldPrice}</p>}
+                  <p className={isSoldOut ? 'sold-out' : ''}>{ticketPriceElem}</p>
+                  {!isSoldOut && !ticketIsFree && (
+                    <p className="fees">
+                      {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
+                        (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')}
+                      {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
+                        `(${ticketPriceWithFees} with fees)`}
+                    </p>
+                  )}
+                  {ticket.depositPercent && (
+                    <p className="deposits">{ticket.depositPercent + '% DEPOSIT'}</p>
+                  )}
                 </div>
-                <div className="event-tickets-container">
-                  <div className="event-detail__tier-price">
-                    {ticketIsDiscounted && <p className="old-price">{ticketOldPrice}</p>}
-                    <p className={isSoldOut ? 'sold-out' : ''}>{ticketPriceElem}</p>
-                    {!isSoldOut && !ticketIsFree && (
-                      <p className="fees">
-                        {ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}
-                      </p>
-                    )}
-                    {ticket.depositPercent && (
-                      <p className="deposits">{ticket.depositPercent + '% DEPOSIT'}</p>
-                    )}
-                  </div>
-                  <div className="event-detail__tier-state" style={{ minWidth: 55 }}>
-                    <TicketRow
-                      tableType={true}
-                      ticketTier={ticket}
-                      prevTicketTier={arr[i - 1]}
-                      selectedTickets={selectedTickets}
-                      handleTicketSelect={ticketSelect}
-                      isSeatMapAllowed={isSeatMapAllowed}
-                      event={event}
-                    />
-                  </div>
+                <div className="event-detail__tier-state" style={{ minWidth: 55 }}>
+                  <TicketRow
+                    tableType={true}
+                    ticketTier={ticket}
+                    prevTicketTier={arr[i - 1]}
+                    selectedTickets={selectedTickets}
+                    handleTicketSelect={ticketSelect}
+                    isSeatMapAllowed={isSeatMapAllowed}
+                    event={event}
+                  />
                 </div>
               </div>
-            </React.Fragment>
-          </>
+              {visibleDescription === ticket.id && (
+                <div className="ticket-description">
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html: decodeHTML(ticket.descriptionRich),
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          </React.Fragment>
         )
       })}
     </>

package/src/components/ticketsContainer/TimeSlotsSection.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Box, CircularProgress, TextField } from '@mui/material'
+import { LocalizationProvider, StaticDatePicker as DatePicker } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import _isEmpty from 'lodash/isEmpty'
+import _map from 'lodash/map'
+import moment from 'moment-timezone'
+import React, { ReactNode, useState } from 'react'
+
+import { TicketsSection } from './TicketsSection'
+
+interface Props {
+  event: any;
+  eventId: number;
+  availableDates: string[];
+  selectedDate: string | null;
+  timeSlotGroups: { [key: string]: any[] };
+  setTimeSlotGroups: (value: { [key: string]: any[] }) => void;
+  setSelectedDate: (value: string | null) => void;
+  getTimeSlots: (date: string | null, type?: string) => Promise<void>;
+
+  selectedTickets: any;
+  handleTicketSelect: any;
+  sortBySoldOut: boolean;
+  hideTicketsHeader: boolean;
+  ticketsHeaderComponent?: ReactNode;
+  showGroupNameBlock?: boolean;
+  currencySymbol?: string;
+  isSeatMapAllowed?: boolean;
+}
+
+const TimeSlotsSection: React.FC<Props> = ({
+  event,
+  availableDates,
+  selectedDate,
+  timeSlotGroups,
+  setSelectedDate,
+  getTimeSlots,
+  selectedTickets,
+  handleTicketSelect,
+  sortBySoldOut,
+  hideTicketsHeader,
+  ticketsHeaderComponent,
+  showGroupNameBlock,
+  currencySymbol,
+  isSeatMapAllowed,
+}) => {
+  const [loading, setLoading] = useState(false)
+
+  const handleDateChange = async (date: string | null) => {
+    setSelectedDate(date)
+    if (date) {
+      setLoading(true)
+      try {
+        await getTimeSlots(date)
+      } catch (error) {
+        console.error('Error fetching time slots:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+  }
+
+  const isDateDisabled = (date: string) => {
+    const formattedDate = moment(date).format('YYYY-MM-DD')
+    return !availableDates.includes(formattedDate)
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <LocalizationProvider dateAdapter={AdapterMoment}>
+        <DatePicker
+          value={selectedDate}
+          onChange={handleDateChange}
+          shouldDisableDate={isDateDisabled}
+          renderInput={params => <TextField {...params} />}
+          showToolbar={false}
+          componentsProps={{ actionBar: { actions: [] } }}
+          disablePast
+        />
+      </LocalizationProvider>
+      {loading ? (
+        <CircularProgress sx={{ marginTop: 2 }} />
+      ) : (
+        <Box
+          sx={{
+            marginTop: 2,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+          }}
+        >
+          {_map(Object.keys(timeSlotGroups).sort(), timeKey => (
+            <div key={timeKey} className="time-slot-block">
+              <div className="time-slot-date">{moment(timeKey).format('hh:mm A')}</div>
+              <TicketsSection
+                event={event}
+                ticketsList={timeSlotGroups[timeKey]}
+                tableTickets={[]}
+                selectedTickets={selectedTickets}
+                handleTicketSelect={handleTicketSelect}
+                sortBySoldOut={sortBySoldOut}
+                ticketsHeaderComponent={ticketsHeaderComponent}
+                tableTicketsHeaderComponent={null}
+                hideTableTicketsHeader={true}
+                hideTicketsHeader={hideTicketsHeader || _isEmpty(timeSlotGroups[timeKey])}
+                showGroupNameBlock={showGroupNameBlock}
+                currencySymbol={currencySymbol}
+                isSeatMapAllowed={isSeatMapAllowed}
+              />
+            </div>
+          ))}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default TimeSlotsSection