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..be608cedaae07 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,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'], ) ); 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..4c7345558ba2e --- /dev/null +++ b/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 && ( +

+ + { ' ' } + +

+ ) } + + + ); +}; 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..19d81a355e5e2 --- /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,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 ( + <> +

{ __( 'Own a domain. Build a site.', 'jetpack-mu-wpcom' ) }

+

+ { createInterpolateElement( + sprintf( + // translators: %s is the domain name. + __( + '%s 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: , + } + ) } +

+

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

+
+ + { __( 'Get this domain', 'jetpack-mu-wpcom' ) } + + { ' ' } + + { __( 'Find other domains', 'jetpack-mu-wpcom' ) } + +
+ + ); +}; diff --git a/projects/packages/jetpack-mu-wpcom/src/utils.php b/projects/packages/jetpack-mu-wpcom/src/utils.php index fa7a484796e9b..126d7b2597a9c 100644 --- a/projects/packages/jetpack-mu-wpcom/src/utils.php +++ b/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; +} 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