MU WPCOM: dashboard: add general tasks widget scaffolding + domain upsell

projects/packages/jetpack-mu-wpcom/changelog/add-dashboard-general-task-widget

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Dashboard: add general tasks widget

projects/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 } ) => {

projects/packages/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,31 @@ function load_wpcom_dashboard_widgets() {
 		return;
 	}
 
-	enqueue_wpcom_dashboard_widgets();
+	$layout_response = Client::wpcom_json_api_request_as_blog(
+		'/sites/' . get_wpcom_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;
+					break;
+				}
+			}
+		}
+	}
+
+	enqueue_wpcom_dashboard_widgets( array( 'tasks' => $tasks ) );
 
 	$wpcom_dashboard_widgets = array(
 		array(
@@ -46,6 +72,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 +100,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 +119,7 @@ function enqueue_wpcom_dashboard_widgets() {
 			'siteIntent'      => get_option( 'site_intent' ),
 			'sitePlan'        => $current_plan,
 			'hasCustomDomain' => wpcom_site_has_feature( 'custom-domain' ),
+			'tasks'           => $args['tasks'],
 		)
 	);
 

projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js

@@ -0,0 +1,41 @@
+import { 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 ( { tasks, ...props } ) => {
+	const availableTasks = tasks.filter( _task => taskMap[ _task ] );
+	const [ index, setIndex ] = useState( 0 );
+	const task = availableTasks[ index ];
+	const TaskComponent = taskMap[ task ];
+
+	return (
+		<>
+			{ availableTasks.length > 1 && (
+				<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 === availableTasks.length - 1 }
+					>
+						{ __( 'Next →', 'jetpack-mu-wpcom' ) }
+					</button>
+				</p>
+			) }
+			<TaskComponent { ...props } />
+		</>
+	);
+};

projects/packages/jetpack-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;
+// }

projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js

@@ -0,0 +1,83 @@
+import apiFetch from '@wordpress/api-fetch';
+import { useState, useEffect, createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+export default ( { siteDomain, sitePlan } ) => {
+	const [ domains, setDomains ] = useState( [] );
+	useEffect( () => {
+		const path = addQueryArgs( `/rest/v1.1/domains/suggestions`, {
+			query: siteDomain.split( '.' )[ 0 ],
+			quantity: 1,
+			vendor: 'domain-upsell',
+			only_wordpressdotcom: false,
+			include_dotblogsubdomain: false,
+			include_wordpressdotcom: false,
+		} );
+		apiFetch( { path, global: true } ).then( setDomains );
+	}, [ siteDomain ] );
+
+	if ( domains.length === 0 ) {
+		return null;
+	}
+
+	const domain = domains[ 0 ].domain_name;
+	const cart = [ `domain_reg:${ domain }` ];
+
+	if ( ! sitePlan || sitePlan.product_slug.includes( 'monthly' ) ) {
+		cart.push( 'personal' );
+	}
+
+	const getLink = `http://wordpress.com/checkout/${ siteDomain }/${ cart.join( ',' ) }`;
+	const searchLink = addQueryArgs( `https://wordpress.com/domains/add/${ siteDomain }`, {
+		domainAndPlanPackage: true,
+		domain: true,
+	} );
+
+	return (
+		<>
+			<h2>{ __( 'Own a domain. Build a site.', 'jetpack-mu-wpcom' ) }</h2>
+			<p>
+				{ createInterpolateElement(
+					sprintf(
+						// translators: %s is the domain name.
+						__(
+							'<strong>%s</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.',
+							'jetpack-mu-wpcom'
+						),
+						domain
+					),
+					{
+						strong: <strong />,
+					}
+				) }
+			</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={ getLink } className="button button-primary">
+					{ __( 'Get this domain', 'jetpack-mu-wpcom' ) }
+				</a>
+				{ ' ' }
+				<a href={ searchLink } className="button button-secondary">
+					{ __( 'Find other domains', 'jetpack-mu-wpcom' ) }
+				</a>
+			</div>
+		</>
+	);
+};

projects/packages/jetpack-mu-wpcom/src/utils.php

@@ -127,3 +127,30 @@ function jetpack_mu_wpcom_enqueue_assets( $asset_name, $asset_types = array() )
 
 	return $asset_handle;
 }
+
+/**
+ * Returns the WP.com blog ID for the current site.
+ *
+ * @return int|false The WP.com blog ID, or false if the site does not have a WP.com blog ID.
+ */
+function get_wpcom_blog_id() {
+	if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) {
+		return get_current_blog_id();
+	}
+
+	if ( defined( 'IS_ATOMIC' ) && IS_ATOMIC ) {
+		/*
+		 * Atomic sites have the WP.com blog ID stored as a Jetpack option. This
+		 * code deliberately doesn't use `Jetpack_Options::get_option` so it
+		 * works even when Jetpack has not been loaded.
+		 */
+		$jetpack_options = get_option( 'jetpack_options' );
+		if ( is_array( $jetpack_options ) && isset( $jetpack_options['id'] ) ) {
+			return (int) $jetpack_options['id'];
+		}
+
+		return get_current_blog_id();
+	}
+
+	return false;
+}

projects/plugins/mu-wpcom-plugin/changelog/add-dashboard-general-task-widget

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Dashboard: add general tasks widget

projects/plugins/wpcomsh/changelog/add-dashboard-general-task-widget

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Dashboard: add general tasks widget