✨ New utility method to determine visible tabs

modules/ppcp-settings/resources/js/Components/Screens/Settings.js

@@ -1,9 +1,11 @@
 import Onboarding from './Onboarding/Onboarding';
 import { useState } from '@wordpress/element';
 import Dashboard from './Dashboard/Dashboard';
+import { getSettingsTabs } from './tabs';
 
 const Settings = () => {
 	const [ onboarded, setOnboarded ] = useState( true );
+	const tabs = getSettingsTabs();
 
 	return <>{ onboarded ? <Onboarding /> : <Dashboard /> }</>;
 };

modules/ppcp-settings/resources/js/Components/Screens/tabs.js

@@ -0,0 +1,42 @@
+import { __ } from '@wordpress/i18n';
+import Dashboard from './Dashboard/Dashboard';
+import Onboarding from './Onboarding/Onboarding';
+
+export const getSettingsTabs = () => {
+	const tabs = [];
+
+	// TODO: Use the store to find out if onboarding is complete
+
+	if ( 0 ) {
+		tabs.push( {
+			name: 'onboarding',
+			component: <Onboarding />,
+		} );
+	}
+
+	if ( 1 ) {
+		tabs.push( {
+			name: 'dashboard',
+			title: __( 'Dashboard', 'woocommerce-paypal-payments' ),
+			component: <Dashboard />,
+		} );
+
+		tabs.push( {
+			name: 'payment-methods',
+			title: __( 'Payment Methods', 'woocommerce-paypal-payments' ),
+			component: <Dashboard />,
+		} );
+
+		tabs.push( {
+			name: 'settings',
+			title: __( 'Settings', 'woocommerce-paypal-payments' ),
+		} );
+
+		tabs.push( {
+			name: 'styling',
+			title: __( 'Styling', 'woocommerce-paypal-payments' ),
+		} );
+	}
+
+	return tabs;
+};