Compare revisions

Rémi PAILHAREY · Rémi PAILHAREY · Guilhem CARRON · Guilhem CARRON · Bastien DUMONT · Bastien DUMONT
--- a/.gitlab/issue_templates/default.md
+++ b/.gitlab/issue_templates/default.md
-/title [Scope] Description
+[[_TOC_]]

-### Résumé du problème
+## Contexte

-_Donnez une description briève du problème._
+## Objectif

-### Les étapes pour reproduire le bug
+## Ressources

-_Listez les étapes qui vous permettent de reproduire ce bug, cette étape est très importante._
-
-### Décrivez le comportement du bug ?
-
-### Quel serez le comportement attendu ?
-
-### Logs et/ou screenshots
-
-### Possible fixes
-
-/label ~"type::bug"
+## Tâches
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,45 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+## [2.0.0-beta5](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v2.0.0-beta4...v2.0.0-beta5) (2022-11-23)
+
+
+### Features
+
+* Add solidarity material in onboarding + carto + edit ([1f997f2](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/1f997f2c6536d36cda8df7f0cf09d24b9d50e2d7))
+* **admin:** export users ([76a3add](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/76a3add32e542f5dd49cd0824a562c98c429da13))
+* **carto:** add pmr handling for carto filtering and orientation ([a5232eb](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/a5232eb2be3997a6ea04db83e2374a091b1fead3))
+* center loader in carto ([ff5d016](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/ff5d0161b07e787a77d7236e35dce7b97adee101))
+* delete my personal offer ([6ffbd4a](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/6ffbd4ad6158d15540266a3fe690febd25918042))
+* **docker:** update registry path ([6698cf8](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/6698cf839f29e780692ff6d1e776599d57a2b5f3))
+* **edit-structure:** link to manage members ([e5cc5d3](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/e5cc5d3064b2a925d77bb0c204497518eb002337))
+* **footer:** "mediation numérique" button ([2be0de8](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/2be0de896264ff8c840bb7a8f34ae0d33d803b52))
+* **nginx:** update matomo base conf ([8166b93](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/8166b93bdaa1e0970bf2da9855d01ed56b17d019))
+* **orientation:** :hammer: add new orientation with the following tunnels : trainings, online accompaniement, solidarity material, material access  ([249a6be](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/249a6be341319aff8de7766490ce2a2c30faeb57))
+* **orientation:** add language selection  ([05867d0](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/05867d0e76ca2d4508516b96699163bc31aa8bee))
+* **orientation:** Add modal for foreigners demarch ([e8419a6](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/e8419a6b768a19d40283e016fb27eb43bc438236))
+* personal offer edition ([9cc07be](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/9cc07bedb7dcafe44bb55b315c2bd0f052eea52f))
+* personal offers section in profile ([a2159c5](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/a2159c52384c344065d48fd5e0db824f9b3dc9f5))
+* **personnalOffer:** Add-multi-checkbox ([cfe149e](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/cfe149e4a39a8e0a6478d72a83085624e516c8b1))
+
+
+### Bug Fixes
+
+* add members ([f58fede](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/f58fedeba1a4223a020597661fddd3fe1e2ff484))
+* **admin:** loader style ([27584f1](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/27584f1a76e40d8606f7941197d0371e5180e66a))
+* **aptic:** handling of missing fields for aptic structures ([1568706](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/1568706de0e377edff1ff930b24e0ac3fed7d2aa))
+* clickable structure carto (ios) ([14a397a](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/14a397a73bcf2088e47041cf9115e02af8c2c27b))
+* **deps:** update ag-grid monorepo to v28 (major) ([1d634d0](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/1d634d0e5b910028f799a98b138618466ad3d11d))
+* **deps:** update dependency @asymmetrik/ngx-leaflet to v14 ([3345bef](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/3345befd2f1dde6bca893b019d7b98473bdd88ac))
+* **deps:** update dependency leaflet.locatecontrol to ^0.77.0 ([864de8e](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/864de8ec78d5edf2a62e09c059df605856ded221))
+* **deps:** update dependency rxjs to v7 ([7875e76](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/7875e76fee5db11c615a2589416d6b23c6956e71))
+* **deps:** update dependency zone.js to ~0.12.0 ([e5aad9e](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/e5aad9ed3d63cf5e9948065b4f64dfb02b43d8e0))
+* onboarding structure creation missing end button ([fe0836a](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/fe0836a00a18a2a75bd176227937ebd9accd77ee))
+* **orientation:** revert merge conflict from 05867d0e76ca2d4508516b96699163bc31aa8bee ([611d961](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/611d9618be298487bbbbfa54a513e32aa609fc82))
+* retours review ([aae2d55](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/aae2d550bf92385125aa45d9983e4c7c9612c0b6))
+* Retours review ([f904514](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/f904514b38c184cfabc140500faf4e82882d2ce0))
+* **style:** add rouded class for buttons ([5ae4610](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/5ae461025e4f7d45ffd8695102dadf3a8709667b))
+
 ## [2.0.0-beta4](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v2.0.0-beta2.2...v2.0.0-beta4) (2022-10-31)



