tf-checkout-react 1.0.46 → 1.0.50

package/src/components/stripePayment/index.tsx

@@ -9,6 +9,7 @@ import {
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 import _identity from 'lodash/identity'
 import _get from 'lodash/get'
+import { CheckboxField } from '../common/CheckboxField'
 
 import './style.css'
 import { getCurrencySymbolByCurrency } from '../../normalizers'
@@ -17,6 +18,7 @@ import CircularProgress from '@mui/material/CircularProgress'
 const options: StripeCardNumberElementOptions = {
   style: {
     base: {
+      backgroundColor:'#232323',
       fontSize: '18px',
       color: '#ffffff',
       letterSpacing: '1px',
@@ -42,13 +44,14 @@ export interface ICheckoutForm {
   billing_info: { [key: string]: any };
   isLoading: any;
   handleSetLoading: (loading: any) => void;
+  conditions: any;
 }
 
 interface AddressTypes {
-  city: string,
-  line1: string,
-  state: string,
-  postal_code: string,
+  city: string;
+  line1: string;
+  state: string;
+  postal_code: string;
 }
 
 const CheckoutForm = ({
@@ -60,7 +63,8 @@ const CheckoutForm = ({
   currency,
   billing_info,
   isLoading = false,
-  handleSetLoading = () => {}
+  handleSetLoading = () => {},
+  conditions = [],
 }: ICheckoutForm) => {
   const stripe = useStripe()
   const elements = useElements()
@@ -71,9 +75,9 @@ const CheckoutForm = ({
     handleSetLoading(true)
     try {
       event.preventDefault()
-  
-      if(!postalCode) {
-        setStripeError("Please enter your zip code.")
+
+      if (!postalCode) {
+        setStripeError('Please enter your zip code.')
         handleSetLoading(false)
         return
       }
@@ -84,7 +88,7 @@ const CheckoutForm = ({
         handleSetLoading(false)
         return
       }
-  
+
       const card = elements.getElement(CardNumberElement)
       const address: AddressTypes = {
         city: billing_info.city,
@@ -100,7 +104,7 @@ const CheckoutForm = ({
           address,
         },
       })
-  
+
       if (paymentMethodReq.error) {
         setStripeError(paymentMethodReq.error.message || null)
         handleSetLoading(false)
@@ -108,7 +112,7 @@ const CheckoutForm = ({
       }
 
       const { error } = await stripe.confirmCardPayment(stripe_client_secret, {
-        payment_method: paymentMethodReq.paymentMethod.id
+        payment_method: paymentMethodReq.paymentMethod.id,
       })
 
       if (error) {
@@ -116,26 +120,29 @@ const CheckoutForm = ({
         handleSetLoading(false)
         return
       }
-  
-      onSubmit(null)
 
-    } catch(e) {
+      onSubmit(null)
+    } catch (e) {
       onSubmit(e)
     }
   }
 
   const onChangePostalCode = (e: any) => {
     setPostalCode(e.target.value)
-  } 
+  }
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      const userData = JSON.parse(window.localStorage.getItem('user_data') || '')
+      const userData = JSON.parse(
+        window.localStorage.getItem('user_data') || ''
+      )
       const zipCode = _get(userData, 'zip', '')
       zipCode && setPostalCode(zipCode)
     }
   }, [])
 
+  const buttonIsDiabled = !stripe || !!error || isLoading
+
   return (
     <div className="stripe_payment_container">
       {!!stripeError && (
@@ -171,9 +178,31 @@ const CheckoutForm = ({
             />
           </label>
         </div>
-        <div className="payment_button">
-          <button disabled={!stripe || !!error || isLoading} type="submit">
-            {isLoading ? <CircularProgress /> : `Pay ${getCurrencySymbolByCurrency(currency)}${total}`}
+        {conditions?.map((checkbox: any) => (
+          <div
+            className={'billing-info-container__singleField'}
+            key={checkbox.id}
+          >
+            <div className="conditions-block">
+              <CheckboxField
+                name={checkbox.id}
+                label={checkbox.text}
+                required={true}
+              />
+            </div>
+          </div>
+        ))}
+        <div
+          className={`payment_button ${
+            buttonIsDiabled ? 'disabled-payment-button' : ''
+          }`}
+        >
+          <button disabled={buttonIsDiabled} type="submit">
+            {isLoading ? (
+              <CircularProgress />
+            ) : (
+              `Pay ${getCurrencySymbolByCurrency(currency)}${total}`
+            )}
           </button>
         </div>
       </form>

package/src/components/stripePayment/style.css

@@ -30,6 +30,12 @@
   opacity: 0.7;
 }
 
+.disabled-payment-button button{
+  user-select: none;
+  pointer-events:none;
+  opacity: 0.3;
+}
+
 .checkout_error_block {
   color: #e53935;
   padding: 15px 0;

package/src/components/ticketsContainer/index.tsx

@@ -27,6 +27,7 @@ interface CartSuccess {
   skip_billing_page: boolean;
   names_required: boolean;
   age_required: boolean;
+  event_id: string;
 }
 
 export interface IGetTickets {
@@ -158,6 +159,7 @@ export const TicketsContainer = ({
           names_required:
             result?.data?.data?.attributes?.names_required ?? false,
           age_required: result?.data?.data?.attributes?.age_required ?? false,
+          event_id: String(eventId)
         })
       }
     } catch (e) {

package/src/components/waitingList/index.tsx

@@ -41,6 +41,8 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
     value: d.id,
   }))
 
+  const showTicketsField = Boolean(ticketTypesList.length)
+
   const handleSubmit = async (values: WaitingListFields) => {
     try {
       setLoading(true)
@@ -83,30 +85,38 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
             onSubmit={handleSubmit}
           >
             <Form>
-              <div className="field-item">
-                <Field
-                  name="ticketTypeId"
-                  label="Ticket types"
-                  type="select"
-                  component={CustomField}
-                  selectOptions={[
-                    { label: 'Type of Ticket', value: '', disabled: true },
-                    ...ticketTypesList,
-                  ]}
-                />
-              </div>
-              <div className="field-item">
-                <Field
-                  name="quantity"
-                  label="Quantity"
-                  type="select"
-                  component={CustomField}
-                  selectOptions={[
-                    { label: 'Quantity Requested', value: '', disabled: true },
-                    ...generateQuantity(10),
-                  ]}
-                />
-              </div>
+              {showTicketsField && (
+                <>
+                  <div className="field-item">
+                    <Field
+                      name="ticketTypeId"
+                      label="Ticket types"
+                      type="select"
+                      component={CustomField}
+                      selectOptions={[
+                        { label: 'Type of Ticket', value: '', disabled: true },
+                        ...ticketTypesList,
+                      ]}
+                    />
+                  </div>
+                  <div className="field-item">
+                    <Field
+                      name="quantity"
+                      label="Quantity"
+                      type="select"
+                      component={CustomField}
+                      selectOptions={[
+                        {
+                          label: 'Quantity Requested',
+                          value: '',
+                          disabled: true,
+                        },
+                        ...generateQuantity(10),
+                      ]}
+                    />
+                  </div>
+                </>
+              )}
               <div className="field-item">
                 <Field
                   name="firstName"

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 
 export interface IGroupItem {
   name: string;
-  label: string;
+  label: string | JSX.Element;
 
   // optional
   type?: string;
@@ -29,6 +29,6 @@ export interface IBillingInfoData {
   fields: IFieldData[];
 
   // optional
-  label?: string;
+  label?: string | JSX.Element;
   labelClassName?: string;
 }

package/src/utils/getQueryVariable.ts

@@ -0,0 +1,13 @@
+export const getQueryVariable = (variable: string) => {
+  if (typeof window !== 'undefined') {
+    const query = window.location.search.substring(1)
+    const vars = query.split('&')
+    for (let i = 0; i < vars.length; i++) {
+      const pair = vars[i].split('=')
+      if (pair[0] === variable) {
+        return pair[1]
+      }
+    }
+  }
+  return false
+}