Feat(ENG-8778): Implement Cookie consent message

src/app/app.component.html

@@ -1,3 +1,4 @@
 <router-outlet />
 <osf-toast></osf-toast>
+<osf-cookie-consent></osf-cookie-consent>
 <osf-full-screen-loader></osf-full-screen-loader>

src/app/app.component.ts

@@ -10,12 +10,13 @@ import { Router, RouterOutlet } from '@angular/router';
 import { GetCurrentUser } from '@core/store/user';
 import { GetEmails, UserEmailsSelectors } from '@core/store/user-emails';
 import { ConfirmEmailComponent } from '@shared/components';
+import { CookieConsentComponent } from '@shared/components/cookie-consent/cookie-consent.component';
 
 import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
 
 @Component({
   selector: 'osf-root',
-  imports: [RouterOutlet, ToastComponent, FullScreenLoaderComponent],
+  imports: [RouterOutlet, ToastComponent, FullScreenLoaderComponent, CookieConsentComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/shared/components/cookie-consent/cookie-consent.component.html

@@ -0,0 +1,14 @@
+<p-toast key="cookie" position="bottom-center" [styleClass]="'cookie-toast'">
+  <ng-template let-message pTemplate="message">
+    <div class="flex flex-column gap-2">
+      <span>{{ message.detail }}</span>
+      <div class="flex justify-content-end">
+        <p-button
+          type="button"
+          label="{{ 'toast.cookie-consent.accept' | translate }}"
+          (click)="acceptCookies()"
+        ></p-button>
+      </div>
+    </div>
+  </ng-template>
+</p-toast>

src/app/shared/components/cookie-consent/cookie-consent.component.scss

@@ -0,0 +1,15 @@
+:host ::ng-deep .cookie-toast {
+  width: 900px;
+  max-width: min(92vw, 960px);
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+}
+
+:host ::ng-deep .cookie-toast .p-toast-message {
+  width: 100%;
+}
+
+:host ::ng-deep .cookie-toast .p-toast-message .p-toast-message-content {
+  color: #fcf8e3;
+  width: 100%;
+}

src/app/shared/components/cookie-consent/cookie-consent.component.spec.ts

@@ -0,0 +1,84 @@
+import { TranslateService } from '@ngx-translate/core';
+
+import { MessageService } from 'primeng/api';
+
+import { of } from 'rxjs';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CookieConsentService } from '../../services/cookie-consent/cookie-consent.service';
+
+import { CookieConsentComponent } from './cookie-consent.component';
+
+describe('CookieConsentComponent', () => {
+  let component: CookieConsentComponent;
+  let fixture: ComponentFixture<CookieConsentComponent>;
+  let mockToastService: jest.Mocked<MessageService>;
+  let mockConsentService: jest.Mocked<CookieConsentService>;
+  let mockTranslateService: jest.Mocked<TranslateService>;
+
+  beforeEach(async () => {
+    mockToastService = {
+      add: jest.fn(),
+      clear: jest.fn(),
+    } as unknown as jest.Mocked<MessageService>;
+
+    mockConsentService = {
+      hasConsent: jest.fn(),
+      grantConsent: jest.fn(),
+    } as unknown as jest.Mocked<CookieConsentService>;
+
+    mockTranslateService = {
+      get: jest.fn(),
+    } as unknown as jest.Mocked<TranslateService>;
+
+    await TestBed.configureTestingModule({
+      imports: [CookieConsentComponent],
+      providers: [
+        { provide: MessageService, useValue: mockToastService },
+        { provide: CookieConsentService, useValue: mockConsentService },
+        { provide: TranslateService, useValue: mockTranslateService },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CookieConsentComponent);
+    component = fixture.componentInstance;
+  });
+  describe('ngAfterViewInit', () => {
+    it('should show toast if no consent', () => {
+      mockConsentService.hasConsent.mockReturnValue(false);
+      mockTranslateService.get.mockReturnValue(of('Please accept cookies'));
+
+      component.ngAfterViewInit();
+
+      // wait for queueMicrotask to execute
+      return Promise.resolve().then(() => {
+        expect(mockTranslateService.get).toHaveBeenCalledWith('toast.cookie-consent.message');
+        expect(mockToastService.add).toHaveBeenCalledWith({
+          detail: 'Please accept cookies',
+          key: 'cookie',
+          sticky: true,
+          severity: 'warn',
+          closable: false,
+        });
+      });
+    });
+
+    it('should not show toast if consent already given', () => {
+      mockConsentService.hasConsent.mockReturnValue(true);
+
+      component.ngAfterViewInit();
+
+      expect(mockTranslateService.get).not.toHaveBeenCalled();
+      expect(mockToastService.add).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('acceptCookies', () => {
+    it('should grant consent and clear toast', () => {
+      component.acceptCookies();
+      expect(mockConsentService.grantConsent).toHaveBeenCalled();
+      expect(mockToastService.clear).toHaveBeenCalledWith('cookie');
+    });
+  });
+});

src/app/shared/components/cookie-consent/cookie-consent.component.ts

@@ -0,0 +1,43 @@
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+
+import { MessageService, PrimeTemplate } from 'primeng/api';
+import { Button } from 'primeng/button';
+import { Toast } from 'primeng/toast';
+
+import { AfterViewInit, Component, inject } from '@angular/core';
+
+import { CookieConsentService } from '../../services/cookie-consent/cookie-consent.service';
+
+@Component({
+  selector: 'osf-cookie-consent',
+  standalone: true,
+  templateUrl: './cookie-consent.component.html',
+  styleUrls: ['./cookie-consent.component.scss'],
+  imports: [Toast, Button, PrimeTemplate, TranslateModule],
+})
+export class CookieConsentComponent implements AfterViewInit {
+  private readonly toastService = inject(MessageService);
+  private readonly consentService = inject(CookieConsentService);
+  private readonly translateService = inject(TranslateService);
+
+  ngAfterViewInit() {
+    if (!this.consentService.hasConsent()) {
+      this.translateService.get('toast.cookie-consent.message').subscribe((detail) => {
+        queueMicrotask(() =>
+          this.toastService.add({
+            detail,
+            key: 'cookie',
+            sticky: true,
+            severity: 'warn',
+            closable: false,
+          })
+        );
+      });
+    }
+  }
+
+  acceptCookies() {
+    this.consentService.grantConsent();
+    this.toastService.clear('cookie');
+  }
+}

src/app/shared/components/toast/toast.component.html

@@ -1,4 +1,4 @@
-<p-toast class="toast-container" position="top-right" [preventOpenDuplicates]="true">
+<p-toast class="toast-container" position="top-right" [preventOpenDuplicates]="true" key="osf">
   <ng-template let-message pTemplate="message">
     <div class="font-medium w-full">{{ message.summary | translate: message.data?.translationParams }}</div>
   </ng-template>

src/app/shared/services/cookie-consent/cookie-consent.service.spec.ts

@@ -0,0 +1,42 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CookieConsentService } from './cookie-consent.service';
+
+describe('CookieConsentService', () => {
+  let service: CookieConsentService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CookieConsentService);
+
+    const store: Record<string, string> = {};
+    jest.spyOn(localStorage, 'getItem').mockImplementation((key: string) => store[key] || null);
+    jest.spyOn(localStorage, 'setItem').mockImplementation((key: string, value: string) => {
+      store[key] = value;
+    });
+    jest.spyOn(localStorage, 'removeItem').mockImplementation((key: string) => {
+      delete store[key];
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should return false if no consent is stored', () => {
+    expect(service.hasConsent()).toBe(false);
+  });
+
+  it('should return true after consent is granted', () => {
+    service.grantConsent();
+    expect(service.hasConsent()).toBe(true);
+  });
+
+  it('should remove consent when revoked', () => {
+    service.grantConsent();
+    expect(service.hasConsent()).toBe(true);
+
+    service.revokeConsent();
+    expect(service.hasConsent()).toBe(false);
+  });
+});

src/app/shared/services/cookie-consent/cookie-consent.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class CookieConsentService {
+  private consentKey = 'cookie-consent';
+
+  hasConsent(): boolean {
+    return localStorage.getItem(this.consentKey) === 'true';
+  }
+
+  grantConsent() {
+    localStorage.setItem(this.consentKey, 'true');
+  }
+
+  revokeConsent() {
+    localStorage.removeItem(this.consentKey);
+  }
+}

src/app/shared/services/toast.service.ts

@@ -9,14 +9,20 @@ export class ToastService {
   private messageService = inject(MessageService);
 
   showSuccess(summary: string, params?: unknown) {
-    this.messageService.add({ severity: 'success', summary, data: { translationParams: params } });
+    this.messageService.add({ severity: 'success', summary, data: { translationParams: params }, key: 'osf' });
   }
 
   showWarn(summary: string, params?: unknown) {
-    this.messageService.add({ severity: 'warn', summary, data: { translationParams: params } });
+    this.messageService.add({ severity: 'warn', summary, data: { translationParams: params }, key: 'osf' });
   }
 
   showError(summary: string, params?: unknown) {
-    this.messageService.add({ severity: 'error', summary, life: 5000, data: { translationParams: params } });
+    this.messageService.add({
+      severity: 'error',
+      summary,
+      life: 5000,
+      data: { translationParams: params },
+      key: 'osf',
+    });
   }
 }

src/assets/i18n/en.json

@@ -184,6 +184,12 @@
     "links": "Links",
     "institutions": "Institutions"
   },
+  "toast": {
+    "cookie-consent": {
+      "message": "Notice: This website relies on cookies to help provide a better user experience. By clicking accept or continuing to use the site, you consent to our use of cookies. See our Privacy Policy and Cookie Use for more information.",
+      "accept": "Accept cookies"
+    }
+  },
   "auth": {
     "common": {
       "email": "Email",