Add optimizaiton tips in sidebar

Author: girishpanchal30

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

@@ -3,6 +3,7 @@
  */
 import {
 	Button,
+	ExternalLink,
 	Icon,
 	TextControl
 } from '@wordpress/components';
@@ -18,6 +19,21 @@ const reasons = [
 	optimoleDashboardApp.strings.upgrade.reason_4
 ];
 
+const statuses = [
+	{
+		label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
+		description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
+	},
+	{
+		label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
+		description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
+	},
+	{
+		label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
+		description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
+	}
+];
+
 const Sidebar = () => {
 	const {
 		name,
@@ -121,6 +137,29 @@ const Sidebar = () => {
 					{ optimoleDashboardApp.strings.premium_support }
 				</Button>
 			) }
+
+			<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 ) => (
+						<li
+							key={ index }
+							className="flex items-start gap-2"
+						>
+							<Icon icon="yes-alt" className="text-light-black mt-1" />
+							<div className="text-light-black font-normal text-base">
+								<div className='font-semibold'>
+									{ status.label }
+								</div>
+								<div>
+									{ status.description }
+								</div>
+							</div>
+						</li>
+					) ) }
+				</ul>
+				<ExternalLink className='font-semibold text-sm' href='https://docs.optimole.com/article/2238-optimization-tips'>{ optimoleDashboardApp.strings.optimization_tips }</ExternalLink>
+			</div>
 		</div>
 	);
 };

inc/admin.php

@@ -1985,6 +1985,16 @@ 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 Active', 'optimole-wp' ),
+				'statusSubTitle1' => __( 'All images are optimized automatically', 'optimole-wp' ),
+				'statusTitle2'    => __( 'Smart Lazy-Loading Enabled', 'optimole-wp' ),
+				'statusSubTitle2' => __( 'Images load as visitors scroll', 'optimole-wp' ),
+				'statusTitle3'    => __( 'Image Scalling Active', 'optimole-wp' ),
+				'statusSubTitle3' => __( 'All images are perfectly sized for devices', 'optimole-wp' ),
+			],
+			'optimization_tips'              => __( 'View all optimization tips', 'optimole-wp' ),
 		];
 	}