--- a/nginx/dev.conf
+++ b/nginx/dev.conf
@@ -29,10 +29,10 @@ server {
    _paq.push(['enableLinkTracking']);
    (function() {
      var u='<URL_GDLYON>';
-      _paq.push(['setTrackerUrl', u+'piwik.php']);
+      _paq.push(['setTrackerUrl', u+'matomo.php']);
      _paq.push(['setSiteId', '<SITE_ID>']);
      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-      g.type='text/javascript'; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
    })();
  </script>";


--- a/package.json
+++ b/package.json
 {
  "name": "pamn",
-  "version": "2.0.0-beta4",
+  "version": "2.0.0-beta5",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --configuration=fr --proxy-config proxy.conf.json",

--- a/src/app/annuaire/filter-modal/filter-modal.component.scss
+++ b/src/app/annuaire/filter-modal/filter-modal.component.scss
-@import '../../../assets/scss/icons';
 @import '../../../assets/scss/color';
-@import '../../../assets/scss/typography';
-@import '../../../assets/scss/breakpoint';
-@import '../../../assets/scss/shapes';
 @import '../../../assets/scss/hyperlink';
-@import '../../../assets/scss/z-index';

 .modalemployers {
  left: 515px;
@@ -13,119 +8,6 @@
  left: 412px;
 }

-.maxModal .blockLigne {
-  box-sizing: border-box;
-  width: 360px;
-  .smallList {
-    display: block;
-    box-sizing: border-box;
-    background: $grey-8;
-    max-width: 300px;
-    padding: 0.5rem !important;
-    margin-top: 1rem !important;
-  }
-}
-.modal {
-  max-width: 360px;
-  width: auto;
-  z-index: $modal-z-index !important;
-  position: fixed;
-  box-shadow: $box-shadow-simple;
-  border-radius: 8px;
-  margin-top: 25px;
-  @media #{$large-phone} {
-    height: 100%;
-    max-height: auto;
-    max-width: auto;
-    width: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    border: none;
-    padding: 0;
-  }
-  background: $white;
-  .body-wrap {
-    @media #{$large-phone} {
-      height: 100vh;
-      height: -webkit-fill-available;
-    }
-    .titleFilter {
-      display: none !important;
-      margin: 27px 25px 0px 25px;
-      @include lato-bold-26;
-      @media #{$large-phone} {
-        display: flex !important;
-      }
-    }
-  }
-  .contentModal {
-    overflow-y: auto;
-    max-width: 1100px;
-    border-bottom: 1px solid $grey;
-    @media #{$large-phone} {
-      max-height: none;
-      height: 100%;
-    }
-    .blockFiltre {
-      width: auto;
-      margin: 25px 20px;
-      margin-bottom: calc(25px - 1rem);
-      min-width: 200px;
-
-      @media #{$large-phone} {
-        margin: 0 18px;
-        padding: 25px 0;
-        min-width: 0;
-      }
-    }
-    .blockLigne {
-      padding-left: 0;
-      margin: 0px;
-      li {
-        margin-bottom: 1rem;
-      }
-    }
-    label {
-      @include lato-regular-16;
-      color: $grey-1;
-    }
-
-    .arrow {
-      cursor: pointer;
-      margin-left: auto;
-      background-color: transparent;
-      border-bottom: 1px solid $black;
-      border-right: 1px solid $black;
-      transform: translateY(-25%) rotate(45deg);
-      height: 7px;
-      width: 7px;
-      transition: all 300ms ease;
-      margin-top: -5px;
-    }
-    .toggled {
-      transform: translateY(25%) rotate(-135deg);
-    }
-    &.max-height {
-      max-height: 50vh;
-      overflow-y: overlay;
-    }
-  }
-  .footer {
-    box-sizing: border-box;
-    padding: 0.5rem;
-    .reset {
-      width: 45%;
-      text-align: center;
-      color: $grey-4;
-    }
-    .half-width {
-      width: 50%;
-      padding: 0 4px;
-    }
-  }
-}
-
 a {
  @include hyperlink;
 }
