tf-checkout-react 1.0.46 → 1.0.50

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 export interface IGroupItem {
     name: string;
-    label: string;
+    label: string | JSX.Element;
     type?: string;
     className?: string;
     required?: boolean;
@@ -19,6 +19,6 @@ export interface IFieldData {
 export interface IBillingInfoData {
     id: number | string;
     fields: IFieldData[];
-    label?: string;
+    label?: string | JSX.Element;
     labelClassName?: string;
 }

package/dist/utils/getQueryVariable.d.ts

@@ -0,0 +1 @@
+export declare const getQueryVariable: (variable: string) => string | false;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.46",
+  "version": "1.0.50",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -78,6 +78,7 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "nanoid": "^3.1.30",
     "react-bootstrap": "^2.0.2",
     "react-inlinesvg": "^2.3.0"
   }

package/src/api/index.ts

@@ -218,3 +218,5 @@ export const getConfirmationData = (orderHash: string) => publicRequest.get(`/v1
 export const getStates = (countryId: string) => publicRequest.get(`/countries/${countryId}/states/`)
 
 export const addToWaitingList = (id: number, data: any) => publicRequest.post(`/v1/event/${id}/add_to_waiting_list`, data)
+
+export const getConditions = (eventId: string) => publicRequest.get(`v1/event/${eventId}/conditions`)

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

@@ -39,22 +39,11 @@ import { CustomField } from '../common/CustomField'
 import axios from 'axios'
 import { CheckboxField } from '../common/CheckboxField'
 import { CircularProgress } from '@mui/material'
+import { nanoid } from 'nanoid'
+import { getQueryVariable } from '../../utils/getQueryVariable'
 
 // const TTFLOGO = require('./logo-ttf.png')
 
-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
-}
 
 export interface IBillingInfoPage {
   data?: IBillingInfoData[];
@@ -62,7 +51,8 @@ export interface IBillingInfoPage {
   handleSubmit?: (
     values: FormikValues,
     formikHelpers: FormikHelpers<FormikValues>,
-    res?: any
+    eventId: any,
+    res: any,
   ) => void;
 
   onRegisterSuccess?: (value: {
@@ -175,8 +165,6 @@ const LogicRunner: FC<{
   return null
 }
 
-const SectionContainer: FC = ({ children }) => <>{children}</>
-
 export const BillingInfoContainer = ({
   data = [],
   ticketHoldersFields = {
@@ -218,7 +206,7 @@ export const BillingInfoContainer = ({
   const [alreadyHasUser, setAlreadyHasUser] = useState(false)
   const [userExpired, setUserExpired] = useState(false)
   const [showModalRegister, setShowModalRegister] = useState(false)
-  const [ticketsQuantity, setTicketsQuantity] = useState(1)
+  const [ticketsQuantity, setTicketsQuantity] = useState<string[]>([])
   const [userValues, setUserValues] = useState<any>({
     firstName: '',
     lastName: '',
@@ -244,7 +232,9 @@ export const BillingInfoContainer = ({
 
   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 hideOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', false)
 
   const getQuantity = (cart: any = []) => {
     let qty: any = 0
@@ -253,6 +243,31 @@ export const BillingInfoContainer = ({
     })
     return qty
   }
+
+  //just once
+  useEffect(() => {
+    // fetch countries data
+    const fetchCountries = async () => {
+      try {
+        const res = await getCountries()
+        setCustomHeader(res)
+        setCountries(
+          _map(_get(res, 'data.data'), (item, key) => ({
+            label: item,
+            value: Number(key),
+          }))
+        )
+        onGetCountriesSuccess(res.data)
+      } catch (e) {
+        if (axios.isAxiosError(e)) {
+          onGetCountriesError(e)
+        }
+      }
+    }
+    fetchCountries()
+    fetchCart()
+  }, [])
+
   // fetch cart data
   const fetchCart = async () => {
     try {
@@ -261,7 +276,7 @@ export const BillingInfoContainer = ({
       const cartInfo = _get(res, 'data.data.attributes')
       setCartInfo(cartInfo)
       const { cart = [] } = cartInfo
-      setTicketsQuantity(getQuantity(cart))
+      setTicketsQuantity(new Array(getQuantity(cart)).fill(null).map(() => nanoid()))
       onGetCartSuccess(res.data)
     } catch (e) {
       if (axios.isAxiosError(e)) {
@@ -292,32 +307,8 @@ export const BillingInfoContainer = ({
   }
 
   useEffect(() => {
-    fetchCart()
     fetchUserData(access_token)
-
-    // fetch countries data
-    const fetchCountries = async () => {
-      try {
-        const res = await getCountries()
-        setCustomHeader(res)
-        setCountries(
-          _map(_get(res, 'data.data'), (item, key) => ({
-            label: item,
-            value: Number(key),
-          }))
-        )
-        onGetCountriesSuccess(res.data)
-      } catch (e) {
-        if (axios.isAxiosError(e)) {
-          onGetCountriesError(e)
-        }
-      }
-    }
-
-    if (!(countries && countries.length)) {
-      fetchCountries()
-    }
-  }, [access_token, countries])
+  }, [access_token])
 
   return (
     <>
@@ -350,13 +341,13 @@ export const BillingInfoContainer = ({
                 }
               }
               const checkoutBody = createCheckoutDataBody(
-                ticketsQuantity,
+                ticketsQuantity.length,
                 values,
                 { emailLogged, firstNameLogged, lastNameLogged },
                 showDOB
               )
               const res = await postOnCheckout(checkoutBody, access_token)
-              handleSubmit(values, formikHelpers as FormikHelpers<any>, res)
+              handleSubmit(values, formikHelpers as FormikHelpers<any>, eventId, res)
               return
             }
 
@@ -416,7 +407,7 @@ export const BillingInfoContainer = ({
             }
 
             const checkoutBody = createCheckoutDataBody(
-              ticketsQuantity,
+              ticketsQuantity.length,
               values,
               { emailLogged, firstNameLogged, lastNameLogged },
               showDOB
@@ -425,7 +416,7 @@ export const BillingInfoContainer = ({
               checkoutBody,
               access_token_register
             )
-            handleSubmit(values, formikHelpers as FormikHelpers<any>, res)
+            handleSubmit(values, formikHelpers as FormikHelpers<any>, eventId, res)
           } catch (e) {
             if (axios.isAxiosError(e)) {
               if (e.response?.data.error === 'invalid_token') {
@@ -477,7 +468,7 @@ export const BillingInfoContainer = ({
                 </div>
               )}
               {_map(data, item => {
-                const { id, label, labelClassName, fields } = item
+                const { label, labelClassName, fields } = item
                 if (
                   label === 'Ticket Holders' &&
                   !showTicketHolderName &&
@@ -486,7 +477,7 @@ export const BillingInfoContainer = ({
                   return null
                 }
                 return (
-                  <SectionContainer key={id}>
+                  <React.Fragment key={nanoid()}>
                     <p className={labelClassName}>{label}</p>
                     {_map(fields, group => {
                       const {
@@ -496,7 +487,7 @@ export const BillingInfoContainer = ({
                         groupLabelClassName,
                       } = group
                       return (
-                        <SectionContainer key={group.id}>
+                        <React.Fragment key={nanoid()}>
                           {!isLoggedIn && (
                             <div className={groupLabelClassName}>
                               {groupLabel}
@@ -520,103 +511,109 @@ export const BillingInfoContainer = ({
                                 if (el.name === 'holderAge' && !showDOB) {
                                   return false
                                 }
+                                if (el.name === 'brand_opt_in' && hideOptIn) {
+                                  return false
+                                }
                                 return true
                               }),
                               element =>
                                 ['password', 'confirmPassword'].includes(
                                   element.name
                                 ) && isLoggedIn ? null : (
-                                  <div
-                                    className={element.className}
-                                    key={element.name}
-                                  >
-                                    {element.component ? (
-                                      element.component
-                                    ) : (
-                                      <Field
-                                        name={element.name}
-                                        label={element.label}
-                                        type={element.type}
-                                        validate={combineValidators(
-                                          element.required
-                                            ? requiredValidator
-                                            : () => {},
-                                          element.onValidate
-                                            ? element.onValidate
-                                            : () => {}
-                                        )}
-                                        component={
-                                          element.type === 'checkbox'
-                                            ? CheckboxField
-                                            : CustomField
-                                        }
-                                        selectOptions={
-                                          element.name === 'country'
-                                            ? countries
-                                            : element.name === 'state'
-                                            ? states
-                                            : []
-                                        }
-                                      />
-                                    )}
-                                  </div>
+                                  <React.Fragment key={nanoid()}>
+                                    {element.name === 'email' 
+                                    ? <div className="email-checking">IMPORTANT: Please double check that your email address is correct. It's where we send your confirmation and e-tickets to!</div> 
+                                    : null}
+                                    <div className={element.className}>
+                                      {element.component ? (
+                                        element.component
+                                      ) : (
+                                        <Field
+                                          name={element.name}
+                                          label={element.label}
+                                          type={element.type}
+                                          validate={combineValidators(
+                                            element.required
+                                              ? requiredValidator
+                                              : () => {},
+                                            element.onValidate
+                                              ? element.onValidate
+                                              : () => {}
+                                          )}
+                                          component={
+                                            element.type === 'checkbox'
+                                              ? CheckboxField
+                                              : CustomField
+                                          }
+                                          selectOptions={
+                                            element.name === 'country'
+                                              ? countries
+                                              : element.name === 'state'
+                                              ? states
+                                              : []
+                                          }
+                                          theme={theme}
+                                        />
+                                      )}
+                                    </div>
+                                  </React.Fragment>
                                 )
                             )}
                           </div>
-                        </SectionContainer>
+                        </React.Fragment>
                       )
                     })}
-                  </SectionContainer>
+                  </React.Fragment>
                 )
               })}
-
               {showTicketHolderName && (
-                <div>
-                  <p>{ticketHoldersFields.label}</p>
-                  {_map(new Array(ticketsQuantity), (_item, index) => (
-                    <div key={index}>
-                      <h5>Ticket {index + 1}</h5>
-                      {_map(ticketHoldersFields.fields, group => {
-                        const { groupClassname, groupItems } = group
-                        return (
-                          <div key={group.id}>
-                            <div className={groupClassname}>
-                              {_map(groupItems, element => (
-                                <div
-                                  className={element.className}
-                                  key={`${element.name}-${index}`}
-                                >
-                                  <Field
-                                    name={`${element.name}-${index}`}
-                                    key={`${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>
-                              ))}
+                <React.Fragment key={nanoid()}>
+                  <div className="ticket-holders-fields">
+                    <p>{ticketHoldersFields.label}</p>
+                    {_map(ticketsQuantity, (_item, index) => (
+                      <div key={nanoid()}>
+                        <h5>Ticket {index + 1}</h5>
+                        {_map(ticketHoldersFields.fields, group => {
+                          const { groupClassname, groupItems } = group
+                          return (
+                            <div key={nanoid()}>
+                              <div className={groupClassname}>
+                                {_map(groupItems, element => (
+                                  <div
+                                    className={element.className}
+                                    key={nanoid()}
+                                  >
+                                    <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>
+                          )
+                        })}
+                      </div>
+                    ))}
+                  </div>
+                </React.Fragment>
               )}
-              <div className="button-container">
+              <div className="button-container" key={nanoid()}>
                 <LoadingButton
                   type="submit"
                   variant="contained"

package/src/components/common/CheckboxField.tsx

@@ -6,7 +6,7 @@ import { FieldInputProps } from 'formik'
 
 export interface ICheckboxField {
   label: string | number | JSX.Element;
-  field: FieldInputProps<any>;
+  field?: FieldInputProps<any>;
 }
 
 interface IOtherProps {
@@ -16,9 +16,14 @@ interface IOtherProps {
 export const CheckboxField = ({
   label,
   field,
+  selectOptions,
+  theme,
   ...rest
 }: ICheckboxField & IOtherProps) => (
   <FormGroup>
-    <FormControlLabel control={<Checkbox {...field} {...rest} />} label={label} />
+    <FormControlLabel
+      control={<Checkbox {...field} {...rest} />}
+      label={label}
+    />
   </FormGroup>
 )

package/src/components/common/CustomField.tsx

@@ -17,6 +17,7 @@ export interface ICustomField {
 
   field: FieldInputProps<any>;
   form: FormikProps<any>;
+  theme: 'dark' | 'light';
 
   // optional
   type?: string;
@@ -29,9 +30,9 @@ interface IOtherProps {
 
 const useStyles = makeStyles({
   input: {
-    "&::placeholder": {
-      color: "gray",
-    }
+    '&::placeholder': {
+      color: 'gray',
+    },
   },
 })
 
@@ -41,6 +42,7 @@ export const CustomField = ({
   field,
   selectOptions = [] as ISelectOption[],
   form: { touched, errors },
+  theme,
 }: ICustomField & IOtherProps) => {
   const isSelectField = type === 'select'
   const isShrink = Boolean(field.value) || type === 'date' || type === 'select'
@@ -60,15 +62,23 @@ export const CustomField = ({
       InputLabelProps={{ shrink: isShrink }}
       InputProps={{
         classes: {
-          input: classes.input
-        }
+          input: classes.input,
+        },
+      }}
+      SelectProps={{
+        native: true,
+        className: theme,
+        MenuProps: { className: theme },
       }}
-      SelectProps={{ native: true }}
       {...field}
     >
       {isSelectField
         ? _map(selectOptions, option => (
-          <option key={option.value} value={option.value} disabled={option.disabled}>
+          <option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+          >
             {option.label}
           </option>
         ))

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/paymentContainer/style.css

@@ -45,3 +45,11 @@
   padding-top: 20px;
   text-align: center;
 }
+
+.conditions-block {
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  padding: 19px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}