From 6a205d1413c52561885331d603c2b488d42c63d3 Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Fri, 25 Aug 2023 16:25:20 +0100 Subject: [PATCH] Add block support in GooglePay --- .../ppcp-googlepay/resources/css/styles.scss | 6 + .../resources/js/GooglepayManager.js | 24 ++-- .../ppcp-googlepay/resources/js/boot-block.js | 73 +++++++++++ modules/ppcp-googlepay/services.php | 22 +++- .../src/Assets/BlocksPaymentMethod.php | 114 ++++++++++++++++++ .../{GooglepayButton.php => Button.php} | 4 +- .../ppcp-googlepay/src/GooglepayModule.php | 7 ++ modules/ppcp-googlepay/webpack.config.js | 1 + 8 files changed, 232 insertions(+), 19 deletions(-) create mode 100644 modules/ppcp-googlepay/resources/js/boot-block.js create mode 100644 modules/ppcp-googlepay/src/Assets/BlocksPaymentMethod.php rename modules/ppcp-googlepay/src/Assets/{GooglepayButton.php => Button.php} (98%) diff --git a/modules/ppcp-googlepay/resources/css/styles.scss b/modules/ppcp-googlepay/resources/css/styles.scss index b9fd956db..8b9699e7f 100644 --- a/modules/ppcp-googlepay/resources/css/styles.scss +++ b/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; + } +} diff --git a/modules/ppcp-googlepay/resources/js/GooglepayManager.js b/modules/ppcp-googlepay/resources/js/GooglepayManager.js index 12c1c9019..bd7482fc5 100644 --- a/modules/ppcp-googlepay/resources/js/GooglepayManager.js +++ b/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'); diff --git a/modules/ppcp-googlepay/resources/js/boot-block.js b/modules/ppcp-googlepay/resources/js/boot-block.js new file mode 100644 index 000000000..00ab91aeb --- /dev/null +++ b/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 ( +
+ ); +} + +const features = ['products']; +let registerMethod = registerExpressPaymentMethod; + +registerMethod({ + name: buttonData.id, + label:
, + content: , + edit: , + ariaLabel: buttonData.title, + canMakePayment: () => buttonData.enabled, + supports: { + features: features, + }, +}); diff --git a/modules/ppcp-googlepay/services.php b/modules/ppcp-googlepay/services.php index ff8addcd5..365c8ba56 100644 --- a/modules/ppcp-googlepay/services.php +++ b/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'; }, diff --git a/modules/ppcp-googlepay/src/Assets/BlocksPaymentMethod.php b/modules/ppcp-googlepay/src/Assets/BlocksPaymentMethod.php new file mode 100644 index 000000000..e02b8c4ad --- /dev/null +++ b/modules/ppcp-googlepay/src/Assets/BlocksPaymentMethod.php @@ -0,0 +1,114 @@ +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(), + ); + } +} diff --git a/modules/ppcp-googlepay/src/Assets/GooglepayButton.php b/modules/ppcp-googlepay/src/Assets/Button.php similarity index 98% rename from modules/ppcp-googlepay/src/Assets/GooglepayButton.php rename to modules/ppcp-googlepay/src/Assets/Button.php index b0ee76e13..2de8c24b5 100644 --- a/modules/ppcp-googlepay/src/Assets/GooglepayButton.php +++ b/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. diff --git a/modules/ppcp-googlepay/src/GooglepayModule.php b/modules/ppcp-googlepay/src/GooglepayModule.php index 5f011f74e..0aad8ab2f 100644 --- a/modules/ppcp-googlepay/src/GooglepayModule.php +++ b/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' ) ); + } + ); } /** diff --git a/modules/ppcp-googlepay/webpack.config.js b/modules/ppcp-googlepay/webpack.config.js index d54838da6..2d14144fa 100644 --- a/modules/ppcp-googlepay/webpack.config.js +++ b/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: {