chore: add tracking service to portalicious

interfaces/Portalicious/eslint.config.js

@@ -69,7 +69,7 @@ module.exports = tseslint.config(
       ],
       '@angular-eslint/component-max-inline-declarations': [
         'error',
-        { template: 10 },
+        { template: 20 },
       ],
       '@angular-eslint/no-async-lifecycle-method': ['error'],
       '@angular-eslint/no-conflicting-lifecycle': ['error'],

interfaces/Portalicious/src/app/app.config.ts

@@ -15,44 +15,18 @@ import {
   withComponentInputBinding,
 } from '@angular/router';
 
-import { parseMatomoConnectionString } from '_matomo.utils.mjs';
 import {
   provideTanStackQuery,
   QueryClient,
 } from '@tanstack/angular-query-experimental';
-import { provideMatomo, withRouter } from 'ngx-matomo-client';
 import { providePrimeNG } from 'primeng/config';
 
-import { AppRoutes, routes } from '~/app.routes';
+import { routes } from '~/app.routes';
 import AppTheme from '~/app.theme';
 import { CustomPageTitleStrategy } from '~/app.title-strategy';
 import { AuthService } from '~/services/auth.service';
+import { TrackingService } from '~/services/tracking.service';
 import { Locale } from '~/utils/locale';
-import { environment } from '~environment';
-
-const conditionalProvideMatomo = () => {
-  const connectionInfo = parseMatomoConnectionString(
-    environment.matomo_connection_string,
-  );
-  if (!connectionInfo.id || !connectionInfo.api || !connectionInfo.sdk) {
-    return [];
-  }
-  return provideMatomo(
-    {
-      siteId: connectionInfo.id,
-      trackerUrl: connectionInfo.api,
-      trackerUrlSuffix: '', // Should be included in `connectionInfo.api` used as `trackerUrl`
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- `scriptUrl` seems to be expecting more than only a string
-      scriptUrl: connectionInfo.sdk,
-      enableJSErrorTracking: true,
-      requireConsent: 'none',
-      runOutsideAngularZone: true,
-    },
-    withRouter({
-      exclude: [new RegExp(AppRoutes.authCallback)],
-    }),
-  );
-};
 
 export const getAppConfig = (locale: Locale): ApplicationConfig => ({
   providers: [
@@ -95,8 +69,8 @@ export const getAppConfig = (locale: Locale): ApplicationConfig => ({
       }),
     ),
     ...AuthService.APP_PROVIDERS,
+    ...TrackingService.APP_PROVIDERS,
     { provide: TitleStrategy, useClass: CustomPageTitleStrategy },
     { provide: LOCALE_ID, useValue: locale },
-    conditionalProvideMatomo(),
   ],
 });

interfaces/Portalicious/src/app/components/privacy/privacy-copy-no-tracking.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-privacy-copy-no-tracking',
+  imports: [],
+  template: `
+    <p i18n>
+      We do not share any personal information with other third-parties.
+    </p>
+  `,
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PrivacyCopyNoTrackingComponent {}

interfaces/Portalicious/src/app/components/privacy/privacy-copy-tracking.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-privacy-copy-tracking',
+  imports: [],
+  template: `
+    <p i18n>
+      We use the external "<em>Matomo Cloud</em>"-service by InnoCraft Ltd. to
+      measure the usage of the 121 Platform.
+    </p>
+    <p i18n>
+      We do not share any personal information with Matomo/InnoCraft Ltd. Our
+      use of their service is covered by the
+      <a
+        href="https://matomo.org/matomo-cloud-privacy-policy/"
+        target="_blank"
+        >Matomo Cloud Privacy Policy</a
+      >
+      and the
+      <a
+        href="https://matomo.org/matomo-cloud-dpa/"
+        target="_blank"
+        >Matomo Cloud Data Processing Agreement</a
+      >.
+    </p>
+  `,
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PrivacyCopyTrackingComponent {}

interfaces/Portalicious/src/app/pages/privacy/privacy.page.html

