src/app/form/orientation-form-view/equipment-access/equipment-access-choice/equipment-access-choice.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 
 import { CategoryEnum } from '../../../../shared/enum/category.enum';
 import { Category } from '../../../../structure-list/models/category.model';
 import { Module } from '../../../../structure-list/models/module.model';
 import { SearchService } from '../../../../structure-list/services/search.service';
 import { SelectComponent } from '../../global-components/select/select.component';
+import { FiltersForm } from '../../interfaces/filtersForm.interface';
 
 @Component({
   selector: 'app-equipment-access-choice',
   templateUrl: './equipment-access-choice.component.html',
 })
 export class EquipmentAccessChoiceComponent extends SelectComponent implements OnInit {
+  @Input() form: FormGroup<FiltersForm>;
   public equipmentType: Module[] = [];
 
   constructor(private searchService: SearchService) {
@@ -18,6 +21,7 @@ export class EquipmentAccessChoiceComponent extends SelectComponent implements O
   }
 
   ngOnInit(): void {
+    this.selectedModules = this.form.get('filters').value;
     this.searchService.getCategories().subscribe((categories: Category[]) => {
       this.equipmentType = categories.find((el) => el.id === CategoryEnum.selfServiceMaterial).modules;
     });

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

@@ -8,7 +8,7 @@
 ></app-equipment-access-choice>
 <app-orientation-structure-list
   *ngIf="currentType === GenericOrientationSteps.structureList"
-  [form]="form"
+  [form]="orientationForm"
   [currentStep]="currentStep"
   [filters]="filters"
   [profile]="profile"

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

 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormGroup, UntypedFormGroup } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 import { User } from '../../../models/user.model';
 import { Filter } from '../../../structure-list/models/filter.model';
 import { OrientationUtils } from '../../../utils/orientationUtils';
@@ -8,6 +8,7 @@ import { GenericOrientationSteps } from '../enums/genericOrientationSteps.enum';
 import { RecapsType } from '../enums/recapsType.enum';
 import { StructuresListSteps } from '../enums/structuresListSteps.enum';
 import { FiltersForm } from '../interfaces/filtersForm.interface';
+import { StructureOrientationForm } from '../interfaces/structureOrientationForm.interface';
 
 @Component({
   selector: 'app-equipment-access',
@@ -17,6 +18,7 @@ export class EquipmentAccessComponent {
   @Input() currentStep: FiltersSteps | StructuresListSteps;
   @Input() currentType: GenericOrientationSteps;
   @Input() form: FormGroup<FiltersForm>;
+  @Input() orientationForm: FormGroup<StructureOrientationForm>;
   @Input() filters: Filter[] = [];
   @Input() profile: User;
   @Output() validatePage = new EventEmitter<any>();
@@ -42,7 +44,7 @@ export class EquipmentAccessComponent {
       case GenericOrientationSteps.structureList:
         this.orientationUtils.setValidationsStructuresForm(
           this.pagesValidation,
-          this.form as UntypedFormGroup,
+          this.orientationForm,
           (isValid) => this.validatePage.emit(isValid),
           this.currentStep as StructuresListSteps
         );

src/app/form/orientation-form-view/equipment-buy/equipment-buy-type/equipment-buy-type.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import { CategoryEnum } from '../../../../shared/enum/category.enum';
 import { Category } from '../../../../structure-list/models/category.model';
 import { Module } from '../../../../structure-list/models/module.model';
 import { SearchService } from '../../../../structure-list/services/search.service';
 import { SelectComponent } from '../../global-components/select/select.component';
+import { FiltersForm } from '../../interfaces/filtersForm.interface';
 
 @Component({
   selector: 'app-equipment-buy-type',
   templateUrl: './equipment-buy-type.component.html',
 })
 export class EquipmentBuyTypeComponent extends SelectComponent implements OnInit {
+  @Input() form: FormGroup<FiltersForm>;
   public equipmentType: Module[] = [];
   constructor(private searchService: SearchService) {
     super();
   }
 
   ngOnInit(): void {
+    this.selectedModules = this.form.get('filters').value;
     this.searchService.getCategories().subscribe((categories: Category[]) => {
       this.equipmentType = categories.find((el) => el.id === CategoryEnum.solidarityMaterial).modules;
     });

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

@@ -8,7 +8,7 @@
 ></app-equipment-buy-type>
 <app-orientation-structure-list
   *ngIf="currentType === GenericOrientationSteps.structureList"
-  [form]="form"
+  [form]="orientationForm"
   [currentStep]="currentStep"
   [filters]="filters"
   [profile]="profile"

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

 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormGroup, UntypedFormGroup } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 import { User } from '../../../models/user.model';
 import { Filter } from '../../../structure-list/models/filter.model';
 import { OrientationUtils } from '../../../utils/orientationUtils';
@@ -8,6 +8,7 @@ import { GenericOrientationSteps } from '../enums/genericOrientationSteps.enum';
 import { RecapsType } from '../enums/recapsType.enum';
 import { StructuresListSteps } from '../enums/structuresListSteps.enum';
 import { FiltersForm } from '../interfaces/filtersForm.interface';
+import { StructureOrientationForm } from '../interfaces/structureOrientationForm.interface';
 
 @Component({
   selector: 'app-equipment-buy',
@@ -17,6 +18,7 @@ export class EquipmentBuyComponent {
   @Input() currentStep: FiltersSteps | StructuresListSteps;
   @Input() currentType: GenericOrientationSteps;
   @Input() form: FormGroup<FiltersForm>;
+  @Input() orientationForm: FormGroup<StructureOrientationForm>;
   @Input() filters: Filter[] = [];
   @Input() profile: User;
   @Output() validatePage = new EventEmitter<any>();
@@ -42,7 +44,7 @@ export class EquipmentBuyComponent {
       case GenericOrientationSteps.structureList:
         this.orientationUtils.setValidationsStructuresForm(
           this.pagesValidation,
-          this.form as UntypedFormGroup,
+          this.orientationForm,
           (isValid) => this.validatePage.emit(isValid),
           this.currentStep as StructuresListSteps
         );

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/global-components/mediation-recap/mediation-recap.component.html

@@ -3,9 +3,9 @@
   <div class="orientator header" *ngIf="isOrientator()">
     <h3>Orienté par</h3>
     <div class="content">
-      <div class="infos">{{ orientator.structureName }}</div>
-      <div class="infos">{{ orientator.structureMail }}</div>
-      <div class="infos">{{ orientator.structurePhone }}</div>
+      <div class="infos structureName">{{ orientator.structureName }}</div>
+      <div class="infos" *ngIf="orientator.structureMail">{{ orientator.structureMail }}</div>
+      <div class="infos" *ngIf="orientator.structurePhone">{{ orientator.structurePhone }}</div>
     </div>
   </div>
   <div class="beneficiary header">

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

@@ -43,6 +43,9 @@
       .infos {
         @include lato-bold-14;
         margin-bottom: 1rem;
+        &.structureName {
+          @include lato-bold-18;
+        }
       }
     }
   }

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

@@ -48,7 +48,7 @@ export class MediationRecapComponent implements OnInit {
   }
 
   public isOrientator(): boolean {
-    return this.orientator?.structureMail ? true : false;
+    return this.orientator?.structureName ? true : false;
   }
 
   public handleOnlineMediationRecap(): void {

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

 <div class="footerForm" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
-  <app-button
-    *ngIf="currentStep !== null"
-    (action)="prevPage()"
-    [text]="'Précédent'"
-    [iconType]="'form'"
-    [iconBtn]="'chevronLeft'"
-  ></app-button>
-  <app-button
-    (action)="nextPage()"
-    [text]="isLastStep ? 'Terminer' : 'Suivant'"
-    [iconBtn]="!isLastStep ? 'chevronRight' : 'finish'"
-    [iconType]="'form'"
-    [iconPos]="!isLastStep ? 'right' : 'left'"
-    [style]="buttonTypeEnum.Primary"
-    [disabled]="!isPageValid"
-  >
-  </app-button>
+  <ng-container *ngIf="!shouldResetOrientation">
+    <app-button
+      *ngIf="currentStep !== null && !hideNavButtons"
+      (action)="prevPage()"
+      [text]="'Précédent'"
+      [iconType]="'form'"
+      [iconBtn]="'chevronLeft'"
+    ></app-button>
+    <app-button
+      *ngIf="!isRdvsWindowStep && !hideNavButtons"
+      (action)="nextPage()"
+      [text]="isLastStep ? 'Terminer' : 'Suivant'"
+      [iconBtn]="!isLastStep ? 'chevronRight' : 'finish'"
+      [iconType]="'form'"
+      [iconPos]="!isLastStep ? 'right' : 'left'"
+      [style]="buttonTypeEnum.Primary"
+      [disabled]="!isPageValid"
+    >
+    </app-button>
+    <app-button
+      *ngIf="isRdvsWindowStep && !hideNavButtons"
+      (action)="nextPage()"
+      [text]="'RDV Solidarités'"
+      [iconBtn]="'redirect'"
+      [iconType]="'form'"
+      [iconPos]="'left'"
+      [style]="buttonTypeEnum.RdvsButton"
+      [disabled]="!isPageValid"
+    >
+    </app-button>
+  </ng-container>
+  <ng-container *ngIf="shouldResetOrientation">
+    <app-button (action)="goCarto()" [text]="'Aller à la cartographie'"> </app-button>
+    <app-button (action)="resetOrientation()" [text]="'Recommencer'" [style]="buttonTypeEnum.Primary"> </app-button>
+  </ng-container>
 </div>

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

 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
 import { NeedsType } from '../../enums/needs.enum';
 import { OnlineDemarche } from '../../enums/onlineDemarche.enum';
@@ -15,12 +16,16 @@ export class NavigationComponent {
   @Input() isPageValid: boolean;
   @Input() needType: NeedsType;
   @Input() isLastStep = false;
+  @Input() isRdvsWindowStep = false;
+  @Input() hideNavButtons = false;
+  @Input() shouldResetOrientation = false;
+
   @Output() goNext = new EventEmitter<any>();
   @Output() goPrev = new EventEmitter<any>();
 
   public buttonTypeEnum = ButtonType;
   public NeedsTypeEnum = NeedsType;
-
+  constructor(private router: Router, private route: ActivatedRoute) {}
   public nextPage(isPrint?: boolean) {
     this.goNext.emit(isPrint);
   }
@@ -28,4 +33,12 @@ export class NavigationComponent {
   public prevPage() {
     this.goPrev.emit();
   }
+  public goCarto(): void {
+    this.router.navigateByUrl('/acteurs');
+  }
+  public resetOrientation(): void {
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this.router.onSameUrlNavigation = 'reload';
+    this.router.navigate(['./'], { relativeTo: this.route });
+  }
 }

src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html

@@ -4,7 +4,8 @@
   <div
     *ngFor="let structure of structuresLinked"
     (click)="select(structure)"
-    [class]="structure === selected ? 'item-selected structure-item' : 'structure-item'"
+    class="structure-item"
+    [ngClass]="{ 'item-selected': structure.structureName === selected?.structureName }"
   >
     <div class="item-frame">
       <div class="name">{{ structure.structureName }}</div>
@@ -12,7 +13,7 @@
     </div>
     <app-svg-icon
       class="form-icon"
-      *ngIf="structure === selected"
+      *ngIf="structure.structureName === selected?.structureName"
       [iconClass]="'icon-26'"
       [type]="'form'"
       [icon]="'validate'"
@@ -32,7 +33,7 @@
           (input)="updatedForm('structureName', $event.target.value)"
         />
         <app-svg-icon
-          *ngIf="form.get('structureName').valid"
+          *ngIf="form.get('structureName').value && form.get('structureName').valid"
           [iconClass]="'validation'"
           [type]="'form'"
           [icon]="'validate'"
@@ -78,7 +79,7 @@
           type="phone"
           autocomplete="on"
           (input)="updatedForm('structurePhone', $event.target.value)"
-          formControlName="phone"
+          formControlName="structurePhone"
           class="form-input"
         />
         <app-svg-icon

src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.ts

@@ -3,6 +3,7 @@ import { UntypedFormGroup } from '@angular/forms';
 import { Structure } from '../../../../models/structure.model';
 import { User } from '../../../../models/user.model';
 import { StructureService } from '../../../../services/structure.service';
+import { Utils } from '../../../../utils/utils';
 
 @Component({
   selector: 'app-structure-orientator',
@@ -16,16 +17,19 @@ export class StructureOrientatorComponent implements OnInit {
   public structuresLinked: Structure[] = [];
   public hasStructures: boolean = false;
   public selected: Structure;
-  constructor(private structureService: StructureService) {}
+  constructor(private structureService: StructureService, private utils: Utils) {}
 
   ngOnInit(): void {
+    this.form = this.form.get('structureOrientator') as UntypedFormGroup;
     if (this.profile?.structuresLink?.length) {
       this.hasStructures = true;
-
       for (let structure of this.profile.structuresLink) {
-        this.structureService
-          .getStructure(structure)
-          .subscribe((_structure) => this.structuresLinked.push(new Structure(_structure)));
+        this.structureService.getStructure(structure).subscribe((_structure) => {
+          this.structuresLinked.push(new Structure(_structure));
+          if (this.form.get('structureName')?.value === _structure.structureName) {
+            this.select(_structure);
+          }
+        });
       }
     } else {
       this.hasStructures = false;
@@ -34,11 +38,19 @@ export class StructureOrientatorComponent implements OnInit {
 
   public select(structure: Structure): void {
     this.selected = structure;
-    this.form.get('structureOrientator').patchValue({
+    this.form.patchValue({
       structureName: structure.structureName,
       structureMail: structure.contactMail,
       structurePhone: structure.contactPhone,
     });
-    this.validatePage.emit(this.form.get('structureOrientator').valid);
+    this.validatePage.emit(this.form.valid);
+  }
+
+  public updatedForm(field: string, value: string) {
+    if (field === 'phone') {
+      this.utils.modifyPhoneInput(this.form, 'phone', value);
+    } else this.form.get(field).patchValue(value);
+
+    this.validatePage.emit(this.form.valid);
   }
 }

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

+import { FormControl, FormGroup, UntypedFormGroup } from '@angular/forms';
+import { StructureOrientator } from './structureOrientator.interface';
+
+export interface MeetingRDVSForm {
+  structureOrientator: FormGroup<StructureOrientator>;
+  categories: UntypedFormGroup;
+  pmrAccess: FormControl<boolean>;
+  digitalPass: FormControl<boolean>;
+  address: FormControl<string>;
+  onlineDemarcheType: FormControl<any>;
+}

src/app/form/orientation-form-view/online-demarch/meeting-rdvs/meeting-digital-pass/meeting-digital-pass.component.html

+<form [formGroup]="form">
+  <div class="title">
+    <h3>Le bénéficiaire dispose-t-il de Pass numériques ?</h3>
+    <p>Facultatif</p>
+  </div>
+
+  <app-radio-form [selectedOption]="form.get('digitalPass').value" (selectedEvent)="handleChange($event)">
+  </app-radio-form>
+</form>

src/app/form/orientation-form-view/online-demarch/meeting-rdvs/meeting-digital-pass/meeting-digital-pass.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-meeting-digital-pass',
+  templateUrl: './meeting-digital-pass.component.html',
+})
+export class MeetingDigitalPassComponent implements OnInit {
+  @Input() form: UntypedFormGroup;
+  @Output() checkValidation = new EventEmitter<any>();
+
+  ngOnInit(): void {
+    this.checkValidation.emit();
+  }
+  public handleChange(val: boolean) {
+    this.form.get('digitalPass').patchValue(val);
+    this.checkValidation.emit();
+  }
+
+  public isSelected(): boolean {
+    return this.form.get('digitalPass').value;
+  }
+}

src/app/form/orientation-form-view/online-demarch/meeting-rdvs/meeting-rdvs-doing/meeting-rdvs-doing.component.html

+<div class="container" *ngIf="!shouldReset">
+  <img src="../../../../../../assets/form/rdvsImage.svg" alt="rdvs illustration" />
+  <h2>Vous allez pouvoir prendre rendez-vous depuis RDV Solidarité.</h2>
+  <p>Ne fermez pas votre navigateur.</p>
+</div>
+<div class="container" *ngIf="shouldReset">
+  <img src="../../../../../../assets/form/rdvsImageNotFound.svg" alt="rdvs illustration" />
+  <h2>Aucune structure correspondant à votre recherche ne propose de rendez-vous</h2>
+  <p>Renouvellez votre recherche avec des critères différents ou accédez à la cartographie</p>
+</div>