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

@@ -18,7 +18,7 @@
     text-align: center;
   }
   &.profile-skip {
-    height: unset;
+    height: 100%;
     max-width: unset;
 
     p {

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

-<div class="progressBar" *ngIf="!isEditMode">
+<div class="progressBar">
   <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"
+    <label [ngClass]="{ validate: currentPage == nbSteps }" for="progressForm"
       >{{ progressStatus > 100 ? 100 : (progressStatus | number: '1.0-0') }}%
     </label>
     <progress
       id="progressForm"
-      [ngClass]="{ validate: currentPage == nbPagesForm }"
+      [ngClass]="{ validate: currentPage == nbSteps }"
       max="100"
       [value]="progressStatus"
     ></progress>
   </div>
 </div>
-<div class="topSpacing" *ngIf="isEditMode"></div>

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

@@ -6,13 +6,13 @@
   </div>
 
   <div fxLayout="column" fxLayoutGap="32px">
-    <div *ngIf="proceduresAccompaniment" class="btn-grid">
-      <span *ngFor="let module of proceduresAccompaniment.modules">
+    <div *ngIf="onlineProcedures" class="btn-grid">
+      <span *ngFor="let module of onlineProcedures.modules">
         <app-button
           [ngClass]="{ selectedChoice: true }"
           [extraClass]="isSelectedModule(module) ? 'selected' : ''"
           [style]="buttonTypeEnum.CheckButton"
-          [text]="module.text"
+          [text]="module.name"
           (action)="toogleResult(module)"
         ></app-button>
       </span>

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 { UntypedFormGroup } 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',
@@ -14,23 +12,15 @@ import { SearchService } from '../../../../structure-list/services/search.servic
 export class PersonalOfferAccompanimentComponent implements OnInit {
   @Input() structureName: string;
   @Input() personalOfferForm: UntypedFormGroup;
+  @Input() onlineProcedures: Category;
   @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 {
@@ -40,7 +30,10 @@ export class PersonalOfferAccompanimentComponent implements OnInit {
     } else {
       this.selectedModules.push(module);
     }
-    this.personalOfferForm.get('proceduresAccompaniment').patchValue(this.selectedModules.map((_module) => _module.id));
+    this.personalOfferForm
+      .get('categories')
+      .get('onlineProcedures')
+      .patchValue(this.selectedModules.map((module) => module.id));
   }
 
   public isSelectedModule(module: Module): boolean {

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

@@ -3,12 +3,14 @@
     <app-personal-offer-accompaniment
       [structureName]="structureName"
       [personalOfferForm]="personalOfferForm"
+      [onlineProcedures]="onlineProcedures"
     ></app-personal-offer-accompaniment>
   </ng-container>
   <ng-container *ngIf="currentStep === personalOfferFormStep.personalOfferTrainingType">
     <app-personal-offer-training-type
       [structureName]="structureName"
       [personalOfferForm]="personalOfferForm"
+      [trainingCategories]="trainingCategories"
     ></app-personal-offer-training-type>
   </ng-container>
   <ng-container *ngIf="currentStep === personalOfferFormStep.personalOfferStructureChoice">

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

-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
+import { CategoriesToggle } from 'src/app/models/categoriesToggle.model';
+import { CategoryEnum } from 'src/app/shared/enum/category.enum';
+import { Category } from 'src/app/structure-list/models/category.model';
+import { SearchService } from 'src/app/structure-list/services/search.service';
 import { formType } from '../formType.enum';
 import { personalOfferFormStep } from './personalOfferFormStep.enum';
 
@@ -8,7 +12,7 @@ import { personalOfferFormStep } from './personalOfferFormStep.enum';
   selector: 'app-personal-offer-form',
   templateUrl: './personal-offer-form.component.html',
 })
-export class PersonalOfferFormComponent implements OnChanges {
+export class PersonalOfferFormComponent implements OnChanges, OnInit {
   @Input() nbSteps: number;
   @Input() currentStep: personalOfferFormStep;
   @Input() personalOfferForm: UntypedFormGroup;
@@ -16,11 +20,16 @@ export class PersonalOfferFormComponent implements OnChanges {
   @Output() setHasOtherOffer = new EventEmitter<boolean>();
   @Output() pageValid = new EventEmitter<any>();
 
+  public trainingCategories: CategoriesToggle[] = [];
+  public onlineProcedures: Category;
   public personalOfferFormStep = personalOfferFormStep;
   public formTypeEnum = formType;
 
-  constructor(private router: Router) {}
+  constructor(private searchService: SearchService, private router: Router) {}
 
+  ngOnInit(): void {
+    this.setCategories();
+  }
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.currentStep) {
       if (
@@ -32,6 +41,23 @@ export class PersonalOfferFormComponent implements OnChanges {
     }
   }
 
+  async setCategories(): Promise<void> {
+    const categories = await this.searchService.getCategories().toPromise();
+    categories.forEach((categ) => {
+      switch (categ.id) {
+        case CategoryEnum.onlineProcedures: {
+          this.onlineProcedures = categ;
+          break;
+        }
+        case CategoryEnum.baseSkills:
+        case CategoryEnum.advancedSkills: {
+          this.trainingCategories.push({ category: categ, openned: false });
+          break;
+        }
+      }
+    });
+  }
+
   public validPage(): void {
     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>
+    <h3>Quels accompagnements 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"
+    [baseSkills]="personalOfferForm.get('categories').get('baseSkills').value"
+    [advancedSkills]="personalOfferForm.get('categories').get('advancedSkills').value"
+    [trainingCategories]="trainingCategories"
     (selectedType)="setTrainingsFromCategories($event)"
   ></app-training-type-picker>
 </form>

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

 import { Component, Input } 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({
@@ -9,12 +10,13 @@ import { Category } from '../../../../structure-list/models/category.model';
 export class PersonalOfferTrainingTypeComponent {
   @Input() structureName: string;
   @Input() personalOfferForm: UntypedFormGroup;
+  @Input() trainingCategories: CategoriesToggle[];
 
   public setTrainingsFromCategories(categories: Category[]) {
     for (const categorie of categories) {
       const moduleIds: string[] = categorie.modules.map((module) => module.id);
-      if (this.personalOfferForm.get(categorie.id)) {
-        this.personalOfferForm.get(categorie.id).patchValue(moduleIds);
+      if (this.personalOfferForm.get('categories').get(categorie.id)) {
+        this.personalOfferForm.get('categories').get(categorie.id).patchValue(moduleIds);
       }
     }
   }

src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html

@@ -12,7 +12,7 @@
       <p>Plusieurs choix possibles</p>
     </div>
   </div>
-  <p class="missing-information" *ngIf="isEditMode && !structureForm.get('accessModality').valid">
+  <p class="missing-information" *ngIf="isEditMode && !structureForm.get('categories').get('accessModality').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>
@@ -20,9 +20,9 @@
     <app-checkbox-form
       *ngFor="let module of accessModality.modules"
       [isChecked]="isInArray('accessModality', module.id)"
-      [text]="module.text"
+      [text]="module.name"
       [iconSvg]="module.id"
-      (checkEvent)="onCheckChange($event, 'accessModality', module.id)"
+      (checkEvent)="onCheckChange($event, 'categories.accessModality', module.id)"
     >
     </app-checkbox-form>
   </div>

src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.ts

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { formUtils } from 'src/app/utils/formUtils';
 import { Category } from '../../../../structure-list/models/category.model';
 
 @Component({
@@ -13,6 +14,8 @@ export class StructureAccessModalityComponent implements OnInit {
   @Output() checkChange = new EventEmitter<any>();
   @Output() validateForm = new EventEmitter<any>();
 
+  public formUtils = new formUtils();
+
   ngOnInit(): void {
     this.validateForm.emit();
   }
@@ -26,11 +29,9 @@ export class StructureAccessModalityComponent implements OnInit {
   }
 
   public isInArray(formControlName: string, term: string) {
-    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 goBack(): void {
     history.back();
   }

src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html

-<form [formGroup]="structureForm" *ngIf="structureForm" (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null">
+<form
+  [formGroup]="structureForm"
+  *ngIf="structureForm && onlineProcedures"
+  (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null"
+>
   <div class="title" [ngClass]="{ editTitle: isEditMode }">
     <app-svg-icon
       (click)="goBack()"
@@ -8,17 +12,17 @@
       [icon]="'arrowBack'"
     ></app-svg-icon>
     <div class="titleContent">
-      <h3>Quelles aides au numérique propose la structure&nbsp;?</h3>
+       <h3>Quelles démarches en ligne propose la structure&nbsp;?</h3>
       <p>Facultatif</p>
     </div>
   </div>
   <div class="btn-grid">
-    <span *ngFor="let accompaniment of proceduresAccompaniment.modules">
+    <span *ngFor="let accompaniment of onlineProcedures.modules">
       <app-button
         [ngClass]="{ selectedChoice: true }"
         [extraClass]="isInArray(accompaniment.id) ? 'selected' : ''"
         [style]="buttonTypeEnum.CheckButton"
-        [text]="accompaniment.text"
+        [text]="accompaniment.name"
         (action)="updateChoiceAccompaniment(accompaniment.id)"
       ></app-button>
     </span>

src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.ts

@@ -9,7 +9,7 @@ import { Category } from '../../../../structure-list/models/category.model';
 })
 export class StructureDigitalHelpingAccompanimentComponent implements OnInit {
   @Input() structureForm: UntypedFormGroup;
-  @Input() proceduresAccompaniment: Category;
+  @Input() onlineProcedures: Category;
   @Input() isEditMode: boolean;
   @Output() updateChoice = new EventEmitter<any>();
   @Output() validateForm = new EventEmitter<any>();
@@ -21,13 +21,13 @@ export class StructureDigitalHelpingAccompanimentComponent implements OnInit {
   }
 
   public updateChoiceAccompaniment(choice: string) {
-    this.updateChoice.emit({ formControlName: 'proceduresAccompaniment', choice });
+    this.updateChoice.emit({ formControlName: 'categories.onlineProcedures', choice });
   }
 
   public isInArray(choice: string) {
     if (
-      this.structureForm.get('proceduresAccompaniment') &&
-      this.structureForm.get('proceduresAccompaniment').value.includes(choice)
+      this.structureForm.get('categories').get('onlineProcedures') &&
+      this.structureForm.get('categories').get('onlineProcedures').value.includes(choice)
     )
       return true;
     return false;

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

@@ -13,17 +13,14 @@
     </div>
   </div>
   <ng-container *ngFor="let equipment of equipmentsAndServices">
-    <div
-      class="controller equipments"
-      *ngIf="['ordinateurs', 'tablettes', 'bornesNumeriques', 'imprimantes', 'scanners'].includes(equipment.module.id)"
-    >
+    <div class="controller equipments" *ngIf="['computer', 'printer', 'scanner'].includes(equipment.module.id)">
       <div fxLayout="column">
         <div class="controllerHeader" fxLayout="row" fxLayoutAlign="space-between center">
           <div class="flex-item">
-            <p class="no-margin">Nombre {{ formatEquipment(equipment.module.text) }}</p>
+            <p class="no-margin">Nombre {{ formatEquipment(equipment.module.name) }}</p>
           </div>
           <div class="inputSection flex-item equipments" fxLayout="row" fxLayoutAlign="center center">
-            <ng-container *ngIf="equipment.module.id == 'ordinateurs'">
+            <ng-container *ngIf="equipment.module.id == 'computer'">
               <svg
                 class="hide"
                 aria-hidden="true"
@@ -43,27 +40,7 @@
                 [(value)]="structureForm.value.nbComputers"
               />
             </ng-container>
-            <ng-container *ngIf="equipment.module.id == 'tablettes'">
-              <svg
-                class="hide"
-                aria-hidden="true"
-                (click)="changeValueHandler(equipment.module.id, -1)"
-                [ngClass]="{ disabled: structureForm.value.nbTablets === 0 }"
-              >
-                <use [attr.xlink:href]="'assets/form/sprite.svg#minus'"></use>
-              </svg>
-              <input
-                type="number"
-                (input)="setValidationsForm()"
-                formControlName="nbTablets"
-                min="0"
-                step="1"
-                max="1000"
-                class="form-input nbEquipment"
-                [(value)]="structureForm.value.nbTablets"
-              />
-            </ng-container>
-            <ng-container *ngIf="equipment.module.id == 'imprimantes'">
+            <ng-container *ngIf="equipment.module.id == 'printer'">
               <svg
                 class="hide"
                 aria-hidden="true"
@@ -83,27 +60,7 @@
                 [(value)]="structureForm.value.nbPrinters"
               />
             </ng-container>
-            <ng-container *ngIf="equipment.module.id == 'bornesNumeriques'">
-              <svg
-                class="hide"
-                aria-hidden="true"
-                (click)="changeValueHandler(equipment.module.id, -1)"
-                [ngClass]="{ disabled: structureForm.value.nbNumericTerminal === 0 }"
-              >
-                <use [attr.xlink:href]="'assets/form/sprite.svg#minus'"></use>
-              </svg>
-              <input
-                type="number"
-                (input)="setValidationsForm()"
-                formControlName="nbNumericTerminal"
-                min="0"
-                step="1"
-                max="1000"
-                class="form-input nbEquipment"
-                [(value)]="structureForm.value.nbNumericTerminal"
-              />
-            </ng-container>
-            <ng-container *ngIf="equipment.module.id == 'scanners'">
+            <ng-container *ngIf="equipment.module.id == 'scanner'">
               <svg
                 class="hide"
                 aria-hidden="true"

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

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AbstractControl, UntypedFormGroup } from '@angular/forms';
-import { Module } from '../../../../structure-list/models/module.model';
+import { CategoriesToggle } from 'src/app/models/categoriesToggle.model';
 
 @Component({
   selector: 'app-structure-equipments',
@@ -10,7 +10,7 @@ import { Module } from '../../../../structure-list/models/module.model';
 export class StructureEquipmentsComponent implements OnInit {
   @Input() structureForm: UntypedFormGroup;
   @Input() isEditMode: boolean;
-  @Input() equipmentsAndServices: { module: Module; openned: boolean }[];
+  @Input() equipmentsAndServices: CategoriesToggle[];
   @Output() validateForm = new EventEmitter<any>();
 
   private vowels = ['a', 'e', 'i', 'o', 'u', 'y'];
@@ -25,11 +25,9 @@ export class StructureEquipmentsComponent implements OnInit {
 
   public changeValueHandler(equipment: string, value = 0): void {
     let field = '';
-    if (equipment === 'ordinateurs') field = 'nbComputers';
-    if (equipment === 'tablettes') field = 'nbTablets';
-    if (equipment === 'scanners') field = 'nbScanners';
-    if (equipment === 'bornesNumeriques') field = 'nbNumericTerminal';
-    if (equipment === 'imprimantes') field = 'nbPrinters';
+    if (equipment === 'scanner') field = 'nbScanners';
+    if (equipment === 'computer') field = 'nbComputers';
+    if (equipment === 'printer') field = 'nbPrinters';
 
     if (value === -1 && this.structureForm.value[field] === 0) return;
     if (this.structureForm.value[field] + value < 0) return;

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

@@ -112,16 +112,29 @@
     <app-structure-public-target
       [isEditMode]="isEditMode"
       [structureForm]="structureForm"
-      [publics]="publics"
+      [age]="age"
+      [handicaps]="handicaps"
+      [publicOthers]="publicOthers"
+      [languageAndIlliteracy]="languageAndIlliteracy"
       (validateForm)="setValidationsForm()"
       (updateChoice)="updateChoice($event)"
     >
     </app-structure-public-target>
   </div>
+  <div *ngIf="currentStep == structureFormStep.structureDigitalHelpingAccompanimentOther">
+    <app-structure-public-target-other
+      [isEditMode]="isEditMode"
+      [structureForm]="structureForm"
+      (validateForm)="setValidationsForm()"
+      (updateChoice)="updateChoice($event)"
+    >
+    </app-structure-public-target-other>
+  </div>
   <div *ngIf="currentStep == structureFormStep.structureTrainingType">
     <app-structure-training-type
       [isEditMode]="isEditMode"
       [structureForm]="structureForm"
+      [trainingCategories]="trainingCategories"
       (validateForm)="setValidationsForm()"
     ></app-structure-training-type>
   </div>
@@ -144,7 +157,7 @@
   <div *ngIf="currentStep == structureFormStep.structureEquipments">
     <app-structure-equipments
       [structureForm]="structureForm"
-      [equipmentsAndServices]="equipmentsAndServices"
+      [equipmentsAndServices]="equipments"
       (validateForm)="setValidationsForm($event)"
       [isEditMode]="isEditMode"
       (inArray)="isInArray($event)"
@@ -162,7 +175,7 @@
   <div *ngIf="currentStep == structureFormStep.structureOtherServices">
     <app-structure-other-services
       [structureForm]="structureForm"
-      [equipmentsAndServices]="equipmentsAndServices"
+      [equipmentsAndServices]="equipmentsServices"
       [isEditMode]="isEditMode"
       (validateForm)="setValidationsForm($event)"
       (checkChange)="onCheckChange($event)"
@@ -172,7 +185,7 @@
     <app-structure-digital-helping-accompaniment
       [isEditMode]="isEditMode"
       [structureForm]="structureForm"
-      [proceduresAccompaniment]="proceduresAccompaniment"
+      [onlineProcedures]="onlineProcedures"
       (validateForm)="setValidationsForm($event)"
       (updateChoice)="updateChoice($event)"
     ></app-structure-digital-helping-accompaniment>

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

 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
+import { CategoriesToggle } from 'src/app/models/categoriesToggle.model';
 import { Address } from '../../../models/address.model';
 import { Structure } from '../../../models/structure.model';
 import { User } from '../../../models/user.model';
@@ -14,7 +15,7 @@ import { structureFormStep } from './structureFormStep.enum';
 
 @Component({
   selector: 'app-structure-form',
-  templateUrl: './structure-form.component.html'
+  templateUrl: './structure-form.component.html',
 })
 export class StructureFormComponent implements OnChanges, OnInit {
   @Input() nbSteps: number;
@@ -36,8 +37,6 @@ export class StructureFormComponent implements OnChanges, OnInit {
   // Collapse var
   public showWebsite: boolean = false;
   public showSocialNetwork: boolean = false;
-  public showPublicsAccompaniment: boolean;
-  public showProceduresAccompaniment: boolean;
 
   // Condition form
   public isClaimMode = false;
@@ -45,15 +44,22 @@ export class StructureFormComponent implements OnChanges, OnInit {
   public userAcceptSavedDate = false;
 
   // Form var
-  public equipmentsAndServices: { module: Module; openned: boolean }[] = [];
-  public trainingCategories: { category: Category; openned: boolean }[] = [];
+  public equipmentsServices: { module: Module; openned: boolean }[] = [];
+  public equipments: { module: Module; openned: boolean }[] = [];
+  public trainingCategories: CategoriesToggle[] = [];
   public accessModality: Category;
   public labelsQualifications: Category;
-  public proceduresAccompaniment: Category;
-  public publicsAccompaniment: Category;
-  public publics: Category;
+  public onlineProcedures: Category;
+  public age: Category;
+  public publicOthers: Category;
+  public handicaps: Category;
+  public languageAndIlliteracy: Category;
 
-  constructor(private searchService: SearchService, private profileService: ProfileService, private route: ActivatedRoute) {}
+  constructor(
+    private searchService: SearchService,
+    private profileService: ProfileService,
+    private route: ActivatedRoute
+  ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.currentStep) {
@@ -144,38 +150,38 @@ export class StructureFormComponent implements OnChanges, OnInit {
       //   this.updatePageValid();
     } else {
       this.pagesValidation[structureFormStep.structureChoice] = {
-        valid: this.structureForm.get('_id').valid
+        valid: this.structureForm.get('_id').valid,
       };
       this.pagesValidation[structureFormStep.structureNameAndAddress] = {
-        valid: this.structureForm.get('structureName').valid && this.structureForm.get('address').valid
+        valid: this.structureForm.get('structureName').valid && this.structureForm.get('address').valid,
       };
       this.pagesValidation[structureFormStep.structureContact] = {
-        valid: this.structureForm.get('contactMail').valid && this.structureForm.get('contactPhone').valid
+        valid: this.structureForm.get('contactMail').valid && this.structureForm.get('contactPhone').valid,
       };
       this.pagesValidation[structureFormStep.structureAccompanimentChoice] = {
-        valid: this.structureForm.get('placeOfReception').valid
+        valid: this.structureForm.get('placeOfReception').valid,
       };
       this.pagesValidation[structureFormStep.structureChoiceCompletion] = {
-        valid: this.isEditMode ? true : this.structureForm.get('choiceCompletion').valid
+        valid: this.isEditMode ? true : this.structureForm.get('choiceCompletion').valid,
       };
       this.pagesValidation[structureFormStep.structureContactCompletion] = {
         valid: this.isEditMode
           ? true
           : this.structureForm.get('contactPersonFirstname').valid &&
             this.structureForm.get('contactPersonLastname').valid &&
-            this.structureForm.get('contactPersonEmail').valid
+            this.structureForm.get('contactPersonEmail').valid,
       };
       this.pagesValidation[structureFormStep.structureType] = {
-        valid: this.structureForm.get('structureType').valid
+        valid: this.structureForm.get('structureType').valid,
       };
       this.pagesValidation[structureFormStep.structureAccessModality] = {
-        valid: this.structureForm.get('accessModality').valid
+        valid: this.structureForm.get('categories').get('accessModality').valid,
       };
       this.pagesValidation[structureFormStep.structureHours] = {
-        valid: this.hoursForm.valid && this.structureForm.get('exceptionalClosures').valid
+        valid: this.hoursForm.valid && this.structureForm.get('exceptionalClosures').valid,
       };
       this.pagesValidation[structureFormStep.structurePmr] = {
-        valid: this.structureForm.get('pmrAccess').valid
+        valid: this.structureForm.get('pmrAccess').valid,
       };
       this.pagesValidation[structureFormStep.structureWebAndSocialNetwork] = {
         valid:
@@ -183,67 +189,80 @@ export class StructureFormComponent implements OnChanges, OnInit {
           ((this.structureForm.get('facebook').valid &&
             this.structureForm.get('twitter').valid &&
             this.structureForm.get('instagram').valid) ||
-            !this.showSocialNetwork)
+            !this.showSocialNetwork),
       };
       this.pagesValidation[structureFormStep.structurePublicTarget] = {
-        valid: this.structureForm.get('publics').valid
+        valid: this.structureForm.get('categories').get('age').valid,
+      };
+      this.pagesValidation[structureFormStep.structureDigitalHelpingAccompanimentOther] = {
+        valid: this.structureForm.get('otherDescription').valid,
       };
       this.pagesValidation[structureFormStep.structureDigitalHelpingAccompaniment] = {
-        valid: this.structureForm.get('proceduresAccompaniment').valid
+        valid: this.structureForm.get('categories').get('onlineProcedures').valid,
       };
 
       this.pagesValidation[structureFormStep.structureTrainingType] = {
-        valid: true
+        valid: true,
       };
       this.pagesValidation[structureFormStep.structureTrainingPrice] = {
-        valid: this.structureForm.get('freeWorkShop').valid
+        valid: this.structureForm.get('freeWorkShop').valid,
       };
       this.pagesValidation[structureFormStep.structureWifi] = {
-        valid: this.structureForm.get('equipmentsAndServices').valid
+        valid: this.structureForm.get('categories').get('selfServiceMaterial').valid,
       };
       this.pagesValidation[structureFormStep.structureEquipments] = {
         valid:
           this.structureForm.get('nbComputers').valid &&
           this.structureForm.get('nbPrinters').valid &&
-          this.structureForm.get('nbTablets').valid &&
-          this.structureForm.get('nbNumericTerminal').valid &&
           this.structureForm.get('nbScanners').valid,
-        name: 'Equipements mis à disposition'
+        name: 'Equipements mis à disposition',
       };
       this.pagesValidation[structureFormStep.structureLabels] = {
-        valid: true
+        valid: true,
       };
       this.pagesValidation[structureFormStep.structureOtherServices] = {
-        valid: this.structureForm.get('equipmentsAndServices').valid
+        valid: this.structureForm.get('categories').get('equipmentsAndServices').valid,
       };
       this.pagesValidation[structureFormStep.structureDescription] = {
-        valid: true
+        valid: true,
       };
       this.pagesValidation[structureFormStep.structureCovidInfo] = {
-        valid: true
+        valid: true,
       };
 
       this.pagesValidation[structureFormStep.structureConsent] = {
-        valid: !this.isEditMode ? this.userAcceptSavedDate : true
+        valid: !this.isEditMode ? this.userAcceptSavedDate : true,
       };
       this.updatePageValid();
     }
   }
 
   async setCategories(): Promise<void> {
-    this.searchService.getCategoriesAccompaniment().subscribe((categories: Category[]) => {
-      this.proceduresAccompaniment = categories[0];
-    });
-    const equipmentsCategs = await this.searchService.getCategoriesOthers().toPromise();
-    equipmentsCategs.forEach((categ) => {
+    const categories = await this.searchService.getCategories().toPromise();
+    categories.forEach((categ) => {
       switch (categ.id) {
+        case CategoryEnum.onlineProcedures: {
+          this.onlineProcedures = categ;
+          break;
+        }
+        case CategoryEnum.baseSkills:
+        case CategoryEnum.advancedSkills: {
+          this.trainingCategories.push({ category: categ, openned: false });
+          break;
+        }
         case CategoryEnum.accessModality: {
           this.accessModality = categ;
           break;
         }
-        case CategoryEnum.equipmentsAndServices: {
+        case CategoryEnum.selfServiceMaterial: {
           categ.modules.forEach((c) => {
-            this.equipmentsAndServices.push({ module: c, openned: false });
+            this.equipments.push({ module: c, openned: false });
+          });
+          break;
+        }
+        case CategoryEnum.equipmentsServices: {
+          categ.modules.forEach((c) => {
+            this.equipmentsServices.push({ module: c, openned: false });
           });
           break;
         }
@@ -251,23 +270,35 @@ export class StructureFormComponent implements OnChanges, OnInit {
           this.labelsQualifications = categ;
           break;
         }
-        case CategoryEnum.publics: {
-          this.publics = categ;
+        case CategoryEnum.age: {
+          this.age = categ;
+          break;
+        }
+        case CategoryEnum.languageAndIlliteracy: {
+          this.languageAndIlliteracy = categ;
           break;
         }
-        case CategoryEnum.publicsAccompaniment: {
-          this.publicsAccompaniment = categ;
+        case CategoryEnum.publicOthers: {
+          this.publicOthers = categ;
+          break;
+        }
+        case CategoryEnum.handicaps: {
+          this.handicaps = categ;
           break;
         }
       }
     });
-    const categs = await this.searchService.getCategoriesTraining().toPromise();
-    categs.forEach((categ) => {
-      this.trainingCategories.push({ category: categ, openned: false });
-    });
   }
 
-  public onCheckChange({ event, formControlName, value }: { event: boolean; formControlName: string; value: string }): void {
+  public onCheckChange({
+    event,
+    formControlName,
+    value,
+  }: {
+    event: boolean;
+    formControlName: string;
+    value: string;
+  }): void {
     const formArray: UntypedFormArray = this.structureForm.get(formControlName) as UntypedFormArray;
     if (event) {
       // Add a new control in the arrayForm
@@ -287,8 +318,8 @@ export class StructureFormComponent implements OnChanges, OnInit {
 
   // Check if a FormControl value is in FormArray
   public isInArray({ formControlName, term }: { formControlName: string; term: string }): boolean {
-    if (this.structureForm.controls[formControlName] && this.structureForm.controls[formControlName].value) {
-      return this.structureForm.controls[formControlName].value.includes(term);
+    if (this.structureForm.get(formControlName) && this.structureForm.get(formControlName).value) {
+      return this.structureForm.get(formControlName).value.includes(term);
     }
     return false;
   }

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

@@ -15,11 +15,11 @@
   <div class="labelsQualifications" *ngIf="labelsQualifications" fxLayout="row wrap" fxLayoutAlign="flex-start">
     <app-checkbox-form
       *ngFor="let module of labelsQualifications.modules"
-      [isChecked]="isInArray(module.id, labelsQualifications.id)"
-      [text]="module.text"
+      [isChecked]="isInArray(module.id, 'labelsQualifications')"
+      [text]="module.name"
       [iconSvg]="module.id"
       [iconType]="'labels'"
-      (checkEvent)="onCheckChange($event, labelsQualifications.id, module.id)"
+      (checkEvent)="onCheckChange($event, 'categories.labelsQualifications', module.id)"
     >
     </app-checkbox-form>
   </div>

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

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { formUtils } from 'src/app/utils/formUtils';
 import { Category } from '../../../../structure-list/models/category.model';
 
 @Component({
@@ -14,17 +15,14 @@ export class StructureLabelsComponent implements OnInit {
   @Output() validateForm = new EventEmitter<any>();
   @Output() checkChange = new EventEmitter<any>();
 
+  public formUtils = new formUtils();
   async ngOnInit(): Promise<void> {
     this.validateForm.emit();
   }
   // Check if a FormControl value is in FormArray
   public isInArray(term: string, formControlName: 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: boolean, formControlName: string, modality: string) {
     this.checkChange.emit({
       event,

src/app/form/form-view/structure-form/structure-other-services/structure-other-services.component.html

@@ -8,11 +8,20 @@
       [icon]="'arrowBack'"
     ></app-svg-icon>
     <div class="titleContent">
-      <h3>Quels autres services sont proposés par la structure&nbsp;?</h3>
+      <h3>Quels sont les autres services proposés par la structure&nbsp;?</h3>
       <p>Facultatif</p>
     </div>
   </div>
   <div *ngIf="equipmentsAndServices" fxLayout="column wrap" fxLayoutAlign="flex-start" class="otherServices">
+    <!-- Display checkbox conditionning next screen -->
+    <!-- TODO: Us for display this screen -->
+    <app-checkbox-form
+      [isChecked]="isInArray('equipmentsAndServices', 'solidarityMaterial')"
+      [text]="'Vente de matériel numérique à tarif solidaire'"
+      [iconSvg]="'venteMaterielPrixSolidaire'"
+    >
+    </app-checkbox-form>
+    <!-- Regular database info -->
     <ng-container *ngFor="let service of equipmentsAndServices">
       <app-checkbox-form
         *ngIf="
@@ -20,13 +29,12 @@
             'donDeMateriels',
             'reconditionnementsDeMateriel',
             'accesLivresInformatiques',
-            'venteMaterielPrixSolidaire'
           ].includes(service.module.id)
         "
         [isChecked]="isInArray('equipmentsAndServices', service.module.id)"
-        [text]="service.module.text"
+        [text]="service.module.name"
         [iconSvg]="service.module.id"
-        (checkEvent)="onCheckChange($event, 'equipmentsAndServices', service.module.id)"
+        (checkEvent)="onCheckChange($event, 'categories.equipmentsAndServices', service.module.id)"
       >
       </app-checkbox-form>
     </ng-container>

src/app/form/form-view/structure-form/structure-other-services/structure-other-services.component.ts

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { formUtils } from 'src/app/utils/formUtils';
 import { Category } from '../../../../structure-list/models/category.model';
 
 @Component({
@@ -12,18 +13,15 @@ export class StructureOtherServicesComponent implements OnInit {
   @Input() equipmentsAndServices: Category;
   @Output() validateForm = new EventEmitter<any>();
   @Output() checkChange = new EventEmitter<any>();
+  public formUtils = new formUtils();
 
   async ngOnInit(): Promise<void> {
     this.validateForm.emit();
   }
 
-  public isInArray(formControlName: string, term: string) {
-    if (this.structureForm.controls[formControlName].value) {
-      return this.structureForm.controls[formControlName].value.includes(term);
-    }
-    return false;
+  public isInArray(formControlName: string, term: string): boolean {
+    return this.formUtils.isInCategoryArray(term, formControlName, this.structureForm);
   }
-
   public onCheckChange(event: boolean, formControlName: string, modality: string) {
     this.checkChange.emit({
       event,