Feat - Select Preprint Service Page

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,31 +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"
-      [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>

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

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/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';
@@ -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[] {

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

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/select-preprint-service/select-preprint-service.component.html

@@ -0,0 +1,63 @@
+<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 }"
+          [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
+                  ? ('preprints.selectService.buttons.deselect' | translate)
+                  : ('preprints.selectService.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]="'preprints.selectService.buttons.next' | translate"
+      (click)="nextStep()"
+      [disabled]="!selectedProviderId()"
+    />
+  </section>
+</section>

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

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