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

+export enum OnlineDemarche {
+  common = 'Common',
+  structureList = 'Trouver une structure',
+  meetings = 'RDV Conseiller Numérique',
+  onlineMediation = 'Médiation Numérique à distance',
+}

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

+export enum OnlineDemarchesCommonSteps {
+  onlineDemarche,
+  accompanimentType,
+}

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/enums/recapsType.enum.ts

+export enum RecapsType {
+  onlineMediation,
+  structure,
+}

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

+export enum StructuresListSteps {
+  pmrAccess,
+  address,
+  structureChoice,
+  structureOrientator,
+  mediationBeneciaryInfo,
+  comments,
+  mediationRecap,
+}

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

+<h2>De quel matériel a-t-il besoin ?</h2>
+
+<div fxLayout="column" fxLayoutGap="32px">
+  <div class="btn-grid">
+    <span *ngFor="let module of equipmentType">
+      <app-button
+        [ngClass]="{ selectedChoice: true }"
+        [extraClass]="isSelectedModule(module.id) ? 'selected' : ''"
+        [style]="buttonTypeEnum.CheckButton"
+        [text]="module.name"
+        (action)="handleClick(module)"
+      ></app-button>
+    </span>
+  </div>
+</div>

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

+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) {
+    super();
+  }
+
+  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;
+    });
+    this.checkValidation.emit();
+  }
+}

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

+<app-equipment-access-choice
+  *ngIf="currentType === GenericOrientationSteps.common"
+  [currentStep]="currentStep"
+  [currentType]="currentType"
+  [form]="form"
+  [filters]="filters"
+  (checkValidation)="checkValidation($event)"
+></app-equipment-access-choice>
+<app-orientation-structure-list
+  *ngIf="currentType === GenericOrientationSteps.structureList"
+  [form]="orientationForm"
+  [currentStep]="currentStep"
+  [filters]="filters"
+  [profile]="profile"
+  (validatePage)="checkValidation()"
+></app-orientation-structure-list>

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

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { User } from '../../../models/user.model';
+import { Filter } from '../../../structure-list/models/filter.model';
+import { OrientationUtils } from '../../../utils/orientationUtils';
+import { FiltersSteps } from '../enums/filtersSteps.enum';
+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',
+  templateUrl: './equipment-access.component.html',
+})
+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>();
+
+  public orientationUtils = new OrientationUtils();
+  public pagesValidation: any[] = [];
+
+  // Enums
+  public FiltersSteps = FiltersSteps;
+  public recapsType = RecapsType;
+  public GenericOrientationSteps = GenericOrientationSteps;
+
+  public checkValidation(): void {
+    switch (this.currentType) {
+      case GenericOrientationSteps.common:
+        this.orientationUtils.setValidationsEquipmentForm(
+          this.pagesValidation,
+          this.form,
+          (isValid) => this.validatePage.emit(isValid),
+          this.currentStep as FiltersSteps
+        );
+        break;
+      case GenericOrientationSteps.structureList:
+        this.orientationUtils.setValidationsStructuresForm(
+          this.pagesValidation,
+          this.orientationForm,
+          (isValid) => this.validatePage.emit(isValid),
+          this.currentStep as StructuresListSteps
+        );
+        break;
+      default:
+        throw new Error('Not implemented tunnel type in OnlineDemarchFormComponent');
+    }
+  }
+}

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

+<h2>Quel matériel souhaite-t-il acheter à tarif solidaire ?</h2>
+
+<div fxLayout="column" fxLayoutGap="32px">
+  <div class="btn-grid">
+    <span *ngFor="let module of equipmentType">
+      <app-button
+        [ngClass]="{ selectedChoice: true }"
+        [extraClass]="isSelectedModule(module.id) ? 'selected' : ''"
+        [style]="buttonTypeEnum.CheckButton"
+        [text]="module.name"
+        (action)="handleClick(module)"
+      ></app-button>
+    </span>
+  </div>
+</div>

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

+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;
+    });
+    this.checkValidation.emit();
+  }
+}

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

