orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/products/ProductReviews.tsx

@@ -0,0 +1,944 @@
+'use client';
+
+import { Fragment, useEffect, useRef, useState } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import {
+  selectIsAuthenticated,
+  selectProfile,
+} from '@/stores/orionplace';
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import type { IProductFeedbackImage } from '@/interfaces/orionplace/products/IProduct';
+import {
+  EProductFeedbackStatus,
+  type IProductFeedbackListRequest,
+  type IProductFeedbackPreloadResponse,
+  type IProductFeedbackReactionRequest,
+  type IProductReview,
+  type IProductReviewImage,
+} from '@/interfaces/orionplace/products/IProductFeedbackApi';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { productLabels } from '@/lib/orionplace/productLabels';
+import { reviewLabels } from '@/lib/orionplace/reviewLabels';
+import {
+  reviewAuthorName,
+  reviewProductImage,
+  reviewProductName,
+  reviewProductVariant,
+  reviewStars,
+  reviewStats,
+} from '@/lib/orionplace/reviewPresentation';
+import {
+  reviewDirectReplies,
+  reviewScopeFilters,
+} from '@/lib/orionplace/reviewScope';
+import { OrionplaceAvatar } from '@/components/orionplace/shared/OrionplaceAvatar';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
+import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
+import {
+  ProductReviewForm,
+  type ProductReviewFormValue,
+} from './ProductReviewForm';
+import {
+  ProductReviewGallery,
+  type ProductReviewGalleryProps,
+} from './ProductReviewGallery';
+import { ProductReviewImageViewer } from './ProductReviewImageViewer';
+import styles from './ProductReviews.module.css';
+
+export interface ProductReviewsLoadAction {
+  endpoint:
+    | 'products_feedbacks_mine_get'
+    | 'products_view_feedbacks_feedback_get';
+  request: IProductFeedbackListRequest;
+}
+
+export interface ProductReviewsSubmitContext {
+  productId?: number;
+  editing?: NonNullable<IProductFeedbackPreloadResponse['page_data']>;
+  replyingTo?: IProductReview;
+}
+
+export interface ProductReviewsProps {
+  productId?: number;
+  sellerId?: number;
+  own?: boolean;
+  reviews?: readonly IProductReview[];
+  parents?: readonly IProductReview[];
+  pagination?: Partial<IApiPagination>;
+  stats?: Readonly<Record<string, number>>;
+  loaded?: boolean;
+  pending?: boolean;
+  error?: string;
+  galleryImages?: readonly IProductReviewImage[];
+  galleryPagination?: Partial<IApiPagination>;
+  galleryLoaded?: boolean;
+  galleryPending?: boolean;
+  galleryError?: string;
+  onLoad?: (action: ProductReviewsLoadAction) => void;
+  onGalleryLoad?: ProductReviewGalleryProps['onLoad'];
+  onPhotoReviewLoad?: (action: ProductReviewsLoadAction) => void;
+  onSignInRequired?: () => void;
+  // `action` loads the replies with the current ordering, as Nuxt does.
+  onOpenReplies?: (
+    review: IProductReview,
+    action: ProductReviewsLoadAction,
+  ) => void;
+  // `action` loads the level above with the current tab and filters.
+  onBack?: (action: ProductReviewsLoadAction) => void;
+  onEdit?: (
+    review: IProductReview,
+  ) => Promise<IProductFeedbackPreloadResponse['page_data']> |
+    IProductFeedbackPreloadResponse['page_data'];
+  onSubmit?: (
+    value: ProductReviewFormValue,
+    context: ProductReviewsSubmitContext,
+  ) => Promise<boolean | void> | boolean | void;
+  onReaction?: (
+    request: IProductFeedbackReactionRequest,
+    review: IProductReview,
+  ) => void;
+}
+
+export function ProductReviews({
+  productId,
+  sellerId,
+  own = false,
+  reviews = [],
+  parents = [],
+  pagination = {},
+  stats = {},
+  loaded = false,
+  pending = false,
+  error = '',
+  galleryImages = [],
+  galleryPagination = {},
+  galleryLoaded = false,
+  galleryPending = false,
+  galleryError = '',
+  onLoad,
+  onGalleryLoad,
+  onPhotoReviewLoad,
+  onSignInRequired,
+  onOpenReplies,
+  onBack,
+  onEdit,
+  onSubmit,
+  onReaction,
+}: ProductReviewsProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const authenticated = useOrionplace(selectIsAuthenticated);
+  const profile = useOrionplace(selectProfile);
+  const labels = reviewLabels(locale);
+  const common = featureLabels(locale);
+  const cards = productLabels(locale);
+  const previousSession = useRef({ authenticated, own });
+  const root = useRef<HTMLElement>(null);
+  const [mine, setMine] = useState(own);
+  const [rating, setRating] = useState('');
+  const [photosOnly, setPhotosOnly] = useState(false);
+  const [ordering, setOrdering] = useState('-date_created');
+  const [gallery, setGallery] = useState(false);
+  const [writing, setWriting] = useState(false);
+  // OrionMarketplace's errors on `rating` and `text`, shown under the stars and the
+  // text of the open form.
+  const [ratingError, setRatingError] = useState('');
+  const [textError, setTextError] = useState('');
+  // Errors of the open form's own fields (stars, text) are shown under those
+  // fields; the list's error banner and its refresh button stay for the rest.
+  const [formFieldsOnly, setFormFieldsOnly] = useState(false);
+  const [editing, setEditing] = useState<
+    NonNullable<IProductFeedbackPreloadResponse['page_data']> | undefined
+  >();
+  const [replying, setReplying] = useState<IProductReview | undefined>();
+  const [viewer, setViewer] = useState<{
+    images: IProductFeedbackImage[];
+    index: number;
+  }>();
+  const parent = parents.at(-1);
+  const summary = reviewStats(stats);
+  const scoped = Boolean(productId || sellerId);
+  const hasSummary = scoped && !own && summary.total > 0;
+  const showsProduct = !productId && Boolean(sellerId);
+  const localeQuery = encodeURIComponent(locale);
+  const formReviewId = editing?.id ?? replying?.id;
+  const formNested = reviews.some((review) => review.id === formReviewId);
+  const orderOptions = {
+    '-date_created': labels.newest,
+    '-rating': labels.highest,
+    rating: labels.lowest,
+  };
+
+  // A discussion is always read from the public list, without the rating
+  // and photo filters: replies have no rating of their own.
+  function loadAction(
+    page = 1,
+    next: Partial<{
+      mine: boolean;
+      rating: string;
+      photosOnly: boolean;
+      ordering: string;
+      parentId?: number;
+    }> = {},
+  ): ProductReviewsLoadAction {
+    const parentId = Object.hasOwn(next, 'parentId')
+      ? next.parentId
+      : parent?.id;
+    const nextMine = !parentId && (next.mine ?? mine);
+    const nextRating = parentId ? '' : next.rating ?? rating;
+    const nextPhotosOnly = !parentId && (next.photosOnly ?? photosOnly);
+    const nextOrdering = next.ordering ?? ordering;
+
+    return {
+      endpoint: nextMine
+        ? 'products_feedbacks_mine_get'
+        : 'products_view_feedbacks_feedback_get',
+      request: {
+        filters: {
+          ...reviewScopeFilters({ productId, sellerId }),
+          ...(parentId ? { reply_of_parent: parentId } : {}),
+          ...(nextRating ? { rating: [Number(nextRating)] } : {}),
+          ...(nextPhotosOnly ? { c_images_gte: 1 } : {}),
+          ordering: nextOrdering as NonNullable<
+            IProductFeedbackListRequest['filters']
+          >['ordering'],
+        },
+        paginate: { page, pp_items: 10 },
+      },
+    };
+  }
+
+  function load(page = 1, next: Parameters<typeof loadAction>[1] = {}) {
+    onLoad?.(loadAction(page, next));
+  }
+
+  function openReplies(review: IProductReview) {
+    if (pending) {
+      return;
+    }
+    setMine(false);
+    onOpenReplies?.(review, loadAction(1, { mine: false, parentId: review.id }));
+  }
+
+  // Back at the top level the list returns to the component's own tab.
+  function back() {
+    if (pending) {
+      return;
+    }
+    const above = parents.at(-2);
+    const nextMine = above ? false : own;
+    setMine(nextMine);
+    onBack?.(loadAction(1, { mine: nextMine, parentId: above?.id }));
+  }
+
+  // Every mount asks for the list. A once-only guard lost it in React's
+  // development StrictMode: the review hook aborts its request on the
+  // simulated unmount, and the second mount then never asked again.
+  useEffect(() => {
+    load();
+  }, []);
+
+  useEffect(() => {
+    const previous = previousSession.current;
+    previousSession.current = { authenticated, own };
+    if (previous.authenticated === authenticated && previous.own === own) {
+      return;
+    }
+    setMine(own && authenticated);
+    showForm(false);
+    setEditing(undefined);
+    setReplying(undefined);
+    if (!own || authenticated) {
+      load(1, { mine: own && authenticated, parentId: undefined });
+    }
+  }, [authenticated, own]);
+
+  useEffect(() => {
+    if (writing) {
+      root.current?.querySelector<HTMLTextAreaElement>(
+        '[data-feature-part="ProductReviewForm"] textarea',
+      )?.focus({ preventScroll: true });
+    }
+  }, [writing, editing?.id, replying?.id]);
+
+  // A form opens and closes without the field errors of an earlier attempt.
+  function showForm(next: boolean) {
+    setRatingError('');
+    setTextError('');
+    setFormFieldsOnly(false);
+    setWriting(next);
+  }
+
+  function requireSignIn(action: () => void) {
+    if (!authenticated) {
+      onSignInRequired?.();
+      return;
+    }
+    action();
+  }
+
+  function selectMine(nextMine: boolean) {
+    if (pending) {
+      return;
+    }
+    setMine(nextMine);
+    load(1, { mine: nextMine, parentId: undefined });
+  }
+
+  function filterRating(nextRating: number | '') {
+    if (pending) {
+      return;
+    }
+    const value = String(nextRating);
+    const selected = rating === value ? '' : value;
+    setRating(selected);
+    load(1, { rating: selected });
+  }
+
+  async function editReview(review: IProductReview) {
+    if (!onEdit || pending) {
+      return;
+    }
+    let initial: IProductFeedbackPreloadResponse['page_data'];
+    try {
+      initial = await onEdit(review);
+    } catch {
+      return;
+    }
+    if (!initial || initial.id !== review.id) {
+      return;
+    }
+    // A reply has no stars to choose; older OrionMarketplace versions do not send
+    // is_reply, the list entry knows it too.
+    setEditing({
+      ...initial,
+      is_reply: initial.is_reply ?? Boolean(review.reply_info?.main_reply),
+    });
+    setReplying(undefined);
+    showForm(true);
+  }
+
+  async function submitReview(value: ProductReviewFormValue) {
+    if (!onSubmit) {
+      return;
+    }
+    let saved: boolean | void;
+    setRatingError('');
+    setTextError('');
+    setFormFieldsOnly(false);
+    try {
+      saved = await onSubmit(value, {
+        productId,
+        editing,
+        replyingTo: replying,
+      });
+    } catch (reason) {
+      const fields = (reason as { fields?: Record<string, string> } | null)
+        ?.fields;
+      const keys = Object.keys(fields ?? {});
+      setRatingError(fields?.rating ?? '');
+      setTextError(fields?.text ?? '');
+      setFormFieldsOnly(
+        keys.length > 0 && keys.every((key) => key === 'rating' || key === 'text'),
+      );
+      return;
+    }
+    if (saved !== false) {
+      showForm(false);
+      setEditing(undefined);
+      setReplying(undefined);
+      // As in Nuxt: a saved review waits for moderation, so the list
+      // switches to the customer's own reviews, where it is visible.
+      setMine(true);
+      load(1, { mine: true, parentId: undefined });
+    }
+  }
+
+  function openPhotoReview(feedbackId: number) {
+    onPhotoReviewLoad?.({
+      endpoint: 'products_view_feedbacks_feedback_get',
+      request: {
+        filters: {
+          id: feedbackId,
+          ...reviewScopeFilters({ productId, sellerId }),
+        },
+        paginate: { page: 1, pp_items: 1 },
+      },
+    });
+    setGallery(false);
+  }
+
+  const totalCaption = pluralWord(summary.total, cards.reviews, locale);
+
+  return (
+    <section
+      ref={root}
+      className={styles.section}
+      data-feature-part="ProductReviews"
+    >
+      <header className={styles.header}>
+        <h2>{own ? labels.mine : labels.title}</h2>
+        {productId && !writing ? (
+          <button
+            type="button"
+            className={styles.primary}
+            disabled={pending}
+            data-review-write
+            aria-label={labels.writeHint}
+            onClick={() => requireSignIn(() => {
+              setEditing(undefined);
+              setReplying(undefined);
+              showForm(true);
+            })}
+          >
+            {labels.writeAction}
+          </button>
+        ) : null}
+      </header>
+
+      <div className={`${styles.layout} ${hasSummary ? styles.withSummary : ''}`}>
+        {hasSummary ? (
+          <aside className={styles.summary} data-review-summary>
+            <div className={styles.averageLine}>
+              <span className={styles.average} data-review-average>
+                {summary.average}
+              </span>
+              <span>
+                <Stars
+                  rating={summary.average}
+                  label={`${labels.average}: ${summary.average} ${labels.ofFive}`}
+                  large
+                />
+                <small>{summary.total} {totalCaption}</small>
+              </span>
+            </div>
+            <div
+              role="group"
+              className={styles.ratingRows}
+              aria-label={labels.ratingFilter}
+              data-review-rating-filters
+            >
+              {summary.ratings.map((value) => {
+                const count = Number(stats[value] ?? 0);
+                const share = summary.total ? count / summary.total * 100 : 0;
+                return (
+                  <button
+                    key={value}
+                    type="button"
+                    disabled={pending || !count}
+                    aria-pressed={rating === String(value)}
+                    aria-label={`${value} ${labels.stars}: ${count}`}
+                    data-review-rating-filter={value}
+                    onClick={() => filterRating(value)}
+                  >
+                    <span>{value} ★</span>
+                    <span className={styles.meter} aria-hidden="true">
+                      <span style={{ width: `${share}%` }} />
+                    </span>
+                    <span>{count}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </aside>
+        ) : null}
+
+        <div className={styles.content}>
+          <div className={styles.toolbar} data-review-toolbar>
+            <div className={styles.tabs}>
+              {!own ? (
+                <button
+                  type="button"
+                  disabled={pending}
+                  aria-pressed={!mine}
+                  onClick={() => selectMine(false)}
+                >
+                  {labels.all}
+                </button>
+              ) : null}
+              {authenticated && !own ? (
+                <button
+                  type="button"
+                  disabled={pending}
+                  aria-pressed={mine}
+                  onClick={() => selectMine(true)}
+                >
+                  {labels.mineTab}
+                </button>
+              ) : null}
+              {scoped ? (
+                <button
+                  type="button"
+                  disabled={pending}
+                  aria-expanded={gallery}
+                  data-review-gallery
+                  onClick={() => setGallery((value) => !value)}
+                >
+                  {labels.photosTab}
+                </button>
+              ) : null}
+              <label className={styles.checkbox}>
+                <input
+                  type="checkbox"
+                  checked={photosOnly}
+                  disabled={pending}
+                  data-review-photos-only
+                  onChange={(event) => {
+                    const checked = event.target.checked;
+                    setPhotosOnly(checked);
+                    load(1, { photosOnly: checked });
+                  }}
+                />
+                {labels.photosOnly}
+              </label>
+            </div>
+            <OrionplaceSelect
+              value={ordering}
+              options={orderOptions}
+              label={labels.order}
+              disabled={pending}
+              compact
+              onValueChange={(value) => {
+                setOrdering(value);
+                load(1, { ordering: value });
+              }}
+            />
+          </div>
+
+          {!hasSummary ? (
+            <div
+              role="group"
+              className={styles.chips}
+              aria-label={labels.ratingFilter}
+              data-review-rating-filters
+            >
+              <button
+                type="button"
+                disabled={pending}
+                aria-pressed={!rating}
+                aria-label={labels.allRatings}
+                onClick={() => filterRating('')}
+              >
+                {labels.all}
+              </button>
+              {[5, 4, 3, 2, 1].map((value) => (
+                <button
+                  key={value}
+                  type="button"
+                  disabled={pending}
+                  aria-pressed={rating === String(value)}
+                  aria-label={`${value} ${labels.stars}`}
+                  data-review-rating-filter={value}
+                  onClick={() => filterRating(value)}
+                >
+                  {value}★
+                </button>
+              ))}
+            </div>
+          ) : null}
+
+          {gallery && scoped ? (
+            <ProductReviewGallery
+              productId={productId}
+              sellerId={sellerId}
+              images={galleryImages}
+              pagination={galleryPagination}
+              loaded={galleryLoaded}
+              pending={galleryPending}
+              error={galleryError}
+              onLoad={onGalleryLoad}
+              onSelect={openPhotoReview}
+            />
+          ) : null}
+
+          {parent ? (
+            <div className={styles.parent} data-review-parent={parent.id}>
+              <button type="button" disabled={pending} onClick={back}>
+                ← {common.back}
+              </button>
+              <span>
+                <OrionplaceAvatar
+                  src={parent.user.logo}
+                  name={reviewAuthorName(parent.user)}
+                  size="small"
+                />
+                <span className={styles.parentName}>
+                  {reviewAuthorName(parent.user)}
+                </span>
+              </span>
+              <p>{parent.text}</p>
+            </div>
+          ) : null}
+
+          {error && !(writing && formFieldsOnly) ? (
+            <div className={styles.error} role="alert">
+              <span>{error}</span>
+              <button type="button" disabled={pending} onClick={() => load()}>
+                {common.refresh}
+              </button>
+            </div>
+          ) : null}
+
+          {writing && !formNested ? (
+            <ProductReviewForm
+              key={`${editing?.id ?? 'new'}:${replying?.id ?? ''}`}
+              initial={editing}
+              replyingTo={replying ? reviewAuthorName(replying.user) : undefined}
+              pending={pending}
+              ratingError={ratingError}
+              textError={textError}
+              onSubmit={submitReview}
+              onCancel={() => showForm(false)}
+            />
+          ) : null}
+
+          {pending ? (
+            <p
+              className="op-feature-loading"
+              role="status"
+            >
+              <span className={styles.srOnly}>{common.loading}</span>
+            </p>
+          ) : null}
+          {!pending && loaded && !reviews.length ? (
+            <OrionplaceEmptyState kind="reviews" message={labels.empty} />
+          ) : null}
+
+          <ol className={styles.reviews} aria-busy={pending || undefined}>
+            {reviews.map((review) => (
+              <ReviewEntry
+                key={review.id}
+                review={review}
+                own={own}
+                showsProduct={showsProduct}
+                pending={pending}
+                locale={locale}
+                localeQuery={localeQuery}
+                labels={labels}
+                editing={editing}
+                replying={replying}
+                writing={writing}
+                ratingError={ratingError}
+                textError={textError}
+                profileId={profile?.id}
+                authenticated={authenticated}
+                canReply={Boolean(productId || review.product)}
+                onOpenImage={(index) => setViewer({ images: review.images, index })}
+                onReact={(positive) => requireSignIn(() => onReaction?.({
+                  feedback: review.id,
+                  like_or_dislike: positive,
+                }, review))}
+                onReplies={() => openReplies(review)}
+                onReply={() => requireSignIn(() => {
+                  setEditing(undefined);
+                  setReplying(review);
+                  showForm(true);
+                })}
+                onEdit={() => void editReview(review)}
+                onSubmit={submitReview}
+                onCancel={() => showForm(false)}
+              />
+            ))}
+          </ol>
+          <StorefrontPagination
+            pagination={pagination}
+            pending={pending}
+            onChange={load}
+          />
+        </div>
+      </div>
+
+      {viewer ? (
+        <ProductReviewImageViewer
+          images={viewer.images}
+          index={viewer.index}
+          onClose={() => setViewer(undefined)}
+        />
+      ) : null}
+    </section>
+  );
+}
+
+interface ReviewEntryProps {
+  review: IProductReview;
+  own: boolean;
+  showsProduct: boolean;
+  pending: boolean;
+  locale: string;
+  localeQuery: string;
+  labels: ReturnType<typeof reviewLabels>;
+  editing?: NonNullable<IProductFeedbackPreloadResponse['page_data']>;
+  replying?: IProductReview;
+  writing: boolean;
+  ratingError: string;
+  textError: string;
+  profileId?: number;
+  authenticated: boolean;
+  canReply: boolean;
+  onOpenImage: (index: number) => void;
+  onReact: (positive: boolean) => void;
+  onReplies: () => void;
+  onReply: () => void;
+  onEdit: () => void;
+  onSubmit: (value: ProductReviewFormValue) => void;
+  onCancel: () => void;
+}
+
+function ReviewEntry({
+  review,
+  own,
+  showsProduct,
+  pending,
+  locale,
+  localeQuery,
+  labels,
+  editing,
+  replying,
+  writing,
+  ratingError,
+  textError,
+  profileId,
+  authenticated,
+  canReply,
+  onOpenImage,
+  onReact,
+  onReplies,
+  onReply,
+  onEdit,
+  onSubmit,
+  onCancel,
+}: ReviewEntryProps) {
+  const product = review.product;
+  const author = reviewAuthorName(review.user);
+  const isOwner = authenticated && review.user.id === profileId;
+  const formHere = writing && (editing?.id ?? replying?.id) === review.id;
+
+  return (
+    <li
+      className={`${styles.review} ${own && product ? styles.ownReview : ''}`.trim()}
+      data-review={review.id}
+    >
+      {own && product ? (
+        <a
+          href={`/product/${product.id}?locale=${localeQuery}`}
+          className={styles.productCard}
+          data-review-product-card
+        >
+          <OrionplaceImage
+            src={reviewProductImage(product)}
+            alt=""
+            className={styles.productCardImage}
+          />
+          <span>
+            <small>{labels.product}</small>
+            <span className={styles.productCardName}>
+              {reviewProductName(product, locale, labels.product)}
+            </span>
+            {reviewProductVariant(product, locale) ? (
+              <span className={styles.productCardVariant}>
+                {reviewProductVariant(product, locale)}
+              </span>
+            ) : null}
+          </span>
+        </a>
+      ) : null}
+
+      <div className={styles.author} data-review-author>
+        {!own ? <OrionplaceAvatar src={review.user.logo} name={author} /> : null}
+        <div className={styles.authorText}>
+          <div className={styles.authorLine}>
+            {!own ? <span className={styles.authorName}>{author}</span> : null}
+            {review.rating ? (
+              <Stars
+                rating={review.rating}
+                label={`${labels.rating}: ${review.rating} ${labels.ofFive}`}
+              />
+            ) : null}
+          </div>
+          <time>{review.date_created.date} {review.date_created.time}</time>
+        </div>
+      </div>
+
+      <div className={styles.reviewBody}>
+        {showsProduct && product ? (
+          <a
+            href={`/product/${product.id}?locale=${localeQuery}`}
+            className={styles.productInline}
+            data-review-product
+          >
+            <OrionplaceImage src={reviewProductImage(product)} alt="" />
+            <span>
+              <small>{labels.product}</small>
+              {reviewProductName(product, locale, labels.product)}
+            </span>
+          </a>
+        ) : null}
+        <p>{review.text}</p>
+        {review.status.int !== EProductFeedbackStatus.APROOVED ? (
+          <span className={styles.status}>
+            {review.status.int === EProductFeedbackStatus.PENDING
+              ? labels.pending
+              : labels.denied}
+          </span>
+        ) : null}
+        {review.images.length ? (
+          <div className={styles.reviewImages}>
+            {review.images.map((image, index) => (
+              <button
+                key={image.id}
+                type="button"
+                aria-label={`${labels.openImage}: ${labels.image} ${index + 1}`}
+                aria-haspopup="dialog"
+                data-review-image
+                onClick={() => onOpenImage(index)}
+              >
+                <OrionplaceImage src={image.image} alt="" />
+              </button>
+            ))}
+          </div>
+        ) : null}
+        {review.status.int === EProductFeedbackStatus.APROOVED ||
+        (isOwner && !review.total_c_approved_replies) ? (
+          <div className={styles.actions} data-review-actions>
+            {review.status.int === EProductFeedbackStatus.APROOVED ? (
+              <>
+                <button
+                  type="button"
+                  disabled={pending}
+                  aria-pressed={review.user_like === true}
+                  aria-label={`${labels.helpfulHint} (${labels.liked}): ${review.total_c_likes}`}
+                  onClick={() => onReact(true)}
+                >
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    aria-hidden="true"
+                  >
+                    <path d="M7 10v11H3V10h4Zm0 0 4-7a2 2 0 0 1 3 2l-1 5h6a2 2 0 0 1 2 2.3l-1.3 7A2 2 0 0 1 17.7 21H7" />
+                  </svg>
+                  {labels.liked} <span>{review.total_c_likes}</span>
+                </button>
+                <button
+                  type="button"
+                  disabled={pending}
+                  aria-pressed={review.user_like === false}
+                  aria-label={
+                    `${labels.unhelpfulHint} (${labels.disliked}): ` +
+                    review.total_c_dislikes
+                  }
+                  onClick={() => onReact(false)}
+                >
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    aria-hidden="true"
+                  >
+                    <path d="M17 14V3h4v11h-4Zm0 0-4 7a2 2 0 0 1-3-2l1-5H5a2 2 0 0 1-2-2.3l1.3-7A2 2 0 0 1 6.3 3H17" />
+                  </svg>
+                  {labels.disliked} <span>{review.total_c_dislikes}</span>
+                </button>
+                <button
+                  type="button"
+                  disabled={pending}
+                  aria-label={
+                    `${labels.repliesHint} (${labels.replies}): ` +
+                    reviewDirectReplies(review)
+                  }
+                  data-review-replies
+                  onClick={() => onReplies?.()}
+                >
+                  {labels.replies} <span>{reviewDirectReplies(review)}</span>
+                </button>
+                {canReply ? (
+                  <button
+                    type="button"
+                    disabled={pending}
+                    data-review-reply
+                    onClick={() => onReply?.()}
+                  >
+                    {labels.reply}
+                  </button>
+                ) : null}
+              </>
+            ) : null}
+            {isOwner && !review.total_c_approved_replies ? (
+              <button
+                type="button"
+                disabled={pending}
+                data-review-edit
+                onClick={() => onEdit?.()}
+              >
+                {featureLabels(locale).edit}
+              </button>
+            ) : null}
+          </div>
+        ) : null}
+        {formHere ? (
+          <div className={replying ? styles.replyForm : styles.editForm}>
+            <ProductReviewForm
+              key={`${editing?.id ?? 'new'}:${replying?.id ?? ''}`}
+              initial={editing}
+              replyingTo={replying ? author : undefined}
+              pending={pending}
+              ratingError={ratingError}
+              textError={textError}
+              onSubmit={onSubmit}
+              onCancel={onCancel}
+            />
+          </div>
+        ) : null}
+      </div>
+    </li>
+  );
+}
+
+function Stars({
+  rating,
+  label,
+  large = false,
+}: {
+  rating: number;
+  label: string;
+  large?: boolean;
+}) {
+  const filled = reviewStars(rating);
+  // A space between the stars, as the other packages' templates leave one.
+  return (
+    <span
+      className={large ? `${styles.stars} ${styles.starsLarge}` : styles.stars}
+      role="img"
+      aria-label={label}
+    >
+      {[1, 2, 3, 4, 5].map((star) => (
+        <Fragment key={star}>
+          {star > 1 ? ' ' : null}
+          <span data-filled={star <= filled} aria-hidden="true">★</span>
+        </Fragment>
+      ))}
+    </span>
+  );
+}
+
+function pluralWord(count: number, forms: string[], locale: string) {
+  let rule: Intl.LDMLPluralRule;
+  try {
+    rule = new Intl.PluralRules(locale).select(count);
+  } catch {
+    rule = new Intl.PluralRules('en').select(count);
+  }
+  if (rule === 'one') {
+    return forms[0];
+  }
+  if (rule === 'few' && forms.length > 2) {
+    return forms[1];
+  }
+  return forms.at(-1) ?? '';
+}