Merge pull request #2915 from woocommerce/PCP-4031-remove-woocommerce-navigation-dependency

Remove @woocommerce/navigation dependency (4031)

modules/ppcp-settings/package.json

@@ -7,14 +7,13 @@
         "build": "wp-scripts build --webpack-src-dir=resources/js --output-path=assets"
     },
     "devDependencies": {
-        "@woocommerce/navigation": "~8.1.0",
         "@wordpress/data": "^10.10.0",
         "@wordpress/data-controls": "^4.10.0",
-        "@wordpress/scripts": "^30.3.0"
+        "@wordpress/scripts": "^30.3.0",
+        "classnames": "^2.5.1"
     },
     "dependencies": {
         "@paypal/react-paypal-js": "^8.7.0",
-        "@woocommerce/settings": "^1.0.0",
         "react-select": "^5.8.3"
     }
 }

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

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { TabPanel } from '@wordpress/components';
-import { getQuery, updateQueryString } from '@woocommerce/navigation';
+
+import { getQuery, updateQueryString } from '../../utils/navigation';
 
 const TabNavigation = ( { tabs } ) => {
 	const { panel } = getQuery();
@@ -30,7 +31,7 @@ const TabNavigation = ( { tabs } ) => {
 	);
 
 	useEffect( () => {
-		updateQueryString( { panel: activePanel }, '/', getQuery() );
+		updateQueryString( { panel: activePanel } );
 	}, [ activePanel ] );
 
 	return (

modules/ppcp-settings/resources/js/utils/navigation.js

@@ -0,0 +1,39 @@
+import { addQueryArgs } from '@wordpress/url';
+
+const getLocation = () => window.location;
+
+const pushHistory = ( path ) => window.history.pushState( { path }, '', path );
+
+/**
+ * Get the current path from the browser.
+ *
+ * @return {string} Current path.
+ */
+export const getPath = () => getLocation().pathname;
+
+/**
+ * Get the current query string, parsed into an object, from history.
+ *
+ * @return {Object} Current query object, defaults to empty object.
+ */
+export const getQuery = () =>
+	Object.fromEntries( new URLSearchParams( getLocation().search ) );
+
+/**
+ * Updates the query parameters of the current page.
+ *
+ * @param {Object} query Object of params to be updated.
+ * @throws {TypeError} If the query is not an object.
+ */
+export const updateQueryString = ( query ) =>
+	pushHistory( getNewPath( query ) );
+
+/**
+ * Return a URL with set query parameters.
+ *
+ * @param {Object} query    Object of params to be updated.
+ * @param {string} basePath Optional. Define the path for the new URL.
+ * @return {string} Updated URL merging query params into existing params.
+ */
+export const getNewPath = ( query, basePath = getPath() ) =>
+	addQueryArgs( basePath, { ...getQuery(), ...query } );