tf-checkout-react 1.7.31 → 2.0.0-beta.0

package/src/components/ticketsContainer/TimeSlotTicketRow.tsx

@@ -1,243 +0,0 @@
-/* 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)}`
-  const ticketFinalPrice = ticket.feeIncluded && !ticket.isForward
-    ? +(ticket.x_face_value || ticket.basePrice)
-    : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost
-  const ticketFinalPriceFormatted = `${priceSymbol} ${parseFloat(ticketFinalPrice.toFixed(2))}`
-  const ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward
-    ? +(ticket.x_face_value || ticket.basePrice)
-    : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost
-  const ticketOldFinalPriceFormatted = `${priceSymbol} ${parseFloat(ticketOldFinalPrice.toFixed(2))}`
-  const ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2)
-  const ticketBreakdown = !ticket.feeIncluded
-    ? '(+ fees at checkout)'
-    : !ticket.isForward
-      ? null
-      : (parseFloat(ticketFeeAmount) > 0 ? `(${priceSymbol} ${(+ticket.cost).toFixed(2)} + ${priceSymbol} ${ticketFeeAmount} fee)` : null)
-
-  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.FINAL_WITH_BREAKDOWN
-    ? ticketOldFinalPriceFormatted
-    : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
-      ? ticketOldPriceWithoutFees
-      : ticketOldPriceWithFees
-  const ticketPriceElem = isSoldOut
-    ? 'SOLD OUT'
-    : ticketIsFree
-      ? 'FREE'
-      : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
-        ? ticketFinalPriceFormatted
-        : 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)`}
-                {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
-                  ticketBreakdown}
-              </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.ticketInstance.slotStartDate).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

@@ -1,194 +0,0 @@
-/* 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 _get from 'lodash/get'
-import _map from 'lodash/map'
-import _sortBy from 'lodash/sortBy'
-import moment from 'moment-timezone'
-import React, { ReactNode, useMemo, useState } from 'react'
-
-import { TimeSlotTicketRow } from './TimeSlotTicketRow'
-
-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;
-}
-
-interface TimeSlotOption {
-  timeKey: string;
-  ticketInstance: any;
-}
-
-interface UniqueTicket {
-  ticket: any;
-  availableTimeSlots: TimeSlotOption[];
-}
-
-const TimeSlotsSection: React.FC<Props> = ({
-  event,
-  availableDates,
-  selectedDate,
-  timeSlotGroups,
-  setSelectedDate,
-  getTimeSlots,
-  selectedTickets,
-  handleTicketSelect,
-  sortBySoldOut,
-  hideTicketsHeader,
-  ticketsHeaderComponent,
-  currencySymbol,
-}) => {
-  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 {
-        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)
-  }
-
-  // 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}>
-        <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',
-          }}
-        >
-          {!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}
-                selectedTimeSlots={selectedTimeSlots}
-                handleTicketSelect={handleTicketSelectWithTimeSlot}
-                handleTimeSlotSelect={handleTimeSlotSelect}
-                priceSymbol={priceSymbol}
-                isSoldOut={isSoldOut}
-              />
-            )
-          })}
-        </Box>
-      )}
-    </Box>
-  )
-}
-
-export default TimeSlotsSection