feat: add webinaires links everywhere (#379)

* feat: add webinaires links * fix: testing afterviewInit on deploy * fix: revert to onInit * fix: change scroll to options * fix: missing icon aria-hidden --------- Co-authored-by: Marc Gavanier <[email protected]>
anct-cartographie-nationale · Oct 16, 2023 · 2c6640e · 2c6640e
1 parent 4c80390
commit 2c6640e
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 15 deletions.
diff --git a/...ents/lieux-mediation-numerique-details/erreur-form-modal/erreur-form-modal.component.html b/...ents/lieux-mediation-numerique-details/erreur-form-modal/erreur-form-modal.component.html
@@ -43,6 +43,17 @@
       </div>
     </form>
   </div>
+  <a
+    slot="footer"
+    class="btn btn-secondary me-3"
+    href="https://airtable.com/app2MF0d9XxkCwv0p/shrX7zSTk8pOtoKik?mtm_campaign=fromwebsitecarto"
+    target="_blank"
+    rel="noopener noreferrer">
+    <span class="orientation-btn-label my-auto text-start lh-sm">
+      <i class="ri-calendar-todo-line" aria-hidden="true"></i>
+      Webinaires : Mettre à jour vos données
+    </span>
+  </a>
   <button slot="footer" type="submit" form="erreurGroup" class="btn btn-primary">
     <i class="ri-mail-send-line" aria-hidden="true"></i>
     Signaler l'erreur

diff --git a/...onents/lieux-mediation-numerique-details/lieux-mediation-numerique-details.component.html b/...onents/lieux-mediation-numerique-details/lieux-mediation-numerique-details.component.html
@@ -129,6 +129,16 @@ <h2 class="h5 my-3 d-print-none fw-bold text-muted">Horaires détaillées</h2>
         (showLabelInvokingContext)="showLabelInvokingContext.emit($event)"></app-labellisations>
     </li>
   </ul>
+  <span class="d-flex ms-3 my-1">
+    <a
+      class="nav-link me-1 text-primary text-hover-light"
+      href="https://airtable.com/app2MF0d9XxkCwv0p/shrX7zSTk8pOtoKik?mtm_campaign=fromwebsitecarto"
+      target="_blank"
+      rel="noopener noreferrer">
+      <i class="ri-calendar-todo-line me-2" aria-hidden="true"></i>
+      Participer au webinaire "Mettre à jour ses données"
+    </a>
+  </span>
   <div class="bg-light px-2">
     <app-mise-a-jour [source]="lieuMediationNumerique.source"></app-mise-a-jour>
   </div>

diff --git a/src/features/cartographie/layouts/cartographie/cartographie.layout.html b/src/features/cartographie/layouts/cartographie/cartographie.layout.html
@@ -146,6 +146,24 @@ <h3 class="card-title text-primary">
           </a>
         </div>
         <div class="mt-auto bg-light p-4">
+          <a
+            class="btn orientation-btn bg-white mb-3 p-3 rounded-0 d-flex d-flex align-items-center"
+            [routerLink]="['/presentation']"
+            fragment="webinaire"
+            target="_blank"
+            rel="noopener noreferrer">
+            <span class="ri-circled bg-primary text-light fw-normal me-3" aria-hidden="true">
+              <i class="ri-calendar-todo-line" aria-hidden="true"></i>
+            </span>
+            <span class="orientation-btn-label my-auto text-start lh-sm">
+              Webinaires
+              <br />
+              <i class="small text-muted">
+                Mettre à jour ses données, utiliser l'outil d'orientation, nous vous proposons des webinaires pour vous
+                accompagner dans l'utilisation de la cartographie
+              </i>
+            </span>
+          </a>
           <a
             class="btn orientation-btn bg-white mb-3 p-3 rounded-0 d-flex d-flex align-items-center"
             href="https://labase.anct.gouv.fr/base/356?tags=&page=0&tab=resources"

diff --git a/...ion/components/information-orientation-modal/information-orientation-modal.component.html b/...ion/components/information-orientation-modal/information-orientation-modal.component.html
@@ -10,6 +10,19 @@ <h3 class="text-primary fw-bold mb-4">{{ orientationInformation.titre }}</h3>
       {{ element }}
     </i>
   </div>
+  <div class="d-flex justify-content-center">
+    <a
+      class="btn btn-secondary me-1"
+      [routerLink]="['/presentation']"
+      fragment="webinaire"
+      target="_blank"
+      rel="noopener noreferrer">
+      <span class="orientation-btn-label my-auto text-start lh-sm">
+        <i class="ri-calendar-todo-line" aria-hidden="true"></i>
+        Inscrivez-vous à nos webinaires
+      </span>
+    </a>
+  </div>
   <ng-container slot="footer">
     <ng-content></ng-content>
   </ng-container>

diff --git a/src/features/presentation/pages/presentation/presentation.page.html b/src/features/presentation/pages/presentation/presentation.page.html
@@ -68,17 +68,7 @@ <h2 class="fw-bold my-5 text-black text-center">
       <app-integrateurs></app-integrateurs>
     </div>
   </section>
-  <section class="container text-center">
-    <div class="my-3" *ngIf="lieuxMediationNumeriqueTotal$ | async as lieuxMediationNumeriqueTotal">
-      <h2 class="ps-3 fw-bold my-5 text-start">Chiffres clefs d'utilisation</h2>
-      <app-chiffres-cle
-        [regions]="(regions$ | async)"
-        [lieuxMediationNumeriqueTotal]="(lieuxMediationNumeriqueTotal$ | async) ?? []"
-        [typologies]="(typologies$ | async) ?? []"
-        [labels]="(labelsNationaux$ | async) ?? []"></app-chiffres-cle>
-    </div>
-  </section>
-  <section #webinaire class="bg-integration py-5">
+  <section #webinaire class="py-5">
     <div class="container">
       <h2 class="ps-3 fw-bold my-5 text-center text-primary">
         Découvrez nos webinaires, pour en savoir plus
@@ -88,4 +78,14 @@ <h2 class="ps-3 fw-bold my-5 text-center text-primary">
       <app-webinaire></app-webinaire>
     </div>
   </section>
+  <section class="bg-integration text-center">
+    <div class="container my-3 p-2" *ngIf="lieuxMediationNumeriqueTotal$ | async as lieuxMediationNumeriqueTotal">
+      <h2 class="ps-3 fw-bold my-5 text-start">Chiffres clefs d'utilisation</h2>
+      <app-chiffres-cle
+        [regions]="(regions$ | async)"
+        [lieuxMediationNumeriqueTotal]="(lieuxMediationNumeriqueTotal$ | async) ?? []"
+        [typologies]="(typologies$ | async) ?? []"
+        [labels]="(labelsNationaux$ | async) ?? []"></app-chiffres-cle>
+    </div>
+  </section>
 </main>
diff --git a/src/features/presentation/pages/presentation/presentation.page.ts b/src/features/presentation/pages/presentation/presentation.page.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Inject, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Inject, ViewChild } from '@angular/core';
 import { BehaviorSubject, Observable, map, of } from 'rxjs';
 import { LieuMediationNumerique, Localisation } from '@gouvfr-anct/lieux-de-mediation-numerique';
 import { SET_TITLE_ACTION, SetTitleAction } from '../../../../root';
