tf-checkout-react 1.0.43 → 1.0.47

package/src/components/ticketsContainer/index.tsx

@@ -1,151 +1,19 @@
 import React, { useState, useEffect } from 'react'
+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 (
@@ -159,6 +27,7 @@ interface CartSuccess {
   skip_billing_page: boolean;
   names_required: boolean;
   age_required: boolean;
+  event_id: string;
 }
 
 export interface IGetTickets {
@@ -166,6 +35,11 @@ export interface IGetTickets {
   onAddToCartSuccess: (response: CartSuccess) => void;
   getTicketsLabel?: string;
   contentStyle?: React.CSSProperties;
+  onAddToCartError: (e: AxiosError) => void;
+  onGetTicketsSuccess: (response: any) => void;
+  onGetTicketsError: (e: AxiosError) => void;
+
+  theme?: 'light' | 'dark';
 }
 
 export interface ITicket {
@@ -182,11 +56,16 @@ export const TicketsContainer = ({
   eventId,
   onAddToCartSuccess,
   contentStyle = {},
+  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('')
@@ -216,14 +95,14 @@ 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) {
-        console.log('e', e)
+        if (axios.isAxiosError(e)) {
+          onGetTicketsError(e)
+        }
       } finally {
         setIsLoading(false)
       }
@@ -280,10 +159,13 @@ 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) {
-      console.log('e', e)
+      if (axios.isAxiosError(e)) {
+        onAddToCartError(e)
+      }
     } finally {
       setHandleBookIsLoading(false)
     }
@@ -295,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>
   )

package/src/components/ticketsContainer/utils.ts

@@ -0,0 +1,11 @@
+export 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
+}

package/src/components/waitingList/index.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from 'react'
+import Button from '@mui/material/Button'
+import CircularProgress from '@mui/material/CircularProgress'
+import { Field, Form, Formik } from 'formik'
+import { CustomField } from '../common/CustomField'
+import { addToWaitingList } from '../../api'
+import {
+  combineValidators,
+  requiredValidator,
+  emailValidator,
+} from '../../validators'
+import { ENV } from '../../env'
+
+import './style.css'
+
+interface WaitingListProps {
+  tickets: any;
+}
+
+interface WaitingListFields {
+  ticketTypeId: string;
+  quantity: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+const generateQuantity = (n: number) => {
+  const quantityList = []
+  for (let i = 1; i <= n; i++) {
+    quantityList.push({ label: i, value: i })
+  }
+  return quantityList
+}
+
+const WaitingList = ({ tickets = {} }: WaitingListProps) => {
+  const [showSuccessMessage, setShowSuccessMessage] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const ticketTypesList = Object.values(tickets).map((d: any) => ({
+    label: d.displayName,
+    value: d.id,
+  }))
+
+  const handleSubmit = async (values: WaitingListFields) => {
+    try {
+      setLoading(true)
+      const id = ENV.EVENT_ID
+      const requestData = {
+        data: {
+          attributes: values,
+        },
+      }
+      const { data } = await addToWaitingList(id, requestData)
+
+      if (data.success) {
+        setShowSuccessMessage(true)
+      }
+    } catch (error) {
+      console.log(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="waiting-list">
+      {showSuccessMessage ? (
+        <div className="success-message">
+          <h3>{`You've been added to the waiting list!`}</h3>
+          <p>{`You'll be notified if tickets become available.`}</p>
+        </div>
+      ) : (
+        <>
+          <h2>WAITING LIST</h2>
+          <Formik
+            initialValues={{
+              ticketTypeId: '',
+              quantity: '',
+              firstName: '',
+              lastName: '',
+              email: '',
+            }}
+            onSubmit={handleSubmit}
+          >
+            <Form>
+              <div className="field-item">
+                <Field
+                  name="ticketTypeId"
+                  label="Ticket types"
+                  type="select"
+                  component={CustomField}
+                  selectOptions={[
+                    { label: 'Type of Ticket', value: '', disabled: true },
+                    ...ticketTypesList,
+                  ]}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="quantity"
+                  label="Quantity"
+                  type="select"
+                  component={CustomField}
+                  selectOptions={[
+                    { label: 'Quantity Requested', value: '', disabled: true },
+                    ...generateQuantity(10),
+                  ]}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="firstName"
+                  label="First name"
+                  validate={(value: string) =>
+                    requiredValidator(value, 'Please enter your First name')
+                  }
+                  component={CustomField}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="lastName"
+                  label="Last name"
+                  validate={(value: string) =>
+                    requiredValidator(value, 'Please enter your Last name')
+                  }
+                  component={CustomField}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="email"
+                  label="Email"
+                  validate={combineValidators(
+                    (value: string) =>
+                      requiredValidator(value, 'Please enter your Email'),
+                    (value: string) => emailValidator(value)
+                  )}
+                  component={CustomField}
+                />
+              </div>
+
+              <Button
+                type="submit"
+                variant="contained"
+                className="waiting-list-button"
+              >
+                {loading ? (
+                  <CircularProgress size="22px" />
+                ) : (
+                  'ADD TO WAITING LIST'
+                )}
+              </Button>
+            </Form>
+          </Formik>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default WaitingList

package/src/components/waitingList/style.css

@@ -0,0 +1,18 @@
+.waiting-list {
+  padding: 17px 35px 20px;
+}
+.waiting-list .field-item {
+  margin-bottom: 30px;
+}
+.waiting-list .waiting-list-button {
+  width: 100% !important;
+}
+.waiting-list .waiting-list-button:hover {
+  background-color: #505050;
+}
+.waiting-list .success-message h3 {
+  margin: 10px 0;
+}
+.waiting-list .success-message p {
+  margin: 0;
+}

package/src/index.ts

@@ -2,4 +2,5 @@ export { BillingInfoContainer } from './components/billing-info-container/index'
 export { PaymentContainer } from './components/paymentContainer/index'
 export { ConfirmationContainer } from './components/confirmationContainer/index'
 export { TicketsContainer } from './components/ticketsContainer/index'
-export { currencyNormalizerCreator, createFixedFloatNormalizer } from './normalizers'
+export { currencyNormalizerCreator, createFixedFloatNormalizer } from './normalizers'
+export { LoginModal } from './components/loginModal'

package/src/types/billing-info-data.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 
 export interface IGroupItem {
   name: string;
-  label: string;
+  label: string | JSX.Element;
 
   // optional
   type?: string;
@@ -29,6 +29,6 @@ export interface IBillingInfoData {
   fields: IFieldData[];
 
   // optional
-  label?: string;
+  label?: string | JSX.Element;
   labelClassName?: string;
 }

package/src/validators/index.ts

@@ -1,14 +1,20 @@
+const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+
 export const combineValidators = (...validators: any) => (...value: any) => {
   for (let i = 0; i < validators.length; ++i) {
     const error_message = validators[i](...value)
-    if (error_message !== undefined) return error_message
+    if (error_message) return error_message
   }
 }
 
-export const requiredValidator = (value?: string | number): string => {
+export const requiredValidator = (value?: string | number, message?: string): string => {
   let errorMessage = ''
   if (!value) {
-    errorMessage = 'Required'
+    errorMessage = message || 'Required'
   }
   return errorMessage
 }
+
+export const emailValidator = (email: string) => {
+  return !emailRegex.test(email) ? 'Please enter a valid email address' : '' 
+}