tf-checkout-react 1.0.45 → 1.0.49

package/src/components/stripePayment/index.tsx

@@ -9,6 +9,7 @@ import {
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 import _identity from 'lodash/identity'
 import _get from 'lodash/get'
+import { CheckboxField } from '../common/CheckboxField'
 
 import './style.css'
 import { getCurrencySymbolByCurrency } from '../../normalizers'
@@ -17,6 +18,7 @@ import CircularProgress from '@mui/material/CircularProgress'
 const options: StripeCardNumberElementOptions = {
   style: {
     base: {
+      backgroundColor:'#232323',
       fontSize: '18px',
       color: '#ffffff',
       letterSpacing: '1px',
@@ -42,13 +44,14 @@ export interface ICheckoutForm {
   billing_info: { [key: string]: any };
   isLoading: any;
   handleSetLoading: (loading: any) => void;
+  conditions: any;
 }
 
 interface AddressTypes {
-  city: string,
-  line1: string,
-  state: string,
-  postal_code: string,
+  city: string;
+  line1: string;
+  state: string;
+  postal_code: string;
 }
 
 const CheckoutForm = ({
@@ -60,7 +63,8 @@ const CheckoutForm = ({
   currency,
   billing_info,
   isLoading = false,
-  handleSetLoading = () => {}
+  handleSetLoading = () => {},
+  conditions = [],
 }: ICheckoutForm) => {
   const stripe = useStripe()
   const elements = useElements()
@@ -71,9 +75,9 @@ const CheckoutForm = ({
     handleSetLoading(true)
     try {
       event.preventDefault()
-  
-      if(!postalCode) {
-        setStripeError("Please enter your zip code.")
+
+      if (!postalCode) {
+        setStripeError('Please enter your zip code.')
         handleSetLoading(false)
         return
       }
@@ -84,7 +88,7 @@ const CheckoutForm = ({
         handleSetLoading(false)
         return
       }
-  
+
       const card = elements.getElement(CardNumberElement)
       const address: AddressTypes = {
         city: billing_info.city,
@@ -100,7 +104,7 @@ const CheckoutForm = ({
           address,
         },
       })
-  
+
       if (paymentMethodReq.error) {
         setStripeError(paymentMethodReq.error.message || null)
         handleSetLoading(false)
@@ -108,7 +112,7 @@ const CheckoutForm = ({
       }
 
       const { error } = await stripe.confirmCardPayment(stripe_client_secret, {
-        payment_method: paymentMethodReq.paymentMethod.id
+        payment_method: paymentMethodReq.paymentMethod.id,
       })
 
       if (error) {
@@ -116,26 +120,29 @@ const CheckoutForm = ({
         handleSetLoading(false)
         return
       }
-  
-      onSubmit(null)
 
-    } catch(e) {
+      onSubmit(null)
+    } catch (e) {
       onSubmit(e)
     }
   }
 
   const onChangePostalCode = (e: any) => {
     setPostalCode(e.target.value)
-  } 
+  }
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      const userData = JSON.parse(window.localStorage.getItem('user_data') || '')
+      const userData = JSON.parse(
+        window.localStorage.getItem('user_data') || ''
+      )
       const zipCode = _get(userData, 'zip', '')
       zipCode && setPostalCode(zipCode)
     }
   }, [])
 
+  const buttonIsDiabled = !stripe || !!error || isLoading
+
   return (
     <div className="stripe_payment_container">
       {!!stripeError && (
@@ -171,9 +178,31 @@ const CheckoutForm = ({
             />
           </label>
         </div>
-        <div className="payment_button">
-          <button disabled={!stripe || !!error || isLoading} type="submit">
-            {isLoading ? <CircularProgress /> : `Pay ${getCurrencySymbolByCurrency(currency)}${total}`}
+        {conditions?.map((checkbox: any) => (
+          <div
+            className={'billing-info-container__singleField'}
+            key={checkbox.id}
+          >
+            <div className="conditions-block">
+              <CheckboxField
+                name={checkbox.id}
+                label={checkbox.text}
+                required={true}
+              />
+            </div>
+          </div>
+        ))}
+        <div
+          className={`payment_button ${
+            buttonIsDiabled ? 'disabled-payment-button' : ''
+          }`}
+        >
+          <button disabled={buttonIsDiabled} type="submit">
+            {isLoading ? (
+              <CircularProgress />
+            ) : (
+              `Pay ${getCurrencySymbolByCurrency(currency)}${total}`
+            )}
           </button>
         </div>
       </form>

package/src/components/stripePayment/style.css

@@ -30,6 +30,12 @@
   opacity: 0.7;
 }
 
+.disabled-payment-button button{
+  user-select: none;
+  pointer-events:none;
+  opacity: 0.3;
+}
+
 .checkout_error_block {
   color: #e53935;
   padding: 15px 0;

package/src/components/ticketsContainer/TicketRow.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import './style.css'
+import _has from 'lodash/has'
+import _get from 'lodash/get'
+import Box from '@mui/material/Box'
+import FormControl from '@mui/material/FormControl'
+import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
+
+import { getTicketSelectOptions } from './utils'
+
+interface ITicketRowProps {
+  ticketTier: any;
+  prevTicketTier: any;
+  selectedTickets: any;
+  handleTicketSelect: any;
+}
+
+export const TicketRow = ({
+  ticketTier,
+  prevTicketTier,
+  selectedTickets,
+  handleTicketSelect,
+}: ITicketRowProps) => {
+  const soldOutMessage = ticketTier.soldOutMessage
+    ? `${ticketTier.soldOutMessage}`.toUpperCase()
+    : 'SOLD OUT'
+  const isSalesClosed =
+    !ticketTier.salesStarted ||
+    ticketTier.salesEnded ||
+    !_has(ticketTier, 'maxQuantity') ||
+    ticketTier.maxQuantity === 0
+  const options = getTicketSelectOptions(
+    ticketTier.maxQuantity,
+    ticketTier.minQuantity,
+    ticketTier.multiplier
+  )
+
+  const onSaleContent = isSalesClosed ? null : (
+    <div className="get-tickets">
+      <Box className="get-tickets__selectbox">
+        <FormControl fullWidth>
+          <Select
+            value={
+              selectedTickets[ticketTier.id]
+                ? selectedTickets[ticketTier.id]
+                : 0
+            }
+            onChange={handleTicketSelect}
+            displayEmpty
+            inputProps={{ 'aria-label': 'Without label' }}
+            MenuProps={{
+              PaperProps: {
+                sx: { maxHeight: 150 },
+                className: 'get-tickets-paper',
+              },
+            }}
+          >
+            {options.map((option, index) => (
+              <MenuItem key={index} value={option.value}>
+                {option.value}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Box>
+    </div>
+  )
+
+  let returnValue: any = ''
+
+  if (ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut) {
+    returnValue = soldOutMessage
+  }
+  if (!+ticketTier.cost && !+ticketTier.price) {
+    returnValue = 'FREE'
+  }
+  if (ticketTier.displayTicket) {
+    returnValue = onSaleContent
+  }
+  if (_get(prevTicketTier, 'in_stock')) {
+    returnValue = 'SOON'
+  }
+
+  return <>{returnValue} </>
+}

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import './style.css'
+
+import _sortBy from 'lodash/sortBy'
+import { TicketRow } from './TicketRow'
+
+interface ITicketsSectionProps {
+  ticketsList: any;
+  selectedTickets: any;
+  handleTicketSelect: any;
+  promoCodeIsApplied: boolean;
+}
+
+export const TicketsSection = ({
+  ticketsList,
+  selectedTickets,
+  handleTicketSelect,
+  promoCodeIsApplied,
+}: ITicketsSectionProps) => {
+  const sortedTicketsList = _sortBy(ticketsList, 'sortOrder')
+  return (
+    <>
+      {sortedTicketsList.map((ticket, i, arr) => {
+        const isSoldOut =
+          ticket.sold_out || !ticket.displayTicket || ticket.soldOut
+        const ticketSelect = (event: any) => {
+          const { value } = event.target
+          handleTicketSelect(ticket.id, value)
+        }
+
+        let ticketIsDiscounted = false
+        if (
+          ticket.oldPrice &&
+          promoCodeIsApplied &&
+          !isSoldOut &&
+          ticket.oldPrice !== ticket.price
+        ) {
+          ticketIsDiscounted = true
+        }
+
+        return (
+          <div
+            key={ticket.id || ticket.name}
+            className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}
+          >
+            <div className="event-detail__tier-name">
+              {ticket.displayName || ticket.name}
+            </div>
+            <div className="event-tickets-container">
+              <div className="event-detail__tier-price">
+                {ticketIsDiscounted && (
+                  <p className="old-price">$ {(+ticket.oldPrice).toFixed(2)}</p>
+                )}
+                <p>
+                  {isSoldOut
+                    ? 'SOLD OUT'
+                    : `$ ${(+ticket.cost || +ticket.price).toFixed(2)}`}
+                </p>
+                {!isSoldOut && (
+                  <p className="fees">
+                    {ticket.taxesIncluded ? '(incl. Fees)' : '(excl. Fees)'}
+                  </p>
+                )}
+              </div>
+              <div
+                className="event-detail__tier-state"
+                style={{ minWidth: 55 }}
+              >
+                <TicketRow
+                  ticketTier={ticket}
+                  prevTicketTier={arr[i - 1]}
+                  selectedTickets={selectedTickets}
+                  handleTicketSelect={ticketSelect}
+                />
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </>
+  )
+}

package/src/components/ticketsContainer/index.tsx

@@ -3,150 +3,17 @@ import axios, { AxiosError } from 'axios'
 import './style.css'
 
 import { getTickets, addToCart, setCustomHeader } from '../../api'
-import _sortBy from 'lodash/sortBy'
 import _get from 'lodash/get'
-import _has from 'lodash/has'
 import _some from 'lodash/some'
 import _find from 'lodash/find'
 import _isEmpty from 'lodash/isEmpty'
 import _filter from 'lodash/filter'
 import _isObject from 'lodash/isObject'
-import Box from '@mui/material/Box'
-import FormControl from '@mui/material/FormControl'
-import MenuItem from '@mui/material/MenuItem'
-import Select from '@mui/material/Select'
 import CircularProgress from '@mui/material/CircularProgress'
 import Button from 'react-bootstrap/Button'
 import jwt_decode from 'jwt-decode'
-
-const getTicketSelectOptions = (
-  maxCount: number = 10,
-  minCount: number = 1,
-  multiplier: number = 1
-) => {
-  const options = [{ label: 0, value: 0 }]
-  for (let i = minCount; i <= Math.min(50, maxCount); i += multiplier) {
-    options.push({ label: i, value: i })
-  }
-  return options
-}
-
-const computeTierStateLabel = (
-  tier: any,
-  prevTier: any,
-  selectedTickets: any,
-  handleTicketSelect: any
-) => {
-  const soldOutMessage = tier.soldOutMessage
-    ? `${tier.soldOutMessage}`.toUpperCase()
-    : 'SOLD OUT'
-  const isSalesClosed =
-    !tier.salesStarted ||
-    tier.salesEnded ||
-    !_has(tier, 'maxQuantity') ||
-    tier.maxQuantity === 0
-  const options = getTicketSelectOptions(
-    tier.maxQuantity,
-    tier.minQuantity,
-    tier.multiplier
-  )
-
-  const onSaleContent = isSalesClosed ? null : (
-    <div className="get-tickets">
-      <Box className="get-tickets__selectbox">
-        <FormControl fullWidth>
-          <Select
-            value={selectedTickets[tier.id] ? selectedTickets[tier.id] : 0}
-            onChange={handleTicketSelect}
-            displayEmpty
-            inputProps={{ 'aria-label': 'Without label' }}
-            MenuProps={{
-              PaperProps: {
-                sx: { maxHeight: 150 },
-                className: 'get-tickets-paper',
-              },
-            }}
-          >
-            {options.map((option, index) => (
-              <MenuItem key={index} value={option.value}>
-                {option.value}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </Box>
-    </div>
-  )
-
-  if (tier.sold_out || !tier.displayTicket || tier.soldOut)
-    return soldOutMessage
-  if (!+tier.cost && !+tier.price) return 'FREE'
-  if (tier.displayTicket) return onSaleContent
-  if (prevTier.in_stock) return 'SOON'
-
-  return ''
-}
-
-const renderTiers = (
-  boxOffice: any,
-  selectedTickets: any,
-  handleTicketSelect: any,
-  promoCodeIsApplied: boolean
-) => {
-  const sortedBoxOfiice = _sortBy(boxOffice, 'sortOrder')
-  const primaryTiers = sortedBoxOfiice.map((tier, i, arr) => {
-    const isSoldOut = tier.sold_out || !tier.displayTicket || tier.soldOut
-    const ticketSelect = (event: any) => {
-      const { value } = event.target
-      handleTicketSelect(tier.id, value)
-    }
-
-    let ticketIsDiscounted = false
-    if (
-      tier.oldPrice &&
-      promoCodeIsApplied &&
-      !isSoldOut &&
-      tier.oldPrice !== tier.price
-    ) {
-      ticketIsDiscounted = true
-    }
-
-    return (
-      <div
-        key={tier.id || tier.name}
-        className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}
-      >
-        <div className="event-detail__tier-name">
-          {tier.displayName || tier.name}
-        </div>
-        <div className="event-tickets-container">
-          <div className="event-detail__tier-price">
-            {ticketIsDiscounted && (
-              <p className="old-price">$ {(+tier.oldPrice).toFixed(2)}</p>
-            )}
-            <p>
-              {isSoldOut
-                ? 'SOLD OUT'
-                : `$ ${(+tier.cost || +tier.price).toFixed(2)}`}
-            </p>
-            {!isSoldOut && (
-              <p className='fees'>{tier.taxesIncluded ? '(incl. Fees)' : '(excl. Fees)'}</p>
-            )}
-          </div>
-          <div className="event-detail__tier-state" style={{ minWidth: 55 }}>
-            {computeTierStateLabel(
-              tier,
-              arr[i - 1],
-              selectedTickets,
-              ticketSelect
-            )}
-          </div>
-        </div>
-      </div>
-    )
-  })
-  return primaryTiers
-}
+import { TicketsSection } from './TicketsSection'
+import WaitingList from '../waitingList'
 
 function Loader() {
   return (
@@ -160,6 +27,7 @@ interface CartSuccess {
   skip_billing_page: boolean;
   names_required: boolean;
   age_required: boolean;
+  event_id: string;
 }
 
 export interface IGetTickets {
@@ -170,6 +38,8 @@ export interface IGetTickets {
   onAddToCartError: (e: AxiosError) => void;
   onGetTicketsSuccess: (response: any) => void;
   onGetTicketsError: (e: AxiosError) => void;
+
+  theme?: 'light' | 'dark';
 }
 
 export interface ITicket {
@@ -189,11 +59,13 @@ export const TicketsContainer = ({
   onAddToCartError = () => {},
   onGetTicketsSuccess = () => {},
   onGetTicketsError = () => {},
+  theme = 'light',
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState(
     {} as ISelectedTickets
   )
   const [tickets, setTickets] = useState([] as ITicket[])
+  const [showWaitingList, setShowWaitingList] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [handleBookIsLoading, setHandleBookIsLoading] = useState(false)
   const [promoCode, setPromoCode] = useState('')
@@ -223,11 +95,8 @@ export const TicketsContainer = ({
           setCustomHeader(response)
           const attributes = _get(response, 'data.data.attributes')
           setPromoCodeIsApplied(attributes.ValidPromoCode)
-          const tickets = _filter(
-            (Object.values(attributes) || []) as ITicket[],
-            item => _isObject(item)
-          )
-          setTickets(tickets)
+          setTickets(_get(attributes, 'tickets'))
+          setShowWaitingList(attributes.showWaitingList)
           onGetTicketsSuccess(response.data)
         }
       } catch (e) {
@@ -290,6 +159,7 @@ export const TicketsContainer = ({
           names_required:
             result?.data?.data?.attributes?.names_required ?? false,
           age_required: result?.data?.data?.attributes?.age_required ?? false,
+          event_id: String(eventId)
         })
       }
     } catch (e) {
@@ -307,80 +177,86 @@ export const TicketsContainer = ({
   )
 
   return (
-    <div className="get-tickets-page" style={contentStyle}>
+    <div className={`get-tickets-page ${theme}`} style={contentStyle}>
       {isLoading ? (
         <Loader />
       ) : (
-        <div>
-          {renderTiers(
-            tickets,
-            selectedTickets,
-            handleTicketSelect,
-            promoCodeIsApplied
-          )}
-          {promoCodeIsApplied ? (
-            <div className="alert-info">
-              Your promo code was applied successfully.
-            </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)
-                  }
-                }}
+        <>
+          {showWaitingList ? (
+            <WaitingList tickets={tickets} />
+          ) : (
+            <div>
+              <TicketsSection
+                ticketsList={tickets}
+                selectedTickets={selectedTickets}
+                handleTicketSelect={handleTicketSelect}
+                promoCodeIsApplied={promoCodeIsApplied}
               />
-              <Button
-                className="promo-apply-button"
-                placeholder="Promo Code"
-                onClick={() => {
-                  setPromoCodeUpdated(promoCode)
-                }}
-              >
-                Apply
-              </Button>
+              {promoCodeIsApplied ? (
+                <div className="alert-info">
+                  Your promo code was applied successfully.
+                </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>
+              )}
+              {!showPromoInput && !isAllTicketsSoldOut ? (
+                <Button
+                  className="promo-code-button"
+                  placeholder="Promo Codes"
+                  onClick={() => {
+                    setShowPromoInput(true)
+                  }}
+                >
+                  Got a promo code? Click here
+                </Button>
+              ) : null}
+              <div className="test v1.0.19" style={{ display: 'none' }} />
+              {!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>
           )}
-          {!showPromoInput && !isAllTicketsSoldOut ? (
-            <Button
-              className="promo-code-button"
-              placeholder="Promo Codes"
-              onClick={() => {
-                setShowPromoInput(true)
-              }}
-            >
-              Got a promo code? Click here
-            </Button>
-          ) : null}
-          <div className="test v1.0.19" style={{ display: 'none' }} />
-          {!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>
   )