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, {
-      month: 'long',
-      year: 'numeric'
-    }).format(new Date(retirementDate));
+    return formatMonthAndYear({
+      date: new Date(retirementDate),
+      locale: this.user?.settings?.locale
+    });
   }
 
   public ngOnInit() {

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

@@ -128,50 +128,40 @@
 
         @if (user?.settings?.isExperimentalFeatures) {
           <div>
-            <ng-container i18n>By</ng-container>
-            <ng-container>&nbsp;</ng-container>
-            <span class="font-weight-bold">{{ retirementDateLabel }}</span>
-            <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"
-                [isCurrency]="true"
-                [locale]="user?.settings?.locale"
-                [unit]="user?.settings?.baseCurrency"
-                [value]="withdrawalRatePerYearProjected?.toNumber()"
-              />
-              <ng-container>&nbsp;</ng-container>
-              <ng-container i18n>per year</ng-container></span
-            >
-            <ng-container>&nbsp;</ng-container>
-            <ng-container i18n>or</ng-container>
-            <ng-container>&nbsp;</ng-container>
-            <span class="font-weight-bold"
-              ><gf-value
-                class="d-inline-block"
-                [isCurrency]="true"
-                [locale]="user?.settings?.locale"
-                [unit]="user?.settings?.baseCurrency"
-                [value]="withdrawalRatePerMonthProjected?.toNumber()"
-              />
-              <ng-container>&nbsp;</ng-container>
-              <ng-container i18n>per month</ng-container></span
+            <ng-container i18n
+              >By <span class="font-weight-bold">{{ retirementDateLabel }}</span
+              >, this is projected to increase to
+              <span class="font-weight-bold"
+                ><gf-value
+                  class="d-inline-block"
+                  [isCurrency]="true"
+                  [locale]="user?.settings?.locale"
+                  [unit]="user?.settings?.baseCurrency"
+                  [value]="withdrawalRatePerYearProjected?.toNumber()"
+                />
+                per year</span
+              >
+              or
+              <span class="font-weight-bold"
+                ><gf-value
+                  class="d-inline-block"
+                  [isCurrency]="true"
+                  [locale]="user?.settings?.locale"
+                  [unit]="user?.settings?.baseCurrency"
+                  [value]="withdrawalRatePerMonthProjected?.toNumber()"
+                />
+                per month</span
+              >, assuming a
+              <span class="font-weight-bold"
+                ><gf-value
+                  class="d-inline-block"
+                  [isPercent]="true"
+                  [locale]="user?.settings?.locale"
+                  [precision]="2"
+                  [value]="user?.settings?.annualInterestRate / 100"
+              /></span>
+              annual interest rate.</ng-container
             >
-            <ng-container i18n>, assuming a</ng-container>
-            <ng-container>&nbsp;</ng-container>
-            <span class="font-weight-bold"
-              ><gf-value
-                class="d-inline-block"
-                [isPercent]="true"
-                [locale]="user?.settings?.locale"
-                [precision]="2"
-                [value]="user?.settings?.annualInterestRate / 100"
-            /></span>
-            <ng-container>&nbsp;</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, {
-      month: 'long',
-      year: 'numeric'
-    }).format(retirementDate);
+    return formatMonthAndYear({
+      date: retirementDate,
+      locale: this.locale
+    });
   }
 
   public ngOnChanges() {