2 - Block components and hoc (PIWOO-761)

mollie-payments-for-woocommerce.php

@@ -3,7 +3,7 @@
  * Plugin Name: Mollie Payments for WooCommerce
  * Plugin URI: https://www.mollie.com
  * Description: Accept payments in WooCommerce with the official Mollie plugin
- * Version: 8.0.5
+ * Version: 8.0.6-beta1
  * Author: Mollie
  * Author URI: https://www.mollie.com
  * Requires at least: 5.0

package.json

@@ -36,6 +36,7 @@
     "@woocommerce/dependency-extraction-webpack-plugin": "^1.7.0",
     "@wordpress/data": "^6.1.5",
     "@wordpress/element": "^4.0.4",
+    "@wordpress/scripts": "^30.23.0",
     "date-and-time": "^0.14.0",
     "del": "^3.0.0",
     "dotenv": "^16.0.0",
@@ -48,14 +49,21 @@
     "pump": "^3.0.0",
     "sass": "^1.83.1",
     "sass-loader": "^13.3.3",
+    "webpack": "^5.97.1",
     "webpack-cli": "^5.1.4",
-    "wp-pot": "^1.10.2",
-    "webpack": "^5.97.1"
+    "wp-pot": "^1.10.2"
   },
   "scripts": {
     "watch": "BASE_PATH=. node_modules/.bin/encore dev --watch",
     "build": "BASE_PATH=. node_modules/.bin/encore dev",
     "setup": "gulp setup",
+    "lint:md": "wp-scripts lint-md-docs *.md",
+    "lint:js": "wp-scripts lint-js resources/js/src/*",
+    "lint:style": "wp-scripts lint-style resources/scss/*.scss",
+    "lint:js:fix": "wp-scripts lint-js resources/js/src/* --fix",
+    "lint:style:fix": "wp-scripts lint-style resources/scss/*.scss --fix",
+    "lint:php": "yarn phpcs && yarn psalm",
+    "lint:php-fix": "vendor/bin/phpcbf --parallel=8",
     "e2e-activation": "npx playwright test --project=activation",
     "e2e-simple": "npx playwright test --project=simple-classic",
     "e2e-block": "npx playwright test --project=simple-block",

phpcs.xml.dist

@@ -6,6 +6,13 @@
     <file>./inc</file>
     <file>./src</file>
     <exclude-pattern>./tests/</exclude-pattern>
+        <exclude-pattern>*.js</exclude-pattern>
+        <exclude-pattern>*.jsx</exclude-pattern>
+        <exclude-pattern>*.ts</exclude-pattern>
+        <exclude-pattern>*.tsx</exclude-pattern>
+        <exclude-pattern>*.css</exclude-pattern>
+        <exclude-pattern>*.scss</exclude-pattern>
+        <exclude-pattern>*.json</exclude-pattern>
 
     <config name="testVersion" value="7.4"/>
     <config name="ignore_warnings_on_exit" value="1"/>

readme.txt

@@ -218,6 +218,14 @@ Automatic updates should work like a charm; as always though, ensure you backup
 
 == Changelog ==
 
+= 8.0.6-beta1 - 11-09-2025 =
+* Fixed - TypeError in OrderLines.php when processing vouchers with Germanized plugin
+* Fixed - Apple Pay not eligible for Express Checkout in editor with non-Apple Pay compatible device
+* Fixed - Block Editor error `This block encountered an error and cannot show a preview`
+* Fixed - The new `woocommerce_cancel_unpaid_order` filter causes orders not created via checkout to be cancelled
+* Improvement - Improve handling and validation of phone numbers
+* Improvement - Improve handling of webhooks that uses now the REST API and depending on transaction id
+
 = 8.0.5 - 11-08-2025 =
 * Added - PayPal Subscriptions support through Vaulting
 * Fixed - Save Mandates from Payments API

resources/js/src/checkout/blocks/components/Label.js

@@ -0,0 +1,9 @@
+export const Label = ({item}) => {
+    console.log(item.label.title, item.label.icon); // Debugging purposes
+    return (
+        <>
+            <span style={{marginRight: '1em'}}>{item.label.title}</span>
+            {item.label.icon && <img src={item.label.icon} alt=""/>}
+        </>
+    );
+};

resources/js/src/checkout/blocks/components/PaymentComponentFactory.js

@@ -0,0 +1,79 @@
+import CreditCardComponent from './paymentMethods/CreditCardComponent';
+import DefaultComponent from './paymentMethods/DefaultComponent';
+import PaymentFieldsComponent from './paymentMethods/PaymentFieldsComponent';
+import withMollieStore from '../hoc/withMollieStore';
+
+/**
+ * Factory function to create appropriate payment component with store connection
+ * Maps payment method names to their corresponding components with proper configuration
+ * @param {Object} item
+ * @param {Object} commonProps
+ */
+export const createPaymentComponent = ( item, commonProps ) => {
+	if ( ! item || ! item.name ) {
+		return <div>Loading payment methods...</div>;
+	}
+
+	switch ( item.name ) {
+		case 'mollie_wc_gateway_creditcard':
+			const CreditCardWithStore = withMollieStore( CreditCardComponent );
+			return <CreditCardWithStore { ...commonProps } />;
+
+		case 'mollie_wc_gateway_billie':
+			const BillieFieldsWithStore = withMollieStore(
+				PaymentFieldsComponent
+			);
+			return (
+				<BillieFieldsWithStore
+					{ ...commonProps }
+					fieldConfig={ {
+						showCompany: true,
+						companyRequired: true,
+						companyLabel: item.companyPlaceholder || 'Company name',
+					} }
+				/>
+			);
+
+		case 'mollie_wc_gateway_in3':
+			const In3FieldsWithStore = withMollieStore(
+				PaymentFieldsComponent
+			);
+			return (
+				<In3FieldsWithStore
+					{ ...commonProps }
+					fieldConfig={ {
+						showPhone: true,
+						showBirthdate: true,
+						phoneRequired: true,
+						birthdateRequired: true,
+						phoneLabel: item.phoneLabel || 'Phone',
+						birthdateLabel:
+							item.birthdatePlaceholder || 'Birthdate',
+					} }
+				/>
+			);
+
+		case 'mollie_wc_gateway_riverty':
+			const RivertyFieldsWithStore = withMollieStore(
+				PaymentFieldsComponent
+			);
+			return (
+				<RivertyFieldsWithStore
+					{ ...commonProps }
+					fieldConfig={ {
+						showPhone: true,
+						showBirthdate: true,
+						phoneRequired: true,
+						birthdateRequired: true,
+						phoneLabel: item.phoneLabel || 'Phone',
+						birthdateLabel:
+							item.birthdatePlaceholder || 'Birthdate',
+					} }
+				/>
+			);
+
+		default:
+			const DefaultWithStore = withMollieStore( DefaultComponent );
+			return <DefaultWithStore { ...commonProps } />;
+	}
+};

resources/js/src/checkout/blocks/components/PaymentMethodContentRenderer.js

@@ -0,0 +1,105 @@
+import { MOLLIE_STORE_KEY } from '../store';
+import { createPaymentComponent } from './PaymentComponentFactory';
+
+/**
+ * Main Mollie Component - Orchestrates payment method rendering
+ * Handles common payment processing and delegates specific logic to child components
+ * @param {Object} props
+ */
+export const PaymentMethodContentRenderer = ( props ) => {
+	const { useEffect } = wp.element;
+	const { useSelect } = wp.data;
+
+	const {
+		activePaymentMethod,
+		billing,
+		item,
+		jQuery,
+		emitResponse,
+		eventRegistration,
+		requiredFields,
+		shippingData,
+		isPhoneFieldVisible,
+	} = props;
+
+	const { responseTypes } = emitResponse;
+	const { onPaymentSetup } = eventRegistration;
+
+	// Redux store selectors - only for payment processing
+	const selectedIssuer = useSelect(
+		( select ) => select( MOLLIE_STORE_KEY ).getSelectedIssuer(),
+		[]
+	);
+	const inputPhone = useSelect(
+		( select ) => select( MOLLIE_STORE_KEY ).getInputPhone(),
+		[]
+	);
+	const inputBirthdate = useSelect(
+		( select ) => select( MOLLIE_STORE_KEY ).getInputBirthdate(),
+		[]
+	);
+	const inputCompany = useSelect(
+		( select ) => select( MOLLIE_STORE_KEY ).getInputCompany(),
+		[]
+	);
+
+	const issuerKey =
+		'mollie-payments-for-woocommerce_issuer_' + activePaymentMethod;
+
+	// Main payment processing - stays centralized for all payment methods
+	useEffect( () => {
+		const onProcessingPayment = () => {
+			const data = {
+				payment_method: activePaymentMethod,
+				payment_method_title: item.title,
+				[ issuerKey ]: selectedIssuer,
+				billing_phone: inputPhone,
+				billing_company_billie: inputCompany,
+				billing_birthdate: inputBirthdate,
+				cardToken: '',
+			};
+			const tokenVal = jQuery( '.mollie-components > input' ).val();
+			if ( tokenVal ) {
+				data.cardToken = tokenVal;
+			}
+			return {
+				type: responseTypes.SUCCESS,
+				meta: {
+					paymentMethodData: data,
+				},
+			};
+		};
+
+		const unsubscribePaymentProcessing =
+			onPaymentSetup( onProcessingPayment );
+		return () => {
+			unsubscribePaymentProcessing();
+		};
+	}, [
+		selectedIssuer,
+		onPaymentSetup,
+		inputPhone,
+		inputCompany,
+		inputBirthdate,
+		activePaymentMethod,
+		issuerKey,
+		item.title,
+		jQuery,
+		responseTypes.SUCCESS,
+	] );
+
+	// Prepare common props for child components
+	const commonProps = {
+		item,
+		jQuery,
+		useEffect,
+		billing,
+		shippingData,
+		eventRegistration,
+		requiredFields,
+		isPhoneFieldVisible,
+		activePaymentMethod,
+	};
+
+	return createPaymentComponent( item, commonProps );
+};

resources/js/src/checkout/blocks/components/molliePaymentMethod.js

@@ -0,0 +1,33 @@
+import { PaymentMethodContentRenderer } from './PaymentMethodContentRenderer';
+import { Label } from './Label';
+
+const molliePaymentMethod = (
+	item,
+	jQuery,
+	requiredFields,
+	isPhoneFieldVisible
+) => {
+	return {
+		name: item.name,
+		label: <Label item={ item } />,
+		content: (
+			<PaymentMethodContentRenderer
+				item={ item }
+				jQuery={ jQuery }
+				requiredFields={ requiredFields }
+				isPhoneFieldVisible={ isPhoneFieldVisible }
+			/>
+		),
+		edit: <div>{ item.edit }</div>,
+		paymentMethodId: item.paymentMethodId,
+		canMakePayment: () => {
+			//only the methods that return is available on backend will be loaded here so we show them
+			return true;
+		},
+		ariaLabel: item.ariaLabel,
+		supports: {
+			features: item.supports,
+		},
+	};
+};
+export default molliePaymentMethod;

resources/js/src/checkout/blocks/components/paymentFields/BirthdateField.js

@@ -0,0 +1,19 @@
+export const BirthdateField = ( { label, value, onChange } ) => {
+	const handleChange = ( e ) => onChange( e.target.value );
+	const className =
+		'wc-block-components-text-input wc-block-components-address-form__billing-birthdate';
+
+	return (
+		<div className="custom-input">
+			<label htmlFor="billing-birthdate">{ label }</label>
+			<input
+				type="date"
+				className={ className }
+				name="billing-birthdate"
+				id="billing-birthdate"
+				value={ value }
+				onChange={ handleChange }
+			/>
+		</div>
+	);
+};

resources/js/src/checkout/blocks/components/paymentFields/CompanyField.js

@@ -0,0 +1,19 @@
+export const CompanyField = ( { label, value, onChange } ) => {
+	const handleChange = ( e ) => onChange( e.target.value );
+	const className =
+		'wc-block-components-text-input wc-block-components-address-form__billing_company_billie';
+
+	return (
+		<div className="custom-input">
+			<label htmlFor="billing_company_billie">{ label }</label>
+			<input
+				type="text"
+				className={ className }
+				name="billing_company_billie"
+				id="billing_company_billie"
+				value={ value }
+				onChange={ handleChange }
+			/>
+		</div>
+	);
+};

resources/js/src/checkout/blocks/components/paymentFields/CreditCardField.js

@@ -0,0 +1,3 @@
+export const CreditCardField = ( { content } ) => {
+	return <div dangerouslySetInnerHTML={ { __html: content } } />;
+};

resources/js/src/checkout/blocks/components/paymentFields/IssuerSelect.js

@@ -0,0 +1,17 @@
+export const IssuerSelect = ( {
+	issuerKey,
+	issuers,
+	selectedIssuer,
+	updateIssuer,
+} ) => {
+	const handleChange = ( e ) => updateIssuer( e.target.value );
+
+	return (
+		<select
+			name={ issuerKey }
+			dangerouslySetInnerHTML={ { __html: issuers } }
+			value={ selectedIssuer }
+			onChange={ handleChange }
+		/>
+	);
+};

resources/js/src/checkout/blocks/components/paymentFields/PhoneField.js

@@ -0,0 +1,19 @@
+export const PhoneField = ( { id, label, value, onChange, placeholder } ) => {
+	const handleChange = ( e ) => onChange( e.target.value );
+	const className = `wc-block-components-text-input wc-block-components-address-form__${ id }`;
+
+	return (
+		<div className="custom-input">
+			<label htmlFor={ id }>{ label }</label>
+			<input
+				type="tel"
+				className={ className }
+				name={ id }
+				id={ id }
+				value={ value }
+				onChange={ handleChange }
+				placeholder={ placeholder }
+			/>
+		</div>
+	);
+};