♻️ Code organization and cleanup

- Move base classes for the preview buttons into “Preview” folder
- Remove jQuery use inside those base classes
- Extract dummy button to own class

modules/ppcp-button/resources/js/modules/Preview/DummyPreviewButton.js

@@ -0,0 +1,31 @@
+import PreviewButton from './PreviewButton';
+
+/**
+ * Dummy preview button, to use in case an APM button cannot be rendered
+ */
+export default class DummyPreviewButton extends PreviewButton {
+	#innerEl;
+
+	constructor( args ) {
+		super( args );
+
+		this.selector = `${ args.selector }Dummy`;
+		this.label = args.label || 'Not Available';
+	}
+
+	createNewWrapper() {
+		const wrapper = super.createNewWrapper();
+		wrapper.classList.add( 'ppcp-button-apm', 'ppcp-button-dummy' );
+
+		return wrapper;
+	}
+
+	createButton( buttonConfig ) {
+		this.#innerEl?.remove();
+
+		this.#innerEl = document.createElement( 'div' );
+		this.#innerEl.innerHTML = `<div class="reason">${ this.label }</div>`;
+
+		this.domWrapper.appendChild( this.#innerEl );
+	}
+}

modules/ppcp-button/resources/js/modules/Preview/PreviewButton.js

@@ -26,13 +26,16 @@ class PreviewButton {
 	/**
 	 * Creates a new DOM node to contain the preview button.
 	 *
-	 * @return {jQuery} Always a single jQuery element with the new DOM node.
+	 * @return {HTMLElement} Always a single jQuery element with the new DOM node.
 	 */
 	createNewWrapper() {
+		const wrapper = document.createElement( 'div' );
 		const previewId = this.selector.replace( '#', '' );
 		const previewClass = 'ppcp-preview-button';
 
-		return jQuery( `<div id='${ previewId }' class='${ previewClass }'>` );
+		wrapper.setAttribute( 'id', previewId );
+		wrapper.setAttribute( 'class', previewClass );
+		return wrapper;
 	}
 
 	/**
@@ -109,10 +112,12 @@ class PreviewButton {
 				console.error( 'Skip render, button is not configured yet' );
 				return;
 			}
+
 			this.domWrapper = this.createNewWrapper();
-			this.domWrapper.insertAfter( this.wrapper );
+			this._insertWrapper();
 		} else {
-			this.domWrapper.empty().show();
+			this._emptyWrapper();
+			this._showWrapper();
 		}
 
 		this.isVisible = true;
@@ -151,16 +156,38 @@ class PreviewButton {
 		 * Using a timeout here will make the button visible again at the end of the current
 		 * event queue.
 		 */
-		setTimeout( () => this.domWrapper.show() );
+		setTimeout( () => this._showWrapper() );
 	}
 
 	remove() {
 		this.isVisible = false;
 
 		if ( this.domWrapper ) {
-			this.domWrapper.hide().empty();
+			this._hideWrapper();
+			this._emptyWrapper();
 		}
 	}
+
+	_showWrapper() {
+		this.domWrapper.style.display = '';
+	}
+
+	_hideWrapper() {
+		this.domWrapper.style.display = 'none';
+	}
+
+	_emptyWrapper() {
+		this.domWrapper.innerHTML = '';
+	}
+
+	_insertWrapper() {
+		const wrapperElement = document.querySelector( this.wrapper );
+
+		wrapperElement.parentNode.insertBefore(
+			this.domWrapper,
+			wrapperElement.nextSibling
+		);
+	}
 }
 
 export default PreviewButton;

modules/ppcp-button/resources/js/modules/Preview/PreviewButtonManager.js

@@ -1,6 +1,7 @@
 import { loadCustomScript } from '@paypal/paypal-js';
-import widgetBuilder from './WidgetBuilder';
 import { debounce } from '../../../../../ppcp-blocks/resources/js/Helper/debounce';
+import widgetBuilder from '../Renderer/WidgetBuilder';
+import DummyPreviewButton from './DummyPreviewButton';
 
 /**
  * Manages all PreviewButton instances of a certain payment method on the page.
@@ -89,27 +90,14 @@ class PreviewButtonManager {
 	 *
 	 * This dummy is only visible on the admin side, and not rendered on the front-end.
 	 *
-	 * @todo Consider refactoring this into a new class that extends the PreviewButton class.
 	 * @param  wrapperId
 	 * @return {any}
 	 */
-	createDummy( wrapperId ) {
-		const elButton = document.createElement( 'div' );
-		elButton.classList.add( 'ppcp-preview-button', 'ppcp-button-dummy' );
-		elButton.innerHTML = `<span>${
-			this.apiError ?? 'Not Available'
-		}</span>`;
-
-		document.querySelector( wrapperId ).appendChild( elButton );
-
-		const instDummy = {
-			setDynamic: () => instDummy,
-			setPpcpConfig: () => instDummy,
-			render: () => {},
-			remove: () => {},
-		};
-
-		return instDummy;
+	createDummyButtonInstance( wrapperId ) {
+		return new DummyPreviewButton( {
+			selector: wrapperId,
+			label: this.apiError,
+		} );
 	}
 
 	registerEventListeners() {
@@ -309,13 +297,13 @@ class PreviewButtonManager {
 		const createButton = () => {
 			if ( ! this.buttons[ id ] ) {
 				let newInst;
+
 				if ( this.apiConfig && 'object' === typeof this.apiConfig ) {
-					newInst = this.createButtonInstance( id ).setButtonConfig(
-						this.buttonConfig
-					);
+					newInst = this.createButtonInstance( id );
 				} else {
-					newInst = this.createDummy( id );
+					newInst = this.createDummyButtonInstance( id );
 				}
+				newInst.setButtonConfig( this.buttonConfig );
 
 				this.buttons[ id ] = newInst;
 			}