Added the i18n translation for desktop-client (actualbudget#3832)

tlesicka · Nov 14, 2024 · 670419b · 670419b
1 parent 58baf74
commit 670419b
Show file tree

Hide file tree

Showing 13 changed files with 115 additions and 58 deletions.
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
@@ -3,6 +3,8 @@ import React, {
   type CSSProperties,
 } from 'react';
 
+import { t } from 'i18next';
+
 import { envelopeBudget } from 'loot-core/client/queries';
 
 import { useCategory } from '../../hooks/useCategory';
@@ -66,7 +68,7 @@ export function EnvelopeBalanceMenuModal({
                 fontWeight: 400,
               }}
             >
-              Balance
+              {t('Balance')}
             </Text>
             <BalanceWithCarryover
               isDisabled

diff --git a/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
@@ -5,6 +5,8 @@ import React, {
   type CSSProperties,
 } from 'react';
 
+import { t } from 'i18next';
+
 import { envelopeBudget } from 'loot-core/client/queries';
 import { amountToInteger, integerToAmount } from 'loot-core/shared/util';
 
@@ -82,7 +84,7 @@ export function EnvelopeBudgetMenuModal({
                 fontWeight: 400,
               }}
             >
-              Budgeted
+              {t('Budgeted')}
             </Text>
             <FocusableAmountInput
               value={integerToAmount(budgeted || 0)}

diff --git a/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx
@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import React, { useState, type CSSProperties } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { css } from '@emotion/css';
 
@@ -56,6 +57,7 @@ export function EnvelopeBudgetMonthMenuModal({
   };
 
   const displayMonth = monthUtils.format(month, 'MMMM ‘yy');
+  const { t } = useTranslation();
 
   return (
     <Modal
@@ -113,7 +115,7 @@ export function EnvelopeBudgetMonthMenuModal({
                     height={20}
                     style={{ paddingRight: 5 }}
                   />
-                  Edit notes
+                  {t('Edit notes')}
                 </Button>
               </View>
               <View>
@@ -143,7 +145,7 @@ export function EnvelopeBudgetMonthMenuModal({
                       style={{ paddingRight: 5 }}
                     />
                   )}
-                  Actions
+                  {t('Actions')}
                 </Button>
               </View>
             </View>
@@ -155,14 +157,20 @@ export function EnvelopeBudgetMonthMenuModal({
                   onBudgetAction(month, 'copy-last');
                   close();
                   showUndoNotification({
-                    message: `${displayMonth} budgets have all been set to last month’s budgeted amounts.`,
+                    message: t(
+                      '{displayMonth} budgets have all been set to last month’s budgeted amounts.',
+                      { displayMonth },
+                    ),
                   });
                 }}
                 onSetBudgetsToZero={() => {
                   onBudgetAction(month, 'set-zero');
                   close();
                   showUndoNotification({
-                    message: `${displayMonth} budgets have all been set to zero.`,
+                    message: t(
+                      '{displayMonth} budgets have all been set to zero.',
+                      { displayMonth },
+                    ),
                   });
                 }}
                 onSetMonthsAverage={numberOfMonths => {
@@ -180,21 +188,30 @@ export function EnvelopeBudgetMonthMenuModal({
                   onBudgetAction(month, 'apply-goal-template');
                   close();
                   showUndoNotification({
-                    message: `${displayMonth} budget templates have been applied.`,
+                    message: t(
+                      '{displayMonth} budget templates have been applied.',
+                      { displayMonth },
+                    ),
                   });
                 }}
                 onOverwriteWithBudgetTemplates={() => {
                   onBudgetAction(month, 'overwrite-goal-template');
                   close();
                   showUndoNotification({
-                    message: `${displayMonth} budget templates have been overwritten.`,
+                    message: t(
+                      '{displayMonth} budget templates have been overwritten.',
+                      { displayMonth },
+                    ),
                   });
                 }}
                 onEndOfMonthCleanup={() => {
                   onBudgetAction(month, 'cleanup-goal-template');
                   close();
                   showUndoNotification({
-                    message: `${displayMonth} end-of-month cleanup templates have been applied.`,
+                    message: t(
+                      '{displayMonth} end-of-month cleanup templates have been applied.',
+                      { displayMonth },
+                    ),
                   });
                 }}
               />

diff --git a/packages/desktop-client/src/components/modals/EnvelopeBudgetSummaryModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBudgetSummaryModal.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import { collapseModals, pushModal } from 'loot-core/client/actions';
@@ -35,11 +36,12 @@ export function EnvelopeBudgetSummaryModal({
   const { showUndoNotification } = useUndo();
   const { list: categories } = useCategories();
   const categoriesById = groupById(categories);
+  const { t } = useTranslation();
 
   const openTransferAvailableModal = () => {
     dispatch(
       pushModal('transfer', {
-        title: 'Transfer: To Budget',
+        title: t('Transfer: To Budget'),
         month,
         amount: sheetValue,
         onSubmit: (amount, toCategoryId) => {
@@ -60,7 +62,7 @@ export function EnvelopeBudgetSummaryModal({
   const openCoverOverbudgetedModal = () => {
     dispatch(
       pushModal('cover', {
-        title: 'Cover: Overbudgeted',
+        title: t('Cover: Overbudgeted'),
         month,
         showToBeBudgeted: false,
         onSubmit: categoryId => {
@@ -112,7 +114,7 @@ export function EnvelopeBudgetSummaryModal({
       {({ state: { close } }) => (
         <>
           <ModalHeader
-            title="Budget Summary"
+            title={t('Budget Summary')}
             rightContent={<ModalCloseButton onPress={close} />}
           />
           <NamespaceContext.Provider value={sheetForMonth(month)}>

diff --git a/packages/desktop-client/src/components/modals/LoadBackupModal.tsx b/packages/desktop-client/src/components/modals/LoadBackupModal.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import { loadBackup, makeBackup } from 'loot-core/client/actions';
@@ -73,13 +74,14 @@ export function LoadBackupModal({
   const previousBackups = backups.filter(
     backup => !('isLatest' in backup ? backup.isLatest : false),
   );
+  const { t } = useTranslation();
 
   return (
     <Modal name="load-backup" containerProps={{ style: { maxWidth: '30vw' } }}>
       {({ state: { close } }) => (
         <>
           <ModalHeader
-            title="Load Backup"
+            title={t('Load Backup')}
             rightContent={<ModalCloseButton onPress={close} />}
           />
           <View style={{ marginBottom: 30 }}>
@@ -95,44 +97,46 @@ export function LoadBackupModal({
                 <Block>
                   <Block style={{ marginBottom: 10 }}>
                     <Text style={{ fontWeight: 600 }}>
-                      You are currently working from a backup.
+                      {t('You are currently working from a backup.')}
                     </Text>{' '}
-                    You can load a different backup or revert to the original
-                    version below.
+                    {t(
+                      'You can load a different backup or revert to the original version below.',
+                    )}
                   </Block>
                   <Button
                     variant="primary"
                     onPress={() =>
                       dispatch(loadBackup(budgetIdToLoad, latestBackup.id))
                     }
                   >
-                    Revert to original version
+                    {t('Revert to original version')}
                   </Button>
                 </Block>
               ) : (
                 <View style={{ alignItems: 'flex-start' }}>
                   <Block style={{ marginBottom: 10 }}>
-                    Select a backup to load. After loading a backup, you will
-                    have a chance to revert to the current version in this
-                    screen.{' '}
+                    {t(
+                      'Select a backup to load. After loading a backup, you will have a chance to revert to the current version in this screen.',
+                    )}{' '}
                     <Text style={{ fontWeight: 600 }}>
-                      If you use a backup, you will have to setup all your
-                      devices to sync from the new budget.
+                      {t(
+                        'If you use a backup, you will have to setup all your devices to sync from the new budget.',
+                      )}
                     </Text>
                   </Block>
                   <Button
                     variant="primary"
                     isDisabled={backupDisabled}
                     onPress={() => dispatch(makeBackup())}
                   >
-                    Backup now
+                    {t('Backup now')}
                   </Button>
                 </View>
               )}
             </View>
             {previousBackups.length === 0 ? (
               <Block style={{ color: theme.tableTextLight, marginLeft: 20 }}>
-                No backups available
+                {t('No backups available')}
               </Block>
             ) : (
               <BackupTable

diff --git a/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
@@ -3,6 +3,8 @@ import React, {
   type CSSProperties,
 } from 'react';
 
+import { t } from 'i18next';
+
 import { trackingBudget } from 'loot-core/client/queries';
 
 import { useCategory } from '../../hooks/useCategory';
@@ -64,7 +66,7 @@ export function TrackingBalanceMenuModal({
                 fontWeight: 400,
               }}
             >
-              Balance
+              {t('Balance')}
             </Text>
             <BalanceWithCarryover
               isDisabled

diff --git a/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx
@@ -5,6 +5,8 @@ import React, {
   type CSSProperties,
 } from 'react';
 
+import { t } from 'i18next';
+
 import { trackingBudget } from 'loot-core/client/queries';
 import { amountToInteger, integerToAmount } from 'loot-core/shared/util';
 
@@ -82,7 +84,7 @@ export function TrackingBudgetMenuModal({
                 fontWeight: 400,
               }}
             >
-              Budgeted
+              {t('Budgeted')}
             </Text>
             <FocusableAmountInput
               value={integerToAmount(budgeted || 0)}

diff --git a/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx
@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import React, { useState, type CSSProperties } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { css } from '@emotion/css';
 
@@ -27,6 +28,7 @@ export function TrackingBudgetMonthMenuModal({
   onBudgetAction,
   onEditNotes,
 }: TrackingBudgetMonthMenuModalProps) {
+  const { t } = useTranslation();
   const originalNotes = useNotes(`budget-${month}`);
   const { showUndoNotification } = useUndo();
 
@@ -84,7 +86,9 @@ export function TrackingBudgetMonthMenuModal({
               }}
             >
               <Notes
-                notes={originalNotes?.length > 0 ? originalNotes : 'No notes'}
+                notes={
+                  originalNotes?.length > 0 ? originalNotes : t('No notes')
+                }
                 editable={false}
                 focused={false}
                 getStyle={() => ({
@@ -113,7 +117,7 @@ export function TrackingBudgetMonthMenuModal({
                     height={20}
                     style={{ paddingRight: 5 }}
                   />
-                  Edit notes
+                  {t('Edit notes')}
                 </Button>
               </View>
               <View>
@@ -143,7 +147,7 @@ export function TrackingBudgetMonthMenuModal({
                       style={{ paddingRight: 5 }}
                     />
                   )}
-                  Actions
+                  {t('Actions')}
                 </Button>
               </View>
             </View>
@@ -155,14 +159,20 @@ export function TrackingBudgetMonthMenuModal({
                   onBudgetAction(month, 'copy-last');
                   close();
                   showUndoNotification({
-                    message: `${displayMonth} budgets have all been set to last month’s budgeted amounts.`,
+                    message: t(
+                      '{displayMonth} budgets have all been set to last month’s budgeted amounts.',
+                      { displayMonth },
+                    ),
                   });
                 }}
                 onSetBudgetsToZero={() => {
                   onBudgetAction(month, 'set-zero');
                   close();
                   showUndoNotification({
-                    message: `${displayMonth} budgets have all been set to zero.`,
+                    message: t(
+                      '{displayMonth} budgets have all been set to zero.',
+                      { displayMonth },
+                    ),
                   });
                 }}
                 onSetMonthsAverage={numberOfMonths => {
@@ -180,14 +190,20 @@ export function TrackingBudgetMonthMenuModal({
                   onBudgetAction(month, 'apply-goal-template');
                   close();
                   showUndoNotification({
-                    message: `${displayMonth} budget templates have been applied.`,
+                    message: t(
+                      '{displayMonth} budget templates have been applied.',
+                      { displayMonth },
+                    ),
                   });
                 }}
                 onOverwriteWithBudgetTemplates={() => {
                   onBudgetAction(month, 'overwrite-goal-template');
                   close();
                   showUndoNotification({
-                    message: `${displayMonth} budget templates have been overwritten.`,
+                    message: t(
+                      '{displayMonth} budget templates have been overwritten.',
+                      { displayMonth },
+                    ),
                   });
                 }}
               />

diff --git a/packages/desktop-client/src/components/modals/TrackingBudgetSummaryModal.tsx b/packages/desktop-client/src/components/modals/TrackingBudgetSummaryModal.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { sheetForMonth } from 'loot-core/src/shared/months';
 import * as monthUtils from 'loot-core/src/shared/months';
@@ -18,13 +19,14 @@ type TrackingBudgetSummaryModalProps = {
 export function TrackingBudgetSummaryModal({
   month,
 }: TrackingBudgetSummaryModalProps) {
+  const { t } = useTranslation();
   const currentMonth = monthUtils.currentMonth();
   return (
     <Modal name="tracking-budget-summary">
       {({ state: { close } }) => (
         <>
           <ModalHeader
-            title="Budget Summary"
+            title={t('Budget Summary')}
             rightContent={<ModalCloseButton onPress={close} />}
           />
           <NamespaceContext.Provider value={sheetForMonth(month)}>