POC - Centralized payment method definitions

build/payment-methods-plugin.js

@@ -0,0 +1,223 @@
+const { spawn } = require( 'child_process' );
+const path = require( 'path' );
+const fs = require( 'fs' );
+
+// Helper function to recursively get all files in a directory
+function getAllFiles( dirPath, arrayOfFiles = [] ) {
+	const files = fs.readdirSync( dirPath );
+
+	files.forEach( ( file ) => {
+		const fullPath = path.join( dirPath, file );
+		if ( fs.statSync( fullPath ).isDirectory() ) {
+			arrayOfFiles = getAllFiles( fullPath, arrayOfFiles );
+		} else {
+			arrayOfFiles.push( fullPath );
+		}
+	} );
+
+	return arrayOfFiles;
+}
+
+// Helper function to recursively remove a directory
+function removeDirectory( dirPath ) {
+	if ( fs.existsSync( dirPath ) ) {
+		fs.readdirSync( dirPath ).forEach( ( file ) => {
+			const curPath = path.join( dirPath, file );
+			if ( fs.lstatSync( curPath ).isDirectory() ) {
+				removeDirectory( curPath );
+			} else {
+				fs.unlinkSync( curPath );
+			}
+		} );
+		fs.rmdirSync( dirPath );
+	}
+}
+
+class PaymentMethodsPlugin {
+	apply( compiler ) {
+		// Track if we've built the payment methods in this session
+		let hasBuilt = false;
+		// Track if we're currently building
+		let isBuilding = false;
+
+		// Create build directory if it doesn't exist
+		const buildDir = path.resolve( __dirname, './payment-methods' );
+		if ( ! fs.existsSync( buildDir ) ) {
+			fs.mkdirSync( buildDir, { recursive: true } );
+		}
+
+		// Add payment method files to webpack's watch list
+		compiler.hooks.afterCompile.tap(
+			'PaymentMethodsPlugin',
+			( compilation ) => {
+				const paymentMethodsDir = path.resolve(
+					__dirname,
+					'../includes/payment-methods/Configs'
+				);
+
+				// Add all files and directories recursively
+				if ( fs.existsSync( paymentMethodsDir ) ) {
+					// Add the root directory
+					compilation.fileDependencies.add( paymentMethodsDir );
+
+					// Add all files recursively
+					const allFiles = getAllFiles( paymentMethodsDir );
+					allFiles.forEach( ( file ) => {
+						compilation.fileDependencies.add( file );
+					} );
+
+					// Add all directories recursively
+					const addDirectory = ( dir ) => {
+						compilation.fileDependencies.add( dir );
+						fs.readdirSync( dir ).forEach( ( file ) => {
+							const fullPath = path.join( dir, file );
+							if ( fs.statSync( fullPath ).isDirectory() ) {
+								addDirectory( fullPath );
+							}
+						} );
+					};
+					addDirectory( paymentMethodsDir );
+				}
+			}
+		);
+
+		const buildPaymentMethods = ( callback ) => {
+			if ( isBuilding ) {
+				callback();
+				return;
+			}
+
+			isBuilding = true;
+			console.log( '\nBuilding payment method definitions...' );
+
+			// Run WP-CLI command inside Docker
+			const cliScript = spawn( 'docker', [
+				'compose',
+				'exec',
+				'-T',
+				'wordpress',
+				'wp',
+				'wcpay',
+				'generate-payment-method-configs',
+				'--allow-root',
+			] );
+
+			cliScript.stdout.on( 'data', ( data ) => {
+				console.log( `${ data }` );
+			} );
+
+			cliScript.stderr.on( 'data', ( data ) => {
+				console.error( `Error: ${ data }` );
+			} );
+
+			cliScript.on( 'close', ( code ) => {
+				if ( code !== 0 ) {
+					console.error( 'WP-CLI command failed' );
+					isBuilding = false;
+					callback( new Error( 'WP-CLI command failed' ) );
+					return;
+				}
+
+				console.log( 'WP-CLI command completed successfully' );
+
+				// Then run the JavaScript script
+				const jsScript = spawn(
+					'node',
+					[
+						path.resolve(
+							__dirname,
+							'../includes/payment-methods/Configs/Scripts/generate-payment-method-types.js'
+						),
+					],
+					{
+						stdio: 'inherit',
+					}
+				);
+
+				jsScript.on( 'close', ( closeCode ) => {
+					if ( closeCode !== 0 ) {
+						console.error( 'JavaScript script failed' );
+						isBuilding = false;
+						callback( new Error( 'JavaScript script failed' ) );
+						return;
+					}
+
+					console.log( 'Running eslint...' );
+
+					// Run eslint --fix on the generated file
+					const eslintScript = spawn(
+						'npx',
+						[
+							'eslint',
+							'--fix',
+							'client/payment-methods/types.ts',
+						],
+						{
+							stdio: [ 'inherit', 'ignore', 'ignore' ],
+						}
+					);
+
+					eslintScript.on( 'close', ( eslintCode ) => {
+						isBuilding = false;
+						if ( eslintCode !== 0 ) {
+							console.error( 'Eslint failed' );
+							callback( new Error( 'Eslint failed' ) );
+							return;
+						}
+
+						// Clean up build artifacts
+						removeDirectory( buildDir );
+
+						console.log(
+							'Payment method definitions built successfully\n'
+						);
+						hasBuilt = true;
+						callback();
+					} );
+				} );
+			} );
+		};
+
+		// Run build when files change during watch
+		compiler.hooks.watchRun.tapAsync(
+			'PaymentMethodsPlugin',
+			( compilation, callback ) => {
+				// Build on initial run or when files have changed
+				if ( ! hasBuilt || compilation.modifiedFiles ) {
+					// Only check for payment method changes if we have modified files
+					if ( compilation.modifiedFiles ) {
+						const modifiedFiles = Array.from(
+							compilation.modifiedFiles || []
+						);
+
+						// Ignore changes to generated files
+						const hasPaymentMethodChanges = modifiedFiles.some(
+							( file ) =>
+								file.includes( '/payment-methods/Configs/' ) &&
+								! file.includes( 'build/' ) &&
+								! file.includes(
+									'client/payment-methods/types.ts'
+								)
+						);
+
+						if ( ! hasPaymentMethodChanges ) {
+							callback();
+							return;
+						}
+
+						console.log(
+							'\nPayment method files changed, rebuilding...'
+						);
+					}
+
+					hasBuilt = false; // Reset build flag
+					buildPaymentMethods( callback );
+				} else {
+					callback();
+				}
+			}
+		);
+	}
+}
+
+module.exports = PaymentMethodsPlugin;

