Fix localization of FIRE page

apps/client/src/app/pages/portfolio/fire/fire-page.component.ts

@@ -1,6 +1,7 @@
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { SubscriptionType } from '@ghostfolio/common/enums';
+import { formatMonthAndYear } from '@ghostfolio/common/helper';
 import {
   FireCalculationCompleteEvent,
   FireWealth,
@@ -85,10 +86,10 @@ export class GfFirePageComponent implements OnInit {
       return '';
     }
 
-    return new Intl.DateTimeFormat(this.user?.settings?.locale, {
+    return formatMonthAndYear({
-      month: 'long',
+      date: new Date(retirementDate),
-      year: 'numeric'
+      locale: this.user?.settings?.locale
-    }).format(new Date(retirementDate));
+    });
   }
 
   public ngOnInit() {

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -128,13 +128,9 @@
 
         @if (user?.settings?.isExperimentalFeatures) {
           <div>
-            <ng-container i18n>By</ng-container>
+            <ng-container i18n
-            <ng-container>&nbsp;</ng-container>
+              >By <span class="font-weight-bold">{{ retirementDateLabel }}</span
-            <span class="font-weight-bold">{{ retirementDateLabel }}</span>
+              >, this is projected to increase to
-            <ng-container i18n="@@page.fire.projected.1">,</ng-container>
-            <ng-container>&nbsp;</ng-container>
-            <ng-container i18n>this is projected to increase to</ng-container>
-            <ng-container>&nbsp;</ng-container>
               <span class="font-weight-bold"
                 ><gf-value
                   class="d-inline-block"
@@ -143,12 +139,9 @@
                   [unit]="user?.settings?.baseCurrency"
                   [value]="withdrawalRatePerYearProjected?.toNumber()"
                 />
-              <ng-container>&nbsp;</ng-container>
+                per year</span
-              <ng-container i18n>per year</ng-container></span
               >
-            <ng-container>&nbsp;</ng-container>
+              or
-            <ng-container i18n>or</ng-container>
-            <ng-container>&nbsp;</ng-container>
               <span class="font-weight-bold"
                 ><gf-value
                   class="d-inline-block"
@@ -157,11 +150,8 @@
                   [unit]="user?.settings?.baseCurrency"
                   [value]="withdrawalRatePerMonthProjected?.toNumber()"
                 />
-              <ng-container>&nbsp;</ng-container>
+                per month</span
-              <ng-container i18n>per month</ng-container></span
+              >, assuming a
-            >
-            <ng-container i18n>, assuming a</ng-container>
-            <ng-container>&nbsp;</ng-container>
               <span class="font-weight-bold"
                 ><gf-value
                   class="d-inline-block"
@@ -170,8 +160,8 @@
                   [precision]="2"
                   [value]="user?.settings?.annualInterestRate / 100"
               /></span>
-            <ng-container>&nbsp;</ng-container>
+              annual interest rate.</ng-container
-            <ng-container i18n>annual interest rate</ng-container>.
+            >
           </div>
         }
       </div>

libs/common/src/lib/helper.ts

@@ -233,6 +233,19 @@ export function extractNumberFromString({
   }
 }
 
+export function formatMonthAndYear({
+  date,
+  locale
+}: {
+  date: Date;
+  locale?: string;
+}) {
+  return new Intl.DateTimeFormat(locale, {
+    month: 'long',
+    year: 'numeric'
+  }).format(date);
+}
+
 export function getAllActivityTypes(): ActivityType[] {
   return Object.values(ActivityType);
 }

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -3,7 +3,7 @@ import {
   transformTickToAbbreviation
 } from '@ghostfolio/common/chart-helper';
 import { primaryColorRgb } from '@ghostfolio/common/config';
-import { getLocale } from '@ghostfolio/common/helper';
+import { formatMonthAndYear, getLocale } from '@ghostfolio/common/helper';
 import { FireCalculationCompleteEvent } from '@ghostfolio/common/interfaces';
 import { ColorScheme } from '@ghostfolio/common/types';
 
@@ -215,10 +215,10 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
       return '';
     }
 
-    return new Intl.DateTimeFormat(this.locale, {
+    return formatMonthAndYear({
-      month: 'long',
+      date: retirementDate,
-      year: 'numeric'
+      locale: this.locale
-    }).format(retirementDate);
+    });
   }
 
   public ngOnChanges() {