@@ -71,31 +71,7 @@ <h2 i18n>Who we share information with</h2>
     The data of the 121 Platform is hosted in a Microsoft Azure-environment of
     The Netherlands Red Cross.
   </p>
-  @if (isMatomoEnabled) {
-    <p i18n>
-      We use the external "<em>Matomo Cloud</em>"-service by InnoCraft Ltd. to
-      measure the usage of the 121 Platform.
-    </p>
-    <p i18n>
-      We do not share any personal information with Matomo/InnoCraft Ltd. Our
-      use of their service is covered by the
-      <a
-        href="https://matomo.org/matomo-cloud-privacy-policy/"
-        target="_blank"
-        >Matomo Cloud Privacy Policy</a
-      >
-      and the
-      <a
-        href="https://matomo.org/matomo-cloud-dpa/"
-        target="_blank"
-        >Matomo Cloud Data Processing Agreement</a
-      >.
-    </p>
-  } @else {
-    <p i18n>
-      We do not share any personal information with other third-parties.
-    </p>
-  }
+  <ng-container *ngComponentOutlet="TrackingCopyComponent"></ng-container>
 
   <h2 i18n>Cookies</h2>
 

interfaces/Portalicious/src/app/pages/privacy/privacy.page.ts

@@ -1,16 +1,18 @@
-import { DatePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DatePipe, NgComponentOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 import { PageLayoutComponent } from '~/components/page-layout/page-layout.component';
-import { environment } from '~environment';
+import { TrackingService } from '~/services/tracking.service';
 
 @Component({
   selector: 'app-privacy-page',
-  imports: [PageLayoutComponent, DatePipe],
+  imports: [PageLayoutComponent, DatePipe, NgComponentOutlet],
   templateUrl: './privacy.page.html',
   styles: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PrivacyPageComponent {
-  public isMatomoEnabled = !!environment.matomo_connection_string;
+  readonly trackingService = inject(TrackingService);
+
+  TrackingCopyComponent = this.trackingService.PrivacyCopyComponent;
 }

interfaces/Portalicious/src/app/services/tracking.service.ts

@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+
+import { parseMatomoConnectionString } from '_matomo.utils.mjs';
+import { provideMatomo, withRouter } from 'ngx-matomo-client';
+
+import { AppRoutes } from '~/app.routes';
+import { PrivacyCopyNoTrackingComponent } from '~/components/privacy/privacy-copy-no-tracking.component';
+import { PrivacyCopyTrackingComponent } from '~/components/privacy/privacy-copy-tracking.component';
+import { environment } from '~environment';
+
+const MATOMO_CONNECTION_INFO = parseMatomoConnectionString(
+  environment.matomo_connection_string,
+);
+
+const IS_MATOMO_ENABLED = () =>
+  MATOMO_CONNECTION_INFO.id &&
+  MATOMO_CONNECTION_INFO.api &&
+  MATOMO_CONNECTION_INFO.sdk;
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TrackingService {
+  public static APP_PROVIDERS = IS_MATOMO_ENABLED()
+    ? [
+        provideMatomo(
+          {
+            siteId: MATOMO_CONNECTION_INFO.id,
+            trackerUrl: MATOMO_CONNECTION_INFO.api,
+            trackerUrlSuffix: '', // Should be included in `connectionInfo.api` used as `trackerUrl`
+
+            scriptUrl: MATOMO_CONNECTION_INFO.sdk,
+            enableJSErrorTracking: true,
+            requireConsent: 'none',
+            runOutsideAngularZone: true,
+          },
+          withRouter({
+            exclude: [new RegExp(AppRoutes.authCallback)],
+          }),
+        ),
+      ]
+    : [];
+
+  public get PrivacyCopyComponent() {
+    return IS_MATOMO_ENABLED()
+      ? PrivacyCopyTrackingComponent
+      : PrivacyCopyNoTrackingComponent;
+  }
+
+  // TODO: AB#33807 - implement and use this function
+  public trackEvent() {
+    if (!IS_MATOMO_ENABLED()) {
+      return;
+    }
+
+    // track event to matomo
+  }
+}