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

+import { FormControl } from '@angular/forms';
+export interface StructureOrientator {
+  structureName: FormControl<string>;
+  structureMail: FormControl<string>;
+  structurePhone: FormControl<string>;
+}

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

+import { FormControl, FormGroup } from '@angular/forms';
+import { Module } from '../../../structure-list/models/module.model';
+import { OnlineDemarchesForm } from './onlineDemarchesForm.interface';
+
+export interface TrainingForm {
+  filters: FormControl<Module[]>;
+  onlineDemarches: FormGroup<OnlineDemarchesForm>;
+}

src/app/form/orientation-form-view/online-demarch/accompaniment-type/accompaniment-type.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AccompanimentTypeComponent } from './accompaniment-type.component';
-
-describe('AccompanimentTypeComponent', () => {
-  let component: AccompanimentTypeComponent;
-  let fixture: ComponentFixture<AccompanimentTypeComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AccompanimentTypeComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(AccompanimentTypeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/form/orientation-form-view/online-demarch/accompaniment-type/accompaniment-type.component.ts

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { INeedItem } from '../../../../utils/orientationUtils';
+import { OnlineDemarche } from '../../enums/onlineDemarche.enum';
 
 @Component({
   selector: 'app-accompaniment-type',
@@ -15,17 +16,17 @@ export class AccompanimentTypeComponent implements OnInit {
     {
       title: "Trouver une structure proposant l'accompagnement adapté",
       hint: "Le bénéficiaire pourra prendre contact avec la structure ou s'y rendre directement",
-      key: 'Trouver une structure',
+      key: OnlineDemarche.structureList,
     },
     {
       title: 'Prendre RDV auprès d’un conseiller ou une conseillère numérique',
       hint: 'Redirection vers RDV Aide Numérique pour voir les disponibilités',
-      key: 'RDV Conseiller Numérique',
+      key: OnlineDemarche.meetings,
     },
     {
       title: 'Choisir un créneau de médiation numérique à distance',
       hint: 'Le bénéficiaire sera contacté par téléphone sur le créneau de son choix',
-      key: 'Médiation Numérique à distance',
+      key: OnlineDemarche.onlineMediation,
     },
   ];
   ngOnInit(): void {

src/app/form/orientation-form-view/online-demarch/mediation-beneciary-info/mediation-beneciary-info.component.html

-<h2>Quellles sont les informations du bénéficiaire ?</h2>
+<h2>Quelles sont les informations du bénéficiaire ?</h2>
 <form [formGroup]="form">
   <div class="form-group" fxLayout="column">
     <label for="name">Nom</label>
@@ -48,7 +48,7 @@
       ></app-svg-icon>
     </div>
   </div>
-  <div class="form-group" fxLayout="column">
+  <div class="form-group" fxLayout="column" *ngIf="isPhone()">
     <label for="phone">Téléphone</label>
     <div fxLayout="row" fxLayoutGap="13px">
       <input

src/app/form/orientation-form-view/online-demarch/mediation-beneciary-info/mediation-beneciary-info.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MediationBeneciaryInfoComponent } from './mediation-beneciary-info.component';
-
-describe('MediationBeneciaryInfoComponent', () => {
-  let component: MediationBeneciaryInfoComponent;
-  let fixture: ComponentFixture<MediationBeneciaryInfoComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ MediationBeneciaryInfoComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MediationBeneciaryInfoComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/form/orientation-form-view/online-demarch/mediation-beneciary-info/mediation-beneciary-info.component.ts

@@ -10,12 +10,15 @@ export class MediationBeneciaryInfoComponent implements OnInit {
   @Input() form: UntypedFormGroup;
   @Output() checkValidation = new EventEmitter<any>();
   public utils = new Utils();
-  constructor() {}
 
   ngOnInit(): void {
     this.checkValidation.emit();
   }
 
+  public isPhone(): boolean {
+    return Boolean(this.form.get('phone'));
+  }
+
   public updatedForm(field: string, value: string) {
     if (field === 'phone') {
       this.utils.modifyPhoneInput(this.form, 'phone', value);

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

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MediationHoursSelectionComponent } from './mediation-hours-selection.component';
-
-describe('MediationHoursSelectionComponent', () => {
-  let component: MediationHoursSelectionComponent;
-  let fixture: ComponentFixture<MediationHoursSelectionComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ MediationHoursSelectionComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MediationHoursSelectionComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/form/orientation-form-view/online-demarch/mediation-recap/mediation-recap.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MediationRecapComponent } from './mediation-recap.component';
-
-describe('MediationRecapComponent', () => {
-  let component: MediationRecapComponent;
-  let fixture: ComponentFixture<MediationRecapComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ MediationRecapComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MediationRecapComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

-@import '../../../../../assets/scss/buttons';
-
-.btnContainer {
-  max-width: 600px;
-}

src/app/form/orientation-form-view/online-demarch/online-demarch/online-demarch.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { OnlineDemarchComponent } from './online-demarch.component';
-
-describe('OnlineDemarchComponent', () => {
-  let component: OnlineDemarchComponent;
-  let fixture: ComponentFixture<OnlineDemarchComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ OnlineDemarchComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(OnlineDemarchComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -9,7 +9,6 @@ import { SearchService } from '../../../../structure-list/services/search.servic
 @Component({
   selector: 'app-online-demarch',
   templateUrl: './online-demarch.component.html',
-  styleUrls: ['./online-demarch.component.scss'],
 })
 export class OnlineDemarchComponent implements OnInit {
   @Input() form: UntypedFormGroup;
@@ -21,7 +20,7 @@ export class OnlineDemarchComponent implements OnInit {
   public showStrangersModal: boolean = false;
 
   ngOnInit(): void {
-    this.selectedModules = this.form.get('onlineDemarchType').value;
+    this.selectedModules = this.form.get('onlineDemarcheType').value;
     this.searchService.getCategories().subscribe((categories: Category[]) => {
       this.accompanimentType = categories.find((el) => el.id === CategoryEnum.onlineProcedures).modules;
     });
@@ -38,7 +37,7 @@ export class OnlineDemarchComponent implements OnInit {
     } else {
       this.selectedModules.push(module);
     }
-    this.form.get('onlineDemarchType').patchValue(this.selectedModules);
+    this.form.get('onlineDemarcheType').patchValue(this.selectedModules);
     this.checkValidation.emit();
   }
 

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

-<app-online-demarch
-  *ngIf="currentStep === mediationStepsEnum.onlineDemarch"
+<ng-container *ngIf="currentType === onlineDemarcheTypeEnum.common">
+  <app-online-demarch
+    *ngIf="currentStep === onlineDemarchesCommonStepsEnum.onlineDemarche"
+    [form]="form"
+    (checkValidation)="checkValidation()"
+  ></app-online-demarch>
+  <app-accompaniment-type
+    *ngIf="currentStep === onlineDemarchesCommonStepsEnum.accompanimentType"
+    [form]="form"
+    (checkValidation)="checkValidation()"
+  ></app-accompaniment-type>
+</ng-container>
+<ng-container *ngIf="currentType === onlineDemarcheTypeEnum.meetings">
+  <app-structure-orientator
+    *ngIf="currentStep === onlineDemarchesMeetingSteps.structureOrientator"
+    [profile]="profile"
+    [form]="form"
+  ></app-structure-orientator>
+</ng-container>
+<ng-container *ngIf="currentType === onlineDemarcheTypeEnum.onlineMediation">
+  <app-online-demarch
+    *ngIf="currentStep === HotlineMediationStepsEnum.onlineDemarch"
+    [form]="form"
+    (checkValidation)="checkValidation()"
+  ></app-online-demarch>
+  <app-accompaniment-type
+    *ngIf="currentStep === HotlineMediationStepsEnum.accompanimentType"
+    [form]="form"
+    (checkValidation)="checkValidation()"
+  ></app-accompaniment-type>
+  <app-mediation-beneciary-info
+    *ngIf="currentStep === HotlineMediationStepsEnum.mediationBeneciaryInfo"
+    [form]="form"
+    (checkValidation)="checkValidation()"
+  ></app-mediation-beneciary-info>
+  <app-mediation-hours-selection
+    *ngIf="currentStep === HotlineMediationStepsEnum.mediationHoursSelection"
+    [form]="form"
+    (checkValidation)="checkValidation()"
+  ></app-mediation-hours-selection>
+  <app-mediation-recap
+    *ngIf="currentStep === HotlineMediationStepsEnum.mediationRecap"
+    [form]="form"
+    [recapType]="recapsType.onlineMediation"
+    (checkValidation)="checkValidation()"
+  ></app-mediation-recap>
+</ng-container>
+<app-orientation-structure-list
+  *ngIf="currentType === onlineDemarcheTypeEnum.structureList"
   [form]="form"
-  (checkValidation)="checkValidation()"
-></app-online-demarch>
-<app-accompaniment-type
-  *ngIf="currentStep === mediationStepsEnum.accompanimentType"
-  [form]="form"
-  (checkValidation)="checkValidation()"
-></app-accompaniment-type>
-<app-mediation-beneciary-info
-  *ngIf="currentStep === mediationStepsEnum.mediationBeneciaryInfo"
-  [form]="form"
-  (checkValidation)="checkValidation()"
-></app-mediation-beneciary-info>
-<app-mediation-hours-selection
-  *ngIf="currentStep === mediationStepsEnum.mediationHoursSelection"
-  [form]="form"
-  (checkValidation)="checkValidation()"
-></app-mediation-hours-selection>
-<app-mediation-recap
-  *ngIf="currentStep === mediationStepsEnum.mediationRecap"
-  [form]="form"
-  (checkValidation)="checkValidation()"
-></app-mediation-recap>
+  [currentStep]="currentStep"
+  [filters]="filters"
+  [profile]="profile"
+  (validatePage)="checkValidation()"
+></app-orientation-structure-list>

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

 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { User } from '../../../models/user.model';
+import { Filter } from '../../../structure-list/models/filter.model';
 import { OrientationUtils } from '../../../utils/orientationUtils';
-import { mediationSteps } from '../enums/mediationSteps.enum';
+import { HotlineMediationSteps } from '../enums/hotlineMediationSteps.enum';
+import { OnlineDemarche } from '../enums/onlineDemarche.enum';
+import { OnlineDemarchesCommonSteps } from '../enums/onlineDemarchesCommonSteps.enum';
+import { OnlineDemarchesMeetingSteps } from '../enums/onlineDemarchesMeetingSteps.enum';
+import { RecapsType } from '../enums/recapsType.enum';
+import { StructuresListSteps } from '../enums/structuresListSteps.enum';
+import { OnlineMediationSteps } from '../types/onlineDemarcheStep.type';
 
 @Component({
   selector: 'app-onlineDemarch-form',
   templateUrl: './onlineDemarch-form.component.html',
 })
 export class OnlineDemarchFormComponent {
-  @Input() currentStep: mediationSteps;
+  @Input() currentStep: OnlineMediationSteps | StructuresListSteps;
+  @Input() currentType: OnlineDemarche;
   @Input() form: UntypedFormGroup;
+  @Input() filters: Filter[] = [];
+  @Input() profile: User;
   @Output() validatePage = new EventEmitter<any>();
 
-  public mediationStepsEnum = mediationSteps;
   public orientationUtils = new OrientationUtils();
   public pagesValidation: any[] = [];
 
+  // Enums
+  public HotlineMediationStepsEnum = HotlineMediationSteps;
+  public onlineDemarchesCommonStepsEnum = OnlineDemarchesCommonSteps;
+  public structuresListStepsEnum = StructuresListSteps;
+  public onlineDemarcheTypeEnum = OnlineDemarche;
+  public onlineDemarchesMeetingSteps = OnlineDemarchesMeetingSteps;
+  public recapsType = RecapsType;
+
   public checkValidation(): void {
-    this.orientationUtils.setValidationsOnlineDemarchForm(
-      this.pagesValidation,
-      this.form,
-      (isValid) => this.validatePage.emit(isValid),
-      this.currentStep
-    );
+    switch (this.currentType) {
+      case OnlineDemarche.onlineMediation:
+        this.orientationUtils.setValidationsOnlineMediationForm(
+          this.pagesValidation,
+          this.form,
+          (isValid) => this.validatePage.emit(isValid),
+          this.currentStep as HotlineMediationSteps
+        );
+        break;
+      case OnlineDemarche.structureList:
+        this.orientationUtils.setValidationsStructuresForm(
+          this.pagesValidation,
+          this.form,
+          (isValid) => this.validatePage.emit(isValid),
+          this.currentStep as StructuresListSteps
+        );
+        break;
+      case OnlineDemarche.common:
+        this.orientationUtils.setValidationsOnlineDemarchesForm(
+          this.pagesValidation,
+          this.form,
+          (isValid) => this.validatePage.emit(isValid),
+          this.currentStep as OnlineDemarchesCommonSteps
+        );
+        break;
+      case OnlineDemarche.meetings:
+        this.orientationUtils.setValidationsOnlineMeetingForm(
+          this.pagesValidation,
+          this.form,
+          (isValid) => this.validatePage.emit(isValid),
+          this.currentStep as OnlineDemarchesMeetingSteps
+        );
+        break;
+      default:
+        throw new Error('Not implemented tunnel type in OnlineDemarchFormComponent');
+    }
   }
 }

src/app/form/orientation-form-view/orientation-form-view.component.html

 <div class="orientation">
-  <app-progress-bar [currentPage]="currentStep"></app-progress-bar>
-  <div class="container">
+  <app-progress-bar [currentPage]="currentStep" [nbSteps]="nbSteps"></app-progress-bar>
+  <div class="container" [ngClass]="{ 'no-max-width': fullScreen }">
     <app-needs-selection
       *ngIf="currentStep === null"
-      [form]="orientationForm"
-      (setNeedType)="setCurrentNeedType($event)"
       [currentNeed]="needType"
+      (setNeedType)="setCurrentNeedType($event)"
       (validate)="validatePage(true)"
     ></app-needs-selection>
-    <app-onlineDemarch-form
-      *ngIf="needType == needEnum.onlineDemarch && currentStep !== null"
-      [currentStep]="currentStep"
-      [form]="onlineDemarchForm"
-      (validatePage)="validatePage($event)"
-    ></app-onlineDemarch-form>
+    <ng-container *ngIf="currentStep !== null">
+      <app-equipment-access
+        *ngIf="needType == needEnum.equipmentAccess"
+        [currentStep]="currentStep"
+        [currentType]="currentType"
+        [form]="filtersForm"
+        [filters]="filters"
+        [profile]="profile"
+        (validatePage)="validatePage($event)"
+      ></app-equipment-access>
+      <app-equipment-buy
+        *ngIf="needType == needEnum.equipmentBuy"
+        [currentStep]="currentStep"
+        [currentType]="currentType"
+        [form]="filtersForm"
+        [filters]="filters"
+        [profile]="profile"
+        (validatePage)="validatePage($event)"
+      ></app-equipment-buy>
+      <app-onlineDemarch-form
+        *ngIf="needType == needEnum.onlineDemarch"
+        [currentStep]="currentStep"
+        [currentType]="currentType"
+        [form]="onlineDemarchForm"
+        [filters]="filters"
+        [profile]="profile"
+        (validatePage)="validatePage($event)"
+      ></app-onlineDemarch-form>
+      <app-base-skills
+        *ngIf="needType == needEnum.learnSkills"
+        [currentStep]="currentStep"
+        [currentType]="currentType"
+        [form]="filtersForm"
+        [filters]="filters"
+        (validatePage)="validatePage($event)"
+      ></app-base-skills>
+    </ng-container>
   </div>
   <div class="navButtons">
     <app-navigation
       [currentStep]="currentStep"
+      [isLastStep]="isLastStep"
       [needType]="needType"
+      [currentType]="currentType"
       [isPageValid]="isPageValid"
       (goNext)="nextPage()"
       (goPrev)="prevPage()"

src/app/form/orientation-form-view/orientation-form-view.component.scss

@@ -27,12 +27,55 @@
       padding: 1rem;
     }
   }
+  .no-max-width {
+    max-width: none;
+    padding: 0;
+  }
   .navButtons {
     margin-top: auto;
     padding: 1rem;
   }
 }
 
+::ng-deep.title {
+  margin-bottom: 16px;
+  .overtitle {
+    @include lato-regular-18;
+    color: $grey-3;
+    margin-bottom: 3px;
+  }
+
+  h3 {
+    @include lato-bold-24;
+    margin: 0;
+    @media #{$tablet} {
+      @include lato-bold-22;
+    }
+  }
+
+  h4 {
+    @include lato-bold-18;
+    margin-bottom: 0;
+  }
+  p {
+    @include lato-regular-18;
+    color: $grey-3;
+    font-style: italic;
+    margin-top: 4px;
+  }
+  .backArrow {
+    cursor: pointer;
+  }
+  &.editTitle {
+    display: flex;
+    align-items: center;
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+}
+
 div.titleform {
   color: red;
 }

src/app/form/orientation-form-view/orientation-form-view.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { OrientationFormViewComponent } from './orientation-form-view.component';
-
-describe('OrientationFormViewComponent', () => {
-  let component: OrientationFormViewComponent;
-  let fixture: ComponentFixture<OrientationFormViewComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ OrientationFormViewComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(OrientationFormViewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

 import { AfterContentChecked, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { UntypedFormGroup } from '@angular/forms';
-import { Router } from '@angular/router';
+import { FormGroup, UntypedFormGroup } from '@angular/forms';
+import { User } from '../../models/user.model';
+import { ProfileService } from '../../profile/services/profile.service';
+import { AuthService } from '../../services/auth.service';
+import { NotificationService } from '../../services/notification.service';
 import { OnlineMediationService } from '../../services/online-mediation.service';
+import { Filter } from '../../structure-list/models/filter.model';
 import { Module } from '../../structure-list/models/module.model';
 import { OrientationUtils } from '../../utils/orientationUtils';
-import { mediationSteps } from './enums/mediationSteps.enum';
-import { needsType } from './enums/needs.enum';
+import { Utils } from '../../utils/utils';
+import { FiltersSteps } from './enums/filtersSteps.enum';
+import { GenericOrientationSteps } from './enums/genericOrientationSteps.enum';
+import { HotlineMediationSteps } from './enums/hotlineMediationSteps.enum';
+import { NeedsType } from './enums/needs.enum';
+import { OnlineDemarche } from './enums/onlineDemarche.enum';
+import { OnlineDemarchesCommonSteps } from './enums/onlineDemarchesCommonSteps.enum';
+import { OnlineDemarchesMeetingSteps } from './enums/onlineDemarchesMeetingSteps.enum';
+import { StructuresListSteps } from './enums/structuresListSteps.enum';
+import { FiltersForm } from './interfaces/filtersForm.interface';
 import { IOnlineMediation } from './interfaces/onlineMediation.interface';
-import { NotificationService } from '../../services/notification.service';
-import { AuthService } from '../../services/auth.service';
+import { StructureOrientationForm } from './interfaces/structureOrientationForm.interface';
+import { MediationType } from './types/mediation.type';
+import { MediationStepType } from './types/mediationStep.type';
 
 @Component({
   selector: 'app-orientation-form-view',
@@ -17,18 +30,26 @@ import { AuthService } from '../../services/auth.service';
 })
 export class OrientationFormViewComponent implements OnInit, AfterContentChecked {
   public orientationUtils = new OrientationUtils();
+  public utils = new Utils();
+  // OnlineDemarches
   public onlineDemarchForm: UntypedFormGroup;
-  public equipmentBuyForm: UntypedFormGroup;
-  public equipmentAccessForm: UntypedFormGroup;
-  public learnSkillsForm: UntypedFormGroup;
-  public orientationStepEnum = mediationSteps;
-  public currentStep: mediationSteps = null;
-  public nbSteps: number = Object.keys(mediationSteps).length / 2;
+  public onlineDemarcheType: OnlineDemarche;
+  // Equipments
+  public filtersForm: FormGroup<FiltersForm> | FormGroup<StructureOrientationForm>;
+  // Enum
+  public needEnum = NeedsType;
+  // Global
+  public needType: NeedsType;
+  public currentType: MediationType = OnlineDemarche.common;
+  public currentStep: MediationStepType = null;
+  public isLastStep = false;
+  public nbSteps: number = Object.keys(HotlineMediationSteps).length / 2;
   public isPageValid: boolean = false;
-  public needType: needsType;
-  public needEnum = needsType;
+  public filters: Filter[] = [];
+  public profile: User;
   public canDeactivate: boolean = false;
   public showLoginModal: boolean = false;
+  public fullScreen: boolean = false;
 
   // Modal canExit var
   public showConfirmationModal = false;
@@ -36,15 +57,17 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
 
   constructor(
     private onlineMediationService: OnlineMediationService,
-    private router: Router,
     private notificationService: NotificationService,
     private authService: AuthService,
+    private profileService: ProfileService,
     private cdref: ChangeDetectorRef
   ) {}
 
-  ngOnInit() {
+  async ngOnInit() {
     if (!this.authService.isLoggedIn()) {
       this.showLoginModal = true;
+    } else {
+      this.profile = await this.profileService.getProfile();
     }
   }
 
@@ -56,74 +79,277 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
     this.isPageValid = event;
   }
 
-  public setCurrentNeedType(needType: needsType): void {
+  public setStepNumber(enumLength: number): void {
+    this.nbSteps = enumLength / 2;
+  }
+
+  public setCurrentNeedType(needType: NeedsType): void {
     this.needType = needType;
     this.validatePage(true);
+    // Init form according to needType
     switch (needType) {
-      case needsType.onlineDemarch:
-        if (!this.onlineDemarchForm) {
-          this.onlineDemarchForm = this.orientationUtils.createOnlineDemarchForm();
-        }
+      case NeedsType.onlineDemarch:
+        this.onlineDemarchForm = this.orientationUtils.createOnlineDemarchesForm();
+        break;
+      case NeedsType.equipmentAccess:
+      case NeedsType.equipmentBuy:
+        this.filtersForm = this.orientationUtils.createFiltersForm();
+        break;
+      case NeedsType.learnSkills:
+        this.filtersForm = this.orientationUtils.createFiltersForm();
+        this.onlineDemarchForm = this.orientationUtils.createOnlineDemarchesForm();
+        break;
+      default:
+        throw new Error(`Not implemented NeedsType in OrientationFormViewComponent ${needType}`);
+    }
+  }
+
+  public checkLastStep(): void {
+    if (
+      this.needType === NeedsType.onlineDemarch &&
+      this.currentType === OnlineDemarche.onlineMediation &&
+      this.currentStep === HotlineMediationSteps.mediationRecap
+    ) {
+      this.isLastStep = true;
+    } else if (this.isStructureListForm() && this.currentStep === StructuresListSteps.mediationRecap) {
+      this.isLastStep = true;
+    } else this.isLastStep = false;
+  }
+
+  /**
+   * Handle online mediation finsh by sending appointement to server
+   */
+  public handleOnlineAppointment(): void {
+    const toCreate: IOnlineMediation = {
+      ...this.onlineDemarchForm.value,
+      onlineDemarchType: this.onlineDemarchForm.value.filters.map((module: Module) => module.displayText),
+    };
+    this.onlineMediationService.createOnlineMediation(toCreate).subscribe((data) => {
+      if (data) {
+        this.canDeactivate = true;
+        this.notificationService.showSuccess('Votre démarche en ligne a bien été enregistrée');
+      } else {
+        this.notificationService.showError('Echec de la création de votre démarche en ligne');
+      }
+      this.printForm();
+    });
+  }
+
+  public printForm(): void {
+    window.print();
+    setTimeout(() => {
+      this.canDeactivate = true;
+      window.location.reload();
+    }, 100);
+  }
+
+  public setOnlineEquipmentsForm() {
+    this.currentType = OnlineDemarche.structureList;
+    this.currentStep = StructuresListSteps.pmrAccess;
+    // first filter screnn + regular StructureList form
+    this.setStepNumber(Object.keys(StructuresListSteps).length);
+    this.filtersForm = this.orientationUtils.createStructureOrientationForm(this.filtersForm.value.filters);
+  }
+
+  public setOnlineProceduresForm() {
+    switch (this.onlineDemarchForm.get('accompanimentType').value) {
+      case OnlineDemarche.structureList:
+        this.currentType = OnlineDemarche.structureList;
+        this.currentStep = StructuresListSteps.pmrAccess;
+        this.setStepNumber(Object.keys(StructuresListSteps).length);
+        this.onlineDemarchForm = this.orientationUtils.createStructureOrientationForm(
+          this.utils.convertFiltersToModule(this.filters)
+        );
+        break;
+      case OnlineDemarche.meetings:
+        this.currentStep = OnlineDemarchesMeetingSteps.structureOrientator;
+        this.currentType = OnlineDemarche.meetings;
+        this.skipStructureOrientator();
         break;
-      // case needsType.equipmentBuy:
-      //   this.equipmentBuyForm = this.orientationUtils.createOnlineDemarchForm();
-      //   break;
-      // case needsType.equipmentAccess:
-      //   this.equipmentAccessForm = this.orientationUtils.createOnlineDemarchForm();
-      //   break;
-      // case needsType.learnSkills:
-      //   this.learnSkillsForm = this.orientationUtils.createOnlineDemarchForm();
-      //   break;
+      case OnlineDemarche.onlineMediation:
+        this.currentType = OnlineDemarche.onlineMediation;
+        this.currentStep = HotlineMediationSteps.mediationBeneciaryInfo;
+        this.setStepNumber(Object.keys(HotlineMediationSteps).length);
+        this.onlineDemarchForm = this.orientationUtils.createOnlineMediationForm(
+          this.utils.convertFiltersToModule(this.filters)
+        );
+        break;
+      default:
+        throw new Error('Not implemented value in nextPage()');
     }
   }
 
-  public handleFinishForm(): void {
-    switch (this.needType) {
-      case needsType.onlineDemarch:
-        const toCreate: IOnlineMediation = {
-          ...this.onlineDemarchForm.value,
-          onlineDemarchType: this.onlineDemarchForm.value.onlineDemarchType.map((module: Module) => module.displayText),
-        };
-        this.onlineMediationService.createOnlineMediation(toCreate).subscribe((data) => {
-          if (data) {
-            this.canDeactivate = true;
-            this.notificationService.showSuccess('Votre démarche en ligne a bien été enregistrée');
-          } else {
-            this.notificationService.showError('Echec de la création de votre démarche en ligne');
-          }
-          window.print();
-          setTimeout(() => {
-            this.onlineDemarchForm = this.orientationUtils.createOnlineDemarchForm();
-            this.currentStep = 0;
-          }, 100);
-        });
+  public skipStructureOrientator() {
+    if (this.profile?.structuresLink?.length === 1) {
+      // skip first step
+      this.currentStep++;
     }
   }
+
+  public setOnlineProcedureFilters(): void {
+    // Handle online procedures
+    const onlineProcedures: Filter[] = this.onlineDemarchForm.value.onlineDemarcheType.map((module: Module) => {
+      return new Filter('onlineProcedures', module.id, module.displayText);
+    });
+    if (onlineProcedures.length > 0) this.filters.push(onlineProcedures[0]);
+  }
+
+  public setFilters(category: string): void {
+    // Handle online procedures
+    this.filters = this.filtersForm.value.filters.map((module: Module) => {
+      return new Filter(category, module.id, module.displayText);
+    });
+  }
+
   public nextPage(): void {
     this.isPageValid = false;
-    if (this.currentStep === mediationSteps.mediationRecap) {
-      this.handleFinishForm();
+    // Handle filters form
+    if (
+      this.isFilterForm() &&
+      this.currentType === GenericOrientationSteps.common &&
+      this.currentStep === FiltersSteps.filterChoice
+    ) {
+      switch (this.needType) {
+        case NeedsType.equipmentAccess:
+          this.setFilters('selfServiceMaterial');
+          // Switch to structure list form
+          this.setOnlineEquipmentsForm();
+          break;
+        case NeedsType.equipmentBuy:
+          this.setFilters('solidarityMaterial');
+          // Switch to structure list form
+          this.setOnlineEquipmentsForm();
+          break;
+        case NeedsType.learnSkills:
+          this.setFilters('baseSkills');
+          this.needType = NeedsType.onlineDemarch;
+          this.currentStep = OnlineDemarchesCommonSteps.accompanimentType;
+          break;
+      }
       return;
     }
+    // Online demarches
+    if (this.needType === NeedsType.onlineDemarch) {
+      if (
+        this.currentType === OnlineDemarche.common &&
+        this.currentStep === OnlineDemarchesCommonSteps.accompanimentType
+      ) {
+        this.setOnlineProcedureFilters();
+        this.setOnlineProceduresForm();
+        return;
+      }
+      // Handle last screen Online appointment and print
+      if (
+        this.currentType === OnlineDemarche.onlineMediation &&
+        this.currentStep === HotlineMediationSteps.mediationRecap
+      ) {
+        this.handleOnlineAppointment();
+        return;
+      }
+      // Structure orientator screen
+      if (
+        this.currentType === OnlineDemarche.structureList &&
+        this.currentStep === StructuresListSteps.structureOrientator
+      ) {
+        this.skipStructureOrientator();
+        this.currentStep++;
+        return;
+      }
+    }
+
+    // Structure list handling
+    if (this.isStructureListForm()) {
+      // Print last screen
+      if (this.currentStep === StructuresListSteps.mediationRecap) {
+        this.printForm();
+        return;
+      }
+      // Carto display case for full screen
+      // Set to full screen
+      if (this.currentStep === StructuresListSteps.address) {
+        this.fullScreen = true;
+      }
+      // Unset fullscrenn
+      if (this.currentStep === StructuresListSteps.structureChoice) {
+        this.fullScreen = false;
+      }
+    }
+
+    // Default case
     if (this.currentStep === null) {
-      //handle the form start
+      // handle the form start
       this.currentStep = 0;
       return;
     }
     if (this.currentStep < this.nbSteps) {
       this.currentStep++;
+      this.checkLastStep();
     }
   }
+
   public prevPage(): void {
+    // Structure list previous page
+    if (this.isStructureListForm()) {
+      if (this.currentStep === StructuresListSteps.structureChoice) {
+        this.fullScreen = false;
+        this.currentStep--;
+        return;
+      }
+      if (this.currentStep === StructuresListSteps.structureOrientator) {
+        this.fullScreen = true;
+        this.currentStep--;
+        return;
+      }
+    }
+
+    // Default case
     if (this.currentStep === 0) {
-      //handle the form start
-      this.currentStep = null;
+      // handle the form start
+      this.reset();
       return;
     }
     if (this.currentStep > 0) {
       this.currentStep--;
     }
   }
+
+  public reset(): void {
+    this.onlineDemarchForm = undefined;
+    this.onlineDemarcheType = undefined;
+    this.filtersForm = undefined;
+    this.currentStep = null;
+    this.currentType = OnlineDemarche.common;
+    this.nbSteps = Object.keys(HotlineMediationSteps).length / 2;
+    this.isPageValid = false;
+    this.needType = undefined;
+    this.filters = [];
+  }
+
+  /**
+   * Return if it's a Structure List form
+   * @returns
+   */
+  private isStructureListForm(): boolean {
+    return (
+      (this.needType === NeedsType.onlineDemarch ||
+        this.needType === NeedsType.equipmentAccess ||
+        this.needType === NeedsType.equipmentBuy) &&
+      this.currentType === OnlineDemarche.structureList
+    );
+  }
+
+  /**
+   * Return if it's a filter form
+   * @returns
+   */
+  private isFilterForm(): boolean {
+    return (
+      this.needType === NeedsType.equipmentAccess ||
+      this.needType === NeedsType.equipmentBuy ||
+      this.needType === NeedsType.learnSkills
+    );
+  }
+
   public canExit(): Promise<boolean> {
     // Avoid confirmation when user submit form and leave.
     if (this.canDeactivate || this.currentStep === null) {

src/app/form/orientation-form-view/orientation-structure-list/orientation-comments/orientation-comments.component.html

+<form [formGroup]="form">
+  <div class="title">
+    <div class="titleContent">
+      <h3>Avez-vous des précisions à apporter&nbsp;?</h3>
+      <p>Facultatif</p>
+    </div>
+  </div>
+  <div class="textareaBlock" fxLayout="column">
+    <textarea
+      rows="8"
+      placeholder=""
+      maxlength="500"
+      (input)="setComment($event.target.value)"
+      formControlName="comments"
+    ></textarea>
+    <p>
+      {{ getStructureControl('comments').value?.length || 0 }}&nbsp;/&nbsp;500
+    </p>
+  </div>
+</form>

src/app/form/orientation-form-view/orientation-structure-list/orientation-comments/orientation-comments.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { AbstractControl, UntypedFormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-orientation-comments',
+  templateUrl: './orientation-comments.component.html',
+})
+export class OrientationCommentsComponent implements OnInit {
+  @Input() form: UntypedFormGroup;
+  @Output() checkValidation = new EventEmitter<string>();
+
+  ngOnInit(): void {
+    this.checkValidation.emit();
+  }
+
+  public getStructureControl(nameControl: string): AbstractControl {
+    return this.form.get(nameControl);
+  }
+
+  public setComment(text?: string) {
+    this.checkValidation.emit(text);
+  }
+}