From 318217acb9a80505ebb2e45e9c5051ba35ec1d9a Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Wed, 6 Sep 2023 11:55:26 +0100 Subject: [PATCH] Fix GooglePay general fixes / improvements --- modules.php | 3 +- .../js/modules/Helper/ScriptLoading.js | 11 +------ .../ppcp-button/src/Assets/SmartButton.php | 26 ++++++++------- modules/ppcp-googlepay/extensions.php | 21 +++++++++--- .../ppcp-googlepay/resources/css/styles.scss | 32 +++++++++++++++---- .../resources/js/GooglepayButton.js | 2 ++ .../ppcp-googlepay/resources/js/boot-block.js | 9 +++++- modules/ppcp-googlepay/src/Assets/Button.php | 10 +++--- modules/ppcp-wc-gateway/services.php | 12 ++++++- 9 files changed, 85 insertions(+), 41 deletions(-) diff --git a/modules.php b/modules.php index 02fc48a63..fd2e4777b 100644 --- a/modules.php +++ b/modules.php @@ -29,7 +29,8 @@ return function ( string $root_dir ): iterable { ( require "$modules_dir/ppcp-blocks/module.php" )(), ); if ( apply_filters( - 'inpsyde_feature_flags_woocommerce_paypal_payments_googlepay_enabled', + //phpcs:disable WordPress.NamingConventions.ValidHookName.UseUnderscores + 'woocommerce.feature-flags.woocommerce_paypal_payments.googlepay_enabled', getenv( 'PCP_GOOGLEPAY_ENABLED' ) === '1' ) ) { $modules[] = ( require "$modules_dir/ppcp-googlepay/module.php" )(); diff --git a/modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js b/modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js index 84de36af6..fea81923b 100644 --- a/modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js +++ b/modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js @@ -7,8 +7,7 @@ import {keysToCamelCase} from "./Utils"; // This component may be used by multiple modules. This assures that options are shared between all instances. let options = window.ppcpWidgetBuilder = window.ppcpWidgetBuilder || { isLoading: false, - onLoadedCallbacks: [], - loadingWaitTime: 5000 // 5 seconds + onLoadedCallbacks: [] }; export const loadPaypalScript = (config, onLoaded) => { @@ -27,13 +26,6 @@ export const loadPaypalScript = (config, onLoaded) => { } options.isLoading = true; - // Arm a timeout so the module isn't locked on isLoading state on failure. - let loadingTimeout = setTimeout(() => { - console.error('Failed to load PayPal script.'); - options.isLoading = false; - options.onLoadedCallbacks = []; - }, options.loadingWaitTime); - // Callback to be called once the PayPal script is loaded. const callback = (paypal) => { widgetBuilder.setPaypal(paypal); @@ -44,7 +36,6 @@ export const loadPaypalScript = (config, onLoaded) => { options.isLoading = false; options.onLoadedCallbacks = []; - clearTimeout(loadingTimeout); } // Build the PayPal script options. diff --git a/modules/ppcp-button/src/Assets/SmartButton.php b/modules/ppcp-button/src/Assets/SmartButton.php index 6fbe65b29..6d88e7ec6 100644 --- a/modules/ppcp-button/src/Assets/SmartButton.php +++ b/modules/ppcp-button/src/Assets/SmartButton.php @@ -462,8 +462,7 @@ class SmartButton implements SmartButtonInterface { return; } - $this->button_renderer( PayPalGateway::ID ); - do_action( 'woocommerce_paypal_payments_single_product_button_render' ); + $this->button_renderer( PayPalGateway::ID, 'woocommerce_paypal_payments_single_product_button_render' ); }, 31 ); @@ -495,18 +494,16 @@ class SmartButton implements SmartButtonInterface { add_action( $this->pay_order_renderer_hook(), function (): void { - $this->button_renderer( PayPalGateway::ID ); + $this->button_renderer( PayPalGateway::ID, 'woocommerce_paypal_payments_payorder_button_render' ); $this->button_renderer( CardButtonGateway::ID ); - do_action( 'woocommerce_paypal_payments_payorder_button_render' ); }, 20 ); add_action( $this->checkout_button_renderer_hook(), function (): void { - $this->button_renderer( PayPalGateway::ID ); + $this->button_renderer( PayPalGateway::ID, 'woocommerce_paypal_payments_checkout_button_render' ); $this->button_renderer( CardButtonGateway::ID ); - do_action( 'woocommerce_paypal_payments_checkout_button_render' ); } ); @@ -518,8 +515,7 @@ class SmartButton implements SmartButtonInterface { return; } - $this->button_renderer( PayPalGateway::ID ); - do_action( 'woocommerce_paypal_payments_cart_button_render' ); + $this->button_renderer( PayPalGateway::ID, 'woocommerce_paypal_payments_cart_button_render' ); }, 20 ); @@ -622,9 +618,10 @@ class SmartButton implements SmartButtonInterface { /** * Renders the HTML for the buttons. * - * @param string $gateway_id The gateway ID, like 'ppcp-gateway'. + * @param string $gateway_id The gateway ID, like 'ppcp-gateway'. + * @param string|null $action_name The action name to be called. */ - public function button_renderer( string $gateway_id ) { + public function button_renderer( string $gateway_id, string $action_name = null ) { $available_gateways = WC()->payment_gateways->get_available_payment_gateways(); @@ -634,7 +631,14 @@ class SmartButton implements SmartButtonInterface { // The wrapper is needed for the loading spinner, // otherwise jQuery block() prevents buttons rendering. - echo '
'; + echo '
'; + echo '
'; + + if ( null !== $action_name ) { + do_action( $action_name ); + } + + echo '
'; } /** diff --git a/modules/ppcp-googlepay/extensions.php b/modules/ppcp-googlepay/extensions.php index bd11f0387..87d929405 100644 --- a/modules/ppcp-googlepay/extensions.php +++ b/modules/ppcp-googlepay/extensions.php @@ -29,7 +29,7 @@ return array( $fields, 'allow_card_button_gateway', array( - 'googlepay_button_enabled' => array( + 'googlepay_button_enabled' => array( 'title' => __( 'Google Pay Button', 'woocommerce-paypal-payments' ), 'type' => 'checkbox', 'label' => __( 'Enable Google Pay button', 'woocommerce-paypal-payments' ), @@ -44,14 +44,18 @@ return array( 'handler' => 'SubElementsHandler', 'options' => array( 'values' => array( '1' ), - 'elements' => array( '#field-googlepay_button_color', '#field-googlepay_button_type' ), + 'elements' => array( + '#field-googlepay_button_color', + '#field-googlepay_button_type', + '#field-googlepay_button_shipping_enabled', + ), ), ), ) ), ), ), - 'googlepay_button_color' => array( + 'googlepay_button_color' => array( 'title' => str_repeat( ' ', 6 ) . __( 'Button Color', 'woocommerce-paypal-payments' ), 'type' => 'select', 'label' => '', @@ -63,7 +67,7 @@ return array( 'gateway' => 'paypal', 'requirements' => array(), ), - 'googlepay_button_type' => array( + 'googlepay_button_type' => array( 'title' => str_repeat( ' ', 6 ) . __( 'Button Type', 'woocommerce-paypal-payments' ), 'type' => 'select', 'class' => array(), @@ -74,6 +78,15 @@ return array( 'gateway' => 'paypal', 'requirements' => array(), ), + 'googlepay_button_shipping_enabled' => array( + 'title' => str_repeat( ' ', 6 ) . __( 'Shipping Callback', 'woocommerce-paypal-payments' ), + 'type' => 'checkbox', + 'label' => __( 'Enable Google Pay shipping callback', 'woocommerce-paypal-payments' ), + 'default' => 'no', + 'screens' => array( State::STATE_ONBOARDED ), + 'gateway' => 'paypal', + 'requirements' => array(), + ), ) ); }, diff --git a/modules/ppcp-googlepay/resources/css/styles.scss b/modules/ppcp-googlepay/resources/css/styles.scss index ef229bac5..c7f8a80a1 100644 --- a/modules/ppcp-googlepay/resources/css/styles.scss +++ b/modules/ppcp-googlepay/resources/css/styles.scss @@ -1,6 +1,7 @@ .ppcp-button-googlepay { - margin: 5px 0; + margin: 7px 0; overflow: hidden; + min-height: 40px; height: 45px; &.ppcp-button-pill { @@ -15,14 +16,31 @@ .woocommerce-checkout { .ppcp-button-googlepay { - margin: 0; - border-radius: 18px; - height: 38px; + margin-top: 0; } } -.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { - .ppcp-button-googlepay { - margin: 0; +.ppcp-has-googlepay-block { + + .wp-block-woocommerce-checkout { + .ppcp-button-googlepay { + margin: 0; + height: 40px; + } } + + .wp-block-woocommerce-cart { + .ppcp-button-googlepay { + margin: 0; + height: 40px; + } + /* Workaround for blocks grid */ + .wc-block-components-express-payment__event-buttons { + display: block; + li[id*="express-payment-method-ppcp-"] { + padding-bottom: 0; + } + } + } + } diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js index 5bd9ff968..7ab960270 100644 --- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js +++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js @@ -126,6 +126,8 @@ class GooglepayButton { const paymentDataRequest = await this.paymentDataRequest(); console.log('[GooglePayButton] onButtonClick: paymentDataRequest', paymentDataRequest, this.context); + window.ppcpFundingSource = 'googlepay'; // TODO : do this on another place like on create order + this.paymentsClient.loadPaymentData(paymentDataRequest); } diff --git a/modules/ppcp-googlepay/resources/js/boot-block.js b/modules/ppcp-googlepay/resources/js/boot-block.js index adafe7b9e..8b7ab78fb 100644 --- a/modules/ppcp-googlepay/resources/js/boot-block.js +++ b/modules/ppcp-googlepay/resources/js/boot-block.js @@ -24,6 +24,13 @@ const GooglePayComponent = () => { manager.init(); }; + useEffect(() => { + const bodyClass = 'ppcp-has-googlepay-block'; + if (!document.body.classList.contains(bodyClass)) { + document.body.classList.add(bodyClass); + } + }, []); + useEffect(() => { // Load GooglePay SDK loadCustomScript({ url: buttonConfig.sdk_url }).then(() => { @@ -44,7 +51,7 @@ const GooglePayComponent = () => { }, [paypalLoaded, googlePayLoaded]); return ( -
+
); } diff --git a/modules/ppcp-googlepay/src/Assets/Button.php b/modules/ppcp-googlepay/src/Assets/Button.php index ea6de33df..b9ac0a2d0 100644 --- a/modules/ppcp-googlepay/src/Assets/Button.php +++ b/modules/ppcp-googlepay/src/Assets/Button.php @@ -138,7 +138,7 @@ class Button implements ButtonInterface { * * @psalm-suppress MissingClosureParamType */ - private function add_onboarding_options( $options ): string { + public function add_onboarding_options( $options ): string { $checked = ''; try { $onboard_with_apple = $this->settings->get( 'ppcp-onboarding-apple' ); @@ -162,7 +162,7 @@ class Button implements ButtonInterface { * @param array $data The referrals data. * @return array */ - private function add_partner_referrals_data( array $data ): array { + public function add_partner_referrals_data( array $data ): array { try { $onboard_with_google = $this->settings->get( 'ppcp-onboarding-google' ); if ( ! wc_string_to_bool( $onboard_with_google ) ) { @@ -326,10 +326,8 @@ class Button implements ButtonInterface { */ private function googlepay_button(): void { ?> -
-
- -
+
+
_x( 'Pay Later', 'Name of payment method', 'woocommerce-paypal-payments' ), ); }, + + 'wcgateway.extra-funding-sources' => static function( ContainerInterface $container ): array { + return array( + 'googlepay' => _x( 'Google Pay', 'Name of payment method', 'woocommerce-paypal-payments' ), + ); + }, + /** * The sources that do not cause issues about redirecting (on mobile, ...) and sometimes not returning back. */ @@ -1034,7 +1041,10 @@ return array( 'wcgateway.funding-source.renderer' => function ( ContainerInterface $container ) : FundingSourceRenderer { return new FundingSourceRenderer( $container->get( 'wcgateway.settings' ), - $container->get( 'wcgateway.all-funding-sources' ) + array_merge( + $container->get( 'wcgateway.all-funding-sources' ), + $container->get( 'wcgateway.extra-funding-sources' ) + ) ); },