🚚 Improve component organization

modules/ppcp-settings/resources/js/App.js

@@ -1,8 +0,0 @@
-import Settings from './Components/Screens/Settings';
-export function App() {
-	return (
-		<div>
-			<Settings />
-		</div>
-	);
-}

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 { OnboardingHooks } from '../data';
-import SpinnerOverlay from '../ReusableComponents/SpinnerOverlay';
+import SpinnerOverlay from './ReusableComponents/SpinnerOverlay';
+import OnboardingScreen from './Screens/Onboarding';
+import SettingsScreen from './Screens/Settings';
 
-import OnboardingScreen from './Onboarding';
+const SettingsApp = () => {
-import SettingsScreen from './Settings';
-
-const Settings = () => {
 	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;

modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js

@@ -43,9 +43,7 @@ const TabNavigation = ( { tabs } ) => {
 			onSelect={ updateActivePanel }
 			tabs={ tabs }
 		>
-			{ ( tab ) => {
+			{ ( { Component } ) => Component }
-				return tab.component || <>{ tab.title ?? tab.name }</>;
-			} }
 		</TabPanel>
 	);
 };

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 (

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 = [];
+ * List of all default settings tabs.
-
+ *
-	tabs.push( {
+ * 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 />,
+		Component: <TabOverview />,
-	} );
+	},
-
+	{
-	tabs.push( {
 		name: 'payment-methods',
 		title: __( 'Payment Methods', 'woocommerce-paypal-payments' ),
-		component: <TabPaymentMethods />,
+		Component: <TabPaymentMethods />,
-	} );
+	},
-
+	{
-	tabs.push( {
 		name: 'settings',
 		title: __( 'Settings', 'woocommerce-paypal-payments' ),
-		component: <TabSettings />,
+		Component: <TabSettings />,
-	} );
+	},
-
+	{
-	tabs.push( {
 		name: 'styling',
 		title: __( 'Styling', 'woocommerce-paypal-payments' ),
-		component: <TabStyling />,
+		Component: <TabStyling />,
-	} );
+	},
+];
 
-	return tabs;
+export const getSettingsTabs = () => {
+	return DEFAULT_TABS;
 };

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();

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 />