Add block support in GooglePay

modules/ppcp-googlepay/resources/css/styles.scss

@@ -12,3 +12,9 @@
 		height: 38px;
 	}
 }
+
+.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
+	#ppc-button-googlepay-container {
+		margin-top: 0;
+	}
+}

modules/ppcp-googlepay/resources/js/GooglepayManager.js

@@ -262,24 +262,24 @@ class GooglepayManager {
                 );
 
                 // == checkout page ==
-                const spinner = new Spinner();
-
-                const actionHandler = new CheckoutActionHandler(
-                    this.ppcpConfig,
-                    errorHandler,
-                    spinner
-                );
-
-                let id = await actionHandler.configuration().createOrder(null, null);
-
-                // == cart page ==
-                // const actionHandler = new CartActionHandler(
+                // const spinner = new Spinner();
+                //
+                // const actionHandler = new CheckoutActionHandler(
                 //     this.ppcpConfig,
                 //     errorHandler,
+                //     spinner
                 // );
                 //
                 // let id = await actionHandler.configuration().createOrder(null, null);
 
+                // == cart page ==
+                const actionHandler = new CartActionHandler(
+                    this.ppcpConfig,
+                    errorHandler,
+                );
+
+                let id = await actionHandler.configuration().createOrder(null, null);
+
                 // == product page ==
                 // function form() {
                 //     return document.querySelector('form.cart');

modules/ppcp-googlepay/resources/js/boot-block.js

@@ -0,0 +1,73 @@
+import {useEffect, useState} from '@wordpress/element';
+import {registerExpressPaymentMethod, registerPaymentMethod} from '@woocommerce/blocks-registry';
+import {loadPaypalScript} from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'
+import GooglepayManager from "./GooglepayManager";
+import {loadCustomScript} from "@paypal/paypal-js";
+
+const ppcpData = wc.wcSettings.getSetting('ppcp-gateway_data');
+const ppcpConfig = ppcpData.scriptData;
+
+const buttonData = wc.wcSettings.getSetting('ppcp-googlepay_data');
+const buttonConfig = buttonData.scriptData;
+
+if (typeof window.PayPalCommerceGateway === 'undefined') {
+    window.PayPalCommerceGateway = ppcpConfig;
+}
+
+console.log('ppcpData', ppcpData);
+console.log('ppcpConfig', ppcpConfig);
+console.log('buttonData', buttonData);
+console.log('buttonConfig', buttonConfig);
+
+const GooglePayComponent = () => {
+    console.log('GooglePayComponent render');
+
+    const [bootstrapped, setBootstrapped] = useState(false);
+    const [paypalLoaded, setPaypalLoaded] = useState(false);
+    const [googlePayLoaded, setGooglePayLoaded] = useState(false);
+
+    const manager = new GooglepayManager(buttonConfig, ppcpConfig);
+
+    const bootstrap = function () {
+        const manager = new GooglepayManager(buttonConfig, ppcpConfig);
+        manager.init();
+    };
+
+    useEffect(() => {
+        // Load GooglePay SDK
+        loadCustomScript({ url: buttonConfig.sdk_url }).then(() => {
+            setGooglePayLoaded(true);
+        });
+
+        // Load PayPal
+        loadPaypalScript(ppcpConfig, () => {
+            setPaypalLoaded(true);
+        });
+    });
+
+    useEffect(() => {
+        if (!bootstrapped && paypalLoaded && googlePayLoaded) {
+            setBootstrapped(true);
+            bootstrap();
+        }
+    }, [paypalLoaded, googlePayLoaded]);
+
+    return (
+        <div id={buttonConfig.button.wrapper.replace('#', '')}></div>
+    );
+}
+
+const features = ['products'];
+let registerMethod = registerExpressPaymentMethod;
+
+registerMethod({
+    name: buttonData.id,
+    label: <div dangerouslySetInnerHTML={{__html:  buttonData.title}}/>,
+    content: <GooglePayComponent isEditing={false}/>,
+    edit: <GooglePayComponent isEditing={true}/>,
+    ariaLabel: buttonData.title,
+    canMakePayment: () => buttonData.enabled,
+    supports: {
+        features: features,
+    },
+});

modules/ppcp-googlepay/services.php

@@ -9,17 +9,19 @@ declare(strict_types=1);
 
 namespace WooCommerce\PayPalCommerce\Googlepay;
 
+use Automattic\WooCommerce\Blocks\Payments\PaymentMethodTypeInterface;
 use WooCommerce\PayPalCommerce\Button\Assets\ButtonInterface;
