Fix translate custom report and rule (#5486)

* translate Allocation Methods

* fix translate Action

translate Split info

* translate date range

* translate monthly spending

* translate shorter filter

* translate date filter reports custom

* add relese note

---------

Co-authored-by: Alex <Alex>

packages/desktop-client/src/components/modals/EditRuleModal.jsx

@@ -34,7 +34,7 @@ import {
   unparse,
   makeValue,
   FIELD_TYPES,
-  ALLOCATION_METHODS,
+  getAllocationMethods,
   isValidOp,
   getValidOps,
 } from 'loot-core/shared/rules';
@@ -379,21 +379,27 @@ function ScheduleDescription({ id }) {
   );
 }
 
-const actionFields = [
-  'category',
-  'payee',
-  'payee_name',
-  'notes',
-  'cleared',
-  'account',
-  'date',
-  'amount',
-].map(field => [field, mapField(field)]);
+function getActionFields() {
+  return [
+    'category',
+    'payee',
+    'payee_name',
+    'notes',
+    'cleared',
+    'account',
+    'date',
+    'amount',
+  ].map(field => [field, mapField(field)]);
+}
 const parentOnlyFields = ['amount', 'cleared', 'account', 'date'];
-const splitActionFields = actionFields.filter(
-  ([field]) => !parentOnlyFields.includes(field),
-);
-const allocationMethodOptions = Object.entries(ALLOCATION_METHODS);
+function getSplitActionFields() {
+  return getActionFields().filter(
+    ([field]) => !parentOnlyFields.includes(field),
+  );
+}
+function getAllocationMethodOptions() {
+  return Object.entries(getAllocationMethods());
+}
 function ActionEditor({ action, editorStyle, onChange, onDelete, onAdd }) {
   const { t } = useTranslation();
   const {
@@ -413,7 +419,7 @@ function ActionEditor({ action, editorStyle, onChange, onDelete, onAdd }) {
   const isTemplatingEnabled = actionTemplating || templated;
 
   const fields = (
-    options?.splitIndex ? splitActionFields : actionFields
+    options?.splitIndex ? getSplitActionFields() : getActionFields()
   ).filter(([s]) => actionTemplating || !s.includes('_name') || field === s);
 
   return (
@@ -475,7 +481,7 @@ function ActionEditor({ action, editorStyle, onChange, onDelete, onAdd }) {
           </View>
 
           <SplitAmountMethodSelect
-            options={allocationMethodOptions}
+            options={getAllocationMethodOptions()}
             value={options.method}
             onChange={onChange}
           />
@@ -878,7 +884,8 @@ export function EditRuleModal({
         inputKey: uuid(),
       };
     } else {
-      const fieldsArray = splitIndex === 0 ? actionFields : splitActionFields;
+      const fieldsArray =
+        splitIndex === 0 ? getActionFields() : getSplitActionFields();
       let fields = fieldsArray.map(f => f[0]);
       for (const action of actionSplits[splitIndex].actions) {
         fields = fields.filter(f => f !== action.field);

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

@@ -1,5 +1,5 @@
 import React, { type ReactElement } from 'react';
-import { Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { Block } from '@actual-app/components/block';
 import { styles } from '@actual-app/components/styles';
@@ -27,6 +27,7 @@ function checkDate(date: string) {
 }
 
 export function DateRange({ start, end, type }: DateRangeProps): ReactElement {
+  const { t } = useTranslation();
   const locale = useLocale();
   const checkStart = checkDate(start);
   const checkEnd = checkDate(end);
@@ -49,7 +50,7 @@ export function DateRange({ start, end, type }: DateRangeProps): ReactElement {
   let typeOrFormattedEndDate: string;
 
   if (type && ['budget', 'average'].includes(type)) {
-    typeOrFormattedEndDate = type === 'budget' ? 'budgeted' : type;
+    typeOrFormattedEndDate = type === 'budget' ? t('budgeted') : t('average');
   } else {
     typeOrFormattedEndDate = formattedEndDate;
   }

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

@@ -31,6 +31,7 @@ import { validateEnd, validateStart } from './reportRanges';
 import { setSessionReport } from './setSessionReport';
 
 import { Information } from '@desktop-client/components/alerts';
+import { useLocale } from '@desktop-client/hooks/useLocale';
 
 type ReportSidebarProps = {
   customReportItems: CustomReportEntity;
@@ -96,6 +97,8 @@ export function ReportSidebar({
   isComplexCategoryCondition = false,
 }: ReportSidebarProps) {
   const { t } = useTranslation();
+  const locale = useLocale();
+
   const [menuOpen, setMenuOpen] = useState(false);
   const triggerRef = useRef(null);
 
@@ -555,6 +558,7 @@ export function ReportSidebar({
                   ReportOptions.intervalFormat.get(
                     customReportItems.interval,
                   ) || '',
+                  locale,
                 )}
                 options={allIntervals.map(({ name, pretty }) => [name, pretty])}
               />
@@ -587,6 +591,7 @@ export function ReportSidebar({
                   ReportOptions.intervalFormat.get(
                     customReportItems.interval,
                   ) || '',
+                  locale,
                 )}
                 options={allIntervals.map(({ name, pretty }) => [name, pretty])}
               />

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

@@ -161,7 +161,7 @@ function CustomReportListCardsInner({
               <DateRange start={report.startDate} end={report.endDate} />
             ) : (
               <Text style={{ color: theme.pageTextSubdued }}>
-                {report.dateRange}
+                {t(report.dateRange)}
               </Text>
             )}
           </View>

packages/desktop-client/src/components/rules/ActionExpression.tsx

@@ -8,7 +8,7 @@ import { View } from '@actual-app/components/view';
 import {
   mapField,
   friendlyOp,
-  ALLOCATION_METHODS,
+  getAllocationMethods,
 } from 'loot-core/shared/rules';
 import {
   type SetSplitAmountRuleActionEntity,
@@ -98,7 +98,7 @@ function SetSplitAmountActionExpression({
   return (
     <>
       <Text>{friendlyOp(op)}</Text>{' '}
-      <Text style={valueStyle}>{ALLOCATION_METHODS[method]}</Text>
+      <Text style={valueStyle}>{getAllocationMethods()[method]}</Text>
       {method !== 'remainder' && ': '}
       {method === 'fixed-amount' && (
         <Value style={valueStyle} value={value} field="amount" />

packages/desktop-client/src/components/rules/RuleRow.tsx

@@ -188,7 +188,7 @@ export const RuleRow = memo(
                           marginBottom: 6,
                         }}
                       >
-                        {i ? `Split ${i}` : 'Apply to all'}
+                        {i ? t('Split {{num}}', { num: i }) : t('Apply to all')}
                       </Text>
                       {split.actions.map((action, j) => (
                         <ActionExpression

packages/desktop-client/src/components/rules/Value.tsx

@@ -161,7 +161,7 @@ export function Value<T>({
           <Text style={valueStyle}>
             &nbsp;&nbsp;
             <Link variant="text" onClick={onExpand} style={valueStyle}>
-              {numHidden} more items...
+              {t('{{num}} more items...', { num: numHidden })}
             </Link>
             {!inline && <br />}
           </Text>

packages/loot-core/src/shared/rules.ts

@@ -115,11 +115,13 @@ export function getValidOps(field: keyof FieldValueTypes) {
   );
 }
 
-export const ALLOCATION_METHODS = {
-  'fixed-amount': 'a fixed amount',
-  'fixed-percent': 'a fixed percent of the remainder',
-  remainder: 'an equal portion of the remainder',
-};
+export function getAllocationMethods() {
+  return {
+    'fixed-amount': t('a fixed amount'),
+    'fixed-percent': t('a fixed percent of the remainder'),
+    remainder: t('an equal portion of the remainder'),
+  };
+}
 
 export function mapField(field, opts?) {
   opts = opts || {};