refactor: interpolate date placeholders (#1093)

src/app/core/internationalization.module.ts

@@ -18,6 +18,7 @@ import {
 } from './utils/translate/fallback-missing-translation-handler';
 import { ICMTranslateLoader } from './utils/translate/icm-translate-loader';
 import { PWATranslateCompiler } from './utils/translate/pwa-translate-compiler';
+import { TranslationGenerator } from './utils/translate/translations-generator';
 
 @NgModule({
   imports: [
@@ -28,13 +29,14 @@ import { PWATranslateCompiler } from './utils/translate/pwa-translate-compiler';
       compiler: { provide: TranslateCompiler, useClass: PWATranslateCompiler },
     }),
   ],
-  providers: [{ provide: FALLBACK_LANG, useValue: 'en_US' }],
+  providers: [{ provide: FALLBACK_LANG, useValue: 'en_US' }, TranslationGenerator],
 })
 export class InternationalizationModule {
   constructor(
     @Inject(LOCALE_ID) angularDefaultLocale: string,
     translateService: TranslateService,
-    transferState: TransferState
+    transferState: TransferState,
+    generator: TranslationGenerator
   ) {
     registerLocaleData(localeDe);
     registerLocaleData(localeFr);
@@ -45,5 +47,7 @@ export class InternationalizationModule {
     }
     translateService.setDefaultLang(defaultLang);
     translateService.use(defaultLang);
+
+    generator.init();
   }
 }

src/app/core/utils/translate/translations-generator.ts

@@ -0,0 +1,27 @@
+import { Injectable, ɵfindLocaleData } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+@Injectable()
+export class TranslationGenerator {
+  constructor(private translate: TranslateService) {}
+
+  init() {
+    this.translate.onLangChange.subscribe(({ lang }) => {
+      const localeData = ɵfindLocaleData(lang);
+
+      this.setShortDatePlaceholders(localeData, lang);
+    });
+  }
+
+  private setShortDatePlaceholders(localeData: any, lang: string) {
+    const shortDate = localeData[10][0].replace(/\by\b/, 'yyyy') as string;
+    // keep-localization-pattern: ^common\.date_format\.letters\.\w$
+    const localizedShortDate = shortDate.replace(/(\w)/g, (_, letter) =>
+      this.translate.instant(`common.date_format.letters.${letter}`)
+    );
+    this.translate.set('common.placeholder.shortdate', localizedShortDate, lang);
+    this.translate.set('common.placeholder.shortdate-caps', localizedShortDate.toUpperCase(), lang);
+  }
+}

src/assets/i18n/de_DE.json

@@ -652,13 +652,13 @@
   "checkout.credit_card.user.name.missing.error": "Bitte geben Sie den Namen des Karteninhabers an.",
   "checkout.credit_card.validityTime.error.notFound": "Die maximale Gültigkeitsdauer der Kartenprüfnummer wurde nicht gefunden.",
   "checkout.desired_delivery_date.apply.button.label": "Übernehmen",
-  "checkout.desired_delivery_date.error.date": "Das Datum ist ungültig. Bitte verwenden Sie das korrekte Format (TT.MM.JJJJ).",
+  "checkout.desired_delivery_date.error.date": "Das Datum ist ungültig. Bitte verwenden Sie das korrekte Format ({{ translate, common.placeholder.shortdate-caps }}).",
   "checkout.desired_delivery_date.error.max_date": "Ihr gewünschter Liefertermin kann nicht realisiert werden, weil das Datum zu weit in der Zukunft liegt.",
   "checkout.desired_delivery_date.error.min_date": "Ihr gewünschter Liefertermin kann nicht realisiert werden, weil das Datum in der Vergangenheit liegt oder das frühestmögliche Lieferdatum unterschreitet.",
   "checkout.desired_delivery_date.error.no_saturday": "Ihr gewünschter Liefertermin kann nicht realisiert werden, da samstags nicht geliefert wird.",
   "checkout.desired_delivery_date.error.no_sunday": "Ihr gewünschter Liefertermin kann nicht realisiert werden, da sonntags nicht geliefert wird.",
   "checkout.desired_delivery_date.label": "Wunschlieferdatum",
-  "checkout.desired_delivery_date.note": "TT.MM.JJJJ",
+  "checkout.desired_delivery_date.note": "{{ translate, common.placeholder.shortdate-caps }}",
   "checkout.desired_delivery_date.success.message": "Ihr Wunschlieferdatum wurde übernommen.",
   "checkout.desired_delivery_date.title": "Geben Sie Ihr Wunschlieferdatum an",
   "checkout.detail.text": "Details",
@@ -773,6 +773,9 @@
   "checkout.widget.shipping_method.heading": "Versandart",
   "common.button.navbarCollapsed.text": "Navigation umschalten",
   "common.button.spinning.label": "Wird hinzugefügt...",
+  "common.date_format.letters.M": "m",
+  "common.date_format.letters.d": "t",
+  "common.date_format.letters.y": "j",
   "common.home.link": "Home",
   "common.view_all.link": "Alle anzeigen",
   "cookie.consent.option.functional.description": "Diese Cookies werden verwendet, um Ihr Einkaufserlebnis zu verbessern. Bereits eingegebene Informationen (z. B. Benutzername, Sprachauswahl oder der aktuelle Standort) werden anonym gespeichert und stehen bei einem erneuten Besuch des Shops zur Verfügung.",

