tf-checkout-react 1.0.52 → 1.0.56

package/package.json

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

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

@@ -88,10 +88,12 @@ export interface IBillingInfoPage {
   onAuthorizeError?: (e: AxiosError) => void;
 
   onLogin?: () => void;
+  onLoginSuccess?: () => void;
 
   initialValues?: FormikValues;
   buttonName?: string;
   theme?: 'light' | 'dark';
+  isLoggedIn?: boolean;
 }
 
 const LogicRunner: FC<{
@@ -155,6 +157,9 @@ const LogicRunner: FC<{
               city: parsedData?.city || '',
               confirmPassword: '',
               password: '',
+              'holderFirstName-0': parsedData?.first_name || '',
+              'holderLastName-0': parsedData?.last_name || '',
+              'holderEmail-0': parsedData?.email || '',
             }
             setValues(mappedValues)
             setUserValues(mappedValues)
@@ -192,13 +197,16 @@ export const BillingInfoContainer = ({
   onAuthorizeSuccess = () => {},
   onAuthorizeError = () => {},
   onLogin = () => {},
+  onLoginSuccess = () => {},
+  isLoggedIn: pIsLoggedIn = false,
 }: IBillingInfoPage) => {
+  const isWindowDefined = typeof window !== 'undefined'
   const userData =
-    typeof window !== 'undefined' && window.localStorage.getItem('user_data')
+    isWindowDefined && window.localStorage.getItem('user_data')
       ? JSON.parse(window.localStorage.getItem('user_data') || '')
       : {}
   const access_token =
-    typeof window !== 'undefined' && window.localStorage.getItem('access_token')
+    isWindowDefined && window.localStorage.getItem('access_token')
       ? window.localStorage.getItem('access_token') || ''
       : ''
 
@@ -206,6 +214,7 @@ export const BillingInfoContainer = ({
   IBillingInfoData[]
   >(data)
 
+  const [isLoggedIn, setIsLoggedIn] = useState(!!access_token)
   const [cartInfoData, setCartInfo] = useState<any>({})
   const [countries, setCountries] = useState<any>([])
   const [states, setStates] = useState<any>([])
@@ -229,7 +238,6 @@ export const BillingInfoContainer = ({
     state: '',
     zip: '',
   })
-  const isLoggedIn = !!access_token
   const emailLogged =
     _get(userData, 'email', '') || _get(userValues, 'email', '')
   const firstNameLogged =
@@ -238,7 +246,6 @@ export const BillingInfoContainer = ({
     _get(userData, 'last_name', '') || _get(userValues, 'last_name', '')
 
   const showDOB = getQueryVariable('age_required') === 'true'
-  const showTicketHolderName = getQueryVariable('names_required') === 'true'
   const eventId = getQueryVariable('event_id')
   const optedInFieldValue: boolean = _get(cartInfoData, 'optedIn', false)
   const hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
@@ -255,6 +262,12 @@ export const BillingInfoContainer = ({
     return qty
   }
 
+  useEffect(() => {
+    if ((pIsLoggedIn || access_token) && !isLoggedIn) {
+      setIsLoggedIn(true)
+    }
+  }, [pIsLoggedIn, isLoggedIn, access_token])
+
   //just once
   useEffect(() => {
     // fetch countries data
@@ -301,7 +314,7 @@ export const BillingInfoContainer = ({
   // fetch user data
   const fetchUserData = async (token: string) => {
     try {
-      if (typeof window !== 'undefined' && token) {
+      if (isWindowDefined && token) {
         const userDataResponse = await getProfileData(token)
         const profileSpecifiedData = _get(userDataResponse, 'data.data')
         const profileDataObj = setLoggedUserData(profileSpecifiedData)
@@ -346,7 +359,7 @@ export const BillingInfoContainer = ({
                 const updatedUserData = await getProfileData(access_token)
                 const profileSpecifiedData = _get(updatedUserData, 'data.data')
                 const profileDataObj = setLoggedUserData(profileSpecifiedData)
-                if (typeof window !== 'undefined') {
+                if (isWindowDefined) {
                   window.localStorage.setItem(
                     'user_data',
                     JSON.stringify(profileDataObj)
@@ -375,7 +388,10 @@ export const BillingInfoContainer = ({
               { emailLogged, firstNameLogged, lastNameLogged },
               showDOB
             )
-            const bodyFormData = createRegisterFormData(values, checkoutBodyForRegistration)
+            const bodyFormData = createRegisterFormData(
+              values,
+              checkoutBodyForRegistration
+            )
 
             let access_token_register = null
             try {
@@ -423,7 +439,7 @@ export const BillingInfoContainer = ({
             const profileData = await getProfileData(access_token_register)
             const profileSpecifiedData = _get(profileData, 'data.data')
             const profileDataObj = setLoggedUserData(profileSpecifiedData)
-            if (typeof window !== 'undefined') {
+            if (isWindowDefined) {
               window.localStorage.setItem(
                 'user_data',
                 JSON.stringify(profileDataObj)
@@ -449,7 +465,7 @@ export const BillingInfoContainer = ({
           } catch (e) {
             if (axios.isAxiosError(e)) {
               if (e.response?.data.error === 'invalid_token') {
-                if (typeof window !== 'undefined') {
+                if (isWindowDefined) {
                   window.localStorage.removeItem('user_data')
                   window.localStorage.removeItem('access_token')
                   setUserExpired(true)
@@ -499,45 +515,16 @@ export const BillingInfoContainer = ({
               )}
               {_map(dataWithUniqueIds, item => {
                 const { label, labelClassName, fields } = item
-                if (
-                  label === 'Ticket Holders' &&
-                  !showTicketHolderName &&
-                  !showDOB
-                ) {
-                  return null
-                }
                 return (
                   <React.Fragment key={item.uniqueId}>
                     <p className={labelClassName}>{label}</p>
                     {_map(fields, group => {
-                      const {
-                        groupClassname,
-                        groupItems,
-                        groupLabel,
-                        groupLabelClassName,
-                      } = group
+                      const { groupClassname, groupItems } = group
                       return (
                         <React.Fragment key={group.uniqueId}>
-                          {!isLoggedIn && (
-                            <div className={groupLabelClassName}>
-                              {groupLabel}
-                            </div>
-                          )}
                           <div className={groupClassname}>
                             {_map(
                               groupItems.filter(el => {
-                                if (
-                                  el.name === 'holderFirstName' &&
-                                  !showTicketHolderName
-                                ) {
-                                  return false
-                                }
-                                if (
-                                  el.name === 'holderLastName' &&
-                                  !showTicketHolderName
-                                ) {
-                                  return false
-                                }
                                 if (el.name === 'holderAge' && !showDOB) {
                                   return false
                                 }
@@ -547,9 +534,12 @@ export const BillingInfoContainer = ({
                                 return true
                               }),
                               element =>
-                                ['password', 'confirmPassword'].includes(
-                                  element.name
-                                ) && isLoggedIn ? null : (
+                                [
+                                  'password',
+                                  'confirmPassword',
+                                  'password-info',
+                                ].includes(element.name) &&
+                                isLoggedIn ? null : (
                                   <React.Fragment key={element.uniqueId}>
                                     {element.name === 'email' ? (
                                       <div className="email-checking">
@@ -598,53 +588,49 @@ export const BillingInfoContainer = ({
                   </React.Fragment>
                 )
               })}
-              {showTicketHolderName && (
-                <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.uniqueId}>
-                              <div className={groupClassname}>
-                                {_map(groupItems, element => (
-                                  <div
-                                    className={element.className}
-                                    key={element.uniqueId}
-                                  >
-                                    <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 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.uniqueId}>
+                          <div className={groupClassname}>
+                            {_map(groupItems, element => (
+                              <div
+                                className={element.className}
+                                key={element.uniqueId}
+                              >
+                                <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>
-                </React.Fragment>
-              )}
+                ))}
+              </div>
               <div className="button-container">
                 <LoadingButton
                   type="submit"
@@ -671,6 +657,7 @@ export const BillingInfoContainer = ({
           onLogin={() => {
             setShowModalLogin(false)
             setUserExpired(false)
+            onLoginSuccess()
           }}
           alreadyHasUser={alreadyHasUser}
           userExpired={userExpired}

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

@@ -33,6 +33,14 @@ export const getInitialValues = (
     initialValues[item] = propsInitialValues[item] || userValues[item] || ''
   })
 
+  // set logged in user as first ticket holder
+  initialValues['holderFirstName-0'] =
+    propsInitialValues.firstName || userValues.firstName || ''
+  initialValues['holderLastName-0'] =
+    propsInitialValues.lastName || userValues.lastName || ''
+  initialValues['holderEmail-0'] =
+    propsInitialValues.email || userValues.email || ''
+
   return initialValues
 }
 

package/src/components/confirmationContainer/index.tsx

@@ -67,7 +67,7 @@ export const ConfirmationContainer = ({
         }
       }
     })()
-  }, [onGetConfirmationDataSuccess, onGetConfirmationDataError])
+  }, [])
 
   return (
     <div className="confirmation-page">

package/src/components/paymentContainer/index.tsx

@@ -16,6 +16,7 @@ import StripePayment from '../stripePayment'
 import { IOrderData, IPaymentField } from '../../types'
 
 import { getPaymentData, handlePaymentSuccess, getConditions } from '../../api'
+import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 
 const testId = ENV.STRIPE_PUBLISHABLE_KEY || 'pk_test_3Ov1P1oP33A1cxaSjxWE0VjT'
 const stripePromise = loadStripe(
@@ -32,6 +33,7 @@ export interface IPaymentPage {
   onGetPaymentDataSuccess: (value: any) => void;
   onGetPaymentDataError: (value: AxiosError) => void;
   onPaymentError: (value: AxiosError) => void;
+  stripeCardOptions?: StripeCardNumberElementOptions;
 }
 
 const initialOrderValues: IOrderData = {
@@ -62,6 +64,7 @@ export const PaymentContainer = ({
   onGetPaymentDataSuccess = () => {},
   onGetPaymentDataError = () => {},
   onPaymentError = () => {},
+  stripeCardOptions = {},
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -118,6 +121,7 @@ export const PaymentContainer = ({
             ? conditionsInfo.map((item: string) => ({
               id: nanoid(),
               text: item,
+              checked: false,
             }))
             : []
         )
@@ -191,6 +195,7 @@ export const PaymentContainer = ({
                 isLoading={paymentIsLoading}
                 handleSetLoading={value => setPaymentIsLoading(value)}
                 conditions={conditions}
+                stripeCardOptions={stripeCardOptions}
               />
             </Elements>
           </div>

package/src/components/stripePayment/index.tsx

@@ -18,11 +18,13 @@ import CircularProgress from '@mui/material/CircularProgress'
 const options: StripeCardNumberElementOptions = {
   style: {
     base: {
-      backgroundColor:'#232323',
+      backgroundColor: '#232323',
       fontSize: '18px',
       color: '#ffffff',
       letterSpacing: '1px',
-
+      ':-webkit-autofill': {
+        color: '#ffffff',
+      },
       '::placeholder': {
         color: 'rgba(201, 201, 201, 0.5)',
       },
@@ -37,7 +39,6 @@ export interface ICheckoutForm {
   total: string;
   currency: string;
   onSubmit: (error: any) => Promise<any>;
-
   error?: string | null;
   stripeCardOptions?: StripeCardNumberElementOptions;
   stripe_client_secret: string;
@@ -57,7 +58,7 @@ interface AddressTypes {
 const CheckoutForm = ({
   total,
   onSubmit = _identity,
-  stripeCardOptions = options,
+  stripeCardOptions = {},
   error = null,
   stripe_client_secret,
   currency,
@@ -70,6 +71,8 @@ const CheckoutForm = ({
   const elements = useElements()
   const [postalCode, setPostalCode] = useState<any>('')
   const [stripeError, setStripeError] = useState<any>(null)
+  const [checkboxes, setCheckboxes] = useState<any>([])
+  const [allowSubmit, setAllowSubmit] = useState(false)
 
   const handleSubmit = async (event: React.SyntheticEvent) => {
     handleSetLoading(true)
@@ -127,6 +130,18 @@ const CheckoutForm = ({
     }
   }
 
+  const handleCheckboxes = (e: any) => {
+    const checkbox = e.target
+    const updatedCheckedState = checkboxes.map((item: any) => {
+      const value = item.id === checkbox.name ? !item.checked : item.checked
+      return {
+        ...item,
+        checked: value,
+      }
+    })
+    setCheckboxes(updatedCheckedState)
+  }
+
   const onChangePostalCode = (e: any) => {
     setPostalCode(e.target.value)
   }
@@ -141,6 +156,21 @@ const CheckoutForm = ({
     }
   }, [])
 
+  useEffect(() => {
+    if (conditions.length) {
+      setCheckboxes(conditions)
+    }
+  }, [conditions])
+
+  useEffect(() => {
+    if (checkboxes.length) {
+      const allChecked = checkboxes.every(
+        (item: any) => item?.checked === true
+      )
+      setAllowSubmit(allChecked)
+    }
+  }, [checkboxes])
+
   const buttonIsDiabled = !stripe || !!error || isLoading
 
   return (
@@ -153,7 +183,7 @@ const CheckoutForm = ({
           <label className="card_number_element">
             <span className="card_label_text">Card number</span>
             <CardNumberElement
-              options={stripeCardOptions}
+              options={{ ...options, ...stripeCardOptions }}
               onReady={_identity}
               onChange={_identity}
               onBlur={_identity}
@@ -162,11 +192,11 @@ const CheckoutForm = ({
           </label>
           <label className="expiration_element">
             <span className="card_label_text">Expiration date</span>
-            <CardExpiryElement options={stripeCardOptions} />
+            <CardExpiryElement options={{ ...options, ...stripeCardOptions }} />
           </label>
           <label className="cvc_element">
             <span className="card_label_text">CVC</span>
-            <CardCvcElement options={stripeCardOptions} />
+            <CardCvcElement options={{ ...options, ...stripeCardOptions }} />
           </label>
           <label className="zip_element">
             <p className="card_label_text">ZIP</p>
@@ -178,7 +208,7 @@ const CheckoutForm = ({
             />
           </label>
         </div>
-        {conditions?.map((checkbox: any) => (
+        {checkboxes?.map((checkbox: any) => (
           <div
             className={'billing-info-container__singleField'}
             key={checkbox.id}
@@ -188,13 +218,15 @@ const CheckoutForm = ({
                 name={checkbox.id}
                 label={checkbox.text}
                 required={true}
+                onChange={handleCheckboxes}
+                checked={checkbox.checked}
               />
             </div>
           </div>
         ))}
         <div
           className={`payment_button ${
-            buttonIsDiabled ? 'disabled-payment-button' : ''
+            buttonIsDiabled || !allowSubmit ? 'disabled-payment-button' : ''
           }`}
         >
           <button disabled={buttonIsDiabled} type="submit">

package/src/components/waitingList/index.tsx

@@ -66,9 +66,10 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
 
   return (
     <div className="waiting-list">
+      <p className="no-tickets-text">No tickets are currently available for this event.</p>
       {showSuccessMessage ? (
         <div className="success-message">
-          <h3>{`You've been added to the waiting list!`}</h3>
+          <p className="added-success-message">{`You've been added to the waiting list!`}</p>
           <p>{`You'll be notified if tickets become available.`}</p>
         </div>
       ) : (

package/src/components/waitingList/style.css

@@ -15,4 +15,10 @@
 }
 .waiting-list .success-message p {
   margin: 0;
+}
+.waiting-list .no-tickets-text {
+  text-align: center;
+}
+.waiting-list .added-success-message {
+  font-size: 22px;
 }