feat: bouton unique impression (#390)

* feat: bouton unique impression

* fix: delete unuse variable

* feat: add tracking matomo

src/features/cartographie/components/index.ts

@@ -27,7 +27,8 @@ import {
   MiseAJourComponent,
   AccessibiliteComponent,
   BandeauErreurComponent,
-  ErreurFormModalComponent
+  ErreurFormModalComponent,
+  ImpressionChoiceModalComponent
 } from './lieux-mediation-numerique-details';
 import { LocationBreadcrumbComponent } from './location-breadcrumb/location-breadcrumb.component';
 import { AffinerRechercheFormComponent } from './affiner-recherche-form/affiner-recherche-form.component';
@@ -66,5 +67,6 @@ export const components = [
   LabelModalComponent,
   HubModalComponent,
   BandeauErreurComponent,
-  ErreurFormModalComponent
+  ErreurFormModalComponent,
+  ImpressionChoiceModalComponent
 ];

src/features/cartographie/components/lieux-mediation-numerique-details/bandeau-erreur/bandeau-erreur.component.html

@@ -1,7 +1,7 @@
 <div class="d-flex p-0">
-  <button (click)="openOrientationSheetModal.emit($event)" class="btn btn-primary btn-sm my-auto">
+  <button (click)="openImpressionChoiceModal.emit($event); onPrintFromBandeauErreur()" class="btn btn-primary btn-sm my-auto">
     <i class="ri-printer-line me-2" aria-hidden="true"></i>
-    fiche d'orientation
+    Imprimer
   </button>
   <div class="flex-grow-1 my-auto">
     <button (click)="openErreurFormModal.emit($event)" class="btn btn-sm text-muted">

src/features/cartographie/components/lieux-mediation-numerique-details/bandeau-erreur/bandeau-erreur.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Optional, Output } from '@angular/core';
+import { MatomoTracker } from 'ngx-matomo';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -8,5 +9,11 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angul
 export class BandeauErreurComponent {
   @Output() public openErreurFormModal: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
   @Output() public closeDetails: EventEmitter<void> = new EventEmitter<void>();
-  @Output() public openOrientationSheetModal: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+  @Output() public openImpressionChoiceModal: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  public constructor(@Optional() private readonly _matomoTracker?: MatomoTracker) {}
+
+  public onPrintFromBandeauErreur(): void {
+    this._matomoTracker?.trackEvent('fiche détail', 'bandeau footer', `impression fiche`);
+  }
 }

src/features/cartographie/components/lieux-mediation-numerique-details/boutons-action/boutons-action.component.html

@@ -26,7 +26,10 @@
     </a>
   </div>
   <div class="col">
-    <button type="button" class="btn btn-tile px-md-0 py-md-4 p-2 d-flex flex-md-column flex-row" (click)="print.emit()">
+    <button
+      type="button"
+      class="btn btn-tile px-md-0 py-md-4 p-2 d-flex flex-md-column flex-row"
+      (click)="openImpressionChoiceModal.emit($event); onPrintFromActionButton()">
       <span class="ri-circled bg-primary text-light fw-normal">
         <i class="ri-printer-line" aria-hidden="true"></i>
       </span>

src/features/cartographie/components/lieux-mediation-numerique-details/boutons-action/boutons-action.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Optional, Output } from '@angular/core';
+import { MatomoTracker } from 'ngx-matomo';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10,7 +11,13 @@ export class BoutonsActionComponent {
 
   @Input() public priseRdv: string | undefined;
 
-  @Output() public print: EventEmitter<void> = new EventEmitter<void>();
-
   @Output() public sendByEmail: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  @Output() public openImpressionChoiceModal: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  public constructor(@Optional() private readonly _matomoTracker?: MatomoTracker) {}
+
+  public onPrintFromActionButton(): void {
+    this._matomoTracker?.trackEvent('fiche détail', 'bouton action', `impression fiche`);
+  }
 }

src/features/cartographie/components/lieux-mediation-numerique-details/impression-choice-modal/impression-choice-modal.component.html

