✨ Separate logic for onboarding and settings

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

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useState } from '@wordpress/element';
 import { TabPanel } from '@wordpress/components';
 import { getQuery, updateQueryString } from '@woocommerce/navigation';
 
@@ -18,7 +18,7 @@ const TabNavigation = ( { tabs } ) => {
 
 	const [ activePanel, setActivePanel ] = useState( getValidInitialPanel );
 
-	const updatePanelUri = useCallback(
+	const updateActivePanel = useCallback(
 		( tabName ) => {
 			if ( isValidTab( tabs, tabName ) ) {
 				setActivePanel( tabName );
@@ -37,7 +37,7 @@ const TabNavigation = ( { tabs } ) => {
 		<TabPanel
 			className={ `ppcp-r-tabs ${ activePanel }` }
 			initialTabName={ activePanel }
-			onSelect={ updatePanelUri }
+			onSelect={ updateActivePanel }
 			tabs={ tabs }
 		>
 			{ ( tab ) => {

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

@@ -1,8 +1,16 @@
 import TabNavigation from '../ReusableComponents/TabNavigation';
 import { getSettingsTabs } from './tabs';
+import { useOnboardingStep } from '../../data';
+import Onboarding from './Onboarding/Onboarding';
 
 const Settings = () => {
-	const tabs = getSettingsTabs();
+	const onboardingProgress = useOnboardingStep();
+
+	if ( ! onboardingProgress.completed ) {
+		return <Onboarding />;
+	}
+
+	const tabs = getSettingsTabs( onboardingProgress );
 
 	return <TabNavigation tabs={ tabs }></TabNavigation>;
 };

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

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

modules/ppcp-settings/resources/js/data/onboarding/hooks.js

@@ -60,3 +60,22 @@ export const useOnboardingDetails = () => {
 			setDetailAndPersist( setManualConnectionMode, state ),
 	};
 };
+
+export const useOnboardingStep = () => {
+	const { setOnboardingStep, setCompleted } = useDispatch( STORE_NAME );
+
+	const onboardingStep = useSelect( ( select ) => {
+		return select( STORE_NAME ).getPersistentData().step || 0;
+	} );
+
+	const completed = useSelect( ( select ) => {
+		return select( STORE_NAME ).getPersistentData().completed;
+	} );
+
+	return {
+		onboardingStep,
+		setOnboardingStep: ( step ) => setOnboardingStep( step ),
+		completed,
+		setCompleted: ( state ) => setCompleted( state ),
+	};
+};