feat: Use expiration date messages from cozy-client

apps/browser/src/_locales/en/messages.json

@@ -1819,12 +1819,6 @@
     "message": "Max access count reached",
     "description": "This text will be displayed after a Send has been accessed the maximum amount of times."
   },
-  "expired": {
-    "message": "Expired"
-  },
-  "expiredIn": {
-    "message": "Expire in"
-  },
   "pendingDeletion": {
     "message": "Pending deletion"
   },

apps/browser/src/_locales/fr/messages.json

@@ -1867,12 +1867,6 @@
     "message": "Nombre maximum d'accès atteint",
     "description": "This text will be displayed after a Send has been accessed the maximum amount of times."
   },
-  "expired": {
-    "message": "Expiré"
-  },
-  "expiredIn": {
-    "message": "Expire dans"
-  },
   "pendingDeletion": {
     "message": "En attente de suppression"
   },

apps/browser/src/vault/popup/components/vault/view-expiration-date.component.html

@@ -1,7 +1,7 @@
 ·
 <span *ngIf="field.expirationData.isExpired" class="text-danger">
-  {{ "expired" | i18n }}
+  {{ message }}
 </span>
 <span *ngIf="field.expirationData.isExpiringSoon" class="text-warning">
-  {{ "expiredIn" | i18n }} {{ getExpirationDistance() }}
+  {{ message }}
 </span>

apps/browser/src/vault/popup/components/vault/view-expiration-date.component.ts

@@ -1,25 +1,42 @@
-/* eslint-disable import/no-duplicates */
-import { Component, Input } from "@angular/core";
-import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";
-import fr from "date-fns/locale/fr";
+import { Component, Input, OnInit } from "@angular/core";
+import { models } from "cozy-client";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { FieldView } from "@bitwarden/common/vault/models/view/field.view";
 
+const { makeExpiredMessage, makeExpiresInMessage } = models.paper;
+
 @Component({
   selector: "app-vault-view-expiration-date",
   templateUrl: "./view-expiration-date.component.html",
 })
-export class ViewExpirationDateComponent {
+export class ViewExpirationDateComponent implements OnInit {
   @Input() field: FieldView;
+  message: string;
 
   constructor(private i18nService: I18nService) {}
 
-  getExpirationDistance(): string {
-    return formatDistanceToNowStrict(
-      new Date(this.field.expirationData.expirationDate),
+  ngOnInit() {
+    if (this.field.expirationData.isExpired) {
+      this.message = this.getExpiredMessage();
+    } else if (this.field.expirationData.isExpiringSoon) {
+      this.message = this.getExpiresInMessage();
+    }
+  }
+
+  getExpiredMessage(): string {
+    return makeExpiredMessage(
+      this.field.expirationData.expirationDate,
+      // @ts-expect-error I did not succeed in getting i18nService.translationLocale so I fallback to a private property
+      { lang: this.i18nService.systemLanguage }
+    );
+  }
+
+  getExpiresInMessage(): string {
+    return makeExpiresInMessage(
+      this.field.expirationData.expirationDate,
       // @ts-expect-error I did not succeed in getting i18nService.translationLocale so I fallback to a private property
-      { locale: this.i18nService.systemLanguage === "fr" ? fr : undefined }
+      { lang: this.i18nService.systemLanguage }
     );
   }
 }