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

+import { AfterContentChecked, Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
+import { mediationSteps } from '../../enums/mediationSteps.enum';
+import { needsType } from '../../enums/needs.enum';
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss'],
+})
+export class NavigationComponent implements OnInit {
+  @Input() currentStep: mediationSteps;
+  @Input() isPageValid: boolean;
+  @Input() needType: needsType;
+  @Output() goNext = new EventEmitter<any>();
+  @Output() goPrev = new EventEmitter<any>();
+
+  public buttonTypeEnum = ButtonType;
+  public isLastStep: boolean = false;
+  public needsTypeEnum = needsType;
+  constructor() {}
+
+  ngOnInit(): void {
+    this.checkLastStep();
+    if (this.currentStep === mediationSteps.mediationRecap && this.needType === needsType.onlineDemarch) {
+      this.isLastStep = true;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes) {
+      this.checkLastStep();
+    }
+  }
+  public checkLastStep(): void {
+    if (this.currentStep === mediationSteps.mediationRecap && this.needType === needsType.onlineDemarch) {
+      this.isLastStep = true;
+    } else this.isLastStep = false;
+  }
+
+  public nextPage(isPrint?: boolean) {
+    this.goNext.emit(isPrint);
+  }
+  public prevPage() {
+    this.goPrev.emit();
+  }
+}

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

+<h2>Quels sont les besoins du bénéficiaire ?</h2>
+<app-multi-radio-form
+  [items]="needsList"
+  [selected]="getSelected()"
+  (handleSelect)="selectNeed($event)"
+></app-multi-radio-form>

src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.spec.ts

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

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

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { INeedItem, OrientationUtils } from '../../../../utils/orientationUtils';
+import { needsType } from '../../enums/needs.enum';
+
+@Component({
+  selector: 'app-needs-selection',
+  templateUrl: './needs-selection.component.html',
+  styleUrls: ['./needs-selection.component.scss'],
+})
+export class NeedsSelectionComponent {
+  @Input() currentNeed: needsType;
+  @Output() setNeedType = new EventEmitter<any>();
+  @Output() validate = new EventEmitter<any>();
+  public needsList: INeedItem[] = new OrientationUtils().needsList;
+
+  public selectNeed(event: needsType) {
+    this.setNeedType.emit(event);
+  }
+  public getSelected(): string | needsType {
+    const selected = this.needsList.filter((need) => need.key == this.currentNeed)[0];
+    if (selected) {
+      this.validate.emit();
+      return selected.key;
+    }
+  }
+}

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

+<div class="header-print">
+  <div class="header-infos">
+    <img src="../../../../../assets/logos/metropoleGrandLyon.svg" alt="logo métropole" />
+    <div class="header-title">
+      <div>Réseau des acteurs de l'inclusion numérique de la Métropole de Lyon</div>
+      <h3>Fiche d'orientation</h3>
+    </div>
+  </div>
+  <p class="informationHeader date">{{ date }}</p>
+</div>
+<hr />

src/app/form/orientation-form-view/global-components/print-header/print-header.component.scss

+@import '../../../../../assets/scss/color';
+
+.header-infos {
+  display: flex;
+  align-items: flex-start;
+  img {
+    margin-right: 3rem;
+    width: 160px;
+  }
+}
+.date {
+  text-align: right;
+  text-transform: capitalize;
+  font-style: italic;
+}
+hr {
+  height: 1px;
+  background: $grey-3;
+}

src/app/form/orientation-form-view/global-components/print-header/print-header.component.spec.ts

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

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-print-header',
+  templateUrl: './print-header.component.html',
+  styleUrls: ['./print-header.component.scss'],
+})
+export class PrintHeaderComponent implements OnInit {
+  public date: string;
+  constructor() {}
+
+  ngOnInit(): void {
+    this.date = new Date().toLocaleDateString('fr-FR', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+  }
+}

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

+<div class="progressBar">
+  <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
+    <label [ngClass]="{ validate: currentPage == nbPagesForm }" for="progressForm"
+      >{{ progressStatus > 100 ? 100 : (progressStatus | number: '1.0-0') }}%
+    </label>
+    <progress
+      id="progressForm"
+      [ngClass]="{ validate: currentPage == nbPagesForm }"
+      max="100"
+      [value]="progressStatus"
+    ></progress>
+  </div>
+</div>
+<div class="topSpacing"></div>

src/app/form/orientation-form-view/global-components/progress-bar/progress-bar.component.scss

+@import '../../../../../assets/scss/layout';
+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/typography';
+@import '../../../../../assets/scss/breakpoint';
+
+.progressBar {
+  max-width: 980px;
+  margin: 1.5rem auto;
+
+  @media #{$tablet} {
+    margin: 1rem 0.5rem;
+  }
+  @media print {
+    display: none;
+  }
+
+  progress {
+    width: 100%;
+    height: 6px;
+    border-radius: 7px;
+    &::-webkit-progress-bar {
+      background-color: $grey-6;
+      border-radius: 7px;
+    }
+    &::-webkit-progress-value {
+      background-color: $primary-color;
+      border-radius: 12px;
+    }
+    &::-moz-progress-bar {
+      background-color: $primary-color;
+      border-radius: 12px;
+    }
+  }
+  label {
+    @include lato-bold-14;
+    color: $primary-color;
+    min-width: 26px;
+  }
+}
+.topSpacing {
+  margin-top: 1rem;
+}

