Add new button Contact

France-Travail · Oct 24, 2024 · ff95e78 · ff95e78
1 parent 9ea49cf
commit ff95e78
Show file tree

Hide file tree

Showing 14 changed files with 362 additions and 139 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -18,6 +18,7 @@ import { WelcomeComponent } from './pages/welcome/welcome.component';
 import { CallbackComponent } from './pages/callback/callback.component';
 import { IndicatorsComponent } from './indicators/indicators.component';
 import { TradtondocComponent } from './pages/tradtondoc/tradtondoc.component';
+import { ContactComponent } from './pages/contact/contact.component';
 
 export const routes: Routes = [
   { path: '', redirectTo: 'auth', pathMatch: 'full', canDeactivate: [PendingChangesGuard] },
@@ -87,6 +88,11 @@ export const routes: Routes = [
     component: TradtondocComponent,
     canActivate: [AuthGuard]
   },
+  {
+    path: 'contact',
+    component: ContactComponent,
+    canActivate: [AuthGuard]
+  },
   {
     path: '**',
     redirectTo: 'auth',

diff --git a/src/app/data/sentence.ts b/src/app/data/sentence.ts
diff --git a/src/app/models/contact.ts b/src/app/models/contact.ts
@@ -0,0 +1,5 @@
+export interface Contact {
+  title: string;
+  message: string;
+  closeBtn: string;
+}
diff --git a/src/app/models/vocabulary.ts b/src/app/models/vocabulary.ts
@@ -1,5 +1,5 @@
 import { Gdpr } from './gdpr';
-import { Pdata } from './pdata';
+import { Contact } from './contact';
 
 export interface Vocabulary {
   isoCode: string;
@@ -13,6 +13,7 @@ export interface Vocabulary {
   audioVoiceCodeMale?: string;
   audioVoiceCodeFemale?: string;
 }
+
 export interface Sentence {
   applicationName: string;
   send: string;
@@ -31,6 +32,7 @@ export interface Sentence {
   gaugeText?: string;
   rate?: Rate;
   gdpr?: Gdpr;
+  contact?: Contact;
   pdata?: string;
   logout?: Logout;
   modality?: Modality;
@@ -41,6 +43,7 @@ export interface Sentence {
   translationH2Mobile?: string;
 
 }
+
 export interface Tooltip {
   pronounce: string;
   noPronounce: string;
@@ -50,6 +53,7 @@ export interface Tooltip {
   voiceTypeDE: string;
   voiceTypeNormal: string;
 }
+
 export interface IntroMessage {
   welcomeFR: string;
   welcomeRAW: string;
@@ -58,6 +62,7 @@ export interface IntroMessage {
   voiceavailabilityRAW: string;
   voiceavailabilityFR: string;
 }
+
 export interface Choice {
   mostBtn: string;
   mostUsedBtn: string;
@@ -77,6 +82,7 @@ export interface Modality {
   multiSentenceFR: string;
   confirm: string;
 }
+
 export interface Rate {
   qualityTranslate: string;
   rating: string;
@@ -90,6 +96,7 @@ export interface NavbarTab {
   logout: string;
   help: string;
   gdpr: string;
+  contact: string;
 }
 
 export interface Logout {
@@ -98,6 +105,7 @@ export interface Logout {
   cancel: string;
   confirm: string;
 }
+
 export interface Onboarding {
   image: string;
   indicationFR?: string;
@@ -107,6 +115,7 @@ export interface Onboarding {
   browserFR?: string;
   browserEN?: string;
 }
+
 export interface OnboardingTitle {
   helpFR?: string;
   helpEN: string;

diff --git a/src/app/pages/contact/contact.component.html b/src/app/pages/contact/contact.component.html
@@ -0,0 +1,23 @@
+<div class="panel">
+  <div class="title">
+    <ng-template [ngIf]="!isSmallScreen">
+      <img style="width: 80%;padding-bottom: 2%;" src="../../../assets/images/common/logo-working.png" alt="Logo Trad"
+           *ngIf="showTraductionLogo" />
+    </ng-template>
+    <h1 class="t2"> {{ contactWording.title }}</h1>
+  </div>
+  <div class="language">
+    <mat-form-field>
+      <mat-select [(value)]="selected" (selectionChange)="chooseLanguage($event)">
+        <mat-option value="english">English</mat-option>
+        <mat-option value="french">Français</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div class="privacy">
+    {{ contactWording.message }}
+  </div>
+  <div class="action">
+    <button class="options" (click)="closeDialog()">{{ contactWording.closeBtn }}</button>
+  </div>
+</div>
diff --git a/src/app/pages/contact/contact.component.scss b/src/app/pages/contact/contact.component.scss
@@ -0,0 +1,76 @@
+@import 'panel';
+
+.title {
+  margin-bottom: 0 !important;
+}
+
+.language {
+  display: flex;
+  justify-content: center;
+}
+
+.privacy {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 150px;
+  font-size: 15px;
+  white-space: pre-line;
+}
+
+.action {
+  display: flex;
+
+  button {
+    width: 170px;
+  }
+
+  .options {
+    background-color: $white-smoke;
+    color: black;
+  }
+}
+
+.confirm {
+  display: flex;
+}
+
+::ng-deep .mat-select-value-text {
+  font-size: 15px;
+  color: $primary-color;
+}
+
+::ng-deep .mat-form-field-infix {
+  width: 80px !important;
+}
+
+::ng-deep .mat-select-arrow {
+  color: $primary-color;
+}
+
+.mobileBtn {
+  width: 80px !important;
+}
+
+@media (max-width: 768px) {
+  .action {
+    button {
+      width: 150px;
+    }
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .action {
+    button {
+      width: 120px;
+    }
+  }
+}
+
+@media screen and (max-width: 375px) {
+  .action {
+    button {
+      width: 80px;
+    }
+  }
+}
diff --git a/src/app/pages/contact/contact.component.ts b/src/app/pages/contact/contact.component.ts
@@ -0,0 +1,38 @@
+import { Component, Inject } from '@angular/core';
+import { ENGLISH, FRENCH } from '../../data/sentence';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { SettingsService } from '../../services/settings.service';
+import { Contact } from '../../models/contact';
+
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.component.html',
+  styleUrls: ['./contact.component.scss']
+})
+export class ContactComponent {
+  public selected = 'english';
+  public isSmallScreen = false;
+  public contactWording: Contact = FRENCH.contact;
+  public showTraductionLogo = this.settingsService.showTraductionLogo;
+
+  constructor(
+    private readonly dialogRef: MatDialogRef<ContactComponent>,
+    private readonly breakpointObserver: BreakpointObserver,
+    private readonly settingsService: SettingsService,
+    @Inject(MAT_DIALOG_DATA) public data: { language: string }
+  ) {
+    this.breakpointObserver.observe(['(max-width: 1050px)']).subscribe((result) => {
+      this.isSmallScreen = result.matches;
+    });
+    this.contactWording = this.selected === 'english' ? ENGLISH.contact : FRENCH.contact;
+  }
+
+  public chooseLanguage(option) {
+    this.contactWording = option.value === 'english' ? ENGLISH.contact : FRENCH.contact;
+  }
+
+  public closeDialog() {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/services/navbar.service.ts b/src/app/services/navbar.service.ts
@@ -1,7 +1,7 @@
-import {Injectable} from '@angular/core';
-import {SettingsService} from './settings.service';
-import {Role} from '../models/role';
-import {Router} from '@angular/router';
+import { Injectable } from '@angular/core';
+import { SettingsService } from './settings.service';
+import { Role } from '../models/role';
+import { Router } from '@angular/router';
 import { params } from '../../environments/params';
 
 @Injectable()
@@ -10,6 +10,8 @@ export class NavbarService {
   public choiceTab = false;
   public modalityTab = false;
   public helpTab = false;
+  public cguTab = false;
+  public contactTab = false;
   public tradDocTab = false;
   public endTab = false;
 
@@ -28,6 +30,8 @@ export class NavbarService {
     this.choiceTab = false;
     this.modalityTab = false;
     this.tradDocTab = false;
+    this.cguTab = false;
+    this.contactTab = false;
     this.helpTab = true;
     this.endTab = false;
   }
@@ -56,6 +60,8 @@ export class NavbarService {
     this.helpTab = true;
     this.endTab = false;
     this.tradDocTab = false;
+    this.cguTab = true;
+    this.contactTab = true;
   }
 
   public handleTabsSettings() {

diff --git a/src/app/shared/components/navigation/header/header.component.html b/src/app/shared/components/navigation/header/header.component.html
@@ -7,7 +7,7 @@
         </button>
       </div>
       <img src="../../../../../assets/images/common/logo-working.png" alt="Logo Trad" (click)="choice()" />
-      <div (click)="choice()" >
+      <div (click)="choice()">
         <div class="title">Traduction Instantanée</div>
         <div class="subtitle">{{ params.subtitle }}</div>
       </div>
@@ -19,7 +19,8 @@
         <img src="assets/icons/document.svg" alt="Traduire un document" />
         <span class="name">TRADUIRE UN DOCUMENT</span>
       </button>
-      <button id="indicators-header" routerLink="indicators" *ngIf="navbarService.modalityTab && params.headerButtons.indicators">
+      <button id="indicators-header" routerLink="indicators"
+              *ngIf="navbarService.modalityTab && params.headerButtons.indicators">
         <img src="assets/icons/icon-chart.svg" alt="Indicateurs" />
         <span class="name">INDICATEURS</span>
       </button>
@@ -31,7 +32,8 @@
         <img src="assets/icons/icon-policies-black.svg" alt="gdpr" />
         <span class="name">{{ gdprLink | uppercase }}</span>
       </button>
-      <button id="modality-header" routerLink="modality" *ngIf="navbarService.modalityTab && params.headerButtons.modality">
+      <button id="modality-header" routerLink="modality"
+              *ngIf="navbarService.modalityTab && params.headerButtons.modality">
         <img src="assets/icons/icon-modality-black.svg" alt="modality" />
         <span class="name">MODALITÉ</span>
       </button>
@@ -47,6 +49,11 @@
         <img src="assets/icons/icon-export-black.svg" alt="Shortcut" />
         <span class="name">CREER UN RACCOURCI</span>
       </button>
+      <button id="contact-header" (click)="contact()"
+              *ngIf="navbarService.modalityTab && params.headerButtons.contact">
+        <img src="assets/icons/icon-email.svg" alt="Contact" />
+        <span class="name">CONTACT</span>
+      </button>
       <button id="logout-header" class="density" (click)="logout()">
         <img src="assets/icons/icon-logout.svg" alt="Logout" />
         <div>