@@ -0,0 +1,39 @@
+<app-modal #modal heading="Imprimer la fiche" icon="ri-printer-line" bgBody="light" bgFooter="light">
+  <div class="text-center">
+    <h5 class="h5 fw-bold text-primary">Vous êtes médiateur numérique ?</h5>
+    <div class="my-3">
+      Vous pouvez générer une fiche d'orientation pour la structure
+      <br />
+      qui accueillera votre bénéficiaire.
+    </div>
+  </div>
+  <button
+    type="button"
+    (click)="orientationSheetModalModal.emit($event); modal.close()"
+    class="btn bg-white mb-3 px-lg-3 px-2 py-3 rounded-0 d-flex position-relative w-100">
+    <span class="ri-circled bg-primary text-light fw-normal me-3 my-auto d-sm-block d-none">
+      <i class="ri-calendar-todo-line" aria-hidden="true"></i>
+    </span>
+    <div class="d-flex flex-column">
+      <span class="my-auto text-start">Générer une fiche d'orientation</span>
+      <small class="my-auto text-start text-info fst-italic">En 2 étapes avec vos informations et celles du bénéficiaire</small>
+    </div>
+    <i class="ri-arrow-right-s-line text-muted-dark ri-2x mb-auto ms-auto" aria-hidden="true"></i>
+  </button>
+  <app-text-separator background="light">OU</app-text-separator>
+  <button
+    type="button"
+    (click)="print.emit()"
+    class="btn bg-white mb-3 px-lg-3 px-2 py-3 rounded-0 d-flex position-relative w-100">
+    <span class="ri-circled bg-primary text-light fw-normal me-3 my-auto d-sm-block d-none">
+      <i class="ri-calendar-todo-line" aria-hidden="true"></i>
+    </span>
+    <div class="d-flex flex-column">
+      <span class="orientation-btn-label my-auto text-start">Imprimer la fiche</span>
+      <small class="my-auto text-start text-info fst-italic">
+        Imprimer simplement la fiche du lieu avec toutes ses informations
+      </small>
+    </div>
+    <i class="ri-arrow-right-s-line text-muted-dark ri-2x mb-auto ms-auto" aria-hidden="true"></i>
+  </button>
+</app-modal>

src/features/cartographie/components/lieux-mediation-numerique-details/impression-choice-modal/impression-choice-modal.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, ViewChild } from '@angular/core';
+import { ModalComponent } from '@features/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-impression-choice-modal',
+  templateUrl: './impression-choice-modal.component.html'
+})
+export class ImpressionChoiceModalComponent {
+  @ViewChild(ModalComponent) control!: ModalComponent;
+
+  @Output() public orientationSheetModalModal: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  @Output() public print: EventEmitter<void> = new EventEmitter<void>();
+}

src/features/cartographie/components/lieux-mediation-numerique-details/index.ts

@@ -15,3 +15,4 @@ export * from './mise-a-jour/mise-a-jour.component';
 export * from './accessibilite/accessibilite.component';
 export * from './bandeau-erreur/bandeau-erreur.component';
 export * from './erreur-form-modal/erreur-form-modal.component';
+export * from './impression-choice-modal/impression-choice-modal.component';

src/features/cartographie/components/lieux-mediation-numerique-details/lieux-mediation-numerique-details.component.html

@@ -12,7 +12,7 @@
     <app-boutons-action
       [siteWeb]="lieuMediationNumerique.contact?.site_web"
       [priseRdv]="lieuMediationNumerique.prise_rdv"
-      (print)="print.emit()"
+      (openImpressionChoiceModal)="impressionChoiceModal.control.toggle($event)"
       (sendByEmail)="sendByEmailModal.control.toggle($event)"></app-boutons-action>
     <div class="p-4 bg-tertiary d-flex align-items-center" *ngIf="lieuMediationNumerique.prive">
       <span class="flex-grow-1">Attention, cette structure n'accueille pas de public !</span>
@@ -150,11 +150,16 @@ <h2 class="h5 my-3 d-print-none fw-bold text-muted">Horaires détaillées</h2>
   </div>
   <div class="bg-primary p-2">
     <app-bandeau-erreur