-use WooCommerce\PayPalCommerce\Googlepay\Assets\GooglepayButton;
+use WooCommerce\PayPalCommerce\Googlepay\Assets\BlocksPaymentMethod;
+use WooCommerce\PayPalCommerce\Googlepay\Assets\Button;
 use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
 
 return array(
 	// TODO.
 
-	'googlepay.button'  => static function ( ContainerInterface $container ): ButtonInterface {
+	'googlepay.button'                => static function ( ContainerInterface $container ): ButtonInterface {
 		// TODO : check other statuses.
 
-		return new GooglepayButton(
+		return new Button(
 			$container->get( 'googlepay.url' ),
 			$container->get( 'googlepay.sdk_url' ),
 			$container->get( 'ppcp.asset-version' ),
@@ -32,7 +34,17 @@ return array(
 		);
 	},
 
-	'googlepay.url'     => static function ( ContainerInterface $container ): string {
+	'googlepay.blocks-payment-method' => static function ( ContainerInterface $container ): PaymentMethodTypeInterface {
+		return new BlocksPaymentMethod(
+			'ppcp-googlepay',
+			$container->get( 'googlepay.url' ),
+			$container->get( 'ppcp.asset-version' ),
+			$container->get( 'googlepay.button' ),
+			$container->get( 'blocks.method' )
+		);
+	},
+
+	'googlepay.url'                   => static function ( ContainerInterface $container ): string {
 		$path = realpath( __FILE__ );
 		if ( false === $path ) {
 			return '';
@@ -43,7 +55,7 @@ return array(
 		);
 	},
 
-	'googlepay.sdk_url' => static function ( ContainerInterface $container ): string {
+	'googlepay.sdk_url'               => static function ( ContainerInterface $container ): string {
 		return 'https://pay.google.com/gp/p/js/pay.js';
 	},
 

modules/ppcp-googlepay/src/Assets/BlocksPaymentMethod.php

@@ -0,0 +1,114 @@
+<?php
+/**
+ * The googlepay blocks module.
+ *
+ * @package WooCommerce\PayPalCommerce\Googlepay
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\Googlepay\Assets;
+
+use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
+use Automattic\WooCommerce\Blocks\Payments\PaymentMethodTypeInterface;
+use WooCommerce\PayPalCommerce\Button\Assets\ButtonInterface;
+
+/**
+ * Class BlocksPaymentMethod
+ */
+class BlocksPaymentMethod extends AbstractPaymentMethodType {
+	/**
+	 * The URL of this module.
+	 *
+	 * @var string
+	 */
+	private $module_url;
+
+	/**
+	 * The assets version.
+	 *
+	 * @var string
+	 */
+	private $version;
+
+	/**
+	 * The button.
+	 *
+	 * @var ButtonInterface
+	 */
+	private $button;
+
+	/**
+	 * The paypal payment method.
+	 *
+	 * @var PaymentMethodTypeInterface
+	 */
+	private $paypal_payment_method;
+
+	/**
+	 * Assets constructor.
+	 *
+	 * @param string                     $name The name of this module.
+	 * @param string                     $module_url The url of this module.
+	 * @param string                     $version The assets version.
+	 * @param ButtonInterface            $button The button.
+	 * @param PaymentMethodTypeInterface $paypal_payment_method The paypal payment method.
+	 */
+	public function __construct(
+		string $name,
+		string $module_url,
+		string $version,
+		ButtonInterface $button,
+		PaymentMethodTypeInterface $paypal_payment_method
+	) {
+		$this->name                  = $name;
+		$this->module_url            = $module_url;
+		$this->version               = $version;
+		$this->button                = $button;
+		$this->paypal_payment_method = $paypal_payment_method;
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function initialize() {  }
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function is_active() {
+		return $this->paypal_payment_method->is_active();
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function get_payment_method_script_handles() {
+		$handle = $this->name . '-block';
+
+		wp_register_script(
+			$handle,
+			trailingslashit( $this->module_url ) . 'assets/js/boot-block.js',
+			array(),
+			$this->version,
+			true
+		);
+
+		return array( $handle );
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function get_payment_method_data() {
+		$paypal_data = $this->paypal_payment_method->get_payment_method_data();
+
+		return array(
+			'id'          => $this->name,
+			'title'       => $paypal_data['title'], // TODO : see if we should use another.
+			'description' => $paypal_data['description'], // TODO : see if we should use another.
+			'enabled'     => $paypal_data['enabled'], // This button is enabled when PayPal buttons are.
+			'scriptData'  => $this->button->script_data(),
+		);
+	}
+}

modules/ppcp-googlepay/src/Assets/Button.php

@@ -17,9 +17,9 @@ use WooCommerce\PayPalCommerce\WcGateway\Helper\SettingsStatus;
 use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
 
 /**
- * Class SmartButton
+ * Class Button
  */
-class GooglepayButton implements ButtonInterface {
+class Button implements ButtonInterface {
 
 	/**
 	 * The URL to the module.

modules/ppcp-googlepay/src/GooglepayModule.php

@@ -9,6 +9,7 @@ declare(strict_types=1);
 
 namespace WooCommerce\PayPalCommerce\Googlepay;
 
+use Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry;
 use WooCommerce\PayPalCommerce\Button\Assets\ButtonInterface;
 use WooCommerce\PayPalCommerce\Vendor\Dhii\Container\ServiceProvider;
 use WooCommerce\PayPalCommerce\Vendor\Dhii\Modular\Module\ModuleInterface;
@@ -63,6 +64,12 @@ class GooglepayModule implements ModuleInterface {
 			}
 		);
 
+		add_action(
+			'woocommerce_blocks_payment_method_type_registration',
+			function( PaymentMethodRegistry $payment_method_registry ) use ( $c ): void {
+				$payment_method_registry->register( $c->get( 'googlepay.blocks-payment-method' ) );
+			}
+		);
 	}
 
 	/**

modules/ppcp-googlepay/webpack.config.js

@@ -10,6 +10,7 @@ module.exports = {
     plugins: [ new DependencyExtractionWebpackPlugin() ],
     entry: {
         'boot': path.resolve('./resources/js/boot.js'),
+        'boot-block': path.resolve('./resources/js/boot-block.js'),
         "styles": path.resolve('./resources/css/styles.scss')
     },
     output: {