1/** 2 * External dependencies 3 */ 4import apiFetch from '@wordpress/api-fetch'; 5import { useEffect, useState } from '@wordpress/element'; 6 7console.log(kgr_php_vars.checkout.title); 8 9export const Block = ({ checkoutExtensionData }) => { 10 const { setExtensionData } = checkoutExtensionData; 11 12 13 const [isReCaptchaValid, setIsReCaptchaValid] = useState(false); // For checkout reCAPTCHA 14 const [isReCaptchaPaymentValid, setIsReCaptchaPaymentValid] = useState(false); // For payment reCAPTCHA 15 const isCheckoutEnabled = kgr_php_vars.checkout; 16 const isPaymentEnabled = kgr_php_vars.payment; 17 if(isCheckoutEnabled){ 18 var KgrSiteKey = kgr_php_vars.checkout.google_recapta_site_key; 19 var KgrTitle = kgr_php_vars.checkout.title; 20 var KaThemeColor = kgr_php_vars.checkout.themeColor; 21 var KaSize = kgr_php_vars.checkout.size; 22 var KaCapchaPosition = kgr_php_vars.checkout.ka_captcha_position; 23 var dynamicCallback = kgr_php_vars.checkout.dynamicCallback; 24 var ka_grc_classes = kgr_php_vars.checkout.ka_grc_classes; 25 } 26 27 if (isPaymentEnabled) { 28 var KgrSiteKeyPayment = kgr_php_vars.payment.google_recapta_site_key; 29 var KgrPaymentTitle = kgr_php_vars.payment.title; 30 var KaPaymentThemeColor = kgr_php_vars.payment.themeColor; 31 var KaPaymentSize = kgr_php_vars.payment.size; 32 var KaPaymentCapchaPosition = kgr_php_vars.payment.ka_captcha_position; 33 var PaymentdynamicCallback = kgr_php_vars.payment.dynamicCallback; 34 var ka_Payment_classes = kgr_php_vars.payment.ka_grc_classes; 35 } 36 37 38 39 if (!isCheckoutEnabled && !isPaymentEnabled) { 40 return null; 41 } 42 useEffect(() => { 43 if(isCheckoutEnabled){ 44 const $captchaWrap = jQuery('.kl-ga-main-wrap'); 45 jQuery('.kl-ga-main-wrap').not($captchaWrap.first()).remove(); 46 47 // Proceed only if it exists 48 if ($captchaWrap.length === 0) return; 49 50 setTimeout(() => { 51 switch (KaCapchaPosition) { 52 case 'woocommerce_checkout_before_customer_details': 53 jQuery('.kl-ga-main-wrap').insertBefore('.wc-block-checkout__use-address-for-billing'); 54 jQuery('.kl-ga-main-wrap').css("width", "100%"); 55 break; 56 case 'woocommerce_before_checkout_billing_form': 57 jQuery('.kl-ga-main-wrap').insertBefore('.wp-block-woocommerce-checkout-contact-information-block'); 58 break; 59 case 'woocommerce_before_order_notes': 60 jQuery('.kl-ga-main-wrap').insertBefore('.wc-block-checkout__order-notes'); 61 break; 62 case 'woocommerce_after_order_notes': 63 jQuery('.kl-ga-main-wrap').insertAfter('.wc-block-checkout__order-notes'); 64 break; 65 case 'woocommerce_review_order_before_payment': 66 jQuery('.kl-ga-main-wrap').insertBefore('.wc-block-checkout__payment-method'); 67 break; 68 case 'woocommerce_review_order_before_submit': 69 jQuery('.kl-ga-main-wrap').insertBefore('.wp-block-woocommerce-checkout-actions-block'); 70 break; 71 case 'woocommerce_review_order_after_submit': 72 jQuery('.kl-ga-main-wrap').insertAfter('.wp-block-woocommerce-checkout-actions-block'); 73 break; 74 default: 75 jQuery('.kl-ga-main-wrap').insertBefore('.wp-block-woocommerce-checkout-actions-block'); 76 } 77 78 }, 1000); 79 } 80 if (isPaymentEnabled) { 81 setTimeout(() => { 82 jQuery('.kl-ga-payment-wrap').insertBefore('.wc-block-checkout__payment-method'); 83 }, 1000); 84 } 85 }, [KaCapchaPosition, isPaymentEnabled, isCheckoutEnabled]); 86 87 // Render the reCAPTCHA widgets 88 useEffect(() => { 89 const renderReCaptcha = () => { 90 if (window.grecaptcha) { 91 // Render checkout reCAPTCHA 92 if (isCheckoutEnabled && !document.getElementById("kl-ga-main-wrap").childElementCount) { 93 window.grecaptcha.render('kl-ga-main-wrap', { 94 sitekey: KgrSiteKey, 95 theme: KaThemeColor, 96 size: KaSize, 97 callback: onCheckoutReCaptchaSuccess, 98 'expired-callback': onCheckoutReCaptchaExpired, 99 }); 100 } 101 102 // Render payment reCAPTCHA 103 if (isPaymentEnabled && !document.getElementById("kl-ga-payment-wrap").childElementCount) { 104 window.grecaptcha.render('kl-ga-payment-wrap', { 105 sitekey: KgrSiteKeyPayment, 106 theme: KaPaymentThemeColor, 107 size: KaPaymentSize, 108 callback: onPaymentReCaptchaSuccess, 109 'expired-callback': onPaymentReCaptchaExpired, 110 }); 111 } 112 } 113 }; 114 115 // Load reCAPTCHA script 116 const script = document.createElement('script'); 117 script.src = 'https://www.google.com/recaptcha/api.js?onload=onReCaptchaLoad&render=explicit'; 118 script.async = true; 119 script.defer = true; 120 document.body.appendChild(script); 121 122 window.onReCaptchaLoad = renderReCaptcha; 123 124 // Cleanup 125 return () => { 126 document.body.removeChild(script); 127 delete window.onReCaptchaLoad; 128 }; 129}, [isCheckoutEnabled, isPaymentEnabled]); 130 131 132 // Handle success for checkout reCAPTCHA 133 const onCheckoutReCaptchaSuccess = (response) => { 134 setIsReCaptchaValid(true); 135 setExtensionData('kgr_google_recaptcha', 'kgr_checkout_recaptcha', response); 136 }; 137 138 // Handle expiration for checkout reCAPTCHA 139 const onCheckoutReCaptchaExpired = () => { 140 setIsReCaptchaValid(false); 141 setExtensionData('kgr_google_recaptcha', 'kgr_checkout_recaptcha', ''); 142 }; 143 144 // Handle success for payment reCAPTCHA 145 const onPaymentReCaptchaSuccess = (response) => { 146 setIsReCaptchaPaymentValid(true); 147 setExtensionData('kgr_google_recaptcha', 'kgr_payment_recaptcha', response); 148 const payemnt_place_order = document.querySelector('.wc-block-components-checkout-place-order-button'); 149 setTimeout(() => { 150 var paymentcookies = getCookieBlock('ka_button_disabled_until'); 151 if(paymentcookies ){ 152 payemnt_place_order.disabled = true; 153 } 154 }, 2000); 155 }; 156 157 // Handle expiration for payment reCAPTCHA 158 const onPaymentReCaptchaExpired = () => { 159 setIsReCaptchaPaymentValid(false); 160 setExtensionData('kgr_google_recaptcha', 'kgr_payment_recaptcha', ''); 161 }; 162 163 // Disable/enable payment methods and Place Order button 164 useEffect(() => { 165 setTimeout(() => { 166 const placeOrderButton = document.querySelector('.wc-block-components-checkout-place-order-button'); 167 const paymentRadioButtons = document.querySelectorAll( 168 '.wc-block-components-radio-control-accordion-option input[type="radio"]' 169 ); 170 const paymentRadioButtonsShipping = document.querySelectorAll( 171 '.wc-block-components-shipping-rates-control input[type="radio"]' 172 ); 173 174 // Disable/enable Place Order button based on checkout reCAPTCHA 175 if (placeOrderButton ) { 176 placeOrderButton.disabled = isCheckoutEnabled && !isReCaptchaValid; 177 } 178 179 // Disable/enable payment methods based on payment reCAPTCHA 180 if (isPaymentEnabled && paymentRadioButtons.length > 0 || paymentRadioButtonsShipping > 0) { 181 paymentRadioButtons.forEach((radio) => { 182 radio.disabled = !isReCaptchaPaymentValid; 183 }); 184 paymentRadioButtonsShipping.forEach((radio) => { 185 radio.disabled = !isReCaptchaPaymentValid; 186 }); 187 } 188 }, 1000); 189 }, [isReCaptchaValid, isReCaptchaPaymentValid, isPaymentEnabled, isCheckoutEnabled]); 190 191 // Attach click event for Place Order button to send reCAPTCHA responses 192 useEffect(() => { 193 const placeOrderButton = document.querySelector('.wc-block-components-checkout-place-order-button'); 194 195 const handlePlaceOrderClick = () => {
196 const checkoutResponse = window.grecaptcha?.getResponse(0); // Get checkout reCAPTCHA response 197 const paymentResponse = window.grecaptcha?.getResponse(1); // Get payment reCAPTCHA response 198 199 setExtensionData('kgr_google_recaptcha', 'kgr_checkout_recaptcha', checkoutResponse || ''); 200 setExtensionData('kgr_google_recaptcha', 'kgr_payment_recaptcha', paymentResponse || ''); 201 }; 202 203 if (placeOrderButton) { 204 placeOrderButton.addEventListener('click', handlePlaceOrderClick); 205 } 206 207 return () => { 208 if (placeOrderButton) { 209 placeOrderButton.removeEventListener('click', handlePlaceOrderClick); 210 } 211 }; 212 }, []); 213 214 // Attach click event for Place Order button to send reCAPTCHA responses 215 useEffect(() => { 216 const placeCheckoutButton = document.querySelector('.wp-block-woocommerce-checkout'); 217 218 const handleCheckoutClick = () => { 219 if (jQuery('.kl-ga-inner-wrap').length) { 220 setTimeout( function(){ 221 const paymentDefuatOrderButton = document.querySelector('.wc-block-components-checkout-place-order-button'); 222 if(!isReCaptchaValid){ 223 paymentDefuatOrderButton.disabled = isCheckoutEnabled && !isReCaptchaValid; 224 } 225 226 }, 2000); 227 } 228 229 setTimeout( function(){ 230 const defaultPlaceOrderButton = document.querySelector('.wc-block-components-checkout-place-order-button'); 231 var paymentdisabledUntil = getCookieBlock('ka_button_disabled_until'); 232 if(paymentdisabledUntil ){ 233 defaultPlaceOrderButton.disabled = true; 234 } 235 }, 2000); 236 }; 237 238 if (placeCheckoutButton) { 239 placeCheckoutButton.addEventListener('click', handleCheckoutClick); 240 } 241 242 return () => { 243 if (placeCheckoutButton) { 244 placeCheckoutButton.removeEventListener('click', handleCheckoutClick); 245 } 246 }; 247 }, [isReCaptchaValid]); 248 249 useEffect(() => { 250 setTimeout( function(){ 251 const placeOrderButton = document.querySelector('.wc-block-components-checkout-place-order-button'); 252 const disabledUntil = getCookieBlock('ka_button_disabled_until'); 253 const isCheckoutPage = document.querySelector('.woo_checkout'); 254 if (placeOrderButton) { 255 if (disabledUntil) { 256 placeOrderButton.disabled = true; 257 }else{ 258 if(isCheckoutPage){ 259 placeOrderButton.disabled = !isReCaptchaValid; 260 } 261 } 262 } 263 }, 2000); 264 265 }, [isReCaptchaValid]); 266 267 function getCookieBlock(cookieName) { 268 const name = cookieName + "="; 269 const decodedCookies = decodeURIComponent(document.cookie); 270 const cookieArray = decodedCookies.split(';'); 271 for (let i = 0; i < cookieArray.length; i++) { 272 let cookie = cookieArray[i].trim(); 273 if (cookie.indexOf(name) === 0) { 274 return cookie.substring(name.length, cookie.length); 275 } 276 } 277 return null; // Return null if the cookie does not exist 278 } 279 280 return ( 281 <> 282 {/* Checkout reCAPTCHA */} 283 {isCheckoutEnabled && ( 284 <div className="kl-ga-main-wrap"> 285 <label className="kgr_title">{KgrTitle}</label> 286 <div id="kl-ga-main-wrap" className={`kl-ga-inner-wrap ${ka_grc_classes}`}></div> 287 </div> 288 )} 289 290 {/* Payment reCAPTCHA */} 291 {isPaymentEnabled && ( 292 <div className="kl-ga-payment-wrap"> 293 <label className="kgr_payment_title">{KgrPaymentTitle}</label> 294 <div id="kl-ga-payment-wrap" className={`kl-ga-inner-wrap ${ka_Payment_classes}`}></div> 295 </div> 296 )} 297 </> 298 ); 299};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.