My Jetpack: Adding Connection Screen

projects/packages/my-jetpack/_inc/admin.jsx

@@ -9,17 +9,11 @@ import { HashRouter, Routes, Route } from 'react-router-dom';
  * Internal dependencies
  */
 import MyJetpackScreen from './components/my-jetpack-screen';
+import ConnectionScreen from './components/connection-screen';
 import { initStore } from './state/store';
-import useRouteBlocker from './hooks/use-route-blocker';
 
 initStore();
 
-// @TODO Remove as soon new routes arrives
-const New = () => {
-	useRouteBlocker();
-	return <div>New</div>;
-};
-
 /**
  * The initial renderer function.
  */
@@ -34,7 +28,7 @@ function render() {
 		<HashRouter>
 			<Routes>
 				<Route path="/" element={ <MyJetpackScreen /> } />
-				<Route path="/new" element={ <New /> } />
+				<Route path="/connection" element={ <ConnectionScreen /> } />
 			</Routes>
 		</HashRouter>,
 		container

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

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { ConnectScreen } from '@automattic/jetpack-connection';
+import { Container, Col } from '@automattic/jetpack-components';
+import { Link } from 'react-router-dom';
+import { Icon, arrowLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.module.scss';
+import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
+import connectImage from './connect.png';
+
+const ConnectionScreen = () => {
+	const { apiRoot, apiNonce } = useMyJetpackConnection();
+	return (
+		<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
+			<Col>
+				<Link to="/" className={ styles.link }>
+					<Icon icon={ arrowLeft } className={ styles.icon } />
+					{ __( 'Go back', 'jetpack-my-jetpack' ) }
+				</Link>
+			</Col>
+			<Col>
+				<ConnectScreen
+					title={ __(
+						'Unlock all the amazing features of Jetpack by connecting now',
+						'jetpack-my-jetpack'
+					) }
+					buttonLabel={ __( 'Connect your user account', 'jetpack-my-jetpack' ) }
+					apiRoot={ apiRoot }
+					apiNonce={ apiNonce }
+					images={ [ connectImage ] }
+				>
+					<ul>
+						<li>{ __( 'Receive instant downtime alerts', 'jetpack-my-jetpack' ) }</li>
+						<li>
+							{ __( 'Automatically share your content on social media', 'jetpack-my-jetpack' ) }
+						</li>
+						<li>{ __( 'Let your subscribers know when you post', 'jetpack-my-jetpack' ) }</li>
+						<li>
+							{ __( 'Receive notifications about new likes and comments', 'jetpack-my-jetpack' ) }
+						</li>
+						<li>
+							{ __( 'Let visitors share your content on social media', 'jetpack-my-jetpack' ) }
+						</li>
+					</ul>
+				</ConnectScreen>
+			</Col>
+		</Container>
+	);
+};
+
+export default ConnectionScreen;

projects/packages/my-jetpack/_inc/components/connection-screen/styles.module.scss

@@ -0,0 +1,14 @@
+.icon {
+	width: 16px;
+	margin-right: 4px;
+}
+
+.link {
+	--gray-70: #3C434A;
+
+	font-size: 14px;
+	color: var(--gray-70);
+	display: flex;
+	text-decoration: none;
+	align-items: center;
+}

projects/packages/my-jetpack/changelog/update-my-jetpack-connection-screen

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+My Jetpack: Add Connection screen

projects/packages/my-jetpack/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-my-jetpack",
-	"version": "0.5.0",
+	"version": "0.5.1-alpha",
 	"description": "WP Admin page with information and configuration shared among all Jetpack stand-alone plugins",
 	"homepage": "https://jetpack.com",
 	"bugs": {