From 65a7c58441a048edc5e9ea71e05496ac4de24e93 Mon Sep 17 00:00:00 2001 From: Robert Dyer <rdyer@unl.edu> Date: Sat, 17 Aug 2024 12:33:03 -0500 Subject: [PATCH] Translation: desktop-client/components/budget/report (#3280) --- .../components/budget/report/BalanceMenu.tsx | 6 ++++-- .../components/budget/report/BudgetMenu.tsx | 12 ++++++----- .../budget/report/ReportComponents.tsx | 21 ++++++++++++++----- .../report/budgetsummary/BudgetMonthMenu.tsx | 14 +++++++------ .../report/budgetsummary/BudgetSummary.tsx | 10 +++++++-- .../report/budgetsummary/BudgetTotal.tsx | 5 ++++- .../report/budgetsummary/ExpenseTotal.tsx | 4 +++- .../report/budgetsummary/IncomeTotal.tsx | 4 +++- .../budget/report/budgetsummary/Saved.tsx | 12 +++++++---- upcoming-release-notes/3280.md | 6 ++++++ 10 files changed, 67 insertions(+), 27 deletions(-) create mode 100644 upcoming-release-notes/3280.md diff --git a/packages/desktop-client/src/components/budget/report/BalanceMenu.tsx b/packages/desktop-client/src/components/budget/report/BalanceMenu.tsx index 5917be96f..fb5945ac2 100644 --- a/packages/desktop-client/src/components/budget/report/BalanceMenu.tsx +++ b/packages/desktop-client/src/components/budget/report/BalanceMenu.tsx @@ -1,4 +1,5 @@ import React, { type ComponentPropsWithoutRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { reportBudget } from 'loot-core/src/client/queries'; @@ -19,6 +20,7 @@ export function BalanceMenu({ onCarryover, ...props }: BalanceMenuProps) { + const { t } = useTranslation(); const carryover = useReportSheetValue(reportBudget.catCarryover(categoryId)); return ( <Menu @@ -36,8 +38,8 @@ export function BalanceMenu({ { name: 'carryover', text: carryover - ? 'Remove overspending rollover' - : 'Rollover overspending', + ? t('Remove overspending rollover') + : t('Rollover overspending'), }, ]} /> diff --git a/packages/desktop-client/src/components/budget/report/BudgetMenu.tsx b/packages/desktop-client/src/components/budget/report/BudgetMenu.tsx index aeed3cddd..b5f2f38c2 100644 --- a/packages/desktop-client/src/components/budget/report/BudgetMenu.tsx +++ b/packages/desktop-client/src/components/budget/report/BudgetMenu.tsx @@ -1,4 +1,5 @@ import React, { type ComponentPropsWithoutRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { useFeatureFlag } from '../../../hooks/useFeatureFlag'; import { Menu } from '../../common/Menu'; @@ -17,6 +18,7 @@ export function BudgetMenu({ onApplyBudgetTemplate, ...props }: BudgetMenuProps) { + const { t } = useTranslation(); const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled'); const onMenuSelect = (name: string) => { switch (name) { @@ -47,25 +49,25 @@ export function BudgetMenu({ items={[ { name: 'copy-single-last', - text: 'Copy last month’s budget', + text: t('Copy last month’s budget'), }, { name: 'set-single-3-avg', - text: 'Set to 3 month average', + text: t('Set to 3 month average'), }, { name: 'set-single-6-avg', - text: 'Set to 6 month average', + text: t('Set to 6 month average'), }, { name: 'set-single-12-avg', - text: 'Set to yearly average', + text: t('Set to yearly average'), }, ...(isGoalTemplatesEnabled ? [ { name: 'apply-single-category-template', - text: 'Apply budget template', + text: t('Apply budget template'), }, ] : []), diff --git a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx index ff9f429b3..fa77bc002 100644 --- a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx +++ b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx @@ -1,5 +1,6 @@ // @ts-strict-ignore import React, { memo, useRef, useState } from 'react'; +import { Trans } from 'react-i18next'; import { reportBudget } from 'loot-core/src/client/queries'; import { evalArithmetic } from 'loot-core/src/shared/arithmetic'; @@ -61,7 +62,9 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() { }} > <View style={headerLabelStyle}> - <Text style={{ color: theme.pageTextLight }}>Budgeted</Text> + <Text style={{ color: theme.pageTextLight }}> + <Trans>Budgeted</Trans> + </Text> <ReportCellValue binding={reportBudget.totalBudgetedExpense} type="financial" @@ -72,7 +75,9 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() { /> </View> <View style={headerLabelStyle}> - <Text style={{ color: theme.pageTextLight }}>Spent</Text> + <Text style={{ color: theme.pageTextLight }}> + <Trans>Spent</Trans> + </Text> <ReportCellValue binding={reportBudget.totalSpent} type="financial" @@ -80,7 +85,9 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() { /> </View> <View style={headerLabelStyle}> - <Text style={{ color: theme.pageTextLight }}>Balance</Text> + <Text style={{ color: theme.pageTextLight }}> + <Trans>Balance</Trans> + </Text> <ReportCellValue binding={reportBudget.totalLeftover} type="financial" @@ -101,10 +108,14 @@ export function IncomeHeaderMonth() { }} > <View style={headerLabelStyle}> - <Text style={{ color: theme.pageTextLight }}>Budgeted</Text> + <Text style={{ color: theme.pageTextLight }}> + <Trans>Budgeted</Trans> + </Text> </View> <View style={headerLabelStyle}> - <Text style={{ color: theme.pageTextLight }}>Received</Text> + <Text style={{ color: theme.pageTextLight }}> + <Trans>Received</Trans> + </Text> </View> </View> ); diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetMonthMenu.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetMonthMenu.tsx index aa5c37936..2afd2497e 100644 --- a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetMonthMenu.tsx +++ b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetMonthMenu.tsx @@ -1,4 +1,5 @@ import React, { type ComponentPropsWithoutRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { useFeatureFlag } from '../../../../hooks/useFeatureFlag'; import { Menu } from '../../../common/Menu'; @@ -24,6 +25,7 @@ export function BudgetMonthMenu({ onOverwriteWithBudgetTemplates, ...props }: BudgetMonthMenuProps) { + const { t } = useTranslation(); const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled'); return ( <Menu @@ -51,25 +53,25 @@ export function BudgetMonthMenu({ } }} items={[ - { name: 'copy-last', text: 'Copy last month’s budget' }, - { name: 'set-zero', text: 'Set budgets to zero' }, + { name: 'copy-last', text: t('Copy last month’s budget') }, + { name: 'set-zero', text: t('Set budgets to zero') }, { name: 'set-3-avg', - text: 'Set budgets to 3 month average', + text: t('Set budgets to 3 month average'), }, ...(isGoalTemplatesEnabled ? [ { name: 'check-templates', - text: 'Check templates', + text: t('Check templates'), }, { name: 'apply-goal-template', - text: 'Apply budget template', + text: t('Apply budget template'), }, { name: 'overwrite-goal-template', - text: 'Overwrite with budget template', + text: t('Overwrite with budget template'), }, ] : []), diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx index 282db6297..fc64d8153 100644 --- a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx +++ b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx @@ -1,5 +1,6 @@ // @ts-strict-ignore import React, { useRef, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { css } from 'glamor'; @@ -25,6 +26,7 @@ type BudgetSummaryProps = { month?: string; }; export function BudgetSummary({ month }: BudgetSummaryProps) { + const { t } = useTranslation(); const { currentMonth, summaryCollapsed: collapsed, @@ -88,7 +90,11 @@ export function BudgetSummary({ month }: BudgetSummaryProps) { > <Button variant="bare" - aria-label={`${collapsed ? 'Expand' : 'Collapse'} month summary`} + aria-label={ + collapsed + ? t('Expand month summary') + : t('Collapse month summary') + } className="hover-visible" onPress={onToggleSummaryCollapse} > @@ -137,7 +143,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) { <Button ref={triggerRef} variant="bare" - aria-label="Menu" + aria-label={t('Menu')} onPress={onMenuOpen} > <SvgDotsHorizontalTriple diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetTotal.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetTotal.tsx index a19c936f1..2f3966d0f 100644 --- a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetTotal.tsx +++ b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetTotal.tsx @@ -4,6 +4,7 @@ import React, { type ComponentType, type ReactNode, } from 'react'; +import { useTranslation } from 'react-i18next'; import { theme, styles } from '../../../../style'; import { Text } from '../../../common/Text'; @@ -31,6 +32,7 @@ export function BudgetTotal< ProgressComponent, style, }: BudgetTotalProps<CurrentField, TargetField>) { + const { t } = useTranslation(); return ( <View style={{ @@ -51,7 +53,8 @@ export function BudgetTotal< <Text> <CellValue binding={current} type="financial" /> <Text style={{ color: theme.pageTextSubdued, fontStyle: 'italic' }}> - {' of '} + {' '} + {t('of')}{' '} <CellValue binding={target} type="financial" diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/ExpenseTotal.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/ExpenseTotal.tsx index cd64acafa..9b82f9a68 100644 --- a/packages/desktop-client/src/components/budget/report/budgetsummary/ExpenseTotal.tsx +++ b/packages/desktop-client/src/components/budget/report/budgetsummary/ExpenseTotal.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import { reportBudget } from 'loot-core/src/client/queries'; @@ -11,9 +12,10 @@ type ExpenseTotalProps = { style?: CSSProperties; }; export function ExpenseTotal({ style }: ExpenseTotalProps) { + const { t } = useTranslation(); return ( <BudgetTotal - title="Expenses" + title={t('Expenses')} current={reportBudget.totalSpent} target={reportBudget.totalBudgetedExpense} ProgressComponent={ExpenseProgress} diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/IncomeTotal.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/IncomeTotal.tsx index 5d41c5cb5..1c897f35f 100644 --- a/packages/desktop-client/src/components/budget/report/budgetsummary/IncomeTotal.tsx +++ b/packages/desktop-client/src/components/budget/report/budgetsummary/IncomeTotal.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import { reportBudget } from 'loot-core/src/client/queries'; @@ -11,9 +12,10 @@ type IncomeTotalProps = { style?: CSSProperties; }; export function IncomeTotal({ style }: IncomeTotalProps) { + const { t } = useTranslation(); return ( <BudgetTotal - title="Income" + title={t('Income')} current={reportBudget.totalIncome} target={reportBudget.totalBudgetedIncome} ProgressComponent={IncomeProgress} diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/Saved.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/Saved.tsx index 142f9b477..dec539c6e 100644 --- a/packages/desktop-client/src/components/budget/report/budgetsummary/Saved.tsx +++ b/packages/desktop-client/src/components/budget/report/budgetsummary/Saved.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Trans, useTranslation } from 'react-i18next'; import { css } from 'glamor'; @@ -19,6 +20,7 @@ type SavedProps = { style?: CSSProperties; }; export function Saved({ projected, style }: SavedProps) { + const { t } = useTranslation(); const budgetedSaved = useReportSheetValue(reportBudget.totalBudgetedSaved) || 0; const totalSaved = useReportSheetValue(reportBudget.totalSaved) || 0; @@ -30,10 +32,12 @@ export function Saved({ projected, style }: SavedProps) { return ( <View style={{ alignItems: 'center', fontSize: 14, ...style }}> {projected ? ( - <Text style={{ color: theme.pageTextLight }}>Projected Savings:</Text> + <Text style={{ color: theme.pageTextLight }}> + <Trans>Projected Savings:</Trans> + </Text> ) : ( <View style={{ color: theme.pageTextLight }}> - {isNegative ? 'Overspent:' : 'Saved:'} + {isNegative ? t('Overspent:') : t('Saved:')} </View> )} @@ -42,7 +46,7 @@ export function Saved({ projected, style }: SavedProps) { content={ <> <AlignedText - left="Projected Savings:" + left={t('Projected Savings:')} right={ <Text style={{ @@ -55,7 +59,7 @@ export function Saved({ projected, style }: SavedProps) { } /> <AlignedText - left="Difference:" + left={t('Difference:')} right={ <Text style={{ ...makeAmountFullStyle(diff), ...styles.tnum }}> {format(diff, 'financial-with-sign')} diff --git a/upcoming-release-notes/3280.md b/upcoming-release-notes/3280.md new file mode 100644 index 000000000..b71a90dee --- /dev/null +++ b/upcoming-release-notes/3280.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [psybers] +--- + +Support translations in desktop-client/components/budget/report. -- GitLab