From c8ec71b95fc4dbc9d2af1e68dba21a96b59de66c Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 17 Jul 2025 21:00:01 +0200
Subject: [PATCH] Localize durations of coupon system

---
 .../admin-overview.component.ts               | 11 ++++++++
 .../admin-overview/admin-overview.html        | 28 ++++++++++++++-----
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/app/components/admin-overview/admin-overview.component.ts b/apps/client/src/app/components/admin-overview/admin-overview.component.ts
index 377dd5f20..bc0c657dd 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.component.ts
+++ b/apps/client/src/app/components/admin-overview/admin-overview.component.ts
@@ -12,6 +12,7 @@ import {
   PROPERTY_SYSTEM_MESSAGE,
   ghostfolioPrefix
 } from '@ghostfolio/common/config';
+import { getDateFnsLocale } from '@ghostfolio/common/helper';
 import {
   Coupon,
   InfoItem,
@@ -24,6 +25,7 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import {
+  addMilliseconds,
   differenceInSeconds,
   formatDistanceToNowStrict,
   parseISO
@@ -131,6 +133,15 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
     return '';
   }
 
+  public formatStringValue(aStringValue: StringValue) {
+    return formatDistanceToNowStrict(
+      addMilliseconds(new Date(), ms(aStringValue)),
+      {
+        locale: getDateFnsLocale(this.user?.settings?.language)
+      }
+    );
+  }
+
   public onAddCoupon() {
     const coupons = [
       ...this.coupons,
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index 246e5fe04..c47387f37 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -105,7 +105,9 @@
                   @for (coupon of coupons; track coupon) {
                     <tr>
                       <td class="text-monospace">{{ coupon.code }}</td>
-                      <td class="pl-2 text-right">{{ coupon.duration }}</td>
+                      <td class="pl-2 text-right">
+                        {{ formatStringValue(coupon.duration) }}
+                      </td>
                       <td>
                         <button
                           class="mx-1 no-min-width px-2"
@@ -145,12 +147,24 @@
                         [value]="couponDuration"
                         (selectionChange)="onChangeCouponDuration($event.value)"
                       >
-                        <mat-option value="7 days">7 Days</mat-option>
-                        <mat-option value="14 days">14 Days</mat-option>
-                        <mat-option value="30 days">30 Days</mat-option>
-                        <mat-option value="90 days">90 Days</mat-option>
-                        <mat-option value="180 days">180 Days</mat-option>
-                        <mat-option value="1 year">1 Year</mat-option>
+                        <mat-option value="7 days">{{
+                          formatStringValue('7 days')
+                        }}</mat-option>
+                        <mat-option value="14 days">{{
+                          formatStringValue('14 days')
+                        }}</mat-option>
+                        <mat-option value="30 days">{{
+                          formatStringValue('30 days')
+                        }}</mat-option>
+                        <mat-option value="90 days">{{
+                          formatStringValue('90 days')
+                        }}</mat-option>
+                        <mat-option value="180 days">{{
+                          formatStringValue('180 days')
+                        }}</mat-option>
+                        <mat-option value="1 year">{{
+                          formatStringValue('1 year')
+                        }}</mat-option>
                       </mat-select>
                     </mat-form-field>
                     <button