Migrations out of sync modal

packages/desktop-client/src/components/Modals.tsx

@@ -51,6 +51,7 @@ import { ImportYNAB5Modal } from './modals/manager/ImportYNAB5Modal';
 import { ManageRulesModal } from './modals/ManageRulesModal';
 import { MergeUnusedPayeesModal } from './modals/MergeUnusedPayeesModal';
 import { NotesModal } from './modals/NotesModal';
+import { OutOfSyncMigrationsModal } from './modals/OutOfSyncMigrationsModal';
 import { PayeeAutocompleteModal } from './modals/PayeeAutocompleteModal';
 import { ScheduledTransactionMenuModal } from './modals/ScheduledTransactionMenuModal';
 import { SelectLinkedAccountsModal } from './modals/SelectLinkedAccountsModal';
@@ -591,15 +592,8 @@ export function Modals() {
           return <ImportYNAB5Modal key={name} />;
         case 'import-actual':
           return <ImportActualModal key={name} />;
-        case 'manager-load-backup':
-          return (
-            <LoadBackupModal
-              key={name}
-              budgetId={options.budgetId}
-              backupDisabled={true}
-              watchUpdates={false}
-            />
-          );
+        case 'out-of-sync-migrations':
+          return <OutOfSyncMigrationsModal key={name} />;
 
         default:
           throw new Error('Unknown modal');

packages/desktop-client/src/components/modals/OutOfSyncMigrationsModal.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+
+import { closeBudget } from 'loot-core/client/actions';
+
+import { Button } from '../common/Button2';
+import { Link } from '../common/Link';
+import { Modal, ModalHeader, ModalTitle } from '../common/Modal';
+import { Paragraph } from '../common/Paragraph';
+import { Text } from '../common/Text';
+import { View } from '../common/View';
+
+export function OutOfSyncMigrationsModal() {
+  const dispatch = useDispatch();
+
+  const { t } = useTranslation();
+
+  const closeBudgetAndModal = (close: () => void) => {
+    dispatch(closeBudget());
+    close();
+  };
+
+  return (
+    <Modal name="out-of-sync-migrations">
+      {({ state: { close } }) => (
+        <>
+          <ModalHeader
+            title={<ModalTitle title={t('Please update Actual!')} />}
+          />
+          <View
+            style={{
+              padding: 15,
+              gap: 15,
+              paddingTop: 0,
+              paddingBottom: 25,
+              maxWidth: 550,
+              lineHeight: '1.5em',
+            }}
+          >
+            <Text>
+              <Paragraph style={{ fontSize: 16 }}>
+                <Trans>
+                  It looks like you&apos;re using an outdated version of the
+                  Actual client. Your budget data has been updated by another
+                  client, but this client is still on the old verison. For the
+                  best experience, please update Actual to the latest version.
+                </Trans>
+              </Paragraph>
+            </Text>
+
+            <Paragraph
+              style={{
+                fontSize: 16,
+              }}
+            >
+              <Trans>
+                If you can&apos;t update Actual at this time you can find the
+                latest release at{' '}
+                <Link variant="external" to="https://app.actualbudget.org">
+                  app.actualbudget.org
+                </Link>
+                . You can use it until your client is updated.
+              </Trans>
+            </Paragraph>
+
+            <View
+              style={{
+                display: 'flex',
+                gap: '1rem',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexDirection: 'row',
+              }}
+            >
+              <Button
+                variant="primary"
+                style={{
+                  padding: '10px 30px',
+                }}
+                onPress={() => closeBudgetAndModal(close)}
+              >
+                <Trans>Close Budget</Trans>
+              </Button>
+            </View>
+          </View>
+        </>
+      )}
+    </Modal>
+  );
+}

packages/loot-core/src/client/actions/budgets.ts

@@ -57,7 +57,9 @@ export function loadBudget(id: string, options = {}) {
 
     if (error) {
       const message = getSyncError(error, id);
-      if (error === 'out-of-sync-migrations' || error === 'out-of-sync-data') {
+      if (error === 'out-of-sync-migrations') {
+        dispatch(pushModal('out-of-sync-migrations'));
+      } else if (error === 'out-of-sync-data') {
         // confirm is not available on iOS
         if (typeof window.confirm !== 'undefined') {
           const showBackups = window.confirm(

packages/loot-core/src/client/state-types/modals.d.ts

@@ -86,6 +86,8 @@ type FinanceModals = {
 
   'import-actual': null;
 
+  'out-of-sync-migrations': null;
+
   'files-settings': null;
 
   'confirm-change-document-dir': {

upcoming-release-notes/3600.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [MikesGlitch]
+---
+
+Add a guidance modal for when migrations are out of sync