From 7ecbd6a1ca0eb904dbfa855843fd2a689d6ff0d1 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 28 Oct 2024 15:47:53 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Integrate=20the=20new=20Ta?=
 =?UTF-8?q?bNavigation=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReusableComponents/TabNavigation.js       | 44 +++++--------------
 .../Components/Screens/Dashboard/Dashboard.js |  6 +--
 .../js/Components/Screens/Settings.js         |  7 +--
 3 files changed, 13 insertions(+), 44 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
index 487847e72..ff20c66e8 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
@@ -1,43 +1,19 @@
 import { TabPanel } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
-const onSelect = ( tabName ) => {
-	console.log( 'Selecting tab', tabName );
-};
+const TabNavigation = ( { tabs } ) => {
+
+	const updatePanelUri = ( tabName ) => {
+	};
 
-const TabNavigation = () => {
 	return (
 		<TabPanel
-			className="my-tab-panel"
-			activeClass="active-tab"
-			onSelect={ onSelect }
-			tabs={ [
-				{
-					name: 'dashboard',
-					title: __( 'Dashboard', 'woocommerce-paypal-payments' ),
-					className: 'ppcp-r-tab-dashboard',
-				},
-				{
-					name: 'payment-methods',
-					title: __(
-						'Payment Methods',
-						'woocommerce-paypal-payments'
-					),
-					className: 'ppcp-r-tab-payment-methods',
-				},
-				{
-					name: 'settings',
-					title: __( 'Settings', 'woocommerce-paypal-payments' ),
-					className: 'ppcp-r-tab-settings',
-				},
-				{
-					name: 'styling',
-					title: __( 'Styling', 'woocommerce-paypal-payments' ),
-					className: 'ppcp-r-tab-styling',
-				},
-			] }
+			className={ `ppcp-r-tabs ${ panel }` }
+			onSelect={ updatePanelUri }
+			tabs={ tabs }
 		>
-			{ ( tab ) => <p>{ tab.title }</p> }
+			{ ( tab ) => {
+				return tab.component || <>{ tab.title ?? tab.name }</>;
+			} }
 		</TabPanel>
 	);
 };
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Dashboard.js b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Dashboard.js
index 62dd76cf6..2c095e88b 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Dashboard.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Dashboard.js
@@ -1,11 +1,7 @@
 import TabNavigation from '../../ReusableComponents/TabNavigation';
 
 const Dashboard = () => {
-	return (
-		<div>
-			<TabNavigation />
-		</div>
-	);
+	return <div>Settings Page</div>;
 };
 
 export default Dashboard;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings.js
index 9bbf41bb7..0a233c353 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings.js
@@ -1,13 +1,10 @@
-import Onboarding from './Onboarding/Onboarding';
-import { useState } from '@wordpress/element';
-import Dashboard from './Dashboard/Dashboard';
+import TabNavigation from '../ReusableComponents/TabNavigation';
 import { getSettingsTabs } from './tabs';
 
 const Settings = () => {
-	const [ onboarded, setOnboarded ] = useState( true );
 	const tabs = getSettingsTabs();
 
-	return <>{ onboarded ? <Onboarding /> : <Dashboard /> }</>;
+	return <TabNavigation tabs={ tabs }></TabNavigation>;
 };
 
 export default Settings;