Merge pull request #898 from Codeinwp/feat/opml-service/1347

Add optimizaiton tips in sidebar

Author: abaicus

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

@@ -0,0 +1,69 @@
+/**
+ * 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();
+		return [
+			{
+				active: 'enabled' === siteSettings?.image_replacer,
+				label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
+				description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
+			},
+			{
+				active: 'enabled' === siteSettings?.lazyload,
+				label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
+				description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
+			},
+			{
+				active: 'disabled' === siteSettings?.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>
+				{ statuses.map( ( status, index ) => {
+					let statusClass = status.active ? 'success' : 'danger';
+					return (
+						<li
+							key={ index }
+							className="flex items-start gap-2"
+						>
+							{ status.active ? (
+								<Icon icon={check} className="fill-success bg-success/20 rounded-full" size={20} />
+							) : (
+								<Icon icon={closeSmall} className="fill-danger bg-danger/20 rounded-full" size={20} />
+							) }
+
+							<div>
+								<span className='text-gray-700 font-normal font-semibold'>
+									{ status.label }
+								</span>
+								<p className="m-0">{ status.description }</p>
+							</div>
+						</li>
+					);
+				}) }
+			</ul>
+			<p
+				className="m-0 mt-3"
+				dangerouslySetInnerHTML={ {
+					__html: optimoleDashboardApp.strings.optimization_tips
+				} }
+			/>
+		</div>
+	);
+};
+
+export default OptimizationStatus;

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

@@ -12,6 +12,8 @@ import { useSelect } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 
 import SPCRecommendation from './SPCRecommendation';
+import OptimizationStatus from './OptimizationStatus';
+
 const reasons = [
 	optimoleDashboardApp.strings.upgrade.reason_1,
 	optimoleDashboardApp.strings.upgrade.reason_2,
@@ -125,6 +127,8 @@ const Sidebar = () => {
 				</Button>
 			) }
 
+			<OptimizationStatus />
+
 			{ showSPCRecommendation && (
 				<SPCRecommendation />
 			) }

inc/admin.php

@@ -2072,6 +2072,21 @@ private function get_dashboard_strings() {
 			],
 			'cron_error'                     => sprintf( /* translators: 1 is code to disable cron, 2 value of the constant */ __( 'It seems that you have the %1$s constant defined as %2$s. The offloading process uses cron events to offload the images in the background. Please remove the constant from your wp-config.php file in order for the offloading process to work.', 'optimole-wp' ), '<code>DISABLE_WP_CRON</code>', '<code>true</code>' ),
 			'cancel'                         => __( 'Cancel', 'optimole-wp' ),
+			'optimization_status'            => [
+				'title'           => __( 'Optimization Status', 'optimole-wp' ),
+				'statusTitle1'    => __( 'Image Handling', 'optimole-wp' ),
+				'statusSubTitle1' => __( 'All images are optimized automatically', 'optimole-wp' ),
+				'statusTitle2'    => __( 'Smart Lazy-Loading', 'optimole-wp' ),
+				'statusSubTitle2' => __( 'Images load as visitors scroll', 'optimole-wp' ),
+				'statusTitle3'    => __( 'Image Scalling', 'optimole-wp' ),
+				'statusSubTitle3' => __( 'All images are perfectly sized for devices', 'optimole-wp' ),
+			],
+			'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"> ',
+				'<span style="text-decoration:none; font-size:15px; margin-top:2px;" class="dashicons dashicons-external"></span></a>'
+			),
 		];
 	}