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

Merge remote-tracking branch 'origin/PCP-915-create-pay-later-tab' into PCP-915-create-pay-later-tab

Browse source
This commit is contained in:
Narek Zakarian 2022-11-04 12:39:56 +04:00
commit 45cc24449c
4 changed files with 91 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

2
modules/ppcp-wc-gateway/pay-later-tab-settings.php
View file

@ -34,7 +34,7 @@ return function ( ContainerInterface $container, array $fields ): array {
$render_preview_element = function ( string $id, string $type ): string {
return '
<div class="ppcp-' . $type . '-preview pay-later">
<div class="ppcp-preview ppcp-' . $type . '-preview pay-later">
<h4>' . __( 'Preview', 'woocommerce-paypal-payments' ) . '</h4>
<div id="' . $id . '" class="ppcp-' . $type . '-preview-inner"></div>
</div>';

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

@ -1,4 +1,4 @@
.ppcp-button-preview, .ppcp-message-preview {
.ppcp-preview {
width: 350px;
padding: 15px;
border: 1px solid lightgray;

173
modules/ppcp-wc-gateway/resources/js/gateway-settings.js
View file

@ -6,16 +6,40 @@ import MessageRenderer from "../../../ppcp-button/resources/js/modules/Renderer/
;document.addEventListener(
'DOMContentLoaded',
() => {
const disabledCheckboxes = document.querySelectorAll(
'.ppcp-disabled-checkbox'
)
function disableAll(nodeList){
nodeList.forEach(node => node.setAttribute('disabled', 'true'))
}
const disabledCheckboxes = document.querySelectorAll(
'.ppcp-disabled-checkbox'
)
disableAll( disabledCheckboxes )
const form = jQuery('#mainform');
const payLaterButtonInput = document.querySelector('#ppcp-pay_later_button_enabled');
if (payLaterButtonInput) {
const payLaterButtonPreview = document.querySelector('.ppcp-button-preview.pay-later');
if (!payLaterButtonInput.checked) {
payLaterButtonPreview.classList.add('disabled')
}
if (payLaterButtonInput.classList.contains('ppcp-disabled-checkbox')) {
payLaterButtonPreview.style.display = 'none';
}
payLaterButtonInput.addEventListener('click', () => {
payLaterButtonPreview.classList.remove('disabled')
if (!payLaterButtonInput.checked) {
payLaterButtonPreview.classList.add('disabled')
}
});
}
function createButtonPreview(settingsCallback) {
const render = (settings) => {
const wrapper = document.querySelector(settings.button.wrapper);
@ -36,28 +60,6 @@ import MessageRenderer from "../../../ppcp-button/resources/js/modules/Renderer/
renderPreview(settingsCallback, render);
}
const payLaterButtonInput = document.querySelector('#ppcp-pay_later_button_enabled');
if (payLaterButtonInput) {
const payLaterButtonPreview = document.querySelector('.ppcp-button-preview.pay-later');
if (!payLaterButtonInput.checked) {
payLaterButtonPreview.classList.add('disabled')
}
if(payLaterButtonInput.classList.contains('ppcp-disabled-checkbox')) {
payLaterButtonPreview.style.display = 'none';
}
payLaterButtonInput.addEventListener('click', () => {
payLaterButtonPreview.classList.remove('disabled')
if (!payLaterButtonInput.checked) {
payLaterButtonPreview.classList.add('disabled')
}
});
}
function getPaypalScriptSettings() {
const disabledSources = jQuery('[name="ppcp[disable_funding][]"]').val();
const isPayLaterButtonEnabled = payLaterButtonInput ? payLaterButtonInput.checked : PayPalCommerceGatewaySettings.is_pay_later_button_enabled
@ -89,21 +91,6 @@ import MessageRenderer from "../../../ppcp-button/resources/js/modules/Renderer/
.catch((error) => console.error('failed to load the PayPal JS SDK script', error));
}
disableAll( disabledCheckboxes )
let oldScriptSettings = getPaypalScriptSettings();
form.on('change', ':input', debounce(() => {
const newSettings = getPaypalScriptSettings();
if (JSON.stringify(oldScriptSettings) === JSON.stringify(newSettings)) {
return;
}
loadPaypalScript(newSettings);
oldScriptSettings = newSettings;
}, 1000));
function getButtonSettings(wrapperSelector, fields) {
const layout = jQuery(fields['layout']).val();
const style = {
@ -208,53 +195,69 @@ import MessageRenderer from "../../../ppcp-button/resources/js/modules/Renderer/
};
}
const payLaterMessagingLocations = ['product', 'cart', 'checkout', 'general']
const payLaterMessagingLocations = ['product', 'cart', 'checkout', 'general'];
loadPaypalScript(oldScriptSettings, () => {
createButtonPreview(() => getButtonSettings('#ppcpCheckoutButtonPreview', {
'color': '#ppcp-button_color',
'shape': '#ppcp-button_shape',
'label': '#ppcp-button_label',
'tagline': '#ppcp-button_tagline',
'layout': '#ppcp-button_layout',
}));
createButtonPreview(() => getButtonSettings('#ppcpProductButtonPreview', {
'color': '#ppcp-button_product_color',
'shape': '#ppcp-button_product_shape',
'label': '#ppcp-button_product_label',
'tagline': '#ppcp-button_product_tagline',
'layout': '#ppcp-button_product_layout',
}));
createButtonPreview(() => getButtonSettings('#ppcpCartButtonPreview', {
'color': '#ppcp-button_cart_color',
'shape': '#ppcp-button_cart_shape',
'label': '#ppcp-button_cart_label',
'tagline': '#ppcp-button_cart_tagline',
'layout': '#ppcp-button_cart_layout',
}));
createButtonPreview(() => getButtonSettings('#ppcpMiniCartButtonPreview', {
'color': '#ppcp-button_mini-cart_color',
'shape': '#ppcp-button_mini-cart_shape',
'label': '#ppcp-button_mini-cart_label',
'tagline': '#ppcp-button_mini-cart_tagline',
'layout': '#ppcp-button_mini-cart_layout',
'height': '#ppcp-button_mini-cart_height',
}));
const previewElements = document.querySelectorAll('.ppcp-preview');
if (previewElements.length) {
let oldScriptSettings = getPaypalScriptSettings();
payLaterMessagingLocations.forEach( (location) => {
const inputNamePrefix = '#ppcp-pay_later_' + location + '_message';
const wrapperName = location.charAt(0).toUpperCase() + location.slice(1);
createMessagesPreview(() => getMessageSettings('#ppcp' + wrapperName + 'MessagePreview', {
'layout': inputNamePrefix + '_layout',
'logo_type': inputNamePrefix + '_logo',
'logo_position': inputNamePrefix + '_position',
'text_color': inputNamePrefix + '_color',
'flex_color': inputNamePrefix + '_flex_color',
'flex_ratio': inputNamePrefix + '_flex_ratio',
form.on('change', ':input', debounce(() => {
const newSettings = getPaypalScriptSettings();
if (JSON.stringify(oldScriptSettings) === JSON.stringify(newSettings)) {
return;
}
loadPaypalScript(newSettings);
oldScriptSettings = newSettings;
}, 1000));
loadPaypalScript(oldScriptSettings, () => {
createButtonPreview(() => getButtonSettings('#ppcpCheckoutButtonPreview', {
'color': '#ppcp-button_color',
'shape': '#ppcp-button_shape',
'label': '#ppcp-button_label',
'tagline': '#ppcp-button_tagline',
'layout': '#ppcp-button_layout',
}));
createButtonPreview(() => getButtonSettings('#ppcpProductButtonPreview', {
'color': '#ppcp-button_product_color',
'shape': '#ppcp-button_product_shape',
'label': '#ppcp-button_product_label',
'tagline': '#ppcp-button_product_tagline',
'layout': '#ppcp-button_product_layout',
}));
createButtonPreview(() => getButtonSettings('#ppcpCartButtonPreview', {
'color': '#ppcp-button_cart_color',
'shape': '#ppcp-button_cart_shape',
'label': '#ppcp-button_cart_label',
'tagline': '#ppcp-button_cart_tagline',
'layout': '#ppcp-button_cart_layout',
}));
createButtonPreview(() => getButtonSettings('#ppcpMiniCartButtonPreview', {
'color': '#ppcp-button_mini-cart_color',
'shape': '#ppcp-button_mini-cart_shape',
'label': '#ppcp-button_mini-cart_label',
'tagline': '#ppcp-button_mini-cart_tagline',
'layout': '#ppcp-button_mini-cart_layout',
'height': '#ppcp-button_mini-cart_height',
}));
});
createButtonPreview(() => getButtonDefaultSettings('#ppcpPayLaterButtonPreview'));
});
payLaterMessagingLocations.forEach((location) => {
const inputNamePrefix = '#ppcp-pay_later_' + location + '_message';
const wrapperName = location.charAt(0).toUpperCase() + location.slice(1);
createMessagesPreview(() => getMessageSettings('#ppcp' + wrapperName + 'MessagePreview', {
'layout': inputNamePrefix + '_layout',
'logo_type': inputNamePrefix + '_logo',
'logo_position': inputNamePrefix + '_position',
'text_color': inputNamePrefix + '_color',
'flex_color': inputNamePrefix + '_flex_color',
'flex_ratio': inputNamePrefix + '_flex_ratio',
}));
});
createButtonPreview(() => getButtonDefaultSettings('#ppcpPayLaterButtonPreview'));
});
}
}
);

2
modules/ppcp-wc-gateway/services.php
View file

@ -426,7 +426,7 @@ return array(
$render_preview_element = function ( string $id ): string {
return '
<div class="ppcp-button-preview">
<div class="ppcp-preview ppcp-button-preview">
<h4>' . __( 'Preview', 'woocommerce-paypal-payments' ) . '</h4>
<div id="' . $id . '" class="ppcp-button-preview-inner"></div>
</div>';