tf-checkout-react 1.0.43 → 1.0.47

package/src/components/billing-info-container/utils.ts

@@ -16,7 +16,8 @@ export interface IValues {
 
 export const getInitialValues = (
   data: any = [],
-  propsInitialValues: IValues = {}
+  propsInitialValues: IValues = {},
+  userValues: any = {}
 ): IValues => {
   const results = _flatMapDeep(data, ({ fields }) =>
     _map(fields, ({ groupItems }) => _map(groupItems, ({ name }) => name))
@@ -24,7 +25,7 @@ export const getInitialValues = (
 
   const initialValues: IValues = {}
   _forEach(results, item => {
-    initialValues[item] = propsInitialValues[item] || ''
+    initialValues[item] = propsInitialValues[item] || userValues[item] || ''
   })
 
   return initialValues
@@ -68,6 +69,13 @@ interface IUserData {
   zipCode?: string;
 }
 
+interface IticketHolder {
+  first_name?: string;
+  last_name?: string;
+  phone?: string;
+  email?: string;
+}
+
 export const setLoggedUserData = (data: IUserData) => ({
   id: data.id,
   first_name: data.firstName,
@@ -82,34 +90,55 @@ export const setLoggedUserData = (data: IUserData) => ({
 })
 
 export const createCheckoutDataBody = (
+  ticketsQuantity: number,
   values: IValues = {},
   logedInValues: ILoggedInValues = {},
   includeDob: boolean = false
 ): ICheckoutBody => {
   const {
-    holderAge,
     firstName,
     lastName,
+    holderAge,
     confirmEmail,
     confirmPassword,
-    holderFirstName,
-    holderLastName,
     ...restValues
   } = values
 
+  const holders = []
+  let ticket_holders: IticketHolder[] = []
+
+  for (let i = 0; i <= ticketsQuantity; i++) {
+    const individualHolder = Object.fromEntries(
+      Object.entries(values).filter(([key, _val]) => key.includes(String(i)))
+    )
+    holders.push(individualHolder)
+  }
+
+  const filteredHolders = holders.filter(
+    holder => Object.entries(holder).length > 0
+  )
+  ticket_holders = filteredHolders.map((item, index) => ({
+    first_name: item[`holderFirstName-${index}`] || '',
+    last_name: item[`holderLastName-${index}`] || '',
+    phone: item[`holderPhone-${index}`] || '',
+    email: item[`holderEmail-${index}`] || '',
+  }))
+
+  const filteredRestValue: { [key: string]: any } = {}
+  _forEach(restValues, (value, key) => {
+    if (!key.includes('holder')) {
+      filteredRestValue[key] = value
+    }
+  })
+
   const body: ICheckoutBody = {
     attributes: {
-      ...restValues,
+      ...filteredRestValue,
       email: restValues.email || logedInValues.emailLogged,
       confirm_email: restValues.email || logedInValues.emailLogged,
       first_name: firstName || logedInValues.firstNameLogged,
       last_name: lastName || logedInValues.lastNameLogged,
-      ticket_holders: [
-        {
-          first_name: holderFirstName,
-          last_name: holderLastName,
-        },
-      ],
+      ticket_holders,
     },
   }
 
@@ -119,6 +148,5 @@ export const createCheckoutDataBody = (
     body.attributes.dob_month = holderAgeDate.getMonth() + 1
     body.attributes.dob_year = holderAgeDate.getFullYear()
   }
-
   return body
 }

package/src/components/common/CheckboxField.tsx

@@ -5,7 +5,7 @@ import Checkbox from '@mui/material/Checkbox'
 import { FieldInputProps } from 'formik'
 
 export interface ICheckboxField {
-  label: string;
+  label: string | number | JSX.Element;
   field: FieldInputProps<any>;
 }
 
@@ -16,8 +16,9 @@ interface IOtherProps {
 export const CheckboxField = ({
   label,
   field,
+  ...rest
 }: ICheckboxField & IOtherProps) => (
   <FormGroup>
-    <FormControlLabel control={<Checkbox {...field} />} label={label} />
+    <FormControlLabel control={<Checkbox {...field} {...rest} />} label={label} />
   </FormGroup>
 )

package/src/components/common/CustomField.tsx

@@ -4,6 +4,7 @@ import _map from 'lodash/map'
 import _get from 'lodash/get'
 
 import { FieldInputProps, FormikProps } from 'formik'
+import { makeStyles } from '@mui/styles'
 
 export interface ISelectOption {
   label: string | number;
@@ -26,6 +27,14 @@ interface IOtherProps {
   [key: string]: any;
 }
 
+const useStyles = makeStyles({
+  input: {
+    "&::placeholder": {
+      color: "gray",
+    }
+  },
+})
+
 export const CustomField = ({
   label,
   type = 'text',
@@ -37,6 +46,7 @@ export const CustomField = ({
   const isShrink = Boolean(field.value) || type === 'date' || type === 'select'
   const isTouched = Boolean(_get(touched, field.name))
   const error = _get(errors, field.name)
+  const classes = useStyles()
 
   return (
     <TextField
@@ -48,12 +58,17 @@ export const CustomField = ({
       error={!!error && isTouched}
       helperText={isTouched && error}
       InputLabelProps={{ shrink: isShrink }}
+      InputProps={{
+        classes: {
+          input: classes.input
+        }
+      }}
       SelectProps={{ native: true }}
       {...field}
     >
       {isSelectField
         ? _map(selectOptions, option => (
-          <option key={option.value} value={option.value}>
+          <option key={option.value} value={option.value} disabled={option.disabled}>
             {option.label}
           </option>
         ))

package/src/components/confirmationContainer/index.tsx

@@ -7,6 +7,7 @@ import _get from 'lodash/get'
 
 import { IReferralPromotion } from '../../types'
 import { getConfirmationData } from '../../api'
+import { AxiosError } from 'axios'
 
 export interface IShareButton {
   mainLabel: string;
@@ -26,6 +27,8 @@ export interface IConfirmationPage {
   shareLink: string;
   isReferralEnabled: boolean;
   shareButtons: IShareButton[];
+  onGetConfirmationDataSuccess: (res: any) => void;
+  onGetConfirmationDataError: (e: AxiosError) => void;
 }
 
 const defaultSvg =
@@ -35,6 +38,8 @@ export const ConfirmationContainer = ({
   referralPromotions = [],
   shareButtons = [],
   shareLink = '',
+  onGetConfirmationDataSuccess = () => {},
+  onGetConfirmationDataError = () => {},
 }: IConfirmationPage) => {
   const inputRef = useRef(null)
   const [data, setData] = useState<any>({})
@@ -55,14 +60,14 @@ export const ConfirmationContainer = ({
         try {
           const response = await getConfirmationData(hash)
           const data = _get(response, 'data.data.attributes')
-
           setData(data)
+          onGetConfirmationDataSuccess(response.data)
         } catch (error) {
-          //...
+          onGetConfirmationDataError(error.response)
         }
       }
     })()
-  }, [])
+  }, [onGetConfirmationDataSuccess, onGetConfirmationDataError])
 
   return (
     <div className="confirmation-page">

package/src/components/loginModal/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useState } from 'react'
+import { AxiosError } from 'axios'
 import {
   authorize,
   getAccessToken,
@@ -18,9 +19,12 @@ import axios from 'axios'
 interface Props {
   onClose: () => void;
   onLogin: () => void;
-  alreadyHasUser: boolean;
-  userExpired: boolean;
-  setUserExpired: React.Dispatch<React.SetStateAction<boolean>>;
+  alreadyHasUser?: boolean;
+  userExpired?: boolean;
+  onAuthorizeSuccess?: (res: any) => void;
+  onAuthorizeError?: (e: AxiosError) => void;
+  onGetProfileDataSuccess?: (res: any) => void;
+  onGetProfileDataError?: (e: AxiosError) => void;
 }
 
 const style: React.CSSProperties = {
@@ -37,9 +41,12 @@ const style: React.CSSProperties = {
 export const LoginModal: FC<Props> = ({
   onClose,
   onLogin,
-  alreadyHasUser,
-  userExpired,
-  setUserExpired,
+  alreadyHasUser = false,
+  userExpired = false,
+  onAuthorizeSuccess = () => {},
+  onAuthorizeError = () => {},
+  onGetProfileDataSuccess = () => {},
+  onGetProfileDataError = () => {},
 }) => {
   const [error, setError] = useState('')
   return (
@@ -58,8 +65,8 @@ export const LoginModal: FC<Props> = ({
                 const bodyFormData = new FormData()
                 bodyFormData.append('email', email)
                 bodyFormData.append('password', password)
-                const resAutorize = await authorize(bodyFormData)
 
+                const resAutorize = await authorize(bodyFormData)
                 const bodyFormDataToken = new FormData()
                 bodyFormDataToken.append('code', resAutorize.data.data.code)
                 bodyFormDataToken.append('scope', 'profile')
@@ -73,22 +80,48 @@ export const LoginModal: FC<Props> = ({
                   ENV.CLIENT_SECRET ||
                     'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
                 )
-                const resAccessToken = await getAccessToken(bodyFormDataToken)
+
+                let resAccessToken = null
+
+                try {
+                  resAccessToken = await getAccessToken(bodyFormDataToken)
+                  onAuthorizeSuccess(resAccessToken.data)
+                } catch (e) {
+                  if (axios.isAxiosError(e)) {
+                    onAuthorizeError(e)
+                  }
+                  return
+                }
+
                 const accessToken = _get(resAccessToken, 'data.access_token')
                 handleSetAccessToken(accessToken)
-                const profileData = await getProfileData(accessToken)
-                const profileSpecifiedData = _get(profileData, 'data.data')
+
+                let profileResponse = null
+
+                try {
+                  profileResponse = await getProfileData(accessToken)
+                  onGetProfileDataSuccess(profileResponse.data)
+                } catch (e) {
+                  if (axios.isAxiosError(e)) {
+                    onGetProfileDataError(e)
+                  }
+                  return
+                }
+
+                const profileSpecifiedData = _get(profileResponse, 'data.data')
                 const profileDataObj = {
                   id: profileSpecifiedData.id,
                   first_name: profileSpecifiedData.firstName,
                   last_name: profileSpecifiedData.lastName,
-                  email: profileSpecifiedData.email
+                  email: profileSpecifiedData.email,
                 }
                 if (typeof window !== 'undefined') {
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
+                  window.localStorage.setItem(
+                    'user_data',
+                    JSON.stringify(profileDataObj)
+                  )
                   window.localStorage.setItem('access_token', accessToken)
                 }
-                setUserExpired(false)
                 onLogin()
               } catch (e) {
                 if (axios.isAxiosError(e)) {

package/src/components/paymentContainer/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { AxiosError } from 'axios'
 import Container from '@mui/material/Container'
 import Alert from '@mui/material/Alert'
 import { Elements } from '@stripe/react-stripe-js'
@@ -26,6 +27,9 @@ export interface IPaymentPage {
   formTitle?: string;
   errorText?: string;
   onErrorClose?: () => void;
+  onGetPaymentDataSuccess: (value: any) => void;
+  onGetPaymentDataError: (value: AxiosError) => void;
+  onPaymentError: (value: AxiosError) => void;
 }
 
 const initialOrderValues: IOrderData = {
@@ -53,6 +57,9 @@ export const PaymentContainer = ({
   errorText,
   checkoutData,
   onErrorClose = _identity,
+  onGetPaymentDataSuccess = () => {},
+  onGetPaymentDataError = () => {},
+  onPaymentError = () => {}
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -83,9 +90,11 @@ export const PaymentContainer = ({
             currency: order_details?.currency,
           }
           setOrderData(orderData)
+          onGetPaymentDataSuccess(response.data)
         }
       } catch (e) {
         setError(_get(e, 'response.data.message'))
+        onGetPaymentDataError(e.response)
       }
     })()
   }, [checkoutData])
@@ -109,6 +118,7 @@ export const PaymentContainer = ({
       }
     } catch (e) {
       setError(_get(e, 'response.data.message'))
+      onPaymentError(e.response)
     }
   }
 

package/src/components/registerModal/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+import { AxiosError } from 'axios'
 import './style.css'
 import { getProfileData, handleSetAccessToken, register } from '../../api'
 import { Field, Form, Formik } from 'formik'
@@ -10,9 +11,15 @@ import { ENV } from '../../env'
 interface Props {
   onClose: () => void;
   onRegister: () => void;
+  onGetProfileDataSuccess: (res: any) => void;
+  onGetProfileDataError: (e: AxiosError) => void;
 }
 
-export const RegisterModal: FC<Props> = ({ onClose }) => (
+export const RegisterModal: FC<Props> = ({
+  onClose,
+  onGetProfileDataSuccess = () => {},
+  onGetProfileDataError = () => {},
+}) => (
   <div
     style={{
       display: 'flex',
@@ -63,8 +70,18 @@ export const RegisterModal: FC<Props> = ({ onClose }) => (
           'data.data.attributes.access_token'
         )
         handleSetAccessToken(access_token)
-        const profileData = await getProfileData(access_token)
-        const profileSpecifiedData = _get(profileData, 'data.data')
+
+        let profileResponse = null
+
+        try {
+          profileResponse = await getProfileData(access_token)
+          onGetProfileDataSuccess(profileResponse.data)
+        } catch (e) {
+          onGetProfileDataError(e.response)
+          return
+        }
+
+        const profileSpecifiedData = _get(profileResponse, 'data.data')
         const profileDataObj = {
           id: profileSpecifiedData.id,
           first_name: profileSpecifiedData.firstName,

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>
+        )
+      })}
+    </>
+  )
+}