+ {i18n('icu:Preferences__button--manage')}
+
+ }
+ />
+
+ ) : (
+
+
+ {i18n('icu:Preferences--signal-backups')}{' '}
+
+
+
+
+ }
+ right={null}
+ />
+
+ )}
+
+
+
- {i18n('icu:Preferences--backup-size__label')}{' '}
-
- {formatFileSize(
- (cloudBackupStatus.mediaSize ?? 0) +
- (cloudBackupStatus.protoSize ?? 0)
- )}
+ {i18n('icu:Preferences__local-backups')}{' '}
+
+ {isLocalBackupsSetup
+ ? null
+ : i18n('icu:Preferences--local-backups-off-description')}
-
- ) : null}
+ }
+ right={
+
+ }
+ />
+
);
}
+
function getSubscriptionDetails({
i18n,
subscriptionStatus,
@@ -128,7 +231,8 @@ function getSubscriptionDetails({
return null;
}
-export function getBackupsSubscriptionSummary({
+
+export function renderBackupsSubscriptionDetails({
subscriptionStatus,
i18n,
locale,
@@ -212,3 +316,111 @@ export function getBackupsSubscriptionSummary({
throw missingCaseError(status);
}
}
+
+export function renderBackupsSubscriptionSummary({
+ subscriptionStatus,
+ i18n,
+ locale,
+}: {
+ locale: string;
+ subscriptionStatus?: BackupsSubscriptionType;
+ i18n: LocalizerType;
+}): JSX.Element | null {
+ if (!subscriptionStatus) {
+ return null;
+ }
+
+ const { status } = subscriptionStatus;
+ switch (status) {
+ case 'active':
+ case 'pending-cancellation':
+ return (
+
+
+
+ {i18n('icu:Preferences--backup-media-plan__description')}
+
+
+ {getSubscriptionDetails({ i18n, locale, subscriptionStatus })}
+
+
+
+ );
+ case 'free':
+ return (
+
+
+
+ {i18n('icu:Preferences--backup-messages-plan__description', {
+ mediaDayCount:
+ subscriptionStatus.mediaIncludedInBackupDurationDays,
+ })}
+
+
+ {i18n('icu:Preferences--backup-messages-plan__cost-description')}
+
+
+
+ );
+ case 'not-found':
+ case 'expired':
+ return (
+
+
+ {i18n('icu:Preferences--backup-plan-not-found__description')}
+
+
+ );
+ default:
+ throw missingCaseError(status);
+ }
+}
+
+function BackupsDetailsPage({
+ cloudBackupStatus,
+ backupSubscriptionStatus,
+ i18n,
+ locale,
+}: {
+ cloudBackupStatus?: BackupStatusType;
+ backupSubscriptionStatus?: BackupsSubscriptionType;
+ i18n: LocalizerType;
+ locale: string;
+}): JSX.Element {
+ return (
+ <>
+
+ {renderBackupsSubscriptionDetails({
+ subscriptionStatus: backupSubscriptionStatus,
+ i18n,
+ locale,
+ })}
+
+
+ {cloudBackupStatus ? (
+
+ {cloudBackupStatus.createdAt ? (
+
+
+
+ {/* TODO (DESKTOP-8509) */}
+ {i18n('icu:Preferences--backup-created-by-phone')}
+
+ {formatTimestamp(cloudBackupStatus.createdAt, {
+ dateStyle: 'medium',
+ timeStyle: 'short',
+ })}
+
+
+ ) : null}
+
+ );
+}
diff --git a/ts/components/PreferencesLocalBackups.tsx b/ts/components/PreferencesLocalBackups.tsx
new file mode 100644
index 0000000000..7adcb4168c
--- /dev/null
+++ b/ts/components/PreferencesLocalBackups.tsx
@@ -0,0 +1,400 @@
+// Copyright 2025 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { ChangeEvent } from 'react';
+import React, {
+ useCallback,
+ useEffect,
+ useMemo,
+ useState,
+ useRef,
+} from 'react';
+import { noop } from 'lodash';
+import type { LocalizerType } from '../types/I18N';
+import { SettingsControl as Control, SettingsRow } from './PreferencesUtil';
+import { Button, ButtonSize, ButtonVariant } from './Button';
+import { SIGNAL_BACKUPS_LEARN_MORE_URL } from './PreferencesBackups';
+import { I18n } from './I18n';
+import type { PreferencesBackupPage } from '../types/PreferencesBackupPage';
+import { Page } from './Preferences';
+import { ToastType } from '../types/Toast';
+import type { ShowToastAction } from '../state/ducks/toast';
+import { Modal } from './Modal';
+import { strictAssert } from '../util/assert';
+
+export function PreferencesLocalBackups({
+ accountEntropyPool,
+ backupKeyViewed,
+ i18n,
+ localBackupFolder,
+ onBackupKeyViewedChange,
+ page,
+ pickLocalBackupFolder,
+ setPage,
+ showToast,
+}: {
+ accountEntropyPool: string | undefined;
+ backupKeyViewed: boolean;
+ i18n: LocalizerType;
+ localBackupFolder: string | undefined;
+ onBackupKeyViewedChange: (keyViewed: boolean) => void;
+ page: PreferencesBackupPage;
+ pickLocalBackupFolder: () => Promise
;
+ setPage: (page: PreferencesBackupPage) => void;
+ showToast: ShowToastAction;
+}): JSX.Element {
+ if (!localBackupFolder) {
+ return (
+
+ );
+ }
+
+ const isReferencingBackupKey = page === Page.LocalBackupsKeyReference;
+ if (!backupKeyViewed || isReferencingBackupKey) {
+ strictAssert(accountEntropyPool, 'AEP is required for backup key viewer');
+
+ return (
+ {
+ if (backupKeyViewed) {
+ setPage(Page.LocalBackups);
+ } else {
+ onBackupKeyViewedChange(true);
+ }
+ }}
+ showToast={showToast}
+ />
+ );
+ }
+
+ const learnMoreLink = (parts: Array) => (
+
+ {parts}
+
+ );
+
+ return (
+ <>
+
+
+ {i18n('icu:Preferences__local-backups-section__description')}
+
+
+ {localBackupFolder}
+
+
+ }
+ right={
+
+ }
+ />
+
+ {i18n('icu:Preferences__backup-key')}
+
+ {i18n('icu:Preferences__backup-key-description')}
+
+
+ }
+ right={
+
+ }
+ />
+
+
+
+
+
+ );
+}
+
+function LocalBackupsSetupFolderPicker({
+ i18n,
+ pickLocalBackupFolder,
+}: {
+ i18n: LocalizerType;
+ pickLocalBackupFolder: () => Promise;
+}): JSX.Element {
+ return (
+
+
+
+
+
+ {i18n('icu:Preferences--local-backups-setup-folder-description')}
+
+
+
+
+ {step === 'caution' && (
+
+ {i18n(
+ 'icu:Preferences__local-backups-confirm-key-modal-continue'
+ )}
+
+ }
+ onClose={() => setStep('confirm')}
+ padded={false}
+ >
+
+
+
+ {i18n('icu:Preferences__local-backups-confirm-key-modal-body')}
+
+
+ )}
+
+
+
+
+
+ {description}
+
+
+
+
+
+ setIsBackupKeyConfirmed(isValid)}
+ isStepViewOrReference={isStepViewOrReference}
+ />
+
+ {isStepViewOrReference && (
+
+
+
+ )}
+
+
+
+ {footerLeft}
+
+
+ {footerRight}
+
+
+