woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

♻️ Make the URL cleanup more reusable

Browse source
This commit is contained in:
Philipp Stracker 2025-02-26 12:11:45 +01:00
parent 0f0df468a2
commit c244f97eb0
No known key found for this signature in database
2 changed files with 44 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

27
modules/ppcp-settings/resources/js/Components/App.js
View file

@ -6,7 +6,7 @@ import SpinnerOverlay from './ReusableComponents/SpinnerOverlay';
import SendOnlyMessage from './Screens/SendOnlyMessage'; import SendOnlyMessage from './Screens/SendOnlyMessage';
import OnboardingScreen from './Screens/Onboarding'; import OnboardingScreen from './Screens/Onboarding';
import SettingsScreen from './Screens/Settings'; import SettingsScreen from './Screens/Settings';
import { getQuery, updateQueryString } from '../utils/navigation'; import { cleanBrowserUrl, getQuery } from '../utils/navigation';
const SettingsApp = () => { const SettingsApp = () => {
const { isReady: onboardingIsReady, completed: onboardingCompleted } = const { isReady: onboardingIsReady, completed: onboardingCompleted } =
@ -32,42 +32,27 @@ const SettingsApp = () => {
loading: ! onboardingIsReady, loading: ! onboardingIsReady,
} ); } );
const cleanBrowserUrl = () => { const [ activePanel, setActivePanel ] = useState( getQuery().panel );
const queryArgs = getQuery();
const supportedArgs = [ 'page', 'tab', 'section' ];
const cleanedArgs = Object.keys( queryArgs ).reduce( ( acc, key ) => { const removeUnsupportedArgs = () => {
if ( supportedArgs.includes( key ) ) { if ( cleanBrowserUrl( [ 'page', 'tab', 'section' ] ) ) {
acc[ key ] = queryArgs[ key ];
}
return acc;
}, {} );
const isUrlClean =
Object.keys( cleanedArgs ).length ===
Object.keys( queryArgs ).length;
if ( isUrlClean ) {
return; return;
} }
updateQueryString( cleanedArgs, true );
setActivePanel( '' ); setActivePanel( '' );
}; };
const [ activePanel, setActivePanel ] = useState( getQuery().panel );
const Content = useMemo( () => { const Content = useMemo( () => {
if ( ! onboardingIsReady || ! merchantIsReady ) { if ( ! onboardingIsReady || ! merchantIsReady ) {
return <SpinnerOverlay asModal={ true } />; return <SpinnerOverlay asModal={ true } />;
} }
if ( isSendOnlyCountry ) { if ( isSendOnlyCountry ) {
cleanBrowserUrl(); removeUnsupportedArgs();
return <SendOnlyMessage />; return <SendOnlyMessage />;
} }
if ( ! onboardingCompleted ) { if ( ! onboardingCompleted ) {
cleanBrowserUrl(); removeUnsupportedArgs();
return <OnboardingScreen />; return <OnboardingScreen />;
} }

38
modules/ppcp-settings/resources/js/utils/navigation.js
View file

@ -40,3 +40,41 @@ export const updateQueryString = ( query, replace = false ) => {
*/ */
export const getNewPath = ( query, basePath = getPath() ) => export const getNewPath = ( query, basePath = getPath() ) =>
addQueryArgs( basePath, query ); addQueryArgs( basePath, query );
/**
* Filter an object to only include specified keys.
*
* @param {Object} obj The object to filter.
* @param {string[]} allowedKeys An array of allowed key names.
* @return {Object} A new object with only the allowed keys.
*/
export const filterObjectKeys = ( obj, allowedKeys ) => {
return Object.keys( obj ).reduce( ( acc, key ) => {
if ( allowedKeys.includes( key ) ) {
acc[ key ] = obj[ key ];
}
return acc;
}, {} );
};
/**
* Clean the browser URL by removing unsupported query parameters.
*
* @param {string[]} supportedArgs An array of supported query parameter names.
* @return {boolean} Returns true if the URL was already clean, false if it was cleaned.
*/
export const cleanBrowserUrl = ( supportedArgs ) => {
const currentQuery = getQuery();
const cleanedQuery = filterObjectKeys( currentQuery, supportedArgs );
const isUrlClean =
Object.keys( cleanedQuery ).length ===
Object.keys( currentQuery ).length;
if ( ! isUrlClean ) {
updateQueryString( cleanedQuery, true );
return false;
}
return true;
};