+<app-equipment-buy-type
+  *ngIf="currentType === GenericOrientationSteps.common"
+  [currentStep]="currentStep"
+  [currentType]="currentType"
+  [form]="form"
+  [filters]="filters"
+  (checkValidation)="checkValidation($event)"
+></app-equipment-buy-type>
+<app-orientation-structure-list
+  *ngIf="currentType === GenericOrientationSteps.structureList"
+  [form]="orientationForm"
+  [currentStep]="currentStep"
+  [filters]="filters"
+  [profile]="profile"
+  (validatePage)="checkValidation()"
+></app-orientation-structure-list>

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

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { User } from '../../../models/user.model';
+import { Filter } from '../../../structure-list/models/filter.model';
+import { OrientationUtils } from '../../../utils/orientationUtils';
+import { FiltersSteps } from '../enums/filtersSteps.enum';
+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',
+  templateUrl: './equipment-buy.component.html',
+})
+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>();
+
+  public orientationUtils = new OrientationUtils();
+  public pagesValidation: any[] = [];
+
+  // Enums
+  public FiltersSteps = FiltersSteps;
+  public recapsType = RecapsType;
+  public GenericOrientationSteps = GenericOrientationSteps;
+
+  public checkValidation(): void {
+    switch (this.currentType) {
+      case GenericOrientationSteps.common:
+        this.orientationUtils.setValidationsEquipmentForm(
+          this.pagesValidation,
+          this.form,
+          (isValid) => this.validatePage.emit(isValid),
+          this.currentStep as FiltersSteps
+        );
+        break;
+      case GenericOrientationSteps.structureList:
+        this.orientationUtils.setValidationsStructuresForm(
+          this.pagesValidation,
+          this.orientationForm,
+          (isValid) => this.validatePage.emit(isValid),
+          this.currentStep as StructuresListSteps
+        );
+        break;
+      default:
+        throw new Error('Not implemented tunnel type in OnlineDemarchFormComponent');
+    }
+  }
+}

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/login-modal/login-modal.component.spec.ts

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

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

 <app-print-header></app-print-header>
-<div class="container">
-  <div class="beneficiary">
+<div class="container" [ngClass]="{ onlineMediation: date }">
+  <div class="orientator header" *ngIf="isOrientator()">
+    <h3>Orienté par</h3>
+    <div class="content">
+      <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">
     <h3>Bénéficiaire</h3>
     <div class="content">
-      <div class="labels">
-        <div>Nom</div>
-        <div>Besoin(s) d'aide</div>
+      <div fxLayout="row">
+        <div class="labels" fxFlex="20%">Nom</div>
+        <div class="infos" fxFlex="80%">{{ beneficiary.name }} {{ beneficiary.surname | uppercase }}</div>
       </div>
-      <div class="infos">
-        <div>{{ beneficiary.name | uppercase }} {{ beneficiary.surname }}</div>
-        <div class="needs">
-          <div class="need" *ngFor="let need of needs">{{ need.displayText }}</div>
+      <div fxLayout="row">
+        <div class="labels" fxFlex="20%">Besoin(s) d'aide</div>
+        <div class="infos" fxFlex="80%">
+          <div *ngFor="let need of needs">{{ need.displayText }}</div>
+        </div>
+      </div>
+      <div fxLayout="row" *ngIf="language">
+        <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%">
+          <div>{{ comment }}</div>
         </div>
       </div>
     </div>
   </div>
+  <div class="empty"></div>
+  <div class="data">
+    <!-- Date display -->
+    <div class="date" *ngIf="date">
+      <div>Rappel</div>
+      <div>{{ date.day }} prochain</div>
+      <div>entre {{ date.hours }}</div>
+    </div>
+    <!-- Structure list -->
+    <div class="multi-print" *ngFor="let structure of structuresToPrint">
+      <app-structure-detail-print [structure]="structure"></app-structure-detail-print>
+    </div>
+  </div>
 </div>
-<div class="date">
-  <div>Rappel</div>
-  <div>{{ date.day }} prochain</div>
-  <div>entre {{ date.hours }}</div>
-</div>
-<div class="service-info">
+
+<!-- footer  -->
+<div class="service-info" *ngIf="date">
   <div class="img">
     <img src="../../../../../assets/ico/mediation1.svg" alt="Image Mediation" />
   </div>

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

