POC - Centralized payment method definitions

build/payment-methods-plugin.js

@@ -0,0 +1,228 @@
+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...' );
+
+			// Split the long path into multiple lines
+			const phpScriptPath = path.join(
+				'/var/www/html/wp-content/plugins',
+				'woocommerce-payments/includes/payment-methods',
+				'Configs/scripts/generate-payment-method-configs.php'
+			);
+
+			// Run the PHP script inside Docker
+			const phpScript = spawn( 'docker', [
+				'compose',
+				'exec',
+				'-T',
+				'wordpress',
+				'php',
+				phpScriptPath,
+			] );
+
+			phpScript.stdout.on( 'data', ( data ) => {
+				console.log( `PHP: ${ data }` );
+			} );
+
+			phpScript.stderr.on( 'data', ( data ) => {
+				console.error( `PHP Error: ${ data }` );
+			} );
+
+			phpScript.on( 'close', ( code ) => {
+				if ( code !== 0 ) {
+					console.error( 'PHP script failed' );
+					isBuilding = false;
+					callback( new Error( 'PHP script failed' ) );
+					return;
+				}
+
+				console.log( 'PHP script 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',
+						}
+					);
+
+					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;

client/payment-methods-map.tsx

@@ -8,9 +8,6 @@ import { __ } from '@wordpress/i18n';
  */
 
 import {
-	AffirmIcon,
-	AfterpayIcon,
-	ClearpayIcon,
 	BancontactIcon,
 	BankDebitIcon,
 	CreditCardIcon,
@@ -24,7 +21,7 @@ import {
 	SofortIcon,
 } from 'wcpay/payment-methods-icons';
 
-const accountCountry = window.wcpaySettings?.accountStatus?.country || 'US';
+import GeneratedPaymentMethodInformationObject from './payment-methods/generated-map';
 
 export interface PaymentMethodMapEntry {
 	id: string;
@@ -168,43 +165,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' ),
@@ -233,6 +193,7 @@ const PaymentMethodInformationObject: Record<
 		allows_pay_later: true,
 		accepts_only_domestic_payment: true,
 	},
+	...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/mapping.ts

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import type { ImgHTMLAttributes, FunctionComponent } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { PaymentMethodDefinition } from './types';
+import type { PaymentMethodMapEntry } from '../payment-methods-map';
+import {
+	AffirmIcon,
+	AfterpayIcon,
+	ClearpayIcon,
+} from '../payment-methods-icons';
+
+type ReactImgFuncComponent = FunctionComponent<
+	ImgHTMLAttributes< HTMLImageElement >
+>;
+
+const accountCountry = window.wcpaySettings?.accountStatus?.country || 'US';
+
+/**
+ * Maps payment method IDs to their corresponding icon components
+ */
+function getIconComponent( id: string ): ReactImgFuncComponent {
+	const iconMap: Record< string, ReactImgFuncComponent > = {
+		affirm: AffirmIcon,
+		afterpay_clearpay:
+			accountCountry === 'GB' ? ClearpayIcon : AfterpayIcon,
+	};
+	return iconMap[ id ];
+}
+
+/**
+ * Maps a PaymentMethodDefinition to a PaymentMethodMapEntry
+ */
+export function mapDefinitionToEntry(
+	def: PaymentMethodDefinition
+): PaymentMethodMapEntry {
+	return {
+		id: def.id,
+		label: def.title,
+		description: def.description,
+		icon: getIconComponent( def.id ),
+		currencies: def.currencies,
+		stripe_key: def.stripeId,
+		allows_manual_capture: def.capabilities.includes( 'capture_later' ),
+		allows_pay_later: def.capabilities.includes( 'buy_now_pay_later' ),
+		accepts_only_domestic_payment: def.capabilities.includes(
+			'domestic_transactions_only'
+		),
+	};
+}