Send user to connection page in My Jetpack before going to WPcom conn…

…ection

projects/packages/my-jetpack/_inc/components/connection-screen/index.tsx

@@ -1,5 +1,7 @@
 import { Container, Col, AdminPage } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
+import { useEffect, useState } from 'react';
+import { useSearchParams, useLocation } from 'react-router-dom';
 import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 import useMyJetpackReturnToPage from '../../hooks/use-my-jetpack-return-to-page';
 import CloseLink from '../close-link';
@@ -9,9 +11,32 @@ import styles from './styles.module.scss';
 import type { FC } from 'react';
 
 const ConnectionScreen: FC = () => {
+	const location = useLocation();
+	const [ searchParams, setSearchParams ] = useSearchParams( location.search );
 	const returnToPage = useMyJetpackReturnToPage();
+
+	const [ shouldSkipPricing, setShouldSkipPricing ] = useState( false );
+	const [ redirectUri, setRedirectUri ] = useState( returnToPage );
 	const { apiRoot, apiNonce, registrationNonce } = useMyJetpackConnection();
 
+	useEffect( () => {
+		const newParams = new URLSearchParams( searchParams );
+		const skipPricing = searchParams.get( 'skip_pricing' );
+		const redirect = searchParams.get( 'redirect_uri' );
+
+		if ( skipPricing === 'true' ) {
+			setShouldSkipPricing( true );
+			newParams.delete( 'skip_pricing' );
+		}
+
+		if ( redirect ) {
+			setRedirectUri( redirect );
+			newParams.delete( 'redirect_uri' );
+		}
+
+		setSearchParams( newParams );
+	}, [ searchParams, setSearchParams ] );
+
 	return (
 		<AdminPage showHeader={ false } showBackground={ false }>
 			<Container horizontalSpacing={ 8 } horizontalGap={ 0 }>
@@ -24,10 +49,11 @@ const ConnectionScreen: FC = () => {
 				<Col>
 					<ConnectionScreenBody
 						from="my-jetpack"
-						redirectUri={ returnToPage }
+						redirectUri={ redirectUri }
 						apiRoot={ apiRoot }
 						apiNonce={ apiNonce }
 						registrationNonce={ registrationNonce }
+						skipPricingPage={ shouldSkipPricing }
 						footer={ <ConnectionScreenFooter /> }
 					/>
 				</Col>

projects/plugins/jetpack/extensions/shared/components/connect-banner/index.tsx

@@ -1,7 +1,6 @@
 /*
  * External dependencies
  */
-import { useConnection } from '@automattic/jetpack-connection';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { __ } from '@wordpress/i18n';
 /*
@@ -22,21 +21,16 @@ const getRedirectUri = () => {
 	const pathname = window?.location?.pathname.replace( 'wp-admin/', '' );
 	const search = window?.location?.search;
 
-	return `${ pathname }${ search }`;
+	return encodeURIComponent( `${ pathname }${ search }` );
 };
 
 const ConnectBanner: FC< ConnectBannerProps > = ( { block, explanation = null } ) => {
-	const { handleConnectUser } = useConnection( {
-		from: 'editor',
-		redirectUri: getRedirectUri(),
-		autoTrigger: false,
-		skipPricingPage: true,
-	} );
-	const { autosaveAndRedirect, isRedirecting } = useAutosaveAndRedirect();
+	const checkoutUrl = `${ window?.Jetpack_Editor_Initial_State
+		?.adminUrl }admin.php?page=my-jetpack#/connection?skip_pricing=true&redirect_uri=${ getRedirectUri() }`;
+	const { autosaveAndRedirect, isRedirecting } = useAutosaveAndRedirect( checkoutUrl );
 	const { tracks } = useAnalytics();
 
 	const goToCheckoutPage = ( event: MouseEvent< HTMLButtonElement > ) => {
-		handleConnectUser();
 		tracks.recordEvent( 'jetpack_editor_connect_banner_click', { block } );
 		autosaveAndRedirect( event );
 	};
@@ -48,7 +42,7 @@ const ConnectBanner: FC< ConnectBannerProps > = ( { block, explanation = null }
 				className="jetpack-connect-banner-nudge"
 				description={ __( 'Your account is not connected to Jetpack at the moment.', 'jetpack' ) }
 				goToCheckoutPage={ goToCheckoutPage }
-				checkoutUrl={ '#' }
+				checkoutUrl={ checkoutUrl }
 				isRedirecting={ isRedirecting }
 			/>
 			<div className="jetpack-connect-banner">