From db49641f5b7c7c2184ff99c9337f8857aa9e42b2 Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Fri, 13 Jun 2025 20:44:39 +0300
Subject: [PATCH 01/12] feat(submit-preprint-state): Implemented state for
 submit preprint

---
 .../preprints/store/submit-preprint/index.ts   |  4 ++++
 .../submit-preprint/submit-preprint.actions.ts |  7 +++++++
 .../submit-preprint/submit-preprint.model.ts   |  5 +++++
 .../submit-preprint.selectors.ts               | 10 ++++++++++
 .../submit-preprint/submit-preprint.state.ts   | 18 ++++++++++++++++++
 5 files changed, 44 insertions(+)
 create mode 100644 src/app/features/preprints/store/submit-preprint/index.ts
 create mode 100644 src/app/features/preprints/store/submit-preprint/submit-preprint.actions.ts
 create mode 100644 src/app/features/preprints/store/submit-preprint/submit-preprint.model.ts
 create mode 100644 src/app/features/preprints/store/submit-preprint/submit-preprint.selectors.ts
 create mode 100644 src/app/features/preprints/store/submit-preprint/submit-preprint.state.ts

diff --git a/src/app/features/preprints/store/submit-preprint/index.ts b/src/app/features/preprints/store/submit-preprint/index.ts
new file mode 100644
index 000000000..cdae9c5e8
--- /dev/null
+++ b/src/app/features/preprints/store/submit-preprint/index.ts
@@ -0,0 +1,4 @@
+export * from './submit-preprint.actions';
+export * from './submit-preprint.model';
+export * from './submit-preprint.selectors';
+export * from './submit-preprint.state';
diff --git a/src/app/features/preprints/store/submit-preprint/submit-preprint.actions.ts b/src/app/features/preprints/store/submit-preprint/submit-preprint.actions.ts
new file mode 100644
index 000000000..a7235bac2
--- /dev/null
+++ b/src/app/features/preprints/store/submit-preprint/submit-preprint.actions.ts
@@ -0,0 +1,7 @@
+import { StringOrNull } from '@core/helpers';
+
+export class SetSelectedPreprintProviderId {
+  static readonly type = '[Submit Preprint] Set Selected Preprint Provider Id';
+
+  constructor(public id: StringOrNull) {}
+}
diff --git a/src/app/features/preprints/store/submit-preprint/submit-preprint.model.ts b/src/app/features/preprints/store/submit-preprint/submit-preprint.model.ts
new file mode 100644
index 000000000..4fa5cc4b4
--- /dev/null
+++ b/src/app/features/preprints/store/submit-preprint/submit-preprint.model.ts
@@ -0,0 +1,5 @@
+import { StringOrNull } from '@core/helpers';
+
+export interface SubmitPreprintStateModel {
+  selectedProviderId: StringOrNull;
+}
diff --git a/src/app/features/preprints/store/submit-preprint/submit-preprint.selectors.ts b/src/app/features/preprints/store/submit-preprint/submit-preprint.selectors.ts
new file mode 100644
index 000000000..ea13a8568
--- /dev/null
+++ b/src/app/features/preprints/store/submit-preprint/submit-preprint.selectors.ts
@@ -0,0 +1,10 @@
+import { Selector } from '@ngxs/store';
+
+import { SubmitPreprintState, SubmitPreprintStateModel } from '@osf/features/preprints/store/submit-preprint';
+
+export class SubmitPreprintSelectors {
+  @Selector([SubmitPreprintState])
+  static getSelectedProviderId(state: SubmitPreprintStateModel) {
+    return state.selectedProviderId;
+  }
+}
diff --git a/src/app/features/preprints/store/submit-preprint/submit-preprint.state.ts b/src/app/features/preprints/store/submit-preprint/submit-preprint.state.ts
new file mode 100644
index 000000000..3c89163f4
--- /dev/null
+++ b/src/app/features/preprints/store/submit-preprint/submit-preprint.state.ts
@@ -0,0 +1,18 @@
+import { Action, State, StateContext } from '@ngxs/store';
+
+import { Injectable } from '@angular/core';
+
+import { SetSelectedPreprintProviderId, SubmitPreprintStateModel } from './';
+
+@State<SubmitPreprintStateModel>({
+  name: 'submitPreprint',
+})
+@Injectable()
+export class SubmitPreprintState {
+  @Action(SetSelectedPreprintProviderId)
+  setSelectedPreprintProviderId(ctx: StateContext<SubmitPreprintStateModel>, action: SetSelectedPreprintProviderId) {
+    ctx.patchState({
+      selectedProviderId: action.id,
+    });
+  }
+}

From 14acced7b74190f8d896fdd8d38cc204df8ab9ed Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Fri, 13 Jun 2025 20:47:31 +0300
Subject: [PATCH 02/12] feat(select-preprint-state): Implemented select service
 page with api integration

---
 .../preprint-services.component.ts            |  4 +-
 .../preprints/constants/preprints.routes.ts   |  9 ++++
 .../preprints/mappers/preprints.mapper.ts     | 20 +++----
 .../preprints/models/preprints.models.ts      |  5 +-
 .../landing/preprints-landing.component.html  |  1 +
 .../select-preprint-service.component.html    | 54 +++++++++++++++++++
 .../select-preprint-service.component.scss    | 15 ++++++
 .../select-preprint-service.component.spec.ts | 22 ++++++++
 .../select-preprint-service.component.ts      | 53 ++++++++++++++++++
 .../preprints/services/preprints.service.ts   | 20 +++++--
 .../store/preprints/preprints.actions.ts      |  4 ++
 .../store/preprints/preprints.model.ts        |  5 +-
 .../store/preprints/preprints.selectors.ts    | 10 ++++
 .../store/preprints/preprints.state.ts        | 25 +++++++++
 14 files changed, 229 insertions(+), 18 deletions(-)
 create mode 100644 src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
 create mode 100644 src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.scss
 create mode 100644 src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.spec.ts
 create mode 100644 src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts

diff --git a/src/app/features/preprints/components/preprint-services/preprint-services.component.ts b/src/app/features/preprints/components/preprint-services/preprint-services.component.ts
index 565d7f54a..5e7b99120 100644
--- a/src/app/features/preprints/components/preprint-services/preprint-services.component.ts
+++ b/src/app/features/preprints/components/preprint-services/preprint-services.component.ts
@@ -3,7 +3,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
-import { PreprintProviderToAdvertise } from '@osf/features/preprints/models';
+import { PreprintProviderShortInfo } from '@osf/features/preprints/models';
 
 @Component({
   selector: 'osf-preprint-services',
@@ -13,5 +13,5 @@ import { PreprintProviderToAdvertise } from '@osf/features/preprints/models';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PreprintServicesComponent {
-  preprintProvidersToAdvertise = input.required<PreprintProviderToAdvertise[]>();
+  preprintProvidersToAdvertise = input.required<PreprintProviderShortInfo[]>();
 }
diff --git a/src/app/features/preprints/constants/preprints.routes.ts b/src/app/features/preprints/constants/preprints.routes.ts
index bdca37437..4832d5795 100644
--- a/src/app/features/preprints/constants/preprints.routes.ts
+++ b/src/app/features/preprints/constants/preprints.routes.ts
@@ -7,6 +7,7 @@ import { PreprintsState } from '@osf/features/preprints/store/preprints';
 import { PreprintsDiscoverState } from '@osf/features/preprints/store/preprints-discover';
 import { PreprintsResourcesFiltersState } from '@osf/features/preprints/store/preprints-resources-filters';
 import { PreprintsResourcesFiltersOptionsState } from '@osf/features/preprints/store/preprints-resources-filters-options';
+import { SubmitPreprintState } from '@osf/features/preprints/store/submit-preprint';
 
 export const preprintsRoutes: Routes = [
   {
@@ -18,6 +19,7 @@ export const preprintsRoutes: Routes = [
         PreprintsDiscoverState,
         PreprintsResourcesFiltersState,
         PreprintsResourcesFiltersOptionsState,
+        SubmitPreprintState,
       ]),
     ],
     children: [
@@ -47,6 +49,13 @@ export const preprintsRoutes: Routes = [
             (c) => c.PreprintProviderDiscoverComponent
           ),
       },
+      {
+        path: 'select',
+        loadComponent: () =>
+          import('@osf/features/preprints/pages/select-preprint-service/select-preprint-service.component').then(
+            (c) => c.SelectPreprintServiceComponent
+          ),
+      },
     ],
   },
 ];
