src/app/form/form-view/structure-form/structure-public-target-other/structure-public-target-other.component.html

+<form [formGroup]="structureForm" *ngIf="structureForm" (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null">
+  <div class="title" [ngClass]="{ editTitle: isEditMode }">
+    <app-svg-icon
+      (click)="goBack()"
+      *ngIf="isEditMode"
+      [iconClass]="'backArrow'"
+      [type]="'ico'"
+      [icon]="'arrowBack'"
+    ></app-svg-icon>
+    <div class="titleContent">
+      <h3>Quelles sont les autres démarches&nbsp;?</h3>
+    </div>
+  </div>
+  <div class="textareaBlock" fxLayout="column">
+    <textarea
+      rows="8"
+      placeholder="Exemple : tout ce qui est en lien avec la création d'entreprise..."
+      maxlength="500"
+      formControlName="otherDescription"
+    ></textarea>
+    <p>
+      {{
+        getStructureControl('otherDescription').value ? getStructureControl('otherDescription').value.length : 0
+      }}&nbsp;/&nbsp;500
+    </p>
+  </div>
+</form>

src/app/form/form-view/structure-form/structure-public-target-other/structure-public-target-other.component.spec.ts

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

src/app/form/form-view/structure-form/structure-public-target-other/structure-public-target-other.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { AbstractControl, UntypedFormGroup } from '@angular/forms';
+import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
+
+@Component({
+  selector: 'app-structure-public-target-other',
+  templateUrl: './structure-public-target-other.component.html',
+})
+export class structureDigitalHelpingAccompanimentOtherComponent implements OnInit {
+  @Input() structureForm: UntypedFormGroup;
+  @Input() isEditMode: boolean;
+  @Output() updateChoice = new EventEmitter<any>();
+  @Output() validateForm = new EventEmitter<any>();
+
+  public buttonTypeEnum = ButtonType;
+
+  ngOnInit(): void {
+    this.validateForm.emit();
+  }
+
+  public getStructureControl(nameControl: string): AbstractControl {
+    return this.structureForm.get(nameControl);
+  }
+  public goBack(): void {
+    history.back();
+  }
+}

src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html

@@ -12,19 +12,70 @@
       <p>Plusieurs choix possibles</p>
     </div>
   </div>
-  <p class="missing-information" *ngIf="isEditMode && !structureForm.get('publics').valid">
+  <p class="missing-information" *ngIf="isEditMode && !structureForm.get('categories').get('age').valid">
     <app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" class="validationIcon"></app-svg-icon>
     <span>Il faut renseigner au moins un champ</span>
   </p>
-  <div *ngIf="publics" class="btn-grid">
-    <span *ngFor="let choice of publics.modules">
+  <div *ngIf="publicOthers">
+    <div class="btn-grid">
       <app-button
+        *ngFor="let choice of publicOthers.modules"
         [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isInArray(choice.id) ? 'selected' : ''"
+        [extraClass]="isInArray(choice.id, 'publicOthers') ? 'selected' : ''"
         [style]="buttonTypeEnum.CheckButton"
-        [text]="choice.text"
-        (action)="updateChoicePublic(choice.id)"
+        [text]="choice.name"
+        (action)="updateChoicePublic(choice.id, 'publicOthers')"
       ></app-button>
-    </span>
+    </div>
+  </div>
+  <div *ngIf="age">
+    <div class="title">
+      <h4>Âge</h4>
+    </div>
+    <div class="btn-grid">
+      <app-button
+        *ngFor="let choice of age.modules"
+        [ngClass]="{ selectedChoice: true }"
+        [extraClass]="isInArray(choice.id, 'age') ? 'selected' : ''"
+        [style]="buttonTypeEnum.CheckButton"
+        [text]="choice.name"
+        (action)="updateChoicePublic(choice.id, 'age')"
+      ></app-button>
+    </div>
+  </div>
+
+  <div *ngIf="languageAndIlliteracy">
+    <div class="title">
+      <h4>Langue et illettrisme</h4>
+      <p>Facultatif</p>
+    </div>
+    <div class="btn-grid">
+      <app-button
+        *ngFor="let choice of languageAndIlliteracy.modules"
+        [ngClass]="{ selectedChoice: true }"
+        [extraClass]="isInArray(choice.id, 'languageAndIlliteracy') ? 'selected' : ''"
+        [style]="buttonTypeEnum.CheckButton"
+        [text]="choice.name"
+        (action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"
+      ></app-button>
+    </div>
+  </div>
+
+  <div *ngIf="handicaps">
+    <div class="title">
+      <h4>Handicaps</h4>
+      <p>Facultatif</p>
+    </div>
+
+    <div class="btn-grid">
+      <app-button
+        *ngFor="let choice of handicaps.modules"
+        [ngClass]="{ selectedChoice: true }"
+        [extraClass]="isInArray(choice.id, 'handicaps') ? 'selected' : ''"
+        [style]="buttonTypeEnum.CheckButton"
+        [text]="choice.name"
+        (action)="updateChoicePublic(choice.id, 'handicaps')"
+      ></app-button>
+    </div>
   </div>
 </form>

src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.ts

@@ -9,7 +9,10 @@ import { Category } from '../../../../structure-list/models/category.model';
 })
 export class StructurePublicTargetComponent implements OnInit {
   @Input() structureForm: UntypedFormGroup;
-  @Input() publics: Category;
+  @Input() age: Category;
+  @Input() languageAndIlliteracy: Category;
+  @Input() handicaps: Category;
+  @Input() publicOthers: Category;
   @Input() isEditMode: boolean;
   @Output() updateChoice = new EventEmitter<any>();
   @Output() validateForm = new EventEmitter<any>();
@@ -20,12 +23,12 @@ export class StructurePublicTargetComponent implements OnInit {
     this.validateForm.emit();
   }
 
-  public updateChoicePublic(choice: string) {
-    this.updateChoice.emit({ formControlName: 'publics', choice });
+  public updateChoicePublic(choice: string, formControlName: string) {
+    this.updateChoice.emit({ formControlName: `categories.${formControlName}`, choice });
   }
 
-  public isInArray(choice: string) {
-    if (this.structureForm.get('publics') && this.structureForm.get('publics').value.includes(choice)) return true;
+  public isInArray(choice: string, formControlName: string): boolean {
+    if (this.structureForm.get('categories').get(formControlName)?.value.includes(choice)) return true;
     return false;
   }
   public goBack(): void {

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

-<form [formGroup]="structureForm" *ngIf="structureForm">
+<form [formGroup]="structureForm" *ngIf="structureForm && trainingCategories.length > 0">
   <div class="title" [ngClass]="{ editTitle: isEditMode }">
     <app-svg-icon
       (click)="goBack()"
@@ -13,11 +13,9 @@
     </div>
   </div>
   <app-training-type-picker
-    [baseSkills]="structureForm.get('baseSkills').value"
-    [accessRight]="structureForm.get('accessRight').value"
-    [digitalCultureSecurity]="structureForm.get('digitalCultureSecurity').value"
-    [socialAndProfessional]="structureForm.get('socialAndProfessional').value"
-    [parentingHelp]="structureForm.get('parentingHelp').value"
+    [baseSkills]="structureForm.get('categories').get('baseSkills').value"
+    [advancedSkills]="structureForm.get('categories').get('advancedSkills').value"
+    [trainingCategories]="trainingCategories"
     (selectedType)="setTrainingsFromCategories($event)"
   ></app-training-type-picker>
 </form>

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

 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { CategoriesToggle } from 'src/app/models/categoriesToggle.model';
 import { Category } from '../../../../structure-list/models/category.model';
 
 @Component({
@@ -8,6 +9,7 @@ import { Category } from '../../../../structure-list/models/category.model';
 })
 export class StructureTrainingTypeComponent {
   @Input() structureForm: UntypedFormGroup;
+  @Input() trainingCategories: CategoriesToggle[];
   @Input() isEditMode: boolean;
   @Output() validateForm = new EventEmitter<any>();
 
@@ -18,8 +20,8 @@ export class StructureTrainingTypeComponent {
   public setTrainingsFromCategories(categories: Category[]) {
     for (const categorie of categories) {
       const moduleIds: string[] = categorie.modules.map((module) => module.id);
-      if (this.structureForm.get(categorie.id)) {
-        this.structureForm.get(categorie.id).patchValue(moduleIds);
+      if (this.structureForm.get('categories').get(categorie.id)) {
+        this.structureForm.get('categories').get(categorie.id).patchValue(moduleIds);
       }
     }
   }

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/form-view/structure-form/structure-wifi/structure-wifi.component.html

@@ -12,8 +12,8 @@
     </div>
   </div>
   <app-radio-form
-    [selectedOption]="isEditMode ? isInArray('equipmentsAndServices', 'wifiEnAccesLibre') : null"
-    (selectedEvent)="onCheckChange($event, 'equipmentsAndServices', 'wifiEnAccesLibre')"
+    [selectedOption]="isEditMode ? isInArray('selfServiceMaterial', 'wifiEnAccesLibre') : null"
+    (selectedEvent)="onCheckChange($event, 'categories.selfServiceMaterial', 'wifiEnAccesLibre')"
   >
   </app-radio-form>
 </form>

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

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { formUtils } from 'src/app/utils/formUtils';
 
 @Component({
   selector: 'app-structure-wifi',
@@ -11,14 +12,12 @@ export class StructureWifiComponent implements OnInit {
   @Output() validateForm = new EventEmitter<any>();
   @Output() checkChange = new EventEmitter<any>();
 
+  public formUtils = new formUtils();
   ngOnInit(): void {
     if (this.isEditMode) this.validateForm.emit();
   }
   public isInArray(formControlName: string, term: string): boolean {
-    if (this.structureForm.controls[formControlName].value) {
-      return this.structureForm.controls[formControlName].value.includes(term);
-    }
-    return false;
+    return this.formUtils.isInCategoryArray(term, formControlName, this.structureForm);
   }
   public onCheckChange(event, catId: string, modId: string): void {
     this.checkChange.emit({ event, formControlName: catId, value: modId });

src/app/form/form-view/structure-form/structureFormStep.enum.ts

@@ -13,6 +13,7 @@ export enum structureFormStep {
   structureWebAndSocialNetwork,
   structurePublicTarget,
   structureDigitalHelpingAccompaniment,
+  structureDigitalHelpingAccompanimentOther,
   structureTrainingType,
   structureTrainingPrice,
   structureWifi,

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;
+}
+.contentModal ::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: solid 3px transparent;
+    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;
+      }
+    }
+  }
+}