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

package/src/components/seatMapContainer/index.tsx

@@ -1,443 +0,0 @@
-import { Alert } from '@mui/material'
-import axios from 'axios'
-import _find from 'lodash/find'
-import _forEach from 'lodash/forEach'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import _isEmpty from 'lodash/isEmpty'
-import _isEqual from 'lodash/isEqual'
-import _keys from 'lodash/keys'
-import _map from 'lodash/map'
-import _values from 'lodash/values'
-import moment from 'moment'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import Countdown, { CountdownRenderProps } from 'react-countdown'
-
-import {
-  getSeatMapData,
-  getSeatMapStatuses,
-  removeSeatReserve,
-  reserveSeat,
-} from '../../api'
-import { useOnline } from '../../hooks/useOnline'
-import { showZero } from '../../utils/showZero'
-import { ReferralLogic } from '../ticketsContainer/ReferralLogic'
-import { addToCartFunc } from './addToCart'
-import { SeatMapComponent } from './SeatMapComponent'
-import { TicketsSection } from './TicketsSection'
-import {
-  getAddToCartRequestData,
-  getOwnReservationsBasedOnStatuses,
-  getTicketDropdownData,
-  getTierIdBasedOnSeatId,
-} from './utils'
-
-const OFFLINE_MESSAGE = 'Offline.'
-
-interface IGuestCounts {
-  [key: string]: number;
-}
-
-export const SeatMapContainer = (props: IMapContainerProps) => {
-  const {
-    event: {
-      id: eventId,
-      currency: { symbol },
-      tableMapEnabled,
-      country,
-    },
-    mapContainerId,
-    timerMessage = '',
-    onAddToCartSuccess = _identity,
-    onCountdownFinish = _identity,
-    ticketDeleteButtonContent,
-    ticketInfoContent,
-  } = props
-
-  const [seatMapData, setSeatMapData] = useState({
-    seatMap: '',
-  } as {
-    seatMap: string;
-    seatReservationTime: number;
-    seatMapType: string | null;
-    tierPrices: any;
-    predefinedSeats: any;
-  })
-  const eventSeatsRef = useRef([] as EventSeat[])
-  const ticketTypeTierRelationsRef = useRef({} as TicketTypeTierRelations)
-  const [selectedTickets, setSelectedTickets] = useState<{
-    [seatId: string]: string;
-  }>({})
-  const [seatMapStatuses, setSeatMapStatuses] = useState('')
-  const [reservedSeats, setReservedSeats] = useState<Array<SeatReservationData>>([])
-  const [isLoadingSeatMapData, setIsLoadingSeatMapData] = useState(true)
-  const [isLoadingStatuses, setIsLoadingStatuses] = useState(false)
-  const [isReserving, setIsReserving] = useState(false)
-  const [isAddingToCart, setIsAddingToCart] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [showTimer, setShowTimer] = useState(
-    Date.now() <= Number(localStorage.getItem(`reservationStart-${eventId}`))
-  )
-  const [guestCounts, setGuestCounts] = useState<IGuestCounts>({} as IGuestCounts)
-  const [isOnline, setIsOnline] = useState(true)
-  const isGuestCountsSet = useRef(false)
-
-  useOnline(setIsOnline)
-
-  const updateGuestCounts = (data: any) => {
-    _forEach(data, (item: any) => {
-      const tierTickets = ticketTypeTierRelationsRef.current[item.tierId]
-      const seatTicketsArray = _values(tierTickets)
-
-      setGuestCounts((prevState: any) => ({
-        [item.seatId]: Number(seatTicketsArray[0].ticket_type_min_number_of_guests),
-        ...prevState,
-      }))
-    })
-  }
-
-  const fetchSeatMapData = useCallback(async () => {
-    try {
-      const seatMapDataResponse = await getSeatMapData(eventId)
-      const {
-        data: {
-          attributes: {
-            seatData,
-            ticketTypeTierRelations,
-            eventSeats,
-            seatReservationTime,
-            seatMapType,
-            tierPrices,
-            predefinedSeats,
-          },
-        },
-      } = seatMapDataResponse
-      eventSeatsRef.current = eventSeats
-      ticketTypeTierRelationsRef.current = ticketTypeTierRelations
-      setSeatMapData({
-        seatMap: JSON.parse(seatData),
-        seatReservationTime,
-        seatMapType,
-        tierPrices,
-        predefinedSeats,
-      })
-    } catch (error) {
-      setError('Something went wrong')
-    } finally {
-      setIsLoadingSeatMapData(false)
-    }
-  }, [eventId])
-
-  const fetchSeatMapReservations = useCallback(async () => {
-    if (isOnline) {
-      try {
-        const statusesResponse = await getSeatMapStatuses(eventId)
-        const statuses = _get(statusesResponse, 'data.attributes') || {}
-        const reservationData: Array<SeatReservationData> = []
-        const ownReservations: string[] = getOwnReservationsBasedOnStatuses(statuses)
-
-        _forEach(ownReservations, reservation => {
-          const tierIdOfReservation = getTierIdBasedOnSeatId(
-            reservation,
-            eventSeatsRef.current
-          ) as string
-          reservationData.push({
-            seatId: reservation,
-            tierId: tierIdOfReservation,
-            type: 'reserve',
-          })
-        })
-
-        localStorage.setItem('reservationData', JSON.stringify(reservationData))
-
-        if (!_isEqual(seatMapStatuses, statusesResponse.data.attributes)) {
-          setSeatMapStatuses(statusesResponse.data.attributes)
-        }
-        if (!_isEqual(reservationData, reservedSeats)) {
-          setReservedSeats(reservationData)
-        }
-
-        // automatically set ticket/table type if it's the only one
-        if (
-          ticketTypeTierRelationsRef.current &&
-          !_isEqual(reservationData, reservedSeats)
-        ) {
-          if (!isGuestCountsSet.current) {
-            updateGuestCounts(reservationData)
-            isGuestCountsSet.current = true
-          }
-          _forEach(reservationData, (item: any) => {
-            const tierTickets = ticketTypeTierRelationsRef.current[item.tierId]
-            const seatTicketsArray = _values(tierTickets)
-
-            setSelectedTickets((prevState: any) => ({
-              ...prevState,
-              [item.seatId]:
-                seatTicketsArray.length === 1 ? seatTicketsArray[0].ticket_type_id : '',
-            }))
-          })
-
-          if (_isEmpty(reservationData)) {
-            setGuestCounts({})
-            setSelectedTickets({})
-          }
-        }
-      } catch (error) {
-        setError('Something went wrong')
-      }
-    }
-  }, [eventId, seatMapStatuses, reservedSeats, isOnline])
-
-  const startTimer = useCallback(
-    (duration: number) => {
-      setShowTimer(true)
-
-      if (!localStorage.getItem(`reservationStart-${eventId}`)) {
-        localStorage.setItem(`reservationStart-${eventId}`, String(Date.now() + duration))
-      }
-    },
-    [eventId]
-  )
-
-  const endTimer = useCallback(() => {
-    localStorage.removeItem(`reservationStart-${eventId}`)
-    setShowTimer(false)
-  }, [eventId])
-
-  const handleSeatReservation = async (
-    eventId: string,
-    tierId: string,
-    seatId: string
-  ) => {
-    setIsReserving(true)
-    try {
-      await reserveSeat(eventId, tierId, seatId)
-      await fetchSeatMapReservations()
-
-      startTimer(seatMapData.seatReservationTime * 60000)
-      const reservationData = JSON.parse(localStorage.getItem('reservationData') || '')
-      setReservedSeats(reservationData)
-      updateGuestCounts(reservationData)
-
-      // automatically set ticket/table type if it's the only one
-      const relations = _keys(ticketTypeTierRelationsRef.current[tierId])
-      const [firstItem] = _keys(ticketTypeTierRelationsRef.current[tierId])
-      handleTicketSelect(relations.length === 1 ? firstItem : '', seatId)
-    } catch (error) {
-      setError(
-        error?.response?.data?.message === 'Selected seat is not available'
-          ? // eslint-disable-next-line max-len
-            'No more of this ticket type are available right now - they’re either sold out or in people’s shopping carts. Try refreshing the page!'
-          : 'Something went wrong'
-      )
-    } finally {
-      setIsReserving(false)
-    }
-  }
-
-  const handleCancelSeatReservtion = async (
-    eventId: string,
-    tierId: string,
-    seatId: string
-  ) => {
-    setIsReserving(true)
-    try {
-      await removeSeatReserve(eventId, tierId, [seatId])
-      await fetchSeatMapReservations()
-      if (_isEmpty(JSON.parse(localStorage.getItem('reservationData') as string))) {
-        endTimer()
-      }
-      const reservationData = JSON.parse(localStorage.getItem('reservationData') || '')
-      const currentSelectedTickets = { ...selectedTickets }
-      delete currentSelectedTickets[seatId]
-      setReservedSeats(reservationData)
-      setSelectedTickets(currentSelectedTickets)
-    } catch (error) {
-      setError('Something went wrong')
-    } finally {
-      setIsReserving(false)
-    }
-  }
-
-  const onSeatClick = async (seatInfo: {
-    seat: {
-      tierId: string;
-      seatId: string;
-      status: string;
-    };
-  }) => {
-    const {
-      seat: { tierId, seatId, status },
-    } = seatInfo
-
-    const reservationData = JSON.parse(localStorage.getItem('reservationData') || '[]')
-    if (status === 'B' || status === 'R' || status === 'BLOCKED' || status === 'RE')
-      return
-    if (_find(reservationData, data => data.seatId === seatId)) {
-      handleCancelSeatReservtion(eventId, tierId, seatId)
-    } else if (reservationData.length >= 10) {
-      setError('Limit exceeded')
-    } else {
-      handleSeatReservation(eventId, tierId, seatId)
-    }
-  }
-
-  const handleTicketSelect = (ticketId: string, seatId: string) => {
-    const currentSelectedTickets = { ...selectedTickets }
-    currentSelectedTickets[seatId] = ticketId
-    setSelectedTickets(currentSelectedTickets)
-  }
-
-  const handleGetTicketBtnClick = async () => {
-    setIsAddingToCart(true)
-    const ticketsDropdownsData = getTicketDropdownData(
-      reservedSeats,
-      ticketTypeTierRelationsRef.current
-    )
-    let selectedSeats = {}
-    _forEach(ticketsDropdownsData, ticketData => {
-      selectedSeats = {
-        ...selectedSeats,
-        [ticketData.seatId]: ticketData.ticketsData,
-      }
-    })
-    const addToCartData = getAddToCartRequestData({
-      eventId,
-      reservations: _map(reservedSeats, seat => seat.seatId),
-      selectedSeats,
-      selectedTickets,
-      guestCounts,
-    })
-    try {
-      const response = await addToCartFunc({
-        eventId,
-        data: addToCartData,
-        ticketQuantity: addToCartData?.attributes?.product_cart_quantity,
-      })
-      localStorage.removeItem('reservationData')
-      onAddToCartSuccess(response)
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        const message = _get(error, 'response.data.message', '')
-        setError(message)
-      }
-    } finally {
-      setIsAddingToCart(false)
-    }
-  }
-
-  useEffect(() => {
-    if (Date.now() > Number(localStorage.getItem(`reservationStart-${eventId}`))) {
-      setSelectedTickets({})
-      setReservedSeats([])
-    }
-
-    const makeRequests = async () => {
-      try {
-        setIsLoadingStatuses(true)
-        await fetchSeatMapData()
-        await fetchSeatMapReservations()
-      } catch (error) {
-        setError('Something went wrong')
-      } finally {
-        setIsLoadingStatuses(false)
-      }
-    }
-
-    makeRequests()
-
-    if (country) {
-      localStorage.setItem('eventCountry', country)
-    }
-  }, [country, eventId, fetchSeatMapData])
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      fetchSeatMapReservations()
-    }, 3000)
-
-    return () => {
-      clearInterval(intervalId)
-    }
-  }, [fetchSeatMapReservations])
-
-  useEffect(() => {
-    if (!isOnline) {
-      setError(OFFLINE_MESSAGE)
-    } else if (isOnline && error === OFFLINE_MESSAGE) {
-      setError(null)
-    }
-  }, [error, isOnline])
-
-  return (
-    <>
-      {error && (
-        <Alert
-          severity="error"
-          onClose={() => {
-            setError(null)
-          }}
-          variant="filled"
-          style={{ width: '350px' }}
-        >
-          {error}
-        </Alert>
-      )}
-      {showTimer && (
-        <Countdown
-          date={moment(
-            Number(localStorage.getItem(`reservationStart-${eventId}`))
-          ).valueOf()}
-          renderer={(props: CountdownRenderProps) => (
-            <div className="reservation-countdown">
-              <span className="reservation-message">{timerMessage}</span>
-              <span className="reservation-timer">
-                {showZero(props.minutes)}:{showZero(props.seconds)}
-              </span>
-            </div>
-          )}
-          onComplete={() => {
-            endTimer()
-            setSelectedTickets({})
-            setReservedSeats([])
-            if (onCountdownFinish) {
-              onCountdownFinish()
-            }
-          }}
-        />
-      )}
-      {!isLoadingSeatMapData && !isLoadingStatuses && <ReferralLogic eventId={eventId} />}
-      <TicketsSection
-        selectedTickets={selectedTickets}
-        handleTicketSelect={handleTicketSelect}
-        handleCancelReservation={(seatId: string, tireId: string) =>
-          handleCancelSeatReservtion(eventId, tireId, seatId)
-        }
-        handleGetTicketClick={handleGetTicketBtnClick}
-        isAddingToCart={isAddingToCart}
-        reservedSeats={reservedSeats}
-        ticketDeleteButtonContent={ticketDeleteButtonContent}
-        ticketInfoContent={ticketInfoContent}
-        ticketTypeTierRelations={ticketTypeTierRelationsRef.current}
-        currencySymbol={symbol}
-        tableMapEnabled={Boolean(tableMapEnabled)}
-        guestCounts={guestCounts}
-        setGuestCounts={setGuestCounts}
-      />
-      <SeatMapComponent
-        seatMapProps={{
-          seatData: seatMapData.seatMap,
-          statuses: seatMapStatuses,
-          tierPrices: seatMapData.tierPrices,
-          seatMapType: seatMapData.seatMapType,
-          ticketTypeTierRelations: ticketTypeTierRelationsRef.current,
-          seatMapEvents: { onSeatClick },
-          isReserving,
-          predefinedSeats: seatMapData.predefinedSeats,
-          isLoadingSeatMapData,
-        }}
-        mapContainerId={mapContainerId}
-      />
-    </>
-  )
-}

