Update connection status card to align with connection banner

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

@@ -4,8 +4,11 @@ import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, info, check, lockOutline } from '@wordpress/icons';
 import clsx from 'clsx';
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useContext } from 'react';
+import { NoticeContext } from '../../context/notices/noticeContext';
+import { NOTICE_SITE_CONNECTION_ERROR } from '../../context/notices/noticeTemplates';
 import { useAllProducts } from '../../data/products/use-product';
+import useProductsByOwnership from '../../data/products/use-products-by-ownership';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import getProductSlugsThatRequireUserConnection from '../../data/utils/get-product-slugs-that-require-user-connection';
 import useAnalytics from '../../hooks/use-analytics';
@@ -33,6 +36,11 @@ const ConnectionListItem: ConnectionListItemType = ( {
 	let icon = check;
 	let statusStyles = '';
 
+	if ( status === 'info' ) {
+		icon = null;
+		statusStyles = '';
+	}
+
 	if ( status === 'success' ) {
 		icon = check;
 		statusStyles = styles.success;
@@ -50,13 +58,13 @@ const ConnectionListItem: ConnectionListItemType = ( {
 
 	if ( status === 'unlock' ) {
 		icon = lockOutline;
-		statusStyles = styles.unlock;
+		statusStyles = '';
 	}
 
 	return (
 		<div className={ styles[ 'list-item' ] }>
 			<Text className={ clsx( styles[ 'list-item-text' ], statusStyles ) }>
-				<Icon icon={ icon } />
+				{ icon && <Icon icon={ icon } /> }
 				{ text }
 			</Text>
 			{ actionText && status !== 'success' && (
@@ -77,9 +85,17 @@ const ConnectionItemButton: ConnectionItemButtonType = ( { actionText, onClick }
 const getSiteConnectionLineData: getSiteConnectionLineDataType = ( {
 	isRegistered,
 	hasSiteConnectionBrokenModules,
-	handleConnectUser,
+	handleConnectSite,
+	siteIsRegistering,
 	openManageSiteConnectionDialog,
 } ) => {
+	if ( siteIsRegistering ) {
+		return {
+			text: __( 'Connecting your site…', 'jetpack-my-jetpack' ),
+			status: 'info',
+		};
+	}
+
 	if ( isRegistered ) {
 		return {
 			onClick: openManageSiteConnectionDialog,
@@ -91,15 +107,15 @@ const getSiteConnectionLineData: getSiteConnectionLineDataType = ( {
 
 	if ( hasSiteConnectionBrokenModules ) {
 		return {
-			onClick: handleConnectUser,
+			onClick: handleConnectSite,
 			text: __( 'Missing site connection to enable some features.', 'jetpack-my-jetpack' ),
 			actionText: __( 'Connect', 'jetpack-my-jetpack' ),
 			status: 'error',
 		};
 	}
 
 	return {
-		onClick: handleConnectUser,
+		onClick: handleConnectSite,
 		text: __( 'Start with Jetpack.', 'jetpack-my-jetpack' ),
 		actionText: __( 'Connect your site with one click', 'jetpack-my-jetpack' ),
 		status: 'warning',
@@ -194,13 +210,23 @@ const ConnectionStatusCard: ConnectionStatusCardType = ( {
 	const { isRegistered, isUserConnected, userConnectionData } = useMyJetpackConnection( {
 		redirectUri,
 	} );
-
+	const { handleRegisterSite, siteIsRegistering } = useMyJetpackConnection( {
+		skipUserConnection: true,
+		redirectUri,
+	} );
+	const { setNotice, resetNotice } = useContext( NoticeContext );
+	const { lifecycleStats, siteSuffix, adminUrl } = getMyJetpackWindowInitialState();
+	const connectAfterCheckoutUrl = `?connect_after_checkout=true&admin_url=${ encodeURIComponent(
+		adminUrl
+	) }&from_site_slug=${ siteSuffix }&source=my-jetpack`;
+	const query = `${ connectAfterCheckoutUrl }${ redirectUri }&unlinked=1`;
+	const jetpackPlansPath = getRedirectUrl( 'jetpack-my-jetpack-site-only-plans', { query } );
+	const { refetch: refetchOwnershipData } = useProductsByOwnership();
 	const { recordEvent } = useAnalytics();
 	const [ isManageConnectionDialogOpen, setIsManageConnectionDialogOpen ] = useState( false );
 	const { setConnectionStatus, setUserIsConnecting } = useDispatch( CONNECTION_STORE_ID );
 	const connectUserFn = onConnectUser || setUserIsConnecting;
 	const avatar = userConnectionData.currentUser?.wpcomUser?.avatar;
-	const { lifecycleStats } = getMyJetpackWindowInitialState();
 	const { brokenModules } = lifecycleStats || {};
 	const products = useAllProducts();
 	const hasProductsThatRequireUserConnection =
@@ -272,6 +298,40 @@ const ConnectionStatusCard: ConnectionStatusCardType = ( {
 		[ connectUserFn, recordEvent, tracksEventData ]
 	);
 
+	const handleConnectSite = useCallback(
+		async ( e: MouseEvent< HTMLButtonElement > ) => {
+			e && e.preventDefault();
+			window.scrollTo( {
+				top: 0,
+				left: 0,
+				behavior: 'smooth',
+			} );
+			recordEvent( 'jetpack_myjetpack_connection_connect_site_click', tracksEventData );
+
+			try {
+				await handleRegisterSite();
+
+				recordEvent( 'jetpack_myjetpack_connection_connect_site_success', tracksEventData );
+
+				// Redirect user to the plans page after connection
+				window.location.href = jetpackPlansPath;
+			} catch {
+				setNotice( NOTICE_SITE_CONNECTION_ERROR, resetNotice );
+			} finally {
+				refetchOwnershipData();
+			}
+		},
+		[
+			handleRegisterSite,
+			jetpackPlansPath,
+			recordEvent,
+			refetchOwnershipData,
+			resetNotice,
+			setNotice,
+			tracksEventData,
+		]
+	);
+
 	const getConnectionLineStyles = () => {
 		if ( isRegistered ) {
 			return '';
@@ -283,7 +343,8 @@ const ConnectionStatusCard: ConnectionStatusCardType = ( {
 	const siteConnectionLineData = getSiteConnectionLineData( {
 		isRegistered,
 		hasSiteConnectionBrokenModules,
-		handleConnectUser,
+		handleConnectSite,
+		siteIsRegistering,
 		openManageSiteConnectionDialog,
 	} );
 

projects/packages/my-jetpack/_inc/components/connection-status-card/types.ts

@@ -1,6 +1,6 @@
 import type { FC, MouseEvent } from 'react';
 
-type StatusType = 'warning' | 'error' | 'unlock' | 'success';
+type StatusType = 'warning' | 'error' | 'unlock' | 'success' | 'info';
 
 interface ConnectionListItemProps {
 	text: string;
@@ -19,7 +19,8 @@ export type ConnectionItemButtonType = FC< {
 interface getSiteConnectionLineDataProps {
 	isRegistered: boolean;
 	hasSiteConnectionBrokenModules: boolean;
-	handleConnectUser: ( e: MouseEvent< HTMLButtonElement > ) => void;
+	siteIsRegistering: boolean;
+	handleConnectSite: ( e: MouseEvent< HTMLButtonElement > ) => void;
 	openManageSiteConnectionDialog: ( e: MouseEvent ) => void;
 }