Load WPCOM sidebar notice async (#40422)

* Load WPCOM sidebar notice async * changelog * Update file version * Rename action's name * Fix Phan errors * Update the nonce action * Add wpcom prefix
Automattic · Dec 5, 2024 · 8705a4c · 8705a4c
1 parent 3f14d27
commit 8705a4c
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 65 deletions.
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/fix-async-wpcom-sidebar-notice b/projects/packages/jetpack-mu-wpcom/changelog/fix-async-wpcom-sidebar-notice
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Load WPCOM sidebar notice async
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js
@@ -1,23 +1,23 @@
-/* global wp, wpcomSidebarNotice */
+/* global wp, wpcomSidebarNoticeConfig */
 import { wpcomTrackEvent } from '../../common/tracks';
 
 import './wpcom-sidebar-notice.scss';
 
-const wpcomSidebarNoticeRecordEvent = event => {
+const wpcomSidebarNoticeRecordEvent = ( event, wpcomSidebarNoticeData ) => {
 	if ( ! event ) {
 		return;
 	}
 	wpcomTrackEvent(
 		event.name,
 		event.props,
-		wpcomSidebarNotice.user.ID,
-		wpcomSidebarNotice.user.username
+		wpcomSidebarNoticeData.user.ID,
+		wpcomSidebarNoticeData.user.username
 	);
 };
 
-const wpcomShowSidebarNotice = () => {
+const wpcomShowSidebarNotice = wpcomSidebarNoticeData => {
 	const adminMenu = document.querySelector( '#adminmenu' );
-	if ( ! adminMenu || typeof wpcomSidebarNotice === 'undefined' ) {
+	if ( ! adminMenu || ! wpcomSidebarNoticeData ) {
 		return;
 	}
 
@@ -28,21 +28,23 @@ const wpcomShowSidebarNotice = () => {
 			<li
 				id="toplevel_page_site-notices"
 				class="wp-not-current-submenu menu-top menu-icon-generic toplevel_page_site-notices"
-				data-id="${ wpcomSidebarNotice.id }"
-				data-feature-class="${ wpcomSidebarNotice.featureClass }"
+				data-id="${ wpcomSidebarNoticeData.id }"
+				data-feature-class="${ wpcomSidebarNoticeData.featureClass }"
 			>
 				<a href="${
-					wpcomSidebarNotice.url
+					wpcomSidebarNoticeData.url
 				}" class="wp-not-current-submenu menu-top menu-icon-generic toplevel_page_site-notices">
 					<div class="wp-menu-name">
 						<div class="upsell_banner">
 							<div class="upsell_banner__icon dashicons" aria-hidden="true"></div>
-							<div class="upsell_banner__text">${ wpcomSidebarNotice.text }</div>
-							<button type="button" class="upsell_banner__action button">${ wpcomSidebarNotice.action }</button>
+							<div class="upsell_banner__text">${ wpcomSidebarNoticeData.text }</div>
+							<button type="button" class="upsell_banner__action button">${
+								wpcomSidebarNoticeData.action
+							}</button>
 							${
-								wpcomSidebarNotice.dismissible
+								wpcomSidebarNoticeData.dismissible
 									? '<button type="button" class="upsell_banner__dismiss button button-link">' +
-									  wpcomSidebarNotice.dismissLabel +
+									  wpcomSidebarNoticeData.dismissLabel +
 									  '</button>'
 									: ''
 							}
@@ -54,7 +56,7 @@ const wpcomShowSidebarNotice = () => {
 	);
 
 	// Record impression event in Tracks.
-	wpcomSidebarNoticeRecordEvent( wpcomSidebarNotice.tracks?.display );
+	wpcomSidebarNoticeRecordEvent( wpcomSidebarNoticeData.tracks?.display );
 
 	const sidebarNotice = adminMenu.firstElementChild;
 	sidebarNotice.addEventListener( 'click', event => {
@@ -67,17 +69,37 @@ const wpcomShowSidebarNotice = () => {
 			wp.ajax.post( 'wpcom_dismiss_sidebar_notice', {
 				id: sidebarNotice.dataset.id,
 				feature_class: sidebarNotice.dataset.featureClass,
-				_ajax_nonce: wpcomSidebarNotice.dismissNonce,
+				_ajax_nonce: wpcomSidebarNoticeData.dismissNonce,
 			} );
 			sidebarNotice.remove();
 
 			// Record dismiss event in Tracks.
-			wpcomSidebarNoticeRecordEvent( wpcomSidebarNotice.tracks?.dismiss );
+			wpcomSidebarNoticeRecordEvent( wpcomSidebarNoticeData.tracks?.dismiss );
 		} else {
 			// Record click event in Tracks.
-			wpcomSidebarNoticeRecordEvent( wpcomSidebarNotice.tracks?.click );
+			wpcomSidebarNoticeRecordEvent( wpcomSidebarNoticeData.tracks?.click );
 		}
 	} );
 };
 
-document.addEventListener( 'DOMContentLoaded', wpcomShowSidebarNotice );
+const wpcomFetchSidebarNotice = async () => {
+	try {
+		const response = await fetch(
+			`${ wpcomSidebarNoticeConfig.ajaxUrl }?action=wpcom_fetch_sidebar_notice&nonce=${ wpcomSidebarNoticeConfig.nonce }`
+		);
+
+		if ( ! response.status === 200 ) {
+			return;
+		}
+
+		const res = await response.json();
+
+		if ( res.success && res.data ) {
+			wpcomShowSidebarNotice( res.data );
+		}
+	} catch ( error ) {
+		// End silently
+	}
+};
+
+document.addEventListener( 'DOMContentLoaded', wpcomFetchSidebarNotice );
diff --git a/...ects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.php b/...ects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.php
@@ -18,11 +18,13 @@
  * Enqueue assets needed by the WordPress.com sidebar notice.
  */
 function wpcom_enqueue_sidebar_notice_assets() {
+	$asset_file = include Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.asset.php';
+
 	wp_enqueue_script(
 		'wpcom-sidebar-notice',
 		plugins_url( 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.js', Jetpack_Mu_Wpcom::BASE_FILE ),
-		array(),
-		Jetpack_Mu_Wpcom::PACKAGE_VERSION,
+		$asset_file['dependencies'] ?? array(),
+		$asset_file['version'] ?? filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.js' ),
 		array(
 			'strategy'  => 'defer',
 			'in_footer' => true,
@@ -33,53 +35,17 @@ function wpcom_enqueue_sidebar_notice_assets() {
 		'wpcom-sidebar-notice',
 		plugins_url( 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.css', Jetpack_Mu_Wpcom::BASE_FILE ),
 		array(),
-		Jetpack_Mu_Wpcom::PACKAGE_VERSION
+		$asset_file['version'] ?? filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.css' )
 	);
 
-	$notice = wpcom_get_sidebar_notice();
-	if ( $notice ) {
-		$link = $notice['link'];
-		if ( str_starts_with( $link, '/' ) ) {
-			$link = 'https://wordpress.com' . $link;
-		}
-
-		$user_id    = null;
-		$user_login = null;
-
-		if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) {
-			global $current_user;
-			$user_id    = $current_user->ID;
-			$user_login = $current_user->user_login;
-		} else {
-			$connection_manager = new Connection_Manager();
-			$wpcom_user_data    = $connection_manager->get_connected_user_data();
-			if ( $wpcom_user_data ) {
-				$user_id    = $wpcom_user_data['ID'];
-				$user_login = $wpcom_user_data['login'];
-			}
-		}
-
-		$data = array(
-			'url'          => esc_url( $link ),
-			'text'         => wp_kses( $notice['content'], array() ),
-			'action'       => wp_kses( $notice['cta'], array() ),
-			'dismissible'  => $notice['dismissible'],
-			'dismissLabel' => esc_html__( 'Dismiss', 'jetpack-mu-wpcom' ),
-			'id'           => $notice['id'],
-			'featureClass' => $notice['feature_class'],
-			'dismissNonce' => wp_create_nonce( 'wpcom_dismiss_sidebar_notice' ),
-			'tracks'       => $notice['tracks'],
-			'user'         => array(
-				'ID'       => $user_id,
-				'username' => $user_login,
-			),
-		);
-
-		wp_add_inline_script(
-			'wpcom-sidebar-notice',
-			'window.wpcomSidebarNotice = ' . wp_json_encode( $data ) . ';'
-		);
-	}
+	wp_localize_script(
+		'wpcom-sidebar-notice',
+		'wpcomSidebarNoticeConfig',
+		array(
+			'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+			'nonce'   => wp_create_nonce( 'wpcom_fetch_sidebar_notice' ),
+		)
+	);
 }
 add_action( 'admin_enqueue_scripts', 'wpcom_enqueue_sidebar_notice_assets' );
 
@@ -124,6 +90,59 @@ function wpcom_get_sidebar_notice() {
 	);
 }
 
+/**
+ * Fetch sidebar notice data asynchronously via AJAX.
+ */
+function wpcom_fetch_sidebar_notice_data() {
+	check_ajax_referer( 'wpcom_fetch_sidebar_notice', 'nonce' );
+
+	$notice = wpcom_get_sidebar_notice();
+	if ( ! $notice ) {
+		status_header( 204 );
+		wp_die();
+	}
+
+	$link = ! empty( $notice['link'] ) ? $notice['link'] : '';
+	if ( str_starts_with( $link, '/' ) ) {
+		$link = 'https://wordpress.com' . $link;
+	}
+
+	$user_id    = null;
+	$user_login = null;
+
+	if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) {
+		global $current_user;
+		$user_id    = $current_user->ID;
+		$user_login = $current_user->user_login;
+	} else {
+		$connection_manager = new Connection_Manager();
+		$wpcom_user_data    = $connection_manager->get_connected_user_data();
+		if ( $wpcom_user_data ) {
+			$user_id    = $wpcom_user_data['ID'];
+			$user_login = $wpcom_user_data['login'];
+		}
+	}
+
+	$data = array(
+		'url'          => esc_url( $link ),
+		'text'         => wp_kses( $notice['content'] ?? '', array() ),
+		'action'       => wp_kses( $notice['cta'] ?? '', array() ),
+		'dismissible'  => $notice['dismissible'] ?? false,
+		'dismissLabel' => esc_html__( 'Dismiss', 'jetpack-mu-wpcom' ),
+		'id'           => $notice['id'] ?? '',
+		'featureClass' => $notice['feature_class'] ?? '',
+		'dismissNonce' => wp_create_nonce( 'wpcom_dismiss_sidebar_notice' ),
+		'tracks'       => $notice['tracks'] ?? null,
+		'user'         => array(
+			'ID'       => $user_id,
+			'username' => $user_login,
+		),
+	);
+
+	wp_send_json_success( $data );
+}
+add_action( 'wp_ajax_wpcom_fetch_sidebar_notice', 'wpcom_fetch_sidebar_notice_data' );
+
 /**
  * Handle AJAX requests to dismiss a sidebar notice.
  */