diff --git a/assets/src/dashboard/parts/connected/dashboard/index.js b/assets/src/dashboard/parts/connected/dashboard/index.js index 0a77d5545..b0aa594f7 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,37 @@ const Dashboard = () => { { optimoleDashboardApp.strings.dashboard_title }
-
+
{ optimoleDashboardApp.strings.quota } - + { userData.visitors_pretty } / { userData.visitors_limit_pretty } + +
+ { optimoleDashboardApp.strings.tooltip_visits_title } +
+
+ { + sprintf( + optimoleDashboardApp.strings.tooltip_visits_description, + renewalDate + ) + } +
+
+ } + placement="bottom" + > + + + +
{ />
{ visitorsLimitPercent }% + + { + sprintf( + optimoleDashboardApp.strings.renew_date, + renewalDate + ) + } +
diff --git a/inc/admin.php b/inc/admin.php index 609422983..ee9bc1fb5 100755 --- a/inc/admin.php +++ b/inc/admin.php @@ -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' ), @@ -2143,6 +2146,8 @@ private function get_dashboard_strings() { ' ', '' ), + // translators: %s is the date of the renewal. + 'renew_date' => __( 'Renews %s', 'optimole-wp' ), ]; }