src/app/form/form-view/global-components/information-step/information-step.component.scss

+@import '../../../../../assets/scss/typography';
+@import '../../../../../assets/scss/color';
+
+.information-step-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: inherit;
+  height: 450px;
+  svg {
+    width: 100%;
+    max-width: 200px;
+  }
+  p {
+    @include lato-bold-24;
+    margin-top: 3rem;
+    text-align: center;
+  }
+  &.profile-skip {
+    height: unset;
+    max-width: unset;
+
+    p {
+      margin: 0;
+    }
+    svg {
+      width: 100%;
+      height: 180px;
+      max-width: 180px;
+    }
+  }
+  &.structure-display {
+    height: unset;
+    max-width: unset;
+    gap: 16px;
+
+    p {
+      @include lato-regular-18;
+      margin-bottom: 0;
+      margin-top: 1em;
+    }
+    span {
+      @include lato-bold-24;
+      text-align: center;
+    }
+    svg {
+      width: 100%;
+      height: 180px;
+      max-width: 180px;
+    }
+  }
+  &.structure-time {
+    height: unset;
+    max-width: unset;
+    h3 {
+      @include lato-bold-24;
+      text-align: center;
+    }
+
+    p {
+      @include lato-bold-18;
+      margin: 0;
+      width: 100%;
+      text-align: left;
+    }
+    ul {
+      width: 100%;
+      list-style: none;
+      padding: 0;
+    }
+    li {
+      @include lato-regular-18;
+    }
+    ul li::before {
+      content: '\2022';
+      color: $red;
+      margin-right: 12px;
+    }
+    svg {
+      width: 100%;
+      height: 150px;
+      max-width: 150px;
+      margin-bottom: 24px;
+    }
+  }
+  &.profile-updated {
+    .centered {
+      text-align: center;
+      font-weight: normal;
+    }
+    .btn {
+      margin-top: 17px;
+    }
+    svg {
+      height: 180px;
+      width: 180px;
+    }
+  }
+}
+.structureCreated {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 600px;
+  margin: auto;
+  h3 {
+    @include lato-bold-24;
+    text-align: center;
+  }
+  p {
+    @include lato-regular-18;
+    text-align: center;
+  }
+  svg {
+    width: 180px;
+    height: 180px;
+  }
+}
+
+.no-margin-top {
+  margin-top: unset !important;
+}

src/app/form/form-view/global-components/information-step/information-step.component.spec.ts

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

src/app/form/form-view/global-components/information-step/information-step.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
+import { accountFormStep } from '../../account-form/accountFormStep.enum';
+import { formType } from '../../formType.enum';
+import { personalOfferFormStep } from '../../personal-offer-form/personalOfferFormStep.enum';
+import { profileFormStep } from '../../profile-form/profileFormStep.enum';
+import { structureFormStep } from '../../structure-form/structureFormStep.enum';
+
+@Component({
+  selector: 'app-information-step',
+  templateUrl: './information-step.component.html',
+  styleUrls: ['./information-step.component.scss'],
+})
+export class InformationStepComponent {
+  @Input() step: number;
+  @Input() formType: formType;
+  @Input() structureName?: string;
+  @Input() hasPersonalOffer?: boolean;
+  @Input() isClaimed?: boolean;
+  @Output() goNext = new EventEmitter<any>();
+
+  public formTypeEnum = formType;
+  public accountFormStepEnum = accountFormStep;
+  public profileFormStepEnum = profileFormStep;
+  public structureFormStepEnum = structureFormStep;
+  public personalOfferFormStep = personalOfferFormStep;
+  public buttonTypeEnum = ButtonType;
+  constructor(private router: Router) {}
+
+  public goBackProfile(): void {
+    this.router.navigateByUrl('/profile');
+  }
+
+  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>
+<div class="topSpacing" *ngIf="isEditMode"></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';
+@import '../../../../../assets/scss/breakpoint';
+
+.progressBar {
+  height: #{$progressBar-height};
+  max-width: 980px;
+  margin: 16px auto 8px auto;
+
+  @media #{$tablet} {
+    margin: 0px 4px;
+  }
+  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;
+    }
+    &::-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/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';
+import { personalOfferFormStep } from '../../personal-offer-form/personalOfferFormStep.enum';
+import { profileFormStep } from '../../profile-form/profileFormStep.enum';
+import { structureFormStep } from '../../structure-form/structureFormStep.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;
+  public profileFormSteps: number = Object.keys(profileFormStep).length / 2;
+  public personnalOfferFormSteps: number = Object.keys(personalOfferFormStep).length / 2;
+  public structureFormSteps: number = Object.keys(structureFormStep).length / 2;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.currentPage) {
+      switch (this.formType) {
+        case formType.profile: {
+          this.progressStatus = ((this.currentPage + 1) / this.nbSteps) * 100;
+          break;
+        }
+        case formType.structure: {
+          this.progressStatus = ((this.currentPage + this.profileFormSteps + 1) / this.nbSteps) * 100;
+          break;
+        }
+        case formType.personaloffer:
+          this.progressStatus =
+            ((this.currentPage + this.structureFormSteps + this.profileFormSteps + 1) / this.nbSteps) * 100;
+          break;
+        default:
+          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>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/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.spec.ts

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

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/form/form-view/personal-offer-form/personal-offer-form.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PersonalOfferFormComponent } from './personal-offer-form.component';
+
+describe('PersonalOfferFormComponent', () => {
+  let component: PersonalOfferFormComponent;
+  let fixture: ComponentFixture<PersonalOfferFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PersonalOfferFormComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PersonalOfferFormComponent);
+    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.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-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>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>