tf-checkout-react 1.0.51 → 1.0.55

package/dist/components/billing-info-container/utils.d.ts

@@ -8,7 +8,11 @@ export interface IValues {
     [key: string]: any;
 }
 export declare const getInitialValues: (data?: any, propsInitialValues?: IValues, userValues?: any) => IValues;
-export declare const createRegisterFormData: (values?: IValues) => FormData;
+export declare const createRegisterFormData: (values: IValues | undefined, checkoutBody: {
+    attributes: {
+        [key: string]: any;
+    };
+}) => FormData;
 interface ICheckoutBody {
     attributes: {
         [key: string]: any;

package/dist/components/common/CustomField.d.ts

@@ -16,5 +16,5 @@ export interface ICustomField {
 interface IOtherProps {
     [key: string]: any;
 }
-export declare const CustomField: ({ label, type, field, selectOptions, form: { touched, errors }, theme, }: ICustomField & IOtherProps) => JSX.Element;
+export declare const CustomField: ({ label, type, field, selectOptions, form: { touched, errors, submitCount }, theme, }: ICustomField & IOtherProps) => JSX.Element;
 export {};

package/dist/tf-checkout-react.cjs.development.js

@@ -1526,7 +1526,7 @@ var getInitialValues = function getInitialValues(data, propsInitialValues, userV
 
   return initialValues;
 };
-var createRegisterFormData = function createRegisterFormData(values) {
+var createRegisterFormData = function createRegisterFormData(values, checkoutBody) {
   if (values === void 0) {
     values = {};
   }
@@ -1539,6 +1539,11 @@ var createRegisterFormData = function createRegisterFormData(values) {
   bodyFormData.append('password_confirmation', values.confirmPassword);
   bodyFormData.append('client_id', ENV.CLIENT_ID );
   bodyFormData.append('client_secret', ENV.CLIENT_SECRET );
+
+  _forEach(checkoutBody.attributes, function (item, key) {
+    bodyFormData.append(key, item);
+  });
+
   return bodyFormData;
 };
 var setLoggedUserData = function setLoggedUserData(data) {
@@ -1678,13 +1683,13 @@ var CustomField = function CustomField(_ref) {
       _ref$form = _ref.form,
       touched = _ref$form.touched,
       errors = _ref$form.errors,
+      submitCount = _ref$form.submitCount,
       theme = _ref.theme;
   var isSelectField = type === 'select';
-  var isShrink = Boolean(field.value) || type === 'date' || type === 'select';
 
   var error = _get(errors, field.name);
 
-  var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error;
+  var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
   var classes = useStyles();
   return React__default.createElement(TextField, Object.assign({
     id: field.name,
@@ -1694,9 +1699,6 @@ var CustomField = function CustomField(_ref) {
     fullWidth: true,
     error: !!error && isTouched,
     helperText: isTouched && error,
-    InputLabelProps: {
-      shrink: isShrink
-    },
     InputProps: {
       classes: {
         input: classes.input
@@ -1774,7 +1776,8 @@ var SelectField = function SelectField(_ref) {
     fullWidth: true
   }, React__default.createElement(material.InputLabel, {
     htmlFor: field.name,
-    error: !!error && isTouched
+    error: !!error && isTouched,
+    shrink: true
   }, label), React__default.createElement(Select, Object.assign({
     id: field.name,
     label: label,
@@ -2045,7 +2048,6 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   var lastNameLogged = _get(userData, 'last_name', '') || _get(userValues, 'last_name', '');
 
   var showDOB = getQueryVariable('age_required') === 'true';
-  var showTicketHolderName = getQueryVariable('names_required') === 'true';
   var eventId = getQueryVariable('event_id');
 
   var optedInFieldValue = _get(cartInfoData, 'optedIn', false);
@@ -2231,7 +2233,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     enableReinitialize: true,
     onSubmit: function () {
       var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5(values, formikHelpers) {
-        var updatedUserData, _profileSpecifiedData, _profileDataObj, _checkoutBody, _res, bodyFormData, access_token_register, resRegister, refreshToken, tokens, _e$response, _e$response$data, error, profileData, profileSpecifiedData, profileDataObj, checkoutBody, res, _e$response2;
+        var updatedUserData, _profileSpecifiedData, _profileDataObj, _checkoutBody, _res, checkoutBodyForRegistration, bodyFormData, access_token_register, resRegister, refreshToken, tokens, _e$response, _e$response$data, error, profileData, profileSpecifiedData, profileDataObj, checkoutBody, res, _e$response2;
 
         return runtime_1.wrap(function _callee5$(_context5) {
           while (1) {
@@ -2276,13 +2278,18 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 return _context5.abrupt("return");
 
               case 15:
-                bodyFormData = createRegisterFormData(values);
+                checkoutBodyForRegistration = createCheckoutDataBody(ticketsQuantity.length, values, {
+                  emailLogged: emailLogged,
+                  firstNameLogged: firstNameLogged,
+                  lastNameLogged: lastNameLogged
+                }, showDOB);
+                bodyFormData = createRegisterFormData(values, checkoutBodyForRegistration);
                 access_token_register = null;
-                _context5.prev = 17;
-                _context5.next = 20;
+                _context5.prev = 18;
+                _context5.next = 21;
                 return register(bodyFormData);
 
-              case 20:
+              case 21:
                 resRegister = _context5.sent;
                 access_token_register = _get(resRegister, 'data.data.attributes.access_token');
                 refreshToken = _get(resRegister, 'data.data.attributes.refresh_token');
@@ -2292,12 +2299,12 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                   refreshToken: refreshToken
                 };
                 onRegisterSuccess(tokens);
-                _context5.next = 32;
+                _context5.next = 33;
                 break;
 
-              case 28:
-                _context5.prev = 28;
-                _context5.t0 = _context5["catch"](17);
+              case 29:
+                _context5.prev = 29;
+                _context5.t0 = _context5["catch"](18);
 
                 if (axios.isAxiosError(_context5.t0)) {
                   error = _context5.t0 == null ? void 0 : (_e$response = _context5.t0.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message;
@@ -2321,11 +2328,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
                 return _context5.abrupt("return");
 
-              case 32:
-                _context5.next = 34;
+              case 33:
+                _context5.next = 35;
                 return getProfileData(access_token_register);
 
-              case 34:
+              case 35:
                 profileData = _context5.sent;
                 profileSpecifiedData = _get(profileData, 'data.data');
                 profileDataObj = setLoggedUserData(profileSpecifiedData);
@@ -2339,17 +2346,17 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                   firstNameLogged: firstNameLogged,
                   lastNameLogged: lastNameLogged
                 }, showDOB);
-                _context5.next = 41;
+                _context5.next = 42;
                 return postOnCheckout(checkoutBody, access_token_register);
 
-              case 41:
+              case 42:
                 res = _context5.sent;
                 handleSubmit(values, formikHelpers, eventId, res);
-                _context5.next = 48;
+                _context5.next = 49;
                 break;
 
-              case 45:
-                _context5.prev = 45;
+              case 46:
+                _context5.prev = 46;
                 _context5.t1 = _context5["catch"](0);
 
                 if (axios.isAxiosError(_context5.t1)) {
@@ -2365,12 +2372,12 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                   onSubmitError(_context5.t1);
                 }
 
-              case 48:
+              case 49:
               case "end":
                 return _context5.stop();
             }
           }
-        }, _callee5, null, [[0, 45], [17, 28]]);
+        }, _callee5, null, [[0, 46], [18, 29]]);
       }));
 
       function onSubmit(_x2, _x3) {
@@ -2407,35 +2414,18 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       var label = item.label,
           labelClassName = item.labelClassName,
           fields = item.fields;
-
-      if (label === 'Ticket Holders' && !showTicketHolderName && !showDOB) {
-        return null;
-      }
-
       return React__default.createElement(React__default.Fragment, {
         key: item.uniqueId
       }, React__default.createElement("p", {
         className: labelClassName
       }, label), _map(fields, function (group) {
         var groupClassname = group.groupClassname,
-            groupItems = group.groupItems,
-            groupLabel = group.groupLabel,
-            groupLabelClassName = group.groupLabelClassName;
+            groupItems = group.groupItems;
         return React__default.createElement(React__default.Fragment, {
           key: group.uniqueId
-        }, !isLoggedIn && React__default.createElement("div", {
-          className: groupLabelClassName
-        }, groupLabel), React__default.createElement("div", {
+        }, React__default.createElement("div", {
           className: groupClassname
         }, _map(groupItems.filter(function (el) {
-          if (el.name === 'holderFirstName' && !showTicketHolderName) {
-            return false;
-          }
-
-          if (el.name === 'holderLastName' && !showTicketHolderName) {
-            return false;
-          }
-
           if (el.name === 'holderAge' && !showDOB) {
             return false;
           }
@@ -2446,7 +2436,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
           return true;
         }), function (element) {
-          return ['password', 'confirmPassword'].includes(element.name) && isLoggedIn ? null : React__default.createElement(React__default.Fragment, {
+          return ['password', 'confirmPassword', 'password-info'].includes(element.name) && isLoggedIn ? null : React__default.createElement(React__default.Fragment, {
             key: element.uniqueId
           }, element.name === 'email' ? React__default.createElement("div", {
             className: "email-checking"
@@ -2463,7 +2453,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
           })));
         })));
       }));
-    }), showTicketHolderName && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    }), React__default.createElement("div", {
       className: "ticket-holders-fields"
     }, React__default.createElement("p", null, ticketHoldersFields.label), _map(ticketsQuantity, function (_item, index) {
       return React__default.createElement("div", {
@@ -2489,7 +2479,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
           }));
         })));
       }));
-    }))), React__default.createElement("div", {
+    })), React__default.createElement("div", {
       className: "button-container"
     }, React__default.createElement(LoadingButton, {
       type: "submit",
@@ -2640,6 +2630,14 @@ var CheckoutForm = function CheckoutForm(_ref) {
       stripeError = _useState2[0],
       setStripeError = _useState2[1];
 
+  var _useState3 = React.useState([]),
+      checkboxes = _useState3[0],
+      setCheckboxes = _useState3[1];
+
+  var _useState4 = React.useState(false),
+      allowSubmit = _useState4[0],
+      setAllowSubmit = _useState4[1];
+
   var handleSubmit = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(event) {
       var card, address, paymentMethodReq, _yield$stripe$confirm, _error;
@@ -2745,6 +2743,17 @@ var CheckoutForm = function CheckoutForm(_ref) {
     };
   }();
 
+  var handleCheckboxes = function handleCheckboxes(e) {
+    var checkbox = e.target;
+    var updatedCheckedState = checkboxes.map(function (item) {
+      var value = item.id === checkbox.name ? !item.checked : item.checked;
+      return _extends({}, item, {
+        checked: value
+      });
+    });
+    setCheckboxes(updatedCheckedState);
+  };
+
   var onChangePostalCode = function onChangePostalCode(e) {
     setPostalCode(e.target.value);
   };
@@ -2758,6 +2767,19 @@ var CheckoutForm = function CheckoutForm(_ref) {
       zipCode && setPostalCode(zipCode);
     }
   }, []);
+  React.useEffect(function () {
+    if (conditions.length) {
+      setCheckboxes(conditions);
+    }
+  }, [conditions]);
+  React.useEffect(function () {
+    if (checkboxes.length) {
+      var allChecked = checkboxes.every(function (item) {
+        return (item == null ? void 0 : item.checked) === true;
+      });
+      setAllowSubmit(allChecked);
+    }
+  }, [checkboxes]);
   var buttonIsDiabled = !stripe || !!error || isLoading;
   return React__default.createElement("div", {
     className: "stripe_payment_container"
@@ -2798,7 +2820,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
     value: postalCode,
     onChange: onChangePostalCode,
     placeholder: "ZIP"
-  }))), conditions == null ? void 0 : conditions.map(function (checkbox) {
+  }))), checkboxes == null ? void 0 : checkboxes.map(function (checkbox) {
     return React__default.createElement("div", {
       className: 'billing-info-container__singleField',
       key: checkbox.id
@@ -2807,10 +2829,12 @@ var CheckoutForm = function CheckoutForm(_ref) {
     }, React__default.createElement(CheckboxField, {
       name: checkbox.id,
       label: checkbox.text,
-      required: true
+      required: true,
+      onChange: handleCheckboxes,
+      checked: checkbox.checked
     })));
   }), React__default.createElement("div", {
-    className: "payment_button " + (buttonIsDiabled ? 'disabled-payment-button' : '')
+    className: "payment_button " + (buttonIsDiabled || !allowSubmit ? 'disabled-payment-button' : '')
   }, React__default.createElement("button", {
     disabled: buttonIsDiabled,
     type: "submit"
@@ -2952,7 +2976,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
                 setConditions(conditionsInfo ? conditionsInfo.map(function (item) {
                   return {
                     id: nanoid.nanoid(),
-                    text: item
+                    text: item,
+                    checked: false
                   };
                 }) : []);