Skip to content

Commit

Permalink
Fix #3214
Browse files Browse the repository at this point in the history
  • Loading branch information
@joel-jeremy
joel-jeremy committed Sep 5, 2024
1 parent 5229fe7 commit c7d9072
Show file tree
Hide file tree
Showing 21 changed files with 851 additions and 830 deletions.
Binary file modified ...tion-available-funds-overspent-budgeted-and-for-next-month-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tion-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tion-available-funds-overspent-budgeted-and-for-next-month-3-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...est.js-snapshots/Budget-transfer-funds-to-another-category-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...est.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...est.js-snapshots/Budget-transfer-funds-to-another-category-3-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots/Mobile-loads-the-budget-page-with-budgeted-amounts-3-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 20 additions & 17 deletions packages/desktop-client/src/components/accounts/Balance.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { Button } from '../common/Button2';
import { Text } from '../common/Text';
import { View } from '../common/View';
import { PrivacyFilter } from '../PrivacyFilter';
import { CellValue } from '../spreadsheet/CellValue';
import { CellValue, DefaultCellValueText } from '../spreadsheet/CellValue';
import { useFormat } from '../spreadsheet/useFormat';
import { useSheetValue } from '../spreadsheet/useSheetValue';

Expand Down Expand Up @@ -172,22 +172,25 @@ export function Balances({
paddingBottom: 1,
}}
>
<CellValue
binding={{ ...balanceQuery, value: 0 }}
type="financial"
style={{ fontSize: 22, fontWeight: 400 }}
getStyle={value => ({
color:
value < 0
? theme.errorText
: value > 0
? theme.noticeTextLight
: theme.pageTextSubdued,
})}
privacyFilter={{
blurIntensity: 5,
}}
/>
<CellValue binding={{ ...balanceQuery, value: 0 }} type="financial">
{props => (
<PrivacyFilter blurIntensity={5}>
<DefaultCellValueText
{...props}
getStyle={value => ({
fontSize: 22,
fontWeight: 400,
color:
value < 0
? theme.errorText
: value > 0
? theme.noticeTextLight
: theme.pageTextSubdued,
})}
/>
</PrivacyFilter>
)}
</CellValue>

