feat: disable other settings tabs when image handling is disabled & improve UI

assets/src/dashboard/parts/components/Tooltip.js

@@ -0,0 +1,41 @@
+import { useState } from '@wordpress/element';
+import classnames from 'classnames';
+
+export default function({ children, text }) {
+	const [ isVisible, setIsVisible ] = useState( false );
+
+	if ( ! text ) {
+		return children;
+	}
+	if ( ! children ) {
+		return null;
+	}
+
+	const classes = classnames(
+		'absolute text-white bg-gray-800 text-xs p-2 rounded shadow-lg z-10 transition-opacity duration-200 pointer-events-none',
+		{
+			'opacity-100': isVisible,
+			'opacity-0': ! isVisible
+		}
+	);
+
+	const tooltipStyles = {
+		left: '50%',
+		transform: 'translateX(-50%)',
+		bottom: '120%'
+	};
+
+	return (
+		<div
+			className="relative"
+			onMouseEnter={() => setIsVisible( true )}
+			onMouseLeave={() => setIsVisible( false )}
+		>
+			<div className={classes} style={tooltipStyles}>
+				{text.charAt( 0 ).toUpperCase() + text.slice( 1 ).toLowerCase()}
+				<div className="absolute -bottom-1 w-2 h-2 bg-gray-800" style={{ left: '50%', transform: 'translateX(-50%) rotate(45deg)' }}></div>
+			</div>
+			{children}
+		</div>
+	);
+}

assets/src/dashboard/parts/connected/OptimizationStatus.js

@@ -1,39 +1,30 @@
-/**
- * WordPress dependencies.
- */
 import { Icon } from '@wordpress/components';
 import { closeSmall, check } from '@wordpress/icons';
 
