angular.json

@@ -193,5 +193,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/app-routing.module.ts

@@ -38,15 +38,6 @@ const routes: Routes = [
     outlet: 'print',
     children: [{ path: 'structures', component: StructureListPrintComponent }, footerOutletRoute],
   },
-  {
-    path: 'orientation',
-    children: [
-      {
-        path: '',
-        component: OrientationFormComponent,
-      },
-    ],
-  },
   {
     path: 'acteurs',
     children: [
@@ -240,6 +231,10 @@ const routes: Routes = [
     path: 'form',
     loadChildren: () => import('./form/form-view/form-view.module').then((m) => m.FormViewModule),
   },
+  {
+    path: 'orientation',
+    loadChildren: () => import('./form/orientation-form-view/orientation.module').then((m) => m.OrientationModule),
+  },
   {
     path: 'home',
     redirectTo: 'news',

src/app/app.module.ts

@@ -49,6 +49,7 @@ import { AnnuaireComponent } from './annuaire/annuaire.component';
 import { SearchBarComponent } from './annuaire/search-bar/search-bar.component';
 import { ResultListComponent } from './annuaire/result-list/result-list.component';
 import { FilterModalComponent } from './annuaire/filter-modal/filter-modal.component';
+import { OrientationModule } from './form/orientation-form-view/orientation.module';
 
 @NgModule({
   declarations: [
@@ -90,6 +91,7 @@ import { FilterModalComponent } from './annuaire/filter-modal/filter-modal.compo
     BrowserAnimationsModule,
     ToastrModule.forRoot(),
     FormViewModule,
+    OrientationModule,
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: environment.production,
     }),

src/app/carto/carto.component.ts

@@ -15,7 +15,7 @@ import { Observable } from 'rxjs';
 @Component({
   selector: 'app-carto',
   templateUrl: './carto.component.html',
-  styleUrls: ['./carto.component.scss']
+  styleUrls: ['./carto.component.scss'],
 })
 export class CartoComponent implements OnInit {
   public filters: Filter[] = [];
@@ -54,7 +54,7 @@ export class CartoComponent implements OnInit {
 
     this.meta.updateTag({
       name: 'description',
-      content: 'Recense tous les lieux, accompagnements et ateliers de médiation numérique de la Métropole de Lyon.'
+      content: 'Recense tous les lieux, accompagnements et ateliers de médiation numérique de la Métropole de Lyon.',
     });
   }
 
@@ -105,7 +105,12 @@ export class CartoComponent implements OnInit {
    * @param lat user latitde
    * @param sortByDistance if set to `true`, structures data is sort by distance. Default value is `true`
    */
-  private updateStructuresdistance(structures: Structure[], lon: number, lat: number, sortByDistance: boolean = true): void {
+  private updateStructuresdistance(
+    structures: Structure[],
+    lon: number,
+    lat: number,
+    sortByDistance: boolean = true
+  ): void {
     Promise.all(
       structures.map(async (structure) => {
         if (this.geolocation) {
@@ -125,7 +130,7 @@ export class CartoComponent implements OnInit {
   }
 
   /**
-   * Retrive GeoJson for a given address
+   * Retrieve GeoJson for a given address
    * @param address string
    */
   private getCoordByAddress(address: string): Promise<GeoJson> {
@@ -154,7 +159,10 @@ export class CartoComponent implements OnInit {
    * @param lat number
    */
   private getStructurePosition(structure: Structure, lon: number, lat: number): Structure {
-    structure.distance = parseInt(this.geoJsonService.getDistance(structure.getLat(), structure.getLon(), lat, lon, 'M'), 10);
+    structure.distance = parseInt(
+      this.geoJsonService.getDistance(structure.getLat(), structure.getLon(), lat, lon, 'M'),
+      10
+    );
     return structure;
   }
 

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

@@ -97,9 +97,6 @@ export class FormViewComponent implements OnInit {
         if (this.profile.structuresLink.length) {
           // if register a new user as a new member structure, no structure to choose
           this.isRegisterNewMember = true;
-          this.structureService.getStructure(this.profile.structuresLink[0]).subscribe((structure) => {
-            this.structure = new Structure(structure);
-          });
         }
       }
     });
@@ -340,7 +337,10 @@ export class FormViewComponent implements OnInit {
       // if register a new user as a new member structure, no structure to choose
       if (this.isRegisterNewMember) {
         if (this.profile.job && this.profile.job.hasPersonalOffer) {
-          this.router.navigateByUrl('form/personaloffer');
+          this.structureService.getStructure(this.profile.structuresLink[0]).subscribe((structure) => {
+            this.structure = new Structure(structure);
+            this.router.navigateByUrl('form/personaloffer');
+          });
         } else {
           this.router.navigateByUrl('/profile');
         }
@@ -486,6 +486,7 @@ export class FormViewComponent implements OnInit {
     const exitPages: stepType[] = [
       structureFormStep.noStructure,
       structureFormStep.structureCreationFinishedInfo,
+      structureFormStep.mailSentInfo,
       profileFormStep.profileJobSelection,
       personalOfferFormStep.personalOfferFinishedInfo,
     ];
@@ -496,7 +497,7 @@ export class FormViewComponent implements OnInit {
       this.isEditMode ||
       exitPages.includes(this.currentPage)
     ) {
-      return new Promise((resolve) => resolve(true));
+      return Promise.resolve(true);
     } else {
       return new Promise((resolve) => this.showModal(resolve));
     }

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

@@ -18,8 +18,7 @@
   </p>
   <div class="type-picker">
     <app-structure-type-picker
-      [isEditMode]="isEditMode"
-      [pickedChoice]="structureForm.get('structureType').valid ? structureForm.get('structureType').value : null"
+      [pickedTypeId]="structureForm.get('structureType').valid ? structureForm.get('structureType').value : null"
       (selectedType)="setTypeStructure($event)"
     ></app-structure-type-picker>
   </div>

src/app/form/form-view/structure-form/structure-type/structure-type.component.ts

@@ -15,7 +15,7 @@ export class StructureTypeComponent implements OnInit {
     this.validateForm.emit();
   }
 
-  public setTypeStructure(value) {
+  public setTypeStructure(value: string) {
     this.typeStructure.emit(value);
   }
   public goBack(): void {

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

+export enum mediationSteps {
+  onlineDemarch,
+  accompanimentType,
+  mediationBeneciaryInfo,
+  mediationHoursSelection,
+  mediationRecap,
+}

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

+export enum needsType {
+  equipmentAccess,
+  equipmentBuy,
+  onlineDemarch,
+  learnSkills,
+}

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

+<div *ngIf="openned" class="modalBackground">
+  <div class="modal" (clickOutside)="handleClose()">
+    <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
+      <div class="headerModal" fxLayout="row" fxLayoutAlign="space-between center">
+        <h3>Se connecter</h3>
+        <app-svg-icon [type]="'ico'" [iconColor]="inherit" [icon]="'closeModal'" (click)="handleClose()"></app-svg-icon>
+      </div>
+      <div class="content">
+        <img src="../../../../../assets/img/resin-login.svg" alt="resin-login-image" class="loginimg" />
+        <h3>Pour pré-remplir ce formulaire, gagnez du temps en vous connectant !</h3>
+        <div class="footerModal" fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="8px">
+          <app-button
+            (action)="goLogin()"
+            [text]="'Se connecter'"
+            [style]="buttonTypeEnum.modalPrimary"
+            [ngClass]="'fullWidth'"
+          ></app-button>
+          <app-button
+            (action)="goToAccountCreation()"
+            [text]="'Je n’ai pas encore de compte'"
+            [style]="buttonTypeEnum.Tertiary"
+            [ngClass]="'fullWidth'"
+          ></app-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/form/orientation-form-view/global-components/login-modal/login-modal.component.scss

+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/typography';
+
+.modal {
+  max-width: 390px;
+}
+.contentModal {
+  padding-top: 0 !important;
+}
+h3 {
+  color: $grey-1;
+  text-align: center;
+}
+.headerModal {
+  height: 58px;
+  width: 100%;
+  padding: 0 0.875rem 0 1rem;
+  border-bottom: solid 1px $grey-6;
+  h3 {
+    padding-left: 1.875rem;
+    flex: auto;
+  }
+}
+::ng-deep .headerModal svg {
+  cursor: pointer;
+  width: 40px !important;
+  height: 40px !important;
+}
+.loginimg {
+  margin: auto;
+  display: block;
+}
+.content {
+  padding: 0 1.5rem;
+}
+.footerModal {
+  padding-bottom: 1rem;
+  gap: 0.5rem;
+}
+.fullWidth {
+  width: 100% !important;
+}
+::ng-deep .tertiary {
+  border-radius: 4px !important;
+  width: 100% !important;
+}

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

+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
+
+@Component({
+  selector: 'app-login-modal',
+  templateUrl: './login-modal.component.html',
+  styleUrls: ['./login-modal.component.scss'],
+})
+export class LoginModalComponent implements OnInit {
+  @Input() openned: boolean;
+  public buttonTypeEnum = ButtonType;
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {}
+
+  public handleClose(): void {
+    this.openned = false;
+  }
+  public goToAccountCreation(): void {
+    this.router.navigateByUrl('form/account');
+    this.handleClose();
+  }
+  public goLogin(): void {
+    this.router.navigate(['/login'], { queryParams: { returnUrl: '/orientation' } });
+    this.handleClose();
+  }
+}

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

+<div [fxLayout]="'column'" [fxLayoutGap]="'8px'" fxLayoutAlign="center left" class="radiocard">
+  <button *ngFor="let item of items" (click)="selectItem(item.key)" [ngClass]="{ selected: selectedItem == item.key }">
+    <div class="checkmark">
+      <svg *ngIf="selectedItem === item.key" class="validate" aria-hidden="true">
+        <use [attr.xlink:href]="'assets/form/sprite.svg#checkVectorFull'"></use>
+      </svg>
+    </div>
+    <div calss="icon"></div>
+    <div [fxLayout]="'column'" [fxLayoutGap]="'8px'">
+      <div class="title">{{ item.title }}</div>
+      <div class="hint">{{ item.hint }}</div>
+    </div>
+  </button>
+</div>

src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss

+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/typography';
+@import '../../../../../assets/scss/breakpoint';
+.radiocard {
+  button {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    height: 85px;
+    background-color: $grey-8;
+    border: none;
+    font-size: 1rem;
+    padding: 1.5rem 1rem;
+    box-sizing: border-box;
+    border-radius: 4px;
+    outline: none;
+    cursor: pointer;
+    width: 100%;
+    max-width: 600px;
+    @media #{$phone} {
+      height: 100px;
+    }
+    &.selected {
+      background: $white;
+      border: 3px solid $green-1;
+      .validate {
+        display: initial;
+      }
+    }
+
+    div {
+      text-align: left;
+      @media #{$phone} {
+        max-width: 260px;
+      }
+    }
+    .title {
+      @include lato-bold-16;
+    }
+    .hint {
+      @include lato-regular-15;
+      font-style: italic;
+      color: $grey-3;
+    }
+    .checkmark {
+      width: 20px;
+      height: 20px;
+      box-sizing: border-box;
+      background: $white;
+      border: 1px solid $grey-3;
+      border-radius: 10px;
+      svg {
+        width: 24px;
+        height: 24px;
+        position: relative;
+        left: -3px;
+        top: -3px;
+      }
+    }
+  }
+}

src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.spec.ts

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

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

+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { INeedItem } from '../../../../utils/orientationUtils';
+import { needsType } from '../../enums/needs.enum';
+
+@Component({
+  selector: 'app-multi-radio-form',
+  templateUrl: './multi-radio-form.component.html',
+  styleUrls: ['./multi-radio-form.component.scss'],
+})
+export class MultiRadioFormComponent implements OnInit {
+  @Input() items: INeedItem[];
+  @Input() selected: any;
+  @Output() handleSelect = new EventEmitter<any>();
+
+  public selectedItem: string;
+
+  ngOnInit() {
+    if (this.selected) this.selectedItem = this.selected;
+  }
+
+  public selectItem(key: string): void {
+    this.handleSelect.emit(key);
+    this.selectedItem = key;
+  }
+}

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>
+</div>

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

+.footerForm {
+  @media print {
+    display: none !important;
+  }
+}

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

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