Merge pull request #2249 from woocommerce/PCP-3139-improve-loading-saved-settings-in-pay-later-messaging-configurator

Pay Later messaging configurator sometimes displays old settings after saving (3139)
This commit is contained in:
Emili Castells 2024-05-22 12:46:42 +02:00 committed by GitHub
commit d95adc65fa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 177 additions and 34 deletions

View file

@ -1,4 +1,4 @@
document.addEventListener( 'DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('#mainform');
const table = form.querySelector('.form-table');
const headingRow = table.querySelector('#field-pay_later_messaging_heading');
@ -14,7 +14,6 @@ document.addEventListener( 'DOMContentLoaded', () => {
// Insert the new row after the headingRow
headingRow.parentNode.insertBefore(newRow, headingRow.nextSibling);
let isSaving = false; // Flag variable to track whether saving is in progress
saveChangesButton.addEventListener('click', () => {
@ -24,39 +23,63 @@ document.addEventListener( 'DOMContentLoaded', () => {
// Trigger the click event on the publish button
form.querySelector('.' + publishButtonClassName).click();
// Trigger click event on saveChangesButton after a short delay
setTimeout(() => {
saveChangesButton.click(); // Trigger click event on saveChangesButton
isSaving = false; // Reset flag when saving is complete
}, 1000); // Adjust the delay as needed
saveChangesButton.click(); // Trigger click event on saveChangesButton
isSaving = false; // Reset flag when saving is complete
}
});
merchantConfigurators.Messaging({
config: PcpPayLaterConfigurator.config,
merchantClientId: PcpPayLaterConfigurator.merchantClientId,
partnerClientId: PcpPayLaterConfigurator.partnerClientId,
partnerName: 'WooCommerce',
bnCode: 'Woo_PPCP',
placements: ['cart', 'checkout', 'product', 'shop', 'home', 'custom_placement'],
styleOverrides: {
button: publishButtonClassName,
header: PcpPayLaterConfigurator.headerClassName,
subheader: PcpPayLaterConfigurator.subheaderClassName
// Fetch the configuration settings
fetch(PcpPayLaterConfigurator.ajax.get_config.endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
onSave: data => {
fetch(PcpPayLaterConfigurator.ajax.save_config.endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
credentials: 'same-origin',
body: JSON.stringify({
nonce: PcpPayLaterConfigurator.ajax.save_config.nonce,
config: data,
}),
});
}
body: JSON.stringify({
action: 'ppc-get-message-config',
nonce: PcpPayLaterConfigurator.ajax.get_config.nonce
}),
})
} );
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => {
if (data.success) {
const config = data.data;
merchantConfigurators.Messaging({
config: config,
merchantClientId: PcpPayLaterConfigurator.merchantClientId,
partnerClientId: PcpPayLaterConfigurator.partnerClientId,
partnerName: 'WooCommerce',
bnCode: 'Woo_PPCP',
placements: ['cart', 'checkout', 'product', 'shop', 'home', 'custom_placement'],
styleOverrides: {
button: publishButtonClassName,
header: PcpPayLaterConfigurator.headerClassName,
subheader: PcpPayLaterConfigurator.subheaderClassName
},
onSave: data => {
fetch(PcpPayLaterConfigurator.ajax.save_config.endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
credentials: 'same-origin',
body: JSON.stringify({
nonce: PcpPayLaterConfigurator.ajax.save_config.nonce,
config: data,
}),
});
}
});
} else {
console.error('Failed to fetch configuration:', data);
}
})
.catch(error => {
console.error('Error fetching configuration:', error);
});
});

View file

@ -10,6 +10,7 @@ declare(strict_types=1);
namespace WooCommerce\PayPalCommerce\PayLaterConfigurator;
use WooCommerce\PayPalCommerce\PayLaterConfigurator\Endpoint\SaveConfig;
use WooCommerce\PayPalCommerce\PayLaterConfigurator\Endpoint\GetConfig;
use WooCommerce\PayPalCommerce\PayLaterConfigurator\Factory\ConfigFactory;
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
@ -35,4 +36,10 @@ return array(
$container->get( 'woocommerce.logger.woocommerce' )
);
},
'paylater-configurator.endpoint.get-config' => static function ( ContainerInterface $container ): GetConfig {
return new GetConfig(
$container->get( 'wcgateway.settings' ),
$container->get( 'woocommerce.logger.woocommerce' )
);
},
);

View file

