Merge branch 'trunk' of github.com:woocommerce/woocommerce-paypal-payments into PCP-4258-make-the-pay-later-payment-method-dependent-on-save-pay-pal-and-venmo-setting-being-disabled

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

@@ -6,7 +6,7 @@ import SpinnerOverlay from './ReusableComponents/SpinnerOverlay';
 import SendOnlyMessage from './Screens/SendOnlyMessage';
 import OnboardingScreen from './Screens/Onboarding';
 import SettingsScreen from './Screens/Settings';
-import { getQuery } from '../utils/navigation';
+import { getQuery, cleanUrlQueryParams } from '../utils/navigation';
 
 const SettingsApp = () => {
 	const { isReady: onboardingIsReady, completed: onboardingCompleted } =
@@ -32,9 +32,19 @@ const SettingsApp = () => {
 		loading: ! onboardingIsReady,
 	} );
 
-	const [ activePanel, setActivePanel ] = useState(
-		getQuery().panel || 'overview'
-	);
+	const [ activePanel, setActivePanel ] = useState( getQuery().panel );
+
+	const removeUnsupportedArgs = () => {
+		const urlWasCleaned = cleanUrlQueryParams( [
+			'page',
+			'tab',
+			'section',
+		] );
+
+		if ( urlWasCleaned ) {
+			setActivePanel( '' );
+		}
+	};
 
 	const Content = useMemo( () => {
 		if ( ! onboardingIsReady || ! merchantIsReady ) {
@@ -42,16 +52,18 @@ const SettingsApp = () => {
 		}
 
 		if ( isSendOnlyCountry ) {
+			removeUnsupportedArgs();
 			return <SendOnlyMessage />;
 		}
 
 		if ( ! onboardingCompleted ) {
+			removeUnsupportedArgs();
 			return <OnboardingScreen />;
 		}
 
 		return (
 			<SettingsScreen
-				activePanel={ activePanel }
+				activePanel={ activePanel || 'overview' }
 				setActivePanel={ setActivePanel }
 			/>
 		);

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js

@@ -32,7 +32,6 @@ const ButtonOrPlaceholder = ( {
 
 	if ( href ) {
 		buttonProps.href = href;
-		buttonProps.target = 'PPFrame';
 		buttonProps[ 'data-paypal-button' ] = 'true';
 		buttonProps[ 'data-paypal-onboard-button' ] = 'true';
 	}

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js

@@ -12,7 +12,8 @@ import AdvancedOptionsForm from '../Components/AdvancedOptionsForm';
 
 const StepWelcome = ( { setStep, currentStep } ) => {
 	const { storeCountry } = CommonHooks.useWooSettings();
-	const { canUseCardPayments } = OnboardingHooks.useFlags();
+	const { canUseCardPayments, canUseFastlane, canUsePayLater } =
+		OnboardingHooks.useFlags();
 	const nonAcdcIcons = [ 'paypal', 'visa', 'mastercard', 'amex', 'discover' ];
 
 	return (
@@ -54,8 +55,8 @@ const StepWelcome = ( { setStep, currentStep } ) => {
 			<Separator className="ppcp-r-page-welcome-mode-separator" />
 			<WelcomeDocs
 				useAcdc={ canUseCardPayments }
-				isFastlane={ true }
-				isPayLater={ true }
+				isFastlane={ canUseFastlane }
+				isPayLater={ canUsePayLater }
 				storeCountry={ storeCountry }
 			/>
 			<Separator text={ __( 'or', 'woocommerce-paypal-payments' ) } />

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

@@ -3,6 +3,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
 import { ControlToggleButton } from '../../../../../ReusableComponents/Controls';
 import { SettingsHooks } from '../../../../../../data';
+import { useMerchantInfo } from '../../../../../../data/common/hooks';
 
 const SavePaymentMethods = () => {
 	const {
@@ -12,6 +13,8 @@ const SavePaymentMethods = () => {
 		setSaveCardDetails,
 	} = SettingsHooks.useSettings();
 
+	const { features } = useMerchantInfo();
+
 	return (
 		<SettingsBlock
 			title={ __(
@@ -38,8 +41,13 @@ const SavePaymentMethods = () => {
 					),
 					'https://woocommerce.com/document/woocommerce-paypal-payments/#pay-later'
 				) }
-				value={ savePaypalAndVenmo }
+				value={
+					features.save_paypal_and_venmo.enabled
+						? savePaypalAndVenmo
+						: false
+				}
 				onChange={ setSavePaypalAndVenmo }
+				disabled={ ! features.save_paypal_and_venmo.enabled }
 			/>
 
 			<ControlToggleButton

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

@@ -5,23 +5,25 @@ import { useCallback, useState } from '@wordpress/element';
 import { CommonHooks } from '../../../../../../data';
 import { useToggleState } from '../../../../../../hooks/useToggleState';
 import { HStack } from '../../../../../ReusableComponents/Stack';
+import { useNavigation } from '../../../../../../hooks/useNavigation';
 
 const DisconnectButton = () => {
 	const { isOpen, setIsOpen } = useToggleState( 'disconnect-merchant' );
 	const [ resetFlag, setResetFlag ] = useState( false );
 	const { disconnectMerchant } = CommonHooks.useDisconnectMerchant();
+	const { goToPluginSettings } = useNavigation();
 
 	const handleOpen = useCallback( () => {
 		setIsOpen( true );
-	}, [] );
+	}, [ setIsOpen ] );
 
 	const handleCancel = useCallback( () => {
 		setIsOpen( false );
-	}, [] );
+	}, [ setIsOpen ] );
 
 	const handleConfirm = useCallback( async () => {
 		await disconnectMerchant( resetFlag );
-		window.location.reload();
+		goToPluginSettings();
 	}, [ disconnectMerchant, resetFlag ] );
 
 	const confirmationTitle = __(

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

@@ -24,6 +24,8 @@ const defaultTransient = Object.freeze( {
 		canUseCardPayments: false,
 		canUseSubscriptions: false,
 		shouldSkipPaymentMethods: false,
+		canUseFastlane: false,
+		canUsePayLater: false,
 	} ),
 } );
 

modules/ppcp-settings/resources/js/hooks/useNavigation.js

@@ -5,6 +5,26 @@ const goToWooCommercePaymentsTab = () => {
 	window.location.href = window.ppcpSettings.wcPaymentsTabUrl;
 };
 
-export const useNavigation = () => {
-	return { goToWooCommercePaymentsTab };
+/**
+ * Navigate to the main settings page, or to a defined tab (panel).
+ * Always initiates a browser navigation - if the user already is on the defined settings page,
+ * this function acts as a page-reload.
+ *
+ * @param {?string} [panel=null] Which settings tab to display.
+ */
+const goToPluginSettings = ( panel = null ) => {
+	let url = window.ppcpSettings.pluginSettingsUrl;
+
+	if ( panel ) {
+		url += '&panel=' + panel;
+	}
+
+	window.location.href = url;
+};
+
+export const useNavigation = () => {
+	return {
+		goToWooCommercePaymentsTab,
+		goToPluginSettings,
+	};
 };

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

@@ -22,11 +22,14 @@ export const getQuery = () =>
 /**
  * Updates the query parameters of the current page.
  *
- * @param {Object} query Object of params to be updated.
+ * @param {Object}  query           Object of params to be updated.
+ * @param {boolean} [replace=false] Whether to add the query vars (false) or replace previous query vars with the new details (true).
  * @throws {TypeError} If the query is not an object.
  */
-export const updateQueryString = ( query ) =>
-	pushHistory( getNewPath( query ) );
+export const updateQueryString = ( query, replace = false ) => {
+	const newQuery = replace ? query : { ...getQuery(), ...query };
+	return pushHistory( getNewPath( newQuery ) );
+};
 
 /**
  * Return a URL with set query parameters.
@@ -36,4 +39,42 @@ export const updateQueryString = ( query ) =>
  * @return {string} Updated URL merging query params into existing params.
  */
 export const getNewPath = ( query, basePath = getPath() ) =>
-	addQueryArgs( basePath, { ...getQuery(), ...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 modified (cleaned), false if nothing changed.
+ */
+export const cleanUrlQueryParams = ( supportedArgs ) => {
+	const currentQuery = getQuery();
+	const cleanedQuery = filterObjectKeys( currentQuery, supportedArgs );
+
+	const isUrlClean =
+		Object.keys( cleanedQuery ).length ===
+		Object.keys( currentQuery ).length;
+
+	if ( isUrlClean ) {
+		return false;
+	}
+
+	updateQueryString( cleanedQuery, true );
+	return true;
+};