@@ -14,6 +14,7 @@ import {
   WithLieuxCount
 } from '../../../core/presenters';
 import { LieuxMediationNumeriqueRepository } from '../../../core/repositories';
+import { ActivatedRoute } from '@angular/router';
 
 const toLieuxWithLocalisation = (lieux: LieuMediationNumerique[]) => lieux.filter(onlyWithLocalisation);
 
@@ -29,7 +30,7 @@ const toLieuxWithLocalisation = (lieux: LieuMediationNumerique[]) => lieux.filte
   ],
   styleUrls: ['./presentation.page.scss']
 })
-export class PresentationPage {
+export class PresentationPage implements AfterViewInit {
   @ViewChild('webinaire') webinaireRef!: ElementRef;
   private _currentSlide$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
   public currentSlide$: Observable<number> = this._currentSlide$.asObservable();
@@ -58,7 +59,8 @@ export class PresentationPage {
 
   public constructor(
     private readonly _lieuxMediationNumeriqueListPresenter: LieuxMediationNumeriquePresenter,
-    @Inject(SET_TITLE_ACTION) readonly setTitle: SetTitleAction
+    @Inject(SET_TITLE_ACTION) readonly setTitle: SetTitleAction,
+    public readonly _route: ActivatedRoute
   ) {
     setTitle(['Présentation']);
   }
@@ -78,6 +80,12 @@ export class PresentationPage {
   public slidesBackground: string[] = ['bg-orientation', 'bg-centralisation', 'bg-actualisation', 'bg-visibilite'];
 
   onScrollToAnchor = (): void => {
-    this.webinaireRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+    this.webinaireRef.nativeElement.scrollIntoView({ behavior: 'instant', block: 'start', inline: 'start' });
   };
+
+  ngAfterViewInit() {
+    if (this._route.snapshot.fragment) {
+      this.onScrollToAnchor();
+    }
+  }
 }
diff --git a/src/root/layouts/application-root/application-root-layout.component.html b/src/root/layouts/application-root/application-root-layout.component.html
@@ -63,6 +63,17 @@
               <i class="ri-external-link-line" aria-hidden="true"></i>
             </a>
           </span>
+          <span class="d-flex me-3">
+            <a
+              class="nav-link me-1 link-muted-light text-hover-light"
+              [routerLink]="['/presentation']"
+              fragment="webinaire"
+              target="_blank"
+              rel="noopener noreferrer">
+              Participer à nos webinaires !
+              <i class="ri-external-link-line" aria-hidden="true"></i>
+            </a>
+          </span>
         </div>
       </div>
       <div>