Resolve "Ajout des écrans intermédiaires de démarche en ligne"

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

 export enum MeetingRDVSSteps {
+  infoScreen,
   structureOrientator,
   publicTypeMandatory,
   publicTypeOptional,

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

 export enum HotlineMediationSteps {
+  infoScreen,
   mediationBeneciaryInfo,
   mediationHoursSelection,
   mediationLanguageSelection,

src/app/form/orientation-form-view/global-components/information-screen/information-screen.component.html

+<div class="container" *ngIf="currentType === currentTypeEnum.meetings">
+  <img src="../../../../../assets/img/rdvsBeginning.svg" alt="Meeting image" />
+  <h2>Vous vous apprêtez à prendre RDV auprès d'un Conseiller numérique</h2>
+  <p>
+    Ces professionnels sont là pour accompagner les publics sur des problématiques liées au numérique et non aux
+    démarches administratives en elles-mêmes. Si le frein est uniquement administratif, merci d'orienter le bénéficiaire
+    vers un lieu type "Maison France services"
+  </p>
+</div>
+<div class="container" *ngIf="currentType === currentTypeEnum.onlineMediation">
+  <img src="../../../../../assets/img/onlineMediationBeginning.svg" alt="Illustration RDV en ligne" />
+  <h2>Vous êtes sur le point de prendre un rendez-vous avec un médiateur ou une médiatrice à distance</h2>
+  <p>
+    Ce service d’accompagnement numérique permettra au bénéficiaire d’être assisté depuis son domicile pour apprendre à
+    utiliser son matériel ou effectuer une démarche sur internet par exemple. En choisissant de prendre un rendez-vous,
+    le bénéficiaire sera recontacté par l’un de nos médiateurs numériques sur le créneau sélectionné.
+  </p>
+</div>

src/app/form/orientation-form-view/global-components/information-screen/information-screen.component.scss

+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  height: 90%;
+  h2 {
+    margin-top: 2rem;
+    margin-bottom: 0.5rem;
+  }
+}

src/app/form/orientation-form-view/global-components/information-screen/information-screen.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { OnlineDemarche } from '../../enums/onlineDemarche.enum';
+
+@Component({
+  selector: 'app-information-screen',
+  templateUrl: './information-screen.component.html',
+  styleUrls: ['./information-screen.component.scss'],
+})
+export class InformationScreenComponent implements OnInit {
+  @Input() currentType: OnlineDemarche;
+  @Output() checkValidation = new EventEmitter<boolean>();
+
+  public currentTypeEnum = OnlineDemarche;
+
+  ngOnInit(): void {
+    this.checkValidation.emit();
+  }
+}

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

@@ -13,6 +13,11 @@
 </ng-container>
 <!-- MEETING FORM (RDVS) -->
 <ng-container *ngIf="currentType === onlineDemarcheTypeEnum.meetings">
+  <app-information-screen
+    *ngIf="currentStep === onlineDemarchesMeetingSteps.infoScreen"
+    [currentType]="currentType"
+    (checkValidation)="checkValidation()"
+  ></app-information-screen>
   <app-structure-orientator
     *ngIf="currentStep === onlineDemarchesMeetingSteps.structureOrientator"
     [profile]="profile"
@@ -71,6 +76,11 @@
 </ng-container>
 <!-- ONLINE MEDIATION FORM -->
 <ng-container *ngIf="currentType === onlineDemarcheTypeEnum.onlineMediation">
+  <app-information-screen
+    *ngIf="currentStep === HotlineMediationStepsEnum.infoScreen"
+    [currentType]="currentType"
+    (checkValidation)="checkValidation()"
+  ></app-information-screen>
   <app-online-demarch
     *ngIf="currentStep === HotlineMediationStepsEnum.onlineDemarch"
     [form]="form"

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

@@ -216,15 +216,15 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
         );
         break;
       case OnlineDemarche.meetings:
-        this.currentStep = MeetingRDVSSteps.structureOrientator;
         this.currentType = OnlineDemarche.meetings;
+        this.currentStep = MeetingRDVSSteps.infoScreen;
         this.setStepNumber(Object.keys(MeetingRDVSSteps).length);
         this.skipStructureOrientator();
         this.onlineDemarchForm = this.orientationUtils.createMeetingRDVSForm(this.filters, this.orientator);
         break;
       case OnlineDemarche.onlineMediation:
         this.currentType = OnlineDemarche.onlineMediation;
-        this.currentStep = HotlineMediationSteps.mediationBeneciaryInfo;
+        this.currentStep = HotlineMediationSteps.infoScreen;
         this.setStepNumber(Object.keys(HotlineMediationSteps).length);
         this.onlineDemarchForm = this.orientationUtils.createOnlineMediationForm(
           this.utils.convertFiltersToModule(this.filters)

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

@@ -28,6 +28,7 @@ import { SelectComponent } from './global-components/select/select.component';
 import { MeetingDigitalPassComponent } from './online-demarch/meeting-rdvs/meeting-digital-pass/meeting-digital-pass.component';
 import { MeetingRdvsDoingComponent } from './online-demarch/meeting-rdvs/meeting-rdvs-doing/meeting-rdvs-doing.component';
 import { MediationBeneciaryInfoComponent } from './online-demarch/online-mediation/mediation-beneciary-info/mediation-beneciary-info.component';
+import { InformationScreenComponent } from './global-components/information-screen/information-screen.component';
 
 @NgModule({
   declarations: [
@@ -57,6 +58,7 @@ import { MediationBeneciaryInfoComponent } from './online-demarch/online-mediati
     SelectComponent,
     MeetingDigitalPassComponent,
     MeetingRdvsDoingComponent,
+    InformationScreenComponent,
   ],
   imports: [OrientationRoutingModule, CartoModule, SharedModule],
 })

src/app/utils/orientationUtils.ts

@@ -164,6 +164,9 @@ export class OrientationUtils {
     updatePageValid: (isValid: boolean) => void,
     step: HotlineMediationSteps
   ): void {
+    pagesValidation[HotlineMediationSteps.infoScreen] = {
+      valid: true,
+    };
     pagesValidation[HotlineMediationSteps.mediationBeneciaryInfo] = {
       valid: form.get('name').valid && form.get('surname').valid && form.get('phone').valid,
     };
@@ -223,6 +226,9 @@ export class OrientationUtils {
     updatePageValid: (isValid: boolean) => void,
     step: MeetingRDVSSteps
   ): void {
+    pagesValidation[MeetingRDVSSteps.infoScreen] = {
+      valid: true,
+    };
     pagesValidation[MeetingRDVSSteps.structureOrientator] = {
       valid: form.get('structureOrientator').valid,
     };