Merge branch 'feat/US257-add-language-selection-orientation' into 'V2.0'

Feat/us257 add language selection orientation

See merge request !373

src/app/form/orientation-form-view/enums/hotlineMediationSteps.enum.ts

 export enum HotlineMediationSteps {
   mediationBeneciaryInfo,
   mediationHoursSelection,
+  mediationLanguageSelection,
   mediationRecap,
 }

src/app/form/orientation-form-view/enums/preferredLanguages.enum.ts

+export enum PreferredLanguages {
+  french = 'Français',
+  english = 'Anglais',
+  arabic = 'Arabe',
+}

src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.html

@@ -21,6 +21,12 @@
           <div *ngFor="let need of needs">{{ need.displayText }}</div>
         </div>
       </div>
+      <div fxLayout="row">
+        <div class="labels" fxFlex="20%">Langue souhaitée</div>
+        <div class="infos" fxFlex="80%">
+          <div>{{ language }}</div>
+        </div>
+      </div>
       <div *ngIf="comment" fxLayout="row">
         <div class="labels" fxFlex="20%">Précisions</div>
         <div class="infos" fxFlex="80%">

src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.ts

@@ -20,6 +20,7 @@ export class MediationRecapComponent implements OnInit {
   public comment: string;
   public beneficiary: any;
   public date: any;
+  public language: string;
 
   ngOnInit(): void {
     this.checkValidation.emit();
@@ -55,5 +56,6 @@ export class MediationRecapComponent implements OnInit {
       day: this.form.get('dateSlot').value.day,
       hours: this.form.get('dateSlot').value.hours.replace('-', ' et '),
     };
+    this.language = this.form.get('preferredLanguage').value;
   }
 }

src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.html

 <div [fxLayout]="'column'" [fxLayoutGap]="'8px'" fxLayoutAlign="center left" class="radiocard">
   <button
-    *ngFor="let item of items; let index = index"
+    *ngFor="let item of items"
     (click)="selectItem(item.key)"
-    [ngClass]="{ selected: selectedItem == item.key }"
+    [ngClass]="{ selected: selectedItem == item.key, smallWidth: smallWidth }"
   >
     <div class="checkmark">
       <svg *ngIf="selectedItem === item.key" class="validate" aria-hidden="true">

src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss

@@ -57,5 +57,8 @@
         top: -3px;
       }
     }
+    &.smallWidth {
+      width: 300px;
+    }
   }
 }

src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.ts

