From 02eb5e7758bd6429c65a135a55cfac803094a27a Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Tue, 23 Sep 2025 17:50:43 +0300
Subject: [PATCH 1/2] feat: helper text for 'visits' metric

---
 .../parts/connected/dashboard/index.js        | 60 +++++++++++++++++--
 inc/admin.php                                 |  4 ++
 2 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/assets/src/dashboard/parts/connected/dashboard/index.js b/assets/src/dashboard/parts/connected/dashboard/index.js
index 0a77d5545..56fec0328 100644
--- a/assets/src/dashboard/parts/connected/dashboard/index.js
+++ b/assets/src/dashboard/parts/connected/dashboard/index.js
@@ -8,11 +8,14 @@ import classNames from 'classnames';
  */
 import {
 	Button,
-	Icon
+	Icon,
+	Tooltip
 } from '@wordpress/components';
 
+import { sprintf } from '@wordpress/i18n';
+
 import { useSelect } from '@wordpress/data';
-import { warning } from '@wordpress/icons';
+import { warning, help } from '@wordpress/icons';
 
 import { clearCache } from '../../../utils/api';
 
@@ -30,6 +33,7 @@ import ProgressBar from '../../components/ProgressBar';
 import DashboardMetricBox from '../../components/DashboardMetricBox';
 
 import LastImages from './LastImages';
+import { useMemo } from 'react';
 
 const cardClasses = 'flex p-6 bg-light-blue border border-blue-300 rounded-md';
 
@@ -138,6 +142,17 @@ const Dashboard = () => {
 
 	const visitorsLimitPercent = ( ( userData.visitors / userData.visitors_limit ) * 100 ).toFixed( 0 );
 
+	const renewalDate = useMemo( () => {
+		const timestamp = userData.renews_on;
+
+		if ( ! timestamp ) {
+			return 'N/A';
+		}
+
+		const date = new Date( timestamp * 1000 );
+		return date.toLocaleDateString( undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+	}, [ userData.renews_on ]);
+
 	const formatMetric = ( type, value ) => {
 		let formattedValue = 0;
 		let unit = '';
@@ -202,11 +217,40 @@ const Dashboard = () => {
 							{ optimoleDashboardApp.strings.dashboard_title }
 						</div>
 						<div className="flex items-center gap-2">
-							<div className="text-gray-600 text-base">
+							<div className="text-gray-600 text-base flex items-center gap-1">
 								{ optimoleDashboardApp.strings.quota }
-								<span className="pl-2 text-gray-800 font-bold">
+								<span className="text-gray-800 font-bold">
 									{ userData.visitors_pretty } / { userData.visitors_limit_pretty }
 								</span>
+								<Tooltip
+									text={
+										<div style={{
+											padding: '10px',
+											maxWidth: '320px'
+										}}>
+											<div style={{ fontWeight: 'bold', marginBottom: '8px' }}>
+												{ optimoleDashboardApp.strings.tooltip_visits_title }
+											</div>
+											<div>
+												{
+													sprintf(
+														optimoleDashboardApp.strings.tooltip_visits_description,
+														renewalDate
+													)
+												}
+											</div>
+										</div>
+									}
+									placement="bottom"
+								>
+									<span className="inline-flex items-center cursor-help ml-1">
+										<Icon
+											icon={ help }
+											size={ 18 }
+											className="text-gray-400 hover:text-gray-600"
+										/>
+									</span>
+								</Tooltip>
 							</div>
 							<div className='md:w-20 grow md:grow-0'>
 								<ProgressBar
@@ -215,6 +259,14 @@ const Dashboard = () => {
 								/>
 							</div>
 							<span>{ visitorsLimitPercent }%</span>
+							<span className="text-gray-500 text-sm ml-2">
+								{
+									sprintf(
+										optimoleDashboardApp.strings.renew_date,
+										renewalDate
+									)
+								}
+							</span>
 						</div>
 					</div>
 				</div>
diff --git a/inc/admin.php b/inc/admin.php
index 609422983..27eceba11 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -1577,6 +1577,8 @@ private function get_dashboard_strings() {
 			'not_connected'                  => __( 'NOT CONNECTED', 'optimole-wp' ),
 			'usage'                          => __( 'Monthly Usage', 'optimole-wp' ),
 			'quota'                          => __( 'Monthly visits:', 'optimole-wp' ),
+			'tooltip_visits_title'           => __( 'What are visits?', 'optimole-wp' ),
+			'tooltip_visits_description'     => __( 'Each visitor to your site is counted as a unique daily user, regardless of their actions or return visits on the same day. Your visit count resets on %s.', 'optimole-wp' ),
 			'logged_in_as'                   => __( 'LOGGED IN AS', 'optimole-wp' ),
 			'private_cdn_url'                => __( 'IMAGES DOMAIN', 'optimole-wp' ),
 			'existing_user'                  => __( 'Existing user?', 'optimole-wp' ),
@@ -2143,6 +2145,8 @@ private function get_dashboard_strings() {
 				'<a class="flex justify-center items-center font-semibold" 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>'
 			),
+			// translators: %s is the date of the renewal.
+			'renew_date'                   => __( 'Renews %s', 'optimole-wp' ),
 		];
 	}
 

From 73ea28e3d2b3282957dcd0f4748a74d5d3423070 Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Tue, 23 Sep 2025 18:00:21 +0300
Subject: [PATCH 2/2] chore: phpcs

---
 assets/src/dashboard/parts/connected/dashboard/index.js | 7 ++-----
 inc/admin.php                                           | 1 +
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/assets/src/dashboard/parts/connected/dashboard/index.js b/assets/src/dashboard/parts/connected/dashboard/index.js
index 56fec0328..b0aa594f7 100644
--- a/assets/src/dashboard/parts/connected/dashboard/index.js
+++ b/assets/src/dashboard/parts/connected/dashboard/index.js
@@ -224,11 +224,8 @@ const Dashboard = () => {
 								</span>
 								<Tooltip
 									text={
-										<div style={{
-											padding: '10px',
-											maxWidth: '320px'
-										}}>
-											<div style={{ fontWeight: 'bold', marginBottom: '8px' }}>
+										<div className="p-2.5 max-w-[320px]">
+											<div className="font-bold mb-2">
 												{ optimoleDashboardApp.strings.tooltip_visits_title }
 											</div>
 											<div>
diff --git a/inc/admin.php b/inc/admin.php
index 27eceba11..ee9bc1fb5 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -1578,6 +1578,7 @@ private function get_dashboard_strings() {
 			'usage'                          => __( 'Monthly Usage', 'optimole-wp' ),
 			'quota'                          => __( 'Monthly visits:', 'optimole-wp' ),
 			'tooltip_visits_title'           => __( 'What are visits?', 'optimole-wp' ),
+			/* translators: 1 is the day when the visits reset, for example 1st of each month */
 			'tooltip_visits_description'     => __( 'Each visitor to your site is counted as a unique daily user, regardless of their actions or return visits on the same day. Your visit count resets on %s.', 'optimole-wp' ),
 			'logged_in_as'                   => __( 'LOGGED IN AS', 'optimole-wp' ),
 			'private_cdn_url'                => __( 'IMAGES DOMAIN', 'optimole-wp' ),