diff --git a/mollie-payments-for-woocommerce.php b/mollie-payments-for-woocommerce.php index 733e5d73e..948c54206 100644 --- a/mollie-payments-for-woocommerce.php +++ b/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 diff --git a/package.json b/package.json index 81d6b8628..991e9d31d 100644 --- a/package.json +++ b/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", diff --git a/phpcs.xml.dist b/phpcs.xml.dist index 33e29a680..890402816 100644 --- a/phpcs.xml.dist +++ b/phpcs.xml.dist @@ -6,6 +6,13 @@ ./inc ./src ./tests/ + *.js + *.jsx + *.ts + *.tsx + *.css + *.scss + *.json diff --git a/readme.txt b/readme.txt index e9f77c25f..7de652e65 100644 --- a/readme.txt +++ b/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 diff --git a/resources/js/src/checkout/blocks/components/Label.js b/resources/js/src/checkout/blocks/components/Label.js new file mode 100644 index 000000000..fb4f71e69 --- /dev/null +++ b/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 ( + <> + {item.label.title} + {item.label.icon && } + + ); +}; diff --git a/resources/js/src/checkout/blocks/components/PaymentComponentFactory.js b/resources/js/src/checkout/blocks/components/PaymentComponentFactory.js new file mode 100644 index 000000000..b5381297e --- /dev/null +++ b/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
Loading payment methods...
; + } + + switch ( item.name ) { + case 'mollie_wc_gateway_creditcard': + const CreditCardWithStore = withMollieStore( CreditCardComponent ); + return ; + + case 'mollie_wc_gateway_billie': + const BillieFieldsWithStore = withMollieStore( + PaymentFieldsComponent + ); + return ( + + ); + + case 'mollie_wc_gateway_in3': + const In3FieldsWithStore = withMollieStore( + PaymentFieldsComponent + ); + return ( + + ); + + case 'mollie_wc_gateway_riverty': + const RivertyFieldsWithStore = withMollieStore( + PaymentFieldsComponent + ); + return ( + + ); + + default: + const DefaultWithStore = withMollieStore( DefaultComponent ); + return ; + } +}; diff --git a/resources/js/src/checkout/blocks/components/PaymentMethodContentRenderer.js b/resources/js/src/checkout/blocks/components/PaymentMethodContentRenderer.js new file mode 100644 index 000000000..5e8e4222d --- /dev/null +++ b/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 ); +}; diff --git a/resources/js/src/checkout/blocks/components/molliePaymentMethod.js b/resources/js/src/checkout/blocks/components/molliePaymentMethod.js new file mode 100644 index 000000000..c04bddf6b --- /dev/null +++ b/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: