Merge pull request #2496 from woocommerce/PCP-3477-google-pay-button-disappear-from-classic-cart-page-when-we-change-shipping-method-until-reloading-page

Various Google Pay button fixes (3477)
This commit is contained in:
Emili Castells 2024-08-22 10:53:46 +02:00 committed by GitHub
commit efc3e48a08
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 1587 additions and 339 deletions

View file

@ -0,0 +1,58 @@
/**
* Helper component to log debug details to the browser console.
*
* A utility class that is used by payment buttons on the front-end, like the GooglePayButton.
*/
export default class ConsoleLogger {
/**
* The prefix to display before every log output.
*
* @type {string}
*/
#prefix = '';
/**
* Whether logging is enabled, disabled by default.
*
* @type {boolean}
*/
#enabled = false;
constructor( ...prefixes ) {
if ( prefixes.length ) {
this.#prefix = `[${ prefixes.join( ' | ' ) }]`;
}
}
/**
* Enable or disable logging. Only impacts `log()` output.
*
* @param {boolean} state True to enable log output.
*/
set enabled( state ) {
this.#enabled = state;
}
/**
* Output log-level details to the browser console, if logging is enabled.
*
* @param {...any} args - All provided values are output to the browser console.
*/
log( ...args ) {
if ( this.#enabled ) {
// eslint-disable-next-line
console.log( this.#prefix, ...args );
}
}
/**
* Generate an error message in the browser's console.
*
* Error messages are always output, even when logging is disabled.
*
* @param {...any} args - All provided values are output to the browser console.
*/
error( ...args ) {
console.error( this.#prefix, ...args );
}
}

View file

@ -1,9 +1,11 @@
/* global jQuery */
/**
* 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}>}
* @return {Map<string, {val:Function, el:HTMLInputElement}>} List of input elements found on the current admin page.
*/
export function getButtonFormFields( apmName ) {
const inputFields = document.querySelectorAll(
@ -28,9 +30,9 @@ export function getButtonFormFields( apmName ) {
/**
* Returns a function that triggers an update of the specified preview button, when invoked.
*
* @param {string} apmName
* @return {((object) => void)}
* @return {((object) => void)} Trigger-function; updates preview buttons when invoked.
*/
export function buttonRefreshTriggerFactory( apmName ) {
const eventName = `ppcp_paypal_render_preview_${ apmName }`;
@ -44,7 +46,7 @@ export function buttonRefreshTriggerFactory( apmName ) {
* 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:{}}}}
* @return {() => {button: {wrapper:string, is_enabled:boolean, style:{}}}} Getter-function; returns preview config details when invoked.
*/
export function buttonSettingsGetterFactory( apmName ) {
const fields = getButtonFormFields( apmName );