changelog/poc-centralized-payment-method-definitions

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add centralized payment method definitions to streamline implementation and maintenance of payment methods.

client/payment-methods-map.tsx

@@ -9,9 +9,6 @@ import { __ } from '@wordpress/i18n';
 
 import {
 	AlipayIcon,
-	AffirmIcon,
-	AfterpayIcon,
-	ClearpayIcon,
 	BancontactIcon,
 	BankDebitIcon,
 	CreditCardIcon,
@@ -27,7 +24,7 @@ import {
 	WeChatPayIcon,
 } from 'wcpay/payment-methods-icons';
 
-const accountCountry = window.wcpaySettings?.accountStatus?.country || 'US';
+import GeneratedPaymentMethodInformationObject from './payment-methods/generated-map';
 
 export interface PaymentMethodMapEntry {
 	id: string;
@@ -185,43 +182,6 @@ const PaymentMethodInformationObject: Record<
 		allows_pay_later: false,
 		accepts_only_domestic_payment: false,
 	},
-	affirm: {
-		id: 'affirm',
-		label: __( 'Affirm', 'woocommerce-payments' ),
-		description: __(
-			'Allow customers to pay over time with Affirm.',
-			'woocommerce-payments'
-		),
-		icon: AffirmIcon,
-		currencies: [ 'USD', 'CAD' ],
-		stripe_key: 'affirm_payments',
-		allows_manual_capture: false,
-		allows_pay_later: true,
-		accepts_only_domestic_payment: true,
-	},
-	afterpay_clearpay: {
-		id: 'afterpay_clearpay',
-		label:
-			'GB' === accountCountry
-				? __( 'Clearpay', 'woocommerce-payments' )
-				: __( 'Afterpay', 'woocommerce-payments' ),
-		description:
-			'GB' === accountCountry
-				? __(
-						'Allow customers to pay over time with Clearpay.',
-						'woocommerce-payments'
-				  )
-				: __(
-						'Allow customers to pay over time with Afterpay.',
-						'woocommerce-payments'
-				  ),
-		icon: 'GB' === accountCountry ? ClearpayIcon : AfterpayIcon,
-		currencies: [ 'USD', 'AUD', 'CAD', 'NZD', 'GBP' ],
-		stripe_key: 'afterpay_clearpay_payments',
-		allows_manual_capture: false,
-		allows_pay_later: true,
-		accepts_only_domestic_payment: true,
-	},
 	jcb: {
 		id: 'jcb',
 		label: __( 'JCB', 'woocommerce-payments' ),
@@ -292,6 +252,7 @@ const PaymentMethodInformationObject: Record<
 		allows_pay_later: false,
 		accepts_only_domestic_payment: false,
 	},
+	...GeneratedPaymentMethodInformationObject,
 };
 
 export default PaymentMethodInformationObject;

