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

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

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

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
+
+@Component({
+  selector: 'app-navigation-buttons',
+  templateUrl: './navigation-buttons.component.html',
+  styleUrls: ['./navigation-buttons.component.scss'],
+})
+export class NavigationButtonsComponent {
+  @Input() buttonStyle = 0;
+  @Output() goNext = new EventEmitter<any>();
+  public buttonTypeEnum = ButtonType;
+  constructor(private router: Router) {}
+
+  public goToHome(): void {
+    this.router.navigateByUrl('news');
+  }
+
+  public goToNextPage(): void {
+    this.goNext.emit();
+  }
+}

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

+<div class="progressBar" *ngIf="!isEditMode">
+  <p *ngIf="formType === formTypeEnum.account">Création de compte</p>
+  <p *ngIf="formType === formTypeEnum.profile">Création du profil</p>
+  <p *ngIf="formType === formTypeEnum.structure">Création de la structure</p>
+  <p *ngIf="formType === formTypeEnum.personaloffer">Création d'offre de service</p>
+  <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>

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

+@import '../../../../../assets/scss/layout';
+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/typography';
+
+.progressBar {
+  height: #{$progressBar-height};
+  max-width: 1000px;
+  margin: 16px auto;
+  p {
+    @include lato-bold-14;
+    color: $red;
+    margin-bottom: 7px;
+  }
+
+  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;
+    }
+  }
+  label {
+    @include lato-bold-14;
+    color: $primary-color;
+    min-width: 26px;
+  }
+}

src/app/form/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/form-view/global-components/progress-bar/progress-bar.component.ts

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

src/app/form/form-view/guards/personalOffer.guard.ts

+import { ActivatedRouteSnapshot, CanActivate, Router, UrlTree } from '@angular/router';
+import { Injectable } from '@angular/core';
+/**
+ * Guard to assert that we are coming from the structure form. Otherwise redirect to home
+ */
+@Injectable()
+export class PersonalOfferGuard implements CanActivate {
+  constructor(private router: Router) {}
+
+  canActivate(route: ActivatedRouteSnapshot): UrlTree | boolean {
+    if (route.routeConfig.path === 'personaloffer' && this.router.routerState.snapshot.url === '/form/structure') {
+      return true;
+    }
+    return this.router.parseUrl('/home');
+  }
+}

src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.html

+<form [formGroup]="personalOfferForm" *ngIf="personalOfferForm">
+  <div class="title">
+    <p class="overtitle">{{ structureName }}</p>
+    <h3>Quelles aides au numérique proposez-vous&nbsp;?</h3>
+    <p class="notRequired">Facultatif</p>
+  </div>
+
+  <div fxLayout="column" fxLayoutGap="32px">
+    <div *ngIf="proceduresAccompaniment" class="btn-grid">
+      <span *ngFor="let module of proceduresAccompaniment.modules">
+        <app-button
+          [ngClass]="{ selectedChoice: true }"
+          [extraClass]="isSelectedModule(module) ? 'selected' : ''"
+          [style]="buttonTypeEnum.CheckButton"
+          [text]="module.text"
+          (action)="toogleResult(module)"
+        ></app-button>
+      </span>
+    </div>
+  </div>
+</form>

src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.scss

+@import '../../../../../assets/scss/buttons';

src/app/shared/components/signin-modal/signin-modal.component.spec.ts → src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.spec.ts

-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SignInModalComponent } from './signin-modal.component';
+import { PersonalOfferAccompanimentComponent } from './personal-offer-accompaniment.component';
 
-describe('SignInModalComponent', () => {
-  let component: SignInModalComponent;
-  let fixture: ComponentFixture<SignInModalComponent>;
+describe('PersonalOfferAccompanimentComponent', () => {
+  let component: PersonalOfferAccompanimentComponent;
+  let fixture: ComponentFixture<PersonalOfferAccompanimentComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SignInModalComponent],
-      imports: [HttpClientTestingModule],
+      declarations: [PersonalOfferAccompanimentComponent],
     }).compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SignInModalComponent);
