From b369756cfda89c90ce9ed916636ec5d88fca4357 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 28 Oct 2024 16:58:50 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Validate=20the=20initial=20tab,?=
 =?UTF-8?q?=20improve=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReusableComponents/TabNavigation.js       | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
index 48c2a85e5..e68c91892 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
@@ -1,15 +1,34 @@
+import { memo, useCallback, useEffect, useState } from '@wordpress/element';
 import { TabPanel } from '@wordpress/components';
 import { getQuery, updateQueryString } from '@woocommerce/navigation';
-import { useEffect, useState } from '@wordpress/element';
 
 const TabNavigation = ( { tabs } ) => {
-	const initialPanel = getQuery()?.panel ?? tabs[ 0 ].name;
-	const [ activePanel, setActivePanel ] = useState( initialPanel );
+	const { panel } = getQuery();
 
-	const updatePanelUri = ( tabName ) => {
-		setActivePanel( tabName );
+	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 updatePanelUri = useCallback(
+		( tabName ) => {
+			if ( isValidTab( tabs, tabName ) ) {
+				setActivePanel( tabName );
+			} else {
+				console.warn( `Invalid tab name: ${ tabName }` );
+			}
+		},
+		[ tabs ]
+	);
+
 	useEffect( () => {
 		updateQueryString( { panel: activePanel }, '/', getQuery() );
 	}, [ activePanel ] );