🐛 fix misaligned gocardless credential popover

Closes #3854
actualbudget · Dec 8, 2024 · b970ff9 · b970ff9
1 parent e4b40fb
commit b970ff9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 38 deletions.
diff --git a/packages/desktop-client/src/components/modals/CreateAccountModal.tsx b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
@@ -1,7 +1,7 @@
-// @ts-strict-ignore
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import { DialogTrigger } from 'react-aria-components';
 
 import { pushModal } from 'loot-core/client/actions';
 import { send } from 'loot-core/src/platform/client/fetch';
@@ -30,13 +30,12 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
   const { t } = useTranslation();
   const syncServerStatus = useSyncServerStatus();
   const dispatch = useDispatch();
-  const [isGoCardlessSetupComplete, setIsGoCardlessSetupComplete] =
-    useState(null);
-  const [isSimpleFinSetupComplete, setIsSimpleFinSetupComplete] =
-    useState(null);
-  const [menuGoCardlessOpen, setGoCardlessMenuOpen] = useState<boolean>(false);
-  const triggerRef = useRef(null);
-  const [menuSimplefinOpen, setSimplefinMenuOpen] = useState<boolean>(false);
+  const [isGoCardlessSetupComplete, setIsGoCardlessSetupComplete] = useState<
+    boolean | null
+  >(null);
+  const [isSimpleFinSetupComplete, setIsSimpleFinSetupComplete] = useState<
+    boolean | null
+  >(null);
 
   const onConnectGoCardless = () => {
     if (!isGoCardlessSetupComplete) {
@@ -139,7 +138,6 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
         value: null,
       }).then(() => {
         setIsGoCardlessSetupComplete(false);
-        setGoCardlessMenuOpen(false);
       });
     });
   };
@@ -154,7 +152,6 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
         value: null,
       }).then(() => {
         setIsSimpleFinSetupComplete(false);
-        setSimplefinMenuOpen(false);
       });
     });
   };
@@ -248,25 +245,16 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
                         : t('Set up GoCardless for bank sync')}
                     </ButtonWithLoading>
                     {isGoCardlessSetupComplete && (
-                      <>
-                        <Button
-                          ref={triggerRef}
-                          variant="bare"
-                          onPress={() => setGoCardlessMenuOpen(true)}
-                          aria-label="GoCardless menu"
-                        >
+                      <DialogTrigger>
+                        <Button variant="bare" aria-label="GoCardless menu">
                           <SvgDotsHorizontalTriple
                             width={15}
                             height={15}
                             style={{ transform: 'rotateZ(90deg)' }}
                           />
                         </Button>
 
-                        <Popover
-                          triggerRef={triggerRef}
-                          isOpen={menuGoCardlessOpen}
-                          onOpenChange={() => setGoCardlessMenuOpen(false)}
-                        >
+                        <Popover>
                           <Menu
                             onMenuSelect={item => {
                               if (item === 'reconfigure') {
@@ -281,7 +269,7 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
                             ]}
                           />
                         </Popover>
-                      </>
+                      </DialogTrigger>
                     )}
                   </View>
                   <Text style={{ lineHeight: '1.4em', fontSize: 15 }}>
@@ -317,24 +305,15 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
                         : t('Set up SimpleFIN for bank sync')}
                     </ButtonWithLoading>
                     {isSimpleFinSetupComplete && (
-                      <>
-                        <Button
-                          ref={triggerRef}
-                          variant="bare"
-                          onPress={() => setSimplefinMenuOpen(true)}
-                          aria-label="SimpleFIN menu"
-                        >
+                      <DialogTrigger>
+                        <Button variant="bare" aria-label="SimpleFIN menu">
                           <SvgDotsHorizontalTriple
                             width={15}
                             height={15}
                             style={{ transform: 'rotateZ(90deg)' }}
                           />
                         </Button>
-                        <Popover
-                          triggerRef={triggerRef}
-                          isOpen={menuSimplefinOpen}
-                          onOpenChange={() => setSimplefinMenuOpen(false)}
-                        >
+                        <Popover>
                           <Menu
                             onMenuSelect={item => {
                               if (item === 'reconfigure') {
@@ -349,7 +328,7 @@ export function CreateAccountModal({ upgradingAccountId }: CreateAccountProps) {
                             ]}
                           />
                         </Popover>
-                      </>
+                      </DialogTrigger>
                     )}
                   </View>
                   <Text style={{ lineHeight: '1.4em', fontSize: 15 }}>

diff --git a/packages/loot-core/src/types/server-handlers.d.ts b/packages/loot-core/src/types/server-handlers.d.ts
@@ -178,7 +178,7 @@ export interface ServerHandlers {
 
   'account-move': (arg: { id; targetId }) => Promise<unknown>;
 
-  'secret-set': (arg: { name: string; value: string }) => Promise<null>;
+  'secret-set': (arg: { name: string; value: string | null }) => Promise<null>;
   'secret-check': (arg: string) => Promise<string | { error?: string }>;
 
   'gocardless-poll-web-token': (arg: {

diff --git a/upcoming-release-notes/3942.md b/upcoming-release-notes/3942.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Fix misaligned gocardless credential popover.