tf-checkout-react 1.0.53 → 1.0.54

package/dist/tf-checkout-react.esm.js

@@ -2683,6 +2683,14 @@ var CheckoutForm = function CheckoutForm(_ref) {
       stripeError = _useState2[0],
       setStripeError = _useState2[1];
 
+  var _useState3 = useState([]),
+      checkboxes = _useState3[0],
+      setCheckboxes = _useState3[1];
+
+  var _useState4 = 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;
@@ -2788,6 +2796,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);
   };
@@ -2801,6 +2820,19 @@ var CheckoutForm = function CheckoutForm(_ref) {
       zipCode && setPostalCode(zipCode);
     }
   }, []);
+  useEffect(function () {
+    if (conditions.length) {
+      setCheckboxes(conditions);
+    }
+  }, [conditions]);
+  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.createElement("div", {
     className: "stripe_payment_container"
@@ -2841,7 +2873,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.createElement("div", {
       className: 'billing-info-container__singleField',
       key: checkbox.id
@@ -2850,10 +2882,12 @@ var CheckoutForm = function CheckoutForm(_ref) {
     }, React.createElement(CheckboxField, {
       name: checkbox.id,
       label: checkbox.text,
-      required: true
+      required: true,
+      onChange: handleCheckboxes,
+      checked: checkbox.checked
     })));
   }), React.createElement("div", {
-    className: "payment_button " + (buttonIsDiabled ? 'disabled-payment-button' : '')
+    className: "payment_button " + (buttonIsDiabled || !allowSubmit ? 'disabled-payment-button' : '')
   }, React.createElement("button", {
     disabled: buttonIsDiabled,
     type: "submit"
@@ -2995,7 +3029,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
                 setConditions(conditionsInfo ? conditionsInfo.map(function (item) {
                   return {
                     id: nanoid(),
-                    text: item
+                    text: item,
+                    checked: false
                   };
                 }) : []);