Marked files for translation

packages/desktop-client/src/components/reports/DateRange.tsx

@@ -1,4 +1,5 @@
 import React, { type ReactElement } from 'react';
+import { Trans } from 'react-i18next';
 
 import * as d from 'date-fns';
 
@@ -34,39 +35,45 @@ export function DateRange({ start, end, type }: DateRangeProps): ReactElement {
   } else {
     return (
       <Text style={{ ...styles.mediumText, color: theme.errorText }}>
-        There was a problem loading your date range
+        <Trans>There was a problem loading your date range</Trans>
       </Text>
     );
   }
 
+  const formattedStartDate = d.format(startDate, 'MMM yyyy');
+  const formattedEndDate = d.format(endDate, 'MMM yyyy');
+  let typeOrFormattedEndDate: string;
+
+  if (type && ['budget', 'average'].includes(type)) {
+    typeOrFormattedEndDate = type === 'budget' ? 'budgeted' : type;
+  } else {
+    typeOrFormattedEndDate = formattedEndDate;
+  }
+
   let content: string | ReactElement;
   if (['budget', 'average'].includes(type || '')) {
     content = (
       <div>
-        Compare {d.format(startDate, 'MMM yyyy')} to{' '}
-        {type === 'budget' ? 'budgeted' : 'average'}
-      </div>
-    );
-  } else if (startDate.getFullYear() !== endDate.getFullYear()) {
-    content = (
-      <div>
-        {type && 'Compare '}
-        {d.format(startDate, 'MMM yyyy')}
-        {type ? ' to ' : ' - '}
-        {['budget', 'average'].includes(type || '')
-          ? type
-          : d.format(endDate, 'MMM yyyy')}
+        <Trans>
+          Compare {{ formattedStartDate }} to {{ typeOrFormattedEndDate }}
+        </Trans>
       </div>
     );
-  } else if (startDate.getMonth() !== endDate.getMonth()) {
+  } else if (
+    startDate.getFullYear() !== endDate.getFullYear() ||
+    startDate.getMonth() !== endDate.getMonth()
+  ) {
     content = (
       <div>
-        {type && 'Compare '}
-        {d.format(startDate, 'MMM yyyy')}
-        {type ? ' to ' : ' - '}
-        {['budget', 'average'].includes(type || '')
-          ? type
-          : d.format(endDate, 'MMM yyyy')}
+        {type ? (
+          <Trans>
+            Compare {{ formattedStartDate }} to {{ typeOrFormattedEndDate }}
+          </Trans>
+        ) : (
+          <Trans>
+            {{ formattedStartDate }} - {{ formattedEndDate }}
+          </Trans>
+        )}
       </div>
     );
   } else {

packages/desktop-client/src/components/reports/ReportOptions.ts

@@ -1,3 +1,5 @@
+import { t } from 'i18next';
+
 import * as monthUtils from 'loot-core/src/shared/months';
 import {
   type CustomReportEntity,
@@ -32,11 +34,11 @@ export const defaultReport: CustomReportEntity = {
 };
 
 const balanceTypeOptions = [
-  { description: 'Payment', format: 'totalDebts' as const },
-  { description: 'Deposit', format: 'totalAssets' as const },
-  { description: 'Net', format: 'totalTotals' as const },
-  { description: 'Net Payment', format: 'netDebts' as const },
-  { description: 'Net Deposit', format: 'netAssets' as const },
+  { description: t('Payment'), format: 'totalDebts' as const },
+  { description: t('Deposit'), format: 'totalAssets' as const },
+  { description: t('Net'), format: 'totalTotals' as const },
+  { description: t('Net Payment'), format: 'netDebts' as const },
+  { description: t('Net Deposit'), format: 'netAssets' as const },
 ];
 
 const groupByOptions = [
@@ -59,7 +61,7 @@ export type dateRangeProps = {
 
 const dateRangeOptions: dateRangeProps[] = [
   {
-    description: 'This week',
+    description: t('This week'),
     name: 0,
     type: 'Week',
     Daily: true,
@@ -68,7 +70,7 @@ const dateRangeOptions: dateRangeProps[] = [
     Yearly: false,
   },
   {
-    description: 'Last week',
+    description: t('Last week'),
     name: 1,
     type: 'Week',
     Daily: true,
@@ -77,7 +79,7 @@ const dateRangeOptions: dateRangeProps[] = [
     Yearly: false,
   },
   {
-    description: 'This month',
+    description: t('This month'),
     name: 0,
     type: 'Month',
     Daily: true,
@@ -86,7 +88,7 @@ const dateRangeOptions: dateRangeProps[] = [
     Yearly: false,
   },
   {
-    description: 'Last month',
+    description: t('Last month'),
     name: 1,
     type: 'Month',
     Daily: true,
@@ -95,7 +97,7 @@ const dateRangeOptions: dateRangeProps[] = [
     Yearly: false,
   },
   {
-    description: 'Last 3 months',
+    description: t('Last 3 months'),
     name: 3,
     type: 'Month',
     Daily: true,
@@ -104,7 +106,7 @@ const dateRangeOptions: dateRangeProps[] = [
     Yearly: false,
   },
   {
-    description: 'Last 6 months',
+    description: t('Last 6 months'),
     name: 6,
     type: 'Month',
     Daily: false,
@@ -113,7 +115,7 @@ const dateRangeOptions: dateRangeProps[] = [
     Yearly: false,
   },
   {
-    description: 'Last 12 months',
+    description: t('Last 12 months'),
     name: 12,
     type: 'Month',
     Daily: false,
@@ -122,7 +124,7 @@ const dateRangeOptions: dateRangeProps[] = [
     Yearly: false,
   },
   {
-    description: 'Year to date',
+    description: t('Year to date'),
     name: 'yearToDate',
     type: 'Month',
     Daily: false,
@@ -131,7 +133,7 @@ const dateRangeOptions: dateRangeProps[] = [
     Yearly: true,
   },
   {
-    description: 'Last year',
+    description: t('Last year'),
     name: 'lastYear',
     type: 'Month',
     Daily: false,
@@ -140,7 +142,7 @@ const dateRangeOptions: dateRangeProps[] = [
     Yearly: true,
   },
   {
-    description: 'All time',
+    description: t('All time'),
     name: 'allTime',
     type: 'Month',
     Daily: false,
@@ -163,27 +165,27 @@ type intervalOptionsProps = {
 
 const intervalOptions: intervalOptionsProps[] = [
   {
-    description: 'Daily',
+    description: t('Daily'),
     name: 'Day',
     format: 'yy-MM-dd',
     range: 'dayRangeInclusive',
   },
   {
-    description: 'Weekly',
+    description: t('Weekly'),
     name: 'Week',
     format: 'yy-MM-dd',
     range: 'weekRangeInclusive',
   },
   //{ value: 3, description: 'Fortnightly', name: 3},
   {
-    description: 'Monthly',
+    description: t('Monthly'),
     name: 'Month',
     // eslint-disable-next-line rulesdir/typography
     format: "MMM ''yy",
     range: 'rangeInclusive',
   },
   {
-    description: 'Yearly',
+    description: t('Yearly'),
     name: 'Year',
     format: 'yyyy',
     range: 'yearRangeInclusive',
@@ -251,7 +253,7 @@ export type UncategorizedEntity = Pick<
 
 const uncategorizedCategory: UncategorizedEntity = {
   id: '',
-  name: 'Uncategorized',
+  name: t('Uncategorized'),
   uncategorized_id: '1',
   hidden: false,
   is_off_budget: false,
@@ -260,7 +262,7 @@ const uncategorizedCategory: UncategorizedEntity = {
 };
 const transferCategory: UncategorizedEntity = {
   id: '',
-  name: 'Transfers',
+  name: t('Transfers'),
   uncategorized_id: '2',
   hidden: false,
   is_off_budget: false,
@@ -269,7 +271,7 @@ const transferCategory: UncategorizedEntity = {
 };
 const offBudgetCategory: UncategorizedEntity = {
   id: '',
-  name: 'Off Budget',
+  name: t('Off Budget'),
   uncategorized_id: '3',
   hidden: false,
   is_off_budget: true,
@@ -285,7 +287,7 @@ type UncategorizedGroupEntity = Pick<
 };
 
 const uncategorizedGroup: UncategorizedGroupEntity = {
-  name: 'Uncategorized & Off Budget',
+  name: t('Uncategorized & Off Budget'),
   id: 'uncategorized',
   hidden: false,
   categories: [uncategorizedCategory, transferCategory, offBudgetCategory],
@@ -302,7 +304,7 @@ export const categoryLists = (categories: {
       const catGroupB = categories.grouped.find(f => f.id === b.cat_group);
       //initial check that both a and b have a sort_order and category group
       return a.sort_order && b.sort_order && catGroupA && catGroupB
-        ? /*sorting by "is_income" because sort_order for this group is 
+        ? /*sorting by "is_income" because sort_order for this group is
         separate from other groups*/
           Number(catGroupA.is_income) - Number(catGroupB.is_income) ||
             //Next, sorting by group sort_order

packages/desktop-client/src/components/reports/disabledList.ts

@@ -1,41 +1,43 @@
+import { t } from 'i18next';
+
 const intervalOptions = [
   {
-    description: 'Daily',
-    defaultRange: 'This month',
+    description: t('Daily'),
+    defaultRange: t('This month'),
   },
   {
-    description: 'Weekly',
-    defaultRange: 'Last 3 months',
+    description: t('Weekly'),
+    defaultRange: t('Last 3 months'),
   },
   {
-    description: 'Monthly',
-    defaultRange: 'Last 6 months',
+    description: t('Monthly'),
+    defaultRange: t('Last 6 months'),
   },
   {
-    description: 'Yearly',
-    defaultRange: 'Year to date',
+    description: t('Yearly'),
+    defaultRange: t('Year to date'),
   },
 ];
 
 const currentIntervalOptions = [
   {
-    description: 'This week',
+    description: t('This week'),
     disableInclude: true,
   },
   {
-    description: 'This month',
+    description: t('This month'),
     disableInclude: true,
   },
   {
-    description: 'Year to date',
+    description: t('Year to date'),
     disableInclude: true,
   },
   {
-    description: 'Last year',
+    description: t('Last year'),
     disableInclude: true,
   },
   {
-    description: 'All time',
+    description: t('All time'),
     disableInclude: true,
   },
 ];

packages/desktop-client/src/components/reports/index.tsx

@@ -1,12 +1,16 @@
+import { useTranslation } from 'react-i18next';
+
 import { View } from '../common/View';
 import { LoadComponent } from '../util/LoadComponent';
 
 export function Reports() {
+  const { t } = useTranslation();
+
   return (
     <View style={{ flex: 1 }} data-testid="reports-page">
       <LoadComponent
         name="ReportRouter"
-        message="Loading reports..."
+        message={t('Loading reports...')}
         importer={() =>
           import(/* webpackChunkName: 'reports' */ './ReportRouter')
         }

upcoming-release-notes/3548.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [a-gradina]
+---
+
+Support translations in various files.