Marked files for translation (#3827)

* Add translation files for desktop client

* Add backend translation files for i18n integration

* code refactored

* code refactored

* code refactored

Author: awaisalee

packages/desktop-client/src/components/Modals.tsx

@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
@@ -81,6 +82,8 @@ export function Modals() {
     }
   }, [location]);
 
+  const { t } = useTranslation();
+
   const modals = modalStack
     .map(({ name, options }) => {
       switch (name) {
@@ -287,10 +290,12 @@ export function Modals() {
               Header={props => (
                 <ModalHeader
                   {...props}
-                  title={<ModalTitle title="New Category" shrinkOnOverflow />}
+                  title={
+                    <ModalTitle title={t('New Category')} shrinkOnOverflow />
+                  }
                 />
               )}
-              inputPlaceholder="Category name"
+              inputPlaceholder={t('Category name')}
               buttonText="Add"
               onValidate={options.onValidate}
               onSubmit={options.onSubmit}
@@ -306,12 +311,15 @@ export function Modals() {
                 <ModalHeader
                   {...props}
                   title={
-                    <ModalTitle title="New Category Group" shrinkOnOverflow />
+                    <ModalTitle
+                      title={t('New Category Group')}
+                      shrinkOnOverflow
+                    />
                   }
                 />
               )}
-              inputPlaceholder="Category group name"
-              buttonText="Add"
+              inputPlaceholder={t('Category group name')}
+              buttonText={t('Add')}
               onValidate={options.onValidate}
               onSubmit={options.onSubmit}
             />

packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx

@@ -2,6 +2,7 @@ import React, {
   type ComponentPropsWithoutRef,
   type CSSProperties,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useLocalPref } from '../../hooks/useLocalPref';
 import { theme, styles } from '../../style';
@@ -77,6 +78,7 @@ function BudgetPageMenu({
         throw new Error(`Unrecognized menu item: ${name}`);
     }
   };
+  const { t } = useTranslation();
 
   return (
     <Menu
@@ -85,15 +87,15 @@ function BudgetPageMenu({
       items={[
         {
           name: 'add-category-group',
-          text: 'Add category group',
+          text: t('Add category group'),
         },
         {
           name: 'toggle-hidden-categories',
-          text: `${!showHiddenCategories ? 'Show' : 'Hide'} hidden categories`,
+          text: `${!showHiddenCategories ? t('Show') : t('Hide')} ${t('hidden categories')}`,
         },
         {
           name: 'switch-budget-file',
-          text: 'Switch budget file',
+          text: t('Switch budget file'),
         },
       ]}
     />

packages/desktop-client/src/components/payees/ManagePayeesPage.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
 import { Page } from '../Page';
 
 import { ManagePayeesWithData } from './ManagePayeesWithData';
 
 export function ManagePayeesPage() {
+  const { t } = useTranslation();
   const location = useLocation();
   return (
-    <Page header="Payees">
+    <Page header={t('Payees')}>
       <ManagePayeesWithData
         initialSelectedIds={
           location.state && location.state.selectedPayee

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

@@ -1,5 +1,6 @@
 import React, { createRef, useEffect, useState } from 'react';
 import { Form } from 'react-aria-components';
+import { useTranslation } from 'react-i18next';
 
 import { theme } from '../../style/theme';
 import { Button } from '../common/Button2';
@@ -16,6 +17,7 @@ export function SaveReportChoose({ onApply }: SaveReportChooseProps) {
   const inputRef = createRef<HTMLInputElement>();
   const [err, setErr] = useState('');
   const [value, setValue] = useState('');
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (inputRef.current) {
@@ -38,7 +40,9 @@ export function SaveReportChoose({ onApply }: SaveReportChooseProps) {
         }}
       >
         <View style={{ flexDirection: 'row', align: 'center' }}>
-          <Text style={{ userSelect: 'none', flex: 1 }}>Choose Report</Text>
+          <Text style={{ userSelect: 'none', flex: 1 }}>
+            {t('Choose Report')}
+          </Text>
           <View style={{ flex: 1 }} />
         </View>
         <GenericInput
@@ -60,7 +64,7 @@ export function SaveReportChoose({ onApply }: SaveReportChooseProps) {
         >
           <View style={{ flex: 1 }} />
           <Button variant="primary" type="submit">
-            Apply
+            {t('Apply')}
           </Button>
         </Stack>
       </Form>

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Menu, type MenuItem } from '../common/Menu';
 
@@ -11,45 +12,46 @@ export function SaveReportMenu({
   savedStatus: string;
   listReports: number;
 }) {
+  const { t } = useTranslation();
   const savedMenu: MenuItem[] =
     savedStatus === 'saved'
       ? [
-          { name: 'rename-report', text: 'Rename' },
-          { name: 'delete-report', text: 'Delete' },
+          { name: 'rename-report', text: t('Rename') },
+          { name: 'delete-report', text: t('Delete') },
           Menu.line,
         ]
       : [];
 
   const modifiedMenu: MenuItem[] =
     savedStatus === 'modified'
       ? [
-          { name: 'rename-report', text: 'Rename' },
+          { name: 'rename-report', text: t('Rename') },
           {
             name: 'update-report',
-            text: 'Update report',
+            text: t('Update report'),
           },
           {
             name: 'reload-report',
-            text: 'Revert changes',
+            text: t('Revert changes'),
           },
-          { name: 'delete-report', text: 'Delete' },
+          { name: 'delete-report', text: t('Delete') },
           Menu.line,
         ]
       : [];
 
   const unsavedMenu: MenuItem[] = [
     {
       name: 'save-report',
-      text: 'Save new report',
+      text: t('Save new report'),
     },
     {
       name: 'reset-report',
-      text: 'Reset to default',
+      text: t('Reset to default'),
     },
     Menu.line,
     {
       name: 'choose-report',
-      text: 'Choose Report',
+      text: t('Choose Report'),
       disabled: listReports > 0 ? false : true,
     },
   ];

packages/desktop-client/src/components/util/DisplayId.tsx

@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useAccount } from '../../hooks/useAccount';
 import { usePayee } from '../../hooks/usePayee';
@@ -25,25 +26,27 @@ export function DisplayId({
 }
 
 function AccountDisplayId({ id, noneColor }) {
+  const { t } = useTranslation();
   const account = useAccount(id);
   return (
     <Text
       style={account == null ? { color: noneColor } : null}
-      title={account ? account.name : 'None'}
+      title={account ? account.name : t('None')}
     >
-      {account ? account.name : 'None'}
+      {account ? account.name : t('None')}
     </Text>
   );
 }
 
 function PayeeDisplayId({ id, noneColor }) {
+  const { t } = useTranslation();
   const payee = usePayee(id);
   return (
     <Text
       style={payee == null ? { color: noneColor } : null}
-      title={payee ? payee.name : 'None'}
+      title={payee ? payee.name : t('None')}
     >
-      {payee ? payee.name : 'None'}
+      {payee ? payee.name : t('None')}
     </Text>
   );
 }

packages/loot-core/src/server/budget/cleanup-template.ts

@@ -1,4 +1,6 @@
 // @ts-strict-ignore
+import { t } from 'i18next';
+
 import { Notification } from '../../client/state-types/notifications';
 import * as monthUtils from '../../shared/months';
 import * as db from '../db';
@@ -113,7 +115,7 @@ async function applyGroupCleanups(
         });
       }
     } else {
-      warnings.push(groupName + ' has no matching sink categories.');
+      warnings.push(groupName + t(' has no matching sink categories.'));
     }
     sourceGroups = sourceGroups.filter(c => c.group !== groupName);
     groupLength = sourceGroups.length;
@@ -218,7 +220,7 @@ async function processCleanup(month: string): Promise<Notification> {
           });
           num_sources += 1;
         } else {
-          warnings.push(category.name + ' does not have available funds.');
+          warnings.push(category.name + t(' does not have available funds.'));
         }
         const carryover = await db.first(
           `SELECT carryover FROM zero_budgets WHERE month = ? and category = ?`,
@@ -285,7 +287,7 @@ async function processCleanup(month: string): Promise<Notification> {
 
   const budgetAvailable = await getSheetValue(sheetName, `to-budget`);
   if (budgetAvailable <= 0) {
-    warnings.push('Global: No funds are available to reallocate.');
+    warnings.push(t('Global: No funds are available to reallocate.'));
   }
 
   //fill sinking categories
@@ -320,19 +322,19 @@ async function processCleanup(month: string): Promise<Notification> {
       return {
         type: 'error',
         sticky: true,
-        message: `There were errors interpreting some templates:`,
+        message: t('There were errors interpreting some templates:'),
         pre: errors.join('\n\n'),
       };
     } else if (warnings.length) {
       return {
         type: 'warning',
-        message: 'Global: Funds not available:',
+        message: t('Global: Funds not available:'),
         pre: warnings.join('\n\n'),
       };
     } else {
       return {
         type: 'message',
-        message: 'All categories were up to date.',
+        message: t('All categories were up to date.'),
       };
     }
   } else {
@@ -342,13 +344,15 @@ async function processCleanup(month: string): Promise<Notification> {
     if (errors.length) {
       return {
         sticky: true,
-        message: `${applied} There were errors interpreting some templates:`,
+        message: t('{applied} There were errors interpreting some templates:', {
+          applied,
+        }),
         pre: errors.join('\n\n'),
       };
     } else if (warnings.length) {
       return {
         type: 'warning',
-        message: 'Global: Funds not available:',
+        message: t('Global: Funds not available:'),
         pre: warnings.join('\n\n'),
       };
     } else {

packages/loot-core/src/server/budget/goaltemplates.ts

@@ -1,4 +1,6 @@
 // @ts-strict-ignore
+import { t } from 'i18next';
+
 import { Notification } from '../../client/state-types/notifications';
 import * as monthUtils from '../../shared/months';
 import * as db from '../db';
@@ -188,13 +190,13 @@ async function processTemplate(
   if (catObjects.length === 0 && errors.length === 0) {
     return {
       type: 'message',
-      message: 'Everything is up to date',
+      message: t('Everything is up to date'),
     };
   }
   if (errors.length > 0) {
     return {
       sticky: true,
-      message: `There were errors interpreting some templates:`,
+      message: t('There were errors interpreting some templates:'),
       pre: errors.join(`\n\n`),
     };
   }
@@ -245,6 +247,8 @@ async function processTemplate(
 
   return {
     type: 'message',
-    message: `Successfully applied templates to ${catObjects.length} categories`,
+    message: t('Successfully applied templates to {length} categories', {
+      length: catObjects.length,
+    }),
   };
 }

packages/loot-core/src/server/main.ts

@@ -3,6 +3,7 @@ import './polyfills';
 
 import * as injectAPI from '@actual-app/api/injected';
 import * as CRDT from '@actual-app/crdt';
+import { t } from 'i18next';
 import { v4 as uuidv4 } from 'uuid';
 
 import { createTestBudget } from '../mocks/budget';
@@ -1087,14 +1088,18 @@ function handleSyncError(err, acct) {
       accountId: acct.id,
       message: err.reason
         ? err.reason
-        : `Account “${acct.name}” is not linked properly. Please link it again.`,
+        : t(
+            'Account “{acctName}” is not linked properly. Please link it again.',
+            { acctName: acct.name },
+          ),
     };
   }
 
   return {
     accountId: acct.id,
-    message:
+    message: t(
       'There was an internal error. Please get in touch https://actualbudget.org/contact for support.',
+    ),
     internal: err.stack,
   };
 }

packages/loot-core/src/server/mutators.ts

@@ -1,4 +1,6 @@
 // @ts-strict-ignore
+import { t } from 'i18next';
+
 import { captureException, captureBreadcrumb } from '../platform/exceptions';
 import { sequential } from '../shared/async';
 import { type HandlerFunctions, type Handlers } from '../types/handlers';
@@ -121,7 +123,7 @@ export function getMutatorContext() {
   if (currentContext == null) {
     captureBreadcrumb({
       category: 'server',
-      message: 'Recent methods: ' + _latestHandlerNames.join(', '),
+      message: t('Recent methods: ') + _latestHandlerNames.join(', '),
     });
     // captureException(new Error('getMutatorContext: mutator not running'));