orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/components/orionplace/products/ProductReviews.vue

@@ -0,0 +1,1025 @@
+<script setup lang="ts">
+  import { computed, nextTick, ref, watch } from 'vue';
+  import { NuxtLink } from '#components';
+  import { useOrionplaceStore } from '@/stores/orionplace';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { useOrionplaceReviews } from '@/composables/useOrionplaceReviews';
+  import { useOrionplaceFeatureApi } from '@/composables/useOrionplaceFeature';
+  import { useOrionplaceSignIn } from '@/composables/useOrionplaceSignIn';
+  import { reviewLabels } from '@/utils/orionplace/reviewLabels';
+  import { featureLabels } from '@/utils/orionplace/featureLabels';
+  import { productLabels } from '@/utils/orionplace/productLabels';
+  import { getAvailableNestedValueFromObject } from '@/utils/orionplace/presentation';
+  import {
+    reviewDirectReplies,
+    reviewScopeFilters,
+  } from '@/utils/orionplace/reviewScope';
+  import { orderItemVariant } from '@/utils/orionplace/orderPresentation';
+  import { EProductFeedbackStatus } from '@/interfaces/orionplace/products/IProductFeedbackApi';
+  import type {
+    IProductReview,
+    IProductFeedbackListResponse,
+  } from '@/interfaces/orionplace/products/IProductFeedbackApi';
+  import type { IProductFeedbackImage } from '@/interfaces/orionplace/products/IProduct';
+  import ProductReviewForm from '@/components/orionplace/products/ProductReviewForm.vue';
+  import ProductReviewGallery from '@/components/orionplace/products/ProductReviewGallery.vue';
+  import ProductReviewImageViewer from '@/components/orionplace/products/ProductReviewImageViewer.vue';
+  import OrionplaceAvatar from '@/components/orionplace/shared/OrionplaceAvatar.vue';
+  import OrionplaceImage from '@/components/orionplace/shared/OrionplaceImage.vue';
+  import OrionplaceSelect from '@/components/orionplace/shared/OrionplaceSelect.vue';
+  import StorefrontPagination from '@/components/orionplace/shared/StorefrontPagination.vue';
+  import '@/components/orionplace/shared/features.css';
+  import OrionplaceEmptyState from '@/components/orionplace/shared/OrionplaceEmptyState.vue';
+
+  const props        = defineProps<{
+    productId?: number;
+    sellerId?: number;
+    own?: boolean;
+  }>();
+  const store          = useOrionplaceStore();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const reviews        = useOrionplaceReviews(
+    props.productId,
+    props.own,
+    props.sellerId,
+  );
+  const api          = useOrionplaceFeatureApi();
+  const labels       = computed(() => reviewLabels(selectionStore.localeCode));
+  const common       = computed(() => featureLabels(selectionStore.localeCode));
+  const cardLabels   = computed(() => productLabels(selectionStore.localeCode));
+  const gallery      = ref(false);
+  // A guest goes to /profile, which returns to this product page afterwards.
+  const signIn       = useOrionplaceSignIn();
+  const busy         = computed(() => Boolean(reviews.state.pending));
+  const parent       = computed(() => reviews.parents.value.at(-1));
+  const ratings      = [5, 4, 3, 2, 1];
+  const orderOptions = computed(() => ({
+    '-date_created': labels.value.newest,
+    '-rating': labels.value.highest,
+    'rating': labels.value.lowest,
+  }));
+  const formKey      = computed(
+    () =>
+      `${reviews.sent.value}:${reviews.editing.value?.id ?? ''}:${reviews.replying.value?.id ?? ''}`,
+  );
+  const root         = ref<HTMLElement>();
+  // The photos of one review, opened in the viewer without leaving the page.
+  const viewer       = ref<{
+    images: IProductFeedbackImage[];
+    index: number;
+  }>();
+  // A reply and an edited review belong to one review of the current list, so
+  // the form is shown inside that review instead of above the list.
+  const formReviewId = computed(
+    () => reviews.editing.value?.id ?? reviews.replying.value?.id,
+  );
+  const formNested   = computed(() =>
+    reviews.reviews.value.some((review) => review.id === formReviewId.value),
+  );
+  // 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 = computed(() => {
+    const keys = Object.keys(reviews.state.fields);
+
+    return (
+      reviews.writing.value &&
+      keys.length > 0 &&
+      keys.every((key) => key === 'rating' || key === 'text')
+    );
+  });
+
+  function openImage(review: IProductReview, index: number) {
+    viewer.value = { images: review.images, index };
+  }
+  // The form opens where the reader pressed its button, so the focus moves
+  // into it without moving the page.
+  watch([() => reviews.writing.value, formKey], async ([writing]) => {
+    if (!writing) {
+      return;
+    }
+    await nextTick();
+    root.value
+      ?.querySelector<HTMLTextAreaElement>(
+        '[data-feature-part="ProductReviewForm"] textarea',
+      )
+      ?.focus({ preventScroll: true });
+  });
+
+  // stats counts the published reviews of the product (or of every product of
+  // the seller) per rating, independently of the rating, photo and sorting
+  // filters of the current list.
+  const statTotal    = computed(() =>
+    ratings.reduce((sum, rating) => sum + ratingCount(rating), 0),
+  );
+  const average      = computed(() => {
+    if (!statTotal.value) {
+      return 0;
+    }
+
+    const points = ratings.reduce(
+      (sum, rating) => sum + rating * ratingCount(rating),
+      0,
+    );
+
+    return Math.round((points / statTotal.value) * 10) / 10;
+  });
+  const scoped       = computed(() => Boolean(props.productId || props.sellerId));
+  // A seller page shows which product each review belongs to.
+  const showsProduct = computed(() => !props.productId && Boolean(props.sellerId));
+  const hasSummary   = computed(
+    () => scoped.value && !props.own && statTotal.value > 0,
+  );
+  const totalCaption = computed(() =>
+    pluralWord(statTotal.value, cardLabels.value.reviews),
+  );
+
+  function ratingCount(rating: number) {
+    return Number(reviews.stats.value[rating] ?? 0);
+  }
+  function ratingShare(rating: number) {
+    return statTotal.value
+      ? `${(ratingCount(rating) / statTotal.value) * 100}%`
+      : '0%';
+  }
+  function pluralWord(count: number, forms: string[]) {
+    let rule: string;
+
+    try {
+      rule = new Intl.PluralRules(selectionStore.localeCode).select(count);
+    } catch {
+      // Backend locale codes are not always valid BCP 47 tags.
+      rule = new Intl.PluralRules('en').select(count);
+    }
+
+    if (rule === 'one') {
+      return forms[0];
+    }
+    if (rule === 'few' && forms.length > 2) {
+      return forms[1];
+    }
+
+    return forms[forms.length - 1];
+  }
+  // Selecting the active rating again shows every rating.
+  function filterRating(rating: number | '') {
+    const value = String(rating);
+
+    if (busy.value) {
+      return;
+    }
+
+    reviews.rating.value = reviews.rating.value === value ? '' : value;
+    void reviews.load();
+  }
+  // The accessible name keeps the visible one-word label and the count.
+  function actionLabel(
+    hint: 'helpfulHint' | 'unhelpfulHint' | 'repliesHint',
+    label: 'liked' | 'disliked' | 'replies',
+    count: number,
+  ) {
+    return `${labels.value[hint]} (${labels.value[label]}): ${count}`;
+  }
+  function stars(rating: number) {
+    return Math.min(5, Math.max(0, Math.round(rating)));
+  }
+  function authenticated(action: () => unknown) {
+    if (!store.isAuthenticated) {
+      return signIn.requireSignIn();
+    }
+    return action();
+  }
+  function productName(product: NonNullable<IProductReview['product']>) {
+    return (
+      getAvailableNestedValueFromObject(
+        product.locale,
+        selectionStore.localeCode,
+        'product_name',
+      ) || `${labels.value.product} ${product.id}`
+    );
+  }
+  function productImage(product: NonNullable<IProductReview['product']>) {
+    return product.images?.small[0] || product.images?.full[0] || '';
+  }
+  function productVariant(product: NonNullable<IProductReview['product']>) {
+    return orderItemVariant(product, selectionStore.localeCode);
+  }
+  function name(review: IProductReview) {
+    return [review.user.first_name, review.user.last_name]
+      .filter(Boolean)
+      .join(' ');
+  }
+  function openImageReview(feedbackId: number) {
+    return reviews.run('photo-review', async (signal) => {
+      const data               = await api.request<
+        NonNullable<IProductFeedbackListResponse['page_data']>
+      >(
+        'products_view_feedbacks_feedback_get',
+        {
+          filters: {
+            id: feedbackId,
+            ...reviewScopeFilters({
+              productId: props.productId,
+              sellerId: props.sellerId,
+            }),
+          },
+          paginate: { page: 1, pp_items: 1 },
+        },
+        signal,
+      );
+      reviews.reviews.value    = data.feedbacks.data;
+      reviews.pagination.value = data.feedbacks.rpag;
+      reviews.mine.value       = false;
+      reviews.parents.value    = [];
+      gallery.value            = false;
+    });
+  }
+</script>
+
+<template>
+  <section
+    ref="root"
+    class="op-feature @container/reviews w-full max-w-[1120px]"
+    data-feature-part="ProductReviews"
+  >
+    <!--
+      The heading grows from 592px, the width the full-width product and
+      seller pages give the reviews on a 640px screen.
+    -->
+    <header
+      class="
+        mb-8 flex flex-wrap items-center justify-between gap-4
+      "
+    >
+      <h2
+        class="
+          m-0
+          text-lg font-medium uppercase tracking-[0.04em]
+          text-orionplace-text
+          @min-[592px]/reviews:text-2xl
+        "
+      >
+        {{ own ? labels.mine : labels.title }}
+      </h2>
+      <button
+        v-if="productId && !reviews.writing.value"
+        type="button"
+        class="op-feature-button op-feature-primary"
+        :disabled="busy"
+        data-review-write
+        :aria-label="labels.writeHint"
+        @click="authenticated(() => reviews.compose())"
+      >
+        {{ labels.writeAction }}
+      </button>
+    </header>
+
+    <div
+      class="grid min-w-0 gap-10"
+      :class="{
+        '@min-[820px]/reviews:grid-cols-[260px_minmax(0,1fr)]': hasSummary,
+        '@min-[820px]/reviews:gap-16': hasSummary,
+      }"
+    >
+      <aside
+        v-if="hasSummary"
+        class="
+          grid w-full min-w-0 max-w-[420px] content-start gap-6 self-start
+          @min-[820px]/reviews:sticky @min-[820px]/reviews:top-6
+        "
+        data-review-summary
+      >
+        <div class="flex items-end gap-4">
+          <span
+            class="
+              text-5xl font-medium leading-none tabular-nums
+              text-orionplace-text
+            "
+            data-review-average
+          >
+            {{ average }}
+          </span>
+          <span class="grid gap-1 pb-0.5">
+            <span
+              class="text-base tracking-[0.06em]"
+              role="img"
+              :aria-label="`${labels.average}: ${average} ${labels.ofFive}`"
+            >
+              <span
+                v-for="star in 5"
+                :key="star"
+                aria-hidden="true"
+                :class="
+                  star <= stars(average)
+                    ? 'text-orionplace-text'
+                    : 'text-orionplace-border'
+                "
+              >
+                ★
+              </span>
+            </span>
+            <span class="text-xs text-orionplace-muted tabular-nums">
+              {{ statTotal }} {{ totalCaption }}
+            </span>
+          </span>
+        </div>
+        <div
+          role="group"
+          class="grid gap-1"
+          :aria-label="labels.ratingFilter"
+          data-review-rating-filters
+        >
+          <button
+            v-for="rating in ratings"
+            :key="rating"
+            type="button"
+            class="
+              grid grid-cols-[2.25rem_minmax(0,1fr)_2.5rem] items-center gap-3
+              min-h-8 w-full px-2
+              cursor-pointer border border-solid bg-transparent
+              text-left text-xs text-orionplace-text tabular-nums
+              outline-none transition-colors motion-reduce:transition-none
+              enabled:hover:bg-orionplace-hover
+              focus-visible:bg-orionplace-hover
+              disabled:cursor-default disabled:opacity-50
+            "
+            :class="
+              reviews.rating.value === String(rating)
+                ? 'border-orionplace-text'
+                : 'border-transparent'
+            "
+            :disabled="busy || !ratingCount(rating)"
+            :aria-pressed="reviews.rating.value === String(rating)"
+            :aria-label="`${rating} ${labels.stars}: ${ratingCount(rating)}`"
+            :data-review-rating-filter="rating"
+            @click="filterRating(rating)"
+          >
+            <span>{{ rating }} ★</span>
+            <span
+              class="relative h-1.5 overflow-hidden bg-orionplace-border"
+              aria-hidden="true"
+            >
+              <span
+                class="absolute inset-y-0 left-0 bg-orionplace-text"
+                :style="{ width: ratingShare(rating) }"
+              />
+            </span>
+            <span class="text-right text-orionplace-muted">
+              {{ ratingCount(rating) }}
+            </span>
+          </button>
+        </div>
+      </aside>
+
+      <div class="grid min-w-0 content-start gap-6">
+        <div
+          class="
+            flex flex-wrap items-center justify-between gap-x-6 gap-y-3
+            pb-3
+            border-0 border-b border-solid border-orionplace-border
+          "
+          data-review-toolbar
+        >
+          <div class="flex min-w-0 flex-wrap items-center gap-x-5 gap-y-2">
+            <button
+              v-if="!own"
+              type="button"
+              class="review-tab"
+              :disabled="busy"
+              :aria-pressed="!reviews.mine.value"
+              @click="reviews.selectMine(false)"
+            >
+              {{ labels.all }}
+            </button>
+            <button
+              v-if="store.isAuthenticated && !own"
+              type="button"
+              class="review-tab"
+              :disabled="busy"
+              :aria-pressed="reviews.mine.value"
+              @click="reviews.selectMine(true)"
+            >
+              {{ labels.mineTab }}
+            </button>
+            <button
+              v-if="scoped"
+              type="button"
+              class="review-tab"
+              :disabled="busy"
+              :aria-expanded="gallery"
+              data-review-gallery
+              @click="gallery = !gallery"
+            >
+              {{ labels.photosTab }}
+            </button>
+            <label
+              class="
+                inline-flex items-center gap-2
+                cursor-pointer text-xs uppercase tracking-[0.08em]
+                text-orionplace-muted
+              "
+            >
+              <input
+                v-model="reviews.photosOnly.value"
+                class="m-0 h-4 w-4 cursor-pointer accent-orionplace-accent"
+                type="checkbox"
+                :disabled="busy"
+                data-review-photos-only
+                @change="reviews.load()"
+              />
+              {{ labels.photosOnly }}
+            </label>
+          </div>
+          <OrionplaceSelect
+            v-model="reviews.ordering.value"
+            :options="orderOptions"
+            :label="labels.order"
+            :disabled="busy"
+            compact
+            data-review-sort
+            @change="reviews.load()"
+          />
+        </div>
+
+        <div
+          v-if="!hasSummary"
+          role="group"
+          class="flex flex-wrap gap-2"
+          :aria-label="labels.ratingFilter"
+          data-review-rating-filters
+        >
+          <button
+            type="button"
+            class="review-chip"
+            :disabled="busy"
+            :aria-pressed="!reviews.rating.value"
+            :aria-label="labels.allRatings"
+            @click="filterRating('')"
+          >
+            {{ labels.all }}
+          </button>
+          <button
+            v-for="rating in ratings"
+            :key="rating"
+            type="button"
+            class="review-chip tabular-nums"
+            :disabled="busy"
+            :aria-pressed="reviews.rating.value === String(rating)"
+            :aria-label="`${rating} ${labels.stars}`"
+            :data-review-rating-filter="rating"
+            @click="filterRating(rating)"
+          >
+            {{ rating }}★
+          </button>
+        </div>
+
+        <ProductReviewGallery
+          v-if="gallery && scoped"
+          :product-id="productId"
+          :seller-id="sellerId"
+          @select="openImageReview"
+        />
+        <div
+          v-if="parent"
+          class="
+            grid gap-3 py-1 pl-4
+            border-0 border-l-2 border-solid border-orionplace-text
+          "
+        >
+          <button
+            type="button"
+            class="review-action justify-self-start"
+            :disabled="busy"
+            @click="reviews.back()"
+          >
+            ← {{ common.back }}
+          </button>
+          <span class="flex min-w-0 items-center gap-3">
+            <OrionplaceAvatar
+              :src="parent.user.logo"
+              :name="name(parent)"
+              size="small"
+            />
+            <span class="min-w-0 break-words text-sm font-medium">
+              {{ name(parent) }}
+            </span>
+          </span>
+          <p class="m-0 whitespace-pre-wrap break-words text-sm leading-6">
+            {{ parent.text }}
+          </p>
+        </div>
+        <div
+          v-if="reviews.state.error && !formFieldsOnly"
+          class="op-notice op-notice-error"
+          role="alert"
+        >
+          {{ reviews.state.error }}
+          <button
+            class="op-feature-button"
+            type="button"
+            :disabled="busy"
+            @click="reviews.load()"
+          >
+            {{ common.refresh }}
+          </button>
+        </div>
+        <ProductReviewForm
+          v-if="reviews.writing.value && !formNested"
+          :key="formKey"
+          :initial="reviews.editing.value"
+          :replying-to="
+            reviews.replying.value ? name(reviews.replying.value) : undefined
+          "
+          :pending="busy"
+          :rating-error="reviews.state.fields.rating"
+          :text-error="reviews.state.fields.text"
+          @submit="authenticated(() => reviews.submit($event))"
+          @cancel="reviews.writing.value = false"
+        />
+        <p
+          class="op-feature-loading"
+          v-if="busy"
+          role="status"
+        >
+          <span class="sr-only">{{ common.loading }}</span>
+        </p>
+        <OrionplaceEmptyState
+          v-else-if="reviews.loaded.value && !reviews.reviews.value.length"
+          kind="reviews"
+          :message="labels.empty"
+        />
+        <ol
+          class="m-0 grid list-none p-0"
+          :aria-busy="busy || undefined"
+        >
+          <li
+            v-for="review in reviews.reviews.value"
+            :key="review.id"
+            class="
+              grid min-w-0 gap-3 py-6
+              border-0 border-b border-solid border-orionplace-border
+              first:pt-0
+            "
+            :class="{ 'review-own': own && review.product }"
+            data-review
+          >
+            <!--
+              The customer's own reviews start with the product they were
+              written about, so each one says which product it concerns.
+            -->
+            <NuxtLink
+              v-if="own && review.product"
+              class="review-product group"
+              :to="{
+                path: `/product/${review.product.id}`,
+                query: { locale: selectionStore.localeCode },
+              }"
+              data-review-product-card
+            >
+              <OrionplaceImage
+                :src="productImage(review.product)"
+                alt=""
+                class="review-product-image"
+              />
+              <span class="grid min-w-0 content-start gap-1">
+                <span
+                  class="
+                    text-[11px] uppercase tracking-[0.08em]
+                    text-orionplace-muted
+                  "
+                >
+                  {{ labels.product }}
+                </span>
+                <span
+                  class="
+                    line-clamp-3 break-words text-sm leading-5
+                    transition-opacity motion-reduce:transition-none
+                    group-hover:opacity-70 group-focus-visible:opacity-70
+                  "
+                >
+                  {{ productName(review.product) }}
+                </span>
+                <span
+                  v-if="productVariant(review.product)"
+                  class="text-xs leading-5 text-orionplace-muted"
+                >
+                  {{ productVariant(review.product) }}
+                </span>
+              </span>
+            </NuxtLink>
+            <div
+              class="flex min-w-0 items-start gap-3"
+              data-review-author
+            >
+              <OrionplaceAvatar
+                v-if="!own"
+                :src="review.user.logo"
+                :name="name(review)"
+              />
+              <div class="grid min-w-0 flex-1 gap-0.5">
+                <div
+                  class="
+                    flex min-w-0 flex-wrap items-center justify-between
+                    gap-x-3 gap-y-1
+                  "
+                >
+                  <span
+                    v-if="!own"
+                    class="
+                      min-w-0 break-words
+                      text-sm font-medium text-orionplace-text
+                    "
+                  >
+                    {{ name(review) }}
+                  </span>
+                  <span
+                    v-if="review.rating"
+                    class="shrink-0 text-sm tracking-[0.06em]"
+                    role="img"
+                    :aria-label="`${labels.rating}: ${review.rating} ${labels.ofFive}`"
+                  >
+                    <span
+                      v-for="star in 5"
+                      :key="star"
+                      aria-hidden="true"
+                      :class="
+                        star <= stars(review.rating)
+                          ? 'text-orionplace-text'
+                          : 'text-orionplace-border'
+                      "
+                    >
+                      ★
+                    </span>
+                  </span>
+                </div>
+                <time class="text-xs text-orionplace-muted tabular-nums">
+                  {{ review.date_created.date }}
+                  {{ review.date_created.time }}
+                </time>
+              </div>
+            </div>
+            <div
+              class="grid min-w-0 content-start gap-3"
+              :class="{ '@min-[480px]/reviews:pl-[52px]': !own }"
+            >
+              <NuxtLink
+                v-if="showsProduct && review.product"
+                class="
+                  group flex min-w-0 max-w-[68ch] items-center gap-3
+                  justify-self-start
+                  text-orionplace-text no-underline outline-none
+                "
+                :to="{
+                  path: `/product/${review.product.id}`,
+                  query: { locale: selectionStore.localeCode },
+                }"
+                data-review-product
+              >
+                <OrionplaceImage
+                  :src="productImage(review.product)"
+                  alt=""
+                  class="
+                    h-12 w-12 shrink-0 object-contain!
+                    border border-solid border-orionplace-border
+                    bg-orionplace-surface
+                    transition-colors motion-reduce:transition-none
+                    group-hover:border-orionplace-text
+                    group-focus-visible:border-orionplace-text
+                  "
+                />
+                <span class="grid min-w-0 gap-0.5">
+                  <span
+                    class="
+                      text-[11px] uppercase tracking-[0.08em]
+                      text-orionplace-muted
+                    "
+                  >
+                    {{ labels.product }}
+                  </span>
+                  <span
+                    class="
+                      line-clamp-2 break-words
+                      text-sm leading-5
+                      transition-opacity motion-reduce:transition-none
+                      group-hover:opacity-70 group-focus-visible:opacity-70
+                    "
+                  >
+                    {{ productName(review.product) }}
+                  </span>
+                </span>
+              </NuxtLink>
+              <p
+                class="
+                  m-0 max-w-[68ch] whitespace-pre-wrap break-words
+                  text-sm leading-6 text-orionplace-text
+                "
+              >
+                {{ review.text }}
+              </p>
+              <p
+                v-if="review.status.int !== EProductFeedbackStatus.APROOVED"
+                class="
+                  m-0 justify-self-start px-2 py-0.5
+                  text-[11px] uppercase tracking-[0.08em]
+                  border border-solid border-orionplace-border
+                  text-orionplace-muted
+                "
+              >
+                {{
+                  review.status.int === EProductFeedbackStatus.PENDING
+                    ? labels.pending
+                    : labels.denied
+                }}
+              </p>
+              <div
+                v-if="review.images.length"
+                class="flex flex-wrap gap-2"
+              >
+                <button
+                  v-for="(image, position) in review.images"
+                  :key="image.id"
+                  type="button"
+                  class="
+                    block h-20 w-20 overflow-hidden p-0
+                    cursor-pointer rounded-none bg-orionplace-surface
+                    border border-solid border-orionplace-border
+                    outline-none transition-colors motion-reduce:transition-none
+                    hover:border-orionplace-text
+                    focus-visible:border-orionplace-text
+                  "
+                  :aria-label="`${labels.openImage}: ${labels.image} ${position + 1}`"
+                  aria-haspopup="dialog"
+                  data-review-image
+                  @click="openImage(review, position)"
+                >
+                  <OrionplaceImage
+                    :src="image.image"
+                    alt=""
+                    class="h-full w-full object-cover!"
+                  />
+                </button>
+              </div>
+              <div
+                v-if="
+                  review.status.int === EProductFeedbackStatus.APROOVED ||
+                  (reviews.isOwner(review) && !review.total_c_approved_replies)
+                "
+                class="-ml-2 flex flex-wrap items-center gap-x-1 gap-y-1"
+                data-review-actions
+              >
+                <template
+                  v-if="review.status.int === EProductFeedbackStatus.APROOVED"
+                >
+                  <button
+                    class="review-action"
+                    type="button"
+                    :disabled="busy"
+                    :aria-pressed="review.user_like === true"
+                    :aria-label="actionLabel('helpfulHint', 'liked', review.total_c_likes)"
+                    @click="authenticated(() => reviews.react(review, true))"
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      class="h-4 w-4"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="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 class="tabular-nums">{{ review.total_c_likes }}</span>
+                  </button>
+                  <button
+                    class="review-action"
+                    type="button"
+                    :disabled="busy"
+                    :aria-pressed="review.user_like === false"
+                    :aria-label="actionLabel('unhelpfulHint', 'disliked', review.total_c_dislikes)"
+                    @click="authenticated(() => reviews.react(review, false))"
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      class="h-4 w-4"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="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 class="tabular-nums">
+                      {{ review.total_c_dislikes }}
+                    </span>
+                  </button>
+                  <button
+                    class="review-action"
+                    type="button"
+                    :disabled="busy"
+                    :aria-label="
+                      actionLabel(
+                        'repliesHint',
+                        'replies',
+                        reviewDirectReplies(review),
+                      )
+                    "
+                    data-review-replies
+                    @click="reviews.openReplies(review)"
+                  >
+                    {{ labels.replies }}
+                    <span class="tabular-nums">
+                      {{ reviewDirectReplies(review) }}
+                    </span>
+                  </button>
+                  <button
+                    class="review-action"
+                    v-if="productId || review.product"
+                    type="button"
+                    :disabled="busy"
+                    data-review-reply
+                    @click="authenticated(() => reviews.compose(review))"
+                  >
+                    {{ labels.reply }}
+                  </button>
+                </template>
+                <button
+                  v-if="
+                    reviews.isOwner(review) && !review.total_c_approved_replies
+                  "
+                  type="button"
+                  class="review-action"
+                  :disabled="busy"
+                  data-review-edit
+                  @click="reviews.edit(review)"
+                >
+                  {{ common.edit }}
+                </button>
+              </div>
+              <div
+                v-if="reviews.writing.value && formReviewId === review.id"
+                :class="reviews.replying.value ? 'review-branch' : 'mt-1 min-w-0'"
+                data-review-form-branch
+              >
+                <ProductReviewForm
+                  :key="formKey"
+                  :initial="reviews.editing.value"
+                  :replying-to="
+                    reviews.replying.value
+                      ? name(reviews.replying.value)
+                      : undefined
+                  "
+                  :pending="busy"
+                  :rating-error="reviews.state.fields.rating"
+                  :text-error="reviews.state.fields.text"
+                  @submit="authenticated(() => reviews.submit($event))"
+                  @cancel="reviews.writing.value = false"
+                />
+              </div>
+            </div>
+          </li>
+        </ol>
+        <StorefrontPagination
+          :pagination="reviews.pagination.value"
+          :pending="busy"
+          @change="reviews.load"
+        />
+      </div>
+    </div>
+    <ProductReviewImageViewer
+      v-if="viewer"
+      :images="viewer.images"
+      :index="viewer.index"
+      @close="viewer = undefined"
+    />
+  </section>
+</template>
+
+<style scoped>
+  @reference "@/assets/css/orionplace.css";
+
+  .review-tab {
+    @apply inline-flex min-h-8 items-center px-0 py-1;
+    @apply cursor-pointer border-0 border-b border-solid bg-transparent;
+    @apply text-xs font-medium uppercase tracking-[0.08em];
+    @apply outline-none transition-colors motion-reduce:transition-none;
+    border-color: transparent;
+    color: var(--orionplace-muted);
+  }
+
+  .review-tab:focus-visible,
+  .review-tab[aria-pressed='true'],
+  .review-tab[aria-expanded='true'] {
+    color: var(--orionplace-text);
+  }
+
+  @media (hover: hover) {
+    .review-tab:hover {
+      color: var(--orionplace-text);
+    }
+  }
+
+  .review-tab[aria-pressed='true'],
+  .review-tab[aria-expanded='true'] {
+    border-color: var(--orionplace-text);
+  }
+
+  .review-tab:disabled,
+  .review-chip:disabled,
+  .review-action:disabled {
+    @apply cursor-default opacity-60;
+  }
+
+  .review-chip {
+    @apply box-border inline-flex h-8 items-center justify-center px-3;
+    @apply cursor-pointer border border-solid bg-transparent;
+    @apply text-xs;
+    @apply outline-none transition-colors motion-reduce:transition-none;
+    border-color: var(--orionplace-border);
+    color: var(--orionplace-text);
+  }
+
+  .review-chip:focus-visible {
+    border-color: var(--orionplace-text);
+  }
+
+  @media (hover: hover) {
+    .review-chip:hover {
+      border-color: var(--orionplace-text);
+    }
+  }
+
+  .review-chip[aria-pressed='true'] {
+    border-color: var(--orionplace-text);
+    box-shadow: inset 0 0 0 1px var(--orionplace-text);
+  }
+
+  .review-action {
+    @apply box-border inline-flex min-h-8 items-center gap-1.5 px-2;
+    @apply cursor-pointer border-0 bg-transparent;
+    @apply text-xs;
+    @apply outline-none transition-colors motion-reduce:transition-none;
+    color: var(--orionplace-muted);
+  }
+
+  .review-action:focus-visible {
+    background: var(--orionplace-hover);
+    color: var(--orionplace-text);
+  }
+
+  @media (hover: hover) {
+    .review-action:hover {
+      background: var(--orionplace-hover);
+      color: var(--orionplace-text);
+    }
+  }
+
+  .review-action[aria-pressed='true'] {
+    color: var(--orionplace-text);
+  }
+
+  /*
+   * A reply and an edited review are written inside the review they belong
+   * to. A reply is indented under the answered review; the form's own frame
+   * is its only border, so no second rule runs beside it. An edited review
+   * replaces the review in place without an indent.
+   */
+  /*
+   * An own review sits beside its product: a product column on the left and
+   * the review on the right from 640px of the list width; a narrow list keeps
+   * the product as a compact row above the review.
+   */
+  .review-own {
+    @apply @min-[640px]/reviews:grid-cols-[160px_minmax(0,1fr)];
+    @apply @min-[640px]/reviews:grid-rows-[auto_1fr];
+    @apply @min-[640px]/reviews:gap-x-8;
+  }
+
+  .review-own > :not(.review-product) {
+    @apply @min-[640px]/reviews:col-start-2;
+  }
+
+  .review-product {
+    @apply flex min-w-0 items-start gap-3 self-start;
+    @apply text-orionplace-text no-underline outline-none;
+    @apply @min-[640px]/reviews:row-span-2 @min-[640px]/reviews:flex-col;
+  }
+
+  .review-product-image {
+    @apply box-border h-16 w-16 shrink-0 object-contain!;
+    @apply border border-solid border-orionplace-border bg-orionplace-surface;
+    @apply transition-colors motion-reduce:transition-none;
+    @apply group-hover:border-orionplace-text;
+    @apply group-focus-visible:border-orionplace-text;
+    @apply @min-[640px]/reviews:h-auto @min-[640px]/reviews:w-full;
+    @apply @min-[640px]/reviews:aspect-square;
+  }
+
+  .review-branch {
+    @apply box-border mt-1 min-w-0 pl-4;
+  }
+</style>