From b92a8aeaed1ade62b835e405f2085c95934d3eed Mon Sep 17 00:00:00 2001
From: "andrii.siuta" <andriisiuta@gmail.com>
Date: Fri, 28 Mar 2025 11:19:30 +0200
Subject: [PATCH] feat(notifications): add ui and responsive design

---
 .../notifications.component.html              | 76 +++++++++++++++++++
 .../notifications.component.scss              | 45 +++++++++++
 .../notifications.component.spec.ts           | 22 ++++++
 .../notifications/notifications.component.ts  | 16 ++++
 src/app/features/settings/settings.routes.ts  |  7 ++
 5 files changed, 166 insertions(+)
 create mode 100644 src/app/features/settings/notifications/notifications.component.html
 create mode 100644 src/app/features/settings/notifications/notifications.component.scss
 create mode 100644 src/app/features/settings/notifications/notifications.component.spec.ts
 create mode 100644 src/app/features/settings/notifications/notifications.component.ts

diff --git a/src/app/features/settings/notifications/notifications.component.html b/src/app/features/settings/notifications/notifications.component.html
new file mode 100644
index 000000000..5210f9da8
--- /dev/null
+++ b/src/app/features/settings/notifications/notifications.component.html
@@ -0,0 +1,76 @@
+<osf-sub-header
+  [showButton]="false"
+  [title]="'Notifications'"
+  [icon]="'settings'"
+/>
+
+<section class="flex flex-column xl:p-4 md:p-3 p-2 bg-white flex-1 gap-4">
+  <section class="notification-item flex flex-column gap-4">
+    <h2>Configure Email Preferences</h2>
+
+    <div class="flex flex-column gap-3">
+      <div class="flex gap-2">
+        <p-checkbox inputId="v1"> </p-checkbox>
+
+        <div class="flex flex-column gap-1">
+          <label for="v1" class="mb-0 font-bold notification-item-label">
+            Open Science Framework General
+          </label>
+
+          <div class="notification-item-description">
+            Receive general notifications about the OSF every 2-3 weeks.
+          </div>
+        </div>
+      </div>
+
+      <div class="flex gap-2">
+        <p-checkbox inputId="v2"> </p-checkbox>
+
+        <div class="flex flex-column gap-1">
+          <label for="v2" class="mb-0 font-bold notification-item-label">
+            Open Science Framework Help
+          </label>
+
+          <div class="notification-item-description">
+            Receive helpful tips on how to make the most of the OSF, up to once
+            per week.
+          </div>
+        </div>
+      </div>
+
+      <div class="flex justify-content-end">
+        <p-button [disabled]="true" label="Save" size="large"> </p-button>
+      </div>
+    </div>
+  </section>
+
+  <section class="notification-item flex flex-column gap-4">
+    <h2>Configure Notification Preferences</h2>
+
+    <div>
+      Note: Transactional and administrative service emails will still be sent.
+    </div>
+
+    <section class="notification-configuration">
+      <div>Replies to your comments</div>
+
+      <p-dropdown class="dropdown"> </p-dropdown>
+
+      <div>Comments added</div>
+
+      <p-dropdown class="dropdown"> </p-dropdown>
+
+      <div>Files updated</div>
+
+      <p-dropdown class="dropdown"> </p-dropdown>
+
+      <div>Mentions added</div>
+
+      <p-dropdown class="dropdown"> </p-dropdown>
+
+      <div>Preprint submissions updated</div>
+
+      <p-dropdown class="dropdown"> </p-dropdown>
+    </section>
+  </section>
+</section>
diff --git a/src/app/features/settings/notifications/notifications.component.scss b/src/app/features/settings/notifications/notifications.component.scss
new file mode 100644
index 000000000..4e31a193a
--- /dev/null
+++ b/src/app/features/settings/notifications/notifications.component.scss
@@ -0,0 +1,45 @@
+@use "assets/styles/variables" as var;
+
+:host {
+  color: var.$dark-blue-1;
+}
+
+.notification-item {
+  padding: 24px;
+  border: 1px solid var.$grey-2;
+  border-radius: 8px;
+
+  &-label {
+    color: var.$dark-blue-1;
+  }
+
+  &-description {
+    color: var.$dark-blue-1;
+  }
+
+  @media (max-width: 599.99px) {
+    padding: 12px;
+  }
+}
+
+.notification-configuration {
+  display: grid;
+  grid-gap: 12px;
+  align-items: center;
+  grid-template-columns: 0.5fr 2fr;
+  grid-template-rows: repeat(5, 1fr);
+
+  .dropdown {
+    width: 50%;
+  }
+
+  @media (max-width: 599.99px) {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(10, 1fr);
+    grid-row-gap: 0;
+
+    .dropdown {
+      width: 100%;
+    }
+  }
+}
diff --git a/src/app/features/settings/notifications/notifications.component.spec.ts b/src/app/features/settings/notifications/notifications.component.spec.ts
new file mode 100644
index 000000000..b95c7c3f2
--- /dev/null
+++ b/src/app/features/settings/notifications/notifications.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationsComponent } from './notifications.component';
+
+describe('NotificationsComponent', () => {
+  let component: NotificationsComponent;
+  let fixture: ComponentFixture<NotificationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NotificationsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NotificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/settings/notifications/notifications.component.ts b/src/app/features/settings/notifications/notifications.component.ts
new file mode 100644
index 000000000..675471cc4
--- /dev/null
+++ b/src/app/features/settings/notifications/notifications.component.ts
@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
+import { Checkbox } from 'primeng/checkbox';
+import { Button } from 'primeng/button';
+import { DropdownModule } from 'primeng/dropdown';
+
+@Component({
+  selector: 'osf-notifications',
+  imports: [SubHeaderComponent, Checkbox, Button, DropdownModule],
+  templateUrl: './notifications.component.html',
+  styleUrl: './notifications.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationsComponent {
+  @HostBinding('class') classes = 'flex flex-1 flex-column';
+}
diff --git a/src/app/features/settings/settings.routes.ts b/src/app/features/settings/settings.routes.ts
index affc73cdc..87199c38c 100644
--- a/src/app/features/settings/settings.routes.ts
+++ b/src/app/features/settings/settings.routes.ts
@@ -41,6 +41,13 @@ export const settingsRoutes: Routes = [
           },
         ],
       },
+      {
+        path: 'notifications',
+        loadComponent: () =>
+          import('./notifications/notifications.component').then(
+            (mod) => mod.NotificationsComponent,
+          ),
+      },
     ],
   },
 ];