mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
Merge remote-tracking branch 'origin/pcp-917-preview' into PCP-915-create-pay-later-tab
# Conflicts: # modules/ppcp-wc-gateway/resources/js/gateway-settings.js # modules/ppcp-wc-gateway/services.php
This commit is contained in:
Narek Zakarian
commit
510cb4db49
13 changed files with 212 additions and 19 deletions
|
|
@ -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
17
modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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',
|
||||
() => {
|
||||
|
|
@ -17,5 +21,71 @@
|
|||
subscriptionBehaviorWhenVaultFails.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
9
modules/ppcp-wc-gateway/resources/js/helper/debounce.js
Normal 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);
|
||||
};
|
||||
};
|
||||
|
|
@ -423,6 +423,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' ),
|
||||
|
|
@ -829,6 +837,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',
|
||||
),
|
||||
|
||||
// Single product page.
|
||||
'button_product_heading' => array(
|
||||
|
|
@ -1268,6 +1285,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' ),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'}
|
||||
]
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
