Reuse BalanceMovementMenu

packages/desktop-client/src/components/budget/CategoryBalanceCell.tsx

@@ -18,6 +18,7 @@ import { type CategoryEntity } from 'loot-core/types/models';
 
 import { balanceColumnPaddingStyle } from './BudgetCategoriesV2';
 import { BalanceMenu as EnvelopeBalanceMenu } from './envelope/BalanceMenu';
+import { BalanceMovementMenu as EnvelopeBalanceMovementMenu } from './envelope/BalanceMovementMenu';
 import { CoverMenu } from './envelope/CoverMenu';
 import { TransferMenu } from './envelope/TransferMenu';
 import { BalanceMenu as TrackingBalanceMenu } from './tracking/BalanceMenu';
@@ -103,19 +104,21 @@ export function CategoryBalanceCell({
     typeof categoryLongGoalBinding
   >(categoryLongGoalBinding);
 
+  const [isBalanceMenuOpen, setIsBalanceMenuOpen] = useState(false);
+
   const [activeBalanceMenu, setActiveBalanceMenu] = useState<
     'balance' | 'transfer' | 'cover' | null
   >(null);
 
   const { pressProps } = usePress({
-    onPress: () => setActiveBalanceMenu('balance'),
+    onPress: () => setIsBalanceMenuOpen(true),
   });
 
   const { focusableProps } = useFocusable(
     {
       onKeyUp: e => {
         if (e.key === 'Enter') {
-          setActiveBalanceMenu('balance');
+          setIsBalanceMenuOpen(true);
         }
       },
     },
@@ -183,58 +186,19 @@ export function CategoryBalanceCell({
         <Popover
           triggerRef={triggerRef}
           placement="bottom end"
-          isOpen={activeBalanceMenu !== null}
+          isOpen={isBalanceMenuOpen}
           onOpenChange={() => {
-            if (activeBalanceMenu !== 'balance') {
-              setActiveBalanceMenu(null);
-            }
+            setIsBalanceMenuOpen(false);
           }}
           isNonModal
         >
           {budgetType === 'rollover' ? (
-            <>
-              {activeBalanceMenu === 'balance' && (
-                <EnvelopeBalanceMenu
-                  categoryId={category.id}
-                  onCarryover={carryover => {
-                    onBudgetAction(month, 'carryover', {
-                      category: category.id,
-                      flag: carryover,
-                    });
-                    setActiveBalanceMenu(null);
-                  }}
-                  onTransfer={() => setActiveBalanceMenu('transfer')}
-                  onCover={() => setActiveBalanceMenu('cover')}
-                />
-              )}
-              {activeBalanceMenu === 'transfer' && (
-                <TransferMenu
-                  categoryId={category.id}
-                  initialAmount={balanceValue}
-                  showToBeBudgeted={true}
-                  onSubmit={(amount, toCategoryId) => {
-                    onBudgetAction(month, 'transfer-category', {
-                      amount,
-                      from: category.id,
-                      to: toCategoryId,
-                    });
-                  }}
-                  onClose={() => setActiveBalanceMenu(null)}
-                />
-              )}
-              {activeBalanceMenu === 'cover' && (
-                <CoverMenu
-                  categoryId={category.id}
-                  onSubmit={fromCategoryId => {
-                    onBudgetAction(month, 'cover-overspending', {
-                      to: category.id,
-                      from: fromCategoryId,
-                    });
-                  }}
-                  onClose={() => setActiveBalanceMenu(null)}
-                />
-              )}
-            </>
+            <EnvelopeBalanceMovementMenu
+              categoryId={category.id}
+              month={month}
+              onBudgetAction={onBudgetAction}
+              onSelect={() => setIsBalanceMenuOpen(false)}
+            />
           ) : (
             <TrackingBalanceMenu
               categoryId={category.id}
@@ -243,7 +207,7 @@ export function CategoryBalanceCell({
                   category: category.id,
                   flag: carryover,
                 });
-                setActiveBalanceMenu(null);
+                setIsBalanceMenuOpen(false);
               }}
             />
           )}

packages/desktop-client/src/components/budget/envelope/BalanceMovementMenu.tsx

@@ -12,14 +12,14 @@ type BalanceMovementMenuProps = {
   categoryId: string;
   month: string;
   onBudgetAction: (month: string, action: string, arg?: unknown) => void;
-  onClose?: () => void;
+  onSelect?: () => void;
 };
 
 export function BalanceMovementMenu({
   categoryId,
   month,
   onBudgetAction,
-  onClose = () => {},
+  onSelect = () => {},
 }: BalanceMovementMenuProps) {
   const format = useFormat();
 
@@ -48,7 +48,7 @@ export function BalanceMovementMenu({
               category: categoryId,
               flag: carryover,
             });
-            onClose();
+            onSelect();
           }}
           onTransfer={() => setMenu('transfer')}
           onCover={() => setMenu('cover')}
@@ -59,8 +59,7 @@ export function BalanceMovementMenu({
         <TransferMenu
           categoryId={categoryId}
           initialAmount={catBalance}
-          showToBeBudgeted
-          onClose={onClose}
+          showToBeBudgeted={true}
           onSubmit={(amount, toCategoryId) => {
             onBudgetAction(month, 'transfer-category', {
               amount,
@@ -68,6 +67,7 @@ export function BalanceMovementMenu({
               to: toCategoryId,
               currencyCode: format.currency.code,
             });
+            onSelect();
           }}
         />
       )}
@@ -76,7 +76,6 @@ export function BalanceMovementMenu({
         <CoverMenu
           categoryId={categoryId}
           initialAmount={catBalance}
-          onClose={onClose}
           onSubmit={(amount, fromCategoryId) => {
             onBudgetAction(month, 'cover-overspending', {
               to: categoryId,
@@ -84,6 +83,7 @@ export function BalanceMovementMenu({
               amount,
               currencyCode: format.currency.code,
             });
+            onSelect();
           }}
         />
       )}

packages/desktop-client/src/components/budget/envelope/CoverMenu.tsx

@@ -27,7 +27,6 @@ type CoverMenuProps = {
   initialAmount?: IntegerAmount | null;
   categoryId?: CategoryEntity['id'];
   onSubmit: (amount: IntegerAmount, categoryId: CategoryEntity['id']) => void;
-  onClose: () => void;
 };
 
 export function CoverMenu({
@@ -35,7 +34,6 @@ export function CoverMenu({
   initialAmount = 0,
   categoryId,
   onSubmit,
-  onClose,
 }: CoverMenuProps) {
   const { t } = useTranslation();
 
@@ -61,7 +59,6 @@ export function CoverMenu({
     if (parsedAmount && fromCategoryId) {
       onSubmit(amountToInteger(parsedAmount), fromCategoryId);
     }
-    onClose();
   }
 
   return (

packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx

@@ -508,7 +508,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             categoryId={category.id}
             month={month}
             onBudgetAction={onBudgetAction}
-            onClose={() => setBalanceMenuOpen(false)}
+            onSelect={() => setBalanceMenuOpen(false)}
           />
         </Popover>
       </Field>

packages/desktop-client/src/components/budget/envelope/TransferMenu.tsx

@@ -22,7 +22,6 @@ type TransferMenuProps = {
   initialAmount?: IntegerAmount | null;
   showToBeBudgeted?: boolean;
   onSubmit: (amount: IntegerAmount, categoryId: CategoryEntity['id']) => void;
-  onClose: () => void;
 };
 
 export function TransferMenu({
@@ -30,7 +29,6 @@ export function TransferMenu({
   initialAmount = 0,
   showToBeBudgeted,
   onSubmit,
-  onClose,
 }: TransferMenuProps) {
   const { grouped: originalCategoryGroups } = useCategories();
   const filteredCategoryGroups = useMemo(() => {
@@ -54,7 +52,6 @@ export function TransferMenu({
     if (amount != null && amount > 0 && toCategoryId) {
       onSubmit(amount, toCategoryId);
     }
-    onClose();
   };
 
   return (