tf-checkout-react 1.0.51 → 1.0.55

package/package.json

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

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

@@ -238,7 +238,6 @@ export const BillingInfoContainer = ({
     _get(userData, 'last_name', '') || _get(userValues, 'last_name', '')
 
   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 hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
@@ -369,7 +368,16 @@ export const BillingInfoContainer = ({
               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 {
@@ -493,45 +501,16 @@ export const BillingInfoContainer = ({
               )}
               {_map(dataWithUniqueIds, item => {
                 const { label, labelClassName, fields } = item
-                if (
-                  label === 'Ticket Holders' &&
-                  !showTicketHolderName &&
-                  !showDOB
-                ) {
-                  return null
-                }
                 return (
                   <React.Fragment key={item.uniqueId}>
                     <p className={labelClassName}>{label}</p>
                     {_map(fields, group => {
-                      const {
-                        groupClassname,
-                        groupItems,
-                        groupLabel,
-                        groupLabelClassName,
-                      } = group
+                      const { groupClassname, groupItems } = group
                       return (
                         <React.Fragment key={group.uniqueId}>
-                          {!isLoggedIn && (
-                            <div className={groupLabelClassName}>
-                              {groupLabel}
-                            </div>
-                          )}
                           <div className={groupClassname}>
                             {_map(
                               groupItems.filter(el => {
-                                if (
-                                  el.name === 'holderFirstName' &&
-                                  !showTicketHolderName
-                                ) {
-                                  return false
-                                }
-                                if (
-                                  el.name === 'holderLastName' &&
-                                  !showTicketHolderName
-                                ) {
-                                  return false
-                                }
                                 if (el.name === 'holderAge' && !showDOB) {
                                   return false
                                 }
@@ -541,9 +520,12 @@ export const BillingInfoContainer = ({
                                 return true
                               }),
                               element =>
-                                ['password', 'confirmPassword'].includes(
-                                  element.name
-                                ) && isLoggedIn ? null : (
+                                [
+                                  'password',
+                                  'confirmPassword',
+                                  'password-info',
+                                ].includes(element.name) &&
+                                isLoggedIn ? null : (
                                   <React.Fragment key={element.uniqueId}>
                                     {element.name === 'email' ? (
                                       <div className="email-checking">
@@ -592,53 +574,49 @@ export const BillingInfoContainer = ({
                   </React.Fragment>
                 )
               })}
-              {showTicketHolderName && (
-                <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 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>
+                      )
+                    })}
                   </div>
-                </React.Fragment>
-              )}
+                ))}
+              </div>
               <div className="button-container">
                 <LoadingButton
                   type="submit"

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

@@ -36,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)
@@ -51,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
 }
 

package/src/components/common/CustomField.tsx

@@ -42,15 +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 error = _get(errors, field.name)
   const isTouched =
     Boolean(_get(touched, field.name)) ||
-    (_includes(field.name, 'holder') && !!error)
+    (_includes(field.name, 'holder') && !!error && !!submitCount)
   const classes = useStyles()
 
   return (
@@ -62,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

@@ -51,7 +51,7 @@ export const SelectField = ({
 
   return (
     <FormControl fullWidth={true}>
-      <InputLabel htmlFor={field.name} error={!!error && isTouched}>
+      <InputLabel htmlFor={field.name} error={!!error && isTouched} shrink={true}>
         {label}
       </InputLabel>
       <Select

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