Add/skip pricing page when connecting from editor blocks (#39865)

* Add skipPricingPage option to connection package

* changelog

* Skip pricing page and connection screen when connecting from Jetpack blocks

* changelog

* Bypass My Jetpack connection page

* Update variable/function names in connect banner

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/11580133861

Upstream-Ref: Automattic/jetpack@890e73b

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [0.35.15-alpha] - unreleased
+
+This is an alpha version! The changes listed here are not final.
+
+### Changed
+- Skip pricing page when connecting via block editor
+
 ## [0.35.14] - 2024-10-15
 ### Changed
 - Update dependencies.
@@ -875,6 +882,7 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[0.35.15-alpha]: https://github.com/Automattic/jetpack-connection-js/compare/v0.35.14...v0.35.15-alpha
 [0.35.14]: https://github.com/Automattic/jetpack-connection-js/compare/v0.35.13...v0.35.14
 [0.35.13]: https://github.com/Automattic/jetpack-connection-js/compare/v0.35.12...v0.35.13
 [0.35.12]: https://github.com/Automattic/jetpack-connection-js/compare/v0.35.11...v0.35.12

components/connect-screen/basic/index.tsx

@@ -30,6 +30,8 @@ export type Props = {
 	assetBaseUrl?: string;
 	// Whether to not require a user connection and just redirect after site connection
 	skipUserConnection?: boolean;
+	// Whether to skip the pricing page after the connection screen
+	skipPricingPage?: boolean;
 	// Additional page elements to show after the call to action
 	footer?: React.ReactNode;
 	// The logo to display at the top of the component
@@ -54,6 +56,7 @@ const ConnectScreen: React.FC< Props > = ( {
 	autoTrigger,
 	footer,
 	skipUserConnection,
+	skipPricingPage,
 	logo,
 } ) => {
 	const {
@@ -70,6 +73,7 @@ const ConnectScreen: React.FC< Props > = ( {
 		autoTrigger,
 		from,
 		skipUserConnection,
+		skipPricingPage,
 	} );
 
 	const displayButtonError = Boolean( registrationError );

components/use-connection/index.jsx

@@ -14,6 +14,7 @@ export default ( {
 	autoTrigger,
 	from,
 	skipUserConnection,
+	skipPricingPage,
 } = {} ) => {
 	const { registerSite, connectUser, refreshConnectedPlugins } = useDispatch( STORE_ID );
 
@@ -45,7 +46,7 @@ export default ( {
 	 */
 	const handleConnectUser = () => {
 		if ( ! skipUserConnection ) {
-			return connectUser( { from, redirectUri } );
+			return connectUser( { from, redirectUri, skipPricingPage } );
 		} else if ( redirectUri ) {
 			window.location = redirectUri;
 			return Promise.resolve( redirectUri );

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.35.14",
+	"version": "0.35.15-alpha",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {

state/actions.jsx

@@ -72,15 +72,16 @@ const setIsOfflineMode = isOfflineMode => {
 /**
  * Connect site with wp.com user
  *
- * @param {object}   Object               - contains from and redirectFunc
- * @param {string}   Object.from          - Value that represents the redirect origin
- * @param {Function} Object.redirectFunc  - A function to handle the redirect, defaults to location.assign
- * @param {string}   [Object.redirectUri] - A URI that the user will be redirected to
+ * @param {object}   Object                   - contains from and redirectFunc
+ * @param {string}   Object.from              - Value that represents the redirect origin
+ * @param {Function} Object.redirectFunc      - A function to handle the redirect, defaults to location.assign
+ * @param {string}   [Object.redirectUri]     - A URI that the user will be redirected to
+ * @param {boolean}  [Object.skipPricingPage] - A flag to skip the pricing page in the connection flow
  * @yield {object} Action object that will be yielded
  */
-function* connectUser( { from, redirectFunc, redirectUri } = {} ) {
+function* connectUser( { from, redirectFunc, redirectUri, skipPricingPage } = {} ) {
 	yield setUserIsConnecting( true );
-	yield { type: CONNECT_USER, from, redirectFunc, redirectUri };
+	yield { type: CONNECT_USER, from, redirectFunc, redirectUri, skipPricingPage };
 }
 
 /**

state/controls.jsx

@@ -7,7 +7,7 @@ const REGISTER_SITE = ( { registrationNonce, redirectUri, from } ) =>
 
 const CONNECT_USER = createRegistryControl(
 	( { resolveSelect } ) =>
-		( { from, redirectFunc, redirectUri } = {} ) => {
+		( { from, redirectFunc, redirectUri, skipPricingPage } = {} ) => {
 			return new Promise( ( resolve, reject ) => {
 				resolveSelect( STORE_ID )
 					.getAuthorizationUrl( redirectUri )
@@ -16,6 +16,10 @@ const CONNECT_USER = createRegistryControl(
 
 						const url = new URL( authorizationUrl );
 
+						if ( skipPricingPage ) {
+							url.searchParams.set( 'skip_pricing', 'true' );
+						}
+
 						if ( from ) {
 							url.searchParams.set( 'from', encodeURIComponent( from ) );
 						}