tf-checkout-react 1.0.53 → 1.0.54

package/package.json

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

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