From f004be97ffc0b38c4cb9d880f24b8b00a5cb1d40 Mon Sep 17 00:00:00 2001
From: carmenmaymo <mayen22@gmail.com>
Date: Mon, 13 Jan 2025 15:21:55 +0100
Subject: [PATCH] use component instead of function

---
 .../ReusableComponents/ConnectionInfo.js      | 52 +++++++++----------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js
index 0c90bf58f..201681a5f 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js
@@ -5,35 +5,31 @@ const ConnectionInfo = () => {
 	const { merchant } = CommonHooks.useMerchantInfo();
 
 	return (
-        <div className="ppcp-r-connection-status__data">
-            {renderStatusRow(
-                __('Merchant ID', 'woocommerce-paypal-payments'),
-                connectionData.merchantId
-            )}
-            {renderStatusRow(
-                __('Email address', 'woocommerce-paypal-payments'),
-                connectionData.email
-            )}
-            {renderStatusRow(
-                __('Client ID', 'woocommerce-paypal-payments'),
-                connectionData.clientId
-            )}
-        </div>
-    );
+		<div className="ppcp-r-connection-status__data">
+			<StatusRow
+				label={ __( 'Merchant ID', 'woocommerce-paypal-payments' ) }
+				value={ merchant.id }
+			/>
+			<StatusRow
+				label={ __( 'Email address', 'woocommerce-paypal-payments' ) }
+				value={ merchant.email }
+			/>
+			<StatusRow
+				label={ __( 'Client ID', 'woocommerce-paypal-payments' ) }
+				value={ merchant.clientId }
+			/>
+		</div>
+	);
 };
 export default ConnectionInfo;
 
-    return {
-        connectionStatus: merchant.isConnected || false,
-        email: merchant.email || '',
-        merchantId: merchant.id || '',
-        clientId: merchant.clientId || '',
-    };
-};
-
-const renderStatusRow = (label, value) => (
-    <div className="ppcp-r-connection-status__status-row">
-        <span className="ppcp-r-connection-status__status-label">{label}</span>
-        <span className="ppcp-r-connection-status__status-value">{value}</span>
-    </div>
+const StatusRow = ( { label, value } ) => (
+	<div className="ppcp-r-connection-status__status-row">
+		<span className="ppcp-r-connection-status__status-label">
+			{ label }
+		</span>
+		<span className="ppcp-r-connection-status__status-value">
+			{ value }
+		</span>
+	</div>
 );