tf-checkout-react 1.0.37 → 1.0.41

package/dist/types/billing-info-data.d.ts

@@ -19,4 +19,5 @@ export interface IBillingInfoData {
     id: number | string;
     fields: IFieldData[];
     label?: string;
+    labelClassName?: string;
 }

package/package.json

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

package/src/api/index.ts

@@ -33,14 +33,14 @@ export const publicRequest: IPublicRequest = axios.create({
 }) as IPublicRequest
 
 publicRequest.interceptors.response.use(response => response, error => {
-  if (error.response.status === 401) {
+  if (error?.response?.status === 401) {
     if(isWindowDefined){
       window.localStorage.removeItem('auth_guest_token')
       window.localStorage.removeItem('user_data')
       window.localStorage.removeItem('access_token')
     }
   }
-  return error
+  return Promise.reject(error)
 })
 
 publicRequest.interceptors.request.use((config: AxiosRequestConfig) => {

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

@@ -24,7 +24,7 @@ import {
   postOnCheckout,
   register,
   setCustomHeader,
-  getStates
+  getStates,
 } from '../../api'
 import { LoginModal } from '../loginModal'
 import { RegisterModal } from '../registerModal'
@@ -67,7 +67,13 @@ export interface IBillingInfoPage {
   theme?: 'light' | 'dark';
 }
 
-const LogicRunner: FC<{values: any, setStates: React.Dispatch<any>, setFieldValue: any, setValues: any, setUserValues: any}> = ({ values, setStates, setFieldValue, setValues, setUserValues }) => {
+const LogicRunner: FC<{
+  values: any;
+  setStates: React.Dispatch<any>;
+  setFieldValue: any;
+  setValues: any;
+  setUserValues: any;
+}> = ({ values, setStates, setFieldValue, setValues, setUserValues }) => {
   useEffect(() => {
     const fetchStates = async () => {
       try {
@@ -78,12 +84,14 @@ const LogicRunner: FC<{values: any, setStates: React.Dispatch<any>, setFieldValu
         }))
         setStates(mappedStates)
         setFieldValue('state', mappedStates[0]?.label ?? '')
-      } catch(e) {
-      }
+      } catch (e) {}
     }
     fetchStates()
   }, [values.country, setStates, setFieldValue])
-  const userDataEncoded = typeof window !== undefined ? window.localStorage.getItem('user_data') : ''
+  const userDataEncoded =
+    typeof window !== 'undefined'
+      ? window.localStorage.getItem('user_data')
+      : ''
   useEffect(() => {
     // set user data from local storage
     const getStoredUserData = () => {
@@ -119,7 +127,7 @@ const LogicRunner: FC<{values: any, setStates: React.Dispatch<any>, setFieldValu
     }
     getStoredUserData()
   }, [userDataEncoded, setValues, setUserValues])
-  
+
   return null
 }
 
@@ -291,8 +299,9 @@ export const BillingInfoContainer = ({
                 formikHelpers.setFieldError('holderAge', error)
               }
 
-              if(error?.password) {
+              if (error?.password) {
                 formikHelpers.setFieldError('password', error.password)
+                formikHelpers.setFieldError('confirmPassword', error.password)
               }
 
               if (error?.email) {
@@ -313,7 +322,13 @@ export const BillingInfoContainer = ({
       >
         {(props: FormikProps<any>) => (
           <Form onSubmit={props.handleSubmit}>
-            <LogicRunner values={props.values} setStates={setStates} setFieldValue={props.setFieldValue} setValues={props.setValues} setUserValues={setUserValues} />
+            <LogicRunner
+              values={props.values}
+              setStates={setStates}
+              setFieldValue={props.setFieldValue}
+              setValues={props.setValues}
+              setUserValues={setUserValues}
+            />
             <div className={`billing-info-container ${theme}`}>
               {!isLoggedIn && (
                 <div className="account-actions-block">
@@ -338,7 +353,7 @@ export const BillingInfoContainer = ({
                 </div>
               )}
               {_map(data, item => {
-                const { id, label, fields } = item
+                const { id, label, labelClassName, fields } = item
                 if (
                   label === 'Ticket Holders' &&
                   !showTicketHolderName &&
@@ -348,7 +363,7 @@ export const BillingInfoContainer = ({
                 }
                 return (
                   <SectionContainer key={id}>
-                    <p>{label}</p>
+                    <p className={labelClassName}>{label}</p>
                     {_map(fields, (group, index) => {
                       const {
                         groupClassname,
@@ -414,8 +429,8 @@ export const BillingInfoContainer = ({
                                         selectOptions={
                                           element.name === 'country'
                                             ? countries
-                                            : element.name === 'state' 
-                                            ? states 
+                                            : element.name === 'state'
+                                            ? states
                                             : []
                                         }
                                       />

package/src/components/billing-info-container/style.css

@@ -10,6 +10,11 @@
   color: #000;
 }
 
+.billing-info-container .main-header {
+  font-size: 2rem;
+  font-weight: 600;
+}
+
 .billing-info-container__twoFields {
   display: flex;
   justify-content: space-between;
@@ -71,11 +76,9 @@ button {
   align-items: center;
 }
 
-.group-label {
-  color: #000;
-  font-size: 24px;
-  margin-bottom: 0px;
-  margin-top: 10px;
+.login-register-button:hover {
+  background-color: #505050 !important;
+  border-color: #505050 !important;
 }
 
 .login-register-block {

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

@@ -62,7 +62,7 @@ interface IUserData {
   city?: string;
   country?: string;
   phone?: string;
-  street_address?: string;
+  streetAddress?: string;
   state?: string;
   zip?: string;
   zipCode?: string;
@@ -76,7 +76,7 @@ export const setLoggedUserData = (data: IUserData) => ({
   city: data?.city || '',
   country: data?.country || '',
   phone: data?.phone || '',
-  street_address: data?.street_address || '',
+  street_address: data?.streetAddress || '',
   state: data?.state || '',
   zip: data?.zip || data?.zipCode || '',
 })

package/src/components/loginModal/style.css

@@ -42,6 +42,10 @@
   outline: none;
   background-color: #212529;
 }
+.login-action-button button:hover {
+  background-color: #505050;
+  border-color: #505050;
+}
 
 .server_auth__error {
     color: red;

package/src/components/paymentContainer/index.tsx

@@ -57,6 +57,7 @@ export const PaymentContainer = ({
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
   const [error, setError] = useState(null)
+  const [paymentIsLoading, setPaymentIsLoading] = useState(false)
 
   const showFormTitle: boolean = Boolean(formTitle)
   const showErrorText: boolean = Boolean(errorText)
@@ -95,6 +96,7 @@ export const PaymentContainer = ({
   const handlePaymentMiddleWare = async (error: any) => {
     try {
       if (error) {
+        setPaymentIsLoading(false)
         throw error
       }
       const {
@@ -103,6 +105,7 @@ export const PaymentContainer = ({
       const paymentSuccessResponse = await handlePaymentSuccess(order_hash)
       if (paymentSuccessResponse.status === 200) {
         handlePayment(paymentSuccessResponse)
+        setPaymentIsLoading(false)
       }
     } catch (e) {
       setError(_get(e, 'response.data.message'))
@@ -148,6 +151,8 @@ export const PaymentContainer = ({
                 error={error}
                 currency={orderData.currency}
                 billing_info={reviewData.billing_info}
+                isLoading={paymentIsLoading}
+                handleSetLoading={value => setPaymentIsLoading(value)}
               />
             </Elements>
           </div>

package/src/components/stripePayment/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   useStripe,
   useElements,
@@ -8,9 +8,11 @@ import {
 } from '@stripe/react-stripe-js'
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 import _identity from 'lodash/identity'
+import _get from 'lodash/get'
 
 import './style.css'
 import { getCurrencySymbolByCurrency } from '../../normalizers'
+import CircularProgress from '@mui/material/CircularProgress'
 
 const options: StripeCardNumberElementOptions = {
   style: {
@@ -38,6 +40,8 @@ export interface ICheckoutForm {
   stripeCardOptions?: StripeCardNumberElementOptions;
   stripe_client_secret: string;
   billing_info: { [key: string]: any };
+  isLoading: any;
+  handleSetLoading: (loading: any) => void;
 }
 
 interface AddressTypes {
@@ -55,6 +59,8 @@ const CheckoutForm = ({
   stripe_client_secret,
   currency,
   billing_info,
+  isLoading = false,
+  handleSetLoading = () => {}
 }: ICheckoutForm) => {
   const stripe = useStripe()
   const elements = useElements()
@@ -62,17 +68,20 @@ const CheckoutForm = ({
   const [stripeError, setStripeError] = useState<any>(null)
 
   const handleSubmit = async (event: React.SyntheticEvent) => {
+    handleSetLoading(true)
     try {
       event.preventDefault()
   
       if(!postalCode) {
         setStripeError("Please enter your zip code.")
+        handleSetLoading(false)
         return
       }
 
       if (!stripe || !elements) {
         // Stripe.js has not loaded yet. Make sure to disable
         // form submission until Stripe.js has loaded.
+        handleSetLoading(false)
         return
       }
   
@@ -94,6 +103,7 @@ const CheckoutForm = ({
   
       if (paymentMethodReq.error) {
         setStripeError(paymentMethodReq.error.message || null)
+        handleSetLoading(false)
         return
       }
 
@@ -103,6 +113,7 @@ const CheckoutForm = ({
 
       if (error) {
         setStripeError(error.message)
+        handleSetLoading(false)
         return
       }
   
@@ -115,10 +126,18 @@ const CheckoutForm = ({
 
   const onChangePostalCode = (e: any) => {
     setPostalCode(e.target.value)
-  }
+  } 
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const userData = JSON.parse(window.localStorage.getItem('user_data') || '')
+      const zipCode = _get(userData, 'zip', '')
+      zipCode && setPostalCode(zipCode)
+    }
+  }, [])
 
   return (
-    <div>
+    <div className="stripe_payment_container">
       {!!stripeError && (
         <div className="checkout_error_block">{stripeError}</div>
       )}
@@ -153,8 +172,8 @@ const CheckoutForm = ({
           </label>
         </div>
         <div className="payment_button">
-          <button disabled={!stripe || !!error} type="submit">
-            {`Pay ${getCurrencySymbolByCurrency(currency)}${total}`}
+          <button disabled={!stripe || !!error || isLoading} type="submit">
+            {isLoading ? <CircularProgress /> : `Pay ${getCurrencySymbolByCurrency(currency)}${total}`}
           </button>
         </div>
       </form>

package/src/components/ticketsContainer/index.tsx

@@ -128,6 +128,9 @@ const renderTiers = (
                 ? 'SOLD OUT'
                 : `$ ${(+tier.cost || +tier.price).toFixed(2)}`}
             </p>
+            {!isSoldOut && (
+              <p className='fees'>{tier.taxesIncluded ? '(incl. Fees)' : '(excl. Fees)'}</p>
+            )}
           </div>
           <div className="event-detail__tier-state" style={{ minWidth: 55 }}>
             {computeTierStateLabel(
@@ -303,11 +306,11 @@ export const TicketsContainer = ({
             handleTicketSelect,
             promoCodeIsApplied
           )}
-          {promoCodeIsApplied && (
+          {promoCodeIsApplied ? (
             <div className="alert-info">
               Your promo code was applied successfully.
             </div>
-          )}
+          ) : null}
           {showPromoInput && (
             <div className="promo-code-block">
               <input
@@ -315,6 +318,11 @@ export const TicketsContainer = ({
                 onChange={e => {
                   setPromoCode(e.target.value)
                 }}
+                onKeyPress={event => {
+                  if (event.key === 'Enter') {
+                    setPromoCodeUpdated(promoCode)
+                  }
+                }}
               />
               <Button
                 className="promo-apply-button"

package/src/components/ticketsContainer/style.css

@@ -14,9 +14,6 @@ body {
   font-weight: 700;
   line-height: 1.3;
   text-transform: uppercase;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
   padding-right: 20%;
   color: black;
   font-size: 0.85rem;
@@ -71,6 +68,13 @@ body {
   margin: 0;
 }
 
+.event-detail__tier-price .fees {
+  font-size: 14px;
+  font-weight: normal;
+  text-align: left;
+  margin-top: 4px;
+}
+
 .event-detail__tier-price .old-price {
   margin-bottom: 5px;
   color: #f00;
@@ -101,6 +105,12 @@ body {
   text-align: right;
   text-transform: uppercase;
 }
+
+.promo-code-block input {
+  font-size: 14px;
+  padding: 1px 8px;
+}
+
 .book-button {
   background-color: #212529;
   display: block;
@@ -119,6 +129,10 @@ body {
   line-height: 1.5;
   margin: 25px auto 10px auto;
 }
+.book-button:hover {
+  background-color: #505050;
+  border-color: #505050;
+}
 .loader-container {
   height: 100%;
   width: 100%;

package/src/types/billing-info-data.ts

@@ -29,4 +29,5 @@ export interface IBillingInfoData {
 
   // optional
   label?: string;
+  labelClassName?: string;
 }