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

Add button preview in settings

Browse source
This commit is contained in:
Alex P 2022-10-19 11:38:49 +03:00
parent e347bd8416
commit ab618b200e
13 changed files with 294 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

1
modules/ppcp-wc-gateway/package.json
View file

@ -11,6 +11,7 @@
"Edge >= 14"
],
"dependencies": {
"@paypal/paypal-js": "^5.1.1",
"core-js": "^3.25.0"
},
"devDependencies": {

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

@ -0,0 +1,17 @@
.ppcp-button-preview {
width: 350px;
padding: 15px;
border: 1px solid lightgray;
border-radius: 15px;
box-shadow: 0 2px 10px 1px #ddd;
h4 {
margin-top: 0;
}
@media (min-width: 1200px) {
position: absolute;
left: 800px;
margin-top: -400px;
}
}

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

@ -1,3 +1,7 @@
import { loadScript } from "@paypal/paypal-js";
import {debounce} from "./helper/debounce";
import Renderer from '../../../ppcp-button/resources/js/modules/Renderer/Renderer'
;document.addEventListener(
'DOMContentLoaded',
() => {
@ -65,6 +69,70 @@
atLeastOneChecked(vaultingCheckboxes) ? disablePayLater() : enablePayLater()
}
const form = jQuery('#mainform');
function createButtonPreview(settingsCallback) {
const render = (settings) => {
const wrapper = document.querySelector(settings.button.wrapper);
wrapper.innerHTML = '';
const renderer = new Renderer(null, settings, (data, actions) => actions.reject(), null);
try {
renderer.render({});
} catch (err) {
console.error(err);
}
};
let oldSettings = settingsCallback();
form.on('change', ':input', debounce(() => {
const newSettings = settingsCallback();
if (JSON.stringify(oldSettings) === JSON.stringify(newSettings)) {
return;
}
render(newSettings);
oldSettings = newSettings;
}, 300));
jQuery(document).on('ppcp_paypal_script_loaded', () => {
oldSettings = settingsCallback();
render(oldSettings);
});
render(oldSettings);
}
function getPaypalScriptSettings() {
const disabledSources = jQuery('[name="ppcp[disable_funding][]"]').val();
const settings = {
'client-id': PayPalCommerceGatewaySettings.client_id,
'currency': PayPalCommerceGatewaySettings.currency,
'integration-date': PayPalCommerceGatewaySettings.integration_date,
'components': ['buttons', 'funding-eligibility', 'messages'],
'enable-funding': ['venmo'],
'buyer-country': PayPalCommerceGatewaySettings.country,
};
if (disabledSources.length) {
settings['disable-funding'] = disabledSources;
}
return settings;
}
function loadPaypalScript(settings, onLoaded = () => {}) {
loadScript(JSON.parse(JSON.stringify(settings))) // clone the object to prevent modification
.then(paypal => {
document.dispatchEvent(new CustomEvent('ppcp_paypal_script_loaded'));
onLoaded(paypal);
})
.catch((error) => console.error('failed to load the PayPal JS SDK script', error));
}
disableAll( disabledCheckboxes )
togglePayLater()
@ -73,5 +141,71 @@
if(PayPalCommerceGatewaySettings.is_subscriptions_plugin_active !== '1') {
document.getElementById('field-subscription_behavior_when_vault_fails').style.display = 'none';
}
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 = {
'color': jQuery(fields['color']).val(),
'shape': jQuery(fields['shape']).val(),
'label': jQuery(fields['label']).val(),
'tagline': layout === 'horizontal' && jQuery(fields['tagline']).is(':checked'),
'layout': layout,
};
if ('height' in fields) {
style['height'] = parseInt(jQuery(fields['height']).val());
}
return {
'button': {
'wrapper': wrapperSelector,
'style': style,
},
'separate_buttons': {},
};
}
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',
}));
});
}
);

9
modules/ppcp-wc-gateway/resources/js/helper/debounce.js Normal file
View file

@ -0,0 +1,9 @@
export const debounce = (callback, delayMs) => {
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback.apply(null, args);
}, delayMs);
};
};

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

