wip

Automattic · Feb 6, 2025 · c8a2324 · c8a2324
1 parent 258adb2
commit c8a2324
Show file tree

Hide file tree

Showing 8 changed files with 214 additions and 2 deletions.
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/add-dashboard-general-task-widget b/projects/packages/jetpack-mu-wpcom/changelog/add-dashboard-general-task-widget
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Dashboard: add general tasks widget
diff --git a/...packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js b/...packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js
@@ -3,6 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import CelebrateLaunchModal from './celebrate-launch/celebrate-launch-modal';
 import WpcomDailyWritingPrompt from './wpcom-daily-writing-prompt';
+import WpcomGeneralTasksWidget from './wpcom-general-tasks-widget';
 import WpcomLaunchpadWidget from './wpcom-launchpad-widget';
 import WpcomSiteManagementWidget from './wpcom-site-management-widget';
 const data = typeof window === 'object' ? window.JETPACK_MU_WPCOM_DASHBOARD_WIDGETS : {};
@@ -20,6 +21,10 @@ const widgets = [
 		id: 'wpcom_site_preview_widget_main',
 		Widget: WpcomSiteManagementWidget,
 	},
+	{
+		id: 'wpcom_general_tasks_widget_main',
+		Widget: WpcomGeneralTasksWidget,
+	},
 ];
 
 widgets.forEach( ( { id, Widget } ) => {

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
@@ -5,6 +5,8 @@
  * @package automattic/jetpack-mu-plugins
  */
 
+use Automattic\Jetpack\Connection\Client;
+
 /**
  * Load all wpcom dashboard widgets.
  */
@@ -13,7 +15,30 @@ function load_wpcom_dashboard_widgets() {
 		return;
 	}
 
-	enqueue_wpcom_dashboard_widgets();
+	$layout_response = Client::wpcom_json_api_request_as_blog(
+		'/sites/' . get_current_blog_id() . '/home/layout',
+		'v2',
+		array(),
+		null,
+		'wpcom'
+	);
+
+	$tasks = null;
+
+	if ( ! is_wp_error( $layout_response ) ) {
+		$layout = json_decode( $layout_response['body'], true );
+		if ( isset( $layout['secondary'] ) && is_array( $layout['secondary'] ) ) {
+			// If there's an array within the secondary section, it's the task
+			// list.
+			foreach ( $layout['secondary'] as $item ) {
+				if ( is_array( $item ) ) {
+					$tasks = $item;
+				}
+			}
+		}
+	}
+
+	enqueue_wpcom_dashboard_widgets( array( 'tasks' => $tasks ) );
 
 	$wpcom_dashboard_widgets = array(
 		array(
@@ -46,6 +71,15 @@ function load_wpcom_dashboard_widgets() {
 		);
 	}
 
+	if ( ! empty( $tasks ) ) {
+		$wpcom_dashboard_widgets[] = array(
+			'id'       => 'wpcom_general_tasks_widget',
+			'name'     => __( 'Suggestions', 'jetpack-mu-wpcom' ),
+			'context'  => 'normal',
+			'priority' => 'high',
+		);
+	}
+
 	foreach ( $wpcom_dashboard_widgets as $wpcom_dashboard_widget ) {
 		wp_add_dashboard_widget(
 			$wpcom_dashboard_widget['id'],
@@ -65,8 +99,10 @@ function load_wpcom_dashboard_widgets() {
 
 /**
  * Enqueue the assets of the wpcom dashboard widgets.
+ *
+ * @param array $args Settings to pass.
  */
-function enqueue_wpcom_dashboard_widgets() {
+function enqueue_wpcom_dashboard_widgets( $args = array() ) {
 	$handle = jetpack_mu_wpcom_enqueue_assets( 'wpcom-dashboard-widgets', array( 'js', 'css' ) );
 
 	$bundles      = wp_list_filter( wpcom_get_site_purchases(), array( 'product_type' => 'bundle' ) );
@@ -82,6 +118,15 @@ function enqueue_wpcom_dashboard_widgets() {
 			'siteIntent'      => get_option( 'site_intent' ),
 			'sitePlan'        => $current_plan,
 			'hasCustomDomain' => wpcom_site_has_feature( 'custom-domain' ),
+			'siteId'          => get_current_blog_id(),
+			'tasks'           => $args['tasks'],
+			'siteSuggestions' => Client::wpcom_json_api_request_as_blog(
+				'/sites/' . get_current_blog_id() . '/home/layout',
+				'v2',
+				array(),
+				null,
+				'wpcom'
+			),
 		)
 	);
 

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
@@ -0,0 +1,89 @@
+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,
+};
+
+export default ( { siteId } ) => {
+	const [ response, setResponse ] = useState( [] );
+	const [ index, setIndex ] = useState( 0 );
+
+	useEffect( () => {
+		const path = `/wpcom/v2/sites/${ siteId }/home/layout`;
+		apiFetch( { path } ).then( setResponse );
+	}, [ siteId ] );
+
+	if ( ! Array.isArray( response?.secondary ) ) {
+		return null;
+	}
+
+	// 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 ) );
+
+	if ( ! tasks ) {
+		return <p>{ __( 'No suggestions.', 'jetpack-mu-wpcom' ) }</p>;
+	}
+
+	const task = tasks[ index ];
+	const TaskComponent = taskMap[ task ];
+
+	return (
+		<>
+			<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 button-link"
+					onClick={ () => setIndex( index + 1 ) }
+					disabled={ index === tasks.length - 1 }
+				>
+					{ __( 'Next →', 'jetpack-mu-wpcom' ) }
+				</button>
+			</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
@@ -0,0 +1,39 @@
+export default () => {
+	// 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>
+		</>
+	);
+};
diff --git a/projects/plugins/mu-wpcom-plugin/changelog/add-dashboard-general-task-widget b/projects/plugins/mu-wpcom-plugin/changelog/add-dashboard-general-task-widget
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Dashboard: add general tasks widget
diff --git a/projects/plugins/wpcomsh/changelog/add-dashboard-general-task-widget b/projects/plugins/wpcomsh/changelog/add-dashboard-general-task-widget
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Dashboard: add general tasks widget