fix(recaptcha): improvements for reCAPTCHA v2 + modal checkout (#3692)

* fix(modal-checkout): use clone of #place_order button

* feat: allow "auto-complete orders" for shippable products too

BREAKING CHANGE: shippable product orders will auto-complete by default after this change.

* chore: undo unwanted change

includes/reader-revenue/woocommerce/class-woocommerce-products.php

@@ -52,7 +52,7 @@ public static function get_custom_options() {
 		return [
 			'newspack_autocomplete_orders' => [
 				'id'            => '_newspack_autocomplete_orders',
-				'wrapper_class' => 'show_if_virtual',
+				'wrapper_class' => '',
 				'label'         => __( 'Auto-complete orders', 'newspack-plugin' ),
 				'description'   => __( 'Allow orders containing this product to automatically complete upon successful payment.', 'newspack-plugin' ),
 				'default'       => 'yes',
@@ -197,11 +197,7 @@ public static function save_custom_variation_options( $variation, $i ) {
 	 * @param WC_Product $product The product associated with this order item.
 	 */
 	public static function require_order_processing( $needs_proccessing, $product ) {
-		if ( $product->is_virtual() ) {
-			return self::get_custom_option_value( $product, 'newspack_autocomplete_orders' ) ? false : $needs_proccessing;
-		}
-
-		return $needs_proccessing;
+		return self::get_custom_option_value( $product, 'newspack_autocomplete_orders' ) ? false : $needs_proccessing;
 	}
 }
 

src/other-scripts/recaptcha/index.js

@@ -50,11 +50,16 @@ function renderV2Widget( form, onSuccess = null, onError = null ) {
 			form.appendChild( hiddenField );
 		}
 		hiddenField.value = token;
-		const buttons = [
-			...form.querySelectorAll( 'input[type="submit"], button[type="submit"]' )
-		];
 		form.setAttribute( 'data-recaptcha-validated', '1' );
-		form.requestSubmit( buttons[ buttons.length - 1 ] );
+
+		// If the form has a #place_order button, click it.
+		const placeOrder = form.querySelector( '#place_order' );
+		if ( placeOrder ) {
+			placeOrder.click();
+		} else {
+			form.requestSubmit( form.querySelector( 'input[type="submit"], button[type="submit"]' ) );
+		}
+
 		refreshV2Widget( form );
 	};
 	// Callback when reCAPTCHA rendering fails or expires.
@@ -77,8 +82,10 @@ function renderV2Widget( form, onSuccess = null, onError = null ) {
 
 	// Attach widget to form events.
 	const attachListeners = () => {
+		form.removeAttribute( 'data-submit-button-click' );
 		getIntersectionObserver( () => renderV2Widget( form, onSuccess, onError ) ).observe( form, { attributes: true } );
-		form.addEventListener( 'submit', e => {
+
+		const handleSubmit = e => {
 			if ( ! form.hasAttribute( 'data-recaptcha-validated' ) && ! form.hasAttribute( 'data-skip-recaptcha' ) ) {
 				e.preventDefault();
 				e.stopImmediatePropagation();
@@ -94,7 +101,17 @@ function renderV2Widget( form, onSuccess = null, onError = null ) {
 			} else {
 				form.removeAttribute( 'data-recaptcha-validated' );
 			}
-		}, true );
+		};
+		form.addEventListener( 'submit', handleSubmit, true );
+
+		const placeOrderClone = form.querySelector( '#place_order_clone' );
+		if ( placeOrderClone ) {
+			placeOrderClone.addEventListener( 'click', e => {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				handleSubmit( e )
+			}, true );
+		}
 	}
 	// Refresh reCAPTCHA widgets on Woo checkout update and error.
 	if ( jQuery ) {

src/other-scripts/recaptcha/style.scss

@@ -23,3 +23,14 @@
 		margin-top: 0 !important;
 	}
 }
+
+// Hide the "real" #place_order button but only in modal checkout and if we've rendered a v2 widget.
+/* stylelint-disable-next-line selector-id-pattern */
+#newspack_modal_checkout_container form[name="checkout"] {
+	&[data-recaptcha-widget-id] {
+		/* stylelint-disable-next-line selector-id-pattern */
+		#place_order {
+			display: none !important;
+		}
+	}
+}