Add structure for domain upsell

Automattic · Jan 17, 2025 · d486bb7 · d486bb7
1 parent 5553864
commit d486bb7
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 10 deletions.
diff --git a/...ackages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php b/...ackages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php
@@ -23,7 +23,8 @@ function load_wpcom_dashboard_widgets() {
 		),
 		array(
 			'id'       => 'wpcom_general_tasks_widget',
-			'name'     => __( 'Tasks', 'jetpack-mu-wpcom' ),
+			'name'     => __( 'Suggestions', 'jetpack-mu-wpcom' ),
+			// <span class="wpcom_general_tasks_widget_title"><span class="wpcom_general_tasks_widget_title_text">' . __( 'Suggestions', 'jetpack-mu-wpcom' ) . '</span>&ZeroWidthSpace;</span>
 			'priority' => 'high',
 		),
 	);

diff --git a/...jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js b/...jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js
@@ -1,7 +1,10 @@
 import apiFetch from '@wordpress/api-fetch';
 import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import TaskDomainUpsell from './tasks/home-task-domain-upsell';
 
+import './style.scss';
+
 const taskMap = {
 	'home-task-domain-upsell': TaskDomainUpsell,
 };
@@ -22,25 +25,65 @@ export default ( { siteId } ) => {
 	// The secondary array countains strings that refer to cards, except for the
 	// tasks which is an array.
 	const tasks = response.secondary.find( item => Array.isArray( item ) );
-	const task = tasks[ index ];
 
+	if ( ! tasks ) {
+		return <p>{ __( 'No suggestions.', 'jetpack-mu-wpcom' ) }</p>;
+	}
+
+	const task = tasks[ index ];
 	const TaskComponent = taskMap[ task ];
 
 	return (
 		<>
-			{ TaskComponent ? <TaskComponent /> : <p>To do: { task }</p> }
-			<div style={ { display: 'flex', gap: '5px' } }>
-				<button className="button" onClick={ () => setIndex( index - 1 ) } disabled={ index === 0 }>
-					‹
+			<p className="wpcom_general_tasks_widget_buttons">
+				<button
+					className="button button-link"
+					onClick={ () => setIndex( index - 1 ) }
+					disabled={ index === 0 }
+				>
+					{ __( '← Previous', 'jetpack-mu-wpcom' ) }
 				</button>
+				{ ' ' }
 				<button
-					className="button"
+					className="button button-link"
 					onClick={ () => setIndex( index + 1 ) }
 					disabled={ index === tasks.length - 1 }
 				>
-					›
+					{ __( 'Next →', 'jetpack-mu-wpcom' ) }
 				</button>
-			</div>
+			</p>
+			{ TaskComponent ? (
+				<TaskComponent />
+			) : (
+				<p style={ { minHeight: '180px' } }>To do: { task }</p>
+			) }
+			{ /* { createPortal(
+				<span className="wpcom_general_tasks_widget_buttons">
+					<button
+						className="button button-link"
+						onClick={ event => {
+							event.preventDefault();
+							event.stopPropagation();
+							setIndex( index - 1 );
+						} }
+						disabled={ index === 0 }
+					>
+						{ __( '← Previous', 'jetpack-mu-wpcom' ) }
+					</button>
+					<button
+						className="button button-link"
+						onClick={ event => {
+							event.preventDefault();
+							event.stopPropagation();
+							setIndex( index + 1 );
+						} }
+						disabled={ index === tasks.length - 1 }
+					>
+						{ __( 'Next →', 'jetpack-mu-wpcom' ) }
+					</button>
+				</span>,
+				document.querySelector( '#wpcom_general_tasks_widget .wpcom_general_tasks_widget_title' )
+			) } */ }
 		</>
 	);
 };
diff --git a/...tpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/style.scss b/...tpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/style.scss
@@ -0,0 +1,22 @@
+#wpcom_general_tasks_widget_main {
+    min-height: 180px;
+
+    h2 {
+        padding: 0;
+    }
+}
+
+.wpcom_general_tasks_widget_buttons .button.button-link {
+    min-height: auto;
+    line-height: 1.4;
+    background: none;
+
+    &:disabled,
+    &:hover {
+        background: none !important; // Has !important for core style.
+    }
+}
+
+// #wpcom_general_tasks_widget .wpcom_general_tasks_widget_title_text {
+//     display: none;
+// }
diff --git a/...wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js b/...wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js
@@ -1,3 +1,39 @@
 export default () => {
-	return <p>Domain Upsell Component</p>;
+	// To do: actually fetch it from the API.
+	const domain = new URL( window.location.href ).hostname.split( '.' )[ 0 ] + '.com';
+	return (
+		<>
+			<h2>Own a domain. Build a site.</h2>
+			<p>
+				<strong>{ domain }</strong> is a perfect site address. It’s available, easy to find, share,
+				and follow. Get it now and claim a corner of the web.
+			</p>
+			<p style={ { position: 'relative' } }>
+				{ /* To do: convert to SVG.  */ }
+				<span
+					style={ {
+						position: 'absolute',
+						transform: 'translate(130px, 14px)',
+						fontSize: '16px',
+					} }
+				>
+					{ domain }
+				</span>
+				<img
+					src="https://wordpress.com/calypso/images/illustration--feature-domain-upsell-3eff1284ca73c71a3c77.svg"
+					alt={ domain }
+					style={ { width: '100%' } }
+				/>
+			</p>
+			<div>
+				<a href="https://wordpress.com/domains/register" className="button button-primary">
+					Get this domain
+				</a>
+				{ ' ' }
+				<a href="https://wordpress.com/domains/register" className="button button-secondary">
+					Find other domains
+				</a>
+			</div>
+		</>
+	);
 };