src/app/form/orientation-form-view/global-components/progress-bar/progress-bar.component.spec.ts

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

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

+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { mediationSteps } from '../../enums/mediationSteps.enum';
+
+@Component({
+  selector: 'app-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  styleUrls: ['./progress-bar.component.scss'],
+})
+export class ProgressBarComponent implements OnChanges {
+  @Input() currentPage: number;
+  @Input() nbSteps: number;
+  public progressStatus: number;
+  public nbPagesForm: number = Object.keys(mediationSteps).length / 2;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.currentPage) {
+      this.progressStatus = ((this.currentPage + 1) / this.nbPagesForm) * 100;
+    }
+  }
+}

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

+export interface IOnlineMediation {
+  name: string;
+  surname: string;
+  phone: string;
+  onlineDemarchType: string[];
+  dateSlot: { day: string; hours: string };
+}

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

+<h2>De quel accompagnement a besoin le bénéficiaire ?</h2>
+
+<app-multi-radio-form
+  [items]="accompanimentTypes"
+  [selected]="selected"
+  (handleSelect)="handleSelect($event)"
+></app-multi-radio-form>

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';
+
+@Component({
+  selector: 'app-accompaniment-type',
+  templateUrl: './accompaniment-type.component.html',
+})
+export class AccompanimentTypeComponent implements OnInit {
+  @Input() form: UntypedFormGroup;
+  @Output() checkValidation = new EventEmitter<any>();
+
+  public selected: string;
+  public accompanimentTypes: INeedItem[] = [
+    {
+      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',
+    },
+    {
+      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',
+    },
+    {
+      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',
+    },
+  ];
+  ngOnInit(): void {
+    if (this.form.get('accompanimentType').value !== '') {
+      this.selected = this.form.get('accompanimentType').value;
+    }
+    this.checkValidation.emit();
+  }
+
+  public handleSelect(event: string): void {
+    this.selected = event;
+    this.form.get('accompanimentType').patchValue(event);
+    this.checkValidation.emit();
+  }
+}

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>
+<form [formGroup]="form">
+  <div class="form-group" fxLayout="column">
+    <label for="name">Nom</label>
+    <div fxLayout="row" fxLayoutGap="13px">
+      <input
+        type="text"
+        autocomplete="on"
+        formControlName="name"
+        class="form-input"
+        (input)="updatedForm('name', $event.target.value)"
+      />
+      <img
+        *ngIf="form.get('name').invalid && form.get('name').value"
+        src="../../assets/form/notValidate.svg"
+        alt="logo invalid"
+      />
+    </div>
+  </div>
+  <div class="form-group" fxLayout="column">
+    <label for="surname">Prénom</label>
+    <div fxLayout="row" fxLayoutGap="13px">
+      <input
+        type="text"
+        autocomplete="on"
+        formControlName="surname"
+        class="form-input"
+        (input)="updatedForm('surname', $event.target.value)"
+      />
+      <img
+        *ngIf="form.get('surname').invalid && form.get('surname').value"
+        src="../../assets/form/notValidate.svg"
+        alt="logo invalid"
+      />
+    </div>
+  </div>
+  <div class="form-group" fxLayout="column">
+    <label for="phone">Téléphone</label>
+    <div fxLayout="row" fxLayoutGap="13px">
+      <input
+        type="phone"
+        autocomplete="on"
+        (input)="updatedForm('phone', $event.target.value)"
+        formControlName="phone"
+        class="form-input"
+      />
+      <img
+        *ngIf="form.get('phone').invalid && form.get('phone').value"
+        src="../../assets/form/notValidate.svg"
+        alt="logo invalid"
+      />
+    </div>
+  </div>
+</form>

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

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { Utils } from '../../../../utils/utils';
+
+@Component({
+  selector: 'app-mediation-beneciary-info',
+  templateUrl: './mediation-beneciary-info.component.html',
+})
+export class MediationBeneciaryInfoComponent implements OnInit {
+  @Input() form: UntypedFormGroup;
+  @Output() checkValidation = new EventEmitter<any>();
+  public utils = new Utils();
+  constructor() {}
+
+  ngOnInit(): void {
+    this.checkValidation.emit();
+  }
+
+  public updatedForm(field: string, value: string) {
+    if (field === 'phone') {
+      this.utils.modifyPhoneInput(this.form, 'phone', value);
+    } else this.form.get(field).patchValue(value);
+
+    this.checkValidation.emit();
+  }
+}