--- a/src/app/annuaire/result-list/result-list.component.html
+++ b/src/app/annuaire/result-list/result-list.component.html
@@ -7,7 +7,7 @@
      <app-svg-icon class="avatar" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-40'"></app-svg-icon>
    </div>
    <div class="identity">
-      <p class="name">{{ user.name }} {{ user.surname }}</p>
+      <p class="name">{{ user.name }} {{ user.surname.toUpperCase() }}</p>
      <p class="job" *ngIf="user.job">{{ user.job.name }}</p>
    </div>
    <div class="employer" *ngIf="user.employer">{{ user.employer.name }}</div>

--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,16 +2,14 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ToastrModule } from 'ngx-toastr';
-
-import { AppRoutingModule } from './app-routing.module';
-
 import { ServiceWorkerModule } from '@angular/service-worker';
+import { ToastrModule } from 'ngx-toastr';
 import { environment } from '../environments/environment';
 import { AnnuaireComponent } from './annuaire/annuaire.component';
 import { FilterModalComponent } from './annuaire/filter-modal/filter-modal.component';
 import { ResultListComponent } from './annuaire/result-list/result-list.component';
 import { SearchBarComponent } from './annuaire/search-bar/search-bar.component';
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { CartoModule } from './carto/carto.module';
 import { CustomBreakPointsProvider } from './config/custom-breakpoint';
@@ -32,6 +30,7 @@ import { NewsletterSubscriptionComponent } from './newsletter-subscription/newsl
 import { PageComponent } from './page/page.component';
 import { ResetEmailComponent } from './reset-email/reset-email.component';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
+import { PersonalOfferResolver } from './resolvers/personal-offer.resolver';
 import { StructureResolver } from './resolvers/structure.resolver';
 import { TempUserResolver } from './resolvers/temp-user.resolver';
 import { RouterListenerService } from './services/routerListener.service';
@@ -90,6 +89,7 @@ import { StructureJoinComponent } from './structure/structure-join/structure-joi
    DeactivateGuard,
    TempUserResolver,
    StructureResolver,
+    PersonalOfferResolver,
    RouterListenerService,
    UpdateService,
  ],

--- a/src/app/carto/carto.component.html
+++ b/src/app/carto/carto.component.html
@@ -6,6 +6,7 @@
    <app-structure-list
      (searchEvent)="getStructures($event)"
      [structureList]="structures"
+      [selectedStructureList]="structuresSelected"
      [isOrientation]="isOrientationForm"
      [location]="currentLocation"
      (displayMapMarkerId)="setMapMarkerId($event)"

