fix: standardize payment method labels and configure ESLint

jimmyn · jimmyn · commit 7f2cf646bc92 · 2025-10-03T09:53:43.000+02:00
- Remove extra div wrapper from Bizum, PayPal, MBWay, Multibanco labels
- All payment methods now use monei-label-container consistently
- Configure ESLint to only ban console.log (allow console.warn/error)
- Add proper parser options for ES6 modules and JSX
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+	env: {
+		browser: true,
+		es6: true,
+	},
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+	rules: {
+		// Critical rules - only ban console.log, allow warn/error
+		'no-console': [ 'error', { allow: [ 'warn', 'error' ] } ],
+	},
+};
diff --git a/assets/js/components/monei-apple-google-component.js b/assets/js/components/monei-apple-google-component.js
@@ -1,12 +1,9 @@
-import {
-	getPlaceOrderButton,
-	useButtonStateManager,
-} from '../helpers/monei-shared-utils';
+import { useButtonStateManager } from '../helpers/monei-shared-utils';
 
 /**
  * Create Apple/Google Pay label
  * @param {Object} moneiData - Configuration data
- * @return {React.Element}
+ * @return {*} JSX Element
  */
 export const createAppleGoogleLabel = ( moneiData ) => {
 	const isApple = window.ApplePaySession?.canMakePayments?.();
@@ -36,15 +33,15 @@ export const createAppleGoogleLabel = ( moneiData ) => {
 /**
  * Shared Apple/Google Pay Content Component
  * @param {Object} props - Component props
- * @return {React.Element}
+ * @return {*} JSX Element
  */
 export const MoneiAppleGoogleContent = ( props ) => {
 	const { useEffect, useRef } = wp.element;
-	const { responseTypes } = props.emitResponse;
 	const { onPaymentSetup } = props.eventRegistration;
 	const { activePaymentMethod } = props;
 	const moneiData =
 		props.moneiData ||
+		// eslint-disable-next-line no-undef
 		wc.wcSettings.getSetting( 'monei_apple_google_data' );
 
 	const paymentRequestRef = useRef( null );
@@ -63,6 +60,7 @@ export const MoneiAppleGoogleContent = ( props ) => {
 	 * Initialize MONEI Payment Request
 	 */
 	const initPaymentRequest = () => {
+		// eslint-disable-next-line no-undef
 		if ( typeof monei === 'undefined' || ! monei.PaymentRequest ) {
 			console.error( 'MONEI SDK is not available' );
 			return;
@@ -77,6 +75,7 @@ export const MoneiAppleGoogleContent = ( props ) => {
 			}
 		}
 
+		// eslint-disable-next-line no-undef
 		const paymentRequest = monei.PaymentRequest( {
 			accountId: moneiData.accountId,
 			sessionId: moneiData.sessionId,
@@ -116,6 +115,7 @@ export const MoneiAppleGoogleContent = ( props ) => {
 				}
 			}
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	// Setup payment hook
@@ -125,7 +125,8 @@ export const MoneiAppleGoogleContent = ( props ) => {
 		} );
 
 		return () => unsubscribe();
-	}, [ onPaymentSetup, buttonManager.tokenRef.current ] );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ onPaymentSetup ] );
 
 	return (
 		<fieldset className="monei-fieldset monei-payment-request-fieldset">
diff --git a/assets/js/monei-block-checkout-bizum.js b/assets/js/monei-block-checkout-bizum.js
@@ -312,7 +312,7 @@
 
 	const MoneiBizumPaymentMethod = {
 		name: 'monei_bizum',
-		label: <div> { bizumLabel() } </div>,
+		label: bizumLabel(),
 		ariaLabel: __( bizumData.title, 'monei' ),
 		content: <MoneiBizumContent />,
 		edit: <div> { __( bizumData.title, 'monei' ) }</div>,
diff --git a/assets/js/monei-block-checkout-mbway.js b/assets/js/monei-block-checkout-mbway.js
@@ -20,7 +20,7 @@
 
 	const MoneiMbwayPaymentMethod = {
 		name: 'monei_mbway',
-		label: <div> { mbwayLabel() } </div>,
+		label: mbwayLabel(),
 		ariaLabel: __( mbwayData.title, 'monei' ),
 		content: <div> { __( mbwayData.description, 'monei' ) }</div>,
 		edit: <div> { __( mbwayData.title, 'monei' ) }</div>,
diff --git a/assets/js/monei-block-checkout-multibanco.js b/assets/js/monei-block-checkout-multibanco.js
@@ -20,7 +20,7 @@
 
 	const MoneiMultibancoPaymentMethod = {
 		name: 'monei_multibanco',
-		label: <div> { multibancoLabel() } </div>,
+		label: multibancoLabel(),
 		ariaLabel: __( multibancoData.title, 'monei' ),
 		content: <div> { __( multibancoData.description, 'monei' ) }</div>,
 		edit: <div> { __( multibancoData.title, 'monei' ) }</div>,
diff --git a/assets/js/monei-block-checkout-paypal.js b/assets/js/monei-block-checkout-paypal.js
@@ -189,7 +189,7 @@
 
 	const MoneiPayPalPaymentMethod = {
 		name: 'monei_paypal',
-		label: <div> { paypalLabel() } </div>,
+		label: paypalLabel(),
 		ariaLabel: __( paypalData.title, 'monei' ),
 		content: <MoneiPayPalContent />,
 		edit: <div> { __( paypalData.title, 'monei' ) }</div>,
