tf-checkout-react 1.3.50 → 1.4.0

package/src/components/seatMapContainer/index.tsx

@@ -0,0 +1,408 @@
+import { Alert } from '@mui/material'
+import axios from 'axios'
+import { identity } from 'lodash'
+import _find from 'lodash/find'
+import _forEach from 'lodash/forEach'
+import _get from 'lodash/get'
+import _isEmpty from 'lodash/isEmpty'
+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 from 'react-countdown'
+
+import {
+  getSeatMapData,
+  getSeatMapStatuses,
+  removeSeatReserve,
+  reserveSeat,
+} from '../../api'
+import { showZero } from '../../utils/showZero'
+import { addToCartFunc } from './addToCart'
+import { SeatMapComponent } from './SeatMapComponent'
+import { TicketsSection } from './TicketsSection'
+import {
+  getAddToCartRequestData,
+  getOwnReservationsBasedOnStatuses,
+  getTicketDropdownData,
+  getTierIdBasedOnSeatId,
+} from './utils'
+
+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,
+  } = 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 [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 updateGuestCounts = (data: any) => {
+    _forEach(data, (item: any) => {
+      const tierTickets = ticketTypeTierRelationsRef.current[item.tierId]
+      const seatTicketsArray = _values(tierTickets)
+
+      setGuestCounts((prevState: any) => ({
+        ...prevState,
+        [item.seatId]: Number(
+          seatTicketsArray[0].ticket_type_min_number_of_guests
+        ),
+      }))
+    })
+  }
+
+  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')
+    }
+  }, [eventId])
+
+  const fetchSeatMapReservations = useCallback(async () => {
+    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))
+      setSeatMapStatuses(statusesResponse.data.attributes)
+      setReservedSeats(reservationData)
+      // automatically set ticket/table type if it's the only one
+      if (ticketTypeTierRelationsRef.current) {
+        _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])
+
+  const startTimer = useCallback((duration: number) => {
+    setShowTimer(true)
+
+    if (!localStorage.getItem(`reservationStart-${eventId}`)) {
+      localStorage.setItem(
+        `reservationStart-${eventId}`,
+        String(Date.now() + duration)
+      )
+    }
+  }, [])
+
+  const endTimer = useCallback(() => {
+    localStorage.removeItem(`reservationStart-${eventId}`)
+    setShowTimer(false)
+  }, [])
+
+  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('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: any) => {
+    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 {
+        await fetchSeatMapData()
+        fetchSeatMapReservations()
+      } catch (error) {
+        setError('Something went wrong')
+      }
+    }
+
+    makeRequests()
+
+    if (country) {
+      localStorage.setItem('eventCountry', country)
+    }
+
+    const intervalId = setInterval(() => {
+      fetchSeatMapReservations()
+    }, 3000)
+
+    return () => {
+      clearInterval(intervalId)
+    }
+  }, [fetchSeatMapData, fetchSeatMapReservations])
+
+  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: any) => (
+            <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()
+            }
+          }}
+        />
+      )}
+      <TicketsSection
+        selectedTickets={selectedTickets}
+        handleTicketSelect={handleTicketSelect}
+        handleCancelReservation={(seatId: string, tireId: string) =>
+          handleCancelSeatReservtion(eventId, tireId, seatId)
+        }
+        handleGetTicketClick={handleGetTicketBtnClick}
+        isAddingToCart={isAddingToCart}
+        reservedSeats={reservedSeats}
+        ticketDeleteButtonContent={ticketDeleteButtonContent}
+        ticketTypeTierRelations={ticketTypeTierRelationsRef.current}
+        currencySymbol={symbol}
+        tableMapEnabled={Boolean(tableMapEnabled)}
+        guestCounts={guestCounts}
+        setGuestCounts={setGuestCounts}
+      />
+      {seatMapData.seatMap && seatMapStatuses && (
+        <SeatMapComponent
+          seatMapProps={{
+            seatData: seatMapData.seatMap,
+            statuses: seatMapStatuses,
+            tierPrices: seatMapData.tierPrices,
+            seatMapType: seatMapData.seatMapType,
+            ticketTypeTierRelations: ticketTypeTierRelationsRef.current,
+            seatMapEvents: { onSeatClick },
+            isReserving,
+            predefinedSeats: seatMapData.predefinedSeats,
+          }}
+          mapContainerId={mapContainerId}
+        />
+      )}
+    </>
+  )
+}

