Feature/localize durations of coupon system (#5191)

* Localize durations of coupon system

* Update changelog

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the platform icon in the create or update platform dialog of the admin control
+- Localized the durations of the coupon system
 - Improved the language localization for Catalan (`ca`)
 - Improved the language localization for Dutch (`nl`)
 - Improved the language localization for Italian (`it`)

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,

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