[ENG-8901] Move terms of service consent banner (#438)

* feat(eng-8901-6): update the tos banner * feat(eng-8901-6): tests for consent banner

Author: bp-cos

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

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

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

@@ -5,6 +5,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { CookieConsentBannerComponent } from './cookie-consent-banner/cookie-consent-banner.component';
 import { ScheduledBannerComponent } from './scheduled-banner/scheduled-banner.component';
+import { TosConsentBannerComponent } from './tos-consent-banner/tos-consent-banner.component';
 import { OSFBannerComponent } from './osf-banner.component';
 
 import { OSFTestingModule } from '@testing/osf.testing.module';
@@ -23,6 +24,7 @@ describe('Component: OSF Banner', () => {
  MockComponentWithSignal('osf-maintenance-banner'),
  MockComponent(ScheduledBannerComponent),
  MockComponent(CookieConsentBannerComponent),
+ MockComponent(TosConsentBannerComponent),
  ],
  }).compileComponents();
 

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

@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CookieConsentBannerComponent } from './cookie-consent-banner/cookie-consent-banner.component';
 import { MaintenanceBannerComponent } from './maintenance-banner/maintenance-banner.component';
 import { ScheduledBannerComponent } from './scheduled-banner/scheduled-banner.component';
+import { TosConsentBannerComponent } from './tos-consent-banner/tos-consent-banner.component';
 
 /**
  * Wrapper component responsible for rendering all global or conditional banners.
@@ -21,7 +22,12 @@ import { ScheduledBannerComponent } from './scheduled-banner/scheduled-banner.co
  */
 @Component({
  selector: 'osf-banner-component',
- imports: [MaintenanceBannerComponent, ScheduledBannerComponent, CookieConsentBannerComponent],
+ imports: [
+ MaintenanceBannerComponent,
+ ScheduledBannerComponent,
+ CookieConsentBannerComponent,
+ TosConsentBannerComponent,
+ ],
  templateUrl: './osf-banner.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/features/home/components/tos-consent-banner/tos-consent-banner.component.html renamed to src/app/core/components/osf-banners/tos-consent-banner/tos-consent-banner.component.html

@@ -1,5 +1,5 @@
 @if (!acceptedTermsOfServiceChange()) {
- <div class="p-4 bg-white">
+ <div class="p-3">
  <p-message styleClass="w-full" severity="warn">
  <ng-template #container>
  <div class="flex flex-column w-full">

src/app/features/home/components/tos-consent-banner/tos-consent-banner.component.spec.ts renamed to src/app/core/components/osf-banners/tos-consent-banner/tos-consent-banner.component.spec.ts

@@ -2,8 +2,7 @@ import { Store } from '@ngxs/store';
 
 import { MockComponent } from 'ng-mocks';
 
-import { of } from 'rxjs';
-
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
@@ -15,32 +14,26 @@ import { IconComponent } from '@shared/components';
 import { TosConsentBannerComponent } from './tos-consent-banner.component';
 
 import { TranslationServiceMock } from '@testing/mocks/translation.service.mock';
-import { OSFTestingModule, OSFTestingStoreModule } from '@testing/osf.testing.module';
+import { OSFTestingStoreModule } from '@testing/osf.testing.module';
 import { provideMockStore } from '@testing/providers/store-provider.mock';
-import { ToastServiceMockBuilder } from '@testing/providers/toast-provider.mock';
 
-describe('TosConsentBannerComponent', () => {
- let component: TosConsentBannerComponent;
+describe('Component: Tos Consent Banner', () => {
  let fixture: ComponentFixture<TosConsentBannerComponent>;
- let store: jest.Mocked<Store>;
- let toastServiceMock: ReturnType<ToastServiceMockBuilder['build']>;
+ let store: Store;
 
  beforeEach(async () => {
  await TestBed.configureTestingModule({
- imports: [TosConsentBannerComponent, OSFTestingStoreModule, OSFTestingModule, MockComponent(IconComponent)],
+ imports: [OSFTestingStoreModule, TosConsentBannerComponent, MockComponent(IconComponent)],
  providers: [
  provideMockStore({
- signals: [{ selector: UserSelectors.getCurrentUser, value: MOCK_USER }],
+ signals: [{ selector: UserSelectors.getCurrentUser, value: signal(MOCK_USER) }],
  }),
  TranslationServiceMock,
  ],
  }).compileComponents();
 
  fixture = TestBed.createComponent(TosConsentBannerComponent);
- store = TestBed.inject(Store) as jest.Mocked<Store>;
- component = fixture.componentInstance;
- store.dispatch = jest.fn().mockReturnValue(of(undefined));
- toastServiceMock = ToastServiceMockBuilder.create().build();
+ store = TestBed.inject(Store);
  fixture.detectChanges();
  });
 
@@ -58,6 +51,7 @@ describe('TosConsentBannerComponent', () => {
  });
 
  it('should dispatch AcceptTermsOfServiceByUser action when "Continue" is clicked', () => {
+ jest.spyOn(store, 'dispatch');
  const checkboxInput = fixture.debugElement.query(By.css('p-checkbox input')).nativeElement;
  checkboxInput.click();
  fixture.detectChanges();
@@ -67,15 +61,5 @@ describe('TosConsentBannerComponent', () => {
  fixture.detectChanges();
 
  expect(store.dispatch).toHaveBeenCalledWith(new AcceptTermsOfServiceByUser());
- expect(toastServiceMock.showError).not.toHaveBeenCalled();
- });
-
- it('should show toast banner if acceptedTermsOfService is false and "Continue" is clicked', () => {
- component.acceptedTermsOfService.set(false);
- const continueButton = fixture.debugElement.query(By.css('p-button button')).nativeElement;
- continueButton.disabled = false;
- continueButton.click();
- fixture.detectChanges();
- expect(component.errorMessage).toEqual('toast.tos-consent.error-message');
  });
 });

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

@@ -0,0 +1,68 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Checkbox } from 'primeng/checkbox';
+import { Message } from 'primeng/message';
+
+import { Component, computed, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+
+import { AcceptTermsOfServiceByUser, UserSelectors } from '@core/store/user';
+import { IconComponent } from '@osf/shared/components';
+
+/**
+ * TosConsentBannerComponent displays a Terms of Service (ToS) consent banner for users who haven't accepted yet.
+ * It includes a checkbox, error handling, and dispatches an action to accept the ToS upon confirmation.
+ *
+ * This component integrates:
+ * - PrimeNG UI elements (`Checkbox`, `Button`, `Message`)
+ * - i18n translation support
+ * - NGXS store selectors and actions
+ * - Signal-based reactivity and computed values
+ * - Toast notifications for user feedback
+ *
+ * @component
+ * @example
+ * <osf-tos-consent-banner></osf-tos-consent-banner>
+ */
+@Component({
+ selector: 'osf-tos-consent-banner',
+ imports: [FormsModule, Checkbox, Button, Message, TranslatePipe, IconComponent, RouterLink],
+ templateUrl: './tos-consent-banner.component.html',
+})
+export class TosConsentBannerComponent {
+ /**
+ * NGXS dispatch map for the AcceptTermsOfServiceByUser action.
+ */
+ readonly actions = createDispatchMap({ acceptTermsOfServiceByUser: AcceptTermsOfServiceByUser });
+
+ /**
+ * Signal of the current user from NGXS UserSelectors.
+ */
+ readonly currentUser = select(UserSelectors.getCurrentUser);
+
+ /**
+ * Local signal tracking whether the user has accepted the Terms of Service via checkbox.
+ */
+ acceptedTermsOfService = signal(false);
+
+ /**
+ * Computed signal indicating whether the user has already accepted the Terms of Service.
+ */
+ readonly acceptedTermsOfServiceChange = computed(() => {
+ const user = this.currentUser();
+ return user?.acceptedTermsOfService ?? false;
+ });
+
+ /**
+ * Triggered when the user clicks the Continue button.
+ * - Shows an error toast if checkbox is not checked.
+ * - Dispatches `AcceptTermsOfServiceByUser` action otherwise.
+ */
+ onContinue() {
+ this.actions.acceptTermsOfServiceByUser();
+ }
+}

src/app/features/analytics/analytics.component.spec.ts

@@ -2,6 +2,7 @@ import { MockComponents, MockProvider } from 'ng-mocks';
 
 import { of } from 'rxjs';
 
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -24,7 +25,7 @@ import { ActivatedRouteMockBuilder } from '@testing/providers/route-provider.moc
 import { RouterMockBuilder } from '@testing/providers/router-provider.mock';
 import { provideMockStore } from '@testing/providers/store-provider.mock';
 
-describe.skip('AnalyticsComponent', () => {
+describe('Component: Analytics', () => {
  let component: AnalyticsComponent;
  let fixture: ComponentFixture<AnalyticsComponent>;
  let routerMock: ReturnType<RouterMockBuilder['build']>;
@@ -69,11 +70,11 @@ describe.skip('AnalyticsComponent', () => {
  { selector: AnalyticsSelectors.isMetricsError, value: false },
  ],
  signals: [
- { selector: metricsSelector, value: metrics },
- { selector: relatedCountsSelector, value: relatedCounts },
- { selector: AnalyticsSelectors.isMetricsLoading, value: false },
- { selector: AnalyticsSelectors.isRelatedCountsLoading, value: false },
- { selector: AnalyticsSelectors.isMetricsError, value: false },
+ { selector: metricsSelector, value: signal(metrics) },
+ { selector: relatedCountsSelector, value: signal(relatedCounts) },
+ { selector: AnalyticsSelectors.isMetricsLoading, value: signal(false) },
+ { selector: AnalyticsSelectors.isRelatedCountsLoading, value: signal(false) },
+ { selector: AnalyticsSelectors.isMetricsError, value: signal(false) },
  ],
  }),
  { provide: IS_WEB, useValue: of(true) },
@@ -86,11 +87,6 @@ describe.skip('AnalyticsComponent', () => {
  component = fixture.componentInstance;
  });
 
- it('should create', () => {
- fixture.detectChanges();
- expect(component).toBeTruthy();
- });
-
  it('should set selectedRange via onRangeChange', () => {
  fixture.detectChanges();
  component.onRangeChange('month');

src/app/features/home/components/index.ts

@@ -1 +1 @@
-export { TosConsentBannerComponent } from './tos-consent-banner/tos-consent-banner.component';
+export { TosConsentBannerComponent } from '../../../core/components/osf-banners/tos-consent-banner/tos-consent-banner.component';