@@ -3,12 +3,22 @@
 @import '../../../../../assets/scss/breakpoint';
 
 .container {
-  display: flex;
-  gap: 1.5rem;
-  padding: 1rem 0;
-  max-width: 680px;
-  width: 100%;
-  margin: auto;
+  display: grid;
+  grid-template-columns: 0.5fr 1fr;
+  grid-template-rows: 0fr 1fr;
+  gap: 0px 1.5em;
+  grid-template-areas:
+    'orientator beneficiary'
+    'empty data';
+  &.onlineMediation {
+    margin-top: 24px;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 0.5fr;
+    gap: 0px 1.5em;
+    grid-template-areas:
+      'beneficiary'
+      'data';
+  }
   * {
     -webkit-print-color-adjust: exact;
   }
@@ -19,35 +29,35 @@
     margin-top: 0.5rem;
     text-transform: uppercase;
   }
-  .oriented {
-    background-color: $grey-7;
-    max-width: 300px;
-    width: 100%;
-    padding: 1rem 1.5rem;
-  }
-  .beneficiary {
+
+  .header {
     background-color: $grey-7;
     padding: 1rem 1.5rem;
-    flex: 1;
 
     .content {
       color: $black;
-      display: flex;
-      gap: 2rem;
       .labels {
         @include lato-regular-14;
-        & > div {
-          margin-bottom: 1rem;
-        }
+        margin-bottom: 1rem;
       }
       .infos {
         @include lato-bold-14;
-        & > div {
-          margin-bottom: 1rem;
+        margin-bottom: 1rem;
+        &.structureName {
+          @include lato-bold-18;
         }
       }
     }
   }
+  .orientator {
+    grid-area: orientator;
+  }
+  .beneficiary {
+    grid-area: beneficiary;
+  }
+  .data {
+    grid-area: data;
+  }
 }
 .date {
   max-width: 680px;
@@ -57,6 +67,7 @@
   @include lato-bold-18;
 }
 .service-info {
+  break-inside: avoid-page;
   max-width: 680px;
   width: 100%;
   box-sizing: border-box;

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

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { User } from '../../../../models/user.model';
-import { ProfileService } from '../../../../profile/services/profile.service';
-import { AuthService } from '../../../../services/auth.service';
+import { Structure } from '../../../../models/structure.model';
 import { Module } from '../../../../structure-list/models/module.model';
+import { RecapsType } from '../../enums/recapsType.enum';
 
 @Component({
   selector: 'app-mediation-recap',
@@ -12,28 +11,51 @@ import { Module } from '../../../../structure-list/models/module.model';
 })
 export class MediationRecapComponent implements OnInit {
   @Input() form: UntypedFormGroup;
+  @Input() recapType: RecapsType;
   @Output() checkValidation = new EventEmitter<any>();
 
   public needs: Module[];
+  public structuresToPrint: Structure[];
+  public orientator: { structureName: string; structureMail: string; structurePhone: string };
+  public comment: string;
   public beneficiary: any;
   public date: any;
-  public profile: User;
+  public language: string;
 
-  constructor(public authService: AuthService, private profileService: ProfileService) {}
-
-  async ngOnInit(): Promise<void> {
+  ngOnInit(): void {
     this.checkValidation.emit();
-    this.needs = this.form.get('onlineDemarchType').value;
+    this.needs = this.form.get('filters').value;
     this.beneficiary = {
       name: this.form.get('name').value,
       surname: this.form.get('surname').value,
     };
+    switch (this.recapType) {
+      case RecapsType.onlineMediation:
+        this.handleOnlineMediationRecap();
+        break;
+      case RecapsType.structure:
+        this.handleStructureRecap();
+        break;
+      default:
+        throw new Error(`Not implemented recap type ${this.recapType}`);
+    }
+  }
+
+  public handleStructureRecap(): void {
+    this.comment = this.form.get('comments').value;
+    this.structuresToPrint = this.form.get('structureChoice').value;
+    this.orientator = this.form.get('structureOrientator').value;
+  }
+
+  public isOrientator(): boolean {
+    return this.orientator?.structureName ? true : false;
+  }
+
+  public handleOnlineMediationRecap(): void {
     this.date = {
       day: this.form.get('dateSlot').value.day,
       hours: this.form.get('dateSlot').value.hours.replace('-', ' et '),
     };
-    if (this.authService.isLoggedIn()) {
-      this.profile = await this.profileService.getProfile();
-    }
+    this.language = this.form.get('preferredLanguage').value;
   }
 }