tf-checkout-react 1.0.85 → 1.0.86

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.85",
+  "version": "1.0.86",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/api/index.ts

@@ -33,6 +33,10 @@ publicRequest.interceptors.response.use(
         window.localStorage.removeItem('auth_guest_token')
         window.localStorage.removeItem('user_data')
         window.localStorage.removeItem('access_token')
+        const errorType = error?.response?.data?.error
+        if (errorType === 'invalid_token') {
+          window.location.href = '/'
+        }
       }
     }
     return Promise.reject(error)
@@ -224,11 +228,6 @@ export const getProfileData = (accessToken: any) =>
       },
     })
     .catch((e: any) => {
-      const errorType = e?.response?.data?.error
-      if (isWindowDefined) {
-        const event = new window.CustomEvent('auth_error', { detail: errorType })
-        window.document.dispatchEvent(event)
-      }
       return e
     })
 

package/src/components/billing-info-container/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState, useCallback, useRef } from 'react'
+import React, { FC, useEffect, useState, useRef } from 'react'
 import { AxiosError } from 'axios'
 import {
   Field,
@@ -14,6 +14,7 @@ import _map from 'lodash/map'
 import _get from 'lodash/get'
 import _includes from 'lodash/includes'
 import _isEqual from 'lodash/isEqual'
+import _isEmpty from 'lodash/isEmpty'
 
 import './style.css'
 import { combineValidators, requiredValidator } from '../../validators'
@@ -60,47 +61,36 @@ export interface IBillingInfoPage {
     eventId: any,
     res: any
   ) => void;
-
   onRegisterSuccess?: (value: {
     accessToken: string;
     refreshToken: string;
   }) => void;
-
   onRegisterError?: (e: AxiosError, email: string) => void;
-
   onSubmitError?: (e: AxiosError) => void;
-
   onGetCartSuccess?: (res: any) => void;
-
   onGetCartError?: (e: AxiosError) => void;
-
   onGetCountriesSuccess?: (res: any) => void;
-
   onGetCountriesError?: (e: AxiosError) => void;
-
   onGetStatesSuccess?: (res: any) => void;
-
   onGetStatesError?: (e: AxiosError) => void;
-
   onGetProfileDataSuccess?: (res: any) => void;
-
   onGetProfileDataError?: (e: AxiosError) => void;
-
   onAuthorizeSuccess?: () => void;
-
   onAuthorizeError?: (e: AxiosError) => void;
-
   onLogin?: () => void;
   onLoginSuccess?: () => void;
   onErrorClose?: () => void;
-
   initialValues?: FormikValues;
   buttonName?: string;
   theme?: 'light' | 'dark';
   isLoggedIn?: boolean;
   accountInfoTitle?: string | JSX.Element;
   hideLogo?: boolean;
-  themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties }
+  themeOptions?: ThemeOptions & {
+    input?: CSSProperties;
+    checkbox?: CSSProperties;
+  };
+  hideErrorsAlertSection?: boolean
 }
 
 const LogicRunner: FC<{
@@ -118,7 +108,7 @@ const LogicRunner: FC<{
   setValues,
   setUserValues,
   onGetStatesSuccess,
-  onGetStatesError
+  onGetStatesError,
 }) => {
   const prevCountry = useRef(values.country)
   useEffect(() => {
@@ -162,7 +152,7 @@ const LogicRunner: FC<{
               confirmEmail: parsedData?.email || '',
               state: parsedData?.state || '',
               street_address: parsedData?.street_address || '',
-              country: parsedData?.country || "1",
+              country: parsedData?.country || '1',
               zip: parsedData?.zip || '',
               brand_opt_in: parsedData?.brand_opt_in || '',
               city: parsedData?.city || '',
@@ -180,10 +170,8 @@ const LogicRunner: FC<{
     }
     getStoredUserData()
   }, [userDataEncoded, setValues, setUserValues])
-
   return null
 }
-
 export const BillingInfoContainer = ({
   data = [],
   ticketHoldersFields = {
@@ -213,7 +201,8 @@ export const BillingInfoContainer = ({
   accountInfoTitle = '',
   hideLogo,
   themeOptions,
-  onErrorClose = () => {}
+  onErrorClose = () => {},
+  hideErrorsAlertSection = false
 }: IBillingInfoPage) => {
   const themeMui = createTheme(themeOptions)
   const isWindowDefined = typeof window !== 'undefined'
@@ -225,11 +214,9 @@ export const BillingInfoContainer = ({
     isWindowDefined && window.localStorage.getItem('access_token')
       ? window.localStorage.getItem('access_token') || ''
       : ''
-
   const [dataWithUniqueIds, setDataWithUniqueIds] = useState<
   IBillingInfoData[]
   >(data)
-
   const [isLoggedIn, setIsLoggedIn] = useState(!!access_token)
   const [cartInfoData, setCartInfo] = useState<any>({})
   const [countries, setCountries] = useState<any>([])
@@ -261,7 +248,6 @@ export const BillingInfoContainer = ({
     _get(userData, 'first_name', '') || _get(userValues, 'first_name', '')
   const lastNameLogged =
     _get(userData, 'last_name', '') || _get(userValues, 'last_name', '')
-
   const showDOB = getQueryVariable('age_required') === 'true'
   const eventId = getQueryVariable('event_id')
   const optedInFieldValue: boolean = _get(cartInfoData, 'optedIn', false)
@@ -270,7 +256,7 @@ export const BillingInfoContainer = ({
 
   // Get prevProps
   const prevData = useRef(data)
-  
+
   useEffect(() => {
     const hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId')
     const isEqualData = _isEqual(prevData.current, data)
@@ -281,7 +267,7 @@ export const BillingInfoContainer = ({
       }
     }
   }, [dataWithUniqueIds, data])
-  
+
   const getQuantity = (cart: any = []) => {
     let qty: any = 0
     cart.forEach((item: any) => {
@@ -290,28 +276,11 @@ export const BillingInfoContainer = ({
     return qty
   }
 
-  const handleAuthErrors = useCallback((e) => {
-    setIsLoggedIn(false)
-    if (isWindowDefined && e?.detail === 'invalid_token') {
-      window.location.href = '/'
-    }
-  }, [])
-
-  useEffect(() => {
-    isWindowDefined &&
-      window.document.addEventListener('auth_error', handleAuthErrors)
-    return () => {
-      isWindowDefined &&
-        window.document.removeEventListener('auth_error', handleAuthErrors)
-    }
-  }, [handleAuthErrors])
-
   useEffect(() => {
     if ((pIsLoggedIn || access_token) && !isLoggedIn) {
       setIsLoggedIn(true)
     }
   }, [pIsLoggedIn, isLoggedIn, access_token])
-
   //just once
   useEffect(() => {
     // fetch countries data
@@ -335,7 +304,6 @@ export const BillingInfoContainer = ({
     fetchCountries()
     fetchCart()
   }, [])
-
   // fetch cart data
   const fetchCart = async () => {
     try {
@@ -354,7 +322,6 @@ export const BillingInfoContainer = ({
       }
     }
   }
-
   // fetch user data
   const fetchUserData = async (token: string) => {
     try {
@@ -362,7 +329,11 @@ export const BillingInfoContainer = ({
         const userDataResponse = await getProfileData(token)
         const profileSpecifiedData = _get(userDataResponse, 'data.data')
         const profileDataObj = setLoggedUserData(profileSpecifiedData)
-        setUserValues({ ...profileDataObj, firstName: profileDataObj.first_name, lastName: profileDataObj.last_name })
+        setUserValues({
+          ...profileDataObj,
+          firstName: profileDataObj.first_name,
+          lastName: profileDataObj.last_name,
+        })
         window.localStorage.setItem(
           'user_data',
           JSON.stringify(profileDataObj)
@@ -375,11 +346,9 @@ export const BillingInfoContainer = ({
       }
     }
   }
-
   useEffect(() => {
     fetchUserData(access_token)
   }, [access_token])
-
   return (
     <ThemeProvider theme={themeMui}>
       <Formik
@@ -387,8 +356,8 @@ export const BillingInfoContainer = ({
           dataWithUniqueIds,
           {
             ...initialValues,
-            country: _get(userData, 'country', '') || "1",
-            state: _get(userData, 'state', '') || "1",
+            country: _get(userData, 'country', '') || '1',
+            state: _get(userData, 'state', '') || '1',
             brand_opt_in: optedInFieldValue,
             ttf_opt_in: ttfOptIn,
           },
@@ -425,7 +394,6 @@ export const BillingInfoContainer = ({
               )
               return
             }
-
             const checkoutBodyForRegistration = createCheckoutDataBody(
               ticketsQuantity.length,
               values,
@@ -436,7 +404,6 @@ export const BillingInfoContainer = ({
               values,
               checkoutBodyForRegistration
             )
-
             let access_token_register = null
             try {
               const resRegister = await register(bodyFormData)
@@ -449,12 +416,10 @@ export const BillingInfoContainer = ({
                 'data.data.attributes.refresh_token'
               )
               handleSetAccessToken(access_token_register)
-
               const tokens = {
                 accessToken: access_token_register,
                 refreshToken,
               }
-
               onRegisterSuccess(tokens)
             } catch (e) {
               if (axios.isAxiosError(e)) {
@@ -462,7 +427,6 @@ export const BillingInfoContainer = ({
                 if (_includes(error, 'You must be aged')) {
                   formikHelpers.setFieldError('holderAge', error)
                 }
-
                 if (error?.password) {
                   formikHelpers.setFieldError('password', error.password)
                   formikHelpers.setFieldError(
@@ -470,7 +434,6 @@ export const BillingInfoContainer = ({
                     error.password
                   )
                 }
-
                 if (error?.email && !onLogin) {
                   // False will stand for outside controll
                   setAlreadyHasUser(true)
@@ -480,7 +443,6 @@ export const BillingInfoContainer = ({
               }
               return
             }
-
             const profileData = await getProfileData(access_token_register)
             const profileSpecifiedData = _get(profileData, 'data.data')
             const profileDataObj = setLoggedUserData(profileSpecifiedData)
@@ -490,7 +452,6 @@ export const BillingInfoContainer = ({
                 JSON.stringify(profileDataObj)
               )
             }
-
             const checkoutBody = createCheckoutDataBody(
               ticketsQuantity.length,
               values,
@@ -542,7 +503,7 @@ export const BillingInfoContainer = ({
               onGetStatesError={onGetStatesError}
             />
             <div className={`billing-info-container ${theme}`}>
-              {error && (
+              {error && !hideErrorsAlertSection && (
                 <Alert severity="error" onClose={onErrorClose} variant="filled">
                   {error}
                 </Alert>
@@ -653,49 +614,51 @@ export const BillingInfoContainer = ({
                   </React.Fragment>
                 )
               })}
-              <div className="ticket-holders-fields">
-                <p>{ticketHoldersFields.label}</p>
-                {_map(ticketsQuantity, (_item, index) => (
-                  <div key={_item}>
-                    <h5>Ticket {index + 1}</h5>
-                    {_map(ticketHoldersFields.fields, group => {
-                      const { groupClassname, groupItems } = group
-                      return (
-                        <div key={group.id}>
-                          <div className={groupClassname}>
-                            {_map(groupItems, element => (
-                              <div
-                                className={element.className}
-                                key={element.name}
-                              >
-                                <Field
-                                  name={`${element.name}-${index}`}
-                                  label={element.label}
-                                  type={element.type}
-                                  required={true}
-                                  component={
-                                    element.type === 'checkbox'
-                                      ? CheckboxField
-                                      : CustomField
-                                  }
-                                  validate={combineValidators(
-                                    element.required
-                                      ? requiredValidator
-                                      : () => {},
-                                    element.onValidate
-                                      ? element.onValidate
-                                      : () => {}
-                                  )}
-                                />
-                              </div>
-                            ))}
+              {!_isEmpty(ticketHoldersFields.fields) && (
+                <div className="ticket-holders-fields">
+                  <p>{ticketHoldersFields.label}</p>
+                  {_map(ticketsQuantity, (_item, index) => (
+                    <div key={_item}>
+                      <h5>Ticket {index + 1}</h5>
+                      {_map(ticketHoldersFields.fields, group => {
+                        const { groupClassname, groupItems } = group
+                        return (
+                          <div key={group.id}>
+                            <div className={groupClassname}>
+                              {_map(groupItems, element => (
+                                <div
+                                  className={element.className}
+                                  key={element.name}
+                                >
+                                  <Field
+                                    name={`${element.name}-${index}`}
+                                    label={element.label}
+                                    type={element.type}
+                                    required={true}
+                                    component={
+                                      element.type === 'checkbox'
+                                        ? CheckboxField
+                                        : CustomField
+                                    }
+                                    validate={combineValidators(
+                                      element.required
+                                        ? requiredValidator
+                                        : () => {},
+                                      element.onValidate
+                                        ? element.onValidate
+                                        : () => {}
+                                    )}
+                                  />
+                                </div>
+                              ))}
+                            </div>
                           </div>
-                        </div>
-                      )
-                    })}
-                  </div>
-                ))}
-              </div>
+                        )
+                      })}
+                    </div>
+                  ))}
+                </div>
+              )}
               <div className="button-container">
                 <Button
                   type="submit"

package/src/components/common/CustomField.tsx

@@ -59,23 +59,26 @@ export const CustomField = ({
         className: theme,
         MenuProps: { className: theme },
       }}
-      InputLabelProps={{ sx: customTheme?.input }}
+      InputLabelProps={{
+        sx: customTheme?.input,
+        shrink: field.name === 'holderAge' ? true : undefined,
+      }}
       inputProps={{
-        sx: customTheme?.input
+        sx: customTheme?.input,
       }}
       {...field}
     >
       {isSelectField
-      ? _map(selectOptions, option => (
-        <option
-          key={option.value}
-          value={option.value}
-          disabled={option.disabled}
-        >
-          {option.label}
-        </option>
-      ))
-      : null}
+        ? _map(selectOptions, option => (
+          <option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+          >
+            {option.label}
+          </option>
+        ))
+        : null}
     </TextField>
   )
 }

package/src/components/ticketsContainer/index.tsx

@@ -351,7 +351,7 @@ export const TicketsContainer = ({
               isAccessCodeEnabled={isAccessCodeEnabled}
               isAllTicketsSoldOut={isAllTicketsSoldOut}
             />
-            {isTicketOnSale && (
+            {(isTicketOnSale || !event?.salesEnded) && (
               <Button
                 aria-hidden={true}
                 className={`book-button ${

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}
           >