WEBDEV-7425 Prep component for details page (#30)

* Support empty review display and add gray BG

* Adjust cancel button behavior

* Switch to correct red color

* Improve star accessibility

* Add spacing improvement

* Switch back to yellow stars with border

* Tidy up following rebase

* Temporarily change clear btn color for accessibility

* Add clearer documentation to form

* Switch to fetch request for form submission

* Interpret json response from endpoint

* Remove duplicated identifier

* Remove more unnecessary inputs and logic

* Prevent other buttons from submitting form

* Adjust review spacing

* Remove some temporary logic

* Improve component accessibility

* Switch to fetch handler service

* Restore tests and use mock fetch handler for demo app

* Switch out ReviewForRender with Review

* Generate submitted review on submit

* Tidy up defaults and tests

* Support passing in user itemname / screenname

* Tidy up following rebase

* Experiment with post request for debugging

* Revert "Experiment with post request for debugging"

This reverts commit 7856bd2.

* Include credentials

* Tidy up

* Adjust mocks to match new API response

* Adjust on-submit behavior and date handling

* Allow sanitized HTML in error messages

* Support review deletion

* Allow linebreaks in error messages

* Allow for string dates in prev review

* Tidy up demo app

* Ensure links inside errors match clear stars link

* Pass identifier to review component

* Adjust error message text

* Adjust unrecoverable error height

* Tidy up following CR

* Delete using screenname instead of itemname

* Adjust fetch handler interface import

* Add submitter param

Author: rebecca-shoptaw

demo/app-root.ts

@@ -9,6 +9,9 @@ import {
 
 import '../src/review-form';
 import '../src/review';
+import { MockFetchHandler } from '../test/mocks/mock-fetch-handler';
+import type { FetchHandlerInterface } from '@internetarchive/fetch-handler-service';
+import { ReviewForm } from '../src/review-form';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
@@ -54,6 +57,8 @@ export class AppRoot extends LitElement {
     reviewer_itemname: '@foo-bar',
   });
 
+  private fetchHandler: FetchHandlerInterface = new MockFetchHandler();
+
   private goodRecaptchaManager: RecaptchaManagerInterface =
     new RecaptchaManager({
       defaultSiteKey: 'demo-key',
@@ -81,13 +86,13 @@ export class AppRoot extends LitElement {
   private useCharCounts: boolean = true;
 
   @state()
-  private useReviewDisplay: boolean = false;
+  private allowDeletion: boolean = false;
 
   @state()
   private review: Review = this.mockOldReview;
 
-  @query('#review-input')
-  private reviewInput!: HTMLTextAreaElement;
+  @query('ia-review-form')
+  private reviewForm!: ReviewForm;
 
   render() {
     return html` <h2>Toggle ReCaptcha</h2>
@@ -126,8 +131,12 @@ export class AppRoot extends LitElement {
         ${this.useCharCounts ? 'Remove' : 'Use'} char count limits
       </button>
       <h2>Toggle review display</h2>
-      <button @click=${() => (this.useReviewDisplay = !this.useReviewDisplay)}>
-        Switch to ${this.useReviewDisplay ? 'form view' : 'review view'}
+      <button
+        @click=${() => {
+          this.reviewForm.displayMode = 'form';
+        }}
+      >
+        Switch to form view
       </button>
       ${this.review !== this.mockOldReview
         ? html`<button @click=${() => (this.review = this.mockOldReview)}>
@@ -149,39 +158,25 @@ export class AppRoot extends LitElement {
             Prefill review with text link
           </button>`
         : nothing}
-
-      <div class="review-body-form">
-        <h2>Adjust review body</h2>
-        <textarea id="review-input"></textarea>
-        <button
-          @click=${() =>
-            (this.review = new Review({
-              reviewtitle: 'What a cool book!',
-              reviewbody: this.reviewInput.value,
-              reviewer: 'Foo Bar',
-              reviewdate: new Date().toDateString(),
-              createdate: '02/07/2025',
-              reviewer_itemname: '@foo-bar',
-            }))}
-        >
-          Update
-        </button>
-      </div>
+      <button @click=${() => (this.allowDeletion = !this.allowDeletion)}>
+        ${this.allowDeletion ? 'Prevent' : 'Allow'} deletion
+      </button>
 
       <div class="container">
         <ia-review-form
           .identifier=${'goody'}
           .oldReview=${this.review}
           .recaptchaManager=${this.recaptchaManager}
           .unrecoverableError=${this.unrecoverableError
-            ? "Sorry, you're not cool enough to write a review for this item."
+            ? 'You must be logged in to write reviews.'
             : undefined}
           .recoverableError=${this.recoverableError
-            ? "Why not try submitting again? What's the worst thing that could happen?"
+            ? "There's a problem submitting your review, please try again later."
             : undefined}
           .maxSubjectLength=${this.useCharCounts ? 100 : undefined}
           .maxBodyLength=${this.useCharCounts ? 1000 : undefined}
-          .displayMode=${this.useReviewDisplay ? 'review' : 'form'}
+          .fetchHandler=${this.fetchHandler}
+          ?canDelete=${this.allowDeletion}
           ?bypassRecaptcha=${this.bypassRecaptcha}
           ?submissionInProgress=${true}
         ></ia-review-form>

package-lock.json

@@ -68,6 +68,7 @@
     ]
   },
   "dependencies": {
+    "@internetarchive/fetch-handler-service": "^1.0.1",
     "@internetarchive/ia-activity-indicator": "^0.0.6",
     "@internetarchive/ia-styles": "^1.0.0",
     "@internetarchive/metadata-service": "^1.0.4",

package.json

@@ -0,0 +1,12 @@
+import { svg } from 'lit';
+
+export default svg`
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" class="delete-icon">
+    <rect width="24" height="24" fill="white"/>
+    <path d="M5 7.5H19L18 21H6L5 7.5Z" stroke="#000000" stroke-linejoin="round"/>
+    <path d="M15.5 9.5L15 19" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 9.5V19" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8.5 9.5L9 19" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16 5H19C20.1046 5 21 5.89543 21 7V7.5H3V7C3 5.89543 3.89543 5 5 5H8M16 5L15 3H9L8 5M16 5H8" stroke="#000000" stroke-linejoin="round"/>
+  </svg>
+`;

src/assets/delete-icon.ts

@@ -4,6 +4,6 @@ export default svg`
   <svg class="star-basic" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <path
     d="m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z"
-    fill="currentColor"
+    fill="2C2C2C"
   />
 </svg>`;

src/assets/star-basic.ts

@@ -4,6 +4,8 @@ export default svg`
   <svg class="star-selected" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <path
     d="m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z"
-    fill="#f0b445"
+    fill="#c2820a"
+    stroke="#c2820a"
+    stroke-width="3px"
   />
 </svg>`;

src/assets/star-selected.ts

@@ -4,6 +4,8 @@ export default svg`
   <svg class="star-unselected" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <path
     d="m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z"
-    fill="#e0e0e0"
+    fill="#ffffff"
+    stroke="#c2820a"
+    stroke-width="3px"
   />
 </svg>`;