feat: Add a new component to display contact labels

io.cozy.contacts label management has been improved. A phone number, an address or an email can have :
- a type which can be "cell", "voice", "fax" or a custom string
- a label which can be "home" or "work"
- both

See io.cozy.contacts documentation to learn more.

Here we introduce and use a new component to display correctly the label value.

We also modify our types to correspond to io.cozy.contacts.

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

@@ -2423,5 +2423,20 @@
   },
   "encryptedInfoDismiss": {
     "message": "I understand"
+  },
+  "home": {
+    "message": "Home"
+  },
+  "work": {
+    "message": "Work"
+  },
+  "cell": {
+    "message": "Cell"
+  },
+  "voice": {
+    "message": "Voice"
+  },
+  "fax": {
+    "message": "Fax"
   }
 }

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

@@ -2471,5 +2471,20 @@
   },
   "encryptedInfoDismiss": {
     "message": "J'ai compris"
+  },
+  "home": {
+    "message": "Perso"
+  },
+  "work": {
+    "message": "Pro"
+  },
+  "cell": {
+    "message": "Mobile"
+  },
+  "voice": {
+    "message": "Fixe"
+  },
+  "fax": {
+    "message": "Fax"
   }
 }

apps/browser/src/popup/app.module.ts

@@ -82,6 +82,7 @@ import { FlagConditionalComponent } from "../cozy/components/flag-conditional/fl
 import { IfFlagDirective } from "../cozy/components/flag-conditional/if-flag.directive";
 import { AddGenericComponent } from "../cozy/components/add-generic/add-generic.component";
 import { ViewExpirationDateComponent } from "../vault/popup/components/vault/view-expiration-date.component";
+import { ViewLabelComponent } from "../vault/popup/components/vault/view-label.component";
 import { ContactAvatarComponent } from "../vault/popup/components/vault/contact-avatar.component";
 import { ProfilesMigrationComponent } from "../cozy/components/profiles-migration/profiles-migration.component";
 import { EncryptedInfoComponent } from "../cozy/components/encrypted-info/encrypted-info.component";
@@ -170,6 +171,7 @@ import { EncryptedInfoComponent } from "../cozy/components/encrypted-info/encryp
     IfFlagDirective,
     AddGenericComponent,
     ViewExpirationDateComponent,
+    ViewLabelComponent,
     ContactAvatarComponent,
     ProfilesMigrationComponent,
     EncryptedInfoComponent,

apps/browser/src/vault/popup/components/vault/view-custom-fields.component.html

@@ -47,10 +47,7 @@ <h2 class="box-header">
             (dragstart)="setTextDataOnDrag($event, field.value)"
           >
             {{ field.name }}
-            <span *ngIf="field.label" aria-hidden="true"> · </span>
-            <span *ngIf="field.label">
-              {{ field.label.type }}
-            </span>
+            <app-vault-view-label *ngIf="field.label" [label]="field.label"></app-vault-view-label>
           </span>
           <!-- Cozy customization end -->
           <span *ngIf="field.type === fieldType.Linked" class="row-label">{{ field.name }}</span>

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

@@ -0,0 +1,2 @@
+<span aria-hidden="true"> · </span>
+<span>{{ this.stringifiedLabel }}</span>

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

@@ -0,0 +1,40 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { LabelData } from "@bitwarden/common/vault/models/data/label.data";
+
+@Component({
+  selector: "app-vault-view-label",
+  templateUrl: "./view-label.component.html",
+})
+export class ViewLabelComponent implements OnInit {
+  @Input() label: LabelData;
+  stringifiedLabel: string;
+
+  constructor(private i18nService: I18nService) {}
+
+  ngOnInit(): void {
+    if (this.label.type && !this.label.label) {
+      const type = this.getTranslatedType(this.label.type);
+
+      this.stringifiedLabel = type;
+    } else if (!this.label.type && this.label.label) {
+      const label = this.getTranslatedLabel(this.label.label);
+
+      this.stringifiedLabel = label;
+    } else if (this.label.type && this.label.label) {
+      const type = this.getTranslatedType(this.label.type);
+      const label = this.getTranslatedLabel(this.label.label);
+
+      this.stringifiedLabel = `${type} (${label.toLowerCase()})`;
+    }
+  }
+
+  getTranslatedType(type: string) {
+    return ["cell", "voice", "fax"].includes(type) ? this.i18nService.translate(type) : type;
+  }
+
+  getTranslatedLabel(label: string) {
+    return this.i18nService.translate(label);
+  }
+}

libs/common/src/vault/models/data/label.data.ts

@@ -1,6 +1,6 @@
 // Cozy customization
 export type LabelData = {
-  type: string;
+  type?: string;
   label?: "home" | "work";
 };
 // Cozy customization end

libs/cozy/fields.helper.ts

@@ -151,7 +151,7 @@ const buildContactField = ({
 
   const fieldOptions: FieldOptions = {};
 
-  if (type) {
+  if (type || label) {
     fieldOptions.label = {
       type,
       label,