chore: merge development into head

Author: abaicus

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

@@ -0,0 +1,33 @@
+import { Icon } from '@wordpress/components';
+
+import classnames from 'classnames';
+
+export default function DashboardMetricBox({ value, label, description, icon, compact = false }) {
+	const wrapClasses = classnames(
+		'flex bg-light-blue border border-blue-300 rounded-md basis-1/4 flex-col items-start',
+		{
+			'p-4': compact,
+			'p-6': ! compact
+		}
+	);
+
+	return (
+		<div className={wrapClasses}>
+			<Icon icon={ icon } />
+
+			<div className="flex w-full flex-col">
+				<div className="not-italic font-bold text-xl py-2 text-gray-800">
+					{ value }
+				</div>
+
+				<div className="not-italic font-normal text-sm text-gray-800">
+					{ label }
+				</div>
+
+				<div className="font-normal text-xs text-gray-600">
+					{ description }
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -7,6 +7,7 @@ const ProgressBar = ({
 	value,
 	max = 100,
 	className,
+	colorOverage = false,
 	...props
 }) => {
 	const progress = Math.round( ( value / max ) * 100 );
@@ -17,6 +18,15 @@ const ProgressBar = ({
 		className
 	);
 
+	const progressClasses = classnames(
+		'absolute left-0 h-full',
+		{
+			'bg-info': colorOverage ? 70 > progress : true,
+			'bg-red-500': colorOverage && 100 < progress,
+			'bg-amber-500': colorOverage && 70 < progress && 100 > progress
+		}
+	);
+
 	return (
 		<div
 			className={ wrapClasses }
@@ -26,7 +36,7 @@ const ProgressBar = ({
 			aria-valuenow={ value }
 			{ ...props }
 		>
-			<div className="absolute left-0 h-full bg-info" style={{ width: `${progress}%` }}></div>
+			<div className={ progressClasses } style={{ width: `${progress}%` }}></div>
 
 		</div>
 	);

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

@@ -0,0 +1,70 @@
+/**
+ * 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
+			}
+		];
+	});
+
+	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 />
 			) }

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

@@ -135,7 +135,7 @@ const LastImages = () => {
 	};
 
 	return (
-		<div className="hidden lg:block pt-5 border-grayish-blue border-0 border-t-2 border-solid">
+		<div className="hidden lg:block pt-5">
 			<h3 className="text-base m-0">{ optimoleDashboardApp.strings.latest_images.last } { optimoleDashboardApp.strings.latest_images.optimized_images }</h3>
 
 			{ ( isInitialLoading && ! isLoaded ) && (