From 7c111906ab400affa81ee1fa767002f5cbaa6df2 Mon Sep 17 00:00:00 2001
From: inpsyde-maticluznar <m.luznar@inpsyde.com>
Date: Thu, 10 Oct 2024 07:22:22 +0200
Subject: [PATCH] Position the card icons beside the label instead of beneath
 the fields on the checkout form.

---
 .../resources/js/Components/card-fields.js    |  6 ---
 .../js/advanced-card-checkout-block.js        | 45 ++++++++++++-------
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/modules/ppcp-blocks/resources/js/Components/card-fields.js b/modules/ppcp-blocks/resources/js/Components/card-fields.js
index 2726bc12e..05d41b315 100644
--- a/modules/ppcp-blocks/resources/js/Components/card-fields.js
+++ b/modules/ppcp-blocks/resources/js/Components/card-fields.js
@@ -19,11 +19,9 @@ export function CardFields( {
 	config,
 	eventRegistration,
 	emitResponse,
-	components,
 } ) {
 	const { onPaymentSetup } = eventRegistration;
 	const { responseTypes } = emitResponse;
-	const { PaymentMethodIcons } = components;
 
 	const [ cardFieldsForm, setCardFieldsForm ] = useState();
 	const getCardFieldsForm = ( cardFieldsForm ) => {
@@ -95,10 +93,6 @@ export function CardFields( {
 					} }
 				>
 					<PayPalCardFieldsForm />
-					<PaymentMethodIcons
-						icons={ config.card_icons }
-						align="left"
-					/>
 					<CheckoutHandler
 						getCardFieldsForm={ getCardFieldsForm }
 						getSavePayment={ getSavePayment }
diff --git a/modules/ppcp-blocks/resources/js/advanced-card-checkout-block.js b/modules/ppcp-blocks/resources/js/advanced-card-checkout-block.js
index cdce4fd87..24c53c5a5 100644
--- a/modules/ppcp-blocks/resources/js/advanced-card-checkout-block.js
+++ b/modules/ppcp-blocks/resources/js/advanced-card-checkout-block.js
@@ -1,19 +1,30 @@
-import { registerPaymentMethod } from '@woocommerce/blocks-registry';
-import { CardFields } from './Components/card-fields';
+import {registerPaymentMethod} from '@woocommerce/blocks-registry';
+import {CardFields} from './Components/card-fields';
 
-const config = wc.wcSettings.getSetting( 'ppcp-credit-card-gateway_data' );
+const config = wc.wcSettings.getSetting('ppcp-credit-card-gateway_data');
 
-registerPaymentMethod( {
-	name: config.id,
-	label: <div dangerouslySetInnerHTML={ { __html: config.title } } />,
-	content: <CardFields config={ config } />,
-	edit: <CardFields config={ config } />,
-	ariaLabel: config.title,
-	canMakePayment: () => {
-		return true;
-	},
-	supports: {
-		showSavedCards: true,
-		features: config.supports,
-	},
-} );
+const Label = ({components, config}) => {
+    const {PaymentMethodIcons} = components;
+    return <>
+        <span dangerouslySetInnerHTML={{__html: config.title}}/>
+        <PaymentMethodIcons
+            icons={ config.card_icons }
+            align="right"
+        />
+    </>
+}
+
+registerPaymentMethod({
+    name: config.id,
+    label: <Label config={config}/>,
+    content: <CardFields config={config}/>,
+    edit: <CardFields config={config}/>,
+    ariaLabel: config.title,
+    canMakePayment: () => {
+        return true;
+    },
+    supports: {
+        showSavedCards: true,
+        features: config.supports,
+    },
+});