Update packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

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

@@ -61,16 +61,25 @@ function GoalTooltipRow({ children }) {
   );
 }
 
+type CellValueChildren = ComponentPropsWithoutRef<typeof CellValue>['children'];
+
+type ChildrenWithClassName = (
+  props: Parameters<CellValueChildren>[0] & {
+    className: string;
+  },
+) => ReturnType<CellValueChildren>;
+
 type BalanceWithCarryoverProps = Omit<
   ComponentPropsWithoutRef<typeof CellValue>,
-  'binding'
+  'children' | 'binding'
 > & {
+  children?: ChildrenWithClassName;
   carryover: Binding<'envelope-budget', 'carryover'>;
   balance: Binding<'envelope-budget', 'leftover'>;
   goal: Binding<'envelope-budget', 'goal'>;
   budgeted: Binding<'envelope-budget', 'budget'>;
   longGoal: Binding<'envelope-budget', 'long-goal'>;
-  disabled?: boolean;
+  isDisabled?: boolean;
   CarryoverIndicator?: ComponentType<CarryoverIndicatorProps>;
 };
 
@@ -80,7 +89,7 @@ export function BalanceWithCarryover({
   goal,
   budgeted,
   longGoal,
-  disabled,
+  isDisabled,
   CarryoverIndicator: CarryoverIndicatorComponent = CarryoverIndicator,
   children,
   ...props
@@ -91,7 +100,7 @@ export function BalanceWithCarryover({
   const budgetedValue = useSheetValue(budgeted);
   const longGoalValue = useSheetValue(longGoal);
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
-  const getBalanceStyle = useCallback(
+  const getBalanceAmountStyle = useCallback(
     (balanceValue: number) =>
       makeBalanceAmountStyle(
         balanceValue,
@@ -102,7 +111,7 @@ export function BalanceWithCarryover({
   );
   const format = useFormat();
 
-  const differenceToGoal = useCallback(
+  const getDifferenceToGoal = useCallback(
     (balanceValue: number) =>
       longGoalValue === 1
         ? balanceValue - goalValue
@@ -110,26 +119,40 @@ export function BalanceWithCarryover({
     [budgetedValue, goalValue, longGoalValue],
   );
 
+  const getDefaultClassName = useCallback(
+    (balanceValue: number) =>
+      String(
+        css({
+          ...getBalanceAmountStyle(balanceValue),
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          textAlign: 'right',
+          ...(!isDisabled && {
+            cursor: 'pointer',
+          }),
+          ':hover': { textDecoration: 'underline' },
+        }),
+      ),
+    [getBalanceAmountStyle, isDisabled],
+  );
+
   return (
     <CellValue binding={balance} type="financial" {...props}>
       {({ type, name, value: balanceValue }) => (
         <>
-          {children ? (
-            children({ type, name, value: balanceValue })
-          ) : (
           <Tooltip
             content={
               <View style={{ padding: 10 }}>
                 <span style={{ fontWeight: 'bold' }}>
-                    {differenceToGoal(balanceValue) === 0 ? (
+                  {getDifferenceToGoal(balanceValue) === 0 ? (
                     <span style={{ color: theme.noticeText }}>
                       {t('Fully funded')}
                     </span>
-                    ) : differenceToGoal(balanceValue) > 0 ? (
+                  ) : getDifferenceToGoal(balanceValue) > 0 ? (
                     <span style={{ color: theme.noticeText }}>
                       {t('Overfunded ({{amount}})', {
                         amount: format(
-                            differenceToGoal(balanceValue),
+                          getDifferenceToGoal(balanceValue),
                           'financial',
                         ),
                       })}
@@ -138,7 +161,7 @@ export function BalanceWithCarryover({
                     <span style={{ color: theme.errorText }}>
                       {t('Underfunded ({{amount}})', {
                         amount: format(
-                            differenceToGoal(balanceValue),
+                          getDifferenceToGoal(balanceValue),
                           'financial',
                         ),
                       })}
@@ -147,7 +170,7 @@ export function BalanceWithCarryover({
                 </span>
                 <GoalTooltipRow>
                   <div>{t('Goal Type:')}</div>
-                    <div>{longGoalValue === 1 ? 'Long' : 'Template'}</div>
+                  <div>{longGoalValue === 1 ? t('Long') : t('Template')}</div>
                 </GoalTooltipRow>
                 <GoalTooltipRow>
                   <div>{t('Goal:')}</div>
@@ -175,28 +198,26 @@ export function BalanceWithCarryover({
               isDisabled: !isGoalTemplatesEnabled || goalValue == null,
             }}
           >
+            {children ? (
+              children({
+                type,
+                name,
+                value: balanceValue,
+                className: getDefaultClassName(balanceValue),
+              })
+            ) : (
               <CellValueText
                 type={type}
                 name={name}
                 value={balanceValue}
-                className={String(
+                className={getDefaultClassName(balanceValue)}
-                  css({
-                    ...getBalanceStyle(balanceValue),
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    textAlign: 'right',
-                    ...(!disabled && {
-                      cursor: 'pointer',
-                    }),
-                    ':hover': { textDecoration: 'underline' },
-                  }),
-                )}
               />
-            </Tooltip>
             )}
+          </Tooltip>
+
           {carryoverValue && (
             <CarryoverIndicatorComponent
-              style={getBalanceStyle(balanceValue)}
+              style={getBalanceAmountStyle(balanceValue)}
             />
           )}
         </>

packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx

@@ -398,7 +398,7 @@ export const CategoryMonth = memo(function CategoryMonth({
             onClick={() => !category.is_income && setBalanceMenuOpen(true)}
           >
             <BalanceWithCarryover
-              disabled={category.is_income}
+              isDisabled={category.is_income}
               carryover={trackingBudget.catCarryover(category.id)}
               balance={trackingBudget.catBalance(category.id)}
               goal={trackingBudget.catGoal(category.id)}

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

@@ -66,7 +66,7 @@ export function EnvelopeBalanceMenuModal({
               Balance
             </Text>
             <BalanceWithCarryover
-              disabled
+              isDisabled
               carryover={envelopeBudget.catCarryover(categoryId)}
               balance={envelopeBudget.catBalance(categoryId)}
               goal={envelopeBudget.catGoal(categoryId)}

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

@@ -64,7 +64,7 @@ export function TrackingBalanceMenuModal({
               Balance
             </Text>
             <BalanceWithCarryover
-              disabled
+              isDisabled
               carryover={trackingBudget.catCarryover(categoryId)}
               balance={trackingBudget.catBalance(categoryId)}
               goal={trackingBudget.catGoal(categoryId)}

upcoming-release-notes/3492.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix mobile balance modal not properly coloring balance.