tf-checkout-react 1.0.48 → 1.0.52

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.48",
+  "version": "1.0.52",
   "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,
@@ -165,8 +168,6 @@ const LogicRunner: FC<{
   return null
 }
 
-const SectionContainer: FC = ({ children }) => <>{children}</>
-
 export const BillingInfoContainer = ({
   data = [],
   ticketHoldersFields = {
@@ -201,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>([])
@@ -236,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
@@ -278,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)) {
@@ -316,7 +327,7 @@ export const BillingInfoContainer = ({
     <>
       <Formik
         initialValues={getInitialValues(
-          data,
+          dataWithUniqueIds,
           {
             ...initialValues,
             email: emailLogged,
@@ -349,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 {
@@ -418,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') {
@@ -436,6 +463,7 @@ export const BillingInfoContainer = ({
       >
         {(props: FormikProps<any>) => (
           <Form onSubmit={props.handleSubmit}>
+            <ErrorFocus />
             <LogicRunner
               values={props.values}
               setStates={setStates}
@@ -469,8 +497,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 &&
@@ -479,7 +507,7 @@ export const BillingInfoContainer = ({
                   return null
                 }
                 return (
-                  <SectionContainer key={id}>
+                  <React.Fragment key={item.uniqueId}>
                     <p className={labelClassName}>{label}</p>
                     {_map(fields, group => {
                       const {
@@ -489,7 +517,7 @@ export const BillingInfoContainer = ({
                         groupLabelClassName,
                       } = group
                       return (
-                        <SectionContainer key={group.id}>
+                        <React.Fragment key={group.uniqueId}>
                           {!isLoggedIn && (
                             <div className={groupLabelClassName}>
                               {groupLabel}
@@ -513,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
@@ -522,52 +550,56 @@ 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
-                                            : []
-                                        }
-                                        theme={theme}
-                                      />
-                                    )}
-                                  </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 && (
-                <SectionContainer>
+                <React.Fragment>
                   <div className="ticket-holders-fields">
                     <p>{ticketHoldersFields.label}</p>
                     {_map(ticketsQuantity, (_item, index) => (
@@ -576,16 +608,15 @@ export const BillingInfoContainer = ({
                         {_map(ticketHoldersFields.fields, group => {
                           const { groupClassname, groupItems } = group
                           return (
-                            <div key={group.id}>
+                            <div key={group.uniqueId}>
                               <div className={groupClassname}>
                                 {_map(groupItems, element => (
                                   <div
                                     className={element.className}
-                                    key={`${element.name}-${index}`}
+                                    key={element.uniqueId}
                                   >
                                     <Field
                                       name={`${element.name}-${index}`}
-                                      key={`${element.name}-${index}`}
                                       label={element.label}
                                       type={element.type}
                                       required={true}
@@ -612,7 +643,7 @@ export const BillingInfoContainer = ({
                       </div>
                     ))}
                   </div>
-                </SectionContainer>
+                </React.Fragment>
               )}
               <div className="button-container">
                 <LoadingButton

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/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/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)