tf-checkout-react 1.7.2 → 1.7.4

package/src/components/ticketsContainer/TimeSlotTicketRow.tsx

@@ -0,0 +1,224 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import './style.css'
+
+import Box from '@mui/material/Box'
+import FormControl from '@mui/material/FormControl'
+import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
+import moment from 'moment-timezone'
+import React, { useState } from 'react'
+import { Tooltip } from 'react-tooltip'
+
+import { FEES_STYLES } from '../../constants'
+import { CONFIGS } from '../../utils'
+import InfoIcon from './InfoIcon'
+import { getTicketSelectOptions } from './utils'
+
+function decodeHTML(html: string): string {
+  const textArea = document.createElement('textarea')
+  textArea.innerHTML = html
+  return textArea.value
+}
+
+interface TimeSlotOption {
+  timeKey: string;
+  ticketInstance: any;
+}
+
+interface ITimeSlotTicketRowProps {
+  ticketKey: string;
+  ticket: any;
+  availableTimeSlots: TimeSlotOption[];
+  selectedTickets: any;
+  selectedTimeSlots: any;
+  handleTicketSelect: (ticketKey: string, quantity: number, ticketInstance: any) => void;
+  handleTimeSlotSelect: (ticketKey: string, timeKey: string, ticketInstance: any) => void;
+  priceSymbol: string;
+  isSoldOut: boolean;
+}
+
+export const TimeSlotTicketRow = ({
+  ticketKey,
+  ticket,
+  availableTimeSlots,
+  selectedTickets,
+  selectedTimeSlots,
+  handleTicketSelect,
+  handleTimeSlotSelect,
+  priceSymbol,
+  isSoldOut,
+}: ITimeSlotTicketRowProps) => {
+  const [visibleDescription, setVisibleDescription] = useState<boolean>(false)
+
+  const currentSelectedTimeKey = selectedTimeSlots[ticketKey] || ''
+  const currentTicketInstance = availableTimeSlots.find(slot => slot.timeKey === currentSelectedTimeKey)?.ticketInstance
+  const currentSelectedQuantity = currentTicketInstance ? (selectedTickets[currentTicketInstance.id] || 0) : 0
+
+  const maxCount = ticket.maxQuantity
+  const minCount = ticket.minQuantity
+  const { multiplier } = ticket
+  const options = getTicketSelectOptions(maxCount, minCount, multiplier)
+
+  const ticketPriceWithoutFees = `${priceSymbol} ${(+ticket.cost).toFixed(2)}`
+  const ticketPriceWithFees = `${priceSymbol} ${(+ticket.basePrice).toFixed(2)}`
+  const ticketOldPriceWithFees = `${priceSymbol} ${(+ticket.oldBasePrice).toFixed(2)}`
+  const ticketOldPriceWithoutFees = `${priceSymbol} ${(+ticket.oldCost).toFixed(2)}`
+
+  let ticketIsDiscounted = false
+  if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
+    ticketIsDiscounted = true
+  }
+
+  const ticketIsFree = +ticket.price === 0
+  const discountTicketPriceElem =
+    CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
+      ? ticketOldPriceWithoutFees
+      : ticketOldPriceWithFees
+  const ticketPriceElem = isSoldOut
+    ? 'SOLD OUT'
+    : ticketIsFree
+      ? 'FREE'
+      : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
+        ? ticketPriceWithoutFees
+        : ticketPriceWithFees
+
+  const handleTimeChange = (event: any) => {
+    const selectedTimeKey = event.target.value
+    const selectedOption = availableTimeSlots.find(slot => slot.timeKey === selectedTimeKey)
+    if (selectedOption) {
+      handleTimeSlotSelect(ticketKey, selectedOption.timeKey, selectedOption.ticketInstance)
+    }
+  }
+
+  const handleQuantityChange = (event: any) => {
+    const { value } = event.target
+    // Only allow quantity selection if a time slot is selected
+    if (!currentSelectedTimeKey && value > 0) {
+      return
+    }
+    if (currentTicketInstance) {
+      handleTicketSelect(ticketKey, value, currentTicketInstance)
+    }
+  }
+
+  const handleDescriptionToggle = () => {
+    setVisibleDescription(current => !current)
+  }
+
+  return (
+    <>
+      <div className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`} id={ticketKey}>
+        <div className="event-detail__tier-name">
+          {ticket.displayName || ticket.name}
+          {ticket.descriptionRich && (
+            <>
+              <span
+                aria-hidden
+                className="info-icon"
+                onClick={handleDescriptionToggle}
+                data-tooltip-id={`tooltip-${ticketKey}`}
+                data-tooltip-content="View ticket info"
+                style={{
+                  marginLeft: 8,
+                  cursor: 'pointer',
+                  display: 'flex',
+                }}
+              >
+                <InfoIcon />
+              </span>
+
+              <Tooltip id={`tooltip-${ticketKey}`} 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">{discountTicketPriceElem}</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>
+            )}
+          </div>
+          {!isSoldOut && (
+            <div className="event-detail__tier-state time-slot-selectors-container">
+              {/* Time Slot Selector */}
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: 2,
+                  marginTop: 2,
+                }}
+              >
+                <FormControl>
+                  <Select
+                    sx={{ borderRadius: 0, minWidth: 120 }}
+                    value={currentSelectedTimeKey}
+                    onChange={handleTimeChange}
+                    displayEmpty
+                    inputProps={{ 'aria-label': 'Select time slot' }}
+                    MenuProps={{
+                      PaperProps: {
+                        className: 'get-tickets-paper',
+                      },
+                    }}
+                  >
+                    <MenuItem value="" disabled>
+                      Time
+                    </MenuItem>
+                    {availableTimeSlots.map((slot, index) => (
+                      <MenuItem key={index} value={slot.timeKey}>
+                        {moment(slot.timeKey).format('hh:mm A')}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+                {/* Quantity Selector */}
+              <FormControl>
+                <Select
+                  sx={{ borderRadius: 0, minWidth: 60 }}
+                  value={currentSelectedQuantity}
+                  onChange={handleQuantityChange}
+                  displayEmpty
+                  disabled={!currentSelectedTimeKey}
+                  inputProps={{ 'aria-label': 'Select quantity' }}
+                  MenuProps={{
+                    PaperProps: {
+                      sx: { maxHeight: 150 },
+                      className: 'get-tickets-paper',
+                    },
+                  }}
+                >
+                  {options.map((option, index) => (
+                    <MenuItem key={index} value={option.value}>
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+              </Box>
+            </div>
+          )}
+        </div>
+        {visibleDescription && ticket.descriptionRich && (
+          <div className="ticket-description">
+            <div
+              dangerouslySetInnerHTML={{
+                __html: decodeHTML(ticket.descriptionRich),
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </>
+  )
+}

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

@@ -48,8 +48,8 @@ import ConfirmModal from '../confirmModal'
 import Countdown from '../countdown'
 import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
 import { LoginModal } from '../loginModal'
-import WaitingList from '../waitingList'
 import { PreRegistration } from '../preRegistration'
+import WaitingList from '../waitingList'
 import { AccessCodeSection } from './AccessCodeSection'
 import { PromoCodeSection } from './PromoCodeSection'
 import { ReferralLogic } from './ReferralLogic'
@@ -417,6 +417,41 @@ export const TicketsContainer = ({
   const handleTicketSelect = (key: string, value: number | string, isTable = false) => {
     localStorage.setItem('selectedTicketsQuantity', value.toString())
     setSelectedTickets(prevState => {
+      // Allow multiple ticket types to be selected simultaneously when flag is enabled
+      if (event?.allowMultipleTicketTypePurchases === true) {
+        // Check if we're switching between tables and regular tickets
+        const hasExistingSelection = Object.keys(prevState).some(k => k !== 'isTable')
+        const switchingTicketType = hasExistingSelection && prevState.isTable !== isTable
+
+        // If switching from tables to regular tickets or vice versa, clear all selections
+        if (switchingTicketType && Number(value) > 0) {
+          return {
+            [key]: value,
+            isTable,
+          }
+        }
+
+        // If value is 0, remove this ticket from selection
+        if (!value || Number(value) === 0) {
+          const newState = { ...prevState }
+          delete newState[key]
+          // If no ticket keys remain (only isTable left), return empty state
+          const ticketKeys = Object.keys(newState).filter(k => k !== 'isTable')
+          if (ticketKeys.length === 0) {
+            return { isTable: false } as ISelectedTickets
+          }
+          return { ...newState, isTable: prevState.isTable }
+        }
+
+        // If value > 0, add or update this ticket while keeping others of the same type selected
+        return {
+          ...prevState,
+          [key]: value,
+          isTable,
+        }
+      }
+
+      // Default behavior: only one ticket type at a time
       if (Object.keys(prevState)[0] !== key && !value) {
         return prevState
       }
@@ -441,32 +476,55 @@ export const TicketsContainer = ({
     const timeSlotTickets = _flatten(_map(timeSlotGroups, slots => slots))
 
     setHandleBookIsLoading(true)
-    const ticket = event?.isTimeSlotEvent
-      ? _find(timeSlotTickets || [], item => Number(selectedTickets[item.id]) > 0) ||
-        ({} as ITicket)
-      : _find(tickets, item => Number(selectedTickets[item.id]) > 0) || ({} as ITicket)
-    const optionName = _get(ticket, 'optionName')
-    const ticketId = _get(ticket, 'id')
-    const productCartQuantity = +selectedTickets[ticket.id]
-    const ticketQuantity = +selectedTickets[ticket.id]
+
+    // Unified flow: works for both single and multiple ticket types
+    const ticketsList = event?.isTimeSlotEvent ? timeSlotTickets : tickets
+
+    // Get all selected ticket IDs with quantity > 0 (excluding 'isTable' key)
+    const selectedTicketIds = Object.keys(selectedTickets).filter(
+      key => key !== 'isTable' && Number(selectedTickets[key]) > 0
+    )
+
+    // Build ticket_types object with all selected tickets (works for 1 or N tickets)
+    const ticketTypesData: any = {}
+    let totalProductCartQuantity = 0
+    let firstTicket: ITicket | null = null
+
+    selectedTicketIds.forEach(ticketId => {
+      const ticket = _find(ticketsList || [], item => String(item.id) === ticketId) as ITicket
+      if (ticket) {
+        if (!firstTicket) firstTicket = ticket
+        const optionName = _get(ticket, 'optionName')
+        const quantity = +selectedTickets[ticketId]
+        totalProductCartQuantity += quantity
+
+        ticketTypesData[ticketId] = {
+          product_options: {
+            [optionName]: ticketId,
+            ticket_price: ticket.price,
+          },
+          quantity,
+        }
+      }
+    })
+
+    if (!firstTicket) {
+      setHandleBookIsLoading(false)
+      return
+    }
+
+    const firstOptionName = _get(firstTicket, 'optionName')
+    const firstTicketId = _get(firstTicket, 'id')
 
     const data: ICartRequestData = {
       attributes: {
         alternative_view_id: null,
-        product_cart_quantity: productCartQuantity,
+        product_cart_quantity: totalProductCartQuantity,
         product_options: {
-          [optionName]: ticketId,
+          [firstOptionName]: firstTicketId,
         },
         product_id: eventId,
-        ticket_types: {
-          [ticketId]: {
-            product_options: {
-              [optionName]: ticketId,
-              ticket_price: ticket.price,
-            },
-            quantity: ticketQuantity,
-          },
-        },
+        ticket_types: ticketTypesData,
       },
     }
 
@@ -502,7 +560,7 @@ export const TicketsContainer = ({
               : {}
 
           const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-            ticketQuantity,
+            totalProductCartQuantity,
             userData
           )
 

package/src/types/api/common.d.ts

@@ -18,6 +18,7 @@ interface IEventResponseData {
   preregEnabled: boolean;
   preregStarted: boolean;
   preregEnded: boolean;
+  allowMultipleTicketTypePurchases: boolean | null;
 }
 
 interface ITimeslotSettings {

package/src/types/api/payment.d.ts

@@ -151,6 +151,8 @@ interface ICheckoutCompleteData {
   event_date: string;
   event_description: string | null;
   order_total: number;
+  order_id: string | number;
+  order_hash: string;
   currency: {
     currency: string;
     decimalPlaces: number;

package/src/types/formFields.d.ts

@@ -7,7 +7,7 @@ interface IFormField {
   required?: boolean;
   className?: string;
   options?: { [key: string]: string | number }[];
-  onValidate?: (() => void) | null;
+  onValidate?: ((value: any) => string) | null;
   disableDropdown?: boolean;
 }
 

package/src/validators/index.ts

@@ -1,4 +1,4 @@
-const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+export const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
 export const combineValidators = (...validators: any) => (...value: any) => {
   for (let i = 0; i < validators.length; ++i) {
@@ -38,3 +38,24 @@ export const requiredValidator = (
 
 export const emailValidator = (email: string) =>
   !emailRegex.test(email) ? 'Please enter a valid email address' : ''
+
+export const passwordValidator = (password: string): string => {
+  if (!password || password.length < 6) {
+    return 'The password must be at least 6 characters.'
+  }
+  return ''
+}
+
+export const confirmPasswordValidator = (confirmPassword: string, password: string): string => {
+  if (confirmPassword !== password) {
+    return 'Passwords do not match.'
+  }
+  return ''
+}
+
+export const confirmEmailValidator = (confirmEmail: string, email: string): string => {
+  if (confirmEmail !== email) {
+    return 'Emails do not match.'
+  }
+  return ''
+}