+    fixture = TestBed.createComponent(PersonalOfferAccompanimentComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Structure } from '../../../../models/structure.model';
+import { ButtonType } from '../../../../shared/components/button/buttonType.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';
+
+@Component({
+  selector: 'app-personal-offer-accompaniment',
+  templateUrl: './personal-offer-accompaniment.component.html',
+  styleUrls: ['./personal-offer-accompaniment.component.scss'],
+})
+export class PersonalOfferAccompanimentComponent implements OnInit {
+  @Input() structureName: string;
+  @Input() personalOfferForm: FormGroup;
+  @Output() validateForm = new EventEmitter<any>();
+
+  public buttonTypeEnum = ButtonType;
+  public proceduresAccompaniment: Category;
+  public selectedModules: Module[] = [];
+
+  constructor(private searchService: SearchService) {}
+
+  ngOnInit(): void {
+    this.validateForm.emit();
+    this.searchService.getCategoriesAccompaniment().subscribe((categories: Category[]) => {
+      this.proceduresAccompaniment = categories[0];
+      const proceduresAccompaniment = this.personalOfferForm.get('proceduresAccompaniment').value;
+      this.selectedModules = proceduresAccompaniment.map((procedure) =>
+        this.proceduresAccompaniment.modules.find((module) => module.id === procedure)
+      );
+    });
+  }
+
+  public toogleResult(module: Module): void {
+    if (this.isSelectedModule(module)) {
+      const index = this.selectedModules.findIndex((_module) => _module.id === module.id);
+      this.selectedModules.splice(index, 1);
+    } else {
+      this.selectedModules.push(module);
+    }
+    this.personalOfferForm.get('proceduresAccompaniment').patchValue(this.selectedModules.map((_module) => _module.id));
+  }
+
+  public isSelectedModule(module: Module): boolean {
+    if (this.selectedModules && this.selectedModules.includes(module)) return true;
+    return false;
+  }
+}

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

+<div class="no-max-width">
+  <ng-container *ngIf="currentStep === personalOfferFormStep.personalOfferAccompaniment">
+    <app-personal-offer-accompaniment
+      [structureName]="structureName"
+      [personalOfferForm]="personalOfferForm"
+    ></app-personal-offer-accompaniment>
+  </ng-container>
+  <ng-container *ngIf="currentStep === personalOfferFormStep.personalOfferTrainingType">
+    <app-personal-offer-training-type
+      [structureName]="structureName"
+      [personalOfferForm]="personalOfferForm"
+    ></app-personal-offer-training-type>
+  </ng-container>
+  <ng-container *ngIf="currentStep === personalOfferFormStep.personalOfferStructureChoice">
+    <app-personal-offer-other-structure-choice
+      [structureName]="structureName"
+      [personalOfferForm]="personalOfferForm"
+      (setOtherOffer)="setOtherOffer($event)"
+      (pageValid)="validPage()"
+    ></app-personal-offer-other-structure-choice>
+  </ng-container>
+  <ng-container *ngIf="currentStep === personalOfferFormStep.personalOfferFinishedInfo">
+    <app-information-step
+      [step]="personalOfferFormStep.personalOfferFinishedInfo"
+      [formType]="formTypeEnum.personaloffer"
+      (goNext)="goToProfile()"
+    ></app-information-step>
+  </ng-container>
+</div>

src/app/user-verification/user-verification.component.spec.ts → src/app/form/form-view/personal-offer-form/personal-offer-form.component.spec.ts

-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 
-import { UserVerificationComponent } from './user-verification.component';
+import { PersonalOfferFormComponent } from './personal-offer-form.component';
 
