Updates to the account creation/linking flow (#1137)

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

@@ -141,6 +141,7 @@ export function Link({ style, children, ...nativeProps }: LinkProps) {
           font: 'inherit',
           ':hover': {
             textDecoration: 'underline',
+            boxShadow: 'none',
           },
         },
         styles.smallText,

packages/desktop-client/src/components/modals/CreateAccount.js

@@ -5,7 +5,6 @@ import { pushModal } from 'loot-core/src/client/actions/modals';
 
 import useNordigenStatus from '../../hooks/useNordigenStatus';
 import { authorizeBank } from '../../nordigen';
-import { colors } from '../../style';
 import { View, Text, Modal, P, Button, ButtonWithLoading } from '../common';
 
 export default function CreateAccount({ modalProps, syncServerStatus }) {
@@ -41,73 +40,83 @@ export default function CreateAccount({ modalProps, syncServerStatus }) {
   return (
     <Modal title="Add Account" {...modalProps}>
       {() => (
-        <View style={{ maxWidth: 500 }}>
-          <Text style={{ marginBottom: 10, lineHeight: '1.4em', fontSize: 15 }}>
-            <strong>Link your bank accounts</strong> to automatically download
-            transactions. We offer hundreds of banks to sync with, and Nordigen
-            will provide reliable, up-to-date information.
-          </Text>
-
-          <ButtonWithLoading
-            primary
-            disabled={syncServerStatus !== 'online'}
-            style={{
-              padding: '10px 0',
-              fontSize: 15,
-              fontWeight: 600,
-              marginTop: 10,
-            }}
-            onClick={onConnect}
-          >
-            {isNordigenSetupComplete
-              ? 'Link bank account'
-              : 'Set-up Nordigen for bank-sync'}
-          </ButtonWithLoading>
-          {isNordigenSetupComplete && (
-            <Button bare onClick={onNordigenInit}>
-              set new API secrets
+        <View style={{ maxWidth: 500, gap: 30 }}>
+          <View style={{ gap: 10 }}>
+            <Button
+              primary
+              style={{
+                padding: '10px 0',
+                fontSize: 15,
+                fontWeight: 600,
+              }}
+              onClick={onCreateLocalAccount}
+            >
+              Create local account
             </Button>
-          )}
-
-          {syncServerStatus !== 'online' && (
-            <P style={{ color: colors.r5, marginTop: 5 }}>
-              Nordigen integration is only available for budgets using
-              actual-server.{' '}
-              <a
-                href="https://actualbudget.org/docs/install/"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Learn more.
-              </a>
-            </P>
-          )}
-
-          <View
-            style={{
-              marginTop: 30,
-              marginBottom: 10,
-              lineHeight: '1.4em',
-              fontSize: 15,
-            }}
-          >
-            You can also create a local account if you want to track
-            transactions manually. You can add transactions manually or import
-            QIF/OFX/QFX files.
+            <View style={{ lineHeight: '1.4em', fontSize: 15 }}>
+              <Text>
+                <strong>Create a local account</strong> if you want to add
+                transactions manually. You can also{' '}
+                <a
+                  href="https://actualbudget.org/docs/transactions/importing"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  import QIF/OFX/QFX files into a local account
+                </a>
+                .
+              </Text>
+            </View>
+          </View>
+          <View style={{ gap: 10 }}>
+            {syncServerStatus === 'online' ? (
+              <>
+                <ButtonWithLoading
+                  disabled={syncServerStatus !== 'online'}
+                  style={{
+                    padding: '10px 0',
+                    fontSize: 15,
+                    fontWeight: 600,
+                    flex: 1,
+                  }}
+                  onClick={onConnect}
+                >
+                  {isNordigenSetupComplete
+                    ? 'Link bank account with Nordigen'
+                    : 'Set up Nordigen for bank sync'}
+                </ButtonWithLoading>
+                <Text style={{ lineHeight: '1.4em', fontSize: 15 }}>
+                  <strong>Link a bank account</strong> to automatically download
+                  transactions. Nordigen provides reliable, up-to-date
+                  information from hundreds of banks.
+                </Text>
+              </>
+            ) : (
+              <>
+                <Button
+                  disabled
+                  style={{
+                    padding: '10px 0',
+                    fontSize: 15,
+                    fontWeight: 600,
+                  }}
+                >
+                  Set up Nordigen for bank sync
+                </Button>
+                <P style={{ fontSize: 15 }}>
+                  Connect to an Actual server to set up{' '}
+                  <a
+                    href="https://actualbudget.org/docs/experimental/bank-sync"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    automatic syncing with Nordigen
+                  </a>
+                  .
+                </P>
+              </>
+            )}
           </View>
-
-          <Button
-            style={{
-              padding: '10px 0',
-              fontSize: 15,
-              fontWeight: 600,
-              marginTop: 10,
-              color: colors.n3,
-            }}
-            onClick={onCreateLocalAccount}
-          >
-            Create local account
-          </Button>
         </View>
       )}
     </Modal>

packages/desktop-client/src/components/modals/NordigenExternalMsg.js

@@ -6,10 +6,11 @@ import { sendCatch } from 'loot-core/src/platform/client/fetch';
 
 import useNordigenStatus from '../../hooks/useNordigenStatus';
 import AnimatedLoading from '../../icons/AnimatedLoading';
+import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
 import { colors } from '../../style';
 import { Error, Warning } from '../alerts';
 import Autocomplete from '../autocomplete/Autocomplete';
-import { View, Modal, Button, P, Link } from '../common';
+import { View, Modal, Button, P, Link, Menu, Tooltip } from '../common';
 import { FormField, FormLabel } from '../forms';
 
 import { COUNTRY_OPTIONS } from './countries';
@@ -77,6 +78,7 @@ export default function NordigenExternalMsg({
   let [country, setCountry] = useState();
   let [error, setError] = useState(null);
   let [isNordigenSetupComplete, setIsNordigenSetupComplete] = useState(null);
+  let [menuOpen, setMenuOpen] = useState(false);
   let data = useRef(null);
 
   const {
@@ -141,7 +143,14 @@ export default function NordigenExternalMsg({
         {isBankOptionError ? (
           <Error>
             Failed loading available banks: Nordigen access credentials might be
-            misconfigured. Please set them up again.
+            misconfigured. Please{' '}
+            <Link
+              onClick={onNordigenInit}
+              style={{ color: colors.b3, display: 'inline' }}
+            >
+              set them up
+            </Link>{' '}
+            again.
           </Error>
         ) : (
           country &&
@@ -189,18 +198,50 @@ export default function NordigenExternalMsg({
           before proceeding.
         </Warning>
 
-        <Button
-          primary
-          style={{
-            padding: '10px 0',
-            fontSize: 15,
-            fontWeight: 600,
-          }}
-          onClick={onJump}
-          disabled={!institutionId || !country}
-        >
-          Link bank in browser &rarr;
-        </Button>
+        <View style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}>
+          <Button
+            primary
+            style={{
+              padding: '10px 0',
+              fontSize: 15,
+              fontWeight: 600,
+              flexGrow: 1,
+            }}
+            onClick={onJump}
+            disabled={!institutionId || !country}
+          >
+            Link bank in browser &rarr;
+          </Button>
+          <Button bare onClick={() => setMenuOpen(true)} aria-label="Menu">
+            <DotsHorizontalTriple
+              width={15}
+              height={15}
+              style={{ color: 'inherit', transform: 'rotateZ(90deg)' }}
+            />
+            {menuOpen && (
+              <Tooltip
+                position="bottom-right"
+                width={200}
+                style={{ padding: 0 }}
+                onClose={() => setMenuOpen(false)}
+              >
+                <Menu
+                  onMenuSelect={item => {
+                    if (item === 'reconfigure') {
+                      onNordigenInit();
+                    }
+                  }}
+                  items={[
+                    {
+                      name: 'reconfigure',
+                      text: 'Set new API secrets',
+                    },
+                  ]}
+                />
+              </Tooltip>
+            )}
+          </Button>
+        </View>
       </View>
     );
   };

upcoming-release-notes/1137.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [j-f1]
+---
+
+Nordigen: Update design of the “create account” flow