Merge pull request #1922 from woocommerce/PCP-2468-incorrect-margins-when-pay-pal-buttons-are-rendered-as-separate-gateways-2

Incorrect margins when PayPal buttons are rendered as separate gateways. [v2] (2468)
This commit is contained in:
Niklas Gutberlet 2023-12-28 14:42:22 +01:00 committed by GitHub
commit 9e896d43d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 3 deletions

View file

@ -34,6 +34,9 @@ class ApplepayButton {
// Stores initialization data sent to the button.
this.initialPaymentRequest = null;
// Default eligibility status.
this.isEligible = true;
this.log = function() {
if ( this.buttonConfig.is_debug ) {
console.log('[ApplePayButton]', ...arguments);
@ -63,9 +66,9 @@ class ApplepayButton {
this.initEventHandlers();
this.isInitialized = true;
this.applePayConfig = config;
const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin;
this.isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin;
if (isEligible) {
if (this.isEligible) {
this.fetchTransactionInfo().then(() => {
const isSubscriptionProduct = this.ppcpConfig?.data_client_id?.has_subscriptions === true;
if (isSubscriptionProduct) {
@ -137,6 +140,10 @@ class ApplepayButton {
const wrapper_id = '#' + wrapper;
const syncButtonVisibility = () => {
if (!this.isEligible) {
return;
}
const $ppcpButtonWrapper = jQuery(ppcpButtonWrapper);
setVisible(wrapper_id, $ppcpButtonWrapper.is(':visible'));
setEnabled(wrapper_id, !$ppcpButtonWrapper.hasClass('ppcp-disabled'));

View file

@ -40,6 +40,11 @@ export class ApmButtons {
this.refresh();
});
jQuery(document).on('ppcp-shown ppcp-hidden ppcp-enabled ppcp-disabled', (ev, data) => {
this.refresh();
setTimeout(this.refresh.bind(this), 200);
});
// Observes for new buttons.
(new MutationObserver(this.observeElementsCallback.bind(this)))
.observe(document.body, { childList: true, subtree: true });
@ -104,8 +109,10 @@ export class ApmButtons {
return true;
}
const minMargin = 11; // Minimum margin.
const height = $el.height();
$el.css('margin-top', `${Math.round(height * 0.3)}px`);
const margin = Math.max(minMargin, Math.round(height * 0.3));
$el.css('margin-top', `${margin}px`);
});
}