Merge pull request #3569 from woocommerce/PCP-4992-cross-browser-appswitch

Cross browser AppSwitch

Author: Dinamiko

modules/ppcp-api-client/src/Factory/ReturnUrlFactory.php

@@ -1,9 +1,4 @@
 <?php
-/**
- * Factory for determining the appropriate return URL based on context.
- *
- * @package WooCommerce\PayPalCommerce\ApiClient\Factory
- */
 
 declare(strict_types=1);
 
@@ -12,14 +7,34 @@
 use WooCommerce\PayPalCommerce\ApiClient\Exception\RuntimeException;
 
 /**
- * Class ReturnUrlFactory
+ * Factory for determining the appropriate return URL based on context.
  */
 class ReturnUrlFactory {
+	public const PCP_QUERY_ARG = 'pcp-return';
 
 	/**
+	 * @param string                $context The context, like in ContextTrait.
+	 * @param array<string, mixed>  $request_data The request parameters, if exist.
+	 *  'order_id`, 'purchase_units' etc.
+	 * @param array<string, string> $custom_query_args Additional query args to add into the URL.
+	 *
 	 * @throws RuntimeException When required data is missing for the context.
 	 */
-	public function from_context( string $context, array $request_data = array() ): string {
+	public function from_context(
+		string $context,
+		array $request_data = array(),
+		array $custom_query_args = array()
+	): string {
+		return add_query_arg(
+			array_merge(
+				array( self::PCP_QUERY_ARG => 'button' ),
+				$custom_query_args
+			),
+			$this->wc_url_from_context( $context, $request_data )
+		);
+	}
+
+	protected function wc_url_from_context( string $context, array $request_data = array() ): string {
 		switch ( $context ) {
 			case 'cart':
 			case 'cart-block':

modules/ppcp-blocks/resources/js/Components/paypal.js

@@ -21,6 +21,7 @@ import {
 	onApproveSavePayment,
 } from '../paypal-config';
 import { useRef } from 'react';
+import Spinner from '../../../../ppcp-button/resources/js/modules/Helper/Spinner';
 
 const PAYPAL_GATEWAY_ID = 'ppcp-gateway';
 
@@ -52,8 +53,11 @@ export const PayPalComponent = ( {
 		useState( false );
 
 	const [ paypalScriptLoaded, setPaypalScriptLoaded ] = useState( false );
+	const [ isFullPageSpinnerActive, setIsFullPageSpinnerActive ] =
+		useState( false );
 
 	const paypalButtonRef = useRef( null );
+	const spinnerRef = useRef( null );
 
 	if ( ! paypalScriptLoaded ) {
 		if ( ! paypalScriptPromise ) {
@@ -70,6 +74,18 @@ export const PayPalComponent = ( {
 		? `${ config.id }-${ fundingSource }`
 		: config.id;
 
+	// Full-page spinner used to block UI interactions during flows like AppSwitch.
+	useEffect( () => {
+		if ( isFullPageSpinnerActive ) {
+			if ( ! spinnerRef.current ) {
+				spinnerRef.current = Spinner.fullPage();
+			}
+			spinnerRef.current.block();
+		} else if ( spinnerRef.current ) {
+			spinnerRef.current.unblock();
+		}
+	}, [ isFullPageSpinnerActive ] );
+
 	useEffect( () => {
 		// fill the form if in continuation (for product or mini-cart buttons)
 		if ( continuationFilled || ! config.scriptData.continuation?.order ) {
@@ -286,6 +302,14 @@ export const PayPalComponent = ( {
 		};
 	}, [ onPaymentSetup, paypalOrder, activePaymentMethod ] );
 
+	useEffect( () => {
+		const unsubscribe = onCheckoutFail( () => {
+			setIsFullPageSpinnerActive( false );
+		} );
+
+		return unsubscribe;
+	}, [ onCheckoutFail ] );
+
 	useEffect( () => {
 		if ( activePaymentMethod !== methodId ) {
 			return;
@@ -336,7 +360,8 @@ export const PayPalComponent = ( {
 						setGotoContinuationOnError,
 						onSubmit,
 						onError,
-						onClose
+						onClose,
+						setIsFullPageSpinnerActive
 					);
 				},
 			}
@@ -491,7 +516,8 @@ export const PayPalComponent = ( {
 					setGotoContinuationOnError,
 					onSubmit,
 					onError,
-					onClose
+					onClose,
+					setIsFullPageSpinnerActive
 				)
 			}
 			onShippingOptionsChange={ getOnShippingOptionsChange(

modules/ppcp-blocks/resources/js/paypal-config.js

@@ -64,8 +64,11 @@ export const handleApprove = async (
 	setGotoContinuationOnError,
 	onSubmit,
 	onError,
-	onClose
+	onClose,
+	setIsFullPageSpinnerActive
 ) => {
+	setIsFullPageSpinnerActive( true );
+
 	try {
 		let order;
 
@@ -168,6 +171,8 @@ export const handleApprove = async (
 	} catch ( err ) {
 		console.error( err );
 
+		setIsFullPageSpinnerActive( false );
+
 		onError( err.message );
 
 		onClose();

modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstrap.js

@@ -8,6 +8,7 @@ import SimulateCart from '../Helper/SimulateCart';
 import { strRemoveWord, strAddWord, throttle } from '../Helper/Utils';
 import merge from 'deepmerge';
 import { debounce } from '../../../../../ppcp-blocks/resources/js/Helper/debounce';
+import ResumeFlowHelper from '../Helper/ResumeFlowHelper';
 
 class SingleProductBootstrap {
 	constructor( gateway, renderer, errorHandler ) {
@@ -53,7 +54,10 @@ class SingleProductBootstrap {
 			return;
 		}
 
-		this.render();
+		// Avoid re-rendering during the resume flow to prevent duplicate onApprove callbacks.
+		if ( ! ResumeFlowHelper.isResumeFlow() ) {
+			this.render();
+		}
 
 		this.renderer.enableSmartButtons( this.gateway.button.wrapper );
 		show( this.gateway.button.wrapper );

modules/ppcp-button/resources/js/modules/Helper/Spinner.js

@@ -14,12 +14,16 @@ class Spinner {
 				background: '#fff',
 				opacity: 0.6,
 			},
+			baseZ: 10000,
 		} );
 	}
 
 	unblock() {
 		jQuery( this.target ).unblock();
 	}
-}
 
+	static fullPage() {
+		return new Spinner( window );
+	}
+}
 export default Spinner;

modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForContinue.js

@@ -1,3 +1,5 @@
+import Spinner from '../Helper/Spinner';
+
 const initiateRedirect = ( successUrl ) => {
 	/**
 	 * Notice how this step initiates a redirect to a new page using a plain
@@ -15,6 +17,10 @@ const initiateRedirect = ( successUrl ) => {
 
 const onApprove = ( context, errorHandler ) => {
 	return ( data, actions ) => {
+		// Block the entire page during approval process
+		const spinner = Spinner.fullPage();
+		spinner.block();
+
 		const canCreateOrder =
 			! context.config.vaultingEnabled || data.paymentSource !== 'venmo';
 
@@ -50,6 +56,9 @@ const onApprove = ( context, errorHandler ) => {
 
 				const orderReceivedUrl = approveData.data?.order_received_url;
 				initiateRedirect( orderReceivedUrl || context.config.redirect );
+			} )
+			.finally( () => {
+				spinner.unblock();
 			} );
 	};
 };

modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForPayNow.js

@@ -1,3 +1,8 @@
+import {
+	getCurrentPaymentMethod,
+	PaymentMethods,
+} from '../Helper/CheckoutMethodState';
+
 const onApprove = ( context, errorHandler, spinner ) => {
 	return ( data, actions ) => {
 		spinner.block();
@@ -34,6 +39,15 @@ const onApprove = ( context, errorHandler, spinner ) => {
 					}
 					throw new Error( data.data.message );
 				}
+
+				// in some cases a different method may get selected,
+				// such as when returning from AppSwitch in a different browser and PayPal is not default
+				if ( ! getCurrentPaymentMethod().startsWith( 'ppcp-' ) ) {
+					jQuery(
+						`input[name="payment_method"][value="${ PaymentMethods.PAYPAL }"]`
+					).prop( 'checked', true );
+				}
+
 				document.querySelector( '#place_order' ).click();
 			} );
 	};

modules/ppcp-button/services.php

@@ -18,6 +18,8 @@
 use WooCommerce\PayPalCommerce\Button\Helper\ContextTrait;
 use WooCommerce\PayPalCommerce\Button\Helper\DisabledFundingSources;
 use WooCommerce\PayPalCommerce\Button\Helper\WooCommerceOrderCreator;
+use WooCommerce\PayPalCommerce\Button\Session\CartDataFactory;
+use WooCommerce\PayPalCommerce\Button\Session\CartDataTransientStorage;
 use WooCommerce\PayPalCommerce\Button\Validation\CheckoutFormValidator;
 use WooCommerce\PayPalCommerce\Button\Endpoint\ValidateCheckoutEndpoint;
 use WooCommerce\PayPalCommerce\Session\SessionHandler;
@@ -236,6 +238,8 @@ public function get_context(): string {
 			$session_handler,
 			$settings,
 			$early_order_handler,
+			$container->get( 'button.session.factory.card-data' ),
+			$container->get( 'button.session.storage.card-data.transient' ),
 			$registration_needed,
 			$container->get( 'wcgateway.settings.card_billing_data_mode' ),
 			$container->get( 'button.early-wc-checkout-validation-enabled' ),
@@ -407,7 +411,15 @@ public function get_context(): string {
 		return new WooCommerceOrderCreator(
 			$container->get( 'wcgateway.funding-source.renderer' ),
 			$container->get( 'session.handler' ),
-			$container->get( 'wc-subscriptions.helper' )
+			$container->get( 'wc-subscriptions.helper' ),
+			$container->get( 'button.session.factory.card-data' )
 		);
 	},
+
+	'button.session.factory.card-data'            => static function ( ContainerInterface $container ): CartDataFactory {
+		return new CartDataFactory();
+	},
+	'button.session.storage.card-data.transient'  => static function ( ContainerInterface $container ): CartDataTransientStorage {
+		return new CartDataTransientStorage();
+	},
 );

modules/ppcp-button/src/ButtonModule.php

@@ -9,6 +9,8 @@
 
 namespace WooCommerce\PayPalCommerce\Button;
 
+use WooCommerce\PayPalCommerce\ApiClient\Endpoint\OrderEndpoint;
+use WooCommerce\PayPalCommerce\ApiClient\Factory\ReturnUrlFactory;
 use WooCommerce\PayPalCommerce\Button\Endpoint\ApproveSubscriptionEndpoint;
 use WooCommerce\PayPalCommerce\Button\Endpoint\CartScriptParamsEndpoint;
 use WooCommerce\PayPalCommerce\Button\Endpoint\SaveCheckoutFormEndpoint;
@@ -22,6 +24,8 @@
 use WooCommerce\PayPalCommerce\Button\Endpoint\GetOrderEndpoint;
 use WooCommerce\PayPalCommerce\Button\Endpoint\StartPayPalVaultingEndpoint;
 use WooCommerce\PayPalCommerce\Button\Helper\EarlyOrderHandler;
+use WooCommerce\PayPalCommerce\Button\Helper\WooCommerceOrderCreator;
+use WooCommerce\PayPalCommerce\Button\Session\CartDataTransientStorage;
 use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExecutableModule;
 use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExtendingModule;
 use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
@@ -98,6 +102,8 @@ static function ( $value ) use ( $c ) {
 
 		$this->register_ajax_endpoints( $c );
 
+		$this->register_appswitch_crossbrowser_handler( $c );
+
 		return true;
 	}
 
@@ -228,4 +234,75 @@ static function () use ( $container ) {
 			}
 		);
 	}
+
+	private function register_appswitch_crossbrowser_handler( ContainerInterface $container ): void {
+		if ( ! $container->get( 'wcgateway.appswitch-enabled' ) ) {
+			return;
+		}
+
+		// After returning from cross-browser AppSwitch (started in non-default browser, then redirected to the default one)
+		// we need to retrieve the saved cart and PayPal order, create a WC order and redirect to Pay for order.
+		add_action(
+			'wp',
+			static function () use ( $container ) {
+				// phpcs:ignore WordPress.Security.NonceVerification
+				if ( ! isset( $_GET[ ReturnUrlFactory::PCP_QUERY_ARG ] ) ) {
+					return;
+				}
+
+				if ( is_checkout_pay_page() ) {
+					return;
+				}
+
+				// phpcs:ignore WordPress.Security.NonceVerification
+				if ( ! isset( $_GET[ CreateOrderEndpoint::RETURN_URL_CART_QUERY_ARG ] ) ) {
+					return;
+				}
+
+				// phpcs:ignore WordPress.Security.NonceVerification
+				$cart_key = wc_clean( wp_unslash( $_GET[ CreateOrderEndpoint::RETURN_URL_CART_QUERY_ARG ] ) );
+				if ( ! is_string( $cart_key ) ) {
+					return;
+				}
+
+				$card_data_storage = $container->get( 'button.session.storage.card-data.transient' );
+				assert( $card_data_storage instanceof CartDataTransientStorage );
+
+				$cart_data = $card_data_storage->get( $cart_key );
+				if ( ! $cart_data ) {
+					return;
+				}
+
+				// Delete the data to avoid accidentally triggering it again, duplicating orders etc.
+				$card_data_storage->remove( $cart_data );
+
+				if ( ! WC()->cart ) {
+					return;
+				}
+				// The current cart is the same, so we don't need to do anything (probably not cross-browser).
+				if ( WC()->cart->get_cart_hash() === $cart_data->cart_hash() ) {
+					return;
+				}
+
+				$paypal_order_id = $cart_data->paypal_order_id();
+				if ( empty( $paypal_order_id ) ) {
+					return;
+				}
+
+				$order_endpoint = $container->get( 'api.endpoint.order' );
+				assert( $order_endpoint instanceof OrderEndpoint );
+
+				$paypal_order = $order_endpoint->order( $paypal_order_id );
+
+				$wc_order_creator = $container->get( 'button.helper.wc-order-creator' );
+				assert( $wc_order_creator instanceof WooCommerceOrderCreator );
+
+				$wc_order = $wc_order_creator->create_from_paypal_order( $paypal_order, $cart_data );
+
+				// Redirect via JS because we need to keep the # parameters which are not accessible on the server side.
+				// phpcs:ignore WordPress.Security.EscapeOutput
+				echo "<script>location.href = '" . $wc_order->get_checkout_payment_url() . "' + location.hash;</script>";
+			}
+		);
+	}
 }