tf-checkout-react 1.2.2 → 1.2.3

package/package.json

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

package/src/api/index.ts

@@ -161,13 +161,14 @@ export const handleSetAccessToken = (token: string) => {
 }
 
 export function getEvent(id: string | number) {
-  let referralValue = ""
+  let referralValue = ''
   if (isWindowDefined) {
     const params = new URL(`${window.location}`)
     const referralId = params.searchParams.get('ttf_r') || ''
     const referral_key = window.localStorage.getItem('referral_key')
-    let referralIdlocal = ""
+    let referralIdlocal = ''
     if (referral_key) {
+      // eslint-disable-next-line prefer-destructuring
       referralIdlocal = referral_key.split('.')[1]
     }
     referralValue = referralId || referralIdlocal
@@ -175,10 +176,12 @@ export function getEvent(id: string | number) {
 
   const response = publicRequest
     .get(`v1/event/${id}`, {
-      headers: { ...ttfHeaders,
-      "Referer-Url": isDocumentDefined ? document.referrer : '',
-      "Referrer-Id": isWindowDefined ? referralValue : ''
-    } })
+      headers: {
+        ...ttfHeaders,
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
+        'Referrer-Id': isWindowDefined ? referralValue : '',
+      },
+    })
     .catch(error => {
       throw error
     })
@@ -203,12 +206,15 @@ export function getTickets(id: string | number, promoCode: string) {
 }
 
 export const addToCart = (id: string | number, data: any) => {
-  const res = publicRequest.post(`v1/event/${id}/add-to-cart/`, {
-    data,
-    headers: {
-      "Referer-Url": isDocumentDefined ? document.referrer : '',
+  const res = publicRequest.post(
+    `v1/event/${id}/add-to-cart/`,
+    { data },
+    {
+      headers: {
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
+      },
     }
-  })
+  )
   return res
 }
 
@@ -247,8 +253,8 @@ export const getPaymentData = (hash: string) => {
   const response = publicRequest
     .get(`v1/order/${hash}/review/`, {
       headers: {
-        "Referer-Url": isDocumentDefined ? document.referrer : '' ,
-      }
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
+      },
     })
     .catch(error => {
       throw error
@@ -269,10 +275,10 @@ export const handlePaymentData = (orderHash: string, data: any) => {
 
 export const handlePaymentSuccess = (orderHash: string) => {
   const res = publicRequest
-    .post(`v1/order/${orderHash}/success`, {
+    .post(`v1/order/${orderHash}/success`, undefined, {
       headers: {
-        "Referer-Url": isDocumentDefined ? document.referrer : ''
-      }
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
+      },
     })
     .catch(error => {
       throw error
@@ -282,10 +288,10 @@ export const handlePaymentSuccess = (orderHash: string) => {
 
 export const handleFreeSuccess = (orderHash: string) => {
   const res = publicRequest
-    .post(`v1/order/${orderHash}/complete_free_registration`, {
+    .post(`v1/order/${orderHash}/complete_free_registration`, undefined, {
       headers: {
-        "Referer-Url": isDocumentDefined ? document.referrer : ''
-      }
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
+      },
     })
     .catch(error => {
       throw error

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

@@ -3,7 +3,7 @@ import './style.css'
 import { CircularProgress, ThemeOptions } from '@mui/material'
 import Backdrop from '@mui/material/Backdrop'
 import Button from '@mui/material/Button'
-import { createTheme,ThemeProvider } from '@mui/material/styles'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { CSSProperties } from '@mui/styles'
 import axios, { AxiosError } from 'axios'
 import {
@@ -21,7 +21,7 @@ import _isEmpty from 'lodash/isEmpty'
 import _isEqual from 'lodash/isEqual'
 import _map from 'lodash/map'
 import { nanoid } from 'nanoid'
-import React, { FC, useEffect, useRef,useState } from 'react'
+import React, { FC, useEffect, useRef, useState } from 'react'
 
 import {
   getCart,
@@ -33,12 +33,20 @@ import {
   setCustomHeader,
 } from '../../api'
 import { IBillingInfoData } from '../../types'
-import { createCheckoutDataBodyWithDefaultHolder, getCookieByName } from '../../utils'
+import {
+  createCheckoutDataBodyWithDefaultHolder,
+  getCookieByName,
+} from '../../utils'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
 import { getQueryVariable } from '../../utils/getQueryVariable'
 import { combineValidators, requiredValidator } from '../../validators'
 import { DatePickerField } from '../common/DatePickerField'
-import { CheckboxField, CustomField, PhoneNumberField,SelectField } from '../common/index'
+import {
+  CheckboxField,
+  CustomField,
+  PhoneNumberField,
+  SelectField,
+} from '../common/index'
 import SnackbarAlert from '../common/SnackbarAlert'
 import { ForgotPasswordModal } from '../forgotPasswordModal'
 import { LoginModal } from '../loginModal'
@@ -169,8 +177,10 @@ const LogicRunner: FC<{
               city: parsedData?.city || '',
               confirmPassword: '',
               password: '',
-              'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
-              'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
+              'holderFirstName-0':
+                parsedData?.first_name || parsedData?.firstName || '',
+              'holderLastName-0':
+                parsedData?.last_name || parsedData?.lastName || '',
               'holderEmail-0': parsedData?.email || '',
             }
             setValues({ ...values, ...mappedValues })
@@ -225,7 +235,7 @@ export const BillingInfoContainer = ({
   enableTimer = false,
   logo,
   showForgotPasswordButton = false,
-  showSignUpButton = false
+  showSignUpButton = false,
 }: IBillingInfoPage) => {
   const themeMui = createTheme(themeOptions)
   const isWindowDefined = typeof window !== 'undefined'
@@ -306,7 +316,7 @@ export const BillingInfoContainer = ({
   }
 
   useEffect(() => {
-    if ((pIsLoggedIn !== isLoggedIn) || xtfCookie) {
+    if (pIsLoggedIn !== isLoggedIn || xtfCookie) {
       setIsLoggedIn(!!(pIsLoggedIn || xtfCookie))
     }
   }, [pIsLoggedIn, isLoggedIn, xtfCookie])
@@ -363,10 +373,7 @@ export const BillingInfoContainer = ({
           firstName: profileDataObj.first_name,
           lastName: profileDataObj.last_name,
         })
-        window.localStorage.setItem(
-          'user_data',
-          JSON.stringify(profileDataObj)
-        )
+        window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
         onGetProfileDataSuccess(userDataResponse.data)
       }
     } catch (e) {
@@ -403,8 +410,10 @@ export const BillingInfoContainer = ({
     collectPaymentData()
   }, [skipPage, ticketsQuantity])
 
-
-  const collectCheckoutBody = (values: Record<string, unknown>, profileData?: any): Record<string, unknown> => {
+  const collectCheckoutBody = (
+    values: Record<string, unknown>,
+    profileData?: any
+  ): Record<string, unknown> => {
     let checkoutBody = {}
 
     // Auto collect ticket holders name when it was skipped optionally
@@ -413,7 +422,7 @@ export const BillingInfoContainer = ({
         ticketsQuantity.length,
         values,
         true,
-        { emailLogged, firstNameLogged, lastNameLogged },
+        { emailLogged, firstNameLogged, lastNameLogged }
       )
     } else {
       checkoutBody = createCheckoutDataBody(
@@ -421,8 +430,10 @@ export const BillingInfoContainer = ({
         values,
         {
           emailLogged: emailLogged || profileData.email,
-          firstNameLogged: firstNameLogged || profileData.first_name || profileData.firstName,
-          lastNameLogged: lastNameLogged || profileData.last_name || profileData.lastName,
+          firstNameLogged:
+            firstNameLogged || profileData.first_name || profileData.firstName,
+          lastNameLogged:
+            lastNameLogged || profileData.last_name || profileData.lastName,
         },
         showDOB
       )
@@ -435,7 +446,10 @@ export const BillingInfoContainer = ({
     localStorage.removeItem('referral_key')
   }
 
-  if (loading || (enableTimer && !expirationTime && typeof window !== 'undefined')) {
+  if (
+    loading ||
+    (enableTimer && !expirationTime && typeof window !== 'undefined')
+  ) {
     if (expirationTime === 0) {
       // Redirect to homepage (countdown finished and browser reloaded case)
       window.location.href = '/'
@@ -511,15 +525,24 @@ export const BillingInfoContainer = ({
               setLoading(true)
               const resRegister = await register(bodyFormData)
               const xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce')
-              const accessToken = _get(resRegister, 'data.data.attributes.access_token')
-              const refreshToken = _get(resRegister, 'data.data.attributes.refresh_token')
-              const userProfile = _get(resRegister, 'data.data.attributes.user_profile')
+              const accessToken = _get(
+                resRegister,
+                'data.data.attributes.access_token'
+              )
+              const refreshToken = _get(
+                resRegister,
+                'data.data.attributes.refresh_token'
+              )
+              const userProfile = _get(
+                resRegister,
+                'data.data.attributes.user_profile'
+              )
 
               onRegisterSuccess({
                 xtfCookie,
                 accessToken,
                 refreshToken,
-                userProfile
+                userProfile,
               })
             } catch (e) {
               setLoading(false)
@@ -657,7 +680,6 @@ export const BillingInfoContainer = ({
                       const { groupClassname, groupItems } = group
                       return (
                         <React.Fragment key={group.uniqueId}>
-
                           <div className={groupClassname}>
                             {_map(
                               groupItems.filter(el => {
@@ -678,7 +700,7 @@ export const BillingInfoContainer = ({
                                   'confirmPassword',
                                   'password-info',
                                 ].includes(element.name) &&
-                                  isLoggedIn ? null : (
+                                isLoggedIn ? null : (
                                   <React.Fragment key={element.uniqueId}>
                                     <div className={element.className}>
                                       {element.component ? (
@@ -686,9 +708,15 @@ export const BillingInfoContainer = ({
                                       ) : (
                                         <Field
                                           name={element.name}
-                                          label={element.name === 'phone'
-                                            ? `${element.label}${flagRequirePhone ? '' : ' (optional)'} `
-                                            : element.label}
+                                          label={
+                                            element.name === 'phone'
+                                              ? `${element.label}${
+                                                  flagRequirePhone
+                                                    ? ''
+                                                    : ' (optional)'
+                                                } `
+                                              : element.label
+                                          }
                                           type={element.type}
                                           validate={getValidateFunctions(
                                             element,
@@ -712,11 +740,13 @@ export const BillingInfoContainer = ({
                                             element.name === 'country'
                                               ? countries
                                               : element.name === 'state'
-                                                ? states
-                                                : []
+                                              ? states
+                                              : []
                                           }
                                           theme={theme}
-                                          disableDropdown={element.disableDropdown}
+                                          disableDropdown={
+                                            element.disableDropdown
+                                          }
                                         />
                                       )}
                                     </div>
@@ -761,10 +791,16 @@ export const BillingInfoContainer = ({
                                     validate={combineValidators(
                                       element.required
                                         ? requiredValidator
-                                        : () => {},
+                                        : () =>
+                                            props.errors[
+                                              `${element.name}-${index}`
+                                            ],
                                       element.onValidate
                                         ? element.onValidate
-                                        : () => {}
+                                        : () =>
+                                            props.errors[
+                                              `${element.name}-${index}`
+                                            ]
                                     )}
                                     disableDropdown={element.disableDropdown}
                                   />

package/src/components/paymentContainer/index.tsx

@@ -71,6 +71,7 @@ export interface IPaymentPage {
   onCountdownFinish?: () => void;
   enableTimer?: boolean;
   enablePaymentPlan?: boolean;
+  paymentButtonText?: string;
 }
 
 const initialOrderValues: IOrderData = {
@@ -98,16 +99,17 @@ export const PaymentContainer = ({
   errorText,
   checkoutData,
   onErrorClose = _identity,
-  onGetPaymentDataSuccess = () => {},
-  onGetPaymentDataError = () => {},
-  onPaymentError = () => {},
+  onGetPaymentDataSuccess = () => { },
+  onGetPaymentDataError = () => { },
+  onPaymentError = () => { },
   stripeCardOptions = {},
   disableZipSection = false,
   themeOptions,
   elementsOptions,
-  onCountdownFinish = () => {},
+  onCountdownFinish = () => { },
   enableTimer = false,
   enablePaymentPlan = false,
+  paymentButtonText
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -166,10 +168,10 @@ export const PaymentContainer = ({
         setConditions(
           conditionsInfo
             ? conditionsInfo.map((item: string) => ({
-                id: nanoid(),
-                text: item,
-                checked: false,
-              }))
+              id: nanoid(),
+              text: item,
+              checked: false,
+            }))
             : []
         )
       }
@@ -316,15 +318,15 @@ export const PaymentContainer = ({
                       conditions={conditions}
                       stripeCardOptions={stripeCardOptions}
                       disableZipSection={disableZipSection}
+                      paymentButtonText={paymentButtonText}
                     />
                   </Elements>
                 </div>
               </div>
             ) : (
               <div
-                className={`payment_button ${
-                  paymentIsLoading ? 'disabled-payment-button' : ''
-                }`}
+                className={`payment_button ${paymentIsLoading ? 'disabled-payment-button' : ''
+                  }`}
               >
                 <button
                   disabled={paymentIsLoading}

package/src/components/stripePayment/index.tsx

@@ -47,6 +47,7 @@ export interface ICheckoutForm {
   handleSetLoading: (loading: any) => void;
   conditions: any;
   disableZipSection: boolean;
+  paymentButtonText?: string;
 }
 
 interface AddressTypes {
@@ -65,9 +66,10 @@ const CheckoutForm = ({
   currency,
   billing_info,
   isLoading = false,
-  handleSetLoading = () => {},
+  handleSetLoading = () => { },
   conditions = [],
   disableZipSection,
+  paymentButtonText
 }: ICheckoutForm) => {
   const stripe = useStripe()
   const elements = useElements()
@@ -101,7 +103,7 @@ const CheckoutForm = ({
         line1: billing_info.street_address,
         state: billing_info.state,
       }
-      
+
       if (!disableZipSection) {
         address.postal_code = postalCode
       }
@@ -244,7 +246,7 @@ const CheckoutForm = ({
             {isLoading ? (
               <CircularProgress size={26} />
             ) : (
-              `Pay ${getCurrencySymbolByCurrency(currency)}${total}`
+              `${paymentButtonText ? paymentButtonText : 'Pay'} ${getCurrencySymbolByCurrency(currency)}${total}`
             )}
           </button>
         </div>