From ce25dee734475ef81ddb7a23fcf2ebf0f909b91c Mon Sep 17 00:00:00 2001
From: Emili Castells Guasch <e.castells@inpsyde.com>
Date: Mon, 12 Aug 2024 11:54:14 +0200
Subject: [PATCH] Add bancontact component

---
 .../resources/js/bancontact-block.js                     | 9 +++++++++
 ...ct-checkout-block.js => bancontact-payment-method.js} | 4 ++--
 .../src/BancontactPaymentMethod.php                      | 7 ++++---
 .../webpack.config.js                                    | 4 ++--
 4 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-block.js
 rename modules/ppcp-local-alternative-payment-methods/resources/js/{bancontact-checkout-block.js => bancontact-payment-method.js} (80%)

diff --git a/modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-block.js b/modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-block.js
new file mode 100644
index 000000000..e66ab88c3
--- /dev/null
+++ b/modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-block.js
@@ -0,0 +1,9 @@
+export function Bancontact( { config, components } ) {
+	const { PaymentMethodIcons } = components;
+
+	return (
+		<div>
+			<PaymentMethodIcons icons={ [ config.icon ] } align="right" />
+		</div>
+	);
+}
diff --git a/modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-checkout-block.js b/modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-payment-method.js
similarity index 80%
rename from modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-checkout-block.js
rename to modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-payment-method.js
index 910f7fb0c..f8e1d7e25 100644
--- a/modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-checkout-block.js
+++ b/modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-payment-method.js
@@ -1,12 +1,12 @@
 import { registerPaymentMethod } from '@woocommerce/blocks-registry';
+import { Bancontact } from './bancontact-block';
 
 const config = wc.wcSettings.getSetting( 'ppcp-bancontact_data' );
-console.log( config );
 
 registerPaymentMethod( {
 	name: config.id,
 	label: <div dangerouslySetInnerHTML={ { __html: config.title } } />,
-	content: <div>Hi there!</div>,
+	content: <Bancontact config={ config } />,
 	edit: <div></div>,
 	ariaLabel: config.title,
 	canMakePayment: () => {
diff --git a/modules/ppcp-local-alternative-payment-methods/src/BancontactPaymentMethod.php b/modules/ppcp-local-alternative-payment-methods/src/BancontactPaymentMethod.php
index 935bfff78..1430956f8 100644
--- a/modules/ppcp-local-alternative-payment-methods/src/BancontactPaymentMethod.php
+++ b/modules/ppcp-local-alternative-payment-methods/src/BancontactPaymentMethod.php
@@ -63,14 +63,14 @@ class BancontactPaymentMethod extends AbstractPaymentMethodType {
 	 */
 	public function get_payment_method_script_handles() {
 		wp_register_script(
-			'ppcp-bancontact-checkout-block',
-			trailingslashit( $this->module_url ) . 'assets/js/bancontact-checkout-block.js',
+			'ppcp-bancontact-payment-method',
+			trailingslashit( $this->module_url ) . 'assets/js/bancontact-payment-method.js',
 			array(),
 			$this->version,
 			true
 		);
 
-		return array( 'ppcp-bancontact-checkout-block' );
+		return array( 'ppcp-bancontact-payment-method' );
 	}
 
 	/**
@@ -81,6 +81,7 @@ class BancontactPaymentMethod extends AbstractPaymentMethodType {
 			'id'                  => $this->name,
 			'title'               => $this->gateway->title,
 			'description'         => $this->gateway->description,
+			'icon' => esc_url( 'https://www.paypalobjects.com/images/checkout/alternative_payments/paypal_bancontact_color.svg' ),
 		);
 	}
 }
diff --git a/modules/ppcp-local-alternative-payment-methods/webpack.config.js b/modules/ppcp-local-alternative-payment-methods/webpack.config.js
index 65053736f..bf41e6d06 100644
--- a/modules/ppcp-local-alternative-payment-methods/webpack.config.js
+++ b/modules/ppcp-local-alternative-payment-methods/webpack.config.js
@@ -9,8 +9,8 @@ module.exports = {
 	target: 'web',
 	plugins: [ new DependencyExtractionWebpackPlugin() ],
 	entry: {
-		'bancontact-checkout-block': path.resolve(
-			'./resources/js/bancontact-checkout-block.js'
+		'bancontact-payment-method': path.resolve(
+			'./resources/js/bancontact-payment-method.js'
 		),
 	},
 	output: {