Move tabpanel navigation up

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useState } from '@wordpress/element';
 import classNames from 'classnames';
 
 import { OnboardingHooks, CommonHooks } from '../data';
@@ -31,6 +31,8 @@ const SettingsApp = () => {
 		loading: ! onboardingIsReady,
 	} );
 
+	const [ activePanel, setActivePanel ] = useState( 'overview' );
+
 	const Content = useMemo( () => {
 		if ( ! onboardingIsReady || ! merchantIsReady ) {
 			return <SpinnerOverlay />;
@@ -44,12 +46,18 @@ const SettingsApp = () => {
 			return <OnboardingScreen />;
 		}
 
-		return <SettingsScreen />;
+		return (
+			<SettingsScreen
+				activePanel={ activePanel }
+				setActivePanel={ setActivePanel }
+			/>
+		);
 	}, [
 		isSendOnlyCountry,
 		merchantIsReady,
 		onboardingCompleted,
 		onboardingIsReady,
+		activePanel,
 	] );
 
 	return <div className={ wrapperClass }>{ Content }</div>;

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

@@ -1,26 +1,14 @@
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect } from '@wordpress/element';
 
 // TODO: Migrate to Tabs (TabPanel v2) once its API is publicly available, as it provides programmatic tab switching support: https://github.com/WordPress/gutenberg/issues/52997
 import { TabPanel } from '@wordpress/components';
 
-import { getQuery, updateQueryString } from '../../utils/navigation';
-
-const TabNavigation = ( { tabs } ) => {
-	const { panel } = getQuery();
+import { updateQueryString } from '../../utils/navigation';
 
+const TabNavigation = ( { tabs, activePanel, setActivePanel } ) => {
 	const isValidTab = ( tabsList, checkTab ) => {
 		return tabsList.some( ( tab ) => tab.name === checkTab );
 	};
-
-	const getValidInitialPanel = () => {
-		if ( ! panel || ! isValidTab( tabs, panel ) ) {
-			return tabs[ 0 ].name;
-		}
-		return panel;
-	};
-
-	const [ activePanel, setActivePanel ] = useState( getValidInitialPanel );
-
 	const updateActivePanel = useCallback(
 		( tabName ) => {
 			if ( isValidTab( tabs, tabName ) ) {
@@ -29,7 +17,7 @@ const TabNavigation = ( { tabs } ) => {
 				console.warn( `Invalid tab name: ${ tabName }` );
 			}
 		},
-		[ tabs ]
+		[ tabs, setActivePanel ]
 	);
 
 	useEffect( () => {
@@ -43,7 +31,7 @@ const TabNavigation = ( { tabs } ) => {
 			onSelect={ updateActivePanel }
 			tabs={ tabs }
 		>
-			{ ( { Component } ) => Component }
+			{ () => '' }
 		</TabPanel>
 	);
 };

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

@@ -6,6 +6,8 @@ import classNames from 'classnames';
 import useIsScrolled from '../../hooks/useIsScrolled';
 import { useNavigation } from '../../hooks/useNavigation';
 import BusyStateWrapper from './BusyStateWrapper';
+import { getSettingsTabs } from '../Screens/Settings/Tabs';
+import TabNavigation from './TabNavigation';
 
 const TopNavigation = ( {
 	title,
@@ -15,6 +17,9 @@ const TopNavigation = ( {
 	onTitleClick = null,
 	showProgressBar = false,
 	progressBarPercent = 0,
+	tabs,
+	activePanel,
+	setActivePanel,
 } ) => {
 	const { goToWooCommercePaymentsTab } = useNavigation();
 	const { isScrolled } = useIsScrolled();
@@ -63,6 +68,11 @@ const TopNavigation = ( {
 				>
 					{ children }
 				</BusyStateWrapper>
+				<TabNavigation
+					tabs={ tabs }
+					activePanel={ activePanel }
+					setActivePanel={ setActivePanel }
+				></TabNavigation>
 
 				{ showProgressBar && (
 					<ProgressBar percent={ progressBarPercent } />

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

@@ -5,13 +5,19 @@ import TopNavigation from '../../../ReusableComponents/TopNavigation';
 import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
 import { useSaveSettings } from '../../../../hooks/useSaveSettings';
 
-const SettingsNavigation = () => {
+const SettingsNavigation = ( { tabs, activePanel, setActivePanel } ) => {
 	const { persistAll } = useSaveSettings();
 
 	const title = __( 'PayPal Payments', 'woocommerce-paypal-payments' );
 
 	return (
-		<TopNavigation title={ title } exitOnTitleClick={ true }>
+		<TopNavigation
+			title={ title }
+			exitOnTitleClick={ true }
+			tabs={ tabs }
+			activePanel={ activePanel }
+			setActivePanel={ setActivePanel }
+		>
 			<BusyStateWrapper>
 				<Button variant="primary" onClick={ persistAll }>
 					{ __( 'Save', 'woocommerce-paypal-payments' ) }

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

@@ -1,17 +1,18 @@
 import Container from '../../ReusableComponents/Container';
-import TabNavigation from '../../ReusableComponents/TabNavigation';
-import { getSettingsTabs } from './Tabs';
 import SettingsNavigation from './Components/Navigation';
+import { getSettingsTabs } from './Tabs';
 
-const SettingsScreen = () => {
+const SettingsScreen = ( { activePanel, setActivePanel } ) => {
 	const tabs = getSettingsTabs();
-
+	const { Component } = tabs.find( ( tab ) => tab.name === activePanel );
 	return (
 		<>
-			<SettingsNavigation />
-			<Container page="settings">
-				<TabNavigation tabs={ tabs }></TabNavigation>
-			</Container>
+			<SettingsNavigation
+				tabs={ tabs }
+				activePanel={ activePanel }
+				setActivePanel={ setActivePanel }
+			/>
+			<Container page="settings">{ Component }</Container>
 		</>
 	);
 };