Open support links on the upsell wrapper inside the Help Center (#44199)

Author: xavier-lc

projects/packages/jetpack-mu-wpcom/changelog/Upsell Support Links Handler

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Open support links  on the upsell wrapper inside the Help Center

projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center.php

@@ -8,6 +8,7 @@
 namespace A8C\FSE;
 
 use Automattic\Jetpack\Connection\Manager as Connection_Manager;
+use Automattic\Jetpack\Jetpack_Mu_Wpcom;
 use Automattic\Jetpack\Jetpack_Mu_Wpcom\Common;
 
 /**
@@ -212,6 +213,14 @@ function ( $wp_admin_bar ) {
 				$version
 			);
 		}
+
+		wp_enqueue_script(
+			'wpcom-upsell-support-link-handler',
+			plugins_url( 'build/wpcom-upsell-support-link-handler/wpcom-upsell-support-link-handler.js', Jetpack_Mu_Wpcom::BASE_FILE ),
+			array(),
+			filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-upsell-support-link-handler/wpcom-upsell-support-link-handler.js' ),
+			true
+		);
 	}
 
 	/**

projects/packages/jetpack-mu-wpcom/src/features/help-center/js/upsell-support-link-handler.js

@@ -0,0 +1,60 @@
+import { useDispatch } from '@wordpress/data';
+import domReady from '@wordpress/dom-ready';
+import { useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+
+const UPSELL_WRAPPER_SELECTOR = '.wpcom_upsell_page_wrapper';
+
+const UpsellSupportLinkHandler = () => {
+	const helpCenterDispatch = useDispatch( 'automattic/help-center' );
+
+	const setShowSupportDoc = helpCenterDispatch?.setShowSupportDoc;
+
+	useEffect( () => {
+		if ( ! setShowSupportDoc ) {
+			return;
+		}
+
+		const links = Array.from(
+			document.querySelectorAll( `${ UPSELL_WRAPPER_SELECTOR } a` )
+		).filter( link => {
+			try {
+				const url = new URL( link.attributes?.href?.value );
+				const allowedHosts = [ 'wordpress.com' ];
+				return allowedHosts.includes( url.host ) && url.pathname.startsWith( '/support/' );
+				// eslint-disable-next-line no-unused-vars
+			} catch ( e ) {
+				return false;
+			}
+		} );
+
+		const handleClick = event => {
+			event.preventDefault();
+			setShowSupportDoc( event.currentTarget.href );
+		};
+
+		links.forEach( link => {
+			link.addEventListener( 'click', handleClick );
+		} );
+
+		return () => {
+			links.forEach( link => {
+				link.removeEventListener( 'click', handleClick );
+			} );
+		};
+	}, [ setShowSupportDoc ] );
+};
+
+domReady( () => {
+	const upsellWrapper = document.querySelector( UPSELL_WRAPPER_SELECTOR );
+
+	if ( ! upsellWrapper ) {
+		return;
+	}
+
+	const rootElement = document.createElement( 'div' );
+	document.body.appendChild( rootElement );
+	const root = createRoot( rootElement );
+
+	root.render( <UpsellSupportLinkHandler /> );
+} );

projects/packages/jetpack-mu-wpcom/webpack.config.js

@@ -62,6 +62,8 @@ module.exports = async () => {
 				'wpcom-replace-site-visibility':
 					'./src/features/replace-site-visibility/replace-site-visibility.tsx',
 				'wpcom-sidebar-notice': './src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js',
+				'wpcom-upsell-support-link-handler':
+					'./src/features/help-center/js/upsell-support-link-handler.js',
 				'adminbar-launch-button': './src/features/launch-button/index.js',
 			},
 			mode: jetpackWebpackConfig.mode,