feat: add form for submitting testimonials (#3)

### Explanation

_No response_

### Issue

_No response_

### Attestations

- [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [ ] I have pinned the dependencies to a specific patch version.

### Style

- [x] I have run the linter and resolved any errors.
- [x] My pull request uses an appropriate title, matching the conventional commit standards.
- [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

Minor - My pull request introduces a new non-breaking feature.

Reviewed-on: nhcarrigan/forms#3
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

client/src/app/api.service.ts

@@ -16,6 +16,7 @@ import type {
   SuccessResponse,
   Staff,
   DataResponse,
+  Testimonial,
 } from "@repo/types";
 
 @Injectable({
@@ -142,6 +143,20 @@ export class ApiService {
     return response;
   }
 
+  public async submitTestimonial(
+    testimonial: Partial<Testimonial>,
+  ): Promise<SuccessResponse | ErrorResponse> {
+    const request = await fetch(`${this.url}/submit/testimonials`, {
+      body:    JSON.stringify(testimonial),
+      headers: {
+        "Content-type": "application/json",
+      },
+      method: "POST",
+    });
+    const response = await request.json() as SuccessResponse | ErrorResponse;
+    return response;
+  }
+
   public async getData(
     type:
       | "appeals"
@@ -150,7 +165,8 @@ export class ApiService {
       | "events"
       | "meetings"
       | "mentorships"
-      | "staff",
+      | "staff"
+      | "testimonials",
     token: string,
   ): Promise<DataResponse | ErrorResponse> {
     const request = await fetch(`${this.url}/list/${type}`, {
@@ -172,7 +188,8 @@ export class ApiService {
       | "events"
       | "meetings"
       | "mentorships"
-      | "staff",
+      | "staff"
+      | "testimonials",
     id: string,
     token: string,
   ): Promise<SuccessResponse | ErrorResponse> {

client/src/app/app.routes.ts

@@ -13,6 +13,8 @@ import { MeetingComponent } from "./forms/meeting/meeting.component.js";
 import { MentorshipComponent }
   from "./forms/mentorship/mentorship.component.js";
 import { StaffComponent } from "./forms/staff/staff.component.js";
+import { TestimonialComponent }
+  from "./forms/testimonial/testimonial.component.js";
 import { HomeComponent } from "./home/home.component.js";
 import { ReviewComponent } from "./review/review.component.js";
 import type { Routes } from "@angular/router";
@@ -27,4 +29,5 @@ export const routes: Routes = [
   { component: MentorshipComponent, path: "mentorship" },
   { component: StaffComponent, path: "staff" },
   { component: ReviewComponent, path: "review" },
+  { component: TestimonialComponent, path: "testimonial" },
 ];

client/src/app/forms/testimonial/testimonial.component.html

@@ -0,0 +1,12 @@
+<h1>Testimonials</h1>
+<p>This form allows past clients and colleagues to submit reviews reflecting their positive experience with our work.</p>
+<p>We will respond to these submissions when your testimonial is <a href="https://testimonials.nhcarrigan.com" target="_blank">on our site</a>.</p>
+<app-error *ngIf="error" error="{{ error }}"></app-error>
+<app-success *ngIf="success"></app-success>
+<form *ngIf="!loading">
+    <app-userinfo [firstNameControl]="firstName" [lastNameControl]="lastName" [emailControl]="email" [companyControl]="company"></app-userinfo>
+    <app-multi-line label="Share your experience working with us!" [control]="content"></app-multi-line>
+    <app-consent [control]="consent"></app-consent>
+    <button type="button" (click)="submit($event)">Submit</button>
+</form>
+<a routerLink="/">Back to home</a>

client/src/app/forms/testimonial/testimonial.component.ts

@@ -0,0 +1,80 @@
+/**
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { RouterModule } from "@angular/router";
+import { ApiService } from "../../api.service.js";
+import { ConsentComponent } from "../../consent/consent.component.js";
+import { ErrorComponent } from "../../error/error.component.js";
+import { MultiLineComponent }
+  from "../../inputs/multi-line/multi-line.component.js";
+import { SuccessComponent } from "../../success/success.component.js";
+import { UserinfoComponent } from "../../userinfo/userinfo.component.js";
+
+@Component({
+  imports: [
+    RouterModule,
+    CommonModule,
+    ConsentComponent,
+    UserinfoComponent,
+    ErrorComponent,
+    ReactiveFormsModule,
+    MultiLineComponent,
+    SuccessComponent,
+  ],
+  selector:    "app-testimonial",
+  styleUrl:    "./testimonial.component.css",
+  templateUrl: "./testimonial.component.html",
+})
+export class TestimonialComponent {
+  public loading = false;
+  public error = "";
+  public success = false;
+
+  public firstName = new FormControl("");
+  public lastName = new FormControl("");
+  public email = new FormControl("");
+  public company = new FormControl("");
+
+  public content = new FormControl("");
+
+  public consent = new FormControl(false);
+
+  public constructor(private readonly apiService: ApiService) {}
+
+  public submit(event: MouseEvent): void {
+    this.error = "";
+    const { form } = event.target as HTMLButtonElement;
+    const valid = form?.reportValidity();
+    if (valid !== true) {
+      return;
+    }
+    this.loading = true;
+
+    this.apiService.
+      submitTestimonial({
+        consent:   this.consent.value ?? false,
+        content:   this.content.value ?? undefined,
+        email:     this.email.value ?? undefined,
+        firstName: this.firstName.value ?? undefined,
+        lastName:  this.lastName.value ?? undefined,
+      }).
+      then((response) => {
+        if ("error" in response) {
+          this.error = response.error;
+          this.loading = false;
+        } else {
+          this.error = "";
+          this.success = true;
+        }
+      }).
+      catch(() => {
+        this.error = "An error occurred while submitting the form.";
+        this.loading = false;
+      });
+  }
+}

client/src/app/home/home.component.html

@@ -29,3 +29,6 @@
 <a routerLink="/mentorship">
   <i class="fa-solid fa-brain" aria-hidden="true"></i> Mentorship Programme
 </a>
+<a routerLink="/testimonial">
+  <i class="fa-solid fa-star-half-stroke" aria-hidden="true"></i> Testimonials
+</a>

client/src/app/review/review.component.html

@@ -58,11 +58,21 @@
   >
     Staff Applications
   </button>
+  <button
+    [disabled]="view === 'testimonials'"
+    type="button"
+    (click)="setView('testimonials')"
+  >
+    Testimonials
+  </button>
   <h2>{{ view }}</h2>
   <div *ngFor="let datum of data">
     <h3>{{ datum.email }}</h3>
     <div *ngFor="let obj of datum.info">
-      <p><strong>{{ obj.key }}</strong>: {{ obj.value }}</p>
+      <p>
+        <strong>{{ obj.key }}</strong
+        >: {{ obj.value }}
+      </p>
     </div>
     <button type="button" (click)="markReviewed(datum.id)">
       Mark as Reviewed

client/src/app/review/review.component.ts

@@ -41,7 +41,8 @@ export class ReviewComponent {
     | "events"
     | "meetings"
     | "mentorships"
-    | "staff" = "";
+    | "staff"
+    | "testimonials" = "";
 
   public constructor(private readonly apiService: ApiService) {
     const storedToken = localStorage.getItem("token");
@@ -98,7 +99,8 @@ export class ReviewComponent {
     | "events"
     | "meetings"
     | "mentorships"
-    | "staff";
+    | "staff"
+    | "testimonials";
     void this.apiService.
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- We know token is not null
       markReviewed(view, id, this.token.value!).then((data) => {
@@ -120,7 +122,8 @@ export class ReviewComponent {
       | "events"
       | "meetings"
       | "mentorships"
-      | "staff",
+      | "staff"
+      | "testimonials",
   ): void {
     this.view = view;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- We know token is not null