diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx index ba66fee263535043f128e41333e782bf19ad1d5d..29fafa3f4781037c8c091a56b8688563a5fee74d 100644 --- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx @@ -5,6 +5,7 @@ import React, { type ComponentPropsWithoutRef, type ReactElement, } from 'react'; +import { useTranslation } from 'react-i18next'; import { css } from 'glamor'; @@ -44,6 +45,7 @@ function AccountList({ renderAccountItemGroupHeader = defaultRenderAccountItemGroupHeader, renderAccountItem = defaultRenderAccountItem, }: AccountListProps) { + const { t } = useTranslation(); let lastItem = null; return ( @@ -63,10 +65,10 @@ function AccountList({ const group = `${ item.closed - ? 'Closed Accounts' + ? t('Closed Accounts') : item.offbudget - ? 'Off Budget' - : 'For Budget' + ? t('Off Budget') + : t('For Budget') }`; lastItem = item; diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx index 41bc750bcb52ed6ccbdf6850e0919a8daaadc5d8..c5d0a2462b42d6fb6f1e7209c66adbb8fe2f0502 100644 --- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx @@ -9,6 +9,7 @@ import React, { type ReactElement, useCallback, } from 'react'; +import { Trans, useTranslation } from 'react-i18next'; import { css } from 'glamor'; @@ -71,6 +72,7 @@ function CategoryList({ showHiddenItems, showBalances, }: CategoryListProps) { + const { t } = useTranslation(); let lastGroup: string | undefined | null = null; const filteredItems = useMemo( @@ -101,7 +103,7 @@ function CategoryList({ } const showGroup = item.cat_group !== lastGroup; - const groupName = `${item.group?.name}${item.group?.hidden ? ' (hidden)' : ''}`; + const groupName = `${item.group?.name}${item.group?.hidden ? ' ' + t('(hidden)') : ''}`; lastGroup = item.cat_group; return ( <Fragment key={item.id}> @@ -339,7 +341,7 @@ function SplitTransactionButton({ <SvgSplit width={10} height={10} style={{ marginRight: 5 }} /> )} </Text> - Split Transaction + <Trans>Split Transaction</Trans> </View> ); } @@ -368,6 +370,7 @@ function CategoryItem({ showBalances, ...props }: CategoryItemProps) { + const { t } = useTranslation(); const { isNarrowWidth } = useResponsive(); const narrowStyle = isNarrowWidth ? { @@ -416,7 +419,7 @@ function CategoryItem({ <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <TextOneLine> {item.name} - {item.hidden ? ' (hidden)' : null} + {item.hidden ? ' ' + t('(hidden)') : null} </TextOneLine> <TextOneLine style={{ diff --git a/packages/desktop-client/src/components/autocomplete/FilterList.tsx b/packages/desktop-client/src/components/autocomplete/FilterList.tsx index 7a8350b27fad3992757d89cd5b4f2c9f1e75d303..1e4e0191b6825679efdaedbfe29ffb2c21dd3418 100644 --- a/packages/desktop-client/src/components/autocomplete/FilterList.tsx +++ b/packages/desktop-client/src/components/autocomplete/FilterList.tsx @@ -1,4 +1,5 @@ import React, { type ComponentProps } from 'react'; +import { useTranslation } from 'react-i18next'; import { theme } from '../../style/theme'; import { View } from '../common/View'; @@ -16,6 +17,7 @@ export function FilterList<T extends { id: string; name: string }>({ highlightedIndex: number; embedded?: boolean; }) { + const { t } = useTranslation(); return ( <View> <View @@ -25,7 +27,7 @@ export function FilterList<T extends { id: string; name: string }>({ ...(!embedded && { maxHeight: 175 }), }} > - <ItemHeader title="Saved Filters" type="filter" /> + <ItemHeader title={t('Saved Filters')} type="filter" /> {items.map((item, idx) => { return [ <div diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx index 4d30eb934f50d99ee1227f17548ca49876534c91..6c15af7e2e575de9448d52fb15c813c6636de0bf 100644 --- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx @@ -10,6 +10,7 @@ import React, { type ComponentPropsWithoutRef, type ReactElement, } from 'react'; +import { Trans, useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { css } from 'glamor'; @@ -158,6 +159,8 @@ function PayeeList({ renderPayeeItem = defaultRenderPayeeItem, footer, }: PayeeListProps) { + const { t } = useTranslation(); + let createNew = null; items = [...items]; @@ -195,11 +198,11 @@ function PayeeList({ let title; if (itemType === 'common_payee' && lastType !== itemType) { - title = 'Suggested Payees'; + title = t('Suggested Payees'); } else if (itemType === 'payee' && lastType !== itemType) { - title = 'Payees'; + title = t('Payees'); } else if (itemType === 'account' && lastType !== itemType) { - title = 'Transfer To/From'; + title = t('Transfer To/From'); } const showMoreMessage = idx === items.length - 1 && items.length > 100; @@ -230,7 +233,7 @@ function PayeeList({ textAlign: 'center', }} > - More payees are available, search to find them + <Trans>More payees are available, search to find them</Trans> </div> )} </Fragment> @@ -445,12 +448,12 @@ export function PayeeAutocomplete({ setFocusTransferPayees(!focusTransferPayees); }} > - Make Transfer + <Trans>Make Transfer</Trans> </Button> )} {showManagePayees && ( <Button type="menu" onClick={() => onManagePayees()}> - Manage Payees + <Trans>Manage Payees</Trans> </Button> )} </AutocompleteFooter> @@ -520,7 +523,7 @@ export function CreatePayeeButton({ style={{ marginRight: 5, display: 'inline-block' }} /> )} - Create Payee “{payeeName}†+ <Trans>Create Payee “{{ payeeName }}â€</Trans> </View> ); } diff --git a/packages/desktop-client/src/components/autocomplete/ReportList.tsx b/packages/desktop-client/src/components/autocomplete/ReportList.tsx index 81e3ff978b17537ba4a928f50ff9b726aeda84f0..f4fb2cb553c5bb9f6ac3fdb5865acca0b7ca69d4 100644 --- a/packages/desktop-client/src/components/autocomplete/ReportList.tsx +++ b/packages/desktop-client/src/components/autocomplete/ReportList.tsx @@ -1,4 +1,5 @@ import React, { Fragment, type ComponentProps } from 'react'; +import { useTranslation } from 'react-i18next'; import { theme } from '../../style/theme'; import { View } from '../common/View'; @@ -16,6 +17,7 @@ export function ReportList<T extends { id: string; name: string }>({ highlightedIndex: number; embedded?: boolean; }) { + const { t } = useTranslation(); return ( <View> <View @@ -25,7 +27,7 @@ export function ReportList<T extends { id: string; name: string }>({ ...(!embedded && { maxHeight: 175 }), }} > - <Fragment>{ItemHeader({ title: 'Saved Reports' })}</Fragment> + <Fragment>{ItemHeader({ title: t('Saved Reports') })}</Fragment> {items.map((item, idx) => { return [ <div diff --git a/upcoming-release-notes/3275.md b/upcoming-release-notes/3275.md new file mode 100644 index 0000000000000000000000000000000000000000..e74cc174436a043552664784cc4fd5932b5a8e05 --- /dev/null +++ b/upcoming-release-notes/3275.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [psybers] +--- + +Support translations in desktop-client/components/autocomplete.