-      (openOrientationSheetModal)="orientationSheetModal.control.toggle($event)"
+      (openImpressionChoiceModal)="impressionChoiceModal.control.toggle($event)"
       (openErreurFormModal)="erreurFormModal.control.toggle($event)"
       (closeDetails)="closeDetails.emit(lieuMediationNumerique)"></app-bandeau-erreur>
   </div>
 </div>
+<app-impression-choice-modal
+  (orientationSheetModalModal)="orientationSheetModal.control.toggle($event)"
+  (print)="print.emit()"
+  class="d-print-none"
+  #impressionChoiceModal></app-impression-choice-modal>
 <app-erreur-form-modal
   class="d-print-none"
   #erreurFormModal

src/features/cartographie/components/lieux-mediation-numerique-details/lieux-mediation-numerique-details.component.ts

@@ -28,6 +28,8 @@ export class LieuxMediationNumeriqueDetailsComponent {
 
   @Output() public openOrientationSheetModal: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
 
+  @Output() public openImpressionChoiceModal: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
   @Output() public openErreurFormModal: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
 
   @Output() public showLabel: EventEmitter<LabelNational> = new EventEmitter<LabelNational>();

src/features/cartographie/modules/common/cartographie.common.module.ts

@@ -5,7 +5,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { MapService, NgxMapLibreGLModule } from '@maplibre/ngx-maplibre-gl';
 import { SkipLinkModule } from '@features/core';
-import { CollapseModule, ModalModule, OffcanvasModule } from '@features/core/components';
+import { CollapseModule, ModalModule, OffcanvasModule, TextSeparatorModule } from '@features/core/components';
 import { CheckboxArrayModule } from '../../../core/directives';
 import { DistancePipeModule, PhonePipeModule } from '../../../core/pipes';
 import { AdresseModule, UserLocationModule } from '../../../adresse';
@@ -31,7 +31,8 @@ import { components } from '../../components';
     OffcanvasModule,
     CheckboxArrayModule,
     ModalModule,
-    SkipLinkModule
+    SkipLinkModule,
+    TextSeparatorModule
   ]
 })
 export class CartographieCommonModule {}

src/features/core/components/index.ts

@@ -3,3 +3,5 @@ export * from './modal/modal.module';
 export * from './modal/modal.component';
 export * from './offcanvas/offcanvas.component';
 export * from './offcanvas/offcanvas.module';
+export * from './text-separator/text-separator.component';
+export * from './text-separator/text-separator.module';

src/features/core/components/text-separator/text-separator.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TextSeparatorComponent } from './text-separator.component';
+import { RouterLinkActive } from '@angular/router';
+
+@NgModule({
+  declarations: [TextSeparatorComponent],
+  imports: [CommonModule, RouterLinkActive],
+  exports: [TextSeparatorComponent]
+})
+export class TextSeparatorModule {}

src/features/orientation/components/index.ts

@@ -5,7 +5,6 @@ import { DisplayOnMapLinkComponent } from './display-on-map-link/display-on-map-
 import { InformationOrientationModalComponent } from './information-orientation-modal/information-orientation-modal.component';
 import { FilterResultCountComponent } from './filter-result-count/filter-result-count.component';
 import { NavComponent } from './nav/nav.component';
-import { TextSeparatorComponent } from './text-separator/text-separator.component';
 import { OpeningHoursFormComponent } from './opening-hours-form';
 
 export const components = [
@@ -16,6 +15,5 @@ export const components = [
   DisplayOnMapLinkComponent,
   InformationOrientationModalComponent,
   FilterResultCountComponent,
-  TextSeparatorComponent,
   OpeningHoursFormComponent
 ];

src/features/orientation/modules/common/orientation.common.module.ts

@@ -3,7 +3,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { SkipLinkModule, CollapseModule, ModalModule } from '../../../core';
+import { SkipLinkModule, CollapseModule, ModalModule, TextSeparatorModule } from '../../../core';
 import { CheckboxArrayModule } from '../../../core/directives';
 import { AdresseModule } from '../../../adresse';
 import { pages } from '../../pages';
@@ -23,7 +23,8 @@ import { directives } from '../../directives';
     CheckboxArrayModule,
     CollapseModule,
     ModalModule,
-    SkipLinkModule
+    SkipLinkModule,
+    TextSeparatorModule
   ]
 })
 export class OrientationCommonModule {}