My Jetpack: handle redirect when no connection (#22549)

* [not verified] my-jetpack: add useMyJetpackConnection() simple hook

* [not verified] my-jetpack: use custom hook to deal with connection

* [not verified] changelog

* [not verified] my-jetpack: when the site is not connected, redirect to the Jetpack dashboard.

* [not verified] my-jetpack: do not render app when no site connected

* [not verified] my-jetpack: fix rebasing issues

* [not verified] my-jetpack: add options to useMyJetpackConnection() hook

* [not verified] my-jetpack: redirect to Jetpack dashboard when no connection

* [not verified] my-jetpack: expose redirectUrl from useMyJetpackConnection hook

* [not verified] my-jetpack: set url in no conenction global error

* [not verified] my-jetpack: check whether user is conected before to redirect

* [not verified] my-jetpack: check user when no render because lack of connection

* [not verified] my-jetpack: simplify connection status cmp

* [not verified] my-jetpack: check only site when redirect because of connection

* [not verified] my-jetpack: restore redirectUri prop to connection component

* changelog

projects/packages/my-jetpack/_inc/components/connections-section/index.jsx

@@ -1,28 +1,18 @@
-/* global myJetpackRest */
-/* global myJetpackInitialState */
 /**
  * External dependencies
  */
-import React, { useCallback } from 'react';
+import React from 'react';
 import { ConnectionStatusCard } from '@automattic/jetpack-connection';
+import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 
 /**
  * Plan section component.
  *
  * @returns {object} ConnectionsSection React component.
  */
 export default function ConnectionsSection() {
-	const { apiRoot, apiNonce } = myJetpackRest;
-	const redirectAfterDisconnect = useCallback( () => {
-		window.location = myJetpackInitialState.topJetpackMenuItemUrl;
-	}, [] );
-
+	const { apiRoot, apiNonce, redirectUrl } = useMyJetpackConnection();
 	return (
-		<ConnectionStatusCard
-			apiRoot={ apiRoot }
-			apiNonce={ apiNonce }
-			redirectUri={ myJetpackInitialState.redirectUri }
-			onDisconnected={ redirectAfterDisconnect }
-		/>
+		<ConnectionStatusCard apiRoot={ apiRoot } apiNonce={ apiNonce } redirectUri={ redirectUrl } />
 	);
 }

projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx

@@ -68,6 +68,7 @@ export default function MyJetpackScreen() {
 		recordEvent( 'jetpack_myjetpack_page_view' );
 	}, [ recordEvent ] );
 
+	// No render when site is not connected.
 	const { isSiteConnected } = useMyJetpackConnection( { redirect: true } );
 	if ( ! isSiteConnected ) {
 		return null;

projects/packages/my-jetpack/_inc/hooks/use-my-jetpack-connection/index.js

@@ -1,11 +1,10 @@
 /* global myJetpackInitialState */
-
 /* global myJetpackRest */
 /**
  * WordPress dependencies
  */
-import { useConnection } from '@automattic/jetpack-connection';
 import { useEffect } from 'react';
+import { useConnection } from '@automattic/jetpack-connection';
 
 /**
  * React custom hook to get the site purchases data.
@@ -16,6 +15,7 @@ import { useEffect } from 'react';
  */
 export default function useMyJetpackConnection( options = { redirect: false } ) {
 	const { apiRoot, apiNonce } = myJetpackRest;
+	const { topJetpackMenuItemUrl } = myJetpackInitialState;
 	const { redirect } = options;
 	const connectionData = useConnection( { apiRoot, apiNonce } );
 
@@ -28,6 +28,11 @@ export default function useMyJetpackConnection( options = { redirect: false } )
 	 * redirect to the Jetpack dashboard.
 	 */
 	useEffect( () => {
+		// Bail early when topJetpackMenuItemUrl is not defined.
+		if ( ! topJetpackMenuItemUrl ) {
+			return;
+		}
+
 		// Bail early when redirect mode is disabled.
 		if ( ! redirect ) {
 			return;
@@ -38,11 +43,14 @@ export default function useMyJetpackConnection( options = { redirect: false } )
 			return;
 		}
 
-		window.location = myJetpackInitialState.topJetpackMenuItemUrl;
-	}, [ isSiteConnected, redirect ] );
+		window.location = topJetpackMenuItemUrl;
+	}, [ isSiteConnected, redirect, topJetpackMenuItemUrl ] );
 
 	return {
+		apiNonce,
+		apiRoot,
 		...connectionData,
 		isSiteConnected,
+		redirectUrl: topJetpackMenuItemUrl,
 	};
 }

projects/packages/my-jetpack/_inc/hooks/use-notice/index.js

@@ -34,8 +34,7 @@ export function useGlobalNotice() {
  */
 export default function useNoticeWatcher() {
 	const dispatch = useDispatch();
-
-	const { isUserConnected } = useMyJetpackConnection();
+	const { isUserConnected, redirectUrl } = useMyJetpackConnection();
 
 	useEffect( () => {
 		if ( ! isUserConnected ) {
@@ -49,11 +48,11 @@ export default function useNoticeWatcher() {
 					actions: [
 						{
 							label: __( 'Connect Jetpack now.', 'jetpack-my-jetpack' ),
-							url: '#',
+							url: redirectUrl,
 						},
 					],
 				}
 			);
 		}
-	}, [ isUserConnected, dispatch ] );
+	}, [ isUserConnected, dispatch, redirectUrl ] );
 }

projects/packages/my-jetpack/changelog/update-my-jetpack-remove-connections-section

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+My Jetpack: handle redirect when no connection #22549