@ -401,6 +401,14 @@ return array(
$onboarding_options_renderer = $container->get( 'onboarding.render-options' );
assert( $onboarding_options_renderer instanceof OnboardingOptionsRenderer );
$render_preview_element = function ( string $id ): string {
return '
<div class="ppcp-button-preview">
<h4>' . __( 'Preview', 'woocommerce-paypal-payments' ) . '</h4>
<div id="' . $id . '" class="ppcp-button-preview-inner"></div>
</div>';
};
$fields = array(
'checkout_settings_heading' => array(
'heading' => __( 'Standard Payments Settings', 'woocommerce-paypal-payments' ),
@ -802,6 +810,15 @@ return array(
'requirements' => array(),
'gateway' => 'paypal',
),
'button_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpCheckoutButtonPreview' ),
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array(),
'gateway' => 'paypal',
),
'message_heading' => array(
'heading' => __( 'Pay Later on Checkout', 'woocommerce-paypal-payments' ),
'type' => 'ppcp-heading',
@ -1107,6 +1124,15 @@ return array(
'requirements' => array(),
'gateway' => 'paypal',
),
'button_product_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpProductButtonPreview' ),
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array(),
'gateway' => 'paypal',
),
'message_product_heading' => array(
'heading' => __( 'Pay Later on Single Product Page', 'woocommerce-paypal-payments' ),
@ -1413,6 +1439,15 @@ return array(
'requirements' => array(),
'gateway' => 'paypal',
),
'button_cart_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpCartButtonPreview' ),
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array(),
'gateway' => 'paypal',
),
'message_cart_heading' => array(
'heading' => __( 'Pay Later on Cart', 'woocommerce-paypal-payments' ),
@ -1732,6 +1767,15 @@ return array(
'requirements' => array(),
'gateway' => 'paypal',
),
'button_mini-cart_preview' => array(
'type' => 'ppcp-text',
'text' => $render_preview_element( 'ppcpMiniCartButtonPreview' ),
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array(),
'gateway' => 'paypal',
),
'disable_cards' => array(
'title' => __( 'Disable specific credit cards', 'woocommerce-paypal-payments' ),

53
modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php
View file

@ -37,17 +37,51 @@ class SettingsPageAssets {
*/
protected $subscription_helper;
/**
* The PayPal SDK client ID.
*
* @var string
*/
private $client_id;
/**
* 3-letter currency code of the shop.
*
* @var string
*/
private $currency;
/**
* 2-letter country code of the shop.
*
* @var string
*/
private $country;
/**
* Assets constructor.
*
* @param string $module_url The url of this module.
* @param string $version The assets version.
* @param SubscriptionHelper $subscription_helper The subscription helper.
* @param string $client_id The PayPal SDK client ID.
* @param string $currency 3-letter currency code of the shop.
* @param string $country 2-letter country code of the shop.
*/
public function __construct( string $module_url, string $version, SubscriptionHelper $subscription_helper ) {
public function __construct(
string $module_url,
string $version,
SubscriptionHelper $subscription_helper,
string $client_id,
string $currency,
string $country
) {
$this->module_url = $module_url;
$this->version = $version;
$this->subscription_helper = $subscription_helper;
$this->client_id = $client_id;
$this->currency = $currency;
$this->country = $country;
}
/**
@ -98,6 +132,13 @@ class SettingsPageAssets {
* Register assets for admin pages.
*/
private function register_admin_assets() {
wp_enqueue_style(
'ppcp-gateway-settings',
trailingslashit( $this->module_url ) . 'assets/css/gateway-settings.css',
array(),
$this->version
);
wp_enqueue_script(
'ppcp-gateway-settings',
trailingslashit( $this->module_url ) . 'assets/js/gateway-settings.js',
@ -106,12 +147,20 @@ class SettingsPageAssets {
true
);
// Intent is configured with Authorize and Capture Virtual-Only Orders is not set.
/**
* Psalm cannot find it for some reason.
*
* @psalm-suppress UndefinedConstant
*/
wp_localize_script(
'ppcp-gateway-settings',
'PayPalCommerceGatewaySettings',
array(
'is_subscriptions_plugin_active' => $this->subscription_helper->plugin_is_active(),
'client_id' => $this->client_id,
'currency' => $this->currency,
'country' => $this->country,
'integration_date' => PAYPAL_INTEGRATION_DATE,
)
);
}

5
modules/ppcp-wc-gateway/src/WCGatewayModule.php
View file

@ -157,7 +157,10 @@ class WCGatewayModule implements ModuleInterface {
$assets = new SettingsPageAssets(
$c->get( 'wcgateway.url' ),
$c->get( 'ppcp.asset-version' ),
$c->get( 'subscription.helper' )
$c->get( 'subscription.helper' ),
$c->get( 'button.client_id' ),
$c->get( 'api.shop.currency' ),
$c->get( 'api.shop.country' )
);
$assets->register_assets();
}

14
modules/ppcp-wc-gateway/webpack.config.js
View file

@ -9,6 +9,7 @@ module.exports = {
'gateway-settings': path.resolve('./resources/js/gateway-settings.js'),
'pay-upon-invoice': path.resolve('./resources/js/pay-upon-invoice.js'),
'oxxo': path.resolve('./resources/js/oxxo.js'),
'gateway-settings-style': path.resolve('./resources/css/gateway-settings.scss'),
},
output: {
path: path.resolve(__dirname, 'assets/'),
@ -19,6 +20,19 @@ module.exports = {
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name: 'css/[name].css',
}
},
{loader:'sass-loader'}
]
}]
}
};

12
modules/ppcp-wc-gateway/yarn.lock
View file

@ -1005,6 +1005,13 @@
"@jridgewell/resolve-uri" "^3.0.3"
"@jridgewell/sourcemap-codec" "^1.4.10"
"@paypal/paypal-js@^5.1.1":
version "5.1.1"
resolved "https://registry.yarnpkg.com/@paypal/paypal-js/-/paypal-js-5.1.1.tgz#81ab1f78dd2001061a2472f561d20df687a1d295"
integrity sha512-MMQ8TA048gTB43pzEOMzod8WY8hfzy+ahd7w29LtMvXduqzp7/29WxrTlsy4k6ARG6WGJ/uGqpc4+la4UZEQgw==
dependencies:
promise-polyfill "^8.2.3"
"@types/eslint-scope@^3.7.3":
version "3.7.4"
resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
@ -1933,6 +1940,11 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
dependencies:
find-up "^4.0.0"
promise-polyfill@^8.2.3:
version "8.2.3"
resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.2.3.tgz#2edc7e4b81aff781c88a0d577e5fe9da822107c6"
integrity sha512-Og0+jCRQetV84U8wVjMNccfGCnMQ9mGs9Hv78QFe+pSDD3gWTpz0y+1QCuxy5d/vBFuZ3iwP2eycAkvqIMPmWg==
punycode@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"