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

package/src/components/ticketsContainer/index.tsx

@@ -1,986 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import './style.css'
-
-import { ThemeOptions } from '@mui/material'
-import Alert from '@mui/material/Alert'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
-import { CSSProperties } from '@mui/styles'
-import axios, { AxiosError } from 'axios'
-import _filter from 'lodash/filter'
-import _find from 'lodash/find'
-import _flatten from 'lodash/flatten'
-import _forEach from 'lodash/forEach'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import _includes from 'lodash/includes'
-import _isEmpty from 'lodash/isEmpty'
-import _map from 'lodash/map'
-import _some from 'lodash/some'
-import moment from 'moment-timezone'
-import React, { ReactNode, useEffect, useRef, useState } from 'react'
-import Button from 'react-bootstrap/Button'
-
-import {
-  addToCart,
-  getCheckoutPageConfigs,
-  getEvent,
-  getProfileData,
-  getTickets,
-  postOnCheckout,
-} from '../../api'
-import { getTimeSlotsByDate } from '../../api/common'
-import { getPreRegistrationInfluencers } from '../../api/preRegistrationComplete'
-import { X_TF_ECOMMERCE } from '../../constants'
-import { useCookieListener } from '../../hooks/useCookieListener'
-import { useLocalStorageListener } from '../../hooks/useLocalStorageListener'
-import { usePixel } from '../../hooks/usePixel'
-import {
-  createCheckoutDataBodyWithDefaultHolder,
-  getCookieByName,
-  getQueryVariable,
-  isBrowser,
-  setLoggedUserData,
-} from '../../utils'
-import { logoutUser } from '../../utils/auth'
-import { Loader } from '../common/index'
-import { PoweredBy } from '../common/PoweredBy'
-import ConfirmModal from '../confirmModal'
-import Countdown from '../countdown'
-import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
-import { LoginModal } from '../loginModal'
-import { PreRegistration } from '../preRegistration'
-import WaitingList from '../waitingList'
-import { AccessCodeSection } from './AccessCodeSection'
-import { PromoCodeSection } from './PromoCodeSection'
-import { ReferralLogic } from './ReferralLogic'
-import { TicketsSection } from './TicketsSection'
-import TimeSlotsSection from './TimeSlotsSection'
-
-const checkUserPreregistration = (preregisteredUsers: IInfluencerData[]) => {
-  const isWindowDefined = typeof window !== 'undefined'
-  const userDataString = isWindowDefined ? window.localStorage.getItem('user_data') : ''
-  let isPreregisteredUser = false
-  if (userDataString) {
-    const user = JSON.parse(userDataString)
-    isPreregisteredUser = _some(preregisteredUsers, item => item.email === user?.email)
-  }
-  return isPreregisteredUser
-}
-
-interface TimeSlotsAttributes {
-  ValidPromoCode: boolean;
-  is_access_code: boolean;
-  isPromotionsEnabled: boolean;
-}
-
-interface CartSuccess {
-  skip_billing_page: boolean;
-  event_id: string;
-  hash?: string | number;
-  total?: string | number;
-  hasAddOn?: boolean;
-  eventSlug?: string;
-  cart?: ICart[];
-  currencySymbol?: string;
-}
-
-export interface IGetTickets {
-  eventId: number;
-  onAddToCartSuccess: (response: CartSuccess) => void;
-  getTicketsLabel?: string;
-  contentStyle?: React.CSSProperties;
-  onAddToCartError: (e: AxiosError) => void;
-  onGetTicketsSuccess: (response: {
-    data: { attributes: { tickets: ITicketData[] } };
-  }) => void;
-  onGetTicketsPress: () => void;
-  onGetTicketsError: (e: AxiosError) => void;
-  onLogoutSuccess: () => void;
-  onLogoutError: (e: AxiosError) => void;
-  onGetProfileDataSuccess: (response: {
-    data: { attributes: { [key: string]: string | number | boolean | null } };
-  }) => void;
-  onGetProfileDataError: (e: AxiosError) => void;
-  onLoginSuccess: () => void;
-  handleNotInvitedModalClose: () => void;
-  handleInvalidLinkModalClose: () => void;
-  theme?: 'light' | 'dark';
-  queryPromoCode?: string;
-  isPromotionsEnabled?: boolean;
-  themeOptions?: ThemeOptions & {
-    input?: CSSProperties;
-    checkbox?: CSSProperties;
-  };
-  isAccessCodeEnabled?: boolean;
-  hideSessionButtons?: boolean;
-  hideWaitingList?: boolean;
-  enableBillingInfoAutoCreate?: boolean;
-  isButtonScrollable?: boolean;
-  sortBySoldOut?: boolean;
-  disableCountdownLeadingZero?: boolean;
-  isLoggedIn?: boolean;
-  actionsSectionComponent?: ReactNode;
-  ticketsHeaderComponent?: ReactNode;
-  hideTicketsHeader?: boolean;
-  tableTicketsHeaderComponent?: ReactNode;
-  hideTableTicketsHeader?: boolean;
-  enableInfluencersSection?: boolean;
-  enableAddOns?: boolean;
-  ordersPath?: string;
-  showPoweredByImage?: boolean;
-  promoText?: string;
-  showGroupNameBlock?: boolean;
-  currencySymbol?: string;
-  onReserveButtonClick?: () => void;
-  onPendingVerification?: () => void;
-  showAlertIcons?: boolean;
-  submitMode?: 'auto' | 'click';
-  onPreRegistrationSuccess?: (response: any) => void;
-  onPreRegistrationError?: (e: AxiosError) => void;
-  onPreRegistrationGetCountriesSuccess?: (res: any) => void;
-  onPreRegistrationGetCountriesError?: (e: AxiosError) => void;
-  onForgotPasswordSuccess?: (res: any) => void;
-  onForgotPasswordError?: (e: AxiosError) => void;
-  showForgotPasswordButton?: boolean;
-  logo?: string;
-}
-
-export interface ITicket {
-  id: string | number;
-  [key: string]: string | number;
-}
-
-interface IInfluencer {
-  [key: string]: string | undefined;
-}
-export interface ISelectedTickets {
-  isTable: boolean;
-  [key: string]: string | number | boolean;
-}
-
-export const TicketsContainer = ({
-  onLoginSuccess,
-  getTicketsLabel,
-  eventId,
-  onAddToCartSuccess,
-  contentStyle = {},
-  onAddToCartError = _identity,
-  onGetTicketsSuccess = _identity,
-  onGetTicketsError = _identity,
-  onLogoutSuccess = _identity,
-  onLogoutError = _identity,
-  onGetProfileDataSuccess = _identity,
-  onGetProfileDataError = _identity,
-  onGetTicketsPress = _identity,
-  theme = 'light',
-  queryPromoCode = '',
-  isPromotionsEnabled = true,
-  themeOptions,
-  isAccessCodeEnabled = false,
-  hideSessionButtons = false,
-  hideWaitingList = false,
-  enableBillingInfoAutoCreate = true,
-  isButtonScrollable = false,
-  sortBySoldOut = false,
-  disableCountdownLeadingZero = false,
-  isLoggedIn = false,
-  actionsSectionComponent: ActionsSectionComponent,
-  ticketsHeaderComponent,
-  hideTicketsHeader = false,
-  tableTicketsHeaderComponent,
-  hideTableTicketsHeader = false,
-  enableInfluencersSection = true,
-  enableAddOns = true,
-  handleNotInvitedModalClose = _identity,
-  handleInvalidLinkModalClose = _identity,
-  ordersPath,
-  showPoweredByImage = false,
-  promoText,
-  showGroupNameBlock = false,
-  currencySymbol = '',
-  onReserveButtonClick = _identity,
-  onPendingVerification = _identity,
-  showAlertIcons = true,
-  onPreRegistrationSuccess = _identity,
-  onPreRegistrationError = _identity,
-  onPreRegistrationGetCountriesSuccess = _identity,
-  onPreRegistrationGetCountriesError = _identity,
-  onForgotPasswordSuccess = _identity,
-  onForgotPasswordError = _identity,
-  showForgotPasswordButton = false,
-  logo,
-}: IGetTickets) => {
-  const [selectedTickets, setSelectedTickets] = useState({} as ISelectedTickets)
-  const [isLogged, setIsLogged] = useState(Boolean(getCookieByName(X_TF_ECOMMERCE)))
-  const [showLoginModal, setShowLoginModal] = useState(false)
-  const [tickets, setTickets] = useState([] as ITicketData[])
-  const [event, setEvent] = useState<any>(null)
-  const [showWaitingList, setShowWaitingList] = useState(false)
-  const [isLoading, setIsLoading] = useState(true)
-  const [codeIsLoading, setCodeIsLoading] = useState(false)
-  const [handleBookIsLoading, setHandleBookIsLoading] = useState(false)
-  const [code, setCode] = useState(getQueryVariable('r') || queryPromoCode)
-  const [showPromoInput, setShowPromoInput] = useState(false)
-  const [codeIsApplied, setCodeIsApplied] = useState(false)
-  const [codeIsInvalid, setCodeIsInvalid] = useState(false)
-  const [showAccessCodeSection, setShowAccessCodeSection] = useState(isAccessCodeEnabled)
-  const [showPromoCodeSection, setShowPromoCodeSection] = useState(isPromotionsEnabled)
-  const [error, setError] = useState<string | null>(null)
-  const [isNotInvitedError, setIsNotInvitedError] = useState('')
-  const [isInvalidLinkError, setIsInvalidLinkError] = useState('')
-  const [pendingVerificationMessage, setPendingVerificationMessage] = useState()
-  const [preregisteredUsers, setPreregisteredUsers] = useState(
-    [] as Array<IInfluencerData>
-  )
-  const [ticketsNotAvailableModalOpen, setTicketsNotAvailableModalOpen] = useState(false)
-  const [isPreregistered, setIsPreregistered] = useState(
-    checkUserPreregistration(preregisteredUsers)
-  )
-  const ticketsContainerRef = useRef<HTMLDivElement>(null)
-  const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
-  const isTimeSlotEvent = event?.isTimeSlotEvent
-  const [availableDates, setAvailableDates] = useState<string[]>([])
-  const [selectedDate, setSelectedDate] = useState<string | null>(null)
-  const [timeSlotGroups, setTimeSlotGroups] = useState<{ [key: string]: any[] }>({})
-
-  useCookieListener(X_TF_ECOMMERCE, value => setIsLogged(Boolean(value)))
-  useLocalStorageListener('user_data', (user: any) => {
-    const isPreregisteredUser = _some(
-      preregisteredUsers,
-      item => item.email === user?.email
-    )
-    setIsPreregistered(isPreregisteredUser)
-  })
-  usePixel(eventId, { pageUrl })
-
-  useEffect(() => {
-    window.localStorage.removeItem('extraData')
-  }, [])
-
-  useEffect(() => {
-    if (eventId) {
-      getTicketsApi()
-      fetchPreregisteredData()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [eventId])
-
-  useEffect(() => {
-    setIsPreregistered(checkUserPreregistration(preregisteredUsers))
-  }, [preregisteredUsers])
-
-  useEffect(() => {
-    if (isLogged) {
-      fetchUserData()
-        .then(res => {
-          window.localStorage.setItem('user_data', JSON.stringify(res))
-          onGetProfileDataSuccess({ data: { attributes: res } })
-        })
-        .catch(e => {
-          if (axios.isAxiosError(e)) {
-            onGetProfileDataError(e)
-          }
-        })
-    }
-  }, [isLogged])
-
-
-  const handleLogout = () => {
-    logoutUser({ onLogoutError, onLogoutSuccess, setIsLogged })
-  }
-
-  const handleExternalLogin = () => {
-    setIsLogged(true)
-  }
-
-  const handleOnClose = () => {
-    setShowLoginModal(false)
-  }
-
-  const handleOnLogin = () => {
-    setShowLoginModal(false)
-    setIsLogged(true)
-    if (onLoginSuccess) {
-      onLoginSuccess()
-    }
-  }
-
-  const getTimeSlots = async (date: string | null, type?: string): Promise<void> => {
-    if (!date) {
-      setShowPromoCodeSection(false)
-      return
-    }
-
-    try {
-      const timeSlotsResponse = await getTimeSlotsByDate(
-        eventId,
-        moment(date).format('YYYY-MM-DD'),
-        code
-      )
-
-      const groupedTickets: any = {}
-      _map(timeSlotsResponse.data.attributes.timeslots, (timeslots, date) => {
-        const dateKeyChunks = date.split('-')
-        const dateKey = [dateKeyChunks[0], dateKeyChunks[1], dateKeyChunks[2]].join('-')
-
-        _forEach(timeslots, ticketList => {
-          if (!groupedTickets[dateKey]) {
-            groupedTickets[dateKey] = []
-          }
-          groupedTickets[dateKey] = groupedTickets[dateKey].concat(ticketList)
-        })
-      })
-
-      setTimeSlotGroups(groupedTickets)
-      setShowPromoCodeSection(true)
-
-      const attributes: TimeSlotsAttributes = timeSlotsResponse?.data?.attributes
-
-      if (type === 'promo') {
-        setCodeIsApplied(attributes.ValidPromoCode)
-        setCodeIsInvalid(!attributes.ValidPromoCode)
-        setCode('')
-        window.localStorage.setItem('appliedPromoCode', code)
-        setShowAccessCodeSection(attributes.is_access_code)
-        setShowPromoCodeSection(attributes.isPromotionsEnabled)
-      }
-    } catch (error) {}
-  }
-
-  async function getTicketsApi(isUpdatingCode?: boolean, type?: string) {
-    try {
-      if (isUpdatingCode) {
-        setCodeIsLoading(true)
-      } else {
-        setIsLoading(true)
-      }
-
-      const previewKey = getQueryVariable('pk') || undefined
-      const eventResponse = await getEvent(eventId, previewKey)
-      if (eventResponse.success) {
-        const event = eventResponse.data.attributes
-        setEvent(event)
-
-        if (event.country && isBrowser) {
-          window.localStorage.setItem('eventCountry', event.country)
-        }
-
-        if (event.isTimeSlotEvent) {
-          getTimeSlots(selectedDate, code)
-          // For timeslots we shouldn't fetch all tickets at once
-          setAvailableDates(event?.timeslotSettings?.availableDates ?? [])
-          return
-        }
-      }
-
-      const response = await getTickets(eventId, code, previewKey)
-
-      if (response.success) {
-        const attributes = response?.data?.attributes
-        type === 'promo' && setCodeIsApplied(attributes.ValidPromoCode)
-        type === 'promo' && setCodeIsInvalid(!attributes.ValidPromoCode)
-        setTickets(attributes.tickets)
-        setShowWaitingList(attributes.showWaitingList)
-        onGetTicketsSuccess({
-          data: { attributes: { tickets: response.data.attributes.tickets } },
-        })
-        setCode('')
-        window.localStorage.setItem('appliedPromoCode', code)
-        setShowAccessCodeSection(attributes.is_access_code)
-        setShowPromoCodeSection(attributes.isPromotionsEnabled)
-      }
-    } catch (e) {
-      if (axios.isAxiosError(e)) {
-        onGetTicketsError(e)
-        setError(_get(e, 'response.data.message', ''))
-        window.localStorage.removeItem('appliedPromoCode')
-      }
-    } finally {
-      setIsLoading(false)
-      setCodeIsLoading(false)
-    }
-  }
-
-  async function fetchPreregisteredData() {
-    try {
-      const preregistrationData = await getPreRegistrationInfluencers({
-        eventId,
-      })
-      setPreregisteredUsers(preregistrationData.data.attributes.influencers)
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        setError(_get(error, 'response.data.message', ''))
-      }
-    }
-  }
-
-  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
-      }
-      return {
-        [key]: value,
-        isTable,
-      }
-    })
-  }
-
-  const handleOrdersClick = () => {
-    if (isBrowser) {
-      window.location.href = ordersPath ?? '/orders'
-    }
-  }
-
-  const onErrorClose = () => {
-    setError(null)
-  }
-
-  const handleBook = async () => {
-    const timeSlotTickets = _flatten(_map(timeSlotGroups, slots => slots))
-
-    setHandleBookIsLoading(true)
-
-    // 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: totalProductCartQuantity,
-        product_options: {
-          [firstOptionName]: firstTicketId,
-        },
-        product_id: eventId,
-        ticket_types: ticketTypesData,
-      },
-    }
-
-    try {
-      onGetTicketsPress()
-      const result = await addToCart(eventId, data)
-      const pageConfigsDataResponse = enableAddOns
-        ? await getCheckoutPageConfigs()
-        : {
-            status: 200,
-            data: { attributes: _get(result, 'data.attributes') },
-          }
-
-      if (pageConfigsDataResponse.status === 200) {
-        const pageConfigsData: any =
-          _get(pageConfigsDataResponse, 'data.attributes') || {}
-
-        const skipBillingPage = pageConfigsData.skip_billing_page ?? false
-        const hasAddOn = pageConfigsData.has_add_on ?? false
-        const freeTicket = pageConfigsData.free_ticket ?? false
-
-        let hash: string | number | undefined = ''
-        let total: string | number | undefined = ''
-
-        isBrowser && window.localStorage.removeItem('add_ons')
-        isBrowser && window.localStorage.removeItem('checkoutAdditionalConfigs')
-
-        if (skipBillingPage && !hasAddOn) {
-          // Get user data for checkout data
-          const userData =
-            isBrowser && window.localStorage.getItem('user_data')
-              ? JSON.parse(window.localStorage.getItem('user_data') || '{}')
-              : {}
-
-          const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-            totalProductCartQuantity,
-            userData
-          )
-
-          const checkoutResponse = enableBillingInfoAutoCreate
-            ? await postOnCheckout(checkoutBody, freeTicket)
-            : null
-
-          hash = checkoutResponse?.data?.attributes?.hash || ''
-          total = checkoutResponse?.data?.attributes?.total || ''
-        }
-
-        onAddToCartSuccess({
-          skip_billing_page: skipBillingPage,
-          event_id: String(eventId),
-          hash,
-          total,
-          hasAddOn,
-          eventSlug: event?.slug,
-          cart: pageConfigsDataResponse.data.attributes.cart,
-          currencySymbol: event?.currency.symbol,
-        })
-      }
-    } catch (e) {
-      const errorResponse: any = _get(e, 'response', {})
-      if (errorResponse?.data?.data?.hasUnverifiedOrder) {
-        setPendingVerificationMessage(errorResponse?.data?.message)
-      } else if (axios.isAxiosError(e)) {
-        onAddToCartError(e)
-        const message = _get(e, 'response.data.message', '')
-        const isInvalidLinkError = _includes(
-          message,
-          'No more of this ticket type are available right now'
-        )
-        const isNotInvitedError = _includes(
-          message,
-          'You must have been invited to this event to attend'
-        )
-
-        if (isInvalidLinkError) {
-          setIsInvalidLinkError(message)
-        } else if (isNotInvitedError) {
-          setIsNotInvitedError(message)
-        } else {
-          setError(message)
-        }
-      }
-    } finally {
-      setHandleBookIsLoading(false)
-    }
-  }
-
-  const updateTickets = (isUpdatingCode?: boolean, type?: string) => {
-    getTicketsApi(isUpdatingCode, type)
-  }
-
-  const fetchUserData = async () => {
-    const userDataResponse = await getProfileData()
-    const profileData = _get(userDataResponse, 'data')
-    const profileDataObj = setLoggedUserData(profileData)
-    return profileDataObj
-  }
-
-  const isTicketOnSale = event?.isTimeSlotEvent
-    ? true
-    : _some(
-        tickets,
-        item =>
-          (item.salesStarted || event?.presalesStarted) &&
-          !item.salesEnded &&
-          !item.soldOut
-      )
-
-  const eventHasTickets = !_isEmpty(tickets)
-  const isSalesClosed = event?.salesEnded
-
-  const themeMui = createTheme(themeOptions)
-
-  useEffect(() => {
-    window.document.addEventListener('custom-login', handleExternalLogin)
-    window.document.addEventListener('custom-logout', handleLogout)
-
-    return () => {
-      window.document.removeEventListener('custom-login', handleExternalLogin)
-      window.document.removeEventListener('custom-logout', handleLogout)
-    }
-  }, [])
-
-  const handleGetTicketClick = () => {
-    if (
-      !handleBookIsLoading &&
-      !_isEmpty(selectedTickets) &&
-      Number(Object.values(selectedTickets)[0]) > 0
-    ) {
-      handleBook()
-    } else {
-      if (isButtonScrollable && ticketsContainerRef && ticketsContainerRef.current) {
-        ticketsContainerRef.current.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-          inline: 'nearest',
-        })
-      }
-    }
-  }
-
-  const handleNotAvailableTicketsClick = () => {
-    if (!_isEmpty(selectedTickets)) {
-      setTicketsNotAvailableModalOpen(true)
-    }
-  }
-
-  const bookButtonIsDisabled =
-    (handleBookIsLoading ||
-      _isEmpty(selectedTickets) ||
-      Object.values(selectedTickets)[0] === 0) &&
-    !event?.flagSeatMapAllowed
-
-  const isTicketAvailable = _some(
-    tickets,
-    ticket =>
-      ticket.displayTicket &&
-      !ticket.soldOut &&
-      (ticket.salesStarted || (event?.presalesStarted && !event?.presalesEnded))
-  )
-
-  const wrappedActionsSectionComponent = React.isValidElement(ActionsSectionComponent)
-    ? React.cloneElement(ActionsSectionComponent as React.ReactElement<any>, {
-        handleGetTicketClick,
-        isTicketOnSale,
-        isTicketAvailable,
-      })
-    : null
-
-  const externalUrl = event?.redirectUrl
-  const eventSaleIsNotStarted =
-    !event?.salesStarted && event?.salesStart && !isTicketAvailable
-  const influencers = event?.referralsEnabled ? event?.referrals : []
-
-  const canShowGetTicketBtn = () => {
-    if (
-      !wrappedActionsSectionComponent &&
-      !eventSaleIsNotStarted &&
-      isTicketOnSale &&
-      !event?.salesEnded &&
-      !externalUrl
-    ) {
-      return true
-    }
-
-    return false
-  }
-
-  const onClose = (value: string) => {
-    if (value === 'notInvited') {
-      handleNotInvitedModalClose()
-    } else if (value === 'invalidLink') {
-      handleInvalidLinkModalClose()
-    }
-    setIsNotInvitedError('')
-    setIsInvalidLinkError('')
-  }
-  const hideTopInfluencers = event?.hideTopInfluencers
-  const isSeatMapAllowed = _get(event, 'seatMapAllowed', false)
-  const isTableMapEnabled = _get(event, 'tableMapEnabled', false)
-
-  const notAvailableTicketsMessage = `Tickets for this event are not available until ${moment(
-    event?.salesStart
-  ).format(
-    'dddd, DD MMMM YYYY'
-  )}. \n If you pre-registered, log into your account first to buy your pre-sale ticket.`
-
-  const tableTickets = _filter(tickets, (ticket: any) => ticket.isTable)
-  const ordinaryTickets = {} as ITicket
-  _forEach(tickets, (ticket: any, key: string) => {
-    if (!ticket.isTable) {
-      ordinaryTickets[key] = ticket
-    }
-  })
-
-
-  // Check if event is in pre-registration mode
-  const isPreRegistrationMode =
-    event?.preregEnabled &&
-    event?.preregStarted &&
-    !event?.preregEnded
-
-  return (
-    <ThemeProvider theme={themeMui}>
-      {!isLoading && <ReferralLogic eventId={eventId} />}
-      <div className={`get-tickets-page ${theme} open-ground`} style={contentStyle}>
-        {isInvalidLinkError && (
-          <ConfirmModal
-            message={isInvalidLinkError}
-            hideCancelBtn={true}
-            onClose={() => onClose('invalidLink')}
-            onConfirm={() => onClose('invalidLink')}
-          />
-        )}
-        {isNotInvitedError && (
-          <ConfirmModal
-            hideCancelBtn={true}
-            message={isNotInvitedError}
-            onClose={() => onClose('notInvited')}
-            onConfirm={() => onClose('notInvited')}
-            // loading={removeFromResaleLoading}
-          />
-        )}
-        {error && (
-          <Alert
-            severity="error"
-            onClose={onErrorClose}
-            variant="filled"
-            style={{ width: '350px' }}
-          >
-            {error}
-          </Alert>
-        )}
-        {ticketsNotAvailableModalOpen && (
-          <ConfirmModal
-            message={notAvailableTicketsMessage}
-            hideCancelBtn={true}
-            onClose={() => onClose('invalidLink')}
-            onConfirm={() => setTicketsNotAvailableModalOpen(false)}
-          />
-        )}
-        {isLoading ? (
-          <Loader />
-        ) : isPreRegistrationMode ? (
-          <PreRegistration
-            eventId={eventId}
-            isPreregistrationStarted={event?.preregStarted}
-            logo={logo}
-            showForgotPasswordButton={showForgotPasswordButton}
-            onClose={() => {}}
-            onLogin={onLoginSuccess}
-            onLoginButtonClick={() => {}}
-            onLoginSuccess={onLoginSuccess}
-            onConfirmationSuccess={onPreRegistrationSuccess}
-            onConfirmationError={onPreRegistrationError}
-            onGetCountriesSuccess={onPreRegistrationGetCountriesSuccess}
-            onGetCountriesError={onPreRegistrationGetCountriesError}
-            onForgotPasswordSuccess={onForgotPasswordSuccess}
-            onForgotPasswordError={onForgotPasswordError}
-            themeOptions={themeOptions}
-          />
-        ) : (
-          <div ref={ticketsContainerRef} className="tickets-section-container">
-            {isTimeSlotEvent && (
-              <TimeSlotsSection
-                event={event}
-                eventId={eventId}
-                availableDates={availableDates}
-                selectedDate={selectedDate}
-                setSelectedDate={setSelectedDate}
-                timeSlotGroups={timeSlotGroups}
-                setTimeSlotGroups={setTimeSlotGroups}
-                selectedTickets={selectedTickets}
-                handleTicketSelect={handleTicketSelect}
-                sortBySoldOut={sortBySoldOut}
-                ticketsHeaderComponent={ticketsHeaderComponent}
-                hideTicketsHeader={hideTicketsHeader}
-                showGroupNameBlock={showGroupNameBlock}
-                currencySymbol={currencySymbol}
-                isSeatMapAllowed={isSeatMapAllowed}
-                getTimeSlots={getTimeSlots}
-              />
-            )}
-            {!isSalesClosed && !isTimeSlotEvent && (
-              <TicketsSection
-                event={event}
-                ticketsList={ordinaryTickets}
-                tableTickets={tableTickets}
-                selectedTickets={selectedTickets}
-                handleTicketSelect={handleTicketSelect}
-                sortBySoldOut={sortBySoldOut}
-                ticketsHeaderComponent={ticketsHeaderComponent}
-                tableTicketsHeaderComponent={tableTicketsHeaderComponent}
-                hideTableTicketsHeader={hideTableTicketsHeader || _isEmpty(tableTickets)}
-                hideTicketsHeader={hideTicketsHeader || _isEmpty(ordinaryTickets)}
-                showGroupNameBlock={showGroupNameBlock}
-                currencySymbol={currencySymbol}
-                isSeatMapAllowed={isSeatMapAllowed}
-              />
-            )}
-            {externalUrl ? null : isSalesClosed ? (
-              <p
-                className={`event-closed-message ${
-                  !isLoggedIn ? 'event-closed-on-bottom' : ''
-                }`}
-              >
-                Sales for this event are closed.
-              </p>
-            ) : eventSaleIsNotStarted ? (
-              <Countdown
-                startDate={event.salesStart}
-                timezone={event.timezone}
-                title="Sales start in:"
-                message="No tickets are currently available for this event."
-                showMessage={!eventHasTickets}
-                callback={updateTickets}
-                disableLeadingZero={disableCountdownLeadingZero}
-                isLoggedIn={isLoggedIn}
-              />
-            ) : null}
-            {event?.enableWaitingList &&
-              showWaitingList &&
-              event.salesStarted &&
-              !hideWaitingList && (
-                <WaitingList
-                  tickets={ordinaryTickets}
-                  eventId={eventId}
-                  defaultMaxQuantity={event.waitingListMaxQuantity}
-                />
-              )}
-            {codeIsLoading ? (
-              <Loader />
-            ) : isSalesClosed ? null : showAccessCodeSection ? (
-              <AccessCodeSection
-                code={code}
-                setCode={setCode}
-                updateTickets={updateTickets}
-              />
-            ) : showPromoCodeSection ? (
-              <PromoCodeSection
-                code={code}
-                codeIsApplied={codeIsApplied}
-                setCodeIsApplied={setCodeIsApplied}
-                showPromoInput={showPromoInput}
-                setShowPromoInput={setShowPromoInput}
-                setCode={setCode}
-                updateTickets={updateTickets}
-                codeIsInvalid={codeIsInvalid}
-                setCodeIsInvalid={setCodeIsInvalid}
-                promoText={promoText}
-                showAlertIcons={showAlertIcons}
-              />
-            ) : null}
-            {wrappedActionsSectionComponent}
-            {canShowGetTicketBtn() && (
-              <Button
-                aria-hidden={true}
-                className={`book-button
-                  ${bookButtonIsDisabled ? 'disabled' : ''}
-                  ${isButtonScrollable ? 'is-scrollable' : ''}
-                  ${!isLoggedIn ? 'on-bottom' : ''}
-                `}
-                onClick={
-                  event?.salesStart &&
-                  event?.presalesStarted &&
-                  !event?.presalesEnded &&
-                  (!isPreregistered || !isLogged)
-                    ? handleNotAvailableTicketsClick
-                    : handleGetTicketClick
-                }
-              >
-                {selectedTickets.isTable
-                  ? 'RESERVE TABLES'
-                  : getTicketsLabel || 'GET TICKETS'}
-              </Button>
-            )}
-            {isSeatMapAllowed && !event?.salesEnded && isTicketAvailable && (
-              <Button
-                className="reserve-button"
-                aria-hidden={true}
-                onClick={onReserveButtonClick}
-              >
-                {isTableMapEnabled ? 'Select on map' : 'Select your seats'}
-              </Button>
-            )}
-            {isLogged && !hideSessionButtons ? (
-              <div className="session-wrapper">
-                <span className="session-container">
-                  <Button
-                    variant="outline-light"
-                    className="session-buttons"
-                    onClick={handleOrdersClick}
-                  >
-                    My Orders
-                  </Button>
-                </span>
-                <span className="session-container">
-                  <Button
-                    variant="outline-light"
-                    className="session-buttons"
-                    onClick={handleLogout}
-                  >
-                    Log out
-                  </Button>
-                </span>
-              </div>
-            ) : (
-              ''
-            )}
-          </div>
-        )}
-        {showLoginModal ? (
-          <LoginModal onClose={handleOnClose} onLogin={handleOnLogin} showForgotPasswordButton />
-        ) : null}
-      </div>
-      {showPoweredByImage ? <PoweredBy /> : null}
-      {enableInfluencersSection && !hideTopInfluencers && influencers.length ? (
-        <div className="event-influencers">
-          <h3>
-            <span>TOP</span> INFLUENCERS
-          </h3>
-          <ol className="influencer-list">
-            {influencers.map((influencer: IInfluencer, i: number) => (
-              <li className="influencer-item" key={i}>
-                {`${influencer.firstName} ${influencer.lastName?.charAt(0)}`}{' '}
-              </li>
-            ))}
-          </ol>
-        </div>
-      ) : null}
-      <VerificationPendingModal
-        message={pendingVerificationMessage}
-        onClose={() => {
-          onPendingVerification()
-        }}
-      />
-    </ThemeProvider>
-  )
-}