[ENG-8901] Refactor the cookie consent banner to be consistent

src/app/app.component.html

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

src/app/app.component.ts

@@ -10,7 +10,6 @@ import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 
-import { CookieConsentBannerComponent } from '@core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component';
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { GetCurrentUser } from '@core/store/user';
 import { GetEmails, UserEmailsSelectors } from '@core/store/user-emails';
@@ -22,7 +21,7 @@ import { GoogleTagManagerService } from 'angular-google-tag-manager';
 
 @Component({
   selector: 'osf-root',
-  imports: [RouterOutlet, ToastComponent, FullScreenLoaderComponent, CookieConsentBannerComponent],
+  imports: [RouterOutlet, ToastComponent, FullScreenLoaderComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component.html

@@ -1,14 +1,16 @@
-<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>
+@if (this.displayBanner()) {
+  <div class="cookie-consent-container" @fadeInOut>
+    <div class="w-full p-message">
+      <div class="grid flex-row p-message-content">
+        <div class="col">{{ 'toast.cookie-consent.message' | translate }}</div>
+        <div class="col-fixed flex justify-content-end">
+          <p-button
+            type="button"
+            label="{{ 'toast.cookie-consent.accept' | translate }}"
+            (click)="acceptCookies()"
+          ></p-button>
+        </div>
       </div>
     </div>
-  </ng-template>
-</p-toast>
+  </div>
+}

src/app/core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component.scss

@@ -1,15 +1,23 @@
-:host ::ng-deep .cookie-toast {
-  width: 900px;
-  max-width: min(92vw, 960px);
-  left: 50% !important;
-  transform: translateX(-50%) !important;
-}
+@use "styles/mixins" as mix;
 
-:host ::ng-deep .cookie-toast .p-toast-message {
-  width: 100%;
-}
+.cookie-consent-container {
+  padding: 1rem !important;
+  display: block !important;
+
+  .p-message {
+    background-color: #886d3f;
+    color: var(--white);
+    width: 100%;
+    border-radius: var(--p-message-border-radius, 6px);
+    outline-width: var(--p-message-border-width, 1px);
+    outline-style: solid;
 
-:host ::ng-deep .cookie-toast .p-toast-message .p-toast-message-content {
-  color: #fcf8e3;
-  width: 100%;
+    .p-message-content {
+      display: flex;
+      align-items: center;
+      padding: var(--p-message-content-padding, 1.5rem);
+      gap: var(--p-message-content-gap, 0.5rem);
+      height: 100%;
+    }
+  }
 }

src/app/core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component.spec.ts

@@ -1,84 +1,57 @@
-import { TranslateService } from '@ngx-translate/core';
+import { CookieService } from 'ngx-cookie-service';
 
-import { MessageService } from 'primeng/api';
-
-import { of } from 'rxjs';
+import { Button } from 'primeng/button';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CookieConsentService } from '../../../../shared/services/cookie-consent/cookie-consent.service';
-
 import { CookieConsentBannerComponent } from './cookie-consent-banner.component';
 
-describe('CookieConsentComponent', () => {
-  let component: CookieConsentBannerComponent;
+import { OSFTestingModule } from '@testing/osf.testing.module';
+
+describe('Component: Cookie Consent Banner', () => {
   let fixture: ComponentFixture<CookieConsentBannerComponent>;
-  let mockToastService: jest.Mocked<MessageService>;
-  let mockConsentService: jest.Mocked<CookieConsentService>;
-  let mockTranslateService: jest.Mocked<TranslateService>;
+  let component: CookieConsentBannerComponent;
+
+  const cookieServiceMock = {
+    check: jest.fn(),
+    set: jest.fn(),
+  };
 
   beforeEach(async () => {
-    mockToastService = {
-      add: jest.fn(),
-      clear: jest.fn(),
-    } as unknown as jest.Mocked<MessageService>;
+    await TestBed.configureTestingModule({
+      imports: [OSFTestingModule, CookieConsentBannerComponent, Button],
 
-    mockConsentService = {
-      hasConsent: jest.fn(),
-      grantConsent: jest.fn(),
-    } as unknown as jest.Mocked<CookieConsentService>;
+      providers: [{ provide: CookieService, useValue: cookieServiceMock }],
+    });
 
-    mockTranslateService = {
-      get: jest.fn(),
-    } as unknown as jest.Mocked<TranslateService>;
+    jest.clearAllMocks();
+  });
 
-    await TestBed.configureTestingModule({
-      imports: [CookieConsentBannerComponent],
-      providers: [
-        { provide: MessageService, useValue: mockToastService },
-        { provide: CookieConsentService, useValue: mockConsentService },
-        { provide: TranslateService, useValue: mockTranslateService },
-      ],
-    }).compileComponents();
+  it('should show the banner if cookie is not set', () => {
+    cookieServiceMock.check.mockReturnValue(false);
+    fixture = TestBed.createComponent(CookieConsentBannerComponent);
+    component = fixture.componentInstance;
+
+    expect(component.displayBanner()).toBe(true);
+  });
 
+  it('should hide the banner if cookie is set', () => {
+    cookieServiceMock.check.mockReturnValue(true);
     fixture = TestBed.createComponent(CookieConsentBannerComponent);
     component = fixture.componentInstance;
+
+    expect(component.displayBanner()).toBe(false);
   });
-  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);
+  it('should set cookie and hide banner on acceptCookies()', () => {
+    cookieServiceMock.check.mockReturnValue(false);
+    fixture = TestBed.createComponent(CookieConsentBannerComponent);
+    component = fixture.componentInstance;
 
-      component.ngAfterViewInit();
+    component.acceptCookies();
 
-      expect(mockTranslateService.get).not.toHaveBeenCalled();
-      expect(mockToastService.add).not.toHaveBeenCalled();
-    });
-  });
+    expect(cookieServiceMock.set).toHaveBeenCalledWith('cookie-consent', 'true', new Date('9999-12-31T23:59:59Z'), '/');
 
-  describe('acceptCookies', () => {
-    it('should grant consent and clear toast', () => {
-      component.acceptCookies();
-      expect(mockConsentService.grantConsent).toHaveBeenCalled();
-      expect(mockToastService.clear).toHaveBeenCalledWith('cookie');
-    });
+    expect(component.displayBanner()).toBe(false);
   });
 });

src/app/core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component.ts

@@ -1,42 +1,61 @@
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { CookieService } from 'ngx-cookie-service';
+import { TranslatePipe } 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 { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 
-import { CookieConsentService } from '../../../../shared/services/cookie-consent/cookie-consent.service';
+import { fadeInOutAnimation } from '@core/animations/fade.in-out.animation';
 
+/**
+ * Displays a cookie consent banner until the user accepts.
+ *
+ * - Uses `ngx-cookie-service` to persist acceptance across sessions.
+ * - Automatically hides the banner if consent is already recorded.
+ * - Animates in/out using the `fadeInOutAnimation`.
+ * - Supports translation via `TranslatePipe`.
+ */
 @Component({
   selector: 'osf-cookie-consent-banner',
   templateUrl: './cookie-consent-banner.component.html',
   styleUrls: ['./cookie-consent-banner.component.scss'],
-  imports: [Toast, Button, PrimeTemplate, TranslatePipe],
+  imports: [Button, TranslatePipe],
+  animations: [fadeInOutAnimation],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CookieConsentBannerComponent 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,
-          })
-        );
-      });
-    }
+export class CookieConsentBannerComponent {
+  /**
+   * The name of the cookie used to track whether the user accepted cookies.
+   */
+  private readonly cookieName = 'cookie-consent';
+
+  /**
+   * Signal controlling the visibility of the cookie banner.
+   * Set to `true` if the user has not accepted cookies yet.
+   */
+  readonly displayBanner = signal<boolean>(false);
+
+  /**
+   * Cookie service used to persist dismissal state in the browser.
+   */
+  private readonly cookies = inject(CookieService);
+
+  /**
+   * Initializes the component and sets the banner display
+   * based on the existence of the cookie.
+   */
+  constructor() {
+    this.displayBanner.set(!this.cookies.check(this.cookieName));
   }
 
+  /**
+   * Called when the user accepts cookies.
+   * - Sets a persistent cookie with a far-future expiration.
+   * - Hides the banner immediately.
+   */
   acceptCookies() {
-    this.consentService.grantConsent();
-    this.toastService.clear('cookie');
+    const expireDate = new Date('9999-12-31T23:59:59Z');
+    this.cookies.set(this.cookieName, 'true', expireDate, '/');
+    this.displayBanner.set(false);
   }
 }