--- a/src/app/carto/carto.component.ts
+++ b/src/app/carto/carto.component.ts
@@ -22,10 +22,10 @@ export class CartoComponent implements OnInit {
  @Input() public filters: Filter[] = [];
  @Input() public userLatitude: number = null;
  @Input() public userLongitude: number = null;
+  @Input() public structuresSelected: Structure[] = [];
  @Output() structureSelection = new EventEmitter<any>();

  public structures: Structure[] = [];
-  public structuresSelected: Structure[] = [];
  public currentLocation: GeoJson;
  public displayMarkerId: string;
  public selectedMarkerId: string;

--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
-<div class="footer" fxLayout="row" fxLayoutAlign="center">
-  <div fxLayout="row">
-    <!--a class="clickable text-align-center" routerLink="/page/accessibilite" i18n>Accessibilité</a-->
+<div class="footer">
+  <div class="links">
    <a class="clickable text-align-center" routerLink="/legal-notice" i18n>Mentions légales</a>
    <a class="clickable text-align-center" routerLink="/newsletter" i18n>Newsletter</a>
-    <!-- <a class="clickable text-align-center" routerLink="/sitemap" i18n>Plan du site</a> -->
    <a class="clickable text-align-center" routerLink="/contact" i18n>Contact</a>
    <a class="clickable text-align-center" routerLink="/page/qui-sommes-nous" i18n>Qui sommes-nous ?</a>
  </div>
-  <a
-    class="metro-link"
-    href="https://www.grandlyon.com"
-    title="Accéder au site de la Métropole de Lyon (nouvelle fenêtre)"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    <img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt />
-    <p class="metro-title" i18n>Un site de la Métropole de Lyon</p>
-  </a>
+
+  <div class="right">
+    <button class="mediationButton" (click)="goToMediation()">
+      <img src="/assets/ico/telephone.svg" alt="telephone" />
+      Médiation numérique
+    </button>
+    <a
+      class="metro-link"
+      href="https://www.grandlyon.com"
+      title="Accéder au site de la Métropole de Lyon (nouvelle fenêtre)"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt />
+      <p class="metro-title" i18n>Un site de la Métropole de Lyon</p>
+    </a>
+  </div>
 </div>
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -7,12 +7,16 @@
  height: $footer-height;
  background-color: black;
  display: flex;
-  align-items: center !important;
-  justify-content: space-between !important;
-  padding: 0px 22px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1.5rem;
+
+  .links {
+    display: flex;
+    gap: 10px;
+  }
  a {
    color: $white;
-    margin: 0px 0px 0px 10px;
    text-decoration: none;
    @include lato-regular-12;
    &:hover {
@@ -20,7 +24,7 @@
    }
    &:not(:last-child)::after {
      content: '•';
-      margin: 0px 0px 0px 10px;
+      margin-left: 10px;
      display: inline-block;
    }
  }
@@ -29,6 +33,25 @@
    width: 22px;
  }

+  .right {
+    display: flex;
+    gap: 1rem;
+    .mediationButton {
+      @include lato-regular-12;
+      padding: 0 16px 0 8px;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      background-color: $grey-5;
+      border-radius: 8px;
+      border: 1px solid #000;
+      cursor: pointer;
+      &:hover {
+        transform: scale(1.01);
+      }
+    }
+  }
+
  @media #{$large-phone} {
    display: none !important;
    font-size: 0.75em;

--- a/src/app/footer/footer.component.ts
+++ b/src/app/footer/footer.component.ts
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';

 @Component({
  selector: 'app-footer',
@@ -6,5 +7,9 @@ import { Component } from '@angular/core';
  styleUrls: ['./footer.component.scss'],
 })
 export class FooterComponent {
-  constructor() {}
+  constructor(private router: Router) {}
+
+  public goToMediation(): void {
+    this.router.navigate(['/orientation'], { state: { mediationNumerique: true } });
+  }
 }
