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 }