diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx index 45c0859c2c8..dd610367042 100644 --- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx +++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx @@ -86,6 +86,7 @@ type BalanceWithCarryoverProps = Omit< budgeted: Binding<'envelope-budget', 'budget'>; longGoal: Binding<'envelope-budget', 'long-goal'>; isDisabled?: boolean; + isMobileEnvelopeModal?: boolean; CarryoverIndicator?: ComponentType; }; @@ -96,6 +97,7 @@ export function BalanceWithCarryover({ budgeted, longGoal, isDisabled, + isMobileEnvelopeModal, CarryoverIndicator: CarryoverIndicatorComponent = CarryoverIndicator, children, ...props @@ -140,6 +142,97 @@ export function BalanceWithCarryover({ }), [getBalanceAmountStyle, isDisabled], ); + const GoalStatusDisplay = useCallback( + (balanceValue, type) => { + return ( + <> + + {getDifferenceToGoal(balanceValue) === 0 ? ( + + Fully funded + + ) : getDifferenceToGoal(balanceValue) > 0 ? ( + + + Overfunded ( + {{ + amount: format( + getDifferenceToGoal(balanceValue), + 'financial', + ), + }} + ) + + + ) : ( + + + Underfunded ( + {{ + amount: format( + getDifferenceToGoal(balanceValue), + 'financial', + ), + }} + ) + + + )} + + + +
Goal Type:
+
+ { + { + type: longGoalValue === 1 ? t('Long') : t('Template'), + } as TransObjectLiteral + } +
+
+
+ + +
Goal:
+
+ { + { + amount: format(goalValue, 'financial'), + } as TransObjectLiteral + } +
+
+
+ + {longGoalValue !== 1 ? ( + +
Budgeted:
+
+ { + { + amount: format(budgetedValue, 'financial'), + } as TransObjectLiteral + } +
+
+ ) : ( + +
Balance:
+
+ { + { + amount: format(balanceValue, type), + } as TransObjectLiteral + } +
+
+ )} +
+ + ); + }, + [budgetedValue, format, getDifferenceToGoal, goalValue, longGoalValue, t], + ); return ( @@ -148,88 +241,7 @@ export function BalanceWithCarryover({ - - {getDifferenceToGoal(balanceValue) === 0 ? ( - - Fully funded - - ) : getDifferenceToGoal(balanceValue) > 0 ? ( - - - Overfunded ( - {{ - amount: format( - getDifferenceToGoal(balanceValue), - 'financial', - ), - }} - ) - - - ) : ( - - - Underfunded ( - {{ - amount: format( - getDifferenceToGoal(balanceValue), - 'financial', - ), - }} - ) - - - )} - - - -
Goal Type:
-
- { - { - type: longGoalValue === 1 ? t('Long') : t('Template'), - } as TransObjectLiteral - } -
-
-
- - -
Goal:
-
- { - { - amount: format(goalValue, 'financial'), - } as TransObjectLiteral - } -
-
-
- - {longGoalValue !== 1 ? ( - -
Budgeted:
-
- { - { - amount: format(budgetedValue, 'financial'), - } as TransObjectLiteral - } -
-
- ) : ( - -
Balance:
-
- { - { - amount: format(balanceValue, type), - } as TransObjectLiteral - } -
-
- )} -
+ {GoalStatusDisplay(balanceValue, type)} } style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }} @@ -262,6 +274,18 @@ export function BalanceWithCarryover({ style={getBalanceAmountStyle(balanceValue)} /> )} + {isMobileEnvelopeModal && + isGoalTemplatesEnabled && + goalValue !== null && ( + <> +
+
{GoalStatusDisplay(balanceValue, type)}
+ + )} )}
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx index 51ff6d5337b..c399a53e9bf 100644 --- a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx +++ b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx @@ -73,6 +73,7 @@ export function EnvelopeBalanceMenuModal({