@@ -9,6 +9,7 @@ import { INeedItem } from '../../../../utils/orientationUtils';
 export class MultiRadioFormComponent implements OnInit {
   @Input() items: INeedItem[];
   @Input() selected: any;
+  @Input() smallWidth: boolean = false;
   @Input() displayIcon = false;
   @Output() handleSelect = new EventEmitter<any>();
 

src/app/form/orientation-form-view/interfaces/onlineMediation.interface.ts

@@ -4,4 +4,5 @@ export interface IOnlineMediation {
   phone: string;
   onlineDemarcheType: string[];
   dateSlot: { day: string; hours: string };
+  preferredLanguage: string;
 }

src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.html

@@ -4,7 +4,7 @@
   <div *ngFor="let slot of timeSlots" class="slot">
     <div class="day">{{ slot.day }}</div>
     <button class="time" [ngClass]="{ selected: isSelected(slot) }" (click)="selectHour(slot)">
-      {{ slot.hours }}
+      <span *ngFor="let str of slot.hours.split(' ')">{{ str }}</span>
     </button>
   </div>
 </div>

src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.scss

@@ -4,19 +4,17 @@
 
 .subtitle {
   color: $grey-3;
-  text-transform: uppercase;
-  @include lato-regular-14;
+  @include lato-bold-14;
 }
 .container {
   display: flex;
-  justify-content: center;
   align-items: center;
   gap: 0.5rem;
   margin: 1.5rem 0;
   flex-wrap: wrap;
+  max-width: 600px;
   .slot {
     transition: all 300ms ease;
-    border-right: solid 1px $red;
     padding-right: 0.5rem;
     height: 85px;
     &:last-child {
@@ -31,18 +29,25 @@
       @include lato-regular-13;
       color: $grey-3;
       text-align: center;
-      margin-bottom: 1rem;
+      margin-bottom: 0.5rem;
     }
     .time {
       cursor: pointer;
-      width: 125px;
-      height: 37px;
+      width: 73px;
+      height: 71px;
       text-align: center;
       border: 1px solid $grey-1;
       border-radius: 4px;
       color: $grey-1;
       @include lato-regular-14;
       background: $white;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      span {
+        display: block;
+      }
       &.selected {
         background: $green-1 !important;
         color: $white;

src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.ts

@@ -12,12 +12,12 @@ export class MediationHoursSelectionComponent implements OnInit {
   @Output() checkValidation = new EventEmitter<any>();
   public selected: string;
   public timeSlots = [
-    { day: 'Lundi', hours: '15h00-17h00' },
-    { day: 'Mardi', hours: '15h00-17h00' },
-    { day: 'Mercredi', hours: '15h00-17h00' },
-    { day: 'Jeudi', hours: '15h00-19h00' },
-    { day: 'Vendredi', hours: '15h00-17h00' },
-    { day: 'Samedi', hours: '10h00-12h00' },
+    { day: 'Lundi', hours: '15h00 - 17h00' },
+    { day: 'Mardi', hours: '15h00 - 17h00' },
+    { day: 'Mercredi', hours: '15h00 - 17h00' },
+    { day: 'Jeudi', hours: '15h00 - 19h00' },
+    { day: 'Vendredi', hours: '15h00 - 17h00' },
+    { day: 'Samedi', hours: '10h00 - 12h00' },
   ];
   ngOnInit(): void {
     this.checkValidation.emit();

src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.html

+<h2>Dans quelle langue le bénéficiaire souhaite-t-il être rappelé ?</h2>
+
+<app-multi-radio-form
+  [items]="languages"
+  [selected]="selected"
+  (handleSelect)="handleSelect($event)"
+  [smallWidth]="true"
+></app-multi-radio-form>

src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { PreferredLanguages } from '../../enums/preferredLanguages.enum';
+
+@Component({
+  selector: 'app-mediation-language-selection',
+  templateUrl: './mediation-language-selection.component.html',
+  styleUrls: ['./mediation-language-selection.component.scss'],
+})
+export class MediationLanguageSelectionComponent implements OnInit {
+  @Input() form: UntypedFormGroup;
+  @Output() checkValidation = new EventEmitter<any>();
+  public selected: string;
+  public languages: any[] = [
+    {
+      title: 'Français',
+      key: PreferredLanguages.french,
+    },
+    {
+      title: 'Anglais',
+      key: PreferredLanguages.english,
+    },
+    {
+      title: 'Arabe',
+      key: PreferredLanguages.arabic,
+    },
+  ];
+  ngOnInit(): void {
+    this.selected = this.form.get('preferredLanguage').value;
+    this.checkValidation.emit();
+  }
+
+  public handleSelect(event: string): void {
+    this.selected = event;
+    this.form.get('preferredLanguage').patchValue(event);
+    this.checkValidation.emit();
+  }
+}

src/app/form/orientation-form-view/online-demarch/onlineDemarch-form.component.html

@@ -38,6 +38,11 @@
     [form]="form"
     (checkValidation)="checkValidation()"
   ></app-mediation-hours-selection>
+  <app-mediation-language-selection
+    *ngIf="currentStep === HotlineMediationStepsEnum.mediationLanguageSelection"
+    [form]="form"
+    (checkValidation)="checkValidation()"
+  ></app-mediation-language-selection>
   <app-mediation-recap
     *ngIf="currentStep === HotlineMediationStepsEnum.mediationRecap"
     [form]="form"

src/app/form/orientation-form-view/orientation.module.ts

@@ -24,6 +24,7 @@ import { OrientationRoutingModule } from './orientation-routing.module';
 import { OrientationCommentsComponent } from './orientation-structure-list/orientation-comments/orientation-comments.component';
 import { OrientationStructureAddressComponent } from './orientation-structure-list/orientation-structure-address/orientation-structure-address.component';
 import { OrientationStructureListComponent } from './orientation-structure-list/orientation-structure-list.component';
+import { MediationLanguageSelectionComponent } from './online-demarch/mediation-language-selection/mediation-language-selection.component';
 import { SelectComponent } from './global-components/select/select.component';
 
 @NgModule({
@@ -50,6 +51,7 @@ import { SelectComponent } from './global-components/select/select.component';
     OrientationCommentsComponent,
     EquipmentAccessComponent,
     BaseSkillsChoiceComponent,
+    MediationLanguageSelectionComponent,
     SelectComponent,
   ],
   imports: [OrientationRoutingModule, CartoModule, SharedModule],

src/app/utils/orientationUtils.ts

@@ -5,6 +5,7 @@ import { HotlineMediationSteps } from '../form/orientation-form-view/enums/hotli
 import { NeedsType } from '../form/orientation-form-view/enums/needs.enum';
 import { OnlineDemarchesCommonSteps } from '../form/orientation-form-view/enums/onlineDemarchesCommonSteps.enum';
 import { OnlineDemarchesMeetingSteps } from '../form/orientation-form-view/enums/onlineDemarchesMeetingSteps.enum';
+import { PreferredLanguages } from '../form/orientation-form-view/enums/preferredLanguages.enum';
 import { StructuresListSteps } from '../form/orientation-form-view/enums/structuresListSteps.enum';
 import { FiltersForm } from '../form/orientation-form-view/interfaces/filtersForm.interface';
 import { OnlineDemarchesForm } from '../form/orientation-form-view/interfaces/onlineDemarchesForm.interface';
@@ -68,6 +69,7 @@ export class OrientationUtils {
       surname: new UntypedFormControl('', [Validators.required, Validators.pattern(CustomRegExp.TEXT_WITHOUT_NUMBER)]),
       phone: new UntypedFormControl('', [Validators.required, Validators.pattern(CustomRegExp.PHONE)]),
       dateSlot: new UntypedFormControl(null, Validators.required),
+      preferredLanguage: new UntypedFormControl(PreferredLanguages.french, Validators.required),
     });
   }
 
@@ -133,6 +135,9 @@ export class OrientationUtils {
     pagesValidation[HotlineMediationSteps.mediationHoursSelection] = {
       valid: form.get('dateSlot').value !== null,
     };
+    pagesValidation[HotlineMediationSteps.mediationLanguageSelection] = {
+      valid: true,
+    };
     pagesValidation[HotlineMediationSteps.mediationRecap] = {
       valid: true,
     };