tf-checkout-react 1.0.50 → 1.0.54

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

@@ -7,6 +7,7 @@ export interface IGroupItem {
     required?: boolean;
     component?: ReactNode | JSX.Element | HTMLElement;
     onValidate?: (value: any) => void;
+    uniqueId?: string;
     [key: string]: any;
 }
 export interface IFieldData {
@@ -15,10 +16,12 @@ export interface IFieldData {
     groupLabel?: string | JSX.Element | HTMLElement;
     groupLabelClassName?: string;
     id: number;
+    uniqueId?: string;
 }
 export interface IBillingInfoData {
     id: number | string;
     fields: IFieldData[];
     label?: string | JSX.Element;
     labelClassName?: string;
+    uniqueId?: string;
 }

package/dist/utils/formikErrorFocus.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ErrorFocus: import("react").ComponentType<{}>;

package/package.json

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

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

@@ -30,9 +30,11 @@ import {
 import { LoginModal } from '../loginModal'
 import { RegisterModal } from '../registerModal'
 import {
+  assingUniqueIds,
   createCheckoutDataBody,
   createRegisterFormData,
   getInitialValues,
+  getValidateFunctions,
   setLoggedUserData,
 } from './utils'
 import { CustomField } from '../common/CustomField'
@@ -41,10 +43,11 @@ import { CheckboxField } from '../common/CheckboxField'
 import { CircularProgress } from '@mui/material'
 import { nanoid } from 'nanoid'
 import { getQueryVariable } from '../../utils/getQueryVariable'
+import { SelectField } from '../common/SelectField'
+import { ErrorFocus } from '../../utils/formikErrorFocus'
 
 // const TTFLOGO = require('./logo-ttf.png')
 
-
 export interface IBillingInfoPage {
   data?: IBillingInfoData[];
   ticketHoldersFields?: IBillingInfoData;
@@ -52,7 +55,7 @@ export interface IBillingInfoPage {
     values: FormikValues,
     formikHelpers: FormikHelpers<FormikValues>,
     eventId: any,
-    res: any,
+    res: any
   ) => void;
 
   onRegisterSuccess?: (value: {
@@ -143,7 +146,7 @@ const LogicRunner: FC<{
               lastName: parsedData?.last_name,
               email: parsedData?.email || '',
               phone: parsedData?.phone || '',
-              confirmEmail: '',
+              confirmEmail: parsedData?.email || '',
               state: parsedData?.state || '',
               street_address: parsedData?.street_address || '',
               country: parsedData?.country || 1,
@@ -199,6 +202,10 @@ export const BillingInfoContainer = ({
       ? window.localStorage.getItem('access_token') || ''
       : ''
 
+  const [dataWithUniqueIds, setDataWithUniqueIds] = useState<
+  IBillingInfoData[]
+  >(data)
+
   const [cartInfoData, setCartInfo] = useState<any>({})
   const [countries, setCountries] = useState<any>([])
   const [states, setStates] = useState<any>([])
@@ -234,7 +241,11 @@ export const BillingInfoContainer = ({
   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 hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
+
+  if (!_get(dataWithUniqueIds, '[0].uniqueId')) {
+    setDataWithUniqueIds(assingUniqueIds(data))
+  }
 
   const getQuantity = (cart: any = []) => {
     let qty: any = 0
@@ -276,7 +287,9 @@ export const BillingInfoContainer = ({
       const cartInfo = _get(res, 'data.data.attributes')
       setCartInfo(cartInfo)
       const { cart = [] } = cartInfo
-      setTicketsQuantity(new Array(getQuantity(cart)).fill(null).map(() => nanoid()))
+      setTicketsQuantity(
+        new Array(getQuantity(cart)).fill(null).map(() => nanoid())
+      )
       onGetCartSuccess(res.data)
     } catch (e) {
       if (axios.isAxiosError(e)) {
@@ -314,7 +327,7 @@ export const BillingInfoContainer = ({
     <>
       <Formik
         initialValues={getInitialValues(
-          data,
+          dataWithUniqueIds,
           {
             ...initialValues,
             email: emailLogged,
@@ -347,11 +360,22 @@ export const BillingInfoContainer = ({
                 showDOB
               )
               const res = await postOnCheckout(checkoutBody, access_token)
-              handleSubmit(values, formikHelpers as FormikHelpers<any>, eventId, res)
+              handleSubmit(
+                values,
+                formikHelpers as FormikHelpers<any>,
+                eventId,
+                res
+              )
               return
             }
 
-            const bodyFormData = createRegisterFormData(values)
+            const checkoutBodyForRegistration = createCheckoutDataBody(
+              ticketsQuantity.length,
+              values,
+              { emailLogged, firstNameLogged, lastNameLogged },
+              showDOB
+            )
+            const bodyFormData = createRegisterFormData(values, checkoutBodyForRegistration)
 
             let access_token_register = null
             try {
@@ -416,7 +440,12 @@ export const BillingInfoContainer = ({
               checkoutBody,
               access_token_register
             )
-            handleSubmit(values, formikHelpers as FormikHelpers<any>, eventId, res)
+            handleSubmit(
+              values,
+              formikHelpers as FormikHelpers<any>,
+              eventId,
+              res
+            )
           } catch (e) {
             if (axios.isAxiosError(e)) {
               if (e.response?.data.error === 'invalid_token') {
@@ -434,6 +463,7 @@ export const BillingInfoContainer = ({
       >
         {(props: FormikProps<any>) => (
           <Form onSubmit={props.handleSubmit}>
+            <ErrorFocus />
             <LogicRunner
               values={props.values}
               setStates={setStates}
@@ -467,7 +497,7 @@ export const BillingInfoContainer = ({
                   </div>
                 </div>
               )}
-              {_map(data, item => {
+              {_map(dataWithUniqueIds, item => {
                 const { label, labelClassName, fields } = item
                 if (
                   label === 'Ticket Holders' &&
@@ -477,7 +507,7 @@ export const BillingInfoContainer = ({
                   return null
                 }
                 return (
-                  <React.Fragment key={nanoid()}>
+                  <React.Fragment key={item.uniqueId}>
                     <p className={labelClassName}>{label}</p>
                     {_map(fields, group => {
                       const {
@@ -487,7 +517,7 @@ export const BillingInfoContainer = ({
                         groupLabelClassName,
                       } = group
                       return (
-                        <React.Fragment key={nanoid()}>
+                        <React.Fragment key={group.uniqueId}>
                           {!isLoggedIn && (
                             <div className={groupLabelClassName}>
                               {groupLabel}
@@ -511,7 +541,7 @@ export const BillingInfoContainer = ({
                                 if (el.name === 'holderAge' && !showDOB) {
                                   return false
                                 }
-                                if (el.name === 'brand_opt_in' && hideOptIn) {
+                                if (el.name === 'ttf_opt_in' && hideTtfOptIn) {
                                   return false
                                 }
                                 return true
@@ -520,10 +550,14 @@ export const BillingInfoContainer = ({
                                 ['password', 'confirmPassword'].includes(
                                   element.name
                                 ) && isLoggedIn ? null : (
-                                  <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}
+                                  <React.Fragment key={element.uniqueId}>
+                                    {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
@@ -532,17 +566,15 @@ export const BillingInfoContainer = ({
                                           name={element.name}
                                           label={element.label}
                                           type={element.type}
-                                          validate={combineValidators(
-                                            element.required
-                                              ? requiredValidator
-                                              : () => {},
-                                            element.onValidate
-                                              ? element.onValidate
-                                              : () => {}
+                                          validate={getValidateFunctions(
+                                            element,
+                                            states
                                           )}
                                           component={
                                             element.type === 'checkbox'
                                               ? CheckboxField
+                                              : element.type === 'select'
+                                              ? SelectField
                                               : CustomField
                                           }
                                           selectOptions={
@@ -567,21 +599,21 @@ export const BillingInfoContainer = ({
                 )
               })}
               {showTicketHolderName && (
-                <React.Fragment key={nanoid()}>
+                <React.Fragment>
                   <div className="ticket-holders-fields">
                     <p>{ticketHoldersFields.label}</p>
                     {_map(ticketsQuantity, (_item, index) => (
-                      <div key={nanoid()}>
+                      <div key={_item}>
                         <h5>Ticket {index + 1}</h5>
                         {_map(ticketHoldersFields.fields, group => {
                           const { groupClassname, groupItems } = group
                           return (
-                            <div key={nanoid()}>
+                            <div key={group.uniqueId}>
                               <div className={groupClassname}>
                                 {_map(groupItems, element => (
                                   <div
                                     className={element.className}
-                                    key={nanoid()}
+                                    key={element.uniqueId}
                                   >
                                     <Field
                                       name={`${element.name}-${index}`}
@@ -613,7 +645,7 @@ export const BillingInfoContainer = ({
                   </div>
                 </React.Fragment>
               )}
-              <div className="button-container" key={nanoid()}>
+              <div className="button-container">
                 <LoadingButton
                   type="submit"
                   variant="contained"

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

@@ -99,4 +99,8 @@ button {
   .billing-info-container .main-header {
     font-size: 1.5rem;
   }
+}
+
+.email-checking {
+  margin-bottom: 15px;
 }

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

@@ -1,8 +1,13 @@
 import _map from 'lodash/map'
+import _get from 'lodash/get'
 import _forEach from 'lodash/forEach'
 import _flatMapDeep from 'lodash/flatMapDeep'
+import _isArray from 'lodash/isArray'
 
 import { ENV } from '../../env'
+import { IGroupItem } from '../../types'
+import { combineValidators, requiredValidator } from '../../validators'
+import { nanoid } from 'nanoid'
 
 export interface ILoggedInValues {
   emailLogged?: string;
@@ -31,7 +36,10 @@ export const getInitialValues = (
   return initialValues
 }
 
-export const createRegisterFormData = (values: IValues = {}): FormData => {
+export const createRegisterFormData = (
+  values: IValues = {},
+  checkoutBody: { attributes: { [key: string]: any } }
+): FormData => {
   const bodyFormData = new FormData()
   bodyFormData.append('first_name', values.firstName)
   bodyFormData.append('last_name', values.lastName)
@@ -46,6 +54,11 @@ export const createRegisterFormData = (values: IValues = {}): FormData => {
     'client_secret',
     ENV.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
   )
+
+  _forEach(checkoutBody.attributes, (item: any, key: string) => {
+    bodyFormData.append(key, item)
+  })
+
   return bodyFormData
 }
 
@@ -81,6 +94,7 @@ export const setLoggedUserData = (data: IUserData) => ({
   first_name: data.firstName,
   last_name: data.lastName,
   email: data.email,
+  confirmEmail: data.email,
   city: data?.city || '',
   country: data?.country || '',
   phone: data?.phone || '',
@@ -150,3 +164,41 @@ export const createCheckoutDataBody = (
   }
   return body
 }
+
+export const getValidateFunctions = (
+  element: IGroupItem,
+  states: Array<{ [key: string]: any }>
+) => {
+  const validationFunctions: any[] = []
+
+  if (element.required) {
+    if (
+      element.name !== 'state' ||
+      (element.name === 'state' && states.length)
+    ) {
+      validationFunctions.push(requiredValidator)
+    }
+  }
+
+  if (element.onValidate) {
+    validationFunctions.push(element.onValidate)
+  }
+
+  return combineValidators(...validationFunctions)
+}
+
+export const assingUniqueIds = (data: any): any => {
+  if (_get(data[0], 'uniqueId')) {
+    return data
+  }
+
+  return _map(data, (item: any) => {
+    _forEach(item, (itemValue: string, key) => {
+      if (_isArray(itemValue)) {
+        item[key] = assingUniqueIds(itemValue)
+      }
+    })
+
+    return { ...item, uniqueId: nanoid() }
+  })
+}

package/src/components/common/CustomField.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import TextField from '@mui/material/TextField'
 import _map from 'lodash/map'
 import _get from 'lodash/get'
+import _includes from 'lodash/includes'
 
 import { FieldInputProps, FormikProps } from 'formik'
 import { makeStyles } from '@mui/styles'
@@ -41,13 +42,14 @@ export const CustomField = ({
   type = 'text',
   field,
   selectOptions = [] as ISelectOption[],
-  form: { touched, errors },
+  form: { touched, errors, submitCount },
   theme,
 }: ICustomField & IOtherProps) => {
   const isSelectField = type === 'select'
-  const isShrink = Boolean(field.value) || type === 'date' || type === 'select'
-  const isTouched = Boolean(_get(touched, field.name))
   const error = _get(errors, field.name)
+  const isTouched =
+    Boolean(_get(touched, field.name)) ||
+    (_includes(field.name, 'holder') && !!error && !!submitCount)
   const classes = useStyles()
 
   return (
@@ -59,7 +61,6 @@ export const CustomField = ({
       fullWidth={true}
       error={!!error && isTouched}
       helperText={isTouched && error}
-      InputLabelProps={{ shrink: isShrink }}
       InputProps={{
         classes: {
           input: classes.input,

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} shrink={true}>
+        {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

@@ -118,6 +118,7 @@ export const PaymentContainer = ({
             ? conditionsInfo.map((item: string) => ({
               id: nanoid(),
               text: item,
+              checked: false
             }))
             : []
         )

package/src/components/paymentContainer/style.css

@@ -45,11 +45,3 @@
   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);
-}

package/src/components/stripePayment/index.tsx

@@ -37,7 +37,6 @@ export interface ICheckoutForm {
   total: string;
   currency: string;
   onSubmit: (error: any) => Promise<any>;
-
   error?: string | null;
   stripeCardOptions?: StripeCardNumberElementOptions;
   stripe_client_secret: string;
@@ -70,6 +69,8 @@ const CheckoutForm = ({
   const elements = useElements()
   const [postalCode, setPostalCode] = useState<any>('')
   const [stripeError, setStripeError] = useState<any>(null)
+  const [checkboxes, setCheckboxes] = useState<any>([]) 
+  const [allowSubmit, setAllowSubmit] = useState(false)
 
   const handleSubmit = async (event: React.SyntheticEvent) => {
     handleSetLoading(true)
@@ -127,6 +128,18 @@ const CheckoutForm = ({
     }
   }
 
+  const handleCheckboxes=(e:any) => {
+    const checkbox = e.target
+    const updatedCheckedState = checkboxes.map((item:any) =>{
+      const value = item.id === checkbox.name ? !item.checked : item.checked
+      return {
+        ...item,
+        checked: value
+      }
+    })
+    setCheckboxes(updatedCheckedState)
+  }
+
   const onChangePostalCode = (e: any) => {
     setPostalCode(e.target.value)
   }
@@ -141,6 +154,19 @@ const CheckoutForm = ({
     }
   }, [])
 
+  useEffect(() => {
+    if(conditions.length){
+      setCheckboxes(conditions)
+    }
+  }, [conditions])
+
+  useEffect(() => {
+    if(checkboxes.length){
+      const allChecked = checkboxes.every((item:any)=>item?.checked === true)
+      setAllowSubmit(allChecked)
+    }
+  }, [checkboxes])
+
   const buttonIsDiabled = !stripe || !!error || isLoading
 
   return (
@@ -178,7 +204,7 @@ const CheckoutForm = ({
             />
           </label>
         </div>
-        {conditions?.map((checkbox: any) => (
+        {checkboxes?.map((checkbox: any) => (
           <div
             className={'billing-info-container__singleField'}
             key={checkbox.id}
@@ -188,13 +214,15 @@ const CheckoutForm = ({
                 name={checkbox.id}
                 label={checkbox.text}
                 required={true}
+                onChange={handleCheckboxes}
+                checked={checkbox.checked}
               />
             </div>
           </div>
         ))}
         <div
           className={`payment_button ${
-            buttonIsDiabled ? 'disabled-payment-button' : ''
+            buttonIsDiabled || !allowSubmit ? 'disabled-payment-button' : ''
           }`}
         >
           <button disabled={buttonIsDiabled} type="submit">

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;

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'
 
@@ -58,7 +59,6 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
         setShowSuccessMessage(true)
       }
     } catch (error) {
-      console.log(error)
     } finally {
       setLoading(false)
     }
@@ -85,6 +85,7 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
             onSubmit={handleSubmit}
           >
             <Form>
+              <ErrorFocus />
               {showTicketsField && (
                 <>
                   <div className="field-item">

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)