tf-checkout-react 1.0.103 → 1.0.106

package/src/components/ticketsContainer/index.tsx

@@ -1,430 +1,464 @@
-import React, { useState, useEffect, useRef } from 'react'
-import axios, { AxiosError } from 'axios'
-import { Loader } from '../common/index'
-import './style.css'
-
-import {
-  getTickets,
-  getEvent,
-  addToCart,
-  setCustomHeader,
-  postOnCheckout,
-} from '../../api'
-import _get from 'lodash/get'
-import _some from 'lodash/some'
-import _every from 'lodash/every'
-import _find from 'lodash/find'
-import _isEmpty from 'lodash/isEmpty'
-import Button from 'react-bootstrap/Button'
-import jwt_decode from 'jwt-decode'
-import { TicketsSection } from './TicketsSection'
-import WaitingList from '../waitingList'
-import { PromoCodeSection } from './PromoCodeSection'
-import { LoginModal } from '../loginModal'
-import Countdown from '../countdown'
-import { createCheckoutDataBodyWithDefaultHolder, getQueryVariable } from '../../utils'
-import { ThemeProvider } from '@mui/private-theming'
-import { createTheme, ThemeOptions } from '@mui/material'
-import { CSSProperties } from '@mui/styles'
-import { ReferralLogic } from './ReferralLogic'
-
-interface CartSuccess {
-  skip_billing_page: boolean;
-  names_required: boolean;
-  age_required: boolean;
-  phone_required: boolean;
-  event_id: string;
-  hash?: string;
-}
-
-export interface IGetTickets {
-  eventId: number;
-  onAddToCartSuccess: (response: CartSuccess) => void;
-  getTicketsLabel?: string;
-  contentStyle?: React.CSSProperties;
-  onAddToCartError: (e: AxiosError) => void;
-  onGetTicketsSuccess: (response: any) => void;
-  onGetTicketsError: (e: AxiosError) => void;
-  onLoginSuccess: () => void;
-
-  theme?: 'light' | 'dark';
-  queryPromoCode?: string;
-  isPromotionsEnabled?: boolean;
-  themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties }
-  isAccessCodeEnabled?: boolean;
-  hideSessionButtons?: boolean;
-  hideWaitingList?: boolean;
-  isButtonScrollable?: boolean;
-}
-
-export interface ITicket {
-  id: string | number;
-  [key: string]: string | number;
-}
-
-export interface ISelectedTickets {
-  [key: string]: string | number;
-}
-
-export const TicketsContainer = ({
-  onLoginSuccess,
-  getTicketsLabel,
-  eventId,
-  onAddToCartSuccess,
-  contentStyle = {},
-  onAddToCartError = () => {},
-  onGetTicketsSuccess = () => {},
-  onGetTicketsError = () => {},
-  theme = 'light',
-  queryPromoCode = '',
-  isPromotionsEnabled = true,
-  themeOptions,
-  isAccessCodeEnabled = false,
-  hideSessionButtons = false,
-  hideWaitingList = false,
-  isButtonScrollable = false
-}: IGetTickets) => {
-  const [selectedTickets, setSelectedTickets] = useState(
-    {} as ISelectedTickets
-  )
-  const isWindowDefined = typeof window !== 'undefined'
-  const [isLogged, setIsLogged] = useState(
-    isWindowDefined ? !!window.localStorage.getItem('access_token') : false
-  )
-  const [showLoginModal, setShowLoginModal] = useState(false)
-  const [tickets, setTickets] = useState([] as ITicket[])
-  const [event, setEvent] = useState<any>(null)
-  const [showWaitingList, setShowWaitingList] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [isPromoLoading, setIsPromoLoading] = useState(false)
-  const [handleBookIsLoading, setHandleBookIsLoading] = useState(false)
-  const [promoCode, setPromoCode] = useState('')
-  const [promoCodeUpdated, setPromoCodeUpdated] = useState(getQueryVariable('r') || queryPromoCode)
-  const [showPromoInput, setShowPromoInput] = useState(false)
-  const [promoCodeIsApplied, setPromoCodeIsApplied] = useState(false)
-
-  const ticketsContainerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const access_token = window.localStorage.getItem('access_token')
-      if (access_token) {
-        const decoded = jwt_decode<{ exp: number }>(access_token)
-        if (decoded && decoded.exp < Date.now() / 1000) {
-          window.localStorage.removeItem('access_token')
-          window.localStorage.removeItem('user_data')
-        }
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    !!eventId && getTicketsApi(!!promoCodeUpdated)
-  }, [eventId, promoCodeUpdated])
-
-  const handleLogout = () => {
-    if (isWindowDefined) {
-      window.localStorage.removeItem('access_token')
-      window.localStorage.removeItem('user_data')
-      setIsLogged(false)
-      const event = new window.CustomEvent('tf-logout')
-      window.document.dispatchEvent(event)
-    }
-  }
-
-  useEffect(() => {
-    try {
-      if (typeof window !== 'undefined') {
-        const userData = window.localStorage.getItem('user_data')
-          ? JSON.parse(window.localStorage.getItem('user_data') || '{}')
-          : {}
-        if (userData.country === '') {
-          handleLogout()
-          window.open("https://www.ticketfairy.com/account/change_information?need_country=true");
-        }
-      }
-    } catch(e) {}
-  }, [])
-
-  const handleExternalLogin = () => {
-    setIsLogged(true)
-  }
-  const handleOnClose = () => {
-    setShowLoginModal(false)
-  }
-  const handleOnLogin = () => {
-    setShowLoginModal(false)
-    setIsLogged(true)
-    if (onLoginSuccess) {
-      onLoginSuccess()
-    }
-  }
-
-  async function getTicketsApi(isUpdateingPromoCode?: boolean) {
-    try {
-      !isUpdateingPromoCode && setIsLoading(true)
-      setIsPromoLoading(true)
-      const response = await getTickets(eventId, promoCodeUpdated)
-      const eventResponse = await getEvent(eventId)
-      if (response.data.success) {
-        setCustomHeader(response)
-        const attributes = _get(response, 'data.data.attributes')
-        setPromoCodeIsApplied(attributes.ValidPromoCode)
-        setTickets(_get(attributes, 'tickets'))
-        setShowWaitingList(attributes.showWaitingList)
-        onGetTicketsSuccess(response.data)
-        setPromoCode('')
-      }
-      if (eventResponse.data.success) {
-        const event = _get(eventResponse, 'data.data.attributes')
-        setEvent(event)
-      }
-    } catch (e) {
-      if (axios.isAxiosError(e)) {
-        onGetTicketsError(e)
-      }
-    } finally {
-      setIsLoading(false)
-      setIsPromoLoading(false)
-    }
-  }
-
-  const handleTicketSelect = (key: string, value: number | string) => {
-    setSelectedTickets(prevState => {
-      if (Object.keys(prevState)[0] !== key && !value) {
-        return prevState
-      }
-      return {
-        [key]: value,
-      }
-    })
-  }
-
-  const handleOrdersClick = () => {
-    if (isWindowDefined) {
-      window.location.href = '/orders'
-    }
-  }
-
-  const handleBook = async () => {
-    setHandleBookIsLoading(true)
-    const ticket =
-      _find(tickets, item => selectedTickets[item.id] > 0) || ({} as ITicket)
-    const optionName = _get(ticket, 'optionName')
-    const ticketId = _get(ticket, 'id')
-    const ticketQuantity = +selectedTickets[ticket.id]
-
-    const data = {
-      attributes: {
-        alternative_view_id: null,
-        product_cart_quantity: ticketQuantity,
-        product_options: {
-          [optionName]: ticketId,
-        },
-        product_id: eventId,
-        ticket_types: {
-          [ticketId]: {
-            product_options: {
-              [optionName]: ticketId,
-              ticket_price: ticket.price,
-            },
-            quantity: ticketQuantity,
-          },
-        },
-      },
-    }
-
-    try {
-      const result = await addToCart(eventId, data)
-      if (result.status === 200) {
-        setCustomHeader(result)
-
-        const skipBillingPage =
-          result?.data?.data?.attributes?.skip_billing_page ?? false
-        const nameIsRequired =
-          result?.data?.data?.attributes?.names_required ?? false
-        const ageIsRequired =
-          result?.data?.data?.attributes?.age_required ?? false
-        const phoneIsRequired =
-          result?.data?.data?.attributes?.phone_required ?? false
-
-        let hash = ''
-
-        if (skipBillingPage) {
-          // Get user data for checkout data
-          const isWindowDefined = typeof window !== 'undefined'
-          const userData =
-            isWindowDefined && window.localStorage.getItem('user_data')
-              ? JSON.parse(window.localStorage.getItem('user_data') || '')
-              : {}
-
-          const access_token =
-            isWindowDefined && window.localStorage.getItem('access_token')
-              ? window.localStorage.getItem('access_token') || ''
-              : ''
-
-          const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-            ticketQuantity,
-            userData
-          )
-
-          const checkoutResult = await postOnCheckout(
-            checkoutBody,
-            access_token
-          )
-
-          hash = _get(checkoutResult, 'data.data.attributes.hash')
-        }
-
-        onAddToCartSuccess({
-          skip_billing_page: skipBillingPage,
-          names_required: nameIsRequired,
-          phone_required: phoneIsRequired,
-          age_required: ageIsRequired,
-          event_id: String(eventId),
-          hash,
-        })
-      }
-    } catch (e) {
-      if (axios.isAxiosError(e)) {
-        onAddToCartError(e)
-      }
-    } finally {
-      setHandleBookIsLoading(false)
-    }
-  }
-
-  const updateTickets = () => {
-    getTicketsApi()
-  }
-
-  const isAllTicketsSoldOut = _every(
-    tickets,
-    item => (item.sold_out || item.soldOut)
-  )
-
-  const isTicketOnSale = _some(
-    tickets,
-    item => (item.salesStarted && !item.salesEnded && !item.soldOut)
-  )
-
-  const themeMui = createTheme(themeOptions)
-  
-  useEffect(() => {
-    isWindowDefined &&
-      window.document.addEventListener('custom-logout', handleLogout)
-    return () => {
-      isWindowDefined &&
-        window.document.removeEventListener('custom-logout', handleLogout)
-    }
-  }, [])
-
-  useEffect(() => {
-    isWindowDefined &&
-      window.document.addEventListener('custom-login', handleExternalLogin)
-    return () => {
-      isWindowDefined &&
-        window.document.removeEventListener(
-          'custom-login',
-          handleExternalLogin
-        )
-    }
-  }, [])
-
-  const handleGetTicketClick = () => {
-    if (!handleBookIsLoading && !_isEmpty(selectedTickets) && Object.values(selectedTickets)[0] > 0) {
-      handleBook()
-    } else {
-      if (isButtonScrollable && ticketsContainerRef && ticketsContainerRef.current) {
-        ticketsContainerRef.current.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
-      }
-    }
-  }
-
-  const bookButtonIsDisabled = handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0
-
-  return (
-    <ThemeProvider theme={themeMui}>
-      <ReferralLogic eventId={eventId} />
-      <div className={`get-tickets-page ${theme}`} style={contentStyle}>
-        {isLoading ? (
-          <Loader />
-        ) : (
-          <div ref={ticketsContainerRef}>
-            <TicketsSection
-              ticketsList={tickets}
-              selectedTickets={selectedTickets}
-              handleTicketSelect={handleTicketSelect}
-              promoCodeIsApplied={promoCodeIsApplied}
-            />
-            {event?.salesEnded ? (
-              <p className='event-closed-message'>Sales for this event are closed.</p>
-            ) : !event?.salesStarted && event?.salesStart ? (
-                <Countdown
-                  startDate={event.salesStart}
-                  timezone={event.timezone}
-                  title="Sales start in:"
-                  message="No tickets are currently available for this event."
-                  callback={updateTickets}
-                />
-            ) : null}
-            {showWaitingList && event.salesStarted && !hideWaitingList && (
-              <WaitingList tickets={tickets} eventId={eventId} />
-            )}
-            <PromoCodeSection
-              promoCode={promoCode}
-              promoCodeIsApplied={promoCodeIsApplied}
-              showPromoInput={showPromoInput}
-              setPromoCode={setPromoCode}
-              setPromoCodeUpdated={setPromoCodeUpdated}
-              setShowPromoInput={setShowPromoInput}
-              isPromotionsEnabled={isPromotionsEnabled}
-              isAccessCodeEnabled={isAccessCodeEnabled}
-              isAllTicketsSoldOut={isAllTicketsSoldOut}
-              isPromoLoading={isPromoLoading}
-            />
-            {(isTicketOnSale || !event?.salesEnded) && (
-              <Button
-                aria-hidden={true}
-                className={`book-button 
-                  ${bookButtonIsDisabled ? 'disabled' : ''}  
-                  ${isButtonScrollable ? 'is-scrollable' : ''}
-                `}
-                onClick={handleGetTicketClick}
-              >
-                {getTicketsLabel || 'GET TICKETS'}
-              </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} />
-        ) : null}
-      </div>
-    </ThemeProvider>
-  )
-}
+import React, { useState, useEffect, useRef, ReactNode } from 'react'
+import axios, { AxiosError } from 'axios'
+import { Loader } from '../common/index'
+import './style.css'
+
+import {
+  getTickets,
+  getEvent,
+  addToCart,
+  postOnCheckout,
+} from '../../api'
+import _get from 'lodash/get'
+import _some from 'lodash/some'
+import _every from 'lodash/every'
+import _find from 'lodash/find'
+import _isEmpty from 'lodash/isEmpty'
+import Button from 'react-bootstrap/Button'
+import jwt_decode from 'jwt-decode'
+import { TicketsSection } from './TicketsSection'
+import WaitingList from '../waitingList'
+import { PromoCodeSection } from './PromoCodeSection'
+import { AccessCodeSection } from './AccessCodeSection'
+import { LoginModal } from '../loginModal'
+import Countdown from '../countdown'
+import { createCheckoutDataBodyWithDefaultHolder, getQueryVariable } from '../../utils'
+import { ThemeProvider } from '@mui/private-theming'
+import { createTheme, ThemeOptions } from '@mui/material'
+import { CSSProperties } from '@mui/styles'
+import { ReferralLogic } from './ReferralLogic'
+
+interface CartSuccess {
+  skip_billing_page: boolean;
+  names_required: boolean;
+  age_required: boolean;
+  phone_required: boolean;
+  event_id: string;
+  hash?: string;
+  total?: string;
+}
+
+export interface IGetTickets {
+  eventId: number;
+  onAddToCartSuccess: (response: CartSuccess) => void;
+  getTicketsLabel?: string;
+  contentStyle?: React.CSSProperties;
+  onAddToCartError: (e: AxiosError) => void;
+  onGetTicketsSuccess: (response: any) => void;
+  onGetTicketsError: (e: AxiosError) => void;
+  onLoginSuccess: () => void;
+
+  theme?: 'light' | 'dark';
+  queryPromoCode?: string;
+  isPromotionsEnabled?: boolean;
+  themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties }
+  isAccessCodeEnabled?: boolean;
+  hideSessionButtons?: boolean;
+  hideWaitingList?: boolean;
+  isButtonScrollable?: boolean;
+  sortBySoldOut?: boolean;
+  disableCountdownLeadingZero?: boolean;
+  isLoggedIn?: boolean;
+  actionsSectionComponent?: any;
+  ticketsHeaderComponent?: ReactNode,
+  hideTicketsHeader?: boolean,
+}
+
+export interface ITicket {
+  id: string | number;
+  [key: string]: string | number;
+}
+
+export interface ISelectedTickets {
+  [key: string]: string | number;
+}
+
+export const TicketsContainer = ({
+  onLoginSuccess,
+  getTicketsLabel,
+  eventId,
+  onAddToCartSuccess,
+  contentStyle = {},
+  onAddToCartError = () => {},
+  onGetTicketsSuccess = () => {},
+  onGetTicketsError = () => {},
+  theme = 'light',
+  queryPromoCode = '',
+  isPromotionsEnabled = true,
+  themeOptions,
+  isAccessCodeEnabled = false,
+  hideSessionButtons = false,
+  hideWaitingList = false,
+  isButtonScrollable = false,
+  sortBySoldOut = false,
+  disableCountdownLeadingZero = false,
+  isLoggedIn = false,
+  actionsSectionComponent : ActionsSectionComponent,
+  ticketsHeaderComponent,
+  hideTicketsHeader = false
+}: IGetTickets) => {
+  const [selectedTickets, setSelectedTickets] = useState(
+    {} as ISelectedTickets
+  )
+  const isWindowDefined = typeof window !== 'undefined'
+  const [isLogged, setIsLogged] = useState(
+    isWindowDefined ? !!window.localStorage.getItem('access_token') : false
+  )
+  const [showLoginModal, setShowLoginModal] = useState(false)
+  const [tickets, setTickets] = useState([] as ITicket[])
+  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 [showAccessCodeSection, setShowAccessCodeSection] = useState(isAccessCodeEnabled)
+  const [showPromoCodeSection, setShowPromoCodeSection] = useState(isPromotionsEnabled)
+
+  const ticketsContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const access_token = window.localStorage.getItem('access_token')
+      if (access_token) {
+        const decoded = jwt_decode<{ exp: number }>(access_token)
+        if (decoded && decoded.exp < Date.now() / 1000) {
+          window.localStorage.removeItem('access_token')
+          window.localStorage.removeItem('user_data')
+        }
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    !!eventId && getTicketsApi()
+  }, [eventId])
+
+  const handleLogout = () => {
+    if (isWindowDefined) {
+      window.localStorage.removeItem('access_token')
+      window.localStorage.removeItem('user_data')
+      setIsLogged(false)
+      const event = new window.CustomEvent('tf-logout')
+      window.document.dispatchEvent(event)
+    }
+  }
+
+  useEffect(() => {
+    try {
+      if (typeof window !== 'undefined') {
+        const userData = window.localStorage.getItem('user_data')
+          ? JSON.parse(window.localStorage.getItem('user_data') || '{}')
+          : {}
+        if (userData.country === '') {
+          handleLogout()
+          window.open("https://www.ticketfairy.com/account/change_information?need_country=true");
+        }
+      }
+    } catch(e) {}
+  }, [])
+
+  const handleExternalLogin = () => {
+    setIsLogged(true)
+  }
+  const handleOnClose = () => {
+    setShowLoginModal(false)
+  }
+  const handleOnLogin = () => {
+    setShowLoginModal(false)
+    setIsLogged(true)
+    if (onLoginSuccess) {
+      onLoginSuccess()
+    }
+  }
+
+  async function getTicketsApi(isUpdateingCode?: boolean) {
+    try {
+      isUpdateingCode ? setCodeIsLoading(true) : setIsLoading(true)
+      const response = await getTickets(eventId, code)
+      const eventResponse = await getEvent(eventId)
+      if (response.data.success) {
+        const attributes = _get(response, 'data.data.attributes')
+        setCodeIsApplied(attributes.ValidPromoCode)
+        setTickets(_get(attributes, 'tickets'))
+        setShowWaitingList(attributes.showWaitingList)
+        onGetTicketsSuccess(response.data)
+        setCode('')
+        setShowAccessCodeSection(attributes.is_access_code)
+        setShowPromoCodeSection(attributes.isPromotionsEnabled)
+      }
+      if (eventResponse.data.success) {
+        const event = _get(eventResponse, 'data.data.attributes')
+        setEvent(event)
+      }
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        onGetTicketsError(e)
+      }
+    } finally {
+      setIsLoading(false)
+      setCodeIsLoading(false)
+    }
+  }
+
+  const handleTicketSelect = (key: string, value: number | string) => {
+    setSelectedTickets(prevState => {
+      if (Object.keys(prevState)[0] !== key && !value) {
+        return prevState
+      }
+      return {
+        [key]: value,
+      }
+    })
+  }
+
+  const handleOrdersClick = () => {
+    if (isWindowDefined) {
+      window.location.href = '/orders'
+    }
+  }
+
+  const handleBook = async () => {
+    setHandleBookIsLoading(true)
+    const ticket =
+      _find(tickets, item => selectedTickets[item.id] > 0) || ({} as ITicket)
+    const optionName = _get(ticket, 'optionName')
+    const ticketId = _get(ticket, 'id')
+    const ticketQuantity = +selectedTickets[ticket.id]
+
+    const data = {
+      attributes: {
+        alternative_view_id: null,
+        product_cart_quantity: ticketQuantity,
+        product_options: {
+          [optionName]: ticketId,
+        },
+        product_id: eventId,
+        ticket_types: {
+          [ticketId]: {
+            product_options: {
+              [optionName]: ticketId,
+              ticket_price: ticket.price,
+            },
+            quantity: ticketQuantity,
+          },
+        },
+      },
+    }
+
+    try {
+      const result = await addToCart(eventId, data)
+      if (result.status === 200) {
+
+        const skipBillingPage =
+          result?.data?.data?.attributes?.skip_billing_page ?? false
+        const nameIsRequired =
+          result?.data?.data?.attributes?.names_required ?? false
+        const ageIsRequired =
+          result?.data?.data?.attributes?.age_required ?? false
+        const phoneIsRequired =
+          result?.data?.data?.attributes?.phone_required ?? false
+
+        let hash = ''
+        let total = ''
+
+        if (skipBillingPage) {
+          // Get user data for checkout data
+          const isWindowDefined = typeof window !== 'undefined'
+          const userData =
+            isWindowDefined && window.localStorage.getItem('user_data')
+              ? JSON.parse(window.localStorage.getItem('user_data') || '')
+              : {}
+
+          const access_token =
+            isWindowDefined && window.localStorage.getItem('access_token')
+              ? window.localStorage.getItem('access_token') || ''
+              : ''
+
+          const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
+            ticketQuantity,
+            userData
+          )
+
+          const checkoutResult = await postOnCheckout(
+            checkoutBody,
+            access_token
+          )
+
+          hash = _get(checkoutResult, 'data.data.attributes.hash')
+          total = _get(checkoutResult, 'data.data.attributes.total')
+        }
+
+        onAddToCartSuccess({
+          skip_billing_page: skipBillingPage,
+          names_required: nameIsRequired,
+          phone_required: phoneIsRequired,
+          age_required: ageIsRequired,
+          event_id: String(eventId),
+          hash,
+          total
+        })
+      }
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        onAddToCartError(e)
+      }
+    } finally {
+      setHandleBookIsLoading(false)
+    }
+  }
+
+  const updateTickets = (isUpdateingCode?: boolean) => {
+    getTicketsApi(isUpdateingCode)
+  }
+
+  const isTicketOnSale = _some(
+    tickets,
+    item => (item.salesStarted && !item.salesEnded && !item.soldOut)
+  )
+
+  const themeMui = createTheme(themeOptions)
+  
+  useEffect(() => {
+    isWindowDefined &&
+      window.document.addEventListener('custom-logout', handleLogout)
+    return () => {
+      isWindowDefined &&
+        window.document.removeEventListener('custom-logout', handleLogout)
+    }
+  }, [])
+
+  useEffect(() => {
+    isWindowDefined &&
+      window.document.addEventListener('custom-login', handleExternalLogin)
+    return () => {
+      isWindowDefined &&
+        window.document.removeEventListener(
+          'custom-login',
+          handleExternalLogin
+        )
+    }
+  }, [])
+
+  const handleGetTicketClick = () => {
+    if (!handleBookIsLoading && !_isEmpty(selectedTickets) && Object.values(selectedTickets)[0] > 0) {
+      handleBook()
+    } else {
+      if (isButtonScrollable && ticketsContainerRef && ticketsContainerRef.current) {
+        ticketsContainerRef.current.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
+      }
+    }
+  }
+
+  const bookButtonIsDisabled = handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0
+
+  const wrappedActionsSectionComponent = React.isValidElement(ActionsSectionComponent) ? React.cloneElement(ActionsSectionComponent as React.ReactElement<any>, { 
+    handleGetTicketClick,
+    isTicketOnSale
+  }) : null
+
+  const externalUrl = event?.redirectUrl
+  const eventSaleIsNotStarted = !event?.salesStarted && event?.salesStart
+
+  return (
+    <ThemeProvider theme={themeMui}>
+      {!isLoading && <ReferralLogic eventId={eventId} />}
+      <div className={`get-tickets-page ${theme}`} style={contentStyle}>
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <div ref={ticketsContainerRef}>
+            <TicketsSection
+              ticketsList={tickets}
+              selectedTickets={selectedTickets}
+              handleTicketSelect={handleTicketSelect}
+              codeIsApplied={codeIsApplied}
+              sortBySoldOut={sortBySoldOut}
+              ticketsHeaderComponent={ticketsHeaderComponent}
+              hideTicketsHeader={hideTicketsHeader || _isEmpty(tickets)}
+            />
+            {externalUrl ? null : event?.salesEnded ? (
+              <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."
+                  callback={updateTickets}
+                  disableLeadingZero={disableCountdownLeadingZero}
+                  isLoggedIn={isLoggedIn}
+                />
+            ) : null}
+            {showWaitingList && event.salesStarted && !hideWaitingList && (
+              <WaitingList tickets={tickets} eventId={eventId} />
+            )}
+            {
+              codeIsLoading ? (
+                <Loader /> 
+              ) : showAccessCodeSection ? (
+                <AccessCodeSection
+                  code={code}
+                  setCode={setCode}
+                  updateTickets={updateTickets}
+                />
+              ) : showPromoCodeSection ? (
+                <PromoCodeSection
+                  code={code}
+                  codeIsApplied={codeIsApplied}
+                  showPromoInput={showPromoInput}
+                  setShowPromoInput={setShowPromoInput}
+                  setCode={setCode}
+                  updateTickets={updateTickets}
+                />
+              ) : null
+            }
+            {wrappedActionsSectionComponent}
+            {!wrappedActionsSectionComponent && !eventSaleIsNotStarted && isTicketOnSale && !event?.salesEnded && !externalUrl && (
+              <Button
+                aria-hidden={true}
+                className={`book-button 
+                  ${bookButtonIsDisabled ? 'disabled' : ''}  
+                  ${isButtonScrollable ? 'is-scrollable' : ''}
+                  ${!isLoggedIn ? 'on-bottom' : ''}
+                `}
+                onClick={handleGetTicketClick}
+              >
+                {getTicketsLabel || 'GET TICKETS'}
+              </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} />
+        ) : null}
+      </div>
+    </ThemeProvider>
+  )
+}