tf-checkout-react 1.0.47 → 1.0.51

package/src/components/common/SelectField.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import Select from '@mui/material/Select'
+import _map from 'lodash/map'
+import _get from 'lodash/get'
+
+import { FieldInputProps, FormikProps } from 'formik'
+import { makeStyles } from '@mui/styles'
+import { FormControl, InputLabel, FormHelperText } from '@mui/material'
+
+export interface ISelectOption {
+  label: string | number;
+  value?: string | number;
+  [key: string]: any;
+}
+
+export interface ISelectField {
+  label: string;
+
+  field: FieldInputProps<any>;
+  form: FormikProps<any>;
+  theme: 'dark' | 'light';
+
+  // optional
+  type?: string;
+  selectOptions?: ISelectOption[];
+}
+
+interface IOtherProps {
+  [key: string]: any;
+}
+
+const useStyles = makeStyles({
+  input: {
+    '&::placeholder': {
+      color: 'gray',
+    },
+  },
+})
+
+export const SelectField = ({
+  label,
+  type = 'text',
+  field,
+  selectOptions = [] as ISelectOption[],
+  form: { touched, errors },
+  theme,
+}: ISelectField & IOtherProps) => {
+  const isTouched = Boolean(_get(touched, field.name))
+  const error = _get(errors, field.name)
+  const classes = useStyles()
+
+  return (
+    <FormControl fullWidth={true}>
+      <InputLabel htmlFor={field.name} error={!!error && isTouched}>
+        {label}
+      </InputLabel>
+      <Select
+        id={field.name}
+        label={label}
+        type={type}
+        fullWidth={true}
+        error={!!error && isTouched}
+        inputProps={{
+          id: field.name,
+          classes: {
+            input: classes.input,
+          },
+        }}
+        native={true}
+        className={theme}
+        MenuProps={{ className: theme }}
+        {...field}
+      >
+        {_map(selectOptions, option => (
+          <option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+          >
+            {option.label}
+          </option>
+        ))}
+      </Select>
+      {isTouched && error ? (
+        <FormHelperText error={!!error && isTouched}>{error}</FormHelperText>
+      ) : null}
+    </FormControl>
+  )
+}

package/src/components/paymentContainer/index.tsx

@@ -8,12 +8,14 @@ import _map from 'lodash/map'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import { ENV } from '../../env'
+import { nanoid } from 'nanoid'
+import { getQueryVariable } from '../../utils/getQueryVariable'
 
 import './style.css'
 import StripePayment from '../stripePayment'
 import { IOrderData, IPaymentField } from '../../types'
 
-import { getPaymentData, handlePaymentSuccess } from '../../api'
+import { getPaymentData, handlePaymentSuccess, getConditions } from '../../api'
 
 const testId = ENV.STRIPE_PUBLISHABLE_KEY || 'pk_test_3Ov1P1oP33A1cxaSjxWE0VjT'
 const stripePromise = loadStripe(
@@ -47,7 +49,7 @@ const initialReviewValues = {
   payment_method: {
     stripe_client_secret: '',
   },
-  billing_info: {}
+  billing_info: {},
 }
 
 export const PaymentContainer = ({
@@ -59,16 +61,21 @@ export const PaymentContainer = ({
   onErrorClose = _identity,
   onGetPaymentDataSuccess = () => {},
   onGetPaymentDataError = () => {},
-  onPaymentError = () => {}
+  onPaymentError = () => {},
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
   const [error, setError] = useState(null)
   const [paymentIsLoading, setPaymentIsLoading] = useState(false)
+  const [conditions, setConditions] = useState<{ id: string; text: string }[]>(
+    []
+  )
 
   const showFormTitle: boolean = Boolean(formTitle)
   const showErrorText: boolean = Boolean(errorText)
 
+  const eventId = getQueryVariable('event_id')
+
   useEffect(() => {
     const { hash } = checkoutData;
     (async () => {
@@ -99,6 +106,26 @@ export const PaymentContainer = ({
     })()
   }, [checkoutData])
 
+  //just once
+  useEffect(() => {
+    // fetch conditions data
+    const fetchConditions = async () => {
+      if (eventId) {
+        const res = await getConditions(eventId)
+        const conditionsInfo = _get(res, 'data.data.attributes')
+        setConditions(
+          conditionsInfo
+            ? conditionsInfo.map((item: string) => ({
+              id: nanoid(),
+              text: item,
+            }))
+            : []
+        )
+      }
+    }
+    fetchConditions()
+  }, [])
+
   // 1. get payment data   ---> v1/order/${hash}/review/ done
   // 2. handle payment     ---> v1/order/${orderHash}/pay/
   // 3. redirect to confirmation page
@@ -163,6 +190,7 @@ export const PaymentContainer = ({
                 billing_info={reviewData.billing_info}
                 isLoading={paymentIsLoading}
                 handleSetLoading={value => setPaymentIsLoading(value)}
+                conditions={conditions}
               />
             </Elements>
           </div>

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

@@ -2,6 +2,10 @@
   background: #232323;
   border-radius: 8px;
   padding: 15px;
+  width: 50%;
+  margin: 0 auto;
+  min-width: 325px;
+  margin-bottom: 20px;
 }
 .card_form_inner .card_label_text {
   color: #fff;
@@ -30,6 +34,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/waitingList/index.tsx

@@ -10,6 +10,7 @@ import {
   emailValidator,
 } from '../../validators'
 import { ENV } from '../../env'
+import { ErrorFocus } from '../../utils/formikErrorFocus'
 
 import './style.css'
 
@@ -41,6 +42,8 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
     value: d.id,
   }))
 
+  const showTicketsField = Boolean(ticketTypesList.length)
+
   const handleSubmit = async (values: WaitingListFields) => {
     try {
       setLoading(true)
@@ -56,7 +59,6 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
         setShowSuccessMessage(true)
       }
     } catch (error) {
-      console.log(error)
     } finally {
       setLoading(false)
     }
@@ -83,30 +85,39 @@ 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>
+              <ErrorFocus />
+              {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

@@ -10,6 +10,7 @@ export interface IGroupItem {
   required?: boolean;
   component?: ReactNode | JSX.Element | HTMLElement;
   onValidate?: (value: any) => void;
+  uniqueId?: string;
 
   // aditional props
   [key: string]: any;
@@ -23,6 +24,7 @@ export interface IFieldData {
   groupLabel?: string | JSX.Element | HTMLElement;
   groupLabelClassName?: string;
   id: number;
+  uniqueId?: string;
 }
 export interface IBillingInfoData {
   id: number | string;
@@ -31,4 +33,5 @@ export interface IBillingInfoData {
   // optional
   label?: string | JSX.Element;
   labelClassName?: string;
+  uniqueId?: string;
 }

package/src/utils/formikErrorFocus.ts

@@ -0,0 +1,24 @@
+import { connect, FormikContextType } from 'formik'
+import { Component } from 'react'
+
+interface IProps {
+  formik: FormikContextType<any>;
+}
+
+class ErrorFocusInternal extends Component<IProps> {
+  public componentDidUpdate(prevProps: IProps) {
+    const { isSubmitting, isValidating, errors } = prevProps.formik
+    const keys = Object.keys(errors)
+    if (keys.length > 0 && isSubmitting && !isValidating) {
+      const selector = `[name="${keys[0]}"]`
+      const errorElement = document.querySelector(selector) as HTMLElement
+      if (errorElement) {
+        errorElement.focus()
+      }
+    }
+  }
+
+  public render = () => null;
+}
+
+export const ErrorFocus = connect<{}>(ErrorFocusInternal)

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
+}