<SvgArrowButtonRight1
style={{
Expand Down
224 changes: 120 additions & 104 deletions packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
// @ts-strict-ignore
import React, { type ComponentPropsWithoutRef } from 'react';
import React, {
type ComponentType,
type ComponentPropsWithoutRef,
useCallback,
} from 'react';

import { useFeatureFlag } from '../../hooks/useFeatureFlag';
import { SvgArrowThinRight } from '../../icons/v1';
import { type CSSProperties, theme, styles } from '../../style';
import { Tooltip } from '../common/Tooltip';
import { View } from '../common/View';
import { type Binding } from '../spreadsheet';
import { CellValue } from '../spreadsheet/CellValue';
import { CellValue, DefaultCellValueText } from '../spreadsheet/CellValue';
import { useFormat } from '../spreadsheet/useFormat';
import { useSheetValue } from '../spreadsheet/useSheetValue';

Expand All @@ -17,19 +21,6 @@ type CarryoverIndicatorProps = {
style?: CSSProperties;
};

type BalanceWithCarryoverProps = Omit<
ComponentPropsWithoutRef<typeof CellValue>,
'binding'
> & {
carryover: Binding<'rollover-budget', 'carryover'>;
balance: Binding<'rollover-budget', 'leftover'>;
goal: Binding<'rollover-budget', 'goal'>;
budgeted: Binding<'rollover-budget', 'budget'>;
longGoal: Binding<'rollover-budget', 'long-goal'>;
disabled?: boolean;
carryoverIndicator?: ({ style }: CarryoverIndicatorProps) => JSX.Element;
};

export function DefaultCarryoverIndicator({ style }: CarryoverIndicatorProps) {
return (
<View
Expand Down Expand Up @@ -67,115 +58,140 @@ function GoalTooltipRow({ children }) {
);
}

type BalanceWithCarryoverProps = Omit<
ComponentPropsWithoutRef<typeof CellValue>,
'binding'
> & {
carryover: Binding<'rollover-budget', 'carryover'>;
balance: Binding<'rollover-budget', 'leftover'>;
goal: Binding<'rollover-budget', 'goal'>;
budgeted: Binding<'rollover-budget', 'budget'>;
longGoal: Binding<'rollover-budget', 'long-goal'>;
disabled?: boolean;
CarryoverIndicator?: ComponentType<CarryoverIndicatorProps>;
};

export function BalanceWithCarryover({
carryover,
balance,
goal,
budgeted,
longGoal,
disabled,
carryoverIndicator = DefaultCarryoverIndicator,
CarryoverIndicator = DefaultCarryoverIndicator,
children,
...props
}: BalanceWithCarryoverProps) {
const carryoverValue = useSheetValue(carryover);
const balanceValue = useSheetValue(balance);
const goalValue = useSheetValue(goal);
const budgetedValue = useSheetValue(budgeted);
const longGoalValue = useSheetValue(longGoal);
const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
const valueStyle = makeBalanceAmountStyle(
balanceValue,
isGoalTemplatesEnabled ? goalValue : null,
longGoalValue === 1 ? balanceValue : budgetedValue,
const getBalanceStyle = useCallback(
(balanceValue: number) =>
makeBalanceAmountStyle(
balanceValue,
isGoalTemplatesEnabled ? goalValue : null,
longGoalValue === 1 ? balanceValue : budgetedValue,
),
[budgetedValue, goalValue, isGoalTemplatesEnabled, longGoalValue],
);
const format = useFormat();

const differenceToGoal =
longGoalValue === 1 ? balanceValue - goalValue : budgetedValue - goalValue;

const balanceCellValue = (
<CellValue
{...props}
binding={balance}
type="financial"
getStyle={value =>
makeBalanceAmountStyle(
value,
isGoalTemplatesEnabled ? goalValue : null,
longGoalValue === 1 ? balanceValue : budgetedValue,
)
}
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
textAlign: 'right',
...(!disabled && {
cursor: 'pointer',
}),
...props.style,
}}
/>
const differenceToGoal = useCallback(
(balanceValue: number) =>
longGoalValue === 1
? balanceValue - goalValue
: budgetedValue - goalValue,
[budgetedValue, goalValue, longGoalValue],
);

return (
<span
style={{
alignItems: 'center',
display: 'inline-flex',
justifyContent: 'right',
maxWidth: '100%',
}}
>
{isGoalTemplatesEnabled && goalValue !== null ? (
<Tooltip
content={
<View style={{ padding: 10 }}>
<span style={{ fontWeight: 'bold' }}>
{differenceToGoal === 0 ? (
<span style={{ color: theme.noticeText }}>Fully funded</span>
) : differenceToGoal > 0 ? (
<span style={{ color: theme.noticeText }}>
Overfunded ({format(differenceToGoal, 'financial')})
</span>
) : (
<span style={{ color: theme.errorText }}>
Underfunded ({format(differenceToGoal, 'financial')})
<CellValue binding={balance} type="financial" {...props}>
{({ type, name, value: balanceValue }) =>
children ? (
children({ type, name, value: balanceValue })
) : (
<span
style={{
alignItems: 'center',
display: 'inline-flex',
justifyContent: 'right',
maxWidth: '100%',
}}
>
<Tooltip
content={
<View style={{ padding: 10 }}>
<span style={{ fontWeight: 'bold' }}>
{differenceToGoal(balanceValue) === 0 ? (
<span style={{ color: theme.noticeText }}>
Fully funded
</span>
) : differenceToGoal(balanceValue) > 0 ? (
<span style={{ color: theme.noticeText }}>
Overfunded (
{format(differenceToGoal(balanceValue), 'financial')})
</span>
) : (
<span style={{ color: theme.errorText }}>
Underfunded (
{format(differenceToGoal(balanceValue), 'financial')})
</span>
)}
</span>
)}
</span>
<GoalTooltipRow>
<div>Goal Type:</div>
<div>{longGoalValue === 1 ? 'Long' : 'Template'}</div>
</GoalTooltipRow>
<GoalTooltipRow>
<div>Goal:</div>
<div>{format(goalValue, 'financial')}</div>
</GoalTooltipRow>
<GoalTooltipRow>
{longGoalValue !== 1 ? (
<>
<div>Budgeted:</div>
<div>{format(budgetedValue, 'financial')}</div>
</>
) : (
<>
<div>Balance:</div>
<div>{format(balanceValue, 'financial')}</div>
</>
)}
</GoalTooltipRow>
</View>
}
style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
placement="bottom"
triggerProps={{ delay: 750 }}
>
{balanceCellValue}
</Tooltip>
) : (
balanceCellValue
)}
{carryoverValue && carryoverIndicator({ style: valueStyle })}
</span>
<GoalTooltipRow>
<div>Goal Type:</div>
<div>{longGoalValue === 1 ? 'Long' : 'Template'}</div>
</GoalTooltipRow>
<GoalTooltipRow>
<div>Goal:</div>
<div>{format(goalValue, 'financial')}</div>
</GoalTooltipRow>
<GoalTooltipRow>
{longGoalValue !== 1 ? (
<>
<div>Budgeted:</div>
<div>{format(budgetedValue, 'financial')}</div>
</>
) : (
<>
<div>Balance:</div>
<div>{format(balanceValue, type)}</div>
</>
)}
</GoalTooltipRow>
</View>
}
style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
placement="bottom"
triggerProps={{
delay: 750,
isDisabled: !isGoalTemplatesEnabled || goalValue == null,
}}
>
<DefaultCellValueText
type={type}
name={name}
value={balanceValue}
getStyle={value => ({
...getBalanceStyle(value),
overflow: 'hidden',
textOverflow: 'ellipsis',
textAlign: 'right',
...(!disabled && {
cursor: 'pointer',
}),
':hover': { textDecoration: 'underline' },
})}
/>
</Tooltip>
{carryoverValue && (
<CarryoverIndicator style={getBalanceStyle(balanceValue)} />
)}
</span>
)
}
</CellValue>
);
}
Loading

0 comments on commit c7d9072

Please sign in to comment.