orionplace-react 0.7.8 → 0.8.0

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

@@ -1,944 +0,0 @@
-'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) ?? '';
-}