Feat - Select Preprint Service Page

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',

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()"
       />
     }
@@ -41,21 +41,29 @@ <h1 class="preprint-provider-name">{{ preprintProvider()!.name }}</h1>
     }
   </div>
 
-  <div class="search-input-container">
-    <osf-search-input
-      class="w-full"
-      [showHelpIcon]="true"
-      [placeholder]="'preprints.searchPlaceholder' | translate"
-      [control]="searchControl()"
-      (triggerSearch)="onTriggerSearch($event)"
-      (helpClicked)="openHelpDialog()"
-    />
-  </div>
+  @if (isPreprintProviderLoading()) {
+    <p-skeleton class="w-full" height="3rem" />
+  } @else {
+    <div class="search-input-container">
+      <osf-search-input
+        class="w-full"
+        [showHelpIcon]="true"
+        [placeholder]="
+          'preprints.searchPlaceholder' | translate: { preprintWord: preprintProvider()!.preprintWord } | titlecase
+        "
+        [control]="searchControl()"
+        (triggerSearch)="onTriggerSearch($event)"
+        (helpClicked)="openHelpDialog()"
+      />
+    </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>

src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts

@@ -4,6 +4,7 @@ import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 import { Skeleton } from 'primeng/skeleton';
 
+import { TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { RouterLink } from '@angular/router';
@@ -15,7 +16,7 @@ import { DecodeHtmlPipe } from '@shared/pipes';
 
 @Component({
   selector: 'osf-preprint-provider-hero',
-  imports: [Button, RouterLink, SearchInputComponent, Skeleton, TranslatePipe, DecodeHtmlPipe],
+  imports: [Button, RouterLink, SearchInputComponent, Skeleton, TranslatePipe, DecodeHtmlPipe, TitleCasePipe],
   templateUrl: './preprint-provider-hero.component.html',
   styleUrl: './preprint-provider-hero.component.scss',
   providers: [DialogService],

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[]>();
 }

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>

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
+          ),
+      },
     ],
   },
 ];

src/app/features/preprints/mappers/preprints.mapper.ts

@@ -1,7 +1,7 @@
 import {
   PreprintProviderDetails,
   PreprintProviderDetailsGetResponse,
-  PreprintProviderToAdvertise,
+  PreprintProviderShortInfo,
   Subject,
   SubjectGetResponse,
 } from '@osf/features/preprints/models';
@@ -29,19 +29,20 @@ export class PreprintsMapper {
         secondaryColor: brandRaw.attributes.secondary_color,
       },
       iri: response.links.iri,
+      faviconUrl: response.attributes.assets.favicon,
     };
   }
 
-  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[] {

src/app/features/preprints/models/preprints.models.ts

@@ -24,12 +24,15 @@ export interface PreprintProviderDetails {
   brand: Brand;
   lastFetched?: number;
   iri: string;
+  faviconUrl: string;
 }
 
-export interface PreprintProviderToAdvertise {
+export interface PreprintProviderShortInfo {
   id: string;
   name: string;
+  descriptionHtml: string;
   whiteWideImageUrl: string;
+  squareColorNoTransparentImageUrl: string;
 }
 
 export interface Subject {
@@ -53,6 +56,8 @@ export interface PreprintProviderDetailsGetResponse {
     preprint_word: string;
     assets: {
       wide_white: string;
+      square_color_no_transparent: string;
+      favicon: string;
     };
     allow_submissions: boolean;
   };

src/app/features/preprints/pages/landing/preprints-landing.component.html

@@ -10,8 +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 }"
-        (click)="addPreprint()"
+        [label]="'preprints.addPreprint' | translate: { preprintWord: osfPreprintProvider()?.preprintWord } | titlecase"
+        routerLink="/preprints/select"
       />
     }
   </div>
@@ -31,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()"
   />
 
@@ -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>

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;
+  }
+}

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();

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();
   }

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) {

src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html

@@ -0,0 +1,62 @@
+<osf-sub-header [title]="'preprints.selectService.title' | translate" />
+
+<section class="flex flex-1 flex-column bg-white p-3 md:p-4">
+  <h2>{{ 'preprints.selectService.sectionTitle' | translate }}</h2>
+  <p class="m-t-12">
+    <span>
+      {{ 'preprints.selectService.description' | translate }}
+    </span>
+    <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()) {
+      @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 }"
+          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">
+            <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
+                  ? ('common.buttons.deselect' | translate)
+                  : ('common.buttons.select' | translate)
+              "
+              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]="'common.buttons.next' | translate" (click)="nextStep()" [disabled]="!selectedProviderId()" />
+  </section>
+</section>