feat: add offload metric and pro redirect feature

Author: RaduCristianPopescu

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

@@ -11,8 +11,8 @@ import {
 	Icon
 } from '@wordpress/components';
 
-import { useSelect } from '@wordpress/data';
-import { warning } from '@wordpress/icons';
+import { useSelect, select } from '@wordpress/data';
+import { warning, external } from '@wordpress/icons';
 
 import { clearCache } from '../../../utils/api';
 
@@ -37,22 +37,30 @@ const metrics = [
 	{
 		label: optimoleDashboardApp.strings.metrics.metricsTitle2,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle2,
-		value: 'saved_size'
+		value: 'saved_size',
+		hasButton: true,
+		buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
 	},
 	{
 		label: optimoleDashboardApp.strings.metrics.metricsTitle3,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle3,
-		value: 'compression_percentage'
+		value: 'compression_percentage',
+		hasButton: true,
+		buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
 	},
 	{
 		label: optimoleDashboardApp.strings.metrics.metricsTitle4,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle4,
-		value: 'traffic'
+		value: 'traffic',
+		hasButton: true,
+		buttonText: optimoleDashboardApp.strings.metrics.view_analytics
 	},
 	{
 		label: optimoleDashboardApp.strings.metrics.metricsTitle5,
 		description: optimoleDashboardApp.strings.metrics.metricsSubtitle5,
-		value: 'offloaded_images'
+		value: 'offloaded_images',
+		hasButton: true,
+		buttonText: optimoleDashboardApp.strings.metrics.manage_offloading
 	}
 ];
 
@@ -61,6 +69,9 @@ const settingsTab = {
 	advance: 2
 };
 
+const { getUserData } = select( 'optimole' );
+const user = getUserData();
+
 const navigate = ( tabId ) => {
 	const links = window.optimoleDashboardApp.submenu_links;
 	const settingsLink = links.find( link => '#settings' === link.hash );
@@ -202,6 +213,24 @@ const Dashboard = () => {
 		return { formattedValue, unit };
 	};
 
+	const getMetricButtonAction = ( metricValue ) => {
+		switch ( metricValue ) {
+		case 'saved_size':
+			return () => navigate( settingsTab.advance );
+		case 'compression_percentage':
+			return () => navigate( settingsTab.advance );
+		case 'traffic':
+			return () => {
+				const newWindow = window.open( 'https://dashboard.optimole.com/metrics', '_blank' );
+				if ( newWindow ) {
+					newWindow.focus();
+				}
+			};
+		case 'offloaded_images':
+			return () => navigate( settingsTab.offload_image );
+		}
+	};
+
 	return (
 		<div className="grid gap-5">
 			<div className="bg-white p-8 border-0 rounded-lg shadow-md">
@@ -270,9 +299,25 @@ const Dashboard = () => {
 										<span className='text-sm text-gray-500'>{unit}</span>
 									</div>
 
-									<div className="font-normal text-gray-600">
+									<div className="font-normal text-gray-600 mb-3">
 										{ metric.description }
 									</div>
+
+
+									{ 'free' !== user.plan && metric.hasButton && (
+										<Button
+											variant="secondary"
+											size="small"
+											className="mt-auto font-semibold rounded-md w-fit px-3 flex items-center gap-1"
+											onClick={ getMetricButtonAction( metric.value ) }
+										>
+											{ metric.buttonText }
+											{ ( 'traffic' === metric.value ) && (
+												<Icon icon={ external } size={ 16 } />
+											) }
+										</Button>
+									) }
+
 								</div>
 							</div>
 						);

inc/admin.php

@@ -1697,9 +1697,12 @@ private function get_dashboard_strings() {
 				'metricsTitle4'    => __( 'CDN Traffic', 'optimole-wp' ),
 				'metricsSubtitle4' => __( 'This month', 'optimole-wp' ),
 				'metricsTitle5'    => __( 'Offloaded images', 'optimole-wp' ),
-				'metricsSubtitle5' => __( 'Offloaded to cloud', 'optimole-wp'),
-				'image'			   => __( 'image', 'optimole-wp' ),
-				'images'		   => __( 'images', 'optimole-wp' ),
+				'metricsSubtitle5' => __( 'Offloaded to cloud', 'optimole-wp' ),
+				'image'            => __( 'image', 'optimole-wp' ),
+				'images'           => __( 'images', 'optimole-wp' ),
+				'view_analytics'   => __( 'View Analytics', 'optimole-wp' ),
+				'adjust_compression' => __( 'Adjust Compression', 'optimole-wp' ),
+				'manage_offloading' => __( 'Manage image offloading', 'optimole-wp' ),
 			],
 			'quick_actions'                  => [
 				'speed_test_title'      => __( 'Test Your Site Speed', 'optimole-wp' ),