client/payment-methods/generated-map.ts

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import type { PaymentMethodMapEntry } from '../payment-methods-map';
+import { PaymentMethodDefinitions } from './types';
+import { mapDefinitionToEntry } from './mapping';
+
+/**
+ * Generated payment method information using the backend-defined types
+ */
+const GeneratedPaymentMethodInformationObject: Record<
+	string,
+	PaymentMethodMapEntry
+> = Object.fromEntries(
+	Object.entries( PaymentMethodDefinitions ).map( ( [ key, def ] ) => [
+		key,
+		mapDefinitionToEntry( def ),
+	] )
+);
+
+export default GeneratedPaymentMethodInformationObject;

client/payment-methods/icons/index.ts

@@ -0,0 +1 @@
+export * from './utils';

client/payment-methods/icons/utils.tsx

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+import classNames from 'classnames';
+import type { ImgHTMLAttributes, FunctionComponent } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { PaymentMethodDefinition } from '../types';
+
+type ReactImgFuncComponent = FunctionComponent<
+	ImgHTMLAttributes< HTMLImageElement >
+>;
+
+interface IconComponentOptions {
+	hasBorder?: boolean;
+}
+
+/**
+ * Creates an icon component from a given path and label
+ *
+ * @param iconPath - Path to the icon asset
+ * @param label   - Pre-translated text to use as alt text for the icon.
+ *                 This should be already translated when passed to this function.
+ * @param options - Additional options for the icon component
+ */
+export const createIconComponent = (
+	iconPath: string,
+	label: string,
+	options: IconComponentOptions = { hasBorder: true }
+): ReactImgFuncComponent => {
+	return ( { className, ...props } ): JSX.Element => (
+		<img
+			className={ classNames(
+				'payment-method__icon',
+				options.hasBorder ? '' : 'no-border',
+				className
+			) }
+			src={ iconPath }
+			alt={ label }
+			{ ...props }
+		/>
+	);
+};
+
+/**
+ * Creates an icon component from a payment method definition.
+ * Uses the pre-translated title from the definition as the alt text.
+ * Note: Payment method titles are translated in their PHP definition files.
+ *
+ * @param def     - Payment method definition containing the icon path and pre-translated title
+ * @param options - Additional options for the icon component
+ */
+export const createPaymentMethodIconComponent = (
+	def: PaymentMethodDefinition,
+	options?: IconComponentOptions
+): ReactImgFuncComponent => {
+	return createIconComponent( def.settingsIcon, def.title, options );
+};