Merge branch 'development' into feat/clear-cache-on-update

Author: selul

assets/js/report_script.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/DashboardMetricBox.js

@@ -4,7 +4,7 @@ import { close } from '@wordpress/icons';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button, Icon, Modal as CoreModal } from '@wordpress/components';
 
-export default function Modal({	icon, labels = {}, onRequestClose = () => {}, onConfirm = () => {}, variant = 'default' }) {
+export default function Modal({	icon, labels = {}, onRequestClose = () => {}, onConfirm = () => {}, variant = 'default', onSecondaryAction = () => {} }) {
 
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 
@@ -53,10 +53,20 @@ export default function Modal({	icon, labels = {}, onRequestClose = () => {}, on
 					className="text-center mx-0 my-4 text-gray-700"
 					dangerouslySetInnerHTML={ { __html: labels.description } }
 				/>
-
-				<Button variant="primary" className={ actionButtonClasses } onClick={ onConfirm }>
-					{ labels.action }
-				</Button>
+				<div class="flex gap-4">
+					<Button variant="primary" className={ actionButtonClasses } onClick={ onConfirm }>
+						{ labels.action }
+					</Button>
+					{ labels.secondaryAction && (
+						<Button
+							variant="default"
+							className="optml__button flex justify-center rounded font-bold min-h-40"
+							onClick={ onSecondaryAction }
+						>
+							{ labels.secondaryAction }
+						</Button>
+					) }
+				</div>
 			</div>
 		</CoreModal>
 	);

assets/src/dashboard/parts/components/Modal.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/components/ProgressBar.js

@@ -16,7 +16,7 @@ export default function RadioBoxes({ options, value, onChange, label, disabled =
 			onChange={handleClick}
 		>
 
-			{label && <legend className="uppercase font-semibold text-s text-light-black mb-6">{label}</legend>}
+			{label && <legend className="uppercase font-semibold text-s text-light-black mb-6 inline-block">{label}</legend>}
 
 			{options.map( ( option, index ) => {
 				const { title, value: buttonValue, description } = option;

assets/src/dashboard/parts/components/RadioBoxes.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;