src/app/core/components/osf-banners/osf-banner.component.html

@@ -1,3 +1,3 @@
-<osf-maintenance-banner></osf-maintenance-banner>
 <osf-scheduled-banner></osf-scheduled-banner>
+<osf-maintenance-banner></osf-maintenance-banner>
 <osf-cookie-consent-banner></osf-cookie-consent-banner>

src/app/core/components/osf-banners/scheduled-banner/scheduled-banner.component.scss

@@ -0,0 +1,3 @@
+.w-full {
+  height: 108px !important;
+}

src/app/core/components/osf-banners/scheduled-banner/scheduled-banner.component.ts

@@ -19,6 +19,7 @@ import { BannersSelector, GetCurrentScheduledBanner } from '@osf/shared/stores/b
 @Component({
   selector: 'osf-scheduled-banner',
   templateUrl: './scheduled-banner.component.html',
+  styleUrls: ['./scheduled-banner.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ScheduledBannerComponent implements OnInit {

src/app/core/components/root/root.component.spec.ts

@@ -13,7 +13,7 @@ import { HeaderComponent } from '@core/components/header/header.component';
 import { TopnavComponent } from '@core/components/topnav/topnav.component';
 import { IS_WEB, IS_XSMALL } from '@osf/shared/helpers';
 
-import { OSFBannerComponent } from '../osf-banners/osf.banner.component';
+import { OSFBannerComponent } from '../osf-banners/osf-banner.component';
 import { SidenavComponent } from '../sidenav/sidenav.component';
 
 import { RootComponent } from './root.component';