tf-checkout-react 1.7.3 → 1.7.5

package/src/components/ticketsContainer/TimeSlotsSection.tsx

@@ -2,12 +2,13 @@
 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 _get from 'lodash/get'
 import _map from 'lodash/map'
+import _sortBy from 'lodash/sortBy'
 import moment from 'moment-timezone'
-import React, { ReactNode, useState } from 'react'
+import React, { ReactNode, useMemo, useState } from 'react'
 
-import { TicketsSection } from './TicketsSection'
+import { TimeSlotTicketRow } from './TimeSlotTicketRow'
 
 interface Props {
   event: any;
@@ -29,6 +30,16 @@ interface Props {
   isSeatMapAllowed?: boolean;
 }
 
+interface TimeSlotOption {
+  timeKey: string;
+  ticketInstance: any;
+}
+
+interface UniqueTicket {
+  ticket: any;
+  availableTimeSlots: TimeSlotOption[];
+}
+
 const TimeSlotsSection: React.FC<Props> = ({
   event,
   availableDates,
@@ -41,14 +52,14 @@ const TimeSlotsSection: React.FC<Props> = ({
   sortBySoldOut,
   hideTicketsHeader,
   ticketsHeaderComponent,
-  showGroupNameBlock,
   currencySymbol,
-  isSeatMapAllowed,
 }) => {
   const [loading, setLoading] = useState(false)
+  const [selectedTimeSlots, setSelectedTimeSlots] = useState<{ [key: string]: string }>({})
 
   const handleDateChange = async (date: string | null) => {
     setSelectedDate(date)
+    setSelectedTimeSlots({}) // Reset time slot selections when date changes
     if (date) {
       setLoading(true)
       try {
@@ -66,6 +77,67 @@ const TimeSlotsSection: React.FC<Props> = ({
     return !availableDates.includes(formattedDate)
   }
 
+  // Group tickets by unique ticket type using displayName + price
+  const uniqueTickets = useMemo(() => {
+    const ticketMap: { [key: string]: UniqueTicket } = {}
+
+    // Iterate through all time slots
+    _map(timeSlotGroups, (tickets, timeKey) => {
+      tickets.forEach((ticket: any) => {
+        // Use displayName + price as the unique identifier for ticket types
+        // This handles cases where multiple ticket types share the same optionName
+        const ticketKey = `${ticket.displayName || ticket.name}_${ticket.price}`
+
+        if (!ticketMap[ticketKey]) {
+          ticketMap[ticketKey] = {
+            ticket: { ...ticket },
+            availableTimeSlots: [],
+          }
+        }
+
+        // Store both the time key and the ticket instance for this slot
+        if (!ticketMap[ticketKey].availableTimeSlots.find((slot: any) => slot.timeKey === timeKey)) {
+          ticketMap[ticketKey].availableTimeSlots.push({
+            timeKey,
+            ticketInstance: ticket,
+          })
+        }
+      })
+    })
+
+    // Convert to array and sort
+    const ticketsArray = Object.values(ticketMap)
+    return sortBySoldOut
+      ? _sortBy(_sortBy(ticketsArray, t => t.ticket.sortOrder), t => t.ticket.soldOut)
+      : _sortBy(ticketsArray, t => t.ticket.sortOrder)
+  }, [timeSlotGroups, sortBySoldOut])
+
+  const handleTimeSlotSelect = (ticketKey: string, timeKey: string, ticketInstance: any) => {
+    setSelectedTimeSlots(prev => ({
+      ...prev,
+      [ticketKey]: timeKey,
+    }))
+
+    // Reset quantity when time slot changes
+    if (selectedTickets[ticketInstance.id]) {
+      handleTicketSelect(ticketInstance.id, 0)
+    }
+  }
+
+  const handleTicketSelectWithTimeSlot = (ticketKey: string, quantity: number, ticketInstance: any) => {
+    const timeSlot = selectedTimeSlots[ticketKey]
+    if (!timeSlot && quantity > 0) {
+      return // Don't allow quantity selection without time slot
+    }
+
+    if (ticketInstance) {
+      handleTicketSelect(ticketInstance.id, quantity)
+    }
+  }
+
+  const symbol = _get(event, 'currency.symbol')
+  const priceSymbol = currencySymbol || symbol
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
       <LocalizationProvider dateAdapter={AdapterMoment}>
@@ -88,29 +160,31 @@ const TimeSlotsSection: React.FC<Props> = ({
             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={[]}
+          {!hideTicketsHeader && ticketsHeaderComponent}
+          {uniqueTickets.map(({ ticket, availableTimeSlots }) => {
+            const ticketKey = `${ticket.displayName || ticket.name}_${ticket.price}`
+            const isSoldOut =
+              ticket.sold_out ||
+              !(ticket.displayTicket || ticket.slotGroupId) ||
+              ticket.soldOut
+
+            return (
+              <TimeSlotTicketRow
+                key={ticketKey}
+                ticketKey={ticketKey}
+                ticket={ticket}
+                availableTimeSlots={availableTimeSlots}
                 selectedTickets={selectedTickets}
-                handleTicketSelect={handleTicketSelect}
-                sortBySoldOut={sortBySoldOut}
-                ticketsHeaderComponent={ticketsHeaderComponent}
-                tableTicketsHeaderComponent={null}
-                hideTableTicketsHeader={true}
-                hideTicketsHeader={hideTicketsHeader || _isEmpty(timeSlotGroups[timeKey])}
-                showGroupNameBlock={showGroupNameBlock}
-                currencySymbol={currencySymbol}
-                isSeatMapAllowed={isSeatMapAllowed}
+                selectedTimeSlots={selectedTimeSlots}
+                handleTicketSelect={handleTicketSelectWithTimeSlot}
+                handleTimeSlotSelect={handleTimeSlotSelect}
+                priceSymbol={priceSymbol}
+                isSoldOut={isSoldOut}
               />
-            </div>
-          ))}
+            )
+          })}
         </Box>
       )}
     </Box>

package/src/components/ticketsContainer/index.tsx

@@ -957,7 +957,7 @@ export const TicketsContainer = ({
           </div>
         )}
         {showLoginModal ? (
-          <LoginModal onClose={handleOnClose} onLogin={handleOnLogin} />
+          <LoginModal onClose={handleOnClose} onLogin={handleOnLogin} showForgotPasswordButton />
         ) : null}
       </div>
       {showPoweredByImage ? <PoweredBy /> : null}