diff --git a/src/app/features/preprints/mappers/preprints.mapper.ts b/src/app/features/preprints/mappers/preprints.mapper.ts
index 5370489cb..50ac284c5 100644
--- a/src/app/features/preprints/mappers/preprints.mapper.ts
+++ b/src/app/features/preprints/mappers/preprints.mapper.ts
@@ -1,7 +1,7 @@
 import {
   PreprintProviderDetails,
   PreprintProviderDetailsGetResponse,
-  PreprintProviderToAdvertise,
+  PreprintProviderShortInfo,
   Subject,
   SubjectGetResponse,
 } from '@osf/features/preprints/models';
@@ -32,16 +32,16 @@ export class PreprintsMapper {
     };
   }
 
-  static fromPreprintProvidersToAdvertiseGetResponse(
+  static toPreprintProviderShortInfoFromGetResponse(
     response: PreprintProviderDetailsGetResponse[]
-  ): PreprintProviderToAdvertise[] {
-    return response
-      .filter((item) => !item.id.includes('osf'))
-      .map((item) => ({
-        id: item.id,
-        name: item.attributes.name,
-        whiteWideImageUrl: item.attributes.assets.wide_white,
-      }));
+  ): PreprintProviderShortInfo[] {
+    return response.map((item) => ({
+      id: item.id,
+      descriptionHtml: item.attributes.description,
+      name: item.attributes.name,
+      whiteWideImageUrl: item.attributes.assets?.wide_white,
+      squareColorNoTransparentImageUrl: item.attributes.assets?.square_color_no_transparent,
+    }));
   }
 
   static fromSubjectsGetResponse(providerId: string, response: SubjectGetResponse[]): Subject[] {
diff --git a/src/app/features/preprints/models/preprints.models.ts b/src/app/features/preprints/models/preprints.models.ts
index 3c6fba4a6..031988711 100644
--- a/src/app/features/preprints/models/preprints.models.ts
+++ b/src/app/features/preprints/models/preprints.models.ts
@@ -26,10 +26,12 @@ export interface PreprintProviderDetails {
   iri: string;
 }
 
-export interface PreprintProviderToAdvertise {
+export interface PreprintProviderShortInfo {
   id: string;
   name: string;
+  descriptionHtml: string;
   whiteWideImageUrl: string;
+  squareColorNoTransparentImageUrl: string;
 }
 
 export interface Subject {
@@ -53,6 +55,7 @@ export interface PreprintProviderDetailsGetResponse {
     preprint_word: string;
     assets: {
       wide_white: string;
+      square_color_no_transparent: string;
     };
     allow_submissions: boolean;
   };
diff --git a/src/app/features/preprints/pages/landing/preprints-landing.component.html b/src/app/features/preprints/pages/landing/preprints-landing.component.html
index 5021901d2..d20f27ed9 100644
--- a/src/app/features/preprints/pages/landing/preprints-landing.component.html
+++ b/src/app/features/preprints/pages/landing/preprints-landing.component.html
@@ -11,6 +11,7 @@ <h1>{{ 'preprints.title' | translate }}</h1>
         class="ml-auto w-full md:w-auto"
         styleClass="w-full md:w-auto"
         [label]="'preprints.addPreprint' | translate: { preprintWord: osfPreprintProvider()?.preprintWord }"
+        routerLink="/preprints/select"
         (click)="addPreprint()"
       />
     }
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
new file mode 100644
index 000000000..c363dd66a
--- /dev/null
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
@@ -0,0 +1,54 @@
+<osf-sub-header title="Add A Preprint" />
+
+<section class="flex flex-1 flex-column bg-white p-3 md:p-4">
+  <h2>Select a preprint service</h2>
+  <p class="m-t-12">
+    <span>
+      A preprint is a version of a scholarly or scientific paper that is posted online before it has undergone formal
+      peer review and published in a scientific journal.
+    </span>
+    <a href="https://help.osf.io/article/376-preprints-home-page">Learn more</a>
+  </p>
+  <section class="m-t-48 grid justify-content-center align-items-start gap-4">
+    @if (areProvidersLoading()) {
+      @for (_ of skeletonArray; track $index) {
+        <p-card>
+          <div class="h-10rem w-13rem grid-item flex flex-column align-items-center justify-content-end">
+            <p-skeleton width="60px" height="60px" />
+            <p-skeleton class="m-t-12" width="5rem" height="1rem" />
+            <p-skeleton class="m-t-24" width="8rem" height="2rem" />
+          </div>
+        </p-card>
+      }
+    } @else {
+      @for (provider of preprintProvidersAllowingSubmissions(); track $index) {
+        <p-card
+          [ngClass]="{ active: selectedProviderId() === provider.id }"
+          [pTooltip]="descriptionTooltip"
+          tooltipPosition="bottom"
+          autoHide="false"
+          (click)="selectDeselectProvider(provider)"
+        >
+          <div class="h-10rem w-13rem grid-item flex flex-column align-items-center justify-content-end">
+            @if (provider.squareColorNoTransparentImageUrl) {
+              <img height="60" [src]="provider.squareColorNoTransparentImageUrl" alt="Provider Logo" />
+            }
+
+            <h4 class="m-t-12">{{ provider.name }}</h4>
+            <p-button
+              class="m-t-24"
+              [label]="selectedProviderId() === provider.id ? 'Deselect' : 'Select'"
+              severity="secondary"
+            />
+          </div>
+        </p-card>
+        <ng-template #descriptionTooltip>
+          <div [innerHTML]="provider.descriptionHtml | decodeHtml"></div>
+        </ng-template>
+      }
+    }
+  </section>
+  <section class="m-t-48 flex flex-row justify-content-end">
+    <p-button label="Next" (click)="nextStep()" [disabled]="!selectedProviderId()" />
+  </section>
+</section>
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.scss b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.scss
new file mode 100644
index 000000000..51241f5b3
--- /dev/null
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.scss
@@ -0,0 +1,15 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+.grid-item {
+  width: mix.rem(260px);
+  height: mix.rem(200px);
+}
+
+.active,
+p-card:hover {
+  --p-card-background: var(--bg-blue-3);
+  cursor: pointer;
+
+  --p-button-secondary-background: var(--white);
+}
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.spec.ts b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.spec.ts
new file mode 100644
index 000000000..d78af628a
--- /dev/null
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectPreprintServiceComponent } from './select-preprint-service.component';
+
+describe('SelectPreprintServiceComponent', () => {
+  let component: SelectPreprintServiceComponent;
+  let fixture: ComponentFixture<SelectPreprintServiceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SelectPreprintServiceComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SelectPreprintServiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts
new file mode 100644
index 000000000..13b8302a7
--- /dev/null
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts
@@ -0,0 +1,53 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { Skeleton } from 'primeng/skeleton';
+import { Tooltip } from 'primeng/tooltip';
+
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, HostBinding, OnInit } from '@angular/core';
+
+import { PreprintProviderShortInfo } from '@osf/features/preprints/models';
+import { GetPreprintProvidersAllowingSubmissions, PreprintsSelectors } from '@osf/features/preprints/store/preprints';
+import { SetSelectedPreprintProviderId, SubmitPreprintSelectors } from '@osf/features/preprints/store/submit-preprint';
+import { SubHeaderComponent } from '@shared/components';
+import { DecodeHtmlPipe } from '@shared/pipes';
+
+@Component({
+  selector: 'osf-select-preprint-service',
+  imports: [SubHeaderComponent, Card, Button, NgClass, Tooltip, DecodeHtmlPipe, Skeleton],
+  templateUrl: './select-preprint-service.component.html',
+  styleUrl: './select-preprint-service.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectPreprintServiceComponent implements OnInit {
+  @HostBinding('class') classes = 'flex-1 flex flex-column w-full';
+
+  private actions = createDispatchMap({
+    getPreprintProvidersAllowingSubmissions: GetPreprintProvidersAllowingSubmissions,
+    setSelectedPreprintProviderId: SetSelectedPreprintProviderId,
+  });
+
+  preprintProvidersAllowingSubmissions = select(PreprintsSelectors.getPreprintProvidersAllowingSubmissions);
+  areProvidersLoading = select(PreprintsSelectors.arePreprintProvidersAllowingSubmissionsLoading);
+  selectedProviderId = select(SubmitPreprintSelectors.getSelectedProviderId);
+  skeletonArray = Array.from({ length: 8 }, (_, i) => i + 1);
+
+  ngOnInit(): void {
+    this.actions.getPreprintProvidersAllowingSubmissions();
+  }
+
+  selectDeselectProvider(provider: PreprintProviderShortInfo) {
+    if (provider.id === this.selectedProviderId()) {
+      this.actions.setSelectedPreprintProviderId(null);
+      return;
+    }
+
+    this.actions.setSelectedPreprintProviderId(provider.id);
+  }
+
+  nextStep() {
+    //[RNi] TODO: redirect to first step of submitting preprint
+  }
+}
diff --git a/src/app/features/preprints/services/preprints.service.ts b/src/app/features/preprints/services/preprints.service.ts
index d83cce72b..9d5981aa8 100644
--- a/src/app/features/preprints/services/preprints.service.ts
+++ b/src/app/features/preprints/services/preprints.service.ts
@@ -8,7 +8,7 @@ import { PreprintsMapper } from '@osf/features/preprints/mappers';
 import {
   PreprintProviderDetails,
   PreprintProviderDetailsGetResponse,
-  PreprintProviderToAdvertise,
+  PreprintProviderShortInfo,
   Subject,
   SubjectGetResponse,
 } from '@osf/features/preprints/models';
@@ -32,14 +32,28 @@ export class PreprintsService {
       );
   }
 
-  getPreprintProvidersToAdvertise(): Observable<PreprintProviderToAdvertise[]> {
+  getPreprintProvidersToAdvertise(): Observable<PreprintProviderShortInfo[]> {
     return this.jsonApiService
       .get<
         JsonApiResponse<PreprintProviderDetailsGetResponse[], null>
       >(`${this.baseUrl}?filter[advertise_on_discover_page]=true&reload=true`)
       .pipe(
         map((response) => {
-          return PreprintsMapper.fromPreprintProvidersToAdvertiseGetResponse(response.data);
+          return PreprintsMapper.toPreprintProviderShortInfoFromGetResponse(
+            response.data.filter((item) => !item.id.includes('osf'))
+          );
+        })
+      );
+  }
+
+  getPreprintProvidersAllowingSubmissions(): Observable<PreprintProviderShortInfo[]> {
+    return this.jsonApiService
+      .get<
+        JsonApiResponse<PreprintProviderDetailsGetResponse[], null>
+      >(`${this.baseUrl}?filter[allow_submissions]=true`)
+      .pipe(
+        map((response) => {
+          return PreprintsMapper.toPreprintProviderShortInfoFromGetResponse(response.data);
         })
       );
   }
diff --git a/src/app/features/preprints/store/preprints/preprints.actions.ts b/src/app/features/preprints/store/preprints/preprints.actions.ts
index 5fc7c95fb..9254138a9 100644
--- a/src/app/features/preprints/store/preprints/preprints.actions.ts
+++ b/src/app/features/preprints/store/preprints/preprints.actions.ts
@@ -13,3 +13,7 @@ export class GetHighlightedSubjectsByProviderId {
 export class GetPreprintProvidersToAdvertise {
   static readonly type = '[Preprints] Get Preprint Providers To Advertise';
 }
+
+export class GetPreprintProvidersAllowingSubmissions {
+  static readonly type = '[Preprints] Get Preprint Providers That Allows Submissions';
+}
diff --git a/src/app/features/preprints/store/preprints/preprints.model.ts b/src/app/features/preprints/store/preprints/preprints.model.ts
index 4a39aca96..d9bc5680d 100644
--- a/src/app/features/preprints/store/preprints/preprints.model.ts
+++ b/src/app/features/preprints/store/preprints/preprints.model.ts
@@ -1,8 +1,9 @@
-import { PreprintProviderDetails, PreprintProviderToAdvertise, Subject } from '@osf/features/preprints/models';
+import { PreprintProviderDetails, PreprintProviderShortInfo, Subject } from '@osf/features/preprints/models';
 import { AsyncStateModel } from '@shared/models';
 
 export interface PreprintsStateModel {
   preprintProvidersDetails: AsyncStateModel<PreprintProviderDetails[]>;
-  preprintProvidersToAdvertise: AsyncStateModel<PreprintProviderToAdvertise[]>;
+  preprintProvidersToAdvertise: AsyncStateModel<PreprintProviderShortInfo[]>;
+  preprintProvidersAllowingSubmissions: AsyncStateModel<PreprintProviderShortInfo[]>;
   highlightedSubjectsForProvider: AsyncStateModel<Subject[]>;
 }
diff --git a/src/app/features/preprints/store/preprints/preprints.selectors.ts b/src/app/features/preprints/store/preprints/preprints.selectors.ts
index 29f3e15a0..7c3ac8de3 100644
--- a/src/app/features/preprints/store/preprints/preprints.selectors.ts
+++ b/src/app/features/preprints/store/preprints/preprints.selectors.ts
@@ -19,6 +19,16 @@ export class PreprintsSelectors {
     return state.preprintProvidersToAdvertise.data;
   }
 
+  @Selector([PreprintsState])
+  static getPreprintProvidersAllowingSubmissions(state: PreprintsStateModel) {
+    return state.preprintProvidersAllowingSubmissions.data;
+  }
+
+  @Selector([PreprintsState])
+  static arePreprintProvidersAllowingSubmissionsLoading(state: PreprintsStateModel) {
+    return state.preprintProvidersAllowingSubmissions.isLoading;
+  }
+
   @Selector([PreprintsState])
   static getHighlightedSubjectsForProvider(state: PreprintsStateModel) {
     return state.highlightedSubjectsForProvider.data;
diff --git a/src/app/features/preprints/store/preprints/preprints.state.ts b/src/app/features/preprints/store/preprints/preprints.state.ts
index 45cc5dba1..d7a0b237a 100644
--- a/src/app/features/preprints/store/preprints/preprints.state.ts
+++ b/src/app/features/preprints/store/preprints/preprints.state.ts
@@ -10,6 +10,7 @@ import { PreprintsService } from '@osf/features/preprints/services';
 import {
   GetHighlightedSubjectsByProviderId,
   GetPreprintProviderById,
+  GetPreprintProvidersAllowingSubmissions,
   GetPreprintProvidersToAdvertise,
 } from '@osf/features/preprints/store/preprints/preprints.actions';
 
@@ -28,6 +29,11 @@ import { PreprintsStateModel } from './';
       isLoading: false,
       error: null,
     },
+    preprintProvidersAllowingSubmissions: {
+      data: [],
+      isLoading: false,
+      error: null,
+    },
     highlightedSubjectsForProvider: {
       data: [],
       isLoading: false,
@@ -91,6 +97,25 @@ export class PreprintsState {
     );
   }
 
+  @Action(GetPreprintProvidersAllowingSubmissions)
+  getPreprintProvidersAllowingSubmissions(ctx: StateContext<PreprintsStateModel>) {
+    ctx.setState(patch({ preprintProvidersAllowingSubmissions: patch({ isLoading: true }) }));
+
+    return this.#preprintsService.getPreprintProvidersAllowingSubmissions().pipe(
+      tap((data) => {
+        ctx.setState(
+          patch({
+            preprintProvidersAllowingSubmissions: patch({
+              data: data,
+              isLoading: false,
+            }),
+          })
+        );
+      }),
+      catchError((error) => this.handleError(ctx, 'preprintProvidersAllowingSubmissions', error))
+    );
+  }
+
   @Action(GetHighlightedSubjectsByProviderId)
   getHighlightedSubjectsByProviderId(
     ctx: StateContext<PreprintsStateModel>,

From 6d65b1bc78e7000f2138b9917acfc45323a6d331 Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Fri, 13 Jun 2025 22:55:05 +0300
Subject: [PATCH 03/12] feat(select-preprint-service): Enhance UI with dynamic
 translations

---
 .../preprint-provider-hero.component.html     |  6 +++--
 .../preprint-provider-hero.component.ts       | 13 +++++++++--
 .../landing/preprints-landing.component.html  |  4 ++--
 .../landing/preprints-landing.component.ts    |  2 ++
 .../select-preprint-service.component.html    | 23 +++++++++++++------
 .../select-preprint-service.component.ts      |  4 +++-
 src/assets/i18n/en.json                       | 13 ++++++++++-
 7 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
index 117f77e01..9b3122b6c 100644
--- a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
+++ b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
@@ -21,7 +21,7 @@ <h1 class="preprint-provider-name">{{ preprintProvider()!.name }}</h1>
       <p-button
         class="ml-auto w-full md:w-auto preprints-branding-button"
         styleClass="w-full md:w-auto"
-        [label]="'preprints.addPreprint' | translate: { preprintWord: preprintProvider()!.preprintWord }"
+        [label]="'preprints.addPreprint' | translate: { preprintWord: preprintProvider()!.preprintWord } | titlecase"
         (click)="addPreprint()"
       />
     }
@@ -56,7 +56,9 @@ <h1 class="preprint-provider-name">{{ preprintProvider()!.name }}</h1>
 
     <osf-search-input
       class="w-full"
-      [placeholder]="'preprints.searchPlaceholder' | translate"
+      [placeholder]="
+        'preprints.searchPlaceholder' | translate: { preprintWord: preprintProvider()!.preprintWord } | titlecase
+      "
       [control]="searchControl()"
       (triggerSearch)="onTriggerSearch($event)"
     />
diff --git a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts
index 034e63039..3d9c89417 100644
--- a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts
+++ b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts
@@ -4,7 +4,7 @@ import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 import { Skeleton } from 'primeng/skeleton';
 
-import { NgOptimizedImage } from '@angular/common';
+import { NgOptimizedImage, TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { RouterLink } from '@angular/router';
@@ -16,7 +16,16 @@ import { DecodeHtmlPipe } from '@shared/pipes';
 
 @Component({
   selector: 'osf-preprint-provider-hero',
-  imports: [Button, RouterLink, SearchInputComponent, Skeleton, TranslatePipe, NgOptimizedImage, DecodeHtmlPipe],
+  imports: [
+    Button,
+    RouterLink,
+    SearchInputComponent,
+    Skeleton,
+    TranslatePipe,
+    NgOptimizedImage,
+    DecodeHtmlPipe,
+    TitleCasePipe,
+  ],
   templateUrl: './preprint-provider-hero.component.html',
   styleUrl: './preprint-provider-hero.component.scss',
   providers: [DialogService],
diff --git a/src/app/features/preprints/pages/landing/preprints-landing.component.html b/src/app/features/preprints/pages/landing/preprints-landing.component.html
index d20f27ed9..4bbdae484 100644
--- a/src/app/features/preprints/pages/landing/preprints-landing.component.html
+++ b/src/app/features/preprints/pages/landing/preprints-landing.component.html
@@ -10,7 +10,7 @@ <h1>{{ 'preprints.title' | translate }}</h1>
       <p-button
         class="ml-auto w-full md:w-auto"
         styleClass="w-full md:w-auto"
-        [label]="'preprints.addPreprint' | translate: { preprintWord: osfPreprintProvider()?.preprintWord }"
+        [label]="'preprints.addPreprint' | translate: { preprintWord: osfPreprintProvider()?.preprintWord } | titlecase"
         routerLink="/preprints/select"
         (click)="addPreprint()"
       />
@@ -32,7 +32,7 @@ <h1>{{ 'preprints.title' | translate }}</h1>
   <osf-search-input
     class="w-full"
     [control]="searchControl"
-    [placeholder]="'preprints.searchPlaceholder' | translate"
+    [placeholder]="'preprints.searchPlaceholder' | translate: { preprintWord: 'preprint' } | titlecase"
     (triggerSearch)="redirectToSearchPageWithValue()"
   />
 
diff --git a/src/app/features/preprints/pages/landing/preprints-landing.component.ts b/src/app/features/preprints/pages/landing/preprints-landing.component.ts
index 4eaa63df4..ff1f0160b 100644
--- a/src/app/features/preprints/pages/landing/preprints-landing.component.ts
+++ b/src/app/features/preprints/pages/landing/preprints-landing.component.ts
@@ -5,6 +5,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { Button } from 'primeng/button';
 import { Skeleton } from 'primeng/skeleton';
 
+import { TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, effect, HostBinding, inject, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
@@ -35,6 +36,7 @@ import { ResourceTab } from '@shared/enums';
     BrowseBySubjectsComponent,
     Skeleton,
     TranslateModule,
+    TitleCasePipe,
   ],
   templateUrl: './preprints-landing.component.html',
   styleUrl: './preprints-landing.component.scss',
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
index c363dd66a..7152984fc 100644
--- a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
@@ -1,13 +1,14 @@
-<osf-sub-header title="Add A Preprint" />
+<osf-sub-header [title]="'preprints.selectService.title' | translate" />
 
 <section class="flex flex-1 flex-column bg-white p-3 md:p-4">
-  <h2>Select a preprint service</h2>
+  <h2>{{ 'preprints.selectService.sectionTitle' | translate }}</h2>
   <p class="m-t-12">
     <span>
-      A preprint is a version of a scholarly or scientific paper that is posted online before it has undergone formal
-      peer review and published in a scientific journal.
+      {{ 'preprints.selectService.description' | translate }}
     </span>
-    <a href="https://help.osf.io/article/376-preprints-home-page">Learn more</a>
+    <a href="https://help.osf.io/article/376-preprints-home-page">{{
+      'preprints.selectService.learnMore' | translate
+    }}</a>
   </p>
   <section class="m-t-48 grid justify-content-center align-items-start gap-4">
     @if (areProvidersLoading()) {
@@ -37,7 +38,11 @@ <h2>Select a preprint service</h2>
             <h4 class="m-t-12">{{ provider.name }}</h4>
             <p-button
               class="m-t-24"
-              [label]="selectedProviderId() === provider.id ? 'Deselect' : 'Select'"
+              [label]="
+                selectedProviderId() === provider.id
+                  ? ('preprints.selectService.buttons.deselect' | translate)
+                  : ('preprints.selectService.buttons.select' | translate)
+              "
               severity="secondary"
             />
           </div>
@@ -49,6 +54,10 @@ <h4 class="m-t-12">{{ provider.name }}</h4>
     }
   </section>
   <section class="m-t-48 flex flex-row justify-content-end">
-    <p-button label="Next" (click)="nextStep()" [disabled]="!selectedProviderId()" />
+    <p-button
+      [label]="'preprints.selectService.buttons.next' | translate"
+      (click)="nextStep()"
+      [disabled]="!selectedProviderId()"
+    />
   </section>
 </section>
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts
index 13b8302a7..e8cadaed8 100644
--- a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts
@@ -1,5 +1,7 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
+import { TranslateModule } from '@ngx-translate/core';
+
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { Skeleton } from 'primeng/skeleton';
@@ -16,7 +18,7 @@ import { DecodeHtmlPipe } from '@shared/pipes';
 
 @Component({
   selector: 'osf-select-preprint-service',
-  imports: [SubHeaderComponent, Card, Button, NgClass, Tooltip, DecodeHtmlPipe, Skeleton],
+  imports: [SubHeaderComponent, Card, Button, NgClass, Tooltip, DecodeHtmlPipe, Skeleton, TranslateModule],
   templateUrl: './select-preprint-service.component.html',
   styleUrl: './select-preprint-service.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 72faf4dba..31dc2ffcb 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1229,7 +1229,7 @@
     "title": "Preprints",
     "addPreprint": "Add a {{preprintWord}}",
     "poweredBy": "Powered by OSF Preprints",
-    "searchPlaceholder": "Search Preprints",
+    "searchPlaceholder": "Search {{preprintWord}}s",
     "showExample": "Show an example",
     "browseBySubjects": {
       "title": "Browse By Subjects"
@@ -1251,6 +1251,17 @@
       "header": "Search help",
       "message": "OSF Search provides a powerful discovery tool to help you find data, papers, analysis plans, and more content across the research lifecycle. OSF Preprints has some specialized filters, which you can learn more about on our",
       "linkText": "help guides"
+    },
+    "selectService": {
+      "title": "Add A Preprint",
+      "sectionTitle": "Select a preprint service",
+      "description": "A preprint is a version of a scholarly or scientific paper that is posted online before it has undergone formal peer review and published in a scientific journal.",
+      "learnMore": "Learn more",
+      "buttons": {
+        "next": "Next",
+        "select": "Select",
+        "deselect": "Deselect"
+      }
     }
   },
   "truncatedText": {

From 4efc2984d2c2185f8eb7331c429ea11c9ef49693 Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Fri, 13 Jun 2025 22:55:05 +0300
Subject: [PATCH 04/12] feat(select-preprint-service): Enhance UI with dynamic
 translations

---
 .../preprint-provider-hero.component.html     |  6 +++--
 .../preprint-provider-hero.component.ts       | 13 +++++++++--
 .../landing/preprints-landing.component.html  |  5 ++--
 .../landing/preprints-landing.component.ts    |  6 ++---
 .../select-preprint-service.component.html    | 23 +++++++++++++------
 .../select-preprint-service.component.ts      |  4 +++-
 src/assets/i18n/en.json                       | 13 ++++++++++-
 7 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
index 117f77e01..9b3122b6c 100644
--- a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
+++ b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
@@ -21,7 +21,7 @@ <h1 class="preprint-provider-name">{{ preprintProvider()!.name }}</h1>
       <p-button
         class="ml-auto w-full md:w-auto preprints-branding-button"
         styleClass="w-full md:w-auto"
-        [label]="'preprints.addPreprint' | translate: { preprintWord: preprintProvider()!.preprintWord }"
+        [label]="'preprints.addPreprint' | translate: { preprintWord: preprintProvider()!.preprintWord } | titlecase"
         (click)="addPreprint()"
       />
     }
@@ -56,7 +56,9 @@ <h1 class="preprint-provider-name">{{ preprintProvider()!.name }}</h1>
 
     <osf-search-input
       class="w-full"
-      [placeholder]="'preprints.searchPlaceholder' | translate"
+      [placeholder]="
+        'preprints.searchPlaceholder' | translate: { preprintWord: preprintProvider()!.preprintWord } | titlecase
+      "
       [control]="searchControl()"
       (triggerSearch)="onTriggerSearch($event)"
     />
diff --git a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts
index 034e63039..3d9c89417 100644
--- a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts
+++ b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts
@@ -4,7 +4,7 @@ import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 import { Skeleton } from 'primeng/skeleton';
 
-import { NgOptimizedImage } from '@angular/common';
+import { NgOptimizedImage, TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { RouterLink } from '@angular/router';
@@ -16,7 +16,16 @@ import { DecodeHtmlPipe } from '@shared/pipes';
 
 @Component({
   selector: 'osf-preprint-provider-hero',
-  imports: [Button, RouterLink, SearchInputComponent, Skeleton, TranslatePipe, NgOptimizedImage, DecodeHtmlPipe],
+  imports: [
+    Button,
+    RouterLink,
+    SearchInputComponent,
+    Skeleton,
+    TranslatePipe,
+    NgOptimizedImage,
+    DecodeHtmlPipe,
+    TitleCasePipe,
+  ],
   templateUrl: './preprint-provider-hero.component.html',
   styleUrl: './preprint-provider-hero.component.scss',
   providers: [DialogService],
diff --git a/src/app/features/preprints/pages/landing/preprints-landing.component.html b/src/app/features/preprints/pages/landing/preprints-landing.component.html
index d20f27ed9..31804ca5c 100644
--- a/src/app/features/preprints/pages/landing/preprints-landing.component.html
+++ b/src/app/features/preprints/pages/landing/preprints-landing.component.html
@@ -10,9 +10,8 @@ <h1>{{ 'preprints.title' | translate }}</h1>
       <p-button
         class="ml-auto w-full md:w-auto"
         styleClass="w-full md:w-auto"
-        [label]="'preprints.addPreprint' | translate: { preprintWord: osfPreprintProvider()?.preprintWord }"
+        [label]="'preprints.addPreprint' | translate: { preprintWord: osfPreprintProvider()?.preprintWord } | titlecase"
         routerLink="/preprints/select"
-        (click)="addPreprint()"
       />
     }
   </div>
@@ -32,7 +31,7 @@ <h1>{{ 'preprints.title' | translate }}</h1>
   <osf-search-input
     class="w-full"
     [control]="searchControl"
-    [placeholder]="'preprints.searchPlaceholder' | translate"
+    [placeholder]="'preprints.searchPlaceholder' | translate: { preprintWord: 'preprint' } | titlecase"
     (triggerSearch)="redirectToSearchPageWithValue()"
   />
 
diff --git a/src/app/features/preprints/pages/landing/preprints-landing.component.ts b/src/app/features/preprints/pages/landing/preprints-landing.component.ts
index 4eaa63df4..808e62662 100644
--- a/src/app/features/preprints/pages/landing/preprints-landing.component.ts
+++ b/src/app/features/preprints/pages/landing/preprints-landing.component.ts
@@ -5,6 +5,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { Button } from 'primeng/button';
 import { Skeleton } from 'primeng/skeleton';
 
+import { TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, effect, HostBinding, inject, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
@@ -35,6 +36,7 @@ import { ResourceTab } from '@shared/enums';
     BrowseBySubjectsComponent,
     Skeleton,
     TranslateModule,
+    TitleCasePipe,
   ],
   templateUrl: './preprints-landing.component.html',
   styleUrl: './preprints-landing.component.scss',
@@ -59,10 +61,6 @@ export class PreprintsLandingComponent implements OnInit, OnDestroy {
   highlightedSubjectsByProviderId = select(PreprintsSelectors.getHighlightedSubjectsForProvider);
   areSubjectsLoading = select(PreprintsSelectors.areSubjectsLoading);
 
-  addPreprint() {
-    // [RNi] TODO: Implement the logic to add a preprint.
-  }
-
   constructor() {
     effect(() => {
       const provider = this.osfPreprintProvider();
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
index c363dd66a..7152984fc 100644
--- a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
@@ -1,13 +1,14 @@
-<osf-sub-header title="Add A Preprint" />
+<osf-sub-header [title]="'preprints.selectService.title' | translate" />
 
 <section class="flex flex-1 flex-column bg-white p-3 md:p-4">
-  <h2>Select a preprint service</h2>
+  <h2>{{ 'preprints.selectService.sectionTitle' | translate }}</h2>
   <p class="m-t-12">
     <span>
-      A preprint is a version of a scholarly or scientific paper that is posted online before it has undergone formal
-      peer review and published in a scientific journal.
+      {{ 'preprints.selectService.description' | translate }}
     </span>
-    <a href="https://help.osf.io/article/376-preprints-home-page">Learn more</a>
+    <a href="https://help.osf.io/article/376-preprints-home-page">{{
+      'preprints.selectService.learnMore' | translate
+    }}</a>
   </p>
   <section class="m-t-48 grid justify-content-center align-items-start gap-4">
     @if (areProvidersLoading()) {
@@ -37,7 +38,11 @@ <h2>Select a preprint service</h2>
             <h4 class="m-t-12">{{ provider.name }}</h4>
             <p-button
               class="m-t-24"
-              [label]="selectedProviderId() === provider.id ? 'Deselect' : 'Select'"
+              [label]="
+                selectedProviderId() === provider.id
+                  ? ('preprints.selectService.buttons.deselect' | translate)
+                  : ('preprints.selectService.buttons.select' | translate)
+              "
               severity="secondary"
             />
           </div>
@@ -49,6 +54,10 @@ <h4 class="m-t-12">{{ provider.name }}</h4>
     }
   </section>
   <section class="m-t-48 flex flex-row justify-content-end">
-    <p-button label="Next" (click)="nextStep()" [disabled]="!selectedProviderId()" />
+    <p-button
+      [label]="'preprints.selectService.buttons.next' | translate"
+      (click)="nextStep()"
+      [disabled]="!selectedProviderId()"
+    />
   </section>
 </section>
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts
index 13b8302a7..e8cadaed8 100644
--- a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts
@@ -1,5 +1,7 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
+import { TranslateModule } from '@ngx-translate/core';
+
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { Skeleton } from 'primeng/skeleton';
@@ -16,7 +18,7 @@ import { DecodeHtmlPipe } from '@shared/pipes';
 
 @Component({
   selector: 'osf-select-preprint-service',
-  imports: [SubHeaderComponent, Card, Button, NgClass, Tooltip, DecodeHtmlPipe, Skeleton],
+  imports: [SubHeaderComponent, Card, Button, NgClass, Tooltip, DecodeHtmlPipe, Skeleton, TranslateModule],
   templateUrl: './select-preprint-service.component.html',
   styleUrl: './select-preprint-service.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 72faf4dba..31dc2ffcb 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1229,7 +1229,7 @@
     "title": "Preprints",
     "addPreprint": "Add a {{preprintWord}}",
     "poweredBy": "Powered by OSF Preprints",
-    "searchPlaceholder": "Search Preprints",
+    "searchPlaceholder": "Search {{preprintWord}}s",
     "showExample": "Show an example",
     "browseBySubjects": {
       "title": "Browse By Subjects"
@@ -1251,6 +1251,17 @@
       "header": "Search help",
       "message": "OSF Search provides a powerful discovery tool to help you find data, papers, analysis plans, and more content across the research lifecycle. OSF Preprints has some specialized filters, which you can learn more about on our",
       "linkText": "help guides"
+    },
+    "selectService": {
+      "title": "Add A Preprint",
+      "sectionTitle": "Select a preprint service",
+      "description": "A preprint is a version of a scholarly or scientific paper that is posted online before it has undergone formal peer review and published in a scientific journal.",
+      "learnMore": "Learn more",
+      "buttons": {
+        "next": "Next",
+        "select": "Select",
+        "deselect": "Deselect"
+      }
     }
   },
   "truncatedText": {

From 5bb72fb20ebe426e046419187deaebf87d344b61 Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Mon, 16 Jun 2025 11:44:23 +0300
Subject: [PATCH 05/12] fix(preprint-provider-hero): Added skeleton for search
 input while preprint provider is loading

---
 .../preprint-provider-hero.component.html     | 50 +++++++++++--------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
index 9b3122b6c..5c03e97bc 100644
--- a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
+++ b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
@@ -41,33 +41,39 @@ <h1 class="preprint-provider-name">{{ preprintProvider()!.name }}</h1>
     }
   </div>
 
-  <div class="search-input-container">
-    <img
-      ngSrc="assets/icons/colored/question-mark.svg"
-      alt="preprints help"
-      tabindex="0"
-      role="button"
-      height="36"
-      width="36"
-      class="cursor-pointer"
-      (click)="openHelpDialog()"
-      (keydown.enter)="openHelpDialog()"
-    />
+  @if (isPreprintProviderLoading()) {
+    <p-skeleton class="w-full" height="3rem" />
+  } @else {
+    <div class="search-input-container">
+      <img
+        ngSrc="assets/icons/colored/question-mark.svg"
+        alt="preprints help"
+        tabindex="0"
+        role="button"
+        height="36"
+        width="36"
+        class="cursor-pointer"
+        (click)="openHelpDialog()"
+        (keydown.enter)="openHelpDialog()"
+      />
 
-    <osf-search-input
-      class="w-full"
-      [placeholder]="
-        'preprints.searchPlaceholder' | translate: { preprintWord: preprintProvider()!.preprintWord } | titlecase
-      "
-      [control]="searchControl()"
-      (triggerSearch)="onTriggerSearch($event)"
-    />
-  </div>
+      <osf-search-input
+        class="w-full"
+        [placeholder]="
+          'preprints.searchPlaceholder' | translate: { preprintWord: preprintProvider()!.preprintWord } | titlecase
+        "
+        [control]="searchControl()"
+        (triggerSearch)="onTriggerSearch($event)"
+      />
+    </div>
+  }
 
   <!-- [Rni] TODO: add link to an example preprint -->
   @if (isPreprintProviderLoading()) {
     <p-skeleton width="10%" height="1rem" />
   } @else {
-    <a class="link font-bold">{{ 'preprints.showExample' | translate }}</a>
+    <p>
+      <a class="font-bold">{{ 'preprints.showExample' | translate }}</a>
+    </p>
   }
 </section>

From 0a358c769031b891d43e5dfaa9241153544abe12 Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Mon, 16 Jun 2025 11:51:17 +0300
Subject: [PATCH 06/12] fix(preprints-styles): Fixed styles due to merge
 conflicts

---
 .../pages/landing/preprints-landing.component.html        | 2 +-
 .../pages/landing/preprints-landing.component.scss        | 8 ++++++++
 src/assets/styles/components/preprints.scss               | 7 +++++++
 src/assets/styles/overrides/select.scss                   | 2 +-
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/app/features/preprints/pages/landing/preprints-landing.component.html b/src/app/features/preprints/pages/landing/preprints-landing.component.html
index 31804ca5c..ab5d2de10 100644
--- a/src/app/features/preprints/pages/landing/preprints-landing.component.html
+++ b/src/app/features/preprints/pages/landing/preprints-landing.component.html
@@ -76,7 +76,7 @@ <h2 class="text-2xl">{{ 'preprints.createServer.title' | translate }}</h2>
     </p>
   </div>
 
-  <p-button severity="success" link="true">
+  <p-button severity="success" class="link-button">
     <a href="mailto:support@osf.io">{{ 'preprints.createServer.contactUs' | translate }}</a>
   </p-button>
 </section>
diff --git a/src/app/features/preprints/pages/landing/preprints-landing.component.scss b/src/app/features/preprints/pages/landing/preprints-landing.component.scss
index 59c5ab2a5..8cae1f8ce 100644
--- a/src/app/features/preprints/pages/landing/preprints-landing.component.scss
+++ b/src/app/features/preprints/pages/landing/preprints-landing.component.scss
@@ -12,3 +12,11 @@
 .blue-dark-gradient {
   background: url("/assets/images/dark-blue-gradient.png") center;
 }
+
+.link-button {
+  a,
+  a:hover {
+    color: var(--p-button-success-color);
+    text-decoration: none;
+  }
+}
diff --git a/src/assets/styles/components/preprints.scss b/src/assets/styles/components/preprints.scss
index db2b59aca..88fae462e 100644
--- a/src/assets/styles/components/preprints.scss
+++ b/src/assets/styles/components/preprints.scss
@@ -15,6 +15,12 @@
     line-height: mix.rem(24px);
   }
 
+  .search-container {
+    .search-input:hover {
+      border-color: var(--preprints-branding-primary-color);
+    }
+  }
+
   a {
     color: var(--preprints-branding-primary-color);
   }
@@ -23,6 +29,7 @@
     .p-button {
       color: var(--preprints-branding-secondary-color);
       background-color: var(--preprints-branding-primary-color);
+      border-color: var(--preprints-branding-secondary-color);
     }
   }
 }
diff --git a/src/assets/styles/overrides/select.scss b/src/assets/styles/overrides/select.scss
index b09629282..f1b3d37ef 100644
--- a/src/assets/styles/overrides/select.scss
+++ b/src/assets/styles/overrides/select.scss
@@ -105,7 +105,7 @@
 .filter {
   .p-select {
     .p-select-label {
-      font-size: 1.2rem;
+      font-size: mix.rem(16px);
       font-weight: 400;
       color: var.$dark-blue-1;
       padding-right: 0.5rem;

From 7a34b3cfb51b9d927ab95b4a3f6d9890468a620c Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Mon, 16 Jun 2025 13:35:26 +0300
Subject: [PATCH 07/12] feat(nav-menu): Added subroutes for preprints

---
 src/app/core/constants/nav-items.constant.ts | 15 ++++++++++++++-
 src/assets/i18n/en.json                      |  4 ++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/app/core/constants/nav-items.constant.ts b/src/app/core/constants/nav-items.constant.ts
index 9058c3655..7a86051e0 100644
--- a/src/app/core/constants/nav-items.constant.ts
+++ b/src/app/core/constants/nav-items.constant.ts
@@ -32,7 +32,20 @@ export const NAV_ITEMS: NavItem[] = [
     path: '/preprints',
     label: 'navigation.preprints',
     icon: 'preprints',
-    useExactMatch: true,
+    isCollapsible: true,
+    useExactMatch: false,
+    items: [
+      {
+        path: '/preprints',
+        label: 'navigation.preprintsSubRoutes.overview',
+        useExactMatch: false,
+      },
+      {
+        path: '/my-preprints',
+        label: 'navigation.preprintsSubRoutes.myPreprints',
+        useExactMatch: true,
+      },
+    ],
   },
   {
     path: '/my-profile',
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index c4bcf237d..5f81fe9e3 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -34,6 +34,10 @@
     "meetings": "Meetings",
     "myProjects": "My Projects",
     "preprints": "Preprints",
+    "preprintsSubRoutes": {
+      "overview": "Overview",
+      "myPreprints": "My Preprints"
+    },
     "collections": "Collections",
     "moderation": "Moderation",
     "donate": "Donate",

From 3bfc7689f52bef13383fa2568fa2536d50519e56 Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Mon, 16 Jun 2025 13:37:18 +0300
Subject: [PATCH 08/12] fix(preprints-search-input): Changed placeholder

---
 src/assets/i18n/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 5f81fe9e3..20f3b44c9 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1210,7 +1210,7 @@
     "title": "Preprints",
     "addPreprint": "Add a {{preprintWord}}",
     "poweredBy": "Powered by OSF Preprints",
-    "searchPlaceholder": "Search {{preprintWord}}s",
+    "searchPlaceholder": "Search {{preprintWord}}...",
     "showExample": "Show an example",
     "browseBySubjects": {
       "title": "Browse By Subjects"

From f90c8c794068788b0639e6bb646fc6d6fc5ed591 Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Mon, 16 Jun 2025 14:00:12 +0300
Subject: [PATCH 09/12] fix(comments): Fixed comments

---
 .../select-preprint-service.component.html    | 19 +++++++++----------
 .../select-preprint-service.component.scss    |  3 +--
 src/assets/i18n/en.json                       | 10 ++++------
 src/assets/styles/overrides/select.scss       |  1 -
 4 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
index 7152984fc..c03758447 100644
--- a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
@@ -25,23 +25,26 @@ <h2>{{ 'preprints.selectService.sectionTitle' | translate }}</h2>
       @for (provider of preprintProvidersAllowingSubmissions(); track $index) {
         <p-card
           [ngClass]="{ active: selectedProviderId() === provider.id }"
+          class="provider-card"
           [pTooltip]="descriptionTooltip"
           tooltipPosition="bottom"
           autoHide="false"
           (click)="selectDeselectProvider(provider)"
         >
           <div class="h-10rem w-13rem grid-item flex flex-column align-items-center justify-content-end">
-            @if (provider.squareColorNoTransparentImageUrl) {
-              <img height="60" [src]="provider.squareColorNoTransparentImageUrl" alt="Provider Logo" />
-            }
+            <img
+              height="60"
+              [src]="provider.squareColorNoTransparentImageUrl"
+              [alt]="'preprints.selectService.providerLogoImageAlt' | translate"
+            />
 
             <h4 class="m-t-12">{{ provider.name }}</h4>
             <p-button
               class="m-t-24"
               [label]="
                 selectedProviderId() === provider.id
-                  ? ('preprints.selectService.buttons.deselect' | translate)
-                  : ('preprints.selectService.buttons.select' | translate)
+                  ? ('common.buttons.deselect' | translate)
+                  : ('common.buttons.select' | translate)
               "
               severity="secondary"
             />
@@ -54,10 +57,6 @@ <h4 class="m-t-12">{{ provider.name }}</h4>
     }
   </section>
   <section class="m-t-48 flex flex-row justify-content-end">
-    <p-button
-      [label]="'preprints.selectService.buttons.next' | translate"
-      (click)="nextStep()"
-      [disabled]="!selectedProviderId()"
-    />
+    <p-button [label]="'common.buttons.next' | translate" (click)="nextStep()" [disabled]="!selectedProviderId()" />
   </section>
 </section>
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.scss b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.scss
index 51241f5b3..e4df0f6af 100644
--- a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.scss
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.scss
@@ -1,5 +1,4 @@
 @use "assets/styles/mixins" as mix;
-@use "assets/styles/variables" as var;
 
 .grid-item {
   width: mix.rem(260px);
@@ -7,7 +6,7 @@
 }
 
 .active,
-p-card:hover {
+.provider-card:hover {
   --p-card-background: var(--bg-blue-3);
   cursor: pointer;
 
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 20f3b44c9..2c637efd5 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -11,7 +11,9 @@
       "copy": "Copy",
       "move": "Move",
       "rename": "Rename",
-      "next": "Next"
+      "next": "Next",
+      "select": "Select",
+      "deselect": "Deselect"
     },
     "search": {
       "title": "Search",
@@ -1238,11 +1240,7 @@
       "sectionTitle": "Select a preprint service",
       "description": "A preprint is a version of a scholarly or scientific paper that is posted online before it has undergone formal peer review and published in a scientific journal.",
       "learnMore": "Learn more",
-      "buttons": {
-        "next": "Next",
-        "select": "Select",
-        "deselect": "Deselect"
-      }
+      "providerLogoImageAlt": "Provider Logo"
     }
   },
   "truncatedText": {
diff --git a/src/assets/styles/overrides/select.scss b/src/assets/styles/overrides/select.scss
index 68d505df4..61ef05739 100644
--- a/src/assets/styles/overrides/select.scss
+++ b/src/assets/styles/overrides/select.scss
@@ -77,7 +77,6 @@
 
   .p-select {
     border: none;
-    font-size: mix.rem(14px);
     box-shadow: none;
     height: 2rem;
 

From 964f3108c687a4b7c44140ebeec3306dc58dcd8c Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Mon, 16 Jun 2025 14:34:09 +0300
Subject: [PATCH 10/12] fix(preprints-help-dialog): Fixed url to help guide

---
 .../preprints-help-dialog/preprints-help-dialog.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/preprints/components/preprints-help-dialog/preprints-help-dialog.component.html b/src/app/features/preprints/components/preprints-help-dialog/preprints-help-dialog.component.html
index e19556eda..ef1b931d3 100644
--- a/src/app/features/preprints/components/preprints-help-dialog/preprints-help-dialog.component.html
+++ b/src/app/features/preprints/components/preprints-help-dialog/preprints-help-dialog.component.html
@@ -1,7 +1,7 @@
 <div class="dialog-content">
   <p class="py-3">
     {{ 'preprints.helpDialog.message' | translate }}
-    <a class="font-bold" href="https://help.osf.io/article/181-search-and-discover-preprints" target="_blank"
+    <a class="font-bold" href="https://help.osf.io/article/376-preprints-home-page" target="_blank"
       >{{ 'preprints.helpDialog.linkText' | translate }}.</a
     >
   </p>

From 8aef89993a39c7fcafef489b33c5dc47b7ed438a Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Mon, 16 Jun 2025 18:05:23 +0300
Subject: [PATCH 11/12] feat(preprints-favicon): Implemented updating browser
 tab favicon and title with preprint branding

---
 .../preprints/mappers/preprints.mapper.ts     |  1 +
 .../preprints/models/preprints.models.ts      |  2 ++
 .../preprint-provider-discover.component.ts   |  4 +++-
 .../preprint-provider-overview.component.ts   |  4 +++-
 src/app/shared/utils/browser-tab.helper.ts    | 22 +++++++++++++++++++
 src/app/shared/utils/index.ts                 |  1 +
 6 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 src/app/shared/utils/browser-tab.helper.ts

diff --git a/src/app/features/preprints/mappers/preprints.mapper.ts b/src/app/features/preprints/mappers/preprints.mapper.ts
index 50ac284c5..aff80c2ee 100644
--- a/src/app/features/preprints/mappers/preprints.mapper.ts
+++ b/src/app/features/preprints/mappers/preprints.mapper.ts
@@ -29,6 +29,7 @@ export class PreprintsMapper {
         secondaryColor: brandRaw.attributes.secondary_color,
       },
       iri: response.links.iri,
+      faviconUrl: response.attributes.assets.favicon,
     };
   }
 
diff --git a/src/app/features/preprints/models/preprints.models.ts b/src/app/features/preprints/models/preprints.models.ts
index 031988711..26280982c 100644
--- a/src/app/features/preprints/models/preprints.models.ts
+++ b/src/app/features/preprints/models/preprints.models.ts
@@ -24,6 +24,7 @@ export interface PreprintProviderDetails {
   brand: Brand;
   lastFetched?: number;
   iri: string;
+  faviconUrl: string;
 }
 
 export interface PreprintProviderShortInfo {
@@ -56,6 +57,7 @@ export interface PreprintProviderDetailsGetResponse {
     assets: {
       wide_white: string;
       square_color_no_transparent: string;
+      favicon: string;
     };
     allow_submissions: boolean;
   };
diff --git a/src/app/features/preprints/pages/preprint-provider-discover/preprint-provider-discover.component.ts b/src/app/features/preprints/pages/preprint-provider-discover/preprint-provider-discover.component.ts
index 41689ad64..b9d5b1a70 100644
--- a/src/app/features/preprints/pages/preprint-provider-discover/preprint-provider-discover.component.ts
+++ b/src/app/features/preprints/pages/preprint-provider-discover/preprint-provider-discover.component.ts
@@ -41,7 +41,7 @@ import {
 } from '@osf/features/preprints/store/preprints-resources-filters';
 import { GetAllOptions } from '@osf/features/preprints/store/preprints-resources-filters-options';
 import { FilterLabelsModel, ResourceFilterLabel } from '@shared/models';
-import { HeaderStyleHelper } from '@shared/utils';
+import { BrowserTabHelper, HeaderStyleHelper } from '@shared/utils';
 
 @Component({
   selector: 'osf-preprint-provider-discover',
@@ -110,6 +110,7 @@ export class PreprintProviderDiscoverComponent implements OnInit, OnDestroy {
           provider.brand.secondaryColor,
           provider.brand.heroBackgroundImageUrl
         );
+        BrowserTabHelper.updateTabStyles(provider.faviconUrl, provider.name);
       }
     });
 
@@ -187,6 +188,7 @@ export class PreprintProviderDiscoverComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     HeaderStyleHelper.resetToDefaults();
     BrandService.resetBranding();
+    BrowserTabHelper.resetToDefaults();
     this.actions.resetFiltersState();
     this.actions.resetDiscoverState();
   }
diff --git a/src/app/features/preprints/pages/preprint-provider-overview/preprint-provider-overview.component.ts b/src/app/features/preprints/pages/preprint-provider-overview/preprint-provider-overview.component.ts
index ade20c7e1..a00d94d17 100644
--- a/src/app/features/preprints/pages/preprint-provider-overview/preprint-provider-overview.component.ts
+++ b/src/app/features/preprints/pages/preprint-provider-overview/preprint-provider-overview.component.ts
@@ -15,7 +15,7 @@ import {
   GetPreprintProviderById,
   PreprintsSelectors,
 } from '@osf/features/preprints/store/preprints';
-import { HeaderStyleHelper } from '@shared/utils';
+import { BrowserTabHelper, HeaderStyleHelper } from '@shared/utils';
 
 @Component({
   selector: 'osf-provider-overview',
@@ -55,6 +55,7 @@ export class PreprintProviderOverviewComponent implements OnInit, OnDestroy {
           provider.brand.secondaryColor,
           provider.brand.heroBackgroundImageUrl
         );
+        BrowserTabHelper.updateTabStyles(provider.faviconUrl, provider.name);
       }
     });
   }
@@ -67,6 +68,7 @@ export class PreprintProviderOverviewComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     HeaderStyleHelper.resetToDefaults();
     BrandService.resetBranding();
+    BrowserTabHelper.resetToDefaults();
   }
 
   redirectToDiscoverPageWithValue(searchValue: string) {
diff --git a/src/app/shared/utils/browser-tab.helper.ts b/src/app/shared/utils/browser-tab.helper.ts
new file mode 100644
index 000000000..f0df8afef
--- /dev/null
+++ b/src/app/shared/utils/browser-tab.helper.ts
@@ -0,0 +1,22 @@
+export class BrowserTabHelper {
+  private static readonly DEFAULT_FAVICON = '/favicon.ico';
+  private static readonly DEFAULT_TITLE = 'OSF';
+
+  static updateTabStyles(faviconUrl: string, title: string) {
+    if (faviconUrl) {
+      const faviconElement = document.querySelector("link[rel*='icon']") as HTMLLinkElement;
+      faviconElement.href = faviconUrl;
+    }
+
+    if (title) {
+      document.title = title;
+    }
+  }
+
+  static resetToDefaults() {
+    const faviconElement = document.querySelector("link[rel*='icon']") as HTMLLinkElement;
+    faviconElement.href = this.DEFAULT_FAVICON;
+
+    document.title = this.DEFAULT_TITLE;
+  }
+}
diff --git a/src/app/shared/utils/index.ts b/src/app/shared/utils/index.ts
index ec1ea68b3..38d45729d 100644
--- a/src/app/shared/utils/index.ts
+++ b/src/app/shared/utils/index.ts
@@ -1,6 +1,7 @@
 export { HeaderStyleHelper } from '../utils/header-style.helper';
 export * from './add-filters-params.helper';
 export * from './breakpoints.tokens';
+export { BrowserTabHelper } from './browser-tab.helper';
 export * from './custom-form-validators.helper';
 export * from './default-confirmation-config.helper';
 export * from './find-changed-items.helper';

From dffc84c555bc6570b14efd545d6f32c2c4b897e7 Mon Sep 17 00:00:00 2001
From: Roma <nikitinroma2605@gmail.com>
Date: Mon, 16 Jun 2025 18:26:09 +0300
Subject: [PATCH 12/12] fix(select): remove duplicate style

---
 src/assets/styles/overrides/select.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/assets/styles/overrides/select.scss b/src/assets/styles/overrides/select.scss
index 61ef05739..144800069 100644
--- a/src/assets/styles/overrides/select.scss
+++ b/src/assets/styles/overrides/select.scss
@@ -108,7 +108,6 @@
 .filter {
   .p-select {
     .p-select-label {
-      font-size: mix.rem(16px);
       font-weight: 400;
       color: var.$dark-blue-1;
       padding-right: 0.5rem;