Merge branch 'trunk' of github.com:woocommerce/woocommerce-paypal-payments into PCP-3202-retrieve-button-styling-properties-from-woo-commerce-checkout-block-ver-2

modules/ppcp-wc-gateway/resources/css/common.scss

@@ -31,9 +31,25 @@ $background-ident-color: #fbfbfb;
 
 	&.ppcp-button-dummy {
 		display: flex;
+		min-height: 25px;
 		align-items: center;
 		justify-content: center;
 		background: #0001;
+		position: relative;
+
+		&:before {
+			content: '';
+			position: absolute;
+			left: 12px;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 42px;
+			height: 24px;
+			background-image: var(--apm-button-dummy-background, none);
+			background-repeat: no-repeat;
+			background-size: contain;
+			background-position: center left;
+		}
 	}
 }
 
@@ -82,6 +98,14 @@ $background-ident-color: #fbfbfb;
 	}
 }
 
+.ppcp-notice-success {
+	border-left-color: #00a32a;
+
+	.highlight {
+		color: #00a32a;
+	}
+}
+
 .ppcp-notice-warning {
 	border-left-color: #dba617;
 
@@ -133,6 +157,11 @@ $background-ident-color: #fbfbfb;
 				}
 			}
 
+			.ppcp-notice-list {
+				list-style-type: disc;
+				padding-left: 20px;
+			}
+
 			th, td {
 				border-top: 1px solid $border-color;
 			}

modules/ppcp-wc-gateway/resources/js/helper/ConsoleLogger.js

@@ -0,0 +1,89 @@
+/**
+ * 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;
+
+	/**
+	 * Tracks the current log-group that was started using `this.group()`
+	 *
+	 * @type {?string}
+	 */
+	#openGroup = null;
+
+	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 );
+	}
+
+	/**
+	 * Starts or ends a group in the browser console.
+	 *
+	 * @param {string} [label=null] - The group label. Omit to end the current group.
+	 */
+	group( label = null ) {
+		if ( ! this.#enabled ) {
+			return;
+		}
+
+		if ( ! label || this.#openGroup ) {
+			// eslint-disable-next-line
+            console.groupEnd();
+			this.#openGroup = null;
+		}
+
+		if ( label ) {
+			// eslint-disable-next-line
+            console.group( label );
+
+			this.#openGroup = label;
+		}
+	}
+}

modules/ppcp-wc-gateway/resources/js/helper/preview-button.js

@@ -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 );

modules/ppcp-wc-gateway/resources/js/void-button.js

@@ -0,0 +1,53 @@
+import {
+	hide,
+	show,
+} from '../../../ppcp-button/resources/js/modules/Helper/Hiding';
+
+document.addEventListener( 'DOMContentLoaded', function () {
+	const refundButton = document.querySelector( 'button.refund-items' );
+	if ( ! refundButton ) {
+		return;
+	}
+
+	refundButton.insertAdjacentHTML(
+		'afterend',
+		`<button class="button" type="button" id="pcpVoid">${ PcpVoidButton.button_text }</button>`
+	);
+
+	hide( refundButton );
+
+	const voidButton = document.querySelector( '#pcpVoid' );
+
+	voidButton.addEventListener( 'click', async () => {
+		if ( ! window.confirm( PcpVoidButton.popup_text ) ) {
+			return;
+		}
+
+		voidButton.setAttribute( 'disabled', 'disabled' );
+
+		const res = await fetch( PcpVoidButton.ajax.void.endpoint, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			credentials: 'same-origin',
+			body: JSON.stringify( {
+				nonce: PcpVoidButton.ajax.void.nonce,
+				wc_order_id: PcpVoidButton.wc_order_id,
+			} ),
+		} );
+
+		const data = await res.json();
+
+		if ( ! data.success ) {
+            hide( voidButton );
+			show( refundButton );
+
+            alert( PcpVoidButton.error_text );
+
+			throw Error( data.data.message );
+		}
+
+		location.reload();
+	} );
+} );