Add reset SimpleFIN credential button in settings to resolve a state …

…in which SimpleFIN is unable to sync

packages/desktop-client/src/components/settings/SimpleFINReset.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+
+import { useActions } from '../../hooks/useActions';
+import { useSimpleFinStatus } from '../../hooks/useSimpleFinStatus';
+import { ButtonWithLoading } from '../common/Button';
+import { Text } from '../common/Text';
+
+import { Setting } from './UI';
+
+export function SimpleFINResetCredential() {
+  const actions = useActions();
+  const [isSimpleFinSetupComplete, setIsSimpleFinSetupComplete] = useState<
+    boolean | null
+  >(null);
+  const [loadingSimpleFinAccounts, setLoadingSimpleFinAccounts] =
+    useState(false);
+
+  const onSimpleFinInit = () => {
+    setLoadingSimpleFinAccounts(true);
+    actions.pushModal('simplefin-init', {
+      onSuccess: () => {
+        setIsSimpleFinSetupComplete(true);
+      },
+    });
+    setLoadingSimpleFinAccounts(false);
+  };
+  const { configuredSimpleFin } = useSimpleFinStatus();
+  useEffect(() => {
+    setIsSimpleFinSetupComplete(configuredSimpleFin);
+  }, [configuredSimpleFin]);
+
+  return (
+    <Setting
+      primaryAction={
+        <ButtonWithLoading
+          loading={loadingSimpleFinAccounts}
+          disabled={!isSimpleFinSetupComplete}
+          onClick={onSimpleFinInit}
+        >
+          Reset SimpleFIN Credential
+        </ButtonWithLoading>
+      }
+    >
+      {isSimpleFinSetupComplete ? (
+        <Text>
+          <strong>Reset SimpleFIN Credential</strong> In some cases (like
+          importing from an existing database to a new instance), you may need
+          to generate a new SimpleFINsetup token to receive a valid access
+          token. If you are having trouble, generate a new setup token and enter
+          it here.
+        </Text>
+      ) : (
+        <Text>
+          <strong>Reset SimpleFIN Credential</strong> is only available when
+          SimpleFIN has been enabled and configured.
+        </Text>
+      )}
+    </Setting>
+  );
+}

packages/desktop-client/src/components/settings/index.tsx

@@ -6,6 +6,7 @@ import * as Platform from 'loot-core/src/client/platform';
 import { listen } from 'loot-core/src/platform/client/fetch';
 
 import { useActions } from '../../hooks/useActions';
+import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { useGlobalPref } from '../../hooks/useGlobalPref';
 import { useLatestVersion, useIsOutdated } from '../../hooks/useLatestVersion';
 import { useLocalPref } from '../../hooks/useLocalPref';
@@ -29,6 +30,7 @@ import { FixSplits } from './FixSplits';
 import { FormatSettings } from './Format';
 import { GlobalSettings } from './Global';
 import { ResetCache, ResetSync } from './Reset';
+import { SimpleFINResetCredential } from './SimpleFINReset';
 import { ThemeSettings } from './Themes';
 import { AdvancedToggle, Setting } from './UI';
 
@@ -125,6 +127,8 @@ export function Settings() {
 
   const { loadPrefs, closeBudget } = useActions();
 
+  const simpleFinSyncFeatureFlag = useFeatureFlag('simpleFinSync');
+
   useEffect(() => {
     const unlisten = listen('prefs-updated', () => {
       loadPrefs();
@@ -176,6 +180,7 @@ export function Settings() {
           <AdvancedAbout />
           <ResetCache />
           <ResetSync />
+          {simpleFinSyncFeatureFlag && <SimpleFINResetCredential />}
           <FixSplits />
           <ExperimentalFeatures />
         </AdvancedToggle>

upcoming-release-notes/2739.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [mattpetters]
+---
+
+Add reset SimpleFIN credential button to resolve a state in which SimpleFIN is unable to sync