woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Fix apm button styling

Browse source
This commit is contained in:
Pedro Silva 2023-12-07 18:20:58 +00:00
parent 45516d0075
commit 46c575a401
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
16 changed files with 163 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

20
modules/ppcp-applepay/resources/css/styles.scss
View file

@ -1,26 +1,34 @@
.ppcp-button-applepay {
.ppcp-width-min & {
--apple-pay-button-height: 35px;
}
.ppcp-width-300 & {
--apple-pay-button-height: 45px;
}
.ppcp-width-500 & {
--apple-pay-button-height: 55px;
}
}
#applepay-container, .ppcp-button-applepay {
--apple-pay-button-height: 45px;
--apple-pay-button-min-height: 40px;
--apple-pay-button-min-height: 35px;
--apple-pay-button-width: 100%;
--apple-pay-button-max-width: 750px;
--apple-pay-button-border-radius: 4px;
--apple-pay-button-overflow: hidden;
margin:7px 0;
&.ppcp-button-pill {
--apple-pay-button-border-radius: 50px;
}
&.ppcp-button-minicart {
--apple-pay-button-display: block;
--apple-pay-button-height: 40px;
}
}
.woocommerce-checkout {
#applepay-container, .ppcp-button-applepay {
margin-top: 0;
--apple-pay-button-border-radius: 4px;
--apple-pay-button-height: 45px;
&.ppcp-button-pill {
--apple-pay-button-border-radius: 50px;
}

17
modules/ppcp-applepay/resources/js/ApplepayButton.js
View file

@ -5,10 +5,13 @@ import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/Butto
import FormValidator from "../../../ppcp-button/resources/js/modules/Helper/FormValidator";
import ErrorHandler from '../../../ppcp-button/resources/js/modules/ErrorHandler';
import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
import {apmButtonInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButton";
class ApplepayButton {
constructor(context, externalHandler, buttonConfig, ppcpConfig) {
apmButtonInit();
this.isInitialized = false;
this.context = context;
@ -60,7 +63,7 @@ class ApplepayButton {
this.initEventHandlers();
this.isInitialized = true;
this.applePayConfig = config;
const isEligible = this.applePayConfig.isEligible;
const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin;
if (isEligible) {
this.fetchTransactionInfo().then(() => {
@ -84,6 +87,10 @@ class ApplepayButton {
});
}
});
} else {
jQuery('#' + this.buttonConfig.button.wrapper).hide();
jQuery('#' + this.buttonConfig.button.mini_cart_wrapper).hide();
jQuery('#express-payment-method-ppcp-applepay').hide();
}
}
@ -179,13 +186,15 @@ class ApplepayButton {
appleContainer.innerHTML = `<apple-pay-button id="${id}" buttonstyle="${color}" type="${type}" locale="${language}">`;
}
jQuery('#' + wrapper).addClass('ppcp-button-' + ppcpStyle.shape);
const $wrapper = jQuery('#' + wrapper);
$wrapper.addClass('ppcp-button-' + ppcpStyle.shape);
if (ppcpStyle.height) {
jQuery('#' + wrapper).css('--apple-pay-button-height', `${ppcpStyle.height}px`)
$wrapper.css('--apple-pay-button-height', `${ppcpStyle.height}px`)
$wrapper.css('height', `${ppcpStyle.height}px`)
}
jQuery(wrapper).append(appleContainer);
jQuery(wrapper).append(appleContainer); // ToDo: this selector doesnt seem valid.
}
//------------------------

2
modules/ppcp-applepay/resources/js/boot-admin.js
View file

@ -65,7 +65,7 @@ import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/Wi
buttonConfig.button.wrapper = selector.replace('#', '');
applyConfigOptions(buttonConfig);
const wrapperElement = `<div id="${selector.replace('#', '')}" class="ppcp-button-applepay"></div>`;
const wrapperElement = `<div id="${selector.replace('#', '')}" class="ppcp-button-apm ppcp-button-applepay"></div>`;
if (!jQuery(selector).length) {
jQuery(ppcpConfig.button.wrapper).after(wrapperElement);

2
modules/ppcp-applepay/resources/js/boot-block.js
View file

@ -50,7 +50,7 @@ const ApplePayComponent = () => {
}, [paypalLoaded, applePayLoaded]);
return (
<div id={buttonConfig.button.wrapper.replace('#', '')}></div>
<div id={buttonConfig.button.wrapper.replace('#', '')} className="ppcp-button-apm ppcp-button-applepay"></div>
);
}