diff --git a/src/app/form/orientation-form-view/enums/hotlineMediationSteps.enum.ts b/src/app/form/orientation-form-view/enums/hotlineMediationSteps.enum.ts
index 48f34d6f68eca899d2cb976d14316eb8607b2e61..b7911a36d4ee7a20bb87449b827a88eb48ef3cfe 100644
--- a/src/app/form/orientation-form-view/enums/hotlineMediationSteps.enum.ts
+++ b/src/app/form/orientation-form-view/enums/hotlineMediationSteps.enum.ts
@@ -1,5 +1,6 @@
export enum HotlineMediationSteps {
mediationBeneciaryInfo,
mediationHoursSelection,
+ mediationLanguageSelection,
mediationRecap,
}
diff --git a/src/app/form/orientation-form-view/enums/preferredLanguages.enum.ts b/src/app/form/orientation-form-view/enums/preferredLanguages.enum.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2cb1b0bff8c0f55af538cd2e7704332e21096915
--- /dev/null
+++ b/src/app/form/orientation-form-view/enums/preferredLanguages.enum.ts
@@ -0,0 +1,5 @@
+export enum PreferredLanguages {
+ french = 'Français',
+ english = 'Anglais',
+ arabic = 'Arabe',
+}
diff --git a/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.html b/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.html
index e1b104b02bddc0167f68e09c0a39cf3de643bde9..6d31783ec2a549e1d63957a7c36e9cd837d051b4 100644
--- a/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.html
+++ b/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%">
diff --git a/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.ts b/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.ts
index 2ebbc4389e3a64794086fb9fad16d9533765560c..b27873b73a6c854615cb2ba27f3ddc9d0a775b3d 100644
--- a/src/app/form/orientation-form-view/global-components/mediation-recap/mediation-recap.component.ts
+++ b/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;
}
}
diff --git a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.html b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.html
index 10392772e73358ba11d4d1ed93b7a2729467c3c7..bd152d4cad5eb3ca43340b34df1207674fa1044a 100644
--- a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.html
+++ b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.html
@@ -1,8 +1,8 @@
<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">
diff --git a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss
index 5617385e8bc29a6fab5e479964c244fd91ad485a..9507fa3a912588c9cbc62b01394ff463834eac46 100644
--- a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss
+++ b/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;
+ }
}
}
diff --git a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.ts b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.ts
index 3710befc01d38e779c14eb60b11bb0ed3f9dbaeb..8c8215930c157ed3ee6cb962d8ccc17bdd75031b 100644
--- a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.ts
+++ b/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>();
diff --git a/src/app/form/orientation-form-view/interfaces/onlineMediation.interface.ts b/src/app/form/orientation-form-view/interfaces/onlineMediation.interface.ts
index b3fc7ed8cefab3cb4c446385646a9abe3f5868a9..fd27e71f06510b951afa1a8b79951e701fe53541 100644
--- a/src/app/form/orientation-form-view/interfaces/onlineMediation.interface.ts
+++ b/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;
}
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.html b/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.html
index 2c017e6de9a8f4c7d2a1ddb94bd0c629c0cd6802..f21e35da987652ef177f0be8379276fcefbf182b 100644
--- a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.html
+++ b/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>
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.scss b/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.scss
index 4e8abea4eb4f7834b6de4cf5d8a5d35631cd6400..76465d2fc454d0f79f7f9063a7e7e1e3bf652a5b 100644
--- a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.scss
+++ b/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;
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.ts b/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.ts
index a0f68516a88c3642db055d1be784eee285006bf1..6c1788d465965919bf5249d52e626ddfd3eb6536 100644
--- a/src/app/form/orientation-form-view/online-demarch/mediation-hours-selection/mediation-hours-selection.component.ts
+++ b/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();
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.html b/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..017627a72a4f3168fd23a665a8f836320f89dfa9
--- /dev/null
+++ b/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.html
@@ -0,0 +1,8 @@
+<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>
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.scss b/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.ts b/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b320ff541844c980f5eb6d0837cca1adcc77ae5
--- /dev/null
+++ b/src/app/form/orientation-form-view/online-demarch/mediation-language-selection/mediation-language-selection.component.ts
@@ -0,0 +1,38 @@
+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();
+ }
+}
diff --git a/src/app/form/orientation-form-view/online-demarch/onlineDemarch-form.component.html b/src/app/form/orientation-form-view/online-demarch/onlineDemarch-form.component.html
index ff066744b2c6092ccee9b41104a3e57c8c143d24..d74e1d4b0dd0d3282ad04f5809a370333b7e24e4 100644
--- a/src/app/form/orientation-form-view/online-demarch/onlineDemarch-form.component.html
+++ b/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"
diff --git a/src/app/form/orientation-form-view/orientation.module.ts b/src/app/form/orientation-form-view/orientation.module.ts
index 82829af4e03a521c7af0f30c2448b07120333638..fde07106c8aa05e397502bc049b307b103b21126 100644
--- a/src/app/form/orientation-form-view/orientation.module.ts
+++ b/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],
diff --git a/src/app/utils/orientationUtils.ts b/src/app/utils/orientationUtils.ts
index 7b1df3af6c3fb4d99ec809cc9cb9663b75bf29e8..d7e06f343010dafc036061ad547349876543a264 100644
--- a/src/app/utils/orientationUtils.ts
+++ b/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,
};