tf-checkout-react 1.0.77 → 1.0.81

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -9,7 +9,7 @@ export interface IPromoCodeSectionProps {
   showPromoInput: boolean;
   isPromotionsEnabled: boolean;
   isAllTicketsSoldOut: boolean;
-
+  isAccessCodeEnabled?: boolean;
   setPromoCode: (value: string) => void;
   setPromoCodeUpdated: (value: string) => void;
   setShowPromoInput: (value: boolean) => void;
@@ -20,11 +20,49 @@ export const PromoCodeSection = ({
   promoCodeIsApplied,
   showPromoInput,
   isPromotionsEnabled,
-  isAllTicketsSoldOut,
   setPromoCode,
   setPromoCodeUpdated,
   setShowPromoInput,
+  isAccessCodeEnabled,
 }: IPromoCodeSectionProps) => {
+  const isPromoCodeHasValue = !!promoCode.trim()
+
+  const renderInputField = () => {
+      return (
+        <div className="promo-code-block">
+          <div className="promo-code-block">
+            <p className="promo-code-text">
+           { isAccessCodeEnabled ? 'Access code required' : 'Promo code'}
+            </p>
+            
+          </div>
+              <input
+                className="promo-code-input"
+                placeholder=""
+                onChange={e => {
+                  setPromoCode(e.target.value)
+                }}
+                onKeyPress={event => {
+                  if (event.key === 'Enter' && isPromoCodeHasValue) {
+                    setPromoCodeUpdated(promoCode)
+                    setShowPromoInput(false)
+                  }
+                }}
+              />
+              <Button
+                className="promo-submit-button"
+                onClick={() => {
+                  if (isPromoCodeHasValue) {
+                    setPromoCodeUpdated(promoCode)
+                    setShowPromoInput(false)
+                  }
+                }}
+              >
+                {isAccessCodeEnabled ? 'ENTER' : 'APPLY'}
+              </Button>
+            </div>
+      )
+  }
 
   return (
     <div >
@@ -34,39 +72,13 @@ export const PromoCodeSection = ({
             src={getImage('done.svg')}
             preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
           />
-          <p>PROMO CODE APPLIED SUCCESSFULLY</p>
+          <p className="promo-code-success">PROMO CODE APPLIED SUCCESSFULLY</p>
         </div>
       ) : null}
       {showPromoInput && (
-        <div className="promo-code-block">
-          <input
-            placeholder="Promo Code"
-            onChange={e => {
-              setPromoCode(e.target.value)
-            }}
-            onKeyPress={event => {
-              if (event.key === 'Enter') {
-                setPromoCodeUpdated(promoCode)
-              }
-            }}
-          />
-          <Button
-            className="promo-apply-button"
-            placeholder="Promo Code"
-            onClick={() => {
-              setPromoCodeUpdated(promoCode)
-            }}
-          >
-            Apply
-          </Button>
-        </div>
+        renderInputField()
       )}
-      {isPromotionsEnabled && !showPromoInput && isAllTicketsSoldOut && (
-        <p className="promo-code-text">
-          Access code needed
-        </p>
-      )}
-      {isPromotionsEnabled && !showPromoInput ? (
+      {isPromotionsEnabled && !showPromoInput && !isAccessCodeEnabled ? (
         <Button
           className="promo-code-button"
           placeholder="Promo Codes"
@@ -76,7 +88,9 @@ export const PromoCodeSection = ({
         >
           Got a promo code? Click here
         </Button>
-      ) : null}
+      ) : !isPromotionsEnabled && !showPromoInput && isAccessCodeEnabled && !promoCodeIsApplied ? renderInputField() :
+          null
+      }
     </div>
   )
 }

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -66,12 +66,16 @@ export const TicketsSection = ({
                 className="event-detail__tier-state"
                 style={{ minWidth: 55 }}
               >
-                <TicketRow
-                  ticketTier={ticket}
-                  prevTicketTier={arr[i - 1]}
-                  selectedTickets={selectedTickets}
-                  handleTicketSelect={ticketSelect}
-                />
+                {ticket.salesStarted ? (
+                  <TicketRow
+                    ticketTier={ticket}
+                    prevTicketTier={arr[i - 1]}
+                    selectedTickets={selectedTickets}
+                    handleTicketSelect={ticketSelect}
+                  />
+                ) : (
+                  <p className='ticket-not-started-message'>Sales not started</p>
+                )}
               </div>
             </div>
           </div>

package/src/components/ticketsContainer/index.tsx

@@ -4,6 +4,7 @@ import './style.css'
 
 import {
   getTickets,
+  getEvent,
   addToCart,
   setCustomHeader,
   postOnCheckout,
@@ -18,7 +19,12 @@ 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 } from '../../utils'
+import { ThemeProvider } from '@mui/private-theming'
+import { createTheme, ThemeOptions } from '@mui/material'
+import { CSSProperties } from '@mui/styles'
 
 function Loader() {
   return (
@@ -44,10 +50,14 @@ export interface IGetTickets {
   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;
 }
 
 export interface ITicket {
@@ -60,6 +70,7 @@ export interface ISelectedTickets {
 }
 
 export const TicketsContainer = ({
+  onLoginSuccess,
   getTicketsLabel,
   eventId,
   onAddToCartSuccess,
@@ -70,11 +81,20 @@ export const TicketsContainer = ({
   theme = 'light',
   queryPromoCode = '',
   isPromotionsEnabled = true,
+  themeOptions,
+  isAccessCodeEnabled = false,
+  hideSessionButtons = 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] = React.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 [handleBookIsLoading, setHandleBookIsLoading] = useState(false)
@@ -97,29 +117,60 @@ export const TicketsContainer = ({
   }, [])
 
   useEffect(() => {
-    async function getTicketsApi() {
-      try {
-        setIsLoading(true)
-        const response = await getTickets(eventId, promoCodeUpdated)
-        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)
-        }
-      } catch (e) {
-        if (axios.isAxiosError(e)) {
-          onGetTicketsError(e)
-        }
-      } finally {
-        setIsLoading(false)
-      }
-    }
     getTicketsApi()
   }, [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)
+    }
+  }
+
+  const handleExternalLogin = () => {
+    setIsLogged(true)
+  }
+  const handleOnClose = () => {
+    setShowLoginModal(false)
+  }
+  const handleOnLogin = () => {
+    setShowLoginModal(false)
+    setIsLogged(true)
+    if (onLoginSuccess) {
+      onLoginSuccess()
+    }
+  }
+
+  async function getTicketsApi() {
+    try {
+      setIsLoading(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)
+    }
+  }
+
   const handleTicketSelect = (key: string, value: number | string) => {
     setSelectedTickets(prevState => {
       if (Object.keys(prevState)[0] !== key && !value) {
@@ -131,6 +182,12 @@ export const TicketsContainer = ({
     })
   }
 
+  const handleOrdersClick = () => {
+    if (isWindowDefined) {
+      window.location.href = '/orders'
+    }
+  }
+
   const handleBook = async () => {
     setHandleBookIsLoading(true)
     const ticket =
@@ -218,63 +275,127 @@ export const TicketsContainer = ({
     }
   }
 
+  const updateTickets = () => {
+    getTicketsApi()
+  }
+
   const isAllTicketsSoldOut = !_some(
     tickets,
     item => !(item.sold_out || 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
+        )
+    }
+  }, [])
+
   return (
-    <div className={`get-tickets-page ${theme}`} style={contentStyle}>
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <div>
-          <TicketsSection
-            ticketsList={tickets}
-            selectedTickets={selectedTickets}
-            handleTicketSelect={handleTicketSelect}
-            promoCodeIsApplied={promoCodeIsApplied}
-          />
-          {showWaitingList && (
-            <WaitingList
-              tickets={tickets}
-              eventId={eventId}
+    <ThemeProvider theme={themeMui}>
+      <div className={`get-tickets-page ${theme}`} style={contentStyle}>
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <div>
+            <TicketsSection
+              ticketsList={tickets}
+              selectedTickets={selectedTickets}
+              handleTicketSelect={handleTicketSelect}
+              promoCodeIsApplied={promoCodeIsApplied}
+            />
+            {event?.salesEnded ? (
+              <p>Sales for this event are closed.</p>
+            ) : 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 && (
+              <WaitingList tickets={tickets} eventId={eventId} />
+            )}
+            <PromoCodeSection
+              promoCode={promoCode}
+              promoCodeIsApplied={promoCodeIsApplied}
+              showPromoInput={showPromoInput}
+              setPromoCode={setPromoCode}
+              setPromoCodeUpdated={setPromoCodeUpdated}
+              setShowPromoInput={setShowPromoInput}
               isPromotionsEnabled={isPromotionsEnabled}
+              isAccessCodeEnabled={isAccessCodeEnabled}
+              isAllTicketsSoldOut={isAllTicketsSoldOut}
             />
-          )}
-          <PromoCodeSection
-            promoCode={promoCode}
-            promoCodeIsApplied={promoCodeIsApplied}
-            showPromoInput={showPromoInput}
-            setPromoCode={setPromoCode}
-            setPromoCodeUpdated={setPromoCodeUpdated}
-            setShowPromoInput={setShowPromoInput}
-            isPromotionsEnabled={isPromotionsEnabled}
-            isAllTicketsSoldOut={isAllTicketsSoldOut}
-          />
-          {!isAllTicketsSoldOut && (
-            <Button
-              aria-hidden={true}
-              className={`book-button ${
-                handleBookIsLoading ||
-                _isEmpty(selectedTickets) ||
-                Object.values(selectedTickets)[0] === 0
-                  ? 'disabled'
-                  : ''
-              }`}
-              onClick={
-                !handleBookIsLoading &&
-                !_isEmpty(selectedTickets) &&
-                Object.values(selectedTickets)[0] > 0
-                  ? handleBook
-                  : () => {}
-              }
-            >
-              {getTicketsLabel || 'GET TICKETS'}
-            </Button>
-          )}
-        </div>
-      )}
-    </div>
+            {!isAllTicketsSoldOut && (
+              <Button
+                aria-hidden={true}
+                className={`book-button ${
+                  handleBookIsLoading ||
+                  _isEmpty(selectedTickets) ||
+                  Object.values(selectedTickets)[0] === 0
+                    ? 'disabled'
+                    : ''
+                }`}
+                onClick={
+                  !handleBookIsLoading &&
+                  !_isEmpty(selectedTickets) &&
+                  Object.values(selectedTickets)[0] > 0
+                    ? handleBook
+                    : () => {}
+                }
+              >
+                {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>
   )
 }

package/src/components/ticketsContainer/style.css

@@ -108,6 +108,13 @@ body {
   text-transform: uppercase;
 }
 
+.event-detail__tier-state .ticket-not-started-message {
+  color: #000000;
+  text-transform: initial;
+  width: 50px;
+  text-align: left;
+}
+
 .promo-code-block input {
   font-size: 14px;
   padding: 1px 8px;

package/src/components/waitingList/index.tsx

@@ -16,7 +16,6 @@ import './style.css'
 interface WaitingListProps {
   tickets: any;
   eventId: number;
-  isPromotionsEnabled: boolean;
 }
 
 interface WaitingListFields {
@@ -35,7 +34,7 @@ const generateQuantity = (n: number) => {
   return quantityList
 }
 
-const WaitingList = ({ tickets = {}, eventId, isPromotionsEnabled }: WaitingListProps) => {
+const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
   const [showSuccessMessage, setShowSuccessMessage] = useState(false)
   const [loading, setLoading] = useState(false)
   const ticketTypesList = Object.values(tickets).map((d: any) => ({
@@ -68,16 +67,11 @@ const WaitingList = ({ tickets = {}, eventId, isPromotionsEnabled }: WaitingList
     <div className="waiting-list">
       {showSuccessMessage ? (
         <div className="success-message">
-          <p className="added-success-message">{`You've been added to the waiting list!`}</p>
-          <p>{`You'll be notified if tickets become available.`}</p>
+          <p className="added-success-message">You've been added to the waiting list!</p>
+          <p>You'll be notified if tickets become available.</p>
         </div>
       ) : (
         <>
-          {!isPromotionsEnabled && (
-            <p className="no-tickets-text">
-              No tickets are currently available for this event.
-            </p>
-          )}
           <h2>WAITING LIST</h2>
           <Formik
             initialValues={{

package/src/components/waitingList/style.css

@@ -10,8 +10,9 @@
 .waiting-list .waiting-list-button:hover {
   background-color: #505050;
 }
-.waiting-list .success-message h3 {
-  margin: 10px 0;
+.waiting-list .success-message {
+  text-align: center;
+  margin-bottom: 15px;
 }
 .waiting-list .success-message p {
   margin: 0;
@@ -22,4 +23,5 @@
 }
 .waiting-list .added-success-message {
   font-size: 22px;
+  margin-bottom: 10px;
 }

package/src/hooks/usePrevious.tsx

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react"
+
+export const usePrevious = <T extends unknown>(value: T): T | undefined => {
+  const ref = useRef<T>()
+  useEffect(() => {
+    ref.current = value
+  })
+  return ref.current
+}

package/src/utils/downloadPDF.tsx

@@ -0,0 +1,30 @@
+export const downloadPDF = (pdfUrl: string) => {
+  if (typeof window === 'undefined') return
+
+  const accessToken: string | null = localStorage.getItem('access_token')
+
+  if (!accessToken) return
+
+  fetch(pdfUrl, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  })
+    .then(async response => {
+      const blobValue = await response.blob()
+      const fileNameHeader = response.headers.get("content-disposition") || ''
+      const fileName = fileNameHeader.split('"')[1]
+      return { blobValue, fileName }
+    })
+    .then(({ blobValue, fileName }) => {
+      if (!fileName) return
+      const file = new Blob([blobValue], { type: 'application/pdf' })
+      const fileURL = URL.createObjectURL(file)
+      const link = document.createElement('a')
+      link.href = fileURL
+      link.setAttribute('download', fileName)
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    })
+}

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export { setConfigs, CONFIGS } from './setConfigs'
 export { getQueryVariable } from './getQueryVariable'
 export { ErrorFocus } from './formikErrorFocus'
-export { createCheckoutDataBodyWithDefaultHolder } from './createCheckoutDataBodyWithDefaultHolder'
+export { downloadPDF } from './downloadPDF'
+export { createCheckoutDataBodyWithDefaultHolder } from './createCheckoutDataBodyWithDefaultHolder'