--- a/src/app/form/form-view/form-view.component.ts
+++ b/src/app/form/form-view/form-view.component.ts
@@ -94,6 +94,10 @@ export class FormViewComponent implements OnInit, AfterViewInit {
  }

  async ngOnInit(): Promise<void> {
+    // Get structure from history (this is used to create personal offer from profile)
+    if (history.state.structure) {
+      this.structure = history.state.structure;
+    }
    this.routeParam = this.router.routerState.snapshot.url.split('/')[2];

    this.initPage();
@@ -130,9 +134,9 @@ export class FormViewComponent implements OnInit, AfterViewInit {

  private initPage(): void {
    const profileFormSteps: number = Object.keys(profileFormStep).length / 2;
-    const personnalOfferFormSteps: number = Object.keys(personalOfferFormStep).length / 2 - 1;
+    const personalOfferFormSteps: number = Object.keys(personalOfferFormStep).length / 2 - 1;
    const structureFormSteps: number = Object.keys(structureFormStep).length / 2;
-    const totalFormSteps: number = profileFormSteps + personnalOfferFormSteps + structureFormSteps;
+    const totalFormSteps: number = profileFormSteps + personalOfferFormSteps + structureFormSteps;
    if (formType[this.routeParam] === formType.account) {
      this.nbSteps = 3;
      this.currentPage = accountFormStep.accountInfo;

--- a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
@@ -4,12 +4,11 @@
 @import '../../../../../assets/scss/breakpoint';

 .progressBar {
-  height: #{$progressBar-height};
  max-width: 980px;
-  margin: 16px auto 0 auto;
+  margin: 1rem auto;

  @media #{$tablet} {
-    margin: 0px 4px;
+    margin: 0.625rem;
  }
  p {
    @include lato-bold-14;

--- a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.ts
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.ts
@@ -17,7 +17,6 @@ export class ProgressBarComponent implements OnChanges {
  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 {

--- a/src/app/form/form-view/guards/personalOffer.guard.ts
+++ b/src/app/form/form-view/guards/personalOffer.guard.ts
@@ -10,8 +10,10 @@ export class PersonalOfferGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): UrlTree | boolean {
    if (
      route.routeConfig.path === 'personaloffer' &&
-      (this.router.routerState.snapshot.url === '/form/profile' ||
-        this.router.routerState.snapshot.url === '/form/structure')
+      (this.router.routerState.snapshot.url === '/profile' ||
+        this.router.routerState.snapshot.url === '/form/profile' ||
+        this.router.routerState.snapshot.url === '/form/structure' ||
+        this.router.routerState.snapshot.url.includes('/join/'))
    ) {
      return true;
    }

--- a/src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.html
+++ b/src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.html
@@ -5,17 +5,6 @@
    <p>Facultatif</p>
  </div>

-  <div fxLayout="column" fxLayoutGap="32px">
-    <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.name"
-          (action)="toogleResult(module)"
-        ></app-button>
-      </span>
-    </div>
-  </div>
+  <app-accompaniment-picker [personalOfferForm]="personalOfferForm" [onlineProcedures]="onlineProcedures">
+  </app-accompaniment-picker>
 </form>
--- a/src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.ts
+++ b/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 { ButtonType } from '../../../../shared/components/button/buttonType.enum';
 import { Category } from '../../../../structure-list/models/category.model';
-import { Module } from '../../../../structure-list/models/module.model';

 @Component({
  selector: 'app-personal-offer-accompaniment',
@@ -15,29 +13,7 @@ export class PersonalOfferAccompanimentComponent implements OnInit {
  @Input() onlineProcedures: Category;
  @Output() validateForm = new EventEmitter<any>();

-  public buttonTypeEnum = ButtonType;
-  public selectedModules: Module[] = [];
-
-
  ngOnInit(): void {
    this.validateForm.emit();
  }
-
-  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('categories')
-      .get('onlineProcedures')
-      .patchValue(this.selectedModules.map((module) => module.id));
-  }
-
-  public isSelectedModule(module: Module): boolean {
-    if (this.selectedModules && this.selectedModules.includes(module)) return true;
-    return false;
-  }
 }
--- a/src/app/form/form-view/personal-offer-form/personal-offer-form.component.html
+++ b/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"
-      [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">
-    <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>
+<ng-container *ngIf="currentStep === personalOfferFormStep.personalOfferAccompaniment">
+  <app-personal-offer-accompaniment
+    *ngIf="onlineProcedures"
+    [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">
+  <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>
--- a/src/app/form/form-view/personal-offer-form/personal-offer-form.component.ts
+++ b/src/app/form/form-view/personal-offer-form/personal-offer-form.component.ts
@@ -30,6 +30,7 @@ export class PersonalOfferFormComponent implements OnChanges, OnInit {
  ngOnInit(): void {
    this.setCategories();
  }
+
  ngOnChanges(changes: SimpleChanges): void {
    if (changes.currentStep) {
      if (
No results found