@ -0,0 +1,99 @@
<?php
/**
* The endpoint for getting the Pay Later messaging config for the configurator.
*
* @package WooCommerce\PayPalCommerce\PayLaterConfigurator\Endpoint
*/
declare(strict_types=1);
namespace WooCommerce\PayPalCommerce\PayLaterConfigurator\Endpoint;
use Psr\Log\LoggerInterface;
use Throwable;
use WooCommerce\PayPalCommerce\PayLaterConfigurator\Factory\ConfigFactory;
use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
/**
* Class GetConfig.
*/
class GetConfig {
const ENDPOINT = 'ppc-get-message-config';
/**
* The settings.
*
* @var Settings
*/
protected $settings;
/**
* The logger.
*
* @var LoggerInterface
*/
private $logger;
/**
* GetConfig constructor.
*
* @param Settings $settings The settings.
* @param LoggerInterface $logger The logger.
*/
public function __construct( Settings $settings, LoggerInterface $logger ) {
$this->settings = $settings;
$this->logger = $logger;
}
/**
* Returns the nonce.
*/
public static function nonce(): string {
return self::ENDPOINT;
}
/**
* Handles the request.
*/
public function handle_request(): bool {
if ( ! current_user_can( 'manage_woocommerce' ) ) {
$this->logger->error( 'User does not have permission: manage_woocommerce' );
wp_send_json_error( 'Not admin.', 403 );
return false;
}
try {
$input = file_get_contents( 'php://input' );
if ( false === $input ) {
$this->logger->error( 'Failed to get input data.' );
wp_send_json_error( 'Failed to get input data.', 400 );
return false;
}
$data = json_decode( $input, true );
if ( json_last_error() !== JSON_ERROR_NONE ) {
$this->logger->error( 'Failed to decode JSON: ' . json_last_error_msg() );
wp_send_json_error( 'Failed to decode JSON.', 400 );
return false;
}
if ( ! isset( $data['nonce'] ) || ! wp_verify_nonce( $data['nonce'], self::ENDPOINT ) ) {
$this->logger->error( 'Invalid nonce' );
wp_send_json_error( 'Invalid nonce.', 403 );
return false;
}
$config_factory = new ConfigFactory();
$config = $config_factory->from_settings( $this->settings );
wp_send_json_success( $config );
return true;
} catch ( Throwable $error ) {
$this->logger->error( "GetConfig execution failed. {$error->getMessage()} {$error->getFile()}:{$error->getLine()}" );
wp_send_json_error( 'An error occurred while fetching the configuration.' );
return false;
}
}
}

View file

@ -10,6 +10,7 @@ declare(strict_types=1);
namespace WooCommerce\PayPalCommerce\PayLaterConfigurator;
use WooCommerce\PayPalCommerce\Button\Helper\MessagesApply;
use WooCommerce\PayPalCommerce\PayLaterConfigurator\Endpoint\GetConfig;
use WooCommerce\PayPalCommerce\PayLaterConfigurator\Endpoint\SaveConfig;
use WooCommerce\PayPalCommerce\PayLaterConfigurator\Factory\ConfigFactory;
use WooCommerce\PayPalCommerce\Vendor\Dhii\Container\ServiceProvider;
@ -27,7 +28,7 @@ class PayLaterConfiguratorModule implements ModuleInterface {
*/
public static function is_enabled(): bool {
return apply_filters(
// phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
// phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
'woocommerce.feature-flags.woocommerce_paypal_payments.paylater_configurator_enabled',
getenv( 'PCP_PAYLATER_CONFIGURATOR' ) !== '0'
);
@ -68,6 +69,15 @@ class PayLaterConfiguratorModule implements ModuleInterface {
}
);
add_action(
'wc_ajax_' . GetConfig::ENDPOINT,
static function () use ( $c ) {
$endpoint = $c->get( 'paylater-configurator.endpoint.get-config' );
assert( $endpoint instanceof GetConfig );
$endpoint->handle_request();
}
);
$current_page_id = $c->get( 'wcgateway.current-ppcp-settings-page-id' );
if ( $current_page_id !== Settings::PAY_LATER_TAB_ID ) {
@ -112,6 +122,10 @@ class PayLaterConfiguratorModule implements ModuleInterface {
'endpoint' => \WC_AJAX::get_endpoint( SaveConfig::ENDPOINT ),
'nonce' => wp_create_nonce( SaveConfig::nonce() ),
),
'get_config' => array(
'endpoint' => \WC_AJAX::get_endpoint( GetConfig::ENDPOINT ),
'nonce' => wp_create_nonce( GetConfig::nonce() ),
),
),
'config' => $config_factory->from_settings( $settings ),
'merchantClientId' => $settings->get( 'client_id' ),