From db7e5e0dae9ad6a40af3f752d9211b58fca6b019 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 10 Jan 2025 13:57:53 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A=20Improve=20component=20organizati?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modules/ppcp-settings/resources/js/App.js     |  8 ----
 .../{Screens/Settings.js => App.js}           | 13 +++---
 .../ReusableComponents/TabNavigation.js       |  4 +-
 .../Settings/Components/SettingsNavigation.js |  2 +-
 .../Components/Screens/Settings/Tabs/index.js | 42 ++++++++++---------
 .../js/Components/Screens/Settings/index.js   |  4 +-
 modules/ppcp-settings/resources/js/index.js   |  2 +-
 7 files changed, 34 insertions(+), 41 deletions(-)
 delete mode 100644 modules/ppcp-settings/resources/js/App.js
 rename modules/ppcp-settings/resources/js/Components/{Screens/Settings.js => App.js} (79%)

diff --git a/modules/ppcp-settings/resources/js/App.js b/modules/ppcp-settings/resources/js/App.js
deleted file mode 100644
index 33d0f94f4..000000000
--- a/modules/ppcp-settings/resources/js/App.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Settings from './Components/Screens/Settings';
-export function App() {
-	return (
-		<div>
-			<Settings />
-		</div>
-	);
-}
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings.js b/modules/ppcp-settings/resources/js/Components/App.js
similarity index 79%
rename from modules/ppcp-settings/resources/js/Components/Screens/Settings.js
rename to modules/ppcp-settings/resources/js/Components/App.js
index dfcdfafcd..1b08de16e 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings.js
+++ b/modules/ppcp-settings/resources/js/Components/App.js
@@ -2,13 +2,12 @@ import { useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
 
-import { OnboardingHooks } from '../../data';
-import SpinnerOverlay from '../ReusableComponents/SpinnerOverlay';
+import { OnboardingHooks } from '../data';
+import SpinnerOverlay from './ReusableComponents/SpinnerOverlay';
+import OnboardingScreen from './Screens/Onboarding';
+import SettingsScreen from './Screens/Settings';
 
-import OnboardingScreen from './Onboarding';
-import SettingsScreen from './Settings';
-
-const Settings = () => {
+const SettingsApp = () => {
 	const onboardingProgress = OnboardingHooks.useSteps();
 
 	// Disable the "Changes you made might not be saved" browser warning.
@@ -48,4 +47,4 @@ const Settings = () => {
 	return <div className={ wrapperClass }>{ Content }</div>;
 };
 
-export default Settings;
+export default SettingsApp;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
index e6561f56f..0ae4e001e 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
@@ -43,9 +43,7 @@ const TabNavigation = ( { tabs } ) => {
 			onSelect={ updateActivePanel }
 			tabs={ tabs }
 		>
-			{ ( tab ) => {
-				return tab.component || <>{ tab.title ?? tab.name }</>;
-			} }
+			{ ( { Component } ) => Component }
 		</TabPanel>
 	);
 };
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js
index 5552dd177..8eb6b12c5 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/SettingsNavigation.js
@@ -1,6 +1,6 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import data from '../../utils/data';
+import data from '../../../../utils/data';
 
 const SettingsNavigation = ( {} ) => {
 	return (
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js
index 494a19082..e6cecf11d 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js
@@ -5,32 +5,36 @@ import TabPaymentMethods from '../../Overview/TabPaymentMethods';
 import TabSettings from '../../Overview/TabSettings';
 import TabStyling from '../../Overview/TabStyling';
 
-export const getSettingsTabs = () => {
-	const tabs = [];
-
-	tabs.push( {
+/**
+ * List of all default settings tabs.
+ *
+ * The tabs are displayed in the order in which they appear in this array
+ *
+ * @type {[{name, title, Component}]}
+ */
+const DEFAULT_TABS = [
+	{
 		name: 'overview',
 		title: __( 'Overview', 'woocommerce-paypal-payments' ),
-		component: <TabOverview />,
-	} );
-
-	tabs.push( {
+		Component: <TabOverview />,
+	},
+	{
 		name: 'payment-methods',
 		title: __( 'Payment Methods', 'woocommerce-paypal-payments' ),
-		component: <TabPaymentMethods />,
-	} );
-
-	tabs.push( {
+		Component: <TabPaymentMethods />,
+	},
+	{
 		name: 'settings',
 		title: __( 'Settings', 'woocommerce-paypal-payments' ),
-		component: <TabSettings />,
-	} );
-
-	tabs.push( {
+		Component: <TabSettings />,
+	},
+	{
 		name: 'styling',
 		title: __( 'Styling', 'woocommerce-paypal-payments' ),
-		component: <TabStyling />,
-	} );
+		Component: <TabStyling />,
+	},
+];
 
-	return tabs;
+export const getSettingsTabs = () => {
+	return DEFAULT_TABS;
 };
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 bb1da88c4..e84916b67 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js
@@ -1,7 +1,7 @@
-import { getSettingsTabs } from './tabs';
-import SettingsNavigation from './Components/SettingsNavigation';
 import Container from '../../ReusableComponents/Container';
 import TabNavigation from '../../ReusableComponents/TabNavigation';
+import { getSettingsTabs } from './Tabs';
+import SettingsNavigation from './Components/SettingsNavigation';
 
 const SettingsScreen = () => {
 	const tabs = getSettingsTabs();
diff --git a/modules/ppcp-settings/resources/js/index.js b/modules/ppcp-settings/resources/js/index.js
index 6dfd70ed5..f044642ba 100644
--- a/modules/ppcp-settings/resources/js/index.js
+++ b/modules/ppcp-settings/resources/js/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { App } from './App';
+import App from './Components/App';
 
 createRoot( document.getElementById( 'ppcp-settings-container' ) ).render(
 	<App />