BackupScheduleSetting: improve BackupScheduled view using useNextBackupSchedule hook

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;

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 (

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 } ) => {
 			</div>
 			<div className="status-card__title">
 				<div className="status-card__hide-desktop">{ translate( 'Backup Scheduled' ) }:</div>
-				<div>{ nextBackupHoursText }</div>
+				{ hasLoaded && nextBackupHoursText ? (
+					<div>{ nextBackupHoursText }</div>
+				) : (
+					<LoadingPlaceholder height="52px" />
+				) }
 			</div>
 			<div className="status-card__no-backup-last-backup">
 				{ translate( 'Last daily backup: {{link}}%(lastBackupDay)s %(lastBackupTime)s{{/link}}', {

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';