Skip to content

feat: helper text for 'visits' metric #966

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 30, 2025
Merged

feat: helper text for 'visits' metric #966

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
02eb5e7
feat: helper text for 'visits' metric
RaduCristianPopescu Sep 23, 2025
73ea28e
chore: phpcs
RaduCristianPopescu Sep 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 53 additions & 4 deletions assets/src/dashboard/parts/connected/dashboard/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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';

Expand Down Expand Up @@ -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 ]);
Comment on lines +145 to +154
Copy link
Preview

Copilot AI Sep 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hardcoded 'N/A' fallback should be a translatable string since this text will be displayed to users and the codebase appears to use internationalization throughout.

Copilot uses AI. Check for mistakes.


const formatMetric = ( type, value ) => {
let formattedValue = 0;
let unit = '';
Expand Down Expand Up @@ -202,11 +217,37 @@ 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 className="p-2.5 max-w-[320px]">
<div className="font-bold mb-2">
{ 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
Expand All @@ -215,6 +256,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>
Expand Down
5 changes: 5 additions & 0 deletions inc/admin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1577,6 +1577,9 @@ 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' ),
/* 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' ),
'existing_user' => __( 'Existing user?', 'optimole-wp' ),
Expand Down Expand Up @@ -2143,6 +2146,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' ),
];
}

Expand Down
Loading