-import { useSelect } from '@wordpress/data';
-
-const OptimizationStatus = () => {
-	const statuses = useSelect( select => {
-		const { getSiteSettings } = select( 'optimole' );
-		const siteSettings = getSiteSettings();
-		const lazyloadEnabled = 'enabled' === siteSettings?.lazyload;
-		return [
-			{
-				active: 'enabled' === siteSettings?.image_replacer,
-				label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
-				description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
-			},
-			{
-				active: lazyloadEnabled,
-				label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
-				description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
-			},
-			{
-				active: lazyloadEnabled && 'disabled' === siteSettings?.scale,
-				label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
-				description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
-			}
-		];
-	});
+const OptimizationStatus = ({ settings }) => {
+	const lazyloadEnabled = 'enabled' === settings?.lazyload;
+	const statuses = [
+		{
+			active: 'enabled' === settings?.image_replacer,
+			label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
+			description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
+		},
+		{
+			active: lazyloadEnabled,
+			label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
+			description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
+		},
+		{
+			active: lazyloadEnabled && 'disabled' === settings?.scale,
+			label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
+			description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
+		}
+	];
 
 	return (
 		<div className="bg-white flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
-			<h3 className="text-base m-0">{ optimoleDashboardApp.strings.optimization_status.title }</h3>
-			<ul>
+			<h3 className="text-lg mt-0">{ optimoleDashboardApp.strings.optimization_status.title }</h3>
+			<ul className="grid gap-3 m-0">
 				{ statuses.map( ( status, index ) => {
 					let statusClass = status.active ? 'success' : 'danger';
 					return (
@@ -58,7 +49,7 @@ const OptimizationStatus = () => {
 				}) }
 			</ul>
 			<p
-				className="m-0 mt-3"
+				className="m-0 mt-5"
 				dangerouslySetInnerHTML={ {
 					__html: optimoleDashboardApp.strings.optimization_tips
 				} }

assets/src/dashboard/parts/connected/SPCRecommendation.js

@@ -100,7 +100,7 @@ const SPCRecommendation = () => {
 				<Icon icon={ close } className="fill-current" size={ 18 } />
 			</button>
 			<div className="p-8 flex flex-col gap-2">
-				<h3 className="text-gray-800 text-lg font-bold m-0">{ i18n.title }</h3>
+				<h3 className="text-lg mt-0">{ i18n.title }</h3>
 				<p className="text-gray-600 m-0">{ i18n.byline }</p>
 				<ul className="grid gap-2">
 					{ i18n.features.map( ( feature, index ) => (

assets/src/dashboard/parts/connected/Sidebar.js

@@ -13,6 +13,8 @@ import { addQueryArgs } from '@wordpress/url';
 
 import SPCRecommendation from './SPCRecommendation';
 import OptimizationStatus from './OptimizationStatus';
+import { globe, user } from '../../utils/icons';
+import Tooltip from '../components/Tooltip';
 
 const reasons = [
 	optimoleDashboardApp.strings.upgrade.reason_1,
@@ -21,7 +23,7 @@ const reasons = [
 	optimoleDashboardApp.strings.upgrade.reason_4
 ];
 
-const Sidebar = () => {
+const Sidebar = ({ settings }) => {
 	const {
 		name,
 		domain,
@@ -47,31 +49,23 @@ const Sidebar = () => {
 
 	return (
 		<div className="grid md:grid-cols-2 xl:flex xl:flex-col xl:mt-8 xl:mb-5 p-0 transition-all ease-in-out duration-700 gap-5 shrink-0 xl:w-[350px]">
-			<div className="bg-white gap-5 flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
-				<TextControl
-					label={ optimoleDashboardApp.strings.logged_in_as }
-					value={ name }
-					className="optml__placeholder"
-					disabled
-				/>
-
-				<TextControl
-					label={ optimoleDashboardApp.strings.private_cdn_url }
-					value={ domain }
-					className="optml__placeholder"
-					disabled
-				/>
+			<div className="bg-white gap-3 flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
 
-				<hr className="m-0 border-grayish-blue"/>
+				<div className="grid gap-4">
+					<PlaceholderInput icon={user} value={name} tooltipText={optimoleDashboardApp.strings.logged_in_as}/>
+					<PlaceholderInput icon={globe} value={domain} tooltipText={optimoleDashboardApp.strings.private_cdn_url}/>
+				</div>
 
-				<p className="font-semibold text-xs text-light-black m-0">{ optimoleDashboardApp.strings.looking_for_api_key }</p>
+				<hr className="m-0 border-t-grayish-blue"/>
 
-				<p
-					className="m-0 -mt-3"
-					dangerouslySetInnerHTML={ {
-						__html: optimoleDashboardApp.strings.optml_dashboard
-					} }
-				/>
+				<div className="border-t border-gray-300 block grid gap-2">
+					<p className="font-semibold text-xs text-light-black m-0">{ optimoleDashboardApp.strings.looking_for_api_key }</p>
+					<span
+						dangerouslySetInnerHTML={ {
+							__html: optimoleDashboardApp.strings.optml_dashboard
+						} }
+					/>
+				</div>
 			</div>
 
 			{ 'free' === plan ? (
@@ -127,7 +121,7 @@ const Sidebar = () => {
 				</Button>
 			) }
 
-			<OptimizationStatus />
+			<OptimizationStatus settings={settings} />
 
 			{ showSPCRecommendation && (
 				<SPCRecommendation />
@@ -137,3 +131,22 @@ const Sidebar = () => {
 };
 
 export default Sidebar;
+
+
+const PlaceholderInput = ({ icon = null, value, tooltipText = '' }) => {
+	return (
+		<Tooltip text={tooltipText}>
+			<div className="grid grid-cols-1 text-gray-700 hover:text-info transition-all ease-in-out duration-300">
+				<input
+					value={value}
+					type="text"
+					disabled
+					className="col-start-1 row-start-1 block w-full rounded-md !bg-light-blue py-1.5 !pl-9 pr-3 !text-gray-500 !m-0 text-sm !py-0.5 !border-0"
+				/>
+				<span className="pointer-events-none col-start-1 row-start-1 flex items-center ml-3 w-4 h-4 self-center">
+					{icon}
+				</span>
+			</div>
+		</Tooltip>
+	);
+};

assets/src/dashboard/parts/connected/index.js

@@ -143,7 +143,7 @@ const ConnectedLayout = ({
 					{ 'help' === tab && <Help /> }
 				</div>
 
-				<Sidebar/>
+				<Sidebar settings={settings}/>
 			</div>
 
 			<CSAT />

assets/src/dashboard/parts/connected/settings/Menu.js

@@ -93,13 +93,19 @@ const Menu = ({
 		<div className="basis-1/5">
 			<ul className="grid m-0 gap-1">
 				{menuItems.map( item => {
+					const disabled = 'enabled' !== settings?.image_replacer && 'general' !== item.value;
 					const isActive = tab === item.value || ( item.children && item.children.some( child => child.value === tab ) );
 
 
-					const buttonClasses = classnames({ '!text-info': isActive }, 'w-full bg-transparent border-0 flex items-center appearance-none not-italic font-semibold text-base text-purple-gray cursor-pointer hover:text-info py-2' );
+					const buttonClasses = classnames(
+						{ '!text-info': isActive },
+						{ 'opacity-50 pointer-events-none': disabled },
+						'w-full bg-transparent border-0 flex items-center appearance-none not-italic font-semibold text-base text-purple-gray cursor-pointer hover:text-info py-2'
+					);
 					return (
 						<li key={item.value} className='m-0'>
 							<button
+								disabled={disabled}
 								className={buttonClasses}
 								onClick={() => setTab( item.value )}
 							>

inc/admin.php

@@ -1987,7 +1987,7 @@ private function get_dashboard_strings() {
 			'optimization_tips'              => sprintf(
 			/* translators: 1 is the opening anchor tag, 2 is the closing anchor tag */
 				__( '%1$sView all optimization tips%2$s', 'optimole-wp' ),
-				'<a class="flex justify-center font-bold rounded hover:opacity-90 transition-opacity" href="https://docs.optimole.com/article/2238-optimization-tips" target="_blank"> ',
+				'<a class="flex justify-center items-center font-semibold" href="https://docs.optimole.com/article/2238-optimization-tips" target="_blank"> ',
 				'<span style="text-decoration:none; font-size:15px; margin-top:2px;" class="dashicons dashicons-external"></span></a>'
 			),
 		];