From 988d221a981ecc3ceb7e8b33119383aa518f61f8 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 10 Feb 2025 18:54:31 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Sample=20implementation=20?=
 =?UTF-8?q?of=20seller-type=20in=20JS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Settings/Components/Settings/ConnectionStatus.js     | 9 +++++++--
 .../resources/js/Components/Screens/Settings/index.js    | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js
index d93b8431b..5ddc31a7c 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js
@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
 
 import SettingsCard from '../../../../ReusableComponents/SettingsCard';
 import { CommonHooks } from '../../../../../data';
@@ -8,11 +9,15 @@ import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
 import { ControlStaticValue } from '../../../../ReusableComponents/Controls';
 
 const ConnectionStatus = () => {
-	const { merchant } = CommonHooks.useMerchantInfo();
+	const merchant = CommonHooks.useMerchant();
+	const className = classNames( 'ppcp-connection-details ppcp--value-list', {
+		'ppcp--type-business': merchant.isBusinessSeller,
+		'ppcp--type-casual': merchant.isCasualSeller,
+	} );
 
 	return (
 		<SettingsCard
-			className="ppcp-connection-details ppcp--value-list"
+			className={ className }
 			title={ __( 'Connection status', 'woocommerce-paypal-payments' ) }
 			description={ <ConnectionDescription /> }
 		>
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js
index 7d0cc24f3..ec91b6204 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js
@@ -5,6 +5,7 @@ import { getSettingsTabs } from './Tabs';
 const SettingsScreen = ( { activePanel, setActivePanel } ) => {
 	const tabs = getSettingsTabs();
 	const { Component } = tabs.find( ( tab ) => tab.name === activePanel );
+
 	return (
 		<>
 			<SettingsNavigation