feat(ui): orientation selectors

src/app/carto/carto.component.html

-<div class="content-container no-pt" [ngClass]="{ 'height-100': isOrientationForm }">
+<div class="content-container no-pt" [ngClass]="{ orientationHeight: isOrientationForm }">
   <h1 class="visually-hidden">Cartographie</h1>
   <div class="hide-on-print">
     <app-structure-list-search [filters]="filters" (searchEvent)="getStructures($event)" />

src/app/carto/carto.component.scss

@@ -16,8 +16,8 @@
   flex-direction: column;
 }
 
-.height-100 {
-  height: calc(100vh - #{$header-height} - #{$orientation-progressBarAndButtons});
+.orientationHeight {
+  height: calc(100vh - #{$header-height} - #{$progress-bar-height} - #{$orientation-progressBarAndButtons});
 }
 
 .panes-container {

src/app/form/footer-form/footer-form.component.html

-<div class="footerForm" [ngClass]="{ column: hasFinishButton() }">
+<div class="footerForm">
   <app-v3-button
     *ngIf="!isLastFormStep && !isNextFormTransition && !isStructureLastPage() && !isPersonalOfferFirstPage()"
     [variant]="buttonTypeEnumV3.Secondary"
-    [label]="!isEditMode ? btnName[0] : 'Annuler'"
+    [label]="!isEditMode ? 'Précédent' : 'Annuler'"
     [iconName]="!isEditMode && 'arrowBackV3'"
     (action)="prevPage()"
   />
@@ -10,14 +10,14 @@
   <app-v3-button
     *ngIf="!isLastFormStep && !isNextFormTransition && !isEditMode"
     [variant]="buttonTypeEnumV3.Primary"
-    [label]="btnName[1]"
+    [label]="'Suivant'"
     [iconPosition]="'right'"
-    [iconName]="btnName[1] === 'Imprimer' ? 'print' : 'arrowForwardV3'"
+    [iconName]="'arrowForwardV3'"
     [disabled]="!isValid"
+    [style]="buttonTypeEnumV3.Primary"
     (action)="nextPage()"
   />
 
-  <!-- Untested, not sure when it activates -->
   <app-v3-button
     *ngIf="isEditMode"
     [variant]="buttonTypeEnumV3.Primary"

src/app/form/footer-form/footer-form.component.scss

@@ -32,28 +32,6 @@
   }
 }
 
-.column {
-  @media #{$phone} {
-    flex-direction: column !important;
-    button {
-      margin-bottom: 10px !important;
-      margin-right: 0 !important;
-    }
-  }
-}
-
-.chevronLeft {
-  height: 24px;
-  width: 24px;
-  stroke: $black;
-  margin-right: 10px;
-}
-.chevronRight {
-  height: 24px;
-  width: 24px;
-  margin-left: 10px;
-}
-
 .print {
   stroke: $white;
   width: 20px;

src/app/form/footer-form/footer-form.component.ts

@@ -23,7 +23,6 @@ import { stepType } from '../step.type';
 export class FooterFormComponent implements OnChanges {
   @Input() currentForm: formType;
   @Input() isValid: boolean;
-  @Input() btnName: string[];
   @Input() nbPagesForm: number;
   @Input() form: UntypedFormGroup;
   @Input() linkedStructureId: string[] = null;
@@ -81,10 +80,6 @@ export class FooterFormComponent implements OnChanges {
     this.endPage.emit();
   }
 
-  public hasFinishButton(): boolean {
-    return this.btnName.length === 3;
-  }
-
   public goToHome(): void {
     this.router.navigateByUrl('news');
   }

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

@@ -66,7 +66,6 @@
     [currentForm]="currentFormType"
     [form]="currentForm"
     [linkedStructureId]="linkedStructureId"
-    [btnName]="['Précédent', 'Suivant']"
     [isValid]="isPageValid"
     [acceptNewsletter]="userAcceptNewsletter"
     [hasOtherPersonalOffer]="hasOtherPersonalOffer"

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

@@ -25,6 +25,7 @@
   padding: 32px 48px;
   display: flex;
   justify-content: center;
+  min-width: 600px;
 
   @media #{$tablet} {
     margin: 0px 0.5rem;
@@ -79,7 +80,6 @@
 
   h4 {
     @include font-bold-18;
-    margin-bottom: 0;
   }
   p {
     @include font-regular-18;
@@ -88,6 +88,7 @@
   .info {
     @include font-regular-14;
   }
+  // V3REMOVE
   .backArrow {
     cursor: pointer;
   }

src/app/form/orientation-form-view/base-skills/base-skills-choice/base-skills-choice.component.html

-<h2>Quel est le besoin numérique de la personne ?</h2>
+<div class="orientationForm">
+  <h2>Quel est le besoin numérique de la personne ?</h2>
 
-<div fxLayout="column" fxLayoutGap="32px">
   <div class="btn-grid">
     <span *ngFor="let module of baseSkills">
       <app-button

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

 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-
 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 { FiltersSteps, GenericOrientationSteps, RecapsType, StructuresListSteps } from '../enums/orientation.enums';
 import { FiltersForm } from '../interfaces/filtersForm.interface';
-import { MediationType } from '../types/mediation.type';
-import { MediationStepType } from '../types/mediationStep.type';
+import { MediationStepType, MediationType } from '../types/orientation.types';
 
 @Component({
   selector: 'app-base-skills',
@@ -24,9 +19,9 @@ export class BaseSkillsComponent {
   public pagesValidation: any[] = [];
 
   // Enums
-  public structuresListStepsEnum = StructuresListSteps;
+  public StructuresListSteps = StructuresListSteps;
   public FiltersSteps = FiltersSteps;
-  public recapsType = RecapsType;
+  public RecapsType = RecapsType;
   public GenericOrientationSteps = GenericOrientationSteps;
 
   public checkValidation(): void {

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

-export enum AppointmentSteps {
-  infoScreen,
-  structureOrientator,
-  pmrAccess,
-  location,
-  carto,
-  makeAppointment,
-  mediationBeneficiaryInfo,
-  rdvEnd,
-}

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

-export enum FiltersSteps {
-  filterChoice,
-}

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

-export enum GenericOrientationSteps {
-  common = 'Common',
-  structureList = 'Trouver une structure',
-}

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

-export enum HotlineMediationSteps {
-  infoScreen,
-  mediationBeneficiaryInfo,
-  mediationHoursSelection,
-  mediationLanguageSelection,
-  orientationRecap,
-}

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

-export enum NeedsType {
-  equipmentAccess,
-  equipmentBuy,
-  onlineDemarch,
-  learnSkills,
-}

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

-export enum OnlineDemarche {
-  common = 'Common',
-  structureList = 'Trouver une structure',
-  appointment = '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/orientation.enums.ts

+export enum AppointmentSteps {
+  infoScreen,
+  structureOrientator,
+  pmrAccess,
+  location,
+  carto,
+  makeAppointment,
+  mediationBeneficiaryInfo,
+  rdvEnd,
+}
+
+export enum FiltersSteps {
+  filterChoice,
+}
+
+export enum GenericOrientationSteps {
+  common = 'Common',
+  structureList = 'Trouver une structure',
+}
+
+export enum HotlineMediationSteps {
+  infoScreen,
+  mediationBeneficiaryInfo,
+  mediationHoursSelection,
+  mediationLanguageSelection,
+  orientationRecap,
+}
+
+export enum OnlineDemarche {
+  structureList = 'Trouver une structure',
+  appointment = 'RDV Conseiller Numérique',
+  onlineMediation = 'Médiation Numérique à distance',
+  common = 'Common',
+}
+
+export enum OnlineDemarchesCommonSteps {
+  onlineDemarche,
+  accompanimentType,
+}
+
+export enum NeedsType {
+  equipmentAccess = 'equipmentAccess',
+  equipmentBuy = 'equipmentBuy',
+  onlineDemarch = 'onlineDemarch',
+  learnSkills = 'learnSkills',
+}
+export enum PreferredLanguages {
+  french = 'Français',
+  english = 'Anglais',
+  arabic = 'Arabe',
+}
+export enum RecapsType {
+  onlineMediation,
+  structure,
+}
+
+export enum StructuresListSteps {
+  pmrAccess,
+  address,
+  structureChoice,
+  structureOrientator,
+  mediationBeneficiaryInfo,
+  comments,
+  orientationRecap,
+}

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,
-  mediationBeneficiaryInfo,
-  comments,
-  orientationRecap,
-}