-describe('UserVerificationComponent', () => {
-  let component: UserVerificationComponent;
-  let fixture: ComponentFixture<UserVerificationComponent>;
+describe('PersonalOfferFormComponent', () => {
+  let component: PersonalOfferFormComponent;
+  let fixture: ComponentFixture<PersonalOfferFormComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [UserVerificationComponent],
-      imports: [RouterTestingModule, HttpClientTestingModule],
+      declarations: [PersonalOfferFormComponent],
     }).compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(UserVerificationComponent);
+    fixture = TestBed.createComponent(PersonalOfferFormComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

+import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
+import { formType } from '../formType.enum';
+import { personalOfferFormStep } from './personalOfferFormStep.enum';
+
+@Component({
+  selector: 'app-personal-offer-form',
+  templateUrl: './personal-offer-form.component.html',
+})
+export class PersonalOfferFormComponent {
+  @Input() nbSteps: number;
+  @Input() currentStep: personalOfferFormStep;
+  @Input() personalOfferForm: FormGroup;
+  @Input() structureName: string;
+  @Output() setHasOtherOffer = new EventEmitter<boolean>();
+  @Output() pageValid = new EventEmitter<any>();
+
+  public personalOfferFormStep = personalOfferFormStep;
+  public formTypeEnum = formType;
+
+  constructor(private router: Router) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.currentStep) {
+      if (
+        this.currentStep === personalOfferFormStep.personalOfferAccompaniment ||
+        this.currentStep === personalOfferFormStep.personalOfferTrainingType
+      ) {
+        this.pageValid.emit();
+      }
+    }
+  }
+
+  public validPage(): void {
+    this.pageValid.emit();
+  }
+
+  public setOtherOffer(flag: boolean): void {
+    this.setHasOtherOffer.emit(flag);
+  }
+
+  public goToProfile(): void {
+    this.router.navigateByUrl('/profile');
+  }
+}

src/app/form/form-view/personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component.html

+<form [formGroup]="personalOfferForm" *ngIf="personalOfferForm">
+  <div class="title">
+    <p class="overtitle">{{ structureName }}</p>
+    <h3>Intervenez-vous dans une autre structure&nbsp;?</h3>
+  </div>
+
+  <app-radio-form [selectedOption]="" (selectedEvent)="onRadioChange($event)"> </app-radio-form>
+</form>

src/app/form/form-view/personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component.spec.ts

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

src/app/form/form-view/personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-personal-offer-other-structure-choice',
+  templateUrl: './personal-offer-other-structure-choice.component.html',
+})
+export class PersonalOfferOtherStructureChoiceComponent {
+  @Input() structureName: string;
+  @Input() personalOfferForm: FormGroup;
+  @Output() setOtherOffer = new EventEmitter<boolean>();
+  @Output() pageValid = new EventEmitter<any>();
+
+  public choice: boolean;
+
+  public onRadioChange(value: boolean): void {
+    this.setOtherOffer.emit(value);
+    this.pageValid.emit();
+  }
+}

src/app/form/form-view/personal-offer-form/personal-offer-training-type/personal-offer-training-type.component.html

+<form [formGroup]="personalOfferForm" *ngIf="personalOfferForm">
+  <div class="title">
+    <p class="overtitle">{{ structureName }}</p>
+    <h3>Quelles formations au numérique proposez-vous&nbsp;?</h3>
+    <p class="notRequired">Facultatif</p>
+  </div>
+  <app-training-type-picker
+    [baseSkills]="personalOfferForm.get('baseSkills').value"
+    [accessRight]="personalOfferForm.get('accessRight').value"
+    [digitalCultureSecurity]="personalOfferForm.get('digitalCultureSecurity').value"
+    [socialAndProfessional]="personalOfferForm.get('socialAndProfessional').value"
+    [parentingHelp]="personalOfferForm.get('parentingHelp').value"
+    (selectedType)="setTrainingsFromCategories($event)"
+  ></app-training-type-picker>
+</form>