mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
Merge pull request #1897 from woocommerce/PCP-1486-paylater-block
Add Pay Later Messaging block
This commit is contained in:
commit
02722a3c97
31 changed files with 3064 additions and 65 deletions
|
@ -1,13 +1,20 @@
|
|||
import {setVisible} from "../Helper/Hiding";
|
||||
import MessageRenderer from "../Renderer/MessageRenderer";
|
||||
|
||||
class MessagesBootstrap {
|
||||
constructor(gateway, messageRenderer) {
|
||||
this.gateway = gateway;
|
||||
this.renderer = messageRenderer;
|
||||
this.renderers = [];
|
||||
this.lastAmount = this.gateway.messages.amount;
|
||||
if (messageRenderer) {
|
||||
this.renderers.push(messageRenderer);
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
if (this.gateway.messages?.block?.enabled) {
|
||||
this.discoverBlocks();
|
||||
}
|
||||
jQuery(document.body).on('ppcp_cart_rendered ppcp_checkout_rendered', () => {
|
||||
this.render();
|
||||
});
|
||||
|
@ -16,7 +23,7 @@ class MessagesBootstrap {
|
|||
|
||||
this.render();
|
||||
});
|
||||
jQuery(document.body).on('ppcp_cart_total_updated ppcp_checkout_total_updated ppcp_product_total_updated', (e, amount) => {
|
||||
jQuery(document.body).on('ppcp_cart_total_updated ppcp_checkout_total_updated ppcp_product_total_updated ppcp_block_cart_total_updated', (e, amount) => {
|
||||
if (this.lastAmount !== amount) {
|
||||
this.lastAmount = amount;
|
||||
|
||||
|
@ -27,28 +34,40 @@ class MessagesBootstrap {
|
|||
this.render();
|
||||
}
|
||||
|
||||
shouldShow() {
|
||||
discoverBlocks() {
|
||||
Array.from(document.querySelectorAll('.ppcp-paylater-message-block')).forEach(blockElement => {
|
||||
const config = {wrapper: '#' + blockElement.id};
|
||||
if (!blockElement.getAttribute('data-pp-placement')) {
|
||||
config.placement = this.gateway.messages.placement;
|
||||
}
|
||||
this.renderers.push(new MessageRenderer(config));
|
||||
});
|
||||
}
|
||||
|
||||
shouldShow(renderer) {
|
||||
if (this.gateway.messages.is_hidden === true) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const eventData = {result: true}
|
||||
jQuery(document.body).trigger('ppcp_should_show_messages', [eventData]);
|
||||
jQuery(document.body).trigger('ppcp_should_show_messages', [eventData, renderer.config.wrapper]);
|
||||
return eventData.result;
|
||||
}
|
||||
|
||||
shouldRender() {
|
||||
return this.shouldShow() && this.renderer.shouldRender();
|
||||
}
|
||||
|
||||
render() {
|
||||
setVisible(this.gateway.messages.wrapper, this.shouldShow());
|
||||
this.renderers.forEach(renderer => {
|
||||
const shouldShow = this.shouldShow(renderer);
|
||||
setVisible(renderer.config.wrapper, shouldShow);
|
||||
if (!shouldShow) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.shouldRender()) {
|
||||
return;
|
||||
}
|
||||
if (!renderer.shouldRender()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.renderer.renderWithAmount(this.lastAmount);
|
||||
renderer.renderWithAmount(this.lastAmount);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -56,10 +56,12 @@ export const loadPaypalScript = (config, onLoaded, onError = null) => {
|
|||
|
||||
// Build the PayPal script options.
|
||||
let scriptOptions = keysToCamelCase(config.url_params);
|
||||
scriptOptions = merge(scriptOptions, config.script_attributes);
|
||||
if (config.script_attributes) {
|
||||
scriptOptions = merge(scriptOptions, config.script_attributes);
|
||||
}
|
||||
|
||||
// Load PayPal script for special case with data-client-token
|
||||
if (config.data_client_id.set_attribute) {
|
||||
if (config.data_client_id?.set_attribute) {
|
||||
dataClientIdAttributeHandler(scriptOptions, config.data_client_id, callback, errorCallback);
|
||||
return;
|
||||
}
|
||||
|
|
|
@ -15,9 +15,13 @@ class MessageRenderer {
|
|||
|
||||
const options = {
|
||||
amount,
|
||||
placement: this.config.placement,
|
||||
style: this.config.style
|
||||
};
|
||||
if (this.config.placement) {
|
||||
options.placement = this.config.placement;
|
||||
}
|
||||
if (this.config.style) {
|
||||
options.style = this.config.style;
|
||||
}
|
||||
|
||||
// sometimes the element is destroyed while the options stay the same
|
||||
if (document.querySelector(this.config.wrapper).getAttribute('data-render-number') !== this.currentNumber.toString()) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue