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

🐛 Fix button specific config-preparation

Browse source
This commit is contained in:
Philipp Stracker 2024-06-07 15:42:16 +02:00
parent da64ffbac5
commit 33c6c06e85
No known key found for this signature in database
4 changed files with 51 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -96,6 +96,30 @@ class ApplePayPreviewButton extends PreviewButton {
button.init(this.configResponse);
}
/**
* Some style details need to be copied from the ppcpConfig object to buttonConfig.
*
* - ppcpConfig: Generated by JS, containing the current form values.
* - buttonConfig: Generated on server side, contains the full (saved) button details.
*/
applyPreviewConfig() {
// The Apple Pay button expects the "wrapper" to be an ID without `#` prefix!
if (this.buttonConfig?.button?.wrapper) {
this.buttonConfig.button.wrapper = this.buttonConfig.button.wrapper.replace(/^#/, '');
}
// Apple Pay expects the param "lang" instead of "language"
if (this.ppcpConfig?.button?.style?.language) {
this.ppcpConfig.button.style.lang = this.ppcpConfig.button.style.language;
}
if (this.ppcpConfig && this.buttonConfig) {
this.buttonConfig.button.type = this.ppcpConfig.button.style.type;
this.buttonConfig.button.color = this.ppcpConfig.button.style.color;
this.buttonConfig.button.lang = this.ppcpConfig.button.style.lang;
}
}
}
// Initialize the preview button manager.

17
modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js
View file

@ -20,7 +20,6 @@ class PreviewButton {
this.selector = selector;
this.domWrapper = null;
this.payButton = null;
}
/**
@ -50,18 +49,24 @@ class PreviewButton {
this.buttonConfig.button.wrapper = this.selector
}
if (this.ppcpConfig && this.buttonConfig) {
this.buttonConfig.button.style = this.ppcpConfig.button.style;
}
this.applyPreviewConfig();
return this;
}
/**
* Some style details need to be copied from the ppcpConfig object to buttonConfig.
*
* - ppcpConfig: Generated by JS, containing the current form values.
* - buttonConfig: Generated on server side, contains the full (saved) button details.
*/
applyPreviewConfig() {
// Implement in the derived class.
}
/**
* Responsible for creating the actual payment button preview.
* Called by the `render()` method, after the wrapper DOM element is ready.
*
* @return {any} Return value is assigned to `this.payButton`
*/
createButton() {
throw new Error('The "createButton" method must be implemented by the derived class');

12
modules/ppcp-googlepay/resources/js/boot-admin.js
View file

@ -97,8 +97,18 @@ class GooglePayPreviewButton extends PreviewButton {
);
button.init(this.configResponse);
}
return button;
/**
* Some style details need to be copied from the ppcpConfig object to buttonConfig.
*
* - ppcpConfig: Generated by JS, containing the current form values.
* - buttonConfig: Generated on server side, contains the full (saved) button details.
*/
applyPreviewConfig() {
if (this.ppcpConfig && this.buttonConfig) {
this.buttonConfig.button.style = this.ppcpConfig.button.style;
}
}
}

6
modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
View file

@ -7,9 +7,13 @@
box-shadow: 0 2px 10px 1px #ddd;
margin-right: -28px;
// Preview box showing a single button.
&[data-ppcp-apm-preview] {
height: 82px;
margin-top: -149px;
@media (min-width: 1200px) {
margin-top: -149px;
}
@media (min-width: 601px) and (max-width: 1399px) {
margin-right: 10px;