package/src/components/seatMapContainer/utils.ts

@@ -1,133 +0,0 @@
-import _find from 'lodash/find'
-import _forEach from 'lodash/forEach'
-import _isEmpty from 'lodash/isEmpty'
-import _values from 'lodash/values'
-
-export const getTierIdBasedOnSeatId = (seatId: string, eventSeats: Array<EventSeat>) => {
-  let tierId: number | string = ''
-
-  _forEach(eventSeats, group => {
-    _forEach(group.seats, (seatsCount, rowId) => {
-      const [row_id, seat_id] = seatId.split(':')
-      if (row_id === rowId && seat_id <= seatsCount) {
-        tierId = Number(group.tier_id)
-        return false
-      }
-      return true
-    })
-  })
-
-  return tierId
-}
-
-export const getButtonLabel = (count: number, tableMapEnabled: boolean) => {
-  if (!count) {
-    return tableMapEnabled ? `GET TABLES` : `GET TICKETS`
-  } else if (count === 1) {
-    return tableMapEnabled ? `GET ${count} TABLE` : `GET ${count} TICKET`
-  }
-  return tableMapEnabled ? `GET ${count} TABLES` : `GET ${count} TICKETS`
-}
-
-export const getOwnReservationsBasedOnStatuses = (statuses: any) => {
-  const ownReservations: string[] = []
-  Object.keys(statuses).forEach((groupRowId: string) =>
-    Object.keys(statuses[groupRowId]).forEach((seatIndex: string | number) => {
-      if (statuses[groupRowId][seatIndex] === 'OR') {
-        ownReservations.push(`${groupRowId}:${seatIndex}`)
-      } else if (statuses[groupRowId][seatIndex] === 'H') {
-        statuses[groupRowId][seatIndex] = 'BLOCKED'
-      }
-    })
-  )
-  return ownReservations
-}
-
-export const getTicketDropdownData = (
-  reservationData: Array<SeatReservationData>,
-  tierReleations: TicketTypeTierRelations
-) => {
-  const ticketsDropdownsData: Array<ITicketsDropdownsData> = []
-  _forEach(reservationData, reservation => {
-    if (tierReleations[reservation.tierId]) {
-      const ticketsData = _values(tierReleations[reservation.tierId])
-      ticketsDropdownsData.push({
-        seatId: reservation.seatId,
-        tierId: reservation.tierId,
-        ticketsData,
-      })
-    } else {
-      ticketsDropdownsData.push({
-        seatId: reservation.seatId,
-        tierId: reservation.tierId,
-        ticketsData: [
-          {
-            ticket_type_tier_id: reservation.tierId,
-            ticket_type_name: 'Please select Ticket Type',
-            ticket_type_price: '',
-            ticket_type_id: 'default',
-          },
-        ],
-      })
-    }
-  })
-  return ticketsDropdownsData
-}
-
-export const getAddToCartRequestData = ({
-  eventId,
-  reservations = [],
-  selectedSeats = [],
-  selectedTickets = [],
-  guestCounts = {},
-}: any) => {
-  const hasGuests = !_isEmpty(guestCounts)
-
-  const addToCartData: ICartRequestData = {
-    attributes: {
-      alternative_view_id: null,
-      product_cart_quantity: reservations.length,
-      product_options: {},
-      product_id: eventId,
-      ticket_types: {},
-    },
-  }
-
-  const productOptions = {} as any
-  const ticketTypes = {} as any
-
-  _forEach(reservations, (item, index) => {
-    const ticket = _find(
-      selectedSeats[item],
-      sitem => sitem.ticket_type_id === selectedTickets[item]
-    )
-    productOptions[ticket.ticket_type_option] = ticket.ticket_type_id
-
-    const ticketTypesKey = hasGuests ? index : ticket.ticket_type_id
-    const quantity = hasGuests
-      ? guestCounts[item]
-      : (ticketTypes[ticket.ticket_type_id]?.quantity || 0) + 1
-
-    ticketTypes[ticketTypesKey] = {
-      quantity,
-      product_options: {
-        [ticket.ticket_type_option]: ticket.ticket_type_id,
-        ticket_price: ticket.ticket_type_price,
-      },
-    }
-  })
-
-  addToCartData.attributes.product_options = productOptions
-  addToCartData.attributes.ticket_types = ticketTypes
-
-  return addToCartData
-}
-
-export const getTierRelationsArray = (data: Array<TicketTypeTierRelationsData>) => {
-  const ticketTypeTireRelationsArray: Array<string | number | null> = []
-  _forEach(data, (item: TicketTypeTierRelationsData) => {
-    ticketTypeTireRelationsArray.push(...(_values(item) as any))
-  })
-
-  return ticketTypeTireRelationsArray
-}