From 7782e79aae652225bd7b5b6a1b358819a7ac91ed Mon Sep 17 00:00:00 2001 From: Emili Castells Guasch Date: Tue, 18 Jun 2024 12:31:50 +0200 Subject: [PATCH 1/8] Add `buttonAttributes` for getting button styles --- modules/ppcp-blocks/resources/js/checkout-block.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-blocks/resources/js/checkout-block.js b/modules/ppcp-blocks/resources/js/checkout-block.js index bf36dcb65..fdd5e04bf 100644 --- a/modules/ppcp-blocks/resources/js/checkout-block.js +++ b/modules/ppcp-blocks/resources/js/checkout-block.js @@ -40,6 +40,7 @@ const PayPalComponent = ( { shippingData, isEditing, fundingSource, + buttonAttributes, } ) => { const { onPaymentSetup, onCheckoutFail, onCheckoutValidation } = eventRegistration; @@ -582,6 +583,12 @@ const PayPalComponent = ( { fundingSource ); + if ( typeof buttonAttributes !== 'undefined' ) { + style.height = buttonAttributes?.height + ? Number( buttonAttributes.height ) + : style.height; + } + if ( ! paypalScriptLoaded ) { return null; } @@ -606,11 +613,11 @@ const PayPalComponent = ( { } return ( data, actions ) => { - let shippingAddressChange = shouldHandleShippingInPayPal() + const shippingAddressChange = shouldHandleShippingInPayPal() ? handleShippingAddressChange( data, actions ) : null; - return shippingAddressChange; + return shippingAddressChange; }; }; From 60ffa996b0dab1d876dd47906e0f619be937ecd8 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Mon, 22 Jul 2024 13:44:48 +0200 Subject: [PATCH 2/8] Add the notice informing merchants that the Cart & Express Checkout Smart Button Stylings may be controlled by the Checkout block configuration --- modules/ppcp-googlepay/src/Assets/Button.php | 2 +- .../resources/css/gateway-settings.scss | 2 +- modules/ppcp-wc-gateway/services.php | 19 +++++++++++++++++++ .../Fields/paypal-smart-button-fields.php | 1 + 4 files changed, 22 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-googlepay/src/Assets/Button.php b/modules/ppcp-googlepay/src/Assets/Button.php index 6fab601b5..a5eed6934 100644 --- a/modules/ppcp-googlepay/src/Assets/Button.php +++ b/modules/ppcp-googlepay/src/Assets/Button.php @@ -409,7 +409,7 @@ class Button implements ButtonInterface { */ public function script_data(): array { $shipping = array( - 'enabled' => $this->settings->has( 'googlepay_button_shipping_enabled' ) + 'enabled' => $this->settings->has( 'googlepay_button_shipping_enabled' ) ? boolval( $this->settings->get( 'googlepay_button_shipping_enabled' ) ) : false, 'configured' => wc_shipping_enabled() && wc_get_shipping_method_count( false, true ) > 0, diff --git a/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss b/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss index 23e642c8f..768f95c75 100644 --- a/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss +++ b/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss @@ -32,7 +32,7 @@ @media (min-width: 1200px) { float: right; - margin-top: -300px; + margin-top: -250px; max-width: calc(100vw - 850px); } diff --git a/modules/ppcp-wc-gateway/services.php b/modules/ppcp-wc-gateway/services.php index f0d848216..4eb55a920 100644 --- a/modules/ppcp-wc-gateway/services.php +++ b/modules/ppcp-wc-gateway/services.php @@ -26,6 +26,7 @@ use WooCommerce\PayPalCommerce\Onboarding\State; use WooCommerce\PayPalCommerce\WcGateway\Admin\RenderReauthorizeAction; use WooCommerce\PayPalCommerce\WcGateway\Endpoint\CaptureCardPayment; use WooCommerce\PayPalCommerce\WcGateway\Endpoint\RefreshFeatureStatusEndpoint; +use WooCommerce\PayPalCommerce\WcGateway\Helper\CartCheckoutDetector; use WooCommerce\PayPalCommerce\WcSubscriptions\Helper\SubscriptionHelper; use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface; use WooCommerce\PayPalCommerce\WcGateway\Admin\FeesRenderer; @@ -1552,6 +1553,24 @@ return array( unset( $button_locations['mini-cart'] ); return array_keys( $button_locations ); }, + 'wcgateway.button.recommended-styling-notice' => static function ( ContainerInterface $container ) : string { + if ( CartCheckoutDetector::has_block_checkout() ) { + $block_checkout_page_string_html = '' . __( 'Checkout block', 'woocommerce-paypal-payments' ) . ''; + } else { + $block_checkout_page_string_html = __( 'Checkout block', 'woocommerce-paypal-payments' ); + } + + $notice_content = sprintf( + /* translators: %1$s: URL to the Checkout edit page. */ + __( + 'Important: The Cart & Express Checkout Smart Button Stylings may be controlled by the %1$s configuration.', + 'woocommerce-paypal-payments' + ), + $block_checkout_page_string_html + ); + + return '

' . $notice_content . '

'; + }, 'wcgateway.settings.pay-later.messaging-locations' => static function( ContainerInterface $container ): array { $button_locations = $container->get( 'wcgateway.button.locations' ); unset( $button_locations['mini-cart'] ); diff --git a/modules/ppcp-wc-gateway/src/Settings/Fields/paypal-smart-button-fields.php b/modules/ppcp-wc-gateway/src/Settings/Fields/paypal-smart-button-fields.php index 3a2513e98..f1efb1497 100644 --- a/modules/ppcp-wc-gateway/src/Settings/Fields/paypal-smart-button-fields.php +++ b/modules/ppcp-wc-gateway/src/Settings/Fields/paypal-smart-button-fields.php @@ -88,6 +88,7 @@ return function ( ContainerInterface $container, array $fields ): array { 'type' => 'checkbox', 'label' => __( 'Customize smart button style per location', 'woocommerce-paypal-payments' ), 'default' => false, + 'description' => $container->has( 'wcgateway.button.recommended-styling-notice' ) ? $container->get( 'wcgateway.button.recommended-styling-notice' ) : '', 'screens' => array( State::STATE_START, State::STATE_ONBOARDED ), 'requirements' => array(), 'gateway' => 'paypal', From 422b609b2c3d44d620468a432d9542720b400a7a Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Mon, 19 Aug 2024 01:16:20 -0500 Subject: [PATCH 3/8] Add support for buttonAttributes API in the editor --- .../resources/css/gateway-editor.scss | 3 + .../resources/js/checkout-block.js | 61 +++++++++++++++---- modules/ppcp-blocks/src/BlocksModule.php | 17 ++++++ modules/ppcp-blocks/webpack.config.js | 3 +- 4 files changed, 71 insertions(+), 13 deletions(-) create mode 100644 modules/ppcp-blocks/resources/css/gateway-editor.scss diff --git a/modules/ppcp-blocks/resources/css/gateway-editor.scss b/modules/ppcp-blocks/resources/css/gateway-editor.scss new file mode 100644 index 000000000..68c419cb8 --- /dev/null +++ b/modules/ppcp-blocks/resources/css/gateway-editor.scss @@ -0,0 +1,3 @@ +li[id^="express-payment-method-ppcp-"] div[class^="ppc-button-container-"] { + display: flex; +} diff --git a/modules/ppcp-blocks/resources/js/checkout-block.js b/modules/ppcp-blocks/resources/js/checkout-block.js index fdd5e04bf..5852b805a 100644 --- a/modules/ppcp-blocks/resources/js/checkout-block.js +++ b/modules/ppcp-blocks/resources/js/checkout-block.js @@ -1,4 +1,4 @@ -import { useEffect, useState } from '@wordpress/element'; +import { useEffect, useState, useMemo } from '@wordpress/element'; import { registerExpressPaymentMethod, registerPaymentMethod, @@ -587,6 +587,10 @@ const PayPalComponent = ( { style.height = buttonAttributes?.height ? Number( buttonAttributes.height ) : style.height; + style.borderRadius = buttonAttributes?.borderRadius + ? Number( buttonAttributes.borderRadius ) + : style.borderRadius; + style.color = buttonAttributes?.darkMode ? 'white' : ''; } if ( ! paypalScriptLoaded ) { @@ -660,19 +664,47 @@ const PayPalComponent = ( { ); }; -const BlockEditorPayPalComponent = () => { - const urlParams = { - clientId: 'test', - ...config.scriptData.url_params, - dataNamespace: 'ppcp-blocks-editor-paypal-buttons', - components: 'buttons', - }; +const BlockEditorPayPalComponent = ( { fundingSource, buttonAttributes } ) => { + const urlParams = useMemo( + () => ( { + clientId: 'test', + ...config.scriptData.url_params, + dataNamespace: 'ppcp-blocks-editor-paypal-buttons', + components: 'buttons', + } ), + [] + ); + + const style = useMemo( () => { + const configStyle = normalizeStyleForFundingSource( + config.scriptData.button.style, + fundingSource + ); + + if ( buttonAttributes ) { + return { + ...configStyle, + height: buttonAttributes.height + ? Number( buttonAttributes.height ) + : configStyle.height, + borderRadius: buttonAttributes.borderRadius + ? Number( buttonAttributes.borderRadius ) + : configStyle.borderRadius, + color: buttonAttributes.darkMode ? 'white' : configStyle.color, + }; + } + + return configStyle; + }, [ fundingSource, buttonAttributes ] ); + return ( { - return false; - } } + className={ `ppc-button-container-${ fundingSource }` } + fundingSource={ fundingSource } + style={ style } + forceReRender={ [ buttonAttributes || {} ] } + onClick={ () => false } /> ); @@ -775,6 +807,7 @@ if ( block_enabled && config.enabled ) { 'paypal', ...config.enabledFundingSources, ] ) { + console.log( 'earlier fundingSource', fundingSource ); registerExpressPaymentMethod( { name: `${ config.id }-${ fundingSource }`, paymentMethodId: config.id, @@ -787,7 +820,11 @@ if ( block_enabled && config.enabled ) { fundingSource={ fundingSource } /> ), - edit: , + edit: ( + + ), ariaLabel: config.title, canMakePayment: async () => { if ( ! paypalScriptPromise ) { diff --git a/modules/ppcp-blocks/src/BlocksModule.php b/modules/ppcp-blocks/src/BlocksModule.php index 1dd1560dd..413cc8b4d 100644 --- a/modules/ppcp-blocks/src/BlocksModule.php +++ b/modules/ppcp-blocks/src/BlocksModule.php @@ -111,6 +111,23 @@ class BlocksModule implements ModuleInterface { } ); + // Enqueue editor styles. + add_action( + 'enqueue_block_editor_assets', + static function () use ( $c ) { + $module_url = $c->get( 'blocks.url' ); + $asset_version = $c->get( 'ppcp.asset-version' ); + + wp_register_style( + 'wc-ppcp-blocks-editor', + untrailingslashit( $module_url ) . '/assets/css/gateway-editor.css', + array(), + $asset_version + ); + wp_enqueue_style( 'wc-ppcp-blocks-editor' ); + } + ); + add_filter( 'woocommerce_paypal_payments_sdk_components_hook', function( array $components ) { diff --git a/modules/ppcp-blocks/webpack.config.js b/modules/ppcp-blocks/webpack.config.js index 44ab3e68f..72bbc93ea 100644 --- a/modules/ppcp-blocks/webpack.config.js +++ b/modules/ppcp-blocks/webpack.config.js @@ -11,7 +11,8 @@ module.exports = { entry: { 'checkout-block': path.resolve('./resources/js/checkout-block.js'), 'advanced-card-checkout-block': path.resolve('./resources/js/advanced-card-checkout-block.js'), - "gateway": path.resolve('./resources/css/gateway.scss') + "gateway": path.resolve('./resources/css/gateway.scss'), + "gateway-editor": path.resolve('./resources/css/gateway-editor.scss') }, output: { path: path.resolve(__dirname, 'assets/'), From 5604454650caeeab167aed2bb50d3a40b12c486c Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Mon, 19 Aug 2024 01:19:00 -0500 Subject: [PATCH 4/8] Remove the console log --- modules/ppcp-blocks/resources/js/checkout-block.js | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/ppcp-blocks/resources/js/checkout-block.js b/modules/ppcp-blocks/resources/js/checkout-block.js index 5852b805a..13bd2c6cd 100644 --- a/modules/ppcp-blocks/resources/js/checkout-block.js +++ b/modules/ppcp-blocks/resources/js/checkout-block.js @@ -807,7 +807,6 @@ if ( block_enabled && config.enabled ) { 'paypal', ...config.enabledFundingSources, ] ) { - console.log( 'earlier fundingSource', fundingSource ); registerExpressPaymentMethod( { name: `${ config.id }-${ fundingSource }`, paymentMethodId: config.id, From f32fd228425988c4449dbf3ddf2c3413fa351ad6 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Tue, 20 Aug 2024 07:47:25 -0700 Subject: [PATCH 5/8] Remove redundant darkMode code --- modules/ppcp-blocks/resources/js/checkout-block.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/modules/ppcp-blocks/resources/js/checkout-block.js b/modules/ppcp-blocks/resources/js/checkout-block.js index 13bd2c6cd..fa39ede49 100644 --- a/modules/ppcp-blocks/resources/js/checkout-block.js +++ b/modules/ppcp-blocks/resources/js/checkout-block.js @@ -590,7 +590,6 @@ const PayPalComponent = ( { style.borderRadius = buttonAttributes?.borderRadius ? Number( buttonAttributes.borderRadius ) : style.borderRadius; - style.color = buttonAttributes?.darkMode ? 'white' : ''; } if ( ! paypalScriptLoaded ) { @@ -690,7 +689,6 @@ const BlockEditorPayPalComponent = ( { fundingSource, buttonAttributes } ) => { borderRadius: buttonAttributes.borderRadius ? Number( buttonAttributes.borderRadius ) : configStyle.borderRadius, - color: buttonAttributes.darkMode ? 'white' : configStyle.color, }; } From 21f11815b1119b650f187d6f6f2d7433559fe93b Mon Sep 17 00:00:00 2001 From: "Alex P." Date: Tue, 15 Oct 2024 10:48:04 +0300 Subject: [PATCH 6/8] Remove darkMode --- modules/ppcp-blocks/resources/js/checkout-block.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-blocks/resources/js/checkout-block.js b/modules/ppcp-blocks/resources/js/checkout-block.js index 0a62e54d8..f92263cbf 100644 --- a/modules/ppcp-blocks/resources/js/checkout-block.js +++ b/modules/ppcp-blocks/resources/js/checkout-block.js @@ -622,7 +622,7 @@ const PayPalComponent = ( { style.borderRadius = buttonAttributes?.borderRadius ? Number( buttonAttributes.borderRadius ) : style.borderRadius; - style.color = buttonAttributes?.darkMode ? 'white' : ''; + style.color = ''; } if ( ! paypalScriptLoaded ) { @@ -725,7 +725,7 @@ const BlockEditorPayPalComponent = ( { fundingSource, buttonAttributes } ) => { borderRadius: buttonAttributes.borderRadius ? Number( buttonAttributes.borderRadius ) : configStyle.borderRadius, - color: buttonAttributes.darkMode ? 'white' : configStyle.color, + color: configStyle.color, }; } From c100e07100c356193381d813c27663820883a920 Mon Sep 17 00:00:00 2001 From: Emili Castells Guasch Date: Wed, 30 Oct 2024 15:15:27 +0100 Subject: [PATCH 7/8] Remove non PR related file --- .../tests/subscriptions-vaulting.spec.js | 33 ------------------- 1 file changed, 33 deletions(-) delete mode 100644 tests/Playwright/tests/subscriptions-vaulting.spec.js diff --git a/tests/Playwright/tests/subscriptions-vaulting.spec.js b/tests/Playwright/tests/subscriptions-vaulting.spec.js deleted file mode 100644 index d357491a9..000000000 --- a/tests/Playwright/tests/subscriptions-vaulting.spec.js +++ /dev/null @@ -1,33 +0,0 @@ -const { test, expect } = require( '@playwright/test' ); -const { loginAsCustomer, loginAsAdmin } = require( './utils/user' ); - -async function createSubscription( page ) { - await page.click( 'text=Debit & Credit Cards' ); - - const creditCardNumber = await page - .frameLocator( '[title="paypal_card_number_field"]' ) - .locator( '.card-field-number' ); - await creditCardNumber.fill( '4005519200000004' ); - - const expirationDate = await page - .frameLocator( 'iframe[title="paypal_card_expiry_field"]' ) - .locator( 'input.card-field-expiry' ); - await expirationDate.click(); - await page.keyboard.type( '12/25' ); - - const cvv = await page - .frameLocator( '[title="paypal_card_cvv_field"]' ) - .locator( '.card-field-cvv' ); - await cvv.fill( '123' ); - - await page.getByRole( 'button', { name: 'Sign up now' } ).click(); -} - -test( 'Purchase and renewal subscription', async ( { page } ) => { - await loginAsCustomer( page ); - - await page.goto( '/classic-checkout?add-to-cart=14' ); - await createSubscription( page ); - - //await loginAsAdmin( page ); -} ); From f9a7ce988014e8923f7969771d3d82c8120623fd Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Thu, 31 Oct 2024 12:14:59 +0100 Subject: [PATCH 8/8] Register support for height and borderRadius controls for the PayPal Express button --- modules/ppcp-blocks/resources/js/checkout-block.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/ppcp-blocks/resources/js/checkout-block.js b/modules/ppcp-blocks/resources/js/checkout-block.js index 31411ec35..21c0c40cd 100644 --- a/modules/ppcp-blocks/resources/js/checkout-block.js +++ b/modules/ppcp-blocks/resources/js/checkout-block.js @@ -823,7 +823,7 @@ if ( block_enabled ) { name: config.id, label:
, content: , - edit: , + edit: , ariaLabel: config.title, canMakePayment: () => { return true; @@ -883,6 +883,7 @@ if ( block_enabled ) { }, supports: { features, + style: [ 'height', 'borderRadius' ], }, } ); }