Port Daily Writing Prompt from My Home as Dashboard widget

projects/packages/jetpack-mu-wpcom/changelog/blogging-prompts-widget

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add Daily Writing Prompt as Dashboard widget

projects/packages/jetpack-mu-wpcom/src/features/wpcom-blogging-prompts/hooks/use-blogging-prompts.js

@@ -0,0 +1,47 @@
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+
+export const useBloggingPrompts = ( { isBloganuary = false } ) => {
+	const [ prompts, setPrompts ] = useState( [] );
+	const [ promptIndex, setPromptIndex ] = useState( 0 );
+
+	useEffect( () => {
+		apiFetch( {
+			path: addQueryArgs( `/wpcom/v3/blogging-prompts`, {
+				per_page: isBloganuary ? 31 : 10,
+				after: isBloganuary ? '--01-01' : moment().format( '--MM-DD' ),
+				order: 'desc',
+				force_year: new Date().getFullYear(),
+			} ),
+		} )
+			.then( result => {
+				return setPrompts( result );
+			} )
+			// eslint-disable-next-line no-console
+			.catch( () => console.error( 'Unable to fetch blogging prompts' ) );
+	}, [ isBloganuary ] );
+
+	const hasPreviousPrompt = promptIndex > 0;
+	const goToPreviousPrompt = () => {
+		setPromptIndex( hasPreviousPrompt ? promptIndex - 1 : prompts.length - 1 );
+	};
+
+	const hasNextPrompt = promptIndex < prompts.length - 1;
+	const goToNextPrompt = () => {
+		setPromptIndex( hasNextPrompt ? promptIndex + 1 : 0 );
+	};
+
+	const prompt = prompts?.[ promptIndex ];
+	const todayPrompt = prompts?.[ 0 ];
+
+	return {
+		prompt,
+		todayPrompt,
+		hasPreviousPrompt,
+		goToPreviousPrompt,
+		hasNextPrompt,
+		goToNextPrompt,
+	};
+};

projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-blogging-prompts-widget/index.js

@@ -0,0 +1,100 @@
+import { __ } from '@wordpress/i18n';
+import { wpcomTrackEvent } from '../../../common/tracks';
+import { useBloggingPrompts } from '../../wpcom-blogging-prompts/hooks/use-blogging-prompts';
+
+import './style.scss';
+
+const WpcomBloggingPromptsWidget = ( { siteId, siteAdminUrl } ) => {
+	const {
+		prompt,
+		todayPrompt,
+		hasPreviousPrompt,
+		goToPreviousPrompt,
+		hasNextPrompt,
+		goToNextPrompt,
+	} = useBloggingPrompts( { isBloganuary: false } );
+
+	const handlePromptClick = e => {
+		e.preventDefault();
+
+		if ( prompt.answered ) {
+			return;
+		}
+
+		// TODO: Track event
+		// eslint-disable-next-line no-constant-condition
+		if ( 1 === 0 ) {
+			wpcomTrackEvent( 'xxx_answer_prompt', {
+				site_id: siteId,
+				prompt_id: prompt.id,
+			} );
+		}
+
+		// Track if a user skipped todays prompt and choose to answer another prompt
+		const todayPromptId = todayPrompt.id;
+		const selectedPromptId = prompt.id;
+		if ( todayPromptId !== selectedPromptId ) {
+			// TODO: Track event
+			// eslint-disable-next-line no-constant-condition
+			if ( 1 === 0 ) {
+				wpcomTrackEvent( 'xxx_skip_prompt', {
+					site_id: siteId,
+					prompt_id: todayPromptId,
+				} );
+			}
+		}
+
+		window.location.href = `${ siteAdminUrl }post-new.php?answer_prompt=${ prompt.id }`;
+	};
+
+	if ( ! prompt ) {
+		return null;
+	}
+
+	return (
+		<>
+			<div className="wpcom-blogging-prompts-widget__prompt">
+				{ hasPreviousPrompt ? (
+					<a
+						href="#"
+						className="wpcom-blogging-prompts-widget__prompt--prev"
+						onClick={ goToPreviousPrompt }
+					></a>
+				) : (
+					<span className="wpcom-blogging-prompts-widget__prompt--prev disabled"></span>
+				) }
+				<p>{ prompt.text }</p>
+				{ hasNextPrompt ? (
+					<a
+						href="#"
+						className="wpcom-blogging-prompts-widget__prompt--next"
+						onClick={ goToNextPrompt }
+					></a>
+				) : (
+					<span className="wpcom-blogging-prompts-widget__prompt--next disabled"></span>
+				) }
+			</div>
+			<div className="wpcom-blogging-prompts-widget__actions">
+				<button className="button button-primary" onClick={ handlePromptClick }>
+					{ __( 'Post Answer', 'jetpack-mu-wpcom' ) }
+				</button>
+				{ prompt.answered_users_sample.length > 0 && (
+					<div className="wpcom-blogging-prompts-widget__responses">
+						<div className="wpcom-blogging-prompts-widget__responses-users">
+							{ prompt.answered_users_sample.map( sample => {
+								return <img alt="answered-users" src={ sample.avatar } key={ sample.avatar } />;
+							} ) }
+						</div>
+						{ prompt?.answered_users_count > 0 && (
+							<a href={ new URL( prompt.answered_link ) }>
+								{ __( 'View all responses', 'jetpack-mu-wpcom' ) }
+							</a>
+						) }
+					</div>
+				) }
+			</div>
+		</>
+	);
+};
+
+export default WpcomBloggingPromptsWidget;

projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-blogging-prompts-widget/style.scss

@@ -0,0 +1,80 @@
+#wpcom-blogging-prompts-widget {
+	min-height: 132px;
+
+	h2 {
+		flex-grow: initial;
+
+		&::before {
+			font-family: dashicons;
+			content: "\f339";
+			margin-right: 5px;
+		}
+	}
+}
+
+.wpcom-blogging-prompts-widget {
+	&__prompt {
+		display: flex;
+		gap: 10px;
+		justify-content: space-between;
+		margin-bottom: 20px;
+
+		&--prev, &--next {
+			align-self: center;
+			font-family: dashicons;
+			font-size: 15px;
+			text-decoration: none;
+			border: 1px solid;
+			border-radius: 100%;
+			text-align: center;
+
+			&::before {
+				display: inline-block;
+				height: 21px;
+				width: 21px;
+			}
+
+			&.disabled {
+				color: #a7aaad;
+			}
+		}
+
+		&--prev:before {
+			content: "\f341";
+		}
+
+		&--next:before {
+			content: "\f345";
+		}
+
+		p {
+			flex-grow: 1;
+			margin: 0 0 0;
+			line-height: 21px;
+		}
+	}
+
+	&__actions {
+		display: flex;
+
+		.wpcom-blogging-prompts-widget__responses {
+			margin-left: auto;
+			height: 30px;
+
+			&-users {
+				display: inline-block;
+				vertical-align: middle;
+				margin-right: 5px;
+
+				img {
+					height: 22px;
+					width: 22px;
+					border: 2px solid white;
+					border-radius: 100%;
+					margin-top: 2px;
+					margin-left: -10px;
+				}
+			}
+		}
+	}
+}

projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js

@@ -1,6 +1,7 @@
 import '../../common/public-path';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import WpcomBloggingPromptsWidget from './wpcom-blogging-prompts-widget';
 import WpcomSiteManagementWidget from './wpcom-site-management-widget';
 
 const data = typeof window === 'object' ? window.JETPACK_MU_WPCOM_DASHBOARD_WIDGETS : {};
@@ -10,6 +11,10 @@ const widgets = [
 		id: 'wpcom_site_management_widget_main',
 		Widget: WpcomSiteManagementWidget,
 	},
+	{
+		id: 'wpcom-blogging-prompts-widget_main',
+		Widget: WpcomBloggingPromptsWidget,
+	},
 ];
 
 widgets.forEach( ( { id, Widget } ) => {

projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php

@@ -21,14 +21,19 @@ function load_wpcom_dashboard_widgets() {
 			'name'     => __( 'Site Management Panel', 'jetpack-mu-wpcom' ),
 			'priority' => 'high',
 		),
+		array(
+			'id'       => 'wpcom-blogging-prompts-widget',
+			'name'     => __( 'Daily Writing Prompt', 'jetpack-mu-wpcom' ),
+			'priority' => 'high',
+		),
 	);
 
 	foreach ( $wpcom_dashboard_widgets as $wpcom_dashboard_widget ) {
 		wp_add_dashboard_widget(
 			$wpcom_dashboard_widget['id'],
 			$wpcom_dashboard_widget['name'],
 			'render_wpcom_dashboard_widget',
-			function () {},
+			null, // @phan-suppress-current-line PhanTypeMismatchArgumentProbablyReal
 			array(
 				'id'   => $wpcom_dashboard_widget['id'],
 				'name' => $wpcom_dashboard_widget['name'],
@@ -48,9 +53,11 @@ function enqueue_wpcom_dashboard_widgets() {
 
 	$data = wp_json_encode(
 		array(
-			'siteName'    => get_bloginfo( 'name' ),
-			'siteDomain'  => wp_parse_url( home_url(), PHP_URL_HOST ),
-			'siteIconUrl' => get_site_icon_url( 38 ),
+			'siteId'       => get_current_blog_id(),
+			'siteName'     => get_bloginfo( 'name' ),
+			'siteDomain'   => wp_parse_url( home_url(), PHP_URL_HOST ),
+			'siteIconUrl'  => get_site_icon_url( 38 ),
+			'siteAdminUrl' => get_admin_url(),
 		)
 	);
 
@@ -80,7 +87,7 @@ function render_wpcom_dashboard_widget( $post, $callback_args ) {
 	);
 
 	?>
-	<div style="min-height: 200px;">
+	<div>
 		<div class="hide-if-js">
 			<?php echo esc_html( $warning ); ?>
 		</div>

projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss

@@ -1,9 +1,6 @@
 #wpcom_site_management_widget {
+	min-height: 200px;
 	color: #1e1e1e;
-
-	.postbox-title-action {
-		display: none;
-	}
 }
 
 #wpcom_site_management_widget_main {