Repurpose sharing-modal to just show recommended tags (2nd try) (#39499)

projects/packages/jetpack-mu-wpcom/changelog/remove-sharing-modal-controller-try-2

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Sharing modal: Repurposed to only display recommended tags.

projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/class-wp-rest-wpcom-block-editor-recommended-tags-modal-controller.php

@@ -0,0 +1,68 @@
+<?php
+/**
+ * WP_REST_WPCOM_Block_Editor_Recommended_Tags_Modal_Controller file.
+ *
+ * @package Automattic/jetpack-mu-wpcom
+ */
+
+namespace Automattic\Jetpack\Jetpack_Mu_Wpcom\NUX;
+
+/**
+ * Class WP_REST_WPCOM_Block_Editor_Recommended_Tags_Modal_Controller.
+ */
+class WP_REST_WPCOM_Block_Editor_Recommended_Tags_Modal_Controller extends \WP_REST_Controller {
+	/**
+	 * WP_REST_WPCOM_Block_Editor_Recommended_Tags_Modal_Controller constructor.
+	 */
+	public function __construct() {
+		$this->namespace = 'wpcom/v2';
+		$this->rest_base = 'block-editor/recommended-tags-modal-dismissed';
+	}
+
+	/**
+	 * Register available routes.
+	 */
+	public function register_rest_route() {
+		register_rest_route(
+			$this->namespace,
+			$this->rest_base,
+			array(
+				array(
+					'methods'             => \WP_REST_Server::EDITABLE,
+					'callback'            => array( $this, 'set_wpcom_recommended_tags_modal_dismissed' ),
+					'permission_callback' => array( $this, 'permission_callback' ),
+				),
+			)
+		);
+	}
+
+	/**
+	 * Callback to determine whether the request can proceed.
+	 *
+	 * @return boolean
+	 */
+	public function permission_callback() {
+		return current_user_can( 'read' );
+	}
+
+	/**
+	 * Get the recommended tags modal dismissed status
+	 *
+	 * @return boolean
+	 */
+	public static function get_wpcom_recommended_tags_modal_dismissed() {
+		return (bool) get_option( 'wpcom_recommended_tags_modal_dismissed', false );
+	}
+
+	/**
+	 * Dismiss the recommended tags modal
+	 *
+	 * @param \WP_REST_Request $request Request object.
+	 * @return \WP_REST_Response
+	 */
+	public function set_wpcom_recommended_tags_modal_dismissed( $request ) {
+		$params = $request->get_json_params();
+		update_option( 'wpcom_recommended_tags_modal_dismissed', $params['wpcom_recommended_tags_modal_dismissed'] );
+		return rest_ensure_response( array( 'wpcom_recommended_tags_modal_dismissed' => $this->get_wpcom_recommended_tags_modal_dismissed() ) );
+	}
+}

projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/class-wpcom-block-editor-nux.php

@@ -64,6 +64,22 @@ public function enqueue_script_and_style() {
 			"var launchpadOptions = $launchpad_options;",
 			'before'
 		);
+
+		/**
+		 * Enqueue the recommended tags modal options.
+		 */
+		$recommended_tags_modal_options = wp_json_encode(
+			array(
+				'isDismissed' => WP_REST_WPCOM_Block_Editor_Recommended_Tags_Modal_Controller::get_wpcom_recommended_tags_modal_dismissed(),
+			),
+			JSON_HEX_TAG | JSON_HEX_AMP
+		);
+
+		wp_add_inline_script(
+			$handle,
+			"var recommendedTagsModalOptions = $recommended_tags_modal_options;",
+			'before'
+		);
 	}
 
 	/**
@@ -85,6 +101,10 @@ public function register_rest_api() {
 		require_once __DIR__ . '/class-wp-rest-wpcom-block-editor-video-celebration-modal-controller.php';
 		$video_celebration_modal_controller = new WP_REST_WPCOM_Block_Editor_Video_Celebration_Modal_Controller();
 		$video_celebration_modal_controller->register_rest_route();
+
+		require_once __DIR__ . '/class-wp-rest-wpcom-block-editor-recommended-tags-modal-controller.php';
+		$recommended_tags_modal_controller = new WP_REST_WPCOM_Block_Editor_Recommended_Tags_Modal_Controller();
+		$recommended_tags_modal_controller->register_rest_route();
 	}
 }
 add_action( 'init', array( __NAMESPACE__ . '\WPCOM_Block_Editor_NUX', 'init' ) );

projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/block-editor-nux.js

@@ -15,8 +15,8 @@ import { BloggingPromptsModal } from './blogging-prompts-modal';
 import DraftPostModal from './draft-post-modal';
 import FirstPostPublishedModal from './first-post-published-modal';
 import PurchaseNotice from './purchase-notice';
+import RecommendedTagsModal from './recommended-tags-modal';
 import SellerCelebrationModal from './seller-celebration-modal';
-import PostPublishedSharingModal from './sharing-modal';
 import { DEFAULT_VARIANT, BLANK_CANVAS_VARIANT } from './store';
 import VideoPressCelebrationModal from './video-celebration-modal';
 import WpcomNux from './welcome-modal/wpcom-nux';
@@ -125,7 +125,7 @@ registerPlugin( 'wpcom-block-editor-nux', {
 				<ShouldShowFirstPostPublishedModalProvider>
 					<WelcomeTour />
 					<FirstPostPublishedModal />
-					<PostPublishedSharingModal />
+					<RecommendedTagsModal />
 					<SellerCelebrationModal />
 					<PurchaseNotice />
 					<VideoPressCelebrationModal />

projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/recommended-tags-modal/index.tsx

@@ -0,0 +1,117 @@
+import { Modal } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useEffect, useRef, useState } from '@wordpress/element';
+import React from 'react';
+import {
+	START_WRITING_FLOW,
+	DESIGN_FIRST_FLOW,
+	useSiteIntent,
+	useShouldShowSellerCelebrationModal,
+	useShouldShowVideoCelebrationModal,
+	useShouldShowFirstPostPublishedModal,
+} from '../../../../common/tour-kit';
+import { wpcomTrackEvent } from '../../../../common/tracks';
+import SuggestedTags from './suggested-tags';
+import useRecommendedTagsModalDismissed from './use-recommended-tags-modal-dismissed';
+
+import './style.scss';
+
+type CoreEditorPlaceholder = {
+	getCurrentPost: ( ...args: unknown[] ) => {
+		status: string;
+		password: string;
+	};
+	getCurrentPostType: ( ...args: unknown[] ) => string;
+	isCurrentPostPublished: ( ...args: unknown[] ) => boolean;
+};
+
+const RecommendedTagsModalInner: React.FC = () => {
+	const isDismissedDefault = window?.recommendedTagsModalOptions?.isDismissed || false;
+	const { launchpadScreenOption } = window?.launchpadOptions || {};
+	const { isDismissed, updateIsDismissed } = useRecommendedTagsModalDismissed( isDismissedDefault );
+
+	const postType = useSelect(
+		select => ( select( 'core/editor' ) as CoreEditorPlaceholder ).getCurrentPostType(),
+		[]
+	);
+
+	const isCurrentPostPublished = useSelect(
+		select => ( select( 'core/editor' ) as CoreEditorPlaceholder ).isCurrentPostPublished(),
+		[]
+	);
+
+	const previousIsCurrentPostPublished = useRef( isCurrentPostPublished );
+	const shouldShowFirstPostPublishedModal = useShouldShowFirstPostPublishedModal();
+	const shouldShowSellerCelebrationModal = useShouldShowSellerCelebrationModal();
+	const shouldShowVideoCelebrationModal =
+		useShouldShowVideoCelebrationModal( isCurrentPostPublished );
+
+	const [ isOpen, setIsOpen ] = useState( false );
+	const closeModal = () => setIsOpen( false );
+	const [ shouldShowSuggestedTags, setShouldShowSuggestedTags ] = useState( true );
+
+	useEffect( () => {
+		// The first post will show a different modal.
+		if (
+			! shouldShowFirstPostPublishedModal &&
+			! shouldShowSellerCelebrationModal &&
+			! shouldShowVideoCelebrationModal &&
+			launchpadScreenOption !== 'full' &&
+			! previousIsCurrentPostPublished.current &&
+			isCurrentPostPublished &&
+			postType === 'post'
+		) {
+			previousIsCurrentPostPublished.current = isCurrentPostPublished;
+			wpcomTrackEvent( 'calypso_editor_recommended_tags_dialog_show' );
+
+			// Deprecated. Kept for backwards-compatibility.
+			wpcomTrackEvent( 'calypso_editor_sharing_dialog_show' );
+
+			// When the post published panel shows, it is focused automatically.
+			// Thus, we need to delay open the modal so that the modal would not be close immediately
+			// because the outside of modal is focused
+			window.setTimeout( () => {
+				setIsOpen( true );
+			} );
+		}
+	}, [
+		postType,
+		shouldShowFirstPostPublishedModal,
+		shouldShowSellerCelebrationModal,
+		shouldShowVideoCelebrationModal,
+		isCurrentPostPublished,
+		launchpadScreenOption,
+	] );
+
+	if ( ! isOpen || ! shouldShowSuggestedTags || isDismissedDefault ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			className="wpcom-block-editor-post-published-recommended-tags-modal"
+			title=""
+			onRequestClose={ closeModal }
+		>
+			<div className="wpcom-block-editor-post-published-recommended-tags-modal__inner">
+				<SuggestedTags
+					setShouldShowSuggestedTags={ setShouldShowSuggestedTags }
+					onDontShowAgainChange={ () => {
+						updateIsDismissed( ! isDismissed );
+					} }
+				/>
+			</div>
+		</Modal>
+	);
+};
+
+const RecommendedTagsModal = () => {
+	const { siteIntent: intent } = useSiteIntent();
+	if ( intent === START_WRITING_FLOW || intent === DESIGN_FIRST_FLOW ) {
+		return null;
+	}
+
+	return <RecommendedTagsModalInner />;
+};
+
+export default RecommendedTagsModal;