package/src/components/seatMapContainer/utils.ts

@@ -0,0 +1,138 @@
+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 = {
+    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> = []
+  _forEach(data, (item: TicketTypeTierRelationsData) => {
+    ticketTypeTireRelationsArray.push(..._values(item))
+  })
+
+  return ticketTypeTireRelationsArray
+}

package/src/components/stripePayment/index.tsx

@@ -1,19 +1,20 @@
-import React, { useState, useEffect } from 'react'
+import './style.css'
+
+import CircularProgress from '@mui/material/CircularProgress'
 import {
-  useStripe,
-  useElements,
-  CardNumberElement,
-  CardExpiryElement,
   CardCvcElement,
+  CardExpiryElement,
+  CardNumberElement,
+  useElements,
+  useStripe,
 } from '@stripe/react-stripe-js'
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
-import _identity from 'lodash/identity'
 import _get from 'lodash/get'
-import { CheckboxField } from '../common/index'
+import _identity from 'lodash/identity'
+import React, { useEffect, useState } from 'react'
 
-import './style.css'
 import { getCurrencySymbolByCurrency } from '../../normalizers'
-import CircularProgress from '@mui/material/CircularProgress'
+import { CheckboxField } from '../common/index'
 
 const options: StripeCardNumberElementOptions = {
   style: {
@@ -66,10 +67,10 @@ const CheckoutForm = ({
   currency,
   billing_info,
   isLoading = false,
-  handleSetLoading = () => { },
+  handleSetLoading = () => {},
   conditions = [],
   disableZipSection,
-  paymentButtonText
+  paymentButtonText,
 }: ICheckoutForm) => {
   const stripe = useStripe()
   const elements = useElements()
@@ -173,9 +174,7 @@ const CheckoutForm = ({
 
   useEffect(() => {
     if (checkboxes.length) {
-      const allChecked = checkboxes.every(
-        (item: any) => item?.checked === true
-      )
+      const allChecked = checkboxes.every((item: any) => item?.checked === true)
       setAllowSubmit(allChecked)
     } else {
       setAllowSubmit(true)
@@ -194,7 +193,7 @@ const CheckoutForm = ({
           <div className="card_number_element">
             <span className="card_label_text">Card number</span>
             <CardNumberElement
-              options={{ ...options, ...stripeCardOptions, }}
+              options={{ ...options, ...stripeCardOptions }}
               onReady={_identity}
               onChange={_identity}
               onBlur={_identity}
@@ -204,7 +203,9 @@ const CheckoutForm = ({
           <div className="elements">
             <div className="expiration_element">
               <span className="card_label_text">Expiration date</span>
-              <CardExpiryElement options={{ ...options, ...stripeCardOptions }} />
+              <CardExpiryElement
+                options={{ ...options, ...stripeCardOptions }}
+              />
             </div>
             <div className="cvc_element">
               <span className="card_label_text">CVC</span>
@@ -240,13 +241,17 @@ const CheckoutForm = ({
           </div>
         ))}
         <div
-          className={`payment_button ${buttonIsDiabled ? 'disabled-payment-button' : ''}`}
+          className={`payment_button ${
+            buttonIsDiabled ? 'disabled-payment-button' : ''
+          }`}
         >
           <button disabled={buttonIsDiabled} type="submit">
             {isLoading ? (
               <CircularProgress size={26} />
             ) : (
-              `${paymentButtonText ? paymentButtonText : 'Pay'} ${getCurrencySymbolByCurrency(currency)}${total}`
+              `${
+                paymentButtonText ? paymentButtonText : 'Pay'
+              } ${getCurrencySymbolByCurrency(currency)}${total}`
             )}
           </button>
         </div>