use component instead of function

woocommerce · Jan 13, 2025 · f004be9 · f004be9
1 parent c2c4347
commit f004be9
Showing 1 changed file with 24 additions and 28 deletions.
diff --git 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>
 );