tf-checkout-react 1.0.84 → 1.0.88

package/src/components/ticketsContainer/index.tsx

@@ -11,6 +11,7 @@ import {
 } 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 CircularProgress from '@mui/material/CircularProgress'
@@ -21,7 +22,7 @@ import WaitingList from '../waitingList'
 import { PromoCodeSection } from './PromoCodeSection'
 import { LoginModal } from '../loginModal'
 import Countdown from '../countdown'
-import { createCheckoutDataBodyWithDefaultHolder } from '../../utils'
+import { createCheckoutDataBodyWithDefaultHolder, getQueryVariable } from '../../utils'
 import { ThemeProvider } from '@mui/private-theming'
 import { createTheme, ThemeOptions } from '@mui/material'
 import { CSSProperties } from '@mui/styles'
@@ -58,6 +59,7 @@ export interface IGetTickets {
   themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties }
   isAccessCodeEnabled?: boolean;
   hideSessionButtons?: boolean;
+  hideWaitingList?: boolean;
 }
 
 export interface ITicket {
@@ -83,7 +85,8 @@ export const TicketsContainer = ({
   isPromotionsEnabled = true,
   themeOptions,
   isAccessCodeEnabled = false,
-  hideSessionButtons = false
+  hideSessionButtons = false,
+  hideWaitingList = false
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState(
     {} as ISelectedTickets
@@ -99,7 +102,7 @@ export const TicketsContainer = ({
   const [isLoading, setIsLoading] = useState(false)
   const [handleBookIsLoading, setHandleBookIsLoading] = useState(false)
   const [promoCode, setPromoCode] = useState('')
-  const [promoCodeUpdated, setPromoCodeUpdated] = useState(queryPromoCode)
+  const [promoCodeUpdated, setPromoCodeUpdated] = useState(getQueryVariable('r') || queryPromoCode)
   const [showPromoInput, setShowPromoInput] = useState(false)
   const [promoCodeIsApplied, setPromoCodeIsApplied] = useState(false)
 
@@ -279,9 +282,14 @@ export const TicketsContainer = ({
     getTicketsApi()
   }
 
-  const isAllTicketsSoldOut = !_some(
+  const isAllTicketsSoldOut = _every(
     tickets,
-    item => !(item.sold_out || item.soldOut)
+    item => (item.sold_out || item.soldOut)
+  )
+
+  const isTicketOnSale = _some(
+    tickets,
+    item => (item.salesStarted && !item.salesEnded && !item.soldOut)
   )
 
   const themeMui = createTheme(themeOptions)
@@ -321,8 +329,8 @@ export const TicketsContainer = ({
               promoCodeIsApplied={promoCodeIsApplied}
             />
             {event?.salesEnded ? (
-              <p>Sales for this event are closed.</p>
-            ) : event?.salesStart ? (
+              <p className='event-closed-message'>Sales for this event are closed.</p>
+            ) : !event?.salesStarted && event?.salesStart ? (
                 <Countdown
                   startDate={event.salesStart}
                   timezone={event.timezone}
@@ -331,7 +339,7 @@ export const TicketsContainer = ({
                   callback={updateTickets}
                 />
             ) : null}
-            {showWaitingList && event.salesStarted && (
+            {showWaitingList && event.salesStarted && !hideWaitingList && (
               <WaitingList tickets={tickets} eventId={eventId} />
             )}
             <PromoCodeSection
@@ -345,7 +353,7 @@ export const TicketsContainer = ({
               isAccessCodeEnabled={isAccessCodeEnabled}
               isAllTicketsSoldOut={isAllTicketsSoldOut}
             />
-            {!isAllTicketsSoldOut && (
+            {(isTicketOnSale || !event?.salesEnded) && (
               <Button
                 aria-hidden={true}
                 className={`book-button ${

package/src/components/ticketsContainer/style.css

@@ -174,3 +174,8 @@ body {
 .hidden {
   display: none;
 }
+
+.event-closed-message {
+  font-family: 'Bebas Neue';
+  letter-spacing: 0.5px;
+}

package/src/components/timerWidget/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import Countdown from 'react-countdown'
+import { showZero } from '../../utils/showZero'
+import './style.css'
+
+export interface ITimerWidgetPage {
+  expires_at: number;
+  buyLoading?: boolean;
+  onCountdownFinish?: () => void;
+}
+
+export interface IRenderer {
+  minutes: number;
+  seconds: number;
+  completed: number;
+  handleCountdownFinish: () => void;
+}
+
+const TimerWidget = ({
+  expires_at,
+  buyLoading,
+  onCountdownFinish = () => {},
+}: ITimerWidgetPage) => {
+  const [showTimer, setShowTimer] = useState(true)
+
+  const handleCountdownFinish = () => {
+    setShowTimer(false)
+    if (!buyLoading) {
+      onCountdownFinish()
+    }
+  }
+
+  const renderer = ({
+    minutes,
+    seconds,
+    completed,
+    handleCountdownFinish,
+  }: IRenderer) => {
+    if (completed) {
+      handleCountdownFinish()
+      return null
+    }
+    return (
+      <span>
+        {showZero(minutes)}:{showZero(seconds)}
+      </span>
+    )
+  }
+
+  return showTimer && !!expires_at ? (
+    <div className="timer">
+      <div className="toast-message">
+        <p>Please complete your purchase before the timer reaches zero.</p>
+        <p className="countdown">
+          <Countdown
+            date={Date.now() + expires_at * 1000}
+            renderer={(props: any) =>
+              renderer({
+                ...props,
+                handleCountdownFinish,
+              })
+            }
+          />
+        </p>
+      </div>
+    </div>
+  ) : null
+}
+
+export default TimerWidget

package/src/components/timerWidget/style.css

@@ -0,0 +1,26 @@
+.timer {
+  position: absolute;
+  pointer-events: auto;
+  background-color: #000000;
+  overflow: hidden;
+  margin: 0 0 6px;
+  padding: 15px 15px 15px 50px;
+  width: 300px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background-position: 15px center;
+  background-repeat: no-repeat;
+  -moz-box-shadow: 0 0 12px #999;
+  -webkit-box-shadow: 0 0 12px #999;
+  box-shadow: 0 0 12px #999;
+  max-width: 300px;
+  color: #fff;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);
+  right: 15px;
+}
+
+.timer .countdown {
+  font-weight: bold;
+  margin-top: 10px;
+}

package/src/components/waitingList/index.tsx

@@ -33,8 +33,14 @@ const generateQuantity = (n: number) => {
   }
   return quantityList
 }
-
+ 
 const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
+  const isWindowDefined = typeof window !== 'undefined'
+  const userData =
+    isWindowDefined && window.localStorage.getItem('user_data')
+      ? JSON.parse(window.localStorage.getItem('user_data') || '')
+      : {}
+
   const [showSuccessMessage, setShowSuccessMessage] = useState(false)
   const [loading, setLoading] = useState(false)
   const ticketTypesList = Object.values(tickets).map((d: any) => ({
@@ -77,9 +83,9 @@ const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
             initialValues={{
               ticketTypeId: '',
               quantity: '',
-              firstName: '',
-              lastName: '',
-              email: '',
+              firstName: userData.first_name || '',
+              lastName: userData.last_name || '',
+              email: userData.email || '',
             }}
             onSubmit={handleSubmit}
           >
@@ -90,7 +96,7 @@ const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
                   <div className="field-item">
                     <Field
                       name="ticketTypeId"
-                      label="Ticket types"
+                      label="Type of Ticket"
                       type="select"
                       component={CustomField}
                       selectOptions={[
@@ -102,7 +108,7 @@ const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
                   <div className="field-item">
                     <Field
                       name="quantity"
-                      label="Quantity"
+                      label="Quantity Requested"
                       type="select"
                       component={CustomField}
                       selectOptions={[

package/src/utils/showZero.tsx

@@ -0,0 +1,10 @@
+import _isNumber from 'lodash/isNumber'
+
+export const showZero = (value = 0) => {
+  const intNumber = Number(value)
+  return _isNumber(intNumber)
+    ? intNumber >= 0 && intNumber < 10
+      ? '0' + intNumber
+      : intNumber
+    : null
+}