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 new file mode 100644 index 0000000000000..1ffcf22b360c4 --- /dev/null +++ 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/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js index f390d13b67f4d..f37a17ccff1f3 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js +++ b/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 } ) => { diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php index cba899c1a7a6f..8ecfd3129c27d 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php +++ b/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,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/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js new file mode 100644 index 0000000000000..a71cb29254ab1 --- /dev/null +++ b/projects/packages/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

{ __( 'No suggestions.', 'jetpack-mu-wpcom' ) }

; + } + + const task = tasks[ index ]; + const TaskComponent = taskMap[ task ]; + + return ( + <> +

+ + { ' ' } + +

+ { TaskComponent ? ( + + ) : ( +

To do: { task }

+ ) } + { /* { createPortal( + + + + , + document.querySelector( '#wpcom_general_tasks_widget .wpcom_general_tasks_widget_title' ) + ) } */ } + + ); +}; diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/style.scss new file mode 100644 index 0000000000000..2f648fe9b18bb --- /dev/null +++ b/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; +// } diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js new file mode 100644 index 0000000000000..41dcd798389c7 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/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 ( + <> +

Own a domain. Build a site.

+

+ { domain } is a perfect site address. It’s available, easy to find, share, + and follow. Get it now and claim a corner of the web. +

+

+ { /* To do: convert to SVG. */ } + + { domain } + + { +

+
+ + Get this domain + + { ' ' } + + Find other domains + +
+ + ); +}; 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 new file mode 100644 index 0000000000000..1ffcf22b360c4 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..1ffcf22b360c4 --- /dev/null +++ b/projects/plugins/wpcomsh/changelog/add-dashboard-general-task-widget @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Dashboard: add general tasks widget