add new klaro section config for metrics, refactor loading

Author: FrancescoMolinaro

src/app/shared/cookies/browser-klaro.service.ts

@@ -12,10 +12,11 @@ import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import cloneDeep from 'lodash/cloneDeep';
 import debounce from 'lodash/debounce';
 import { ANONYMOUS_STORAGE_NAME_KLARO, klaroConfiguration } from './klaro-configuration';
-import { Operation } from 'fast-json-patch';
+import { deepClone, Operation } from 'fast-json-patch';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { ConfigurationDataService } from '../../core/data/configuration-data.service';
 import { CAPTCHA_NAME } from '../../core/google-recaptcha/google-recaptcha.service';
+import isEqual from 'lodash/isEqual';
 
 export interface CookieConsents {
   acknowledgement: boolean;
@@ -70,6 +71,8 @@ export class BrowserKlaroService extends KlaroService {
 
   private readonly GOOGLE_ANALYTICS_SERVICE_NAME = 'google-analytics';
 
+  private lastCookiesConsents: CookieConsents;
+
   /**
    * Initial Klaro configuration
    */
@@ -346,9 +349,12 @@ export class BrowserKlaroService extends KlaroService {
     this.lazyKlaro.then(({getManager}) => {
       const manager = getManager(this.klaroConfig);
       const consentsSubject$ = this.consentsUpdates$;
+      let lastCookiesConsents = this.lastCookiesConsents;
       manager.watch({
         update(_, eventName, consents) {
-          if (eventName === 'consents') {
+
+          if (eventName === 'consents' && !isEqual(consents, lastCookiesConsents)) {
+            lastCookiesConsents = deepClone(consents);
             consentsSubject$.next(consents);
           }
         }

src/app/shared/cookies/klaro-configuration.ts

@@ -135,6 +135,21 @@ export const klaroConfiguration: any = {
         HAS_AGREED_END_USER
       ]
     },
+    {
+      name: 'plumX',
+      purposes: ['thirdPartiesJs'],
+      required: false,
+    },
+    {
+      name: 'altmetric',
+      purposes: ['thirdPartiesJs'],
+      required: false,
+    },
+    {
+      name: 'dimensions',
+      purposes: ['thirdPartiesJs'],
+      required: false,
+    },
     {
       name: GOOGLE_ANALYTICS_KLARO_KEY,
       purposes: ['statistical'],

src/app/shared/metric/metric-loader/metric-loader.component.ts

@@ -16,7 +16,7 @@ import { MetricLoaderService } from './metric-loader.service';
 import { hasValue } from '../../empty.util';
 import { BrowserKlaroService, CookieConsents } from '../../cookies/browser-klaro.service';
 import { KlaroService } from '../../cookies/klaro.service';
-import { distinctUntilChanged, startWith } from 'rxjs/operators';
+import {  startWith } from 'rxjs/operators';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -52,6 +52,8 @@ export class MetricLoaderComponent implements OnInit, OnDestroy {
 
   private browserKlaroService: BrowserKlaroService;
 
+  private hasLoadedScript: boolean;
+
   constructor(
     private componentFactoryResolver: ComponentFactoryResolver,
     private metricLoaderService: MetricLoaderService,
@@ -72,6 +74,7 @@ export class MetricLoaderComponent implements OnInit, OnDestroy {
     if (!metric) {
       return;
     }
+    this.hasLoadedScript = !!canLoadScript;
     this.metricLoaderService.loadMetricTypeComponent(metric.metricType, canLoadScript).then((component) => {
       if (hasValue(this.cookiesSubscription) && canLoadScript) {
         this.container.clear();
@@ -101,8 +104,7 @@ export class MetricLoaderComponent implements OnInit, OnDestroy {
     componentInstance.canLoadScript = canLoadScript;
     componentInstance.visibleWithoutData = forceRendering;
 
-
-    if (!canLoadScript) {
+    if (!canLoadScript && !this.settingsSubscription) {
       this.reloadComponentOnConsentsChange(componentInstance, canLoadScript);
     }
 
@@ -119,7 +121,7 @@ export class MetricLoaderComponent implements OnInit, OnDestroy {
    * @param consents
    */
   private getCanLoadScript(consents: CookieConsents): boolean {
-    return (hasValue(consents) && consents.acknowledgement && this.thirdPartyMetrics.includes(this.metric.metricType))
+    return (hasValue(consents) && consents[this.metric.metricType] && this.thirdPartyMetrics.includes(this.metric.metricType))
       || !this.thirdPartyMetrics.includes(this.metric.metricType);
   }
 
@@ -132,9 +134,7 @@ export class MetricLoaderComponent implements OnInit, OnDestroy {
    */
   private reloadComponentOnConsentsChange(componentInstance: BaseMetricComponent, canLoadScript: boolean): void {
     this.settingsSubscription = combineLatest([
-      this.consentUpdates$.pipe(distinctUntilChanged(
-        (previousConsents, currentConsents) => JSON.stringify(previousConsents) === JSON.stringify(currentConsents))
-      ),
+      this.consentUpdates$,
       componentInstance.requestSettingsConsent.pipe(startWith(undefined))
     ]).subscribe(([consents, request]) => {
       canLoadScript = this.getCanLoadScript(consents);
@@ -143,7 +143,7 @@ export class MetricLoaderComponent implements OnInit, OnDestroy {
         this.browserKlaroService.showSettings();
       }
 
-      if (canLoadScript) {
+      if (canLoadScript && !this.hasLoadedScript) {
         this.loadComponent(this.metric, canLoadScript, true);
       }
     });

src/assets/i18n/en.json5

@@ -1807,9 +1807,21 @@
 
   "cookies.consent.purpose.sharing": "Sharing",
 
+  "cookies.consent.app.title.plumX": "PlumX",
 
-  "curation-task.task.citationpage.label": "Generate Citation Page",
+  "cookies.consent.app.description.plumX": "PlumX Metrics provide insights into the ways people interact with individual pieces of research output (articles, conference proceedings, book chapters, and many more) in the online environment. (https://plumanalytics.com/)",
+
+  "cookies.consent.app.title.altmetric": "Altmetric",
+
+  "cookies.consent.app.description.altmetric": "Altmetric’s interface tracks online engagement to reveal how and where your research is being visualized. (https://www.altmetric.com)",
+
+  "cookies.consent.app.title.dimensions": "Dimensions",
 
+  "cookies.consent.app.description.dimensions": "Dimensions analyses references from publications and calculates a set of article-level indicators. (https://www.dimensions.ai)",
+
+  "cookies.consent.purpose.thirdPartiesJs": "Third parties JavaScript",
+
+  "curation-task.task.citationpage.label": "Generate Citation Page",
 
   "cris-layout.toggle.open": "Open section",