tf-checkout-react 1.7.1 → 1.7.3

package/src/components/loginForm/index.tsx

@@ -26,6 +26,7 @@ export interface ILoginFormProps {
   showForgotPasswordButton?: boolean;
   showSignUpButton?: boolean;
   showPoweredByImage?: boolean;
+  registerUrl?: string;
 }
 
 // interface IUserData {
@@ -75,6 +76,7 @@ export const LoginForm: FC<ILoginFormProps> = ({
   showForgotPasswordButton = false,
   showSignUpButton = false,
   showPoweredByImage = false,
+  registerUrl = 'https://www.ticketfairy.com/register',
 }) => {
   const [error, setError] = useState('')
   return (
@@ -171,9 +173,23 @@ export const LoginForm: FC<ILoginFormProps> = ({
               )}
               {showSignUpButton && (
                 <div className="forgot-password">
-                  <span aria-hidden="true" onClick={onSignupButtonClick}>
-                    Sign up
-                  </span>
+                  {onSignupButtonClick !== _identity ? (
+                    <span
+                      aria-hidden="true"
+                      onClick={onSignupButtonClick}
+                      style={{ cursor: 'pointer' }}
+                    >
+                      Sign up
+                    </span>
+                  ) : (
+                    <a
+                      href={registerUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Sign up
+                    </a>
+                  )}
                 </div>
               )}
               {showPoweredByImage ? <PoweredBy /> : null}

package/src/components/loginModal/index.tsx

@@ -30,6 +30,7 @@ export interface Props {
   showForgotPasswordButton?: boolean;
   showSignUpButton?: boolean;
   showPoweredByImage?: boolean;
+  registerUrl?: string;
 }
 
 const style: React.CSSProperties = {
@@ -57,6 +58,7 @@ export const LoginModal: FC<Props> = ({
   showForgotPasswordButton = false,
   showSignUpButton = false,
   showPoweredByImage = false,
+  registerUrl = 'https://www.ticketfairy.com/register',
 }) => {
   const [error, setError] = useState('')
   return (
@@ -162,9 +164,23 @@ export const LoginModal: FC<Props> = ({
                   )}
                   {showSignUpButton && (
                     <div className="forgot-password">
-                      <span aria-hidden="true" onClick={onSignup}>
-                        Sign up
-                      </span>
+                      {onSignup !== _identity ? (
+                        <span
+                          aria-hidden="true"
+                          onClick={onSignup}
+                          style={{ cursor: 'pointer' }}
+                        >
+                          Sign up
+                        </span>
+                      ) : (
+                        <a
+                          href={registerUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          Sign up
+                        </a>
+                      )}
                     </div>
                   )}
                   {showPoweredByImage ? <PoweredBy /> : null}

package/src/components/loginModal/style.css

@@ -66,9 +66,13 @@
 .forgot-password {
   text-align: center;
 }
-.forgot-password span {
+.forgot-password span,
+.forgot-password a {
   cursor: pointer;
+  color: inherit;
+  text-decoration: none;
 }
-.forgot-password span:hover {
+.forgot-password span:hover,
+.forgot-password a:hover {
   text-decoration: underline;
 }

package/src/components/preRegistration/PreRegistrationComplete.tsx

@@ -6,6 +6,7 @@ import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _isEmpaty from 'lodash/isEmpty'
 import React, { FC, useEffect, useState } from 'react'
+import "./style.css"
 
 import {
   getPreRegistrationInfluencers,
@@ -25,6 +26,7 @@ const isWindowDefined = typeof window !== 'undefined'
 export const PreRegistrationComplete: FC<
   IPreRegistrationCompleteProps & {
     onGetConfirmationDataError?: (error: AxiosError) => void;
+    skipInitialValidation?: boolean;
     themeOptions?: ThemeOptions & {
       input?: CSSProperties;
       checkbox?: CSSProperties;
@@ -42,6 +44,7 @@ export const PreRegistrationComplete: FC<
   onLoginSuccess = _identity,
   logo,
   themeOptions,
+  skipInitialValidation = false,
 }) => {
     const themeMui = createTheme(themeOptions)
 
@@ -65,6 +68,12 @@ export const PreRegistrationComplete: FC<
     useCookieListener(X_TF_ECOMMERCE, value => setIsLoggedIn(Boolean(value)))
     useEffect(() => {
       const fetchConfirmationData = async () => {
+        // Skip validation if this is a freshly completed pre-registration
+        if (skipInitialValidation) {
+          onGetConfirmationDataSuccess()
+          return
+        }
+
         try {
           if (hash && isLoggedIn) {
             const shareOptionsData = await getPreRegistrationShareOptions({
@@ -98,6 +107,7 @@ export const PreRegistrationComplete: FC<
       onGetConfirmationDataError,
       onGetConfirmationDataSuccess,
       isLoggedIn,
+      skipInitialValidation,
     ])
 
     const onClose = () => {
@@ -121,9 +131,9 @@ export const PreRegistrationComplete: FC<
         {isLoggedIn && _isEmpaty(error) ? (
           <div className={`${classNamePrefix}_pre_registration_complete_container`}>
             <CopyMessageModal showCopyModal={showCopyModal} onClose={onClose} />
-            <p className={`${classNamePrefix}_pre_registration_complete_header`}>
+            <h2 className={`${classNamePrefix}_pre_registration_complete_header preregistration_confirmation_header`}>
               {pageHeader}
-            </p>
+            </h2>
             <div className={`${classNamePrefix}_pre_registration_complete_message`}>
               {pageMessage}
             </div>

package/src/components/preRegistration/constants.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import { emailValidator } from '../../validators'
+
 export const getFormFieldsNotLoggedIn = (
   clientName?: string | number
 ): IFormFieldsSection[] => [
@@ -38,14 +40,14 @@ export const getFormFieldsNotLoggedIn = (
         label: 'Email',
         type: 'email',
         required: true,
-        onValidate: null,
+        onValidate: emailValidator,
       },
       {
         name: 'confirmEmail',
         label: 'Confirm Email',
         type: 'email',
         required: true,
-        onValidate: null,
+        onValidate: emailValidator,
       },
     ],
   },
@@ -120,14 +122,14 @@ export const getFormFieldsLoggedIn = (
         label: 'Email',
         type: 'email',
         required: true,
-        onValidate: null,
+        onValidate: emailValidator,
       },
       {
         name: 'confirmEmail',
         label: 'Confirm Email',
         type: 'email',
         required: true,
-        onValidate: null,
+        onValidate: emailValidator,
       },
     ],
   },

package/src/components/preRegistration/index.tsx

@@ -18,6 +18,7 @@ import { ForgotPasswordModal, IForgotPasswordProps } from '../forgotPasswordModa
 import { LoginModal, Props } from '../loginModal'
 import { getFormFieldsLoggedIn, getFormFieldsNotLoggedIn } from './constants'
 import { FieldsSection } from './FieldsSection'
+import { PreRegistrationComplete } from './PreRegistrationComplete'
 import { getFormInitialValues, updateFormFieldsAttributes } from './utils'
 
 const X_TF_ECOMMERCE = 'X-TF-ECOMMERCE'
@@ -64,8 +65,19 @@ export const PreRegistration: FC<IPreRegistrationProps> = ({
   const [isLoggedIn, setIsLoggedIn] = useState(Boolean(getCookieByName(X_TF_ECOMMERCE)))
   const [confirmModalState, setConfirmModalState] = useState({ show: false, message: '' })
   const [, setUserData] = useState({} as IProfileData)
+  const [isPreRegistrationComplete, setIsPreRegistrationComplete] = useState(false)
   useCookieListener(X_TF_ECOMMERCE, value => setIsLoggedIn(Boolean(value)))
 
+  // Check if user already has a pre-registration when logged in
+  useEffect(() => {
+    if (!isLoggedIn || !isWindowDefined) return
+
+    const savedHash = window.localStorage.getItem(`pre-registration-hash-${eventId}`)
+    if (savedHash) {
+      setIsPreRegistrationComplete(true)
+    }
+  }, [isLoggedIn, eventId])
+
   const themeMui = createTheme(themeOptions)
 
   const formFieldsLoggedIn = getFormFieldsLoggedIn(CONFIGS.CLIENT_NAME)
@@ -99,7 +111,10 @@ export const PreRegistration: FC<IPreRegistrationProps> = ({
     fetchCountries()
   }, [])
 
-  const hash = getQueryVariable('hash') || ''
+  const localStorageHash = isWindowDefined
+    ? window.localStorage.getItem('pre-registration-hash') || ''
+    : ''
+  const hash = getQueryVariable('hash') || localStorageHash
   const referrerId = getQueryVariable('referrer_id') || ''
   return (
     <ThemeProvider theme={themeMui}>
@@ -176,120 +191,139 @@ export const PreRegistration: FC<IPreRegistrationProps> = ({
             displaySuccessMessage
           />
         )}
-        <h2>Pre-Registration</h2>
-        <Formik
-          initialValues={getFormInitialValues(formFields)}
-          enableReinitialize={true}
-          onSubmit={async (values: FormikValues) => {
-            try {
-              if (isLoggedIn) {
-                if (isPreregistrationStarted) {
-                  const updatedValues = { ...values }
-                  const holderAgeDate = new Date(values.holderAge)
-                  updatedValues.dobDay = holderAgeDate.getDate()
-                  updatedValues.dobMonth = holderAgeDate.getMonth() + 1
-                  updatedValues.dobYear = holderAgeDate.getFullYear()
-                  updatedValues.referrerId = referrerId
-                  updatedValues.shareHash = hash
-                  // remove date picker string value
-                  delete updatedValues.holderAge
+        {isPreRegistrationComplete ? (
+          <PreRegistrationComplete
+            eventId={eventId}
+            logo={logo}
+            themeOptions={themeOptions}
+            onLoginSuccess={onLoginSuccess}
+            data={{} as IShareOptionsData}
+            classNamePrefix=""
+            onLinkCopied={_identity}
+            updateShareActionData={_identity}
+            hash={hash}
+            shareActionData={{} as ISubmitShareActionAttributes}
+            skipInitialValidation={true}
+          />
+        ) : (
+          <>
+            <h2>Pre-Registration</h2>
+            <Formik
+              initialValues={getFormInitialValues(formFields)}
+              enableReinitialize={true}
+              onSubmit={async (values: FormikValues) => {
+                try {
+                  if (isLoggedIn) {
+                    if (isPreregistrationStarted) {
+                      const updatedValues = { ...values }
+                      const holderAgeDate = new Date(values.holderAge)
+                      updatedValues.dobDay = holderAgeDate.getDate()
+                      updatedValues.dobMonth = holderAgeDate.getMonth() + 1
+                      updatedValues.dobYear = holderAgeDate.getFullYear()
+                      updatedValues.referrerId = referrerId
+                      updatedValues.shareHash = hash
+                      // remove date picker string value
+                      delete updatedValues.holderAge
 
-                  const confirmationData = await confirmPreRegistration(
-                    eventId,
-                    updatedValues as IConfirmPreRegistrationRequestData
-                  )
-                  if (isWindowDefined) {
-                    window.localStorage.setItem(
-                      'pre-registration-hash',
-                      _get(confirmationData, 'attributes.hash')
-                    )
-                  }
+                      const confirmationData = await confirmPreRegistration(
+                        eventId,
+                        updatedValues as IConfirmPreRegistrationRequestData
+                      )
+                      if (isWindowDefined) {
+                        window.localStorage.setItem(
+                          `pre-registration-hash-${eventId}`,
+                          _get(confirmationData, 'attributes.hash')
+                        )
+                      }
 
-                  onConfirmationSuccess(confirmationData)
-                } else {
-                  setConfirmModalState({
-                    show: true,
-                    message: 'The preregistration has not started',
-                  })
-                }
-              } else {
-                const bodyFormData = new FormData()
-                bodyFormData.append('first_name', values.firstName)
-                bodyFormData.append('last_name', values.lastName)
-                bodyFormData.append('email', values.email)
-                bodyFormData.append('confirm_email', values.confirmEmail)
-                bodyFormData.append('zip', values.zip)
-                bodyFormData.append('country', values.country)
-                bodyFormData.append('password', values.password)
-                bodyFormData.append('password_confirmation', values.confirmPassword)
-                bodyFormData.append('client_id', CONFIGS.CLIENT_ID)
-                bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET)
-                bodyFormData.append('register_for', 'prereg')
+                      setIsPreRegistrationComplete(true)
+                      onConfirmationSuccess(confirmationData)
+                    } else {
+                      setConfirmModalState({
+                        show: true,
+                        message: 'The preregistration has not started',
+                      })
+                    }
+                  } else {
+                    const bodyFormData = new FormData()
+                    bodyFormData.append('first_name', values.firstName)
+                    bodyFormData.append('last_name', values.lastName)
+                    bodyFormData.append('email', values.email)
+                    bodyFormData.append('confirm_email', values.confirmEmail)
+                    bodyFormData.append('zip', values.zip)
+                    bodyFormData.append('country', values.country)
+                    bodyFormData.append('password', values.password)
+                    bodyFormData.append('password_confirmation', values.confirmPassword)
+                    bodyFormData.append('client_id', CONFIGS.CLIENT_ID)
+                    bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET)
+                    bodyFormData.append('register_for', 'prereg')
 
-                const res = await register(bodyFormData)
-                const profileRes = await getProfileData()
-                onLoginSuccess(res.data)
-                if (isWindowDefined) {
-                  window.localStorage.setItem(
-                    'user_data',
-                    JSON.stringify(_get(profileRes, 'data'))
-                  )
-                  setUserData(_get(profileRes, 'data'))
-                }
-              }
-            } catch (e) {
-              const error = e as AxiosError
-              let errorMessage = error?.message || 'Error'
-              const emailErrors = _get(error, 'response.data.message.email') || ''
-              const errorDataMessage = _get(error, 'response.data.message')
+                    const res = await register(bodyFormData)
+                    const profileRes = await getProfileData()
+                    onLoginSuccess(res.data)
+                    if (isWindowDefined) {
+                      window.localStorage.setItem(
+                        'user_data',
+                        JSON.stringify(_get(profileRes, 'data'))
+                      )
+                      setUserData(_get(profileRes, 'data'))
+                    }
+                  }
+                } catch (e) {
+                  const error = e as AxiosError
+                  let errorMessage = error?.message || 'Error'
+                  const emailErrors = _get(error, 'response.data.message.email') || ''
+                  const errorDataMessage = _get(error, 'response.data.message')
 
-              if (typeof errorDataMessage === 'string') {
-                errorMessage = errorDataMessage
-              }
-              if (emailErrors?.length > 0) {
-                if (emailErrors[0] === 'The email is already used') {
-                  setShowModalLogin(true)
-                  setAlreadyHasUser(true)
-                }
-              } else {
-                setError(errorMessage)
-              }
+                  if (typeof errorDataMessage === 'string') {
+                    errorMessage = errorDataMessage
+                  }
+                  if (emailErrors?.length > 0) {
+                    if (emailErrors[0] === 'The email is already used') {
+                      setShowModalLogin(true)
+                      setAlreadyHasUser(true)
+                    }
+                  } else {
+                    setError(errorMessage)
+                  }
 
-              onConfirmationError(error)
-            }
-          }}
-        >
-          {props => (
-            <Form>
-              <div className="login-modal-body">
-                <FieldsSection
-                  formFields={formFields}
-                  values={props.values}
-                  setFieldValue={props.setFieldValue}
-                  containerClass="pre-registration"
-                  countries={countries}
-                  themeOptions={themeOptions}
-                />
-              </div>
-              <div className="button-container">
-                <Button
-                  type="submit"
-                  variant="contained"
-                  className="login-register-button"
-                  disabled={props.isSubmitting}
-                >
-                  {props.isSubmitting ? (
-                    <CircularProgress size={26} />
-                  ) : isLoggedIn ? (
-                    'Confirm Pre-Registration'
-                  ) : (
-                    'Create Account'
-                  )}
-                </Button>
-              </div>
-            </Form>
-          )}
-        </Formik>
+                  onConfirmationError(error)
+                }
+              }}
+            >
+              {props => (
+                <Form>
+                  <div className="login-modal-body">
+                    <FieldsSection
+                      formFields={formFields}
+                      values={props.values}
+                      setFieldValue={props.setFieldValue}
+                      containerClass="pre-registration"
+                      countries={countries}
+                      themeOptions={themeOptions}
+                    />
+                  </div>
+                  <div className="button-container">
+                    <Button
+                      type="submit"
+                      variant="contained"
+                      className="login-register-button"
+                      disabled={props.isSubmitting}
+                    >
+                      {props.isSubmitting ? (
+                        <CircularProgress size={26} />
+                      ) : isLoggedIn ? (
+                        'Confirm Pre-Registration'
+                      ) : (
+                        'Create Account'
+                      )}
+                    </Button>
+                  </div>
+                </Form>
+              )}
+            </Formik>
+          </>
+        )}
       </div>
     </ThemeProvider>
   )

package/src/components/preRegistration/style.css

@@ -0,0 +1,3 @@
+.preregistration_confirmation_header {
+    margin-bottom: 2rem;
+}

package/src/components/preRegistration/utils.ts

@@ -6,7 +6,11 @@ import _isEmpty from 'lodash/isEmpty'
 import _map from 'lodash/map'
 import _split from 'lodash/split'
 
-import { combineValidators, requiredValidator } from '../../validators'
+import {
+  combineValidators,
+  passwordValidator,
+  requiredValidator,
+} from '../../validators'
 import { IShareButton } from '../confirmationContainer'
 
 export const getValidateFunctions = ({
@@ -26,6 +30,10 @@ export const getValidateFunctions = ({
     validationFunctions.push(element.onValidate)
   }
 
+  if (element.name === 'password') {
+    validationFunctions.push(passwordValidator)
+  }
+
   if (element.name === 'confirmEmail') {
     const isSameEmail = (confirmEmail?: string) =>
       values.email !== confirmEmail ? 'Please confirm your email address correctly' : null

package/src/components/ticketsContainer/index.tsx

@@ -48,8 +48,8 @@ import ConfirmModal from '../confirmModal'
 import Countdown from '../countdown'
 import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
 import { LoginModal } from '../loginModal'
-import WaitingList from '../waitingList'
 import { PreRegistration } from '../preRegistration'
+import WaitingList from '../waitingList'
 import { AccessCodeSection } from './AccessCodeSection'
 import { PromoCodeSection } from './PromoCodeSection'
 import { ReferralLogic } from './ReferralLogic'
@@ -417,6 +417,41 @@ export const TicketsContainer = ({
   const handleTicketSelect = (key: string, value: number | string, isTable = false) => {
     localStorage.setItem('selectedTicketsQuantity', value.toString())
     setSelectedTickets(prevState => {
+      // Allow multiple ticket types to be selected simultaneously when flag is enabled
+      if (event?.allowMultipleTicketTypePurchases === true) {
+        // Check if we're switching between tables and regular tickets
+        const hasExistingSelection = Object.keys(prevState).some(k => k !== 'isTable')
+        const switchingTicketType = hasExistingSelection && prevState.isTable !== isTable
+
+        // If switching from tables to regular tickets or vice versa, clear all selections
+        if (switchingTicketType && Number(value) > 0) {
+          return {
+            [key]: value,
+            isTable,
+          }
+        }
+
+        // If value is 0, remove this ticket from selection
+        if (!value || Number(value) === 0) {
+          const newState = { ...prevState }
+          delete newState[key]
+          // If no ticket keys remain (only isTable left), return empty state
+          const ticketKeys = Object.keys(newState).filter(k => k !== 'isTable')
+          if (ticketKeys.length === 0) {
+            return { isTable: false } as ISelectedTickets
+          }
+          return { ...newState, isTable: prevState.isTable }
+        }
+
+        // If value > 0, add or update this ticket while keeping others of the same type selected
+        return {
+          ...prevState,
+          [key]: value,
+          isTable,
+        }
+      }
+
+      // Default behavior: only one ticket type at a time
       if (Object.keys(prevState)[0] !== key && !value) {
         return prevState
       }
@@ -441,32 +476,55 @@ export const TicketsContainer = ({
     const timeSlotTickets = _flatten(_map(timeSlotGroups, slots => slots))
 
     setHandleBookIsLoading(true)
-    const ticket = event?.isTimeSlotEvent
-      ? _find(timeSlotTickets || [], item => Number(selectedTickets[item.id]) > 0) ||
-        ({} as ITicket)
-      : _find(tickets, item => Number(selectedTickets[item.id]) > 0) || ({} as ITicket)
-    const optionName = _get(ticket, 'optionName')
-    const ticketId = _get(ticket, 'id')
-    const productCartQuantity = +selectedTickets[ticket.id]
-    const ticketQuantity = +selectedTickets[ticket.id]
+
+    // Unified flow: works for both single and multiple ticket types
+    const ticketsList = event?.isTimeSlotEvent ? timeSlotTickets : tickets
+
+    // Get all selected ticket IDs with quantity > 0 (excluding 'isTable' key)
+    const selectedTicketIds = Object.keys(selectedTickets).filter(
+      key => key !== 'isTable' && Number(selectedTickets[key]) > 0
+    )
+
+    // Build ticket_types object with all selected tickets (works for 1 or N tickets)
+    const ticketTypesData: any = {}
+    let totalProductCartQuantity = 0
+    let firstTicket: ITicket | null = null
+
+    selectedTicketIds.forEach(ticketId => {
+      const ticket = _find(ticketsList || [], item => String(item.id) === ticketId) as ITicket
+      if (ticket) {
+        if (!firstTicket) firstTicket = ticket
+        const optionName = _get(ticket, 'optionName')
+        const quantity = +selectedTickets[ticketId]
+        totalProductCartQuantity += quantity
+
+        ticketTypesData[ticketId] = {
+          product_options: {
+            [optionName]: ticketId,
+            ticket_price: ticket.price,
+          },
+          quantity,
+        }
+      }
+    })
+
+    if (!firstTicket) {
+      setHandleBookIsLoading(false)
+      return
+    }
+
+    const firstOptionName = _get(firstTicket, 'optionName')
+    const firstTicketId = _get(firstTicket, 'id')
 
     const data: ICartRequestData = {
       attributes: {
         alternative_view_id: null,
-        product_cart_quantity: productCartQuantity,
+        product_cart_quantity: totalProductCartQuantity,
         product_options: {
-          [optionName]: ticketId,
+          [firstOptionName]: firstTicketId,
         },
         product_id: eventId,
-        ticket_types: {
-          [ticketId]: {
-            product_options: {
-              [optionName]: ticketId,
-              ticket_price: ticket.price,
-            },
-            quantity: ticketQuantity,
-          },
-        },
+        ticket_types: ticketTypesData,
       },
     }
 
@@ -502,7 +560,7 @@ export const TicketsContainer = ({
               : {}
 
           const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-            ticketQuantity,
+            totalProductCartQuantity,
             userData
           )