Merge pull request #225 from newfold-labs/enhance/PRESS7-456-Enable-Plan-Based-Link-Prefetch-Behavior

Enhance/press7-456 enable plan based link prefetch behavior

Author: arunshenoy99

build/performance/performance.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '126efbd4b855c1411ec8');
+<?php return array('dependencies' => array('lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '09a6845d879779c5f31a');

build/performance/performance.min.js

@@ -2,6 +2,7 @@
 
 namespace NewfoldLabs\WP\Module\Performance\LinkPrefetch;
 
+use NewfoldLabs\WP\Module\Data\SiteCapabilities;
 use NewfoldLabs\WP\ModuleLoader\Container;
 
 /**
@@ -37,6 +38,20 @@ class LinkPrefetch {
 	 */
 	public static $option_name = 'nfd_link_prefetch_settings';
 
+	/**
+	 * Site capabilities for link prefetch Click.
+	 *
+	 * @var bool
+	 */
+	public static $has_link_prefetch_click = false;
+
+	/**
+	 * Site capabilities for link prefetch Hover.
+	 *
+	 * @var bool
+	 */
+	public static $has_link_prefetch_hover = false;
+
 	/**
 	 * Default settings.
 	 *
@@ -59,6 +74,17 @@ class LinkPrefetch {
 	 */
 	public function __construct( Container $container ) {
 		$this->container = $container;
+
+		$capabilities = ( new SiteCapabilities() )->all();
+
+		$this::$has_link_prefetch_click = array_key_exists( 'hasLinkPrefetchClick', $capabilities ) ? $capabilities['hasLinkPrefetchClick'] : null;
+		$this::$has_link_prefetch_hover = array_key_exists( 'hasLinkPrefetchHover', $capabilities ) ? $capabilities['hasLinkPrefetchHover'] : null;
+
+		if ( false === $this::$has_link_prefetch_click && false === $this::$has_link_prefetch_hover ) {
+			delete_option( self::$option_name );
+			return;
+		}
+
 		add_filter( 'newfold-runtime', array( $this, 'add_to_runtime' ) );
 		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
 		if ( ! is_admin() ) {
@@ -74,6 +100,9 @@ public function __construct( Container $container ) {
 	 * @return array Modified runtime object.
 	 */
 	public function add_to_runtime( $sdk ) {
+
+		self::$default_settings['behavior'] = $this::$has_link_prefetch_click && $this::$has_link_prefetch_hover ? 'mouseHover' : 'mouseDown';
+
 		$values = array(
 			'settings' => get_option( self::$option_name, self::$default_settings ),
 		);

includes/LinkPrefetch/LinkPrefetch.php

@@ -4,7 +4,6 @@ import '../../styles/styles.css';
 
 // Newfold
 import { Container, Root, Page, Title } from '@newfold/ui-component-library';
-import { NewfoldRuntime } from '@newfold/wp-module-runtime';
 
 // WordPress
 import { useEffect } from '@wordpress/element';
@@ -23,7 +22,12 @@ import getAppText from './getAppText';
 import FontOptimization from '../../sections/FontOptimization';
 
 const App = () => {
+	
 	const { title, description } = getAppText();
+	const capabilities = NewfoldRuntime.capabilities || {};
+
+	const hasLinkPrefetchClick = capabilities.hasOwnProperty('hasLinkPrefetchClick') ? capabilities.hasLinkPrefetchClick : true;
+	const hasLinkPrefetchHover = capabilities.hasOwnProperty('hasLinkPrefetchHover') ? capabilities.hasLinkPrefetchHover : true;
 
 	useEffect( () => {
 		const brand = NewfoldRuntime.sdk?.plugin?.brand;
@@ -69,12 +73,14 @@ const App = () => {
 					>
 						<JetpackBoost />
 					</Container.Block>
-					<Container.Block
-						separator
-						className="newfold-link-prefetch"
-					>
-						<LinkPrefetch />
-					</Container.Block>
+					{ ( false !== hasLinkPrefetchClick || false !== hasLinkPrefetchHover ) && (
+						<Container.Block
+							separator
+							className="newfold-link-prefetch"
+						>
+							<LinkPrefetch hasLinkPrefetchClick={hasLinkPrefetchClick} hasLinkPrefetchHover={hasLinkPrefetchHover}/>
+						</Container.Block>
+					) }
 					<Container.Block
 						separator
 						className="newfold-image-optimization"

src/components/App/index.js

@@ -26,7 +26,7 @@ const useUpdateEffect = ( effect, deps ) => {
 	}, deps );
 };
 
-const LinkPrefetch = () => {
+const LinkPrefetch = ( { hasLinkPrefetchClick, hasLinkPrefetchHover } ) => {
 	const {
 		linkPrefetchTitle,
 		linkPrefetchDescription,
@@ -149,14 +149,18 @@ const LinkPrefetch = () => {
 					}
 					className="nfd-mb-6"
 				>
-					<SelectField.Option
-						label={ linkPrefetchBehaviorMouseHoverLabel }
-						value="mouseHover"
-					/>
-					<SelectField.Option
-						label={ linkPrefetchBehaviorMouseDownLabel }
-						value="mouseDown"
-					/>
+					{ hasLinkPrefetchHover && (
+						<SelectField.Option
+							label={ linkPrefetchBehaviorMouseHoverLabel }
+							value="mouseHover"
+						/>
+					)}
+					{ hasLinkPrefetchClick && (
+						<SelectField.Option
+							label={ linkPrefetchBehaviorMouseDownLabel }
+							value="mouseDown"
+						/>
+					) }
 				</SelectField>
 			) }
 
@@ -208,14 +212,18 @@ const LinkPrefetch = () => {
 					}
 					className="nfd-mb-6"
 				>
-					<SelectField.Option
-						label={ linkPrefetchBehaviorMobileTouchstartLabel }
-						value="touchstart"
-					/>
-					<SelectField.Option
-						label={ linkPrefetchBehaviorMobileViewportLabel }
-						value="viewport"
-					/>
+					{ hasLinkPrefetchClick && (
+						<SelectField.Option
+							label={ linkPrefetchBehaviorMobileTouchstartLabel }
+							value="touchstart"
+						/>
+					)}
+					{ hasLinkPrefetchHover && (
+						<SelectField.Option
+							label={ linkPrefetchBehaviorMobileViewportLabel }
+							value="viewport"
+						/>
+					)}
 				</SelectField>
 			) }