diff --git a/client/components/jetpack/backup-schedule-setting/hooks.ts b/client/components/jetpack/backup-schedule-setting/hooks.ts index b05fd6194434fc..c02e58894d27fb 100644 --- a/client/components/jetpack/backup-schedule-setting/hooks.ts +++ b/client/components/jetpack/backup-schedule-setting/hooks.ts @@ -7,7 +7,7 @@ import getSiteTimezoneValue from 'calypso/state/selectors/get-site-timezone-valu import { getSelectedSiteId } from 'calypso/state/ui/selectors'; import { convertHourToRange } from './utils'; -const useNextBackupSchedule = () => { +export const useNextBackupSchedule = () => { const moment = useLocalizedMoment(); const siteId = useSelector( getSelectedSiteId ) as number; const timezone = useSelector( ( state ) => getSiteTimezoneValue( state, siteId ) ); @@ -60,5 +60,3 @@ const useNextBackupSchedule = () => { timeRange: timeRange, }; }; - -export default useNextBackupSchedule; diff --git a/client/components/jetpack/backup-schedule-setting/index.tsx b/client/components/jetpack/backup-schedule-setting/index.tsx index 13a5a0b8ff6dfa..0ed226292728b4 100644 --- a/client/components/jetpack/backup-schedule-setting/index.tsx +++ b/client/components/jetpack/backup-schedule-setting/index.tsx @@ -82,12 +82,21 @@ const BackupScheduleSetting: FunctionComponent = () => { const hour = data?.scheduledHour || 0; const range = convertHourToRange( moment, hour, true ); - if ( ! data || ! data.scheduledBy ) { - return `${ translate( 'Default time' ) }. UTC: ${ range }`; - } - return `${ translate( 'Time set by %(scheduledBy)s', { - args: { scheduledBy: data.scheduledBy }, - } ) }. UTC: ${ range }`; + const scheduledBy = + ! data || ! data.scheduledBy + ? translate( 'Currently using default time.' ) + : translate( 'Time set by %(scheduledBy)s.', { + args: { scheduledBy: data.scheduledBy }, + } ); + + const utcInfo = translate( 'UTC (%(timeRange)s) is used as the base timezone.', { + args: { + timeRange: range, + }, + comment: '%(timeRange)s is a time range, such as 10:00-10:59.', + } ); + + return `${ scheduledBy } ${ utcInfo }`; }; return ( diff --git a/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx b/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx index 84601c285bf49c..efb89c4f043a89 100644 --- a/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx +++ b/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx @@ -1,6 +1,8 @@ import { isEnabled } from '@automattic/calypso-config'; +import { LoadingPlaceholder } from '@automattic/components'; import { useTranslate } from 'i18n-calypso'; import { useSelector } from 'react-redux'; +import { useNextBackupSchedule } from 'calypso/components/jetpack/backup-schedule-setting/hooks'; import { useLocalizedMoment } from 'calypso/components/localized-moment'; import { INDEX_FORMAT } from 'calypso/lib/jetpack/backup-utils'; import { applySiteOffset } from 'calypso/lib/site/timezone'; @@ -35,17 +37,27 @@ const BackupScheduled = ( { lastBackupDate } ) => { const lastBackupTime = lastBackupDate.format( 'LT' ); - // Calculates the remaining hours for the next backup + 3 hours of safety margin - const DAY_HOURS = 24; - const hoursForNextBackup = DAY_HOURS - today.diff( lastBackupDate, 'hours' ) + 3; + const { hasLoaded, date: nextBackupDate } = useNextBackupSchedule(); - const nextBackupHoursText = - hoursForNextBackup <= 1 - ? translate( 'In the next hour' ) - : translate( 'In the next %d hour', 'In the next %d hours', { - args: [ hoursForNextBackup ], - count: hoursForNextBackup, - } ); + let nextBackupHoursText = null; + + if ( hasLoaded && nextBackupDate ) { + // Calculate the time difference for hours and minutes + const hoursForNextBackup = nextBackupDate.diff( today, 'hours' ); + const minutesForNextBackup = nextBackupDate.diff( today, 'minutes' ) % 60; + + // Round up to the next hour if there are remaining minutes + const totalHoursForNextBackup = + minutesForNextBackup > 0 ? hoursForNextBackup + 1 : hoursForNextBackup; + + nextBackupHoursText = + totalHoursForNextBackup <= 1 + ? translate( 'In the next hour' ) + : translate( 'In the next %d hour', 'In the next %d hours', { + args: [ totalHoursForNextBackup ], + count: totalHoursForNextBackup, + } ); + } return ( <> @@ -55,7 +67,11 @@ const BackupScheduled = ( { lastBackupDate } ) => {
{ translate( 'Backup Scheduled' ) }:
-
{ nextBackupHoursText }
+ { hasLoaded && nextBackupHoursText ? ( +
{ nextBackupHoursText }
+ ) : ( + + ) }
{ translate( 'Last daily backup: {{link}}%(lastBackupDay)s %(lastBackupTime)s{{/link}}', { diff --git a/client/components/jetpack/daily-backup-status/status-card/parts/next-scheduled-backup.tsx b/client/components/jetpack/daily-backup-status/status-card/parts/next-scheduled-backup.tsx index 43b062c1e8aaf9..fea21a707d3844 100644 --- a/client/components/jetpack/daily-backup-status/status-card/parts/next-scheduled-backup.tsx +++ b/client/components/jetpack/daily-backup-status/status-card/parts/next-scheduled-backup.tsx @@ -1,7 +1,7 @@ import { LoadingPlaceholder } from '@automattic/components'; import { useTranslate } from 'i18n-calypso'; import { FunctionComponent } from 'react'; -import useNextBackupSchedule from 'calypso/components/jetpack/backup-schedule-setting/hooks'; +import { useNextBackupSchedule } from 'calypso/components/jetpack/backup-schedule-setting/hooks'; import { settingsPath } from 'calypso/lib/jetpack/paths'; import { useSelector } from 'calypso/state'; import { getSiteSlug } from 'calypso/state/sites/selectors';