From 880bd48271cd03873ca06797e9f9d39053134f0d Mon Sep 17 00:00:00 2001 From: Emili Castells Guasch Date: Wed, 22 May 2024 15:52:45 +0200 Subject: [PATCH] Use custom save card payment checkbox and show/hide it based on vaulting setting --- .../resources/js/Components/card-fields.js | 12 +++++++-- .../js/Components/checkout-handler.js | 13 ++++++++-- .../js/advanced-card-checkout-block.js | 1 - .../resources/js/card-fields-config.js | 3 ++- modules/ppcp-blocks/services.php | 3 ++- .../src/AdvancedCardPaymentMethod.php | 26 ++++++++++++++----- 6 files changed, 45 insertions(+), 13 deletions(-) diff --git a/modules/ppcp-blocks/resources/js/Components/card-fields.js b/modules/ppcp-blocks/resources/js/Components/card-fields.js index 97cf83ab5..dcd3ba2dd 100644 --- a/modules/ppcp-blocks/resources/js/Components/card-fields.js +++ b/modules/ppcp-blocks/resources/js/Components/card-fields.js @@ -14,11 +14,14 @@ export function CardFields({config, eventRegistration, emitResponse}) { const {responseTypes} = emitResponse; const [cardFieldsForm, setCardFieldsForm] = useState(); - const getCardFieldsForm = (cardFieldsForm) => { setCardFieldsForm(cardFieldsForm) } + const getSavePayment = (savePayment) => { + localStorage.setItem('ppcp-save-card-payment', savePayment); + } + const wait = (milliseconds) => { return new Promise((resolve) => { console.log('start...') @@ -65,7 +68,12 @@ export function CardFields({config, eventRegistration, emitResponse}) { }} > - + diff --git a/modules/ppcp-blocks/resources/js/Components/checkout-handler.js b/modules/ppcp-blocks/resources/js/Components/checkout-handler.js index 08f4bef5a..8e9658fc2 100644 --- a/modules/ppcp-blocks/resources/js/Components/checkout-handler.js +++ b/modules/ppcp-blocks/resources/js/Components/checkout-handler.js @@ -1,12 +1,21 @@ import {useEffect} from '@wordpress/element'; import {usePayPalCardFields} from "@paypal/react-paypal-js"; -export const CheckoutHandler = ({getCardFieldsForm}) => { +export const CheckoutHandler = ({getCardFieldsForm, getSavePayment, saveCardText, is_vaulting_enabled}) => { const {cardFieldsForm} = usePayPalCardFields(); useEffect(() => { getCardFieldsForm(cardFieldsForm) }, []); - return null + if (!is_vaulting_enabled) { + return null; + } + + return ( + <> + getSavePayment(e.target.checked)}/> + + + ) } diff --git a/modules/ppcp-blocks/resources/js/advanced-card-checkout-block.js b/modules/ppcp-blocks/resources/js/advanced-card-checkout-block.js index 9ddf3a6b1..6d268c122 100644 --- a/modules/ppcp-blocks/resources/js/advanced-card-checkout-block.js +++ b/modules/ppcp-blocks/resources/js/advanced-card-checkout-block.js @@ -12,7 +12,6 @@ registerPaymentMethod({ canMakePayment: () => {return true}, supports: { showSavedCards: true, - showSaveOption: true, features: config.supports } }) diff --git a/modules/ppcp-blocks/resources/js/card-fields-config.js b/modules/ppcp-blocks/resources/js/card-fields-config.js index 5dcd2a447..23b8859fb 100644 --- a/modules/ppcp-blocks/resources/js/card-fields-config.js +++ b/modules/ppcp-blocks/resources/js/card-fields-config.js @@ -10,7 +10,7 @@ export async function createOrder() { nonce: config.scriptData.ajax.create_order.nonce, context: config.scriptData.context, payment_method: 'ppcp-credit-card-gateway', - save_payment_method: true, + save_payment_method: localStorage.getItem('ppcp-save-card-payment') === 'true', }), }) .then((response) => response.json()) @@ -36,6 +36,7 @@ export function onApprove(data) { .then((response) => response.json()) .then((data) => { console.log(data) + localStorage.removeItem('ppcp-save-card-payment'); }) .catch((err) => { console.error(err); diff --git a/modules/ppcp-blocks/services.php b/modules/ppcp-blocks/services.php index 7f7fdf048..21a97f984 100644 --- a/modules/ppcp-blocks/services.php +++ b/modules/ppcp-blocks/services.php @@ -53,7 +53,8 @@ return array( $container->get( 'wcgateway.credit-card-gateway' ), function () use ( $container ): SmartButtonInterface { return $container->get( 'button.smart-button' ); - } + }, + $container->get( 'wcgateway.settings' ) ); }, 'blocks.settings.final_review_enabled' => static function ( ContainerInterface $container ): bool { diff --git a/modules/ppcp-blocks/src/AdvancedCardPaymentMethod.php b/modules/ppcp-blocks/src/AdvancedCardPaymentMethod.php index d85555040..55b5cfdc9 100644 --- a/modules/ppcp-blocks/src/AdvancedCardPaymentMethod.php +++ b/modules/ppcp-blocks/src/AdvancedCardPaymentMethod.php @@ -12,11 +12,13 @@ namespace WooCommerce\PayPalCommerce\Blocks; use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType; use WooCommerce\PayPalCommerce\Button\Assets\SmartButtonInterface; use WooCommerce\PayPalCommerce\WcGateway\Gateway\CreditCardGateway; +use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings; /** * Class AdvancedCardPaymentMethod */ class AdvancedCardPaymentMethod extends AbstractPaymentMethodType { + /** * The URL of this module. * @@ -45,6 +47,13 @@ class AdvancedCardPaymentMethod extends AbstractPaymentMethodType { */ private $smart_button; + /** + * The settings. + * + * @var Settings + */ + protected $settings; + /** * AdvancedCardPaymentMethod constructor. * @@ -52,18 +61,21 @@ class AdvancedCardPaymentMethod extends AbstractPaymentMethodType { * @param string $version The assets version. * @param CreditCardGateway $gateway Credit card gateway. * @param SmartButtonInterface|callable $smart_button The smart button script loading handler. + * @param Settings $settings The settings. */ public function __construct( string $module_url, string $version, CreditCardGateway $gateway, - $smart_button + $smart_button, + Settings $settings ) { $this->name = CreditCardGateway::ID; $this->module_url = $module_url; $this->version = $version; $this->gateway = $gateway; $this->smart_button = $smart_button; + $this->settings = $settings; } /** @@ -100,11 +112,13 @@ class AdvancedCardPaymentMethod extends AbstractPaymentMethodType { $script_data = $this->smart_button()->script_data(); return array( - 'id' => $this->name, - 'title' => $this->gateway->title, - 'description' => $this->gateway->description, - 'scriptData' => $script_data, - 'supports' => $this->gateway->supports, + 'id' => $this->name, + 'title' => $this->gateway->title, + 'description' => $this->gateway->description, + 'scriptData' => $script_data, + 'supports' => $this->gateway->supports, + 'save_card_text' => esc_html__( 'Save your card', 'woocommerce-paypal-payments' ), + 'is_vaulting_enabled' => $this->settings->has( 'vault_enabled_dcc' ) && $this->settings->get( 'vault_enabled_dcc' ), ); }