tf-checkout-react 1.0.47 → 1.0.51

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/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.47",
+  "version": "1.0.51",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -26,14 +26,15 @@ import {
   register,
   setCustomHeader,
   getStates,
-  getConditions,
 } from '../../api'
 import { LoginModal } from '../loginModal'
 import { RegisterModal } from '../registerModal'
 import {
+  assingUniqueIds,
   createCheckoutDataBody,
   createRegisterFormData,
   getInitialValues,
+  getValidateFunctions,
   setLoggedUserData,
 } from './utils'
 import { CustomField } from '../common/CustomField'
@@ -41,30 +42,20 @@ import axios from 'axios'
 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')
 
-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[];
   ticketHoldersFields?: IBillingInfoData;
   handleSubmit?: (
     values: FormikValues,
     formikHelpers: FormikHelpers<FormikValues>,
-    res?: any
+    eventId: any,
+    res: any
   ) => void;
 
   onRegisterSuccess?: (value: {
@@ -155,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,
@@ -177,8 +168,6 @@ const LogicRunner: FC<{
   return null
 }
 
-const SectionContainer: FC = ({ children }) => <>{children}</>
-
 export const BillingInfoContainer = ({
   data = [],
   ticketHoldersFields = {
@@ -213,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>([])
@@ -221,7 +214,6 @@ export const BillingInfoContainer = ({
   const [userExpired, setUserExpired] = useState(false)
   const [showModalRegister, setShowModalRegister] = useState(false)
   const [ticketsQuantity, setTicketsQuantity] = useState<string[]>([])
-  const [conditions, setConditions] = useState<{id: string, text: string}[]>([])
   const [userValues, setUserValues] = useState<any>({
     firstName: '',
     lastName: '',
@@ -249,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
@@ -261,15 +257,6 @@ export const BillingInfoContainer = ({
 
   //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()
     // fetch countries data
     const fetchCountries = async () => {
       try {
@@ -300,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)) {
@@ -338,7 +327,7 @@ export const BillingInfoContainer = ({
     <>
       <Formik
         initialValues={getInitialValues(
-          data,
+          dataWithUniqueIds,
           {
             ...initialValues,
             email: emailLogged,
@@ -371,7 +360,12 @@ export const BillingInfoContainer = ({
                 showDOB
               )
               const res = await postOnCheckout(checkoutBody, access_token)
-              handleSubmit(values, formikHelpers as FormikHelpers<any>, res)
+              handleSubmit(
+                values,
+                formikHelpers as FormikHelpers<any>,
+                eventId,
+                res
+              )
               return
             }
 
@@ -440,7 +434,12 @@ 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') {
@@ -458,6 +457,7 @@ export const BillingInfoContainer = ({
       >
         {(props: FormikProps<any>) => (
           <Form onSubmit={props.handleSubmit}>
+            <ErrorFocus />
             <LogicRunner
               values={props.values}
               setStates={setStates}
@@ -491,8 +491,8 @@ export const BillingInfoContainer = ({
                   </div>
                 </div>
               )}
-              {_map(data, item => {
-                const { id, label, labelClassName, fields } = item
+              {_map(dataWithUniqueIds, item => {
+                const { label, labelClassName, fields } = item
                 if (
                   label === 'Ticket Holders' &&
                   !showTicketHolderName &&
@@ -501,7 +501,7 @@ export const BillingInfoContainer = ({
                   return null
                 }
                 return (
-                  <SectionContainer key={id}>
+                  <React.Fragment key={item.uniqueId}>
                     <p className={labelClassName}>{label}</p>
                     {_map(fields, group => {
                       const {
@@ -511,7 +511,7 @@ export const BillingInfoContainer = ({
                         groupLabelClassName,
                       } = group
                       return (
-                        <SectionContainer key={group.id}>
+                        <React.Fragment key={group.uniqueId}>
                           {!isLoggedIn && (
                             <div className={groupLabelClassName}>
                               {groupLabel}
@@ -535,7 +535,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
@@ -544,110 +544,101 @@ export const BillingInfoContainer = ({
                                 ['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={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
+                                      ) : (
+                                        <Field
+                                          name={element.name}
+                                          label={element.label}
+                                          type={element.type}
+                                          validate={getValidateFunctions(
+                                            element,
+                                            states
+                                          )}
+                                          component={
+                                            element.type === 'checkbox'
+                                              ? CheckboxField
+                                              : element.type === 'select'
+                                              ? SelectField
+                                              : CustomField
+                                          }
+                                          selectOptions={
+                                            element.name === 'country'
+                                              ? countries
+                                              : element.name === 'state'
+                                              ? states
+                                              : []
+                                          }
+                                          theme={theme}
+                                        />
+                                      )}
+                                    </div>
+                                  </React.Fragment>
                                 )
                             )}
                           </div>
-                        </SectionContainer>
+                        </React.Fragment>
                       )
                     })}
-                  </SectionContainer>
+                  </React.Fragment>
                 )
               })}
-              
               {showTicketHolderName && (
-                <>
-                  <p>{ticketHoldersFields.label}</p>
-                  {_map(ticketsQuantity, (_item, index) => (
-                    <div key={_item}>
-                      <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>
+                  <div className="ticket-holders-fields">
+                    <p>{ticketHoldersFields.label}</p>
+                    {_map(ticketsQuantity, (_item, index) => (
+                      <div key={_item}>
+                        <h5>Ticket {index + 1}</h5>
+                        {_map(ticketHoldersFields.fields, group => {
+                          const { groupClassname, groupItems } = group
+                          return (
+                            <div key={group.uniqueId}>
+                              <div className={groupClassname}>
+                                {_map(groupItems, element => (
+                                  <div
+                                    className={element.className}
+                                    key={element.uniqueId}
+                                  >
+                                    <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>
-                  ))}
-                </>
-              )}
-              {conditions?.map(checkbox => (
-                <div className={'billing-info-container__singleField'} key={checkbox.id}>
-                  <div className="width-fc">
-                    <Field
-                      name={checkbox.id}
-                      label={checkbox.text}
-                      type={'checkbox'}
-                      required={true}
-                      component={CheckboxField}
-                      validate={combineValidators(requiredValidator)}
-                    />
+                          )
+                        })}
+                      </div>
+                    ))}
                   </div>
-                </div>
-              ))}
+                </React.Fragment>
+              )}
               <div className="button-container">
                 <LoadingButton
                   type="submit"

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;
@@ -81,6 +86,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 +156,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/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

@@ -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'
@@ -17,6 +18,7 @@ export interface ICustomField {
 
   field: FieldInputProps<any>;
   form: FormikProps<any>;
+  theme: 'dark' | 'light';
 
   // optional
   type?: string;
@@ -29,9 +31,9 @@ interface IOtherProps {
 
 const useStyles = makeStyles({
   input: {
-    "&::placeholder": {
-      color: "gray",
-    }
+    '&::placeholder': {
+      color: 'gray',
+    },
   },
 })
 
@@ -41,11 +43,14 @@ 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'
-  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)
   const classes = useStyles()
 
   return (
@@ -60,15 +65,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>
         ))