src/assets/i18n/en_US.json

@@ -652,13 +652,13 @@
   "checkout.credit_card.user.name.missing.error": "Please enter a cardholder name.",
   "checkout.credit_card.validityTime.error.notFound": "The maximum validity time for CVC has not been found.",
   "checkout.desired_delivery_date.apply.button.label": "Apply",
-  "checkout.desired_delivery_date.error.date": "The date is invalid. Please use the correct format (MM/DD/YY).",
+  "checkout.desired_delivery_date.error.date": "The date is invalid. Please use the correct format ({{ translate, common.placeholder.shortdate-caps }}).",
   "checkout.desired_delivery_date.error.max_date": "Your desired delivery date cannot be realized because the date is too far in the future.",
   "checkout.desired_delivery_date.error.min_date": "Your desired delivery date cannot be realized because the date is in the past or falls below the earliest possible delivery date.",
   "checkout.desired_delivery_date.error.no_saturday": "Your desired delivery date cannot be realized because deliveries are not made on Saturdays.",
   "checkout.desired_delivery_date.error.no_sunday": "Your desired delivery date cannot be realized because deliveries are not made on Sundays.",
   "checkout.desired_delivery_date.label": "Desired Delivery Date",
-  "checkout.desired_delivery_date.note": "MM/DD/YY",
+  "checkout.desired_delivery_date.note": "{{ translate, common.placeholder.shortdate-caps }}",
   "checkout.desired_delivery_date.success.message": "Your desired delivery date has been applied.",
   "checkout.desired_delivery_date.title": "Provide your desired delivery date",
   "checkout.detail.text": "Details",
@@ -773,6 +773,9 @@
   "checkout.widget.shipping_method.heading": "Shipping Method",
   "common.button.navbarCollapsed.text": "Toggle navigation",
   "common.button.spinning.label": "Adding...",
+  "common.date_format.letters.M": "m",
+  "common.date_format.letters.d": "d",
+  "common.date_format.letters.y": "y",
   "common.home.link": "Home",
   "common.view_all.link": "View All",
   "cookie.consent.option.functional.description": "These cookies are used to improve your shopping experience. Information that has already been entered (e.g. user name, language selection or the current location) is stored anonymously and will already be available when the shop is visited again.",

src/assets/i18n/fr_FR.json

@@ -652,13 +652,13 @@
   "checkout.credit_card.user.name.missing.error": "Veuillez entrer le nom du titulaire de la carte.",
   "checkout.credit_card.validityTime.error.notFound": "La durée de validité maximale du CVC n’a pas été trouvée.",
   "checkout.desired_delivery_date.apply.button.label": "Appliquer",
-  "checkout.desired_delivery_date.error.date": "La date n’est pas valide. Veuillez utiliser le format correct (JJ-MM-AAAA).",
+  "checkout.desired_delivery_date.error.date": "La date n’est pas valide. Veuillez utiliser le format correct ({{ translate, common.placeholder.shortdate-caps }}).",
   "checkout.desired_delivery_date.error.max_date": "La date de livraison souhaitée ne peut être choisie car elle est trop éloignée dans le temps.",
   "checkout.desired_delivery_date.error.min_date": "La date de livraison souhaitée ne peut pas être choisie car elle se situe dans le passé ou est inférieure à la date de livraison la plus proche possible.",
   "checkout.desired_delivery_date.error.no_saturday": "La date de livraison souhaitée ne peut être choisie car les livraisons ne sont pas effectuées le samedi.",
   "checkout.desired_delivery_date.error.no_sunday": "Votre date de livraison souhaitée ne peut pas être choisie car les livraisons ne sont pas effectuées le dimanche.",
   "checkout.desired_delivery_date.label": "Date de livraison souhaitée",
-  "checkout.desired_delivery_date.note": "JJ-MM-AAAA",
+  "checkout.desired_delivery_date.note": "{{ translate, common.placeholder.shortdate-caps }}",
   "checkout.desired_delivery_date.success.message": "La date de livraison souhaitée a été appliquée.",
   "checkout.desired_delivery_date.title": "Indiquez la date de livraison souhaitée",
   "checkout.detail.text": "Détails",
@@ -773,6 +773,9 @@
   "checkout.widget.shipping_method.heading": "Mode d’expédition",
   "common.button.navbarCollapsed.text": "Basculer la navigation",
   "common.button.spinning.label": "En cours d’ajout...",
+  "common.date_format.letters.M": "m",
+  "common.date_format.letters.d": "j",
+  "common.date_format.letters.y": "a",
   "common.home.link": "Accueil",
   "common.view_all.link": "Tout afficher",
   "cookie.consent.option.functional.description": "Ces cookies sont utilisés pour améliorer votre expérience d’achat. Les informations déjà saisies (par exemple, le nom d’utilisateur, le choix de la langue ou l’emplacement actuel) sont stockées de manière anonyme et sont donc déjà disponibles lorsque vous visitez à nouveau le magasin.",