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

Adjustments to apm button layouts.

Browse source
This commit is contained in:
Pedro Silva 2023-12-11 17:14:43 +00:00
parent 55c7900a3e
commit ec0dd5221d
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
11 changed files with 159 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,12 @@
.ppcp-button-applepay {
// Should replicate apm-button.scss sizes.
--apple-pay-button-height: 45px;
--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;
.ppcp-width-min & {
--apple-pay-button-height: 35px;
}
@ -8,14 +16,6 @@
.ppcp-width-500 & {
--apple-pay-button-height: 55px;
}
}
#applepay-container, .ppcp-button-applepay {
--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;
&.ppcp-button-pill {
--apple-pay-button-border-radius: 50px;
@ -26,41 +26,19 @@
}
}
.woocommerce-checkout {
#applepay-container, .ppcp-button-applepay {
--apple-pay-button-border-radius: 4px;
&.ppcp-button-pill {
--apple-pay-button-border-radius: 50px;
}
}
}
.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart {
.ppcp-button-applepay {
--apple-pay-button-margin: 0;
.ppcp-has-applepay-block {
.wp-block-woocommerce-checkout {
#applepay-container, .ppcp-button-applepay {
margin: 0;
--apple-pay-button-margin: 0;
--apple-pay-button-height: 48px;
&.ppcp-button-pill {
--apple-pay-button-border-radius: 50px;
}
}
}
.wp-block-woocommerce-cart {
#applepay-container, .ppcp-button-applepay {
margin: 0;
--apple-pay-button-margin: 0;
--apple-pay-button-height: 48px;
apple-pay-button {
min-width: 0;
width: 100%;
--apple-pay-button-width-default: 100%;
}
}
}
.wp-admin {
.ppcp-button-applepay {
pointer-events: none;
}
&.ppcp-non-ios-device {
.ppcp-button-applepay {
apple-pay-button {
@ -69,10 +47,3 @@
}
}
}
// todo remove
.ppcp-button-applepay {
apple-pay-button {
display: block !important;
}
}

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

@ -5,12 +5,12 @@ 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";
import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButtons";
class ApplepayButton {
constructor(context, externalHandler, buttonConfig, ppcpConfig) {
apmButtonInit();
apmButtonsInit();
this.isInitialized = false;
@ -63,7 +63,7 @@ class ApplepayButton {
this.initEventHandlers();
this.isInitialized = true;
this.applePayConfig = config;
const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin || true; // todo remove
const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin;
if (isEligible) {
this.fetchTransactionInfo().then(() => {

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

@ -23,12 +23,6 @@ const ApplePayComponent = () => {
const manager = new ApplepayManager(buttonConfig, ppcpConfig);
manager.init();
};
useEffect(() => {
const bodyClass = 'ppcp-has-applepay-block';
if (!document.body.classList.contains(bodyClass)) {
document.body.classList.add(bodyClass);
}
}, []);
useEffect(() => {
// Load ApplePay SDK