woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

Merge pull request #2325 from woocommerce/PCP-3179-apple-pay-google-pay-buttons-no-longer-visible-in-standard-payments-button-previews-after-moving-them-to-advanced-card-processing-tab

Browse source 
Apple Pay & Google Pay buttons no longer visible in Standard Payments button previews after moving them to Advanced Card Processing tab (3179)
This commit is contained in:
Emili Castells 2024-06-17 09:30:47 +02:00 • committed by GitHub
commit f5803f1c99
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 950 additions and 393 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,10 +2,24 @@
width: 350px;
padding: 15px;
border: 1px solid lightgray;
background: #eeeeef;
border-radius: 15px;
box-shadow: 0 2px 10px 1px #ddd;
margin-right: -28px;
// Preview box showing a single button.
&[data-ppcp-apm-preview] {
height: 82px;
@media (min-width: 1200px) {
margin-top: -149px;
}
@media (min-width: 601px) and (max-width: 1399px) {
margin-right: 10px;
}
}
h4 {
margin-top: 0;
}

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

@ -1,5 +1,6 @@
import { loadScript } from "@paypal/paypal-js";
import {debounce} from "./helper/debounce";
import { buttonRefreshTriggerFactory, buttonSettingsGetterFactory } from './helper/preview-button';
import Renderer from '../../../ppcp-button/resources/js/modules/Renderer/Renderer'
import MessageRenderer from "../../../ppcp-button/resources/js/modules/Renderer/MessageRenderer";
import {setVisibleByClass, isVisible} from "../../../ppcp-button/resources/js/modules/Helper/Hiding";
@ -312,6 +313,7 @@ document.addEventListener(
const payLaterMessagingLocations = ['product', 'cart', 'checkout', 'shop', 'home', 'general'];
const paypalButtonLocations = ['product', 'cart', 'checkout', 'mini-cart', 'cart-block', 'checkout-block-express', 'general'];
// Default preview buttons; on "Standard Payments" tab.
paypalButtonLocations.forEach((location) => {
const inputNamePrefix = location === 'checkout' ? '#ppcp-button' : '#ppcp-button_' + location;
const wrapperName = location.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('');
@ -330,6 +332,31 @@ document.addEventListener(
createButtonPreview(() => getButtonSettings('#ppcp' + wrapperName + 'ButtonPreview', fields));
});
/**
* Inspect DOM to find APM button previews; on tabs like "Advanced Card Payments".
*
* How it works:
*
* 1. Add a <div> to hold the preview button to the settings page:
* - `id="ppcp[NAME]ButtonPreview"`
* - `data-ppc-apm-preview="[NAME]"`
* 2. Mark all fields that are relevant for the preview button:
* - custom_attribute: `data-ppcp-apm-name="[NAME]"`
* - custom_attribute: `data-ppcp-field-name="[FIELD]"`
*
* This block will find all marked input fields and trigger a re-render of the
* preview button when one of those fields value changes.
*
* Example: See the ppcp-google-pay "extensions.php" file.
*/
document.querySelectorAll('[data-ppcp-apm-preview]').forEach(item => {
const apmName = item.dataset.ppcpApmPreview;
const getSettings = buttonSettingsGetterFactory(apmName)
const renderButtonPreview = buttonRefreshTriggerFactory(apmName);
renderPreview(getSettings, renderButtonPreview)
});
payLaterMessagingLocations.forEach((location) => {
const inputNamePrefix = '#ppcp-pay_later_' + location + '_message';
const wrapperName = location.charAt(0).toUpperCase() + location.slice(1);

68
modules/ppcp-wc-gateway/resources/js/helper/preview-button.js Normal file
View file

@ -0,0 +1,68 @@
/**
* Returns a Map with all input fields that are relevant to render the preview of the
* given payment button.
*
* @param {string} apmName - Value of the custom attribute `data-ppcp-apm-name`.
* @return {Map<string, {val:Function, el:HTMLInputElement}>}
*/
export function getButtonFormFields(apmName) {
const inputFields = document.querySelectorAll(`[data-ppcp-apm-name="${apmName}"]`);
return [...inputFields].reduce((fieldMap, el) => {
const key = el.dataset.ppcpFieldName;
let getter = () => el.value;
if ('LABEL' === el.tagName) {
el = el.querySelector('input[type="checkbox"]');
getter = () => el.checked;
}
return fieldMap.set(key, {
val: getter,
el,
});
}, new Map());
}
/**
* Returns a function that triggers an update of the specified preview button, when invoked.
* @param {string} apmName
* @return {((object) => void)}
*/
export function buttonRefreshTriggerFactory(apmName) {
const eventName = `ppcp_paypal_render_preview_${apmName}`;
return (settings) => {
jQuery(document).trigger(eventName, settings);
};
}
/**
* Returns a function that gets the current form values of the specified preview button.
*
* @param {string} apmName
* @return {() => {button: {wrapper:string, is_enabled:boolean, style:{}}}}
*/
export function buttonSettingsGetterFactory(apmName) {
const fields = getButtonFormFields(apmName);
return () => {
const buttonConfig = {
wrapper: `#ppcp${apmName}ButtonPreview`,
'is_enabled': true,
style: {},
};
fields.forEach((item, name) => {
if ('is_enabled' === name) {
buttonConfig[name] = item.val();
} else {
buttonConfig.style[name] = item.val();
}
});
return { button: buttonConfig };
};
}

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

@ -201,9 +201,23 @@ return array(
);
},
'wcgateway.is-ppcp-settings-standard-payments-page' => static function ( ContainerInterface $container ): bool {
return $container->get( 'wcgateway.is-ppcp-settings-page' )
&& $container->get( 'wcgateway.current-ppcp-settings-page-id' ) === PayPalGateway::ID;
// Checks, if the current admin page contains settings for this plugin's payment methods.
'wcgateway.is-ppcp-settings-payment-methods-page' => static function ( ContainerInterface $container ) : bool {
if ( ! $container->get( 'wcgateway.is-ppcp-settings-page' ) ) {
return false;
}
$active_tab = $container->get( 'wcgateway.current-ppcp-settings-page-id' );
return in_array(
$active_tab,
array(
PayPalGateway::ID,
CreditCardGateway::ID,
CardButtonGateway::ID,
),
true
);
},
'wcgateway.current-ppcp-settings-page-id' => static function ( ContainerInterface $container ): string {

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

@ -112,6 +112,13 @@ class SettingsPageAssets {
*/
private $billing_agreements_endpoint;
/**
* Whether we're on a settings page for our plugin's payment methods.
*
* @var bool
*/
private $is_paypal_payment_method_page;
/**
* Assets constructor.
*
@ -128,6 +135,7 @@ class SettingsPageAssets {
* @param bool $is_settings_page Whether it's a settings page of this plugin.
* @param bool $is_acdc_enabled Whether the ACDC gateway is enabled.
* @param BillingAgreementsEndpoint $billing_agreements_endpoint Billing Agreements endpoint.
* @param bool $is_paypal_payment_method_page Whether we're on a settings page for our plugin's payment methods.
*/
public function __construct(
string $module_url,
@ -142,21 +150,23 @@ class SettingsPageAssets {
array $all_funding_sources,
bool $is_settings_page,
bool $is_acdc_enabled,
BillingAgreementsEndpoint $billing_agreements_endpoint
BillingAgreementsEndpoint $billing_agreements_endpoint,
bool $is_paypal_payment_method_page
) {
$this->module_url = $module_url;
$this->version = $version;
$this->subscription_helper = $subscription_helper;
$this->client_id = $client_id;
$this->currency = $currency;
$this->country = $country;
$this->environment = $environment;
$this->is_pay_later_button_enabled = $is_pay_later_button_enabled;
$this->disabled_sources = $disabled_sources;
$this->all_funding_sources = $all_funding_sources;
$this->is_settings_page = $is_settings_page;
$this->is_acdc_enabled = $is_acdc_enabled;
$this->billing_agreements_endpoint = $billing_agreements_endpoint;
$this->module_url = $module_url;
$this->version = $version;
$this->subscription_helper = $subscription_helper;
$this->client_id = $client_id;
$this->currency = $currency;
$this->country = $country;
$this->environment = $environment;
$this->is_pay_later_button_enabled = $is_pay_later_button_enabled;
$this->disabled_sources = $disabled_sources;
$this->all_funding_sources = $all_funding_sources;
$this->is_settings_page = $is_settings_page;
$this->is_acdc_enabled = $is_acdc_enabled;
$this->billing_agreements_endpoint = $billing_agreements_endpoint;
$this->is_paypal_payment_method_page = $is_paypal_payment_method_page;
}
/**
@ -176,7 +186,7 @@ class SettingsPageAssets {
$this->register_admin_assets();
}
if ( $this->is_paypal_payment_method_page() ) {
if ( $this->is_paypal_payment_method_page ) {
$this->register_paypal_admin_assets();
}
}
@ -184,30 +194,6 @@ class SettingsPageAssets {
}
/**
* Check whether the current page is PayPal payment method settings.
*
* @return bool
*/
private function is_paypal_payment_method_page(): bool {
if ( ! function_exists( 'get_current_screen' ) ) {
return false;
}
$screen = get_current_screen();
if ( ! $screen || $screen->id !== 'woocommerce_page_wc-settings' ) {
return false;
}
// phpcs:disable WordPress.Security.NonceVerification.Recommended
$tab = wc_clean( wp_unslash( $_GET['tab'] ?? '' ) );
$section = wc_clean( wp_unslash( $_GET['section'] ?? '' ) );
// phpcs:enable WordPress.Security.NonceVerification.Recommended
return 'checkout' === $tab && in_array( $section, array( PayPalGateway::ID, CardButtonGateway::ID ), true );
}
/**
* Register assets for PayPal admin pages.
*/

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

@ -183,7 +183,8 @@ class WCGatewayModule implements ModuleInterface {
$c->get( 'wcgateway.settings.funding-sources' ),
$c->get( 'wcgateway.is-ppcp-settings-page' ),
$settings->has( 'dcc_enabled' ) && $settings->get( 'dcc_enabled' ),
$c->get( 'api.endpoint.billing-agreements' )
$c->get( 'api.endpoint.billing-agreements' ),
$c->get( 'wcgateway.is-ppcp-settings-payment-methods-page' )
);
$assets->register_assets();
}