Update local backups visibility

ts/components/Preferences.stories.tsx

@@ -858,6 +858,16 @@ BackupsFree.args = {
     mediaIncludedInBackupDurationDays: 30,
   },
 };
+export const BackupsFreeNoLocal = Template.bind({});
+BackupsFreeNoLocal.args = {
+  page: SettingsPage.Backups,
+  backupFeatureEnabled: true,
+  backupLocalBackupsEnabled: false,
+  backupSubscriptionStatus: {
+    status: 'free',
+    mediaIncludedInBackupDurationDays: 30,
+  },
+};
 
 export const BackupsOff = Template.bind({});
 BackupsOff.args = {
@@ -873,6 +883,13 @@ BackupsLocalBackups.args = {
   backupLocalBackupsEnabled: true,
 };
 
+export const BackupsRemoteEnabledLocalDisabled = Template.bind({});
+BackupsRemoteEnabledLocalDisabled.args = {
+  page: SettingsPage.Backups,
+  backupFeatureEnabled: true,
+  backupLocalBackupsEnabled: false,
+};
+
 export const BackupsSubscriptionNotFound = Template.bind({});
 BackupsSubscriptionNotFound.args = {
   page: SettingsPage.Backups,

ts/components/Preferences.tsx

@@ -2103,6 +2103,8 @@ export function Preferences({
         resumeBackupMediaDownload={resumeBackupMediaDownload}
         cloudBackupStatus={cloudBackupStatus}
         i18n={i18n}
+        isLocalBackupsEnabled={backupLocalBackupsEnabled}
+        isRemoteBackupsEnabled={backupFeatureEnabled}
         locale={resolvedLocale}
         localBackupFolder={localBackupFolder}
         onBackupKeyViewedChange={onBackupKeyViewedChange}

ts/components/PreferencesBackups.tsx

@@ -34,12 +34,28 @@ import { BackupMediaDownloadProgressSettings } from './BackupMediaDownloadProgre
 export const SIGNAL_BACKUPS_LEARN_MORE_URL =
   'https://support.signal.org/hc/articles/360007059752-Backup-and-Restore-Messages';
 
+const LOCAL_BACKUPS_PAGES = new Set([
+  SettingsPage.LocalBackups,
+  SettingsPage.LocalBackupsKeyReference,
+  SettingsPage.LocalBackupsSetupFolder,
+  SettingsPage.LocalBackupsSetupKey,
+]);
+const REMOTE_BACKUPS_PAGES = new Set([SettingsPage.BackupsDetails]);
+
+function isLocalBackupsPage(page: SettingsPage) {
+  return LOCAL_BACKUPS_PAGES.has(page);
+}
+function isRemoteBackupsPage(page: SettingsPage) {
+  return REMOTE_BACKUPS_PAGES.has(page);
+}
 export function PreferencesBackups({
   accountEntropyPool,
   backupKeyViewed,
   backupSubscriptionStatus,
   cloudBackupStatus,
   i18n,
+  isLocalBackupsEnabled,
+  isRemoteBackupsEnabled,
   locale,
   localBackupFolder,
   onBackupKeyViewedChange,
@@ -61,6 +77,8 @@ export function PreferencesBackups({
   cloudBackupStatus?: BackupStatusType;
   localBackupFolder: string | undefined;
   i18n: LocalizerType;
+  isLocalBackupsEnabled: boolean;
+  isRemoteBackupsEnabled: boolean;
   locale: string;
   onBackupKeyViewedChange: (keyViewed: boolean) => void;
   page: PreferencesBackupPage;
@@ -90,6 +108,16 @@ export function PreferencesBackups({
     }
   }, [page, refreshBackupSubscriptionStatus, refreshCloudBackupStatus]);
 
+  if (!isRemoteBackupsEnabled && isRemoteBackupsPage(page)) {
+    setPage(SettingsPage.Backups);
+    return null;
+  }
+
+  if (!isLocalBackupsEnabled && isLocalBackupsPage(page)) {
+    setPage(SettingsPage.Backups);
+    return null;
+  }
+
   if (page === SettingsPage.BackupsDetails) {
     if (backupSubscriptionStatus.status === 'off') {
       setPage(SettingsPage.Backups);
@@ -109,12 +137,7 @@ export function PreferencesBackups({
     );
   }
 
-  if (
-    page === SettingsPage.LocalBackups ||
-    page === SettingsPage.LocalBackupsKeyReference ||
-    page === SettingsPage.LocalBackupsSetupFolder ||
-    page === SettingsPage.LocalBackupsSetupKey
-  ) {
+  if (isLocalBackupsPage(page)) {
     return (
       <PreferencesLocalBackups
         accountEntropyPool={accountEntropyPool}
@@ -139,14 +162,9 @@ export function PreferencesBackups({
 
   const isLocalBackupsSetup = localBackupFolder && backupKeyViewed;
 
+  function renderRemoteBackups() {
     return (
       <>
-      <div className="Preferences__padding">
-        <div className="Preferences__description Preferences__description--medium">
-          {i18n('icu:Preferences--backup-section-description')}
-        </div>
-      </div>
-
         {backupSubscriptionStatus.status === 'off' ? (
           <SettingsRow className="Preferences--BackupsRow">
             <Control
@@ -202,7 +220,13 @@ export function PreferencesBackups({
             </FlowingControl>
           </SettingsRow>
         )}
+      </>
+    );
+  }
 
+  function renderLocalBackups() {
+    return (
+      <>
         <SettingsRow
           className="Preferences--BackupsRow"
           title={i18n('icu:Preferences__backup-other-ways')}
@@ -271,6 +295,20 @@ export function PreferencesBackups({
         )}
       </>
     );
+  }
+
+  return (
+    <>
+      <div className="Preferences__padding">
+        <div className="Preferences__description Preferences__description--medium">
+          {i18n('icu:Preferences--backup-section-description')}
+        </div>
+      </div>
+
+      {isRemoteBackupsEnabled ? renderRemoteBackups() : null}
+      {isLocalBackupsEnabled ? renderLocalBackups() : null}
+    </>
+  );
 }
 
 function getSubscriptionDetails({