orionplace-react 0.3.1 → 0.5.0

package/templates/components/orionplace/legal/CookieNotice.README.md

@@ -0,0 +1,42 @@
+# CookieNotice · React
+
+## English
+
+`CookieNotice` tells visitors that the site uses only the cookies it needs and
+links the cookies section of the policy. It renders nothing in server HTML;
+after mounting it appears at the bottom of the screen until the visitor presses
+OK, and the choice is kept in local storage under
+`orionplace-cookie-notice-seen` (`COOKIE_NOTICE_STORAGE_KEY` in
+`lib/orionplace/privacyLabels.ts`). The storefront sets only necessary cookies,
+so the notice asks for no consent; a store that adds analytics or advertising
+cookies needs a consent form instead. The supplied shell does not show it in
+the Android app build.
+
+Source is maintained in `components/orionplace/legal/CookieNotice.tsx`.
+
+### Props
+
+| Prop                              | Meaning                                                                                                   |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `href?: string`                   | Address of the cookies section with the language, for example `/privacy?locale=ru#cookies`. Default: `/privacy#cookies`. |
+| `onNavigate?: (path: string) => void` | Called on an ordinary click of the link with `href`; the host navigates. Without it the link opens normally. |
+
+## Русский
+
+`CookieNotice` сообщает, что сайт использует только необходимые cookie, и
+ведёт в раздел о cookie политики. В серверном HTML его нет; после монтирования
+он показывается внизу экрана, пока посетитель не нажмёт «Понятно», и выбор
+хранится в локальном хранилище под ключом `orionplace-cookie-notice-seen`
+(`COOKIE_NOTICE_STORAGE_KEY` в `lib/orionplace/privacyLabels.ts`). Витрина
+ставит только необходимые cookie, поэтому уведомление не запрашивает согласие;
+магазину, который добавит аналитические или рекламные cookie, нужна форма
+согласия. В сборке приложения для Android оболочка его не показывает.
+
+Поддерживаемый исходный файл: `components/orionplace/legal/CookieNotice.tsx`.
+
+### Свойства
+
+| Свойство                          | Назначение                                                                                                 |
+| --------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `href?: string`                   | Адрес раздела о cookie с языком, например `/privacy?locale=ru#cookies`. По умолчанию `/privacy#cookies`.     |
+| `onNavigate?: (path: string) => void` | Вызывается при обычном щелчке по ссылке с `href`; переход выполняет приложение. Без него ссылка открывается как обычно. |

package/templates/components/orionplace/legal/CookieNotice.module.css

@@ -0,0 +1,48 @@
+.root {
+  position: fixed;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  left: 0.75rem;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.75rem;
+  box-sizing: border-box;
+  padding: 1rem;
+  border: 1px solid var(--orionplace-border);
+  color: var(--orionplace-text);
+  background: var(--orionplace-surface);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.text {
+  margin: 0;
+  color: var(--orionplace-muted);
+}
+
+.text a {
+  color: var(--orionplace-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  white-space: nowrap;
+}
+
+.button {
+  composes: primary from '../shared/features.module.css';
+  flex-shrink: 0;
+}
+
+@media (min-width: 640px) {
+  .root {
+    right: 1.25rem;
+    bottom: 1.25rem;
+    left: auto;
+    max-width: 560px;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+}

package/templates/components/orionplace/legal/CookieNotice.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useEffect, useState, type MouseEvent } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import {
+  COOKIE_NOTICE_STORAGE_KEY,
+  privacyLabels,
+} from '@/lib/orionplace/privacyLabels';
+import styles from './CookieNotice.module.css';
+
+export interface CookieNoticeProps {
+  /** Address of the cookies section, with the language and `#cookies`. */
+  href?: string;
+  /** An ordinary click on the link; the host navigates. */
+  onNavigate?: (path: string) => void;
+}
+
+// The storefront sets only necessary cookies, so this is a notice, not a
+// consent form. It appears after mounting and stays away once dismissed.
+export function CookieNotice({
+  href = '/privacy#cookies',
+  onNavigate,
+}: CookieNoticeProps) {
+  const locale                = useOrionplaceSelections((state) => state.localeCode);
+  const labels                = privacyLabels(locale).cookie;
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    try {
+      setVisible(localStorage.getItem(COOKIE_NOTICE_STORAGE_KEY) !== '1');
+    } catch {
+      setVisible(true);
+    }
+  }, []);
+
+  function dismiss() {
+    setVisible(false);
+    try {
+      localStorage.setItem(COOKIE_NOTICE_STORAGE_KEY, '1');
+    } catch {
+      // Without storage the notice comes back on the next visit.
+    }
+  }
+
+  function open(event: MouseEvent<HTMLAnchorElement>) {
+    if (
+      !onNavigate ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.shiftKey ||
+      event.altKey ||
+      event.button !== 0
+    ) {
+      return;
+    }
+    event.preventDefault();
+    onNavigate(href);
+  }
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      data-feature-part="CookieNotice"
+      role="region"
+      aria-label={labels.label}
+      className={styles.root}
+    >
+      <p className={styles.text}>
+        {labels.text}{' '}
+        <a href={href} onClick={open}>
+          {labels.link}
+        </a>
+      </p>
+      <button type="button" className={styles.button} onClick={dismiss}>
+        {labels.ok}
+      </button>
+    </div>
+  );
+}

package/templates/components/orionplace/legal/StorefrontPrivacy.README.md

@@ -0,0 +1,49 @@
+# StorefrontPrivacy · React
+
+## English
+
+`StorefrontPrivacy` is the store's personal data policy at `/privacy`. It has
+no inputs except `className` and sends no requests. It lists which data the
+store receives, why, who receives it, how long it is kept, the customer's
+rights and the cookies the site sets; a contents list links every section, and
+the cookies section has the anchor `#cookies`. The operator block shows the
+company name, tax ID, registration number, address and phone from the
+Application Load contact details; empty values are left out.
+
+The texts are in `lib/orionplace/privacyLabels.ts`, in Russian and English. A
+store that adds analytics, chat widgets or other cookies lists them in the
+cookies section.
+
+Source is maintained in
+`components/orionplace/legal/StorefrontPrivacy.tsx`; the contact interface is
+`interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonContact.ts`.
+
+### Props
+
+| Prop                 | Meaning                                  |
+| -------------------- | ---------------------------------------- |
+| `className?: string` | Extra class names for the page section.  |
+
+## Русский
+
+`StorefrontPrivacy` — политика обработки персональных данных магазина на
+странице `/privacy`. Кроме `className`, свойств нет; запросов компонент не
+отправляет. Он описывает, какие данные получает магазин, зачем, кому
+передаёт, сколько хранит, права покупателя и cookie сайта; оглавление ведёт к
+каждому разделу, у раздела о cookie якорь `#cookies`. Блок оператора
+показывает название компании, ИНН, регистрационный номер, адрес и телефон из
+контактов загрузки приложения; пустые значения не выводятся.
+
+Тексты — в `lib/orionplace/privacyLabels.ts`, на русском и английском.
+Магазин, который добавит аналитику, чат или другие cookie, перечисляет их в
+разделе о cookie.
+
+Поддерживаемый исходный файл:
+`components/orionplace/legal/StorefrontPrivacy.tsx`; интерфейс контактов —
+`interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonContact.ts`.
+
+### Свойства
+
+| Свойство             | Назначение                                  |
+| -------------------- | ------------------------------------------- |
+| `className?: string` | Дополнительные классы для секции страницы.  |

package/templates/components/orionplace/legal/StorefrontPrivacy.module.css

@@ -0,0 +1,166 @@
+.root {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  color: var(--orionplace-text);
+  font: inherit;
+  /* The page's base text, as `op-feature` in the other packages. */
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  container-type: inline-size;
+}
+
+.header {
+  display: grid;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.25;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.header p {
+  max-width: 42rem;
+  margin: 0;
+  color: var(--orionplace-muted);
+}
+
+.layout {
+  display: grid;
+  align-items: start;
+  gap: 2.5rem;
+  min-width: 0;
+}
+
+.contents,
+.body,
+.section,
+.operator {
+  display: grid;
+  min-width: 0;
+}
+
+.contents {
+  gap: 0.75rem;
+}
+
+.contents h2,
+.section h2,
+.operator h2 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.contents h2 {
+  color: var(--orionplace-muted);
+}
+
+.contents ol {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.contents a {
+  color: var(--orionplace-text);
+  text-decoration: none;
+  outline: none;
+}
+
+.contents a:focus-visible {
+  text-decoration: underline;
+}
+
+@media (hover: hover) {
+  .contents a:hover {
+    text-decoration: underline;
+  }
+}
+
+.body {
+  max-width: 48rem;
+  gap: 2rem;
+}
+
+.section {
+  gap: 0.75rem;
+  scroll-margin-top: 1.5rem;
+}
+
+.section p,
+.operator p {
+  margin: 0;
+}
+
+.operator {
+  gap: 0.75rem;
+  padding: 1.25rem;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+}
+
+.operator p {
+  color: var(--orionplace-muted);
+}
+
+.operator dl {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.detail {
+  display: grid;
+  gap: 0 1.5rem;
+}
+
+.detail dt {
+  color: var(--orionplace-muted);
+}
+
+.detail dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+/* The header's margin spaces the page, so it follows the page's own width. */
+@container (min-width: 592px) {
+  .header {
+    margin-bottom: 3rem;
+    padding-bottom: 2rem;
+  }
+
+  .header h1 {
+    font-size: 1.875rem;
+  }
+
+  .detail {
+    grid-template-columns: 12rem minmax(0, 1fr);
+  }
+}
+
+@container (min-width: 960px) {
+  .layout {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
+    gap: 4rem;
+  }
+
+  .contents {
+    position: sticky;
+    top: 1.5rem;
+  }
+}

package/templates/components/orionplace/legal/StorefrontPrivacy.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useOrionplace, useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import { contactLabels } from '@/lib/orionplace/contactLabels';
+import { privacyLabels } from '@/lib/orionplace/privacyLabels';
+import styles from './StorefrontPrivacy.module.css';
+
+export interface StorefrontPrivacyProps {
+  className?: string;
+}
+
+export function StorefrontPrivacy({ className = '' }: StorefrontPrivacyProps) {
+  const init    = useOrionplace(selectInit);
+  const locale  = useOrionplaceSelections((state) => state.localeCode);
+  const contact = init?.contact;
+  const company =
+    contact?.company_legal_name?.trim() || contact?.company_name?.trim() || '';
+  const labels  = privacyLabels(locale, company);
+  const fields  = contactLabels(locale);
+  // The operator's details as the platform sends them; empty rows are left out.
+  const details = [
+    [fields.legalName, company],
+    [fields.taxId, contact?.company_tax_id],
+    [fields.registrationNumber, contact?.company_organization_id],
+    [fields.address, contact?.company_contact_address],
+    [fields.phone, contact?.company_contact_phone],
+  ]
+    .map(([label, value]) => ({ label: label ?? '', value: value?.trim() ?? '' }))
+    .filter((row) => row.value);
+
+  return (
+    <section
+      data-feature-part="StorefrontPrivacy"
+      className={`${styles.root} ${className}`.trim()}
+    >
+      <header className={styles.header}>
+        <h1>{labels.title}</h1>
+        <p>{labels.lead}</p>
+      </header>
+
+      <div className={styles.layout}>
+        <nav aria-label={labels.contents} className={styles.contents}>
+          <h2>{labels.contents}</h2>
+          <ol>
+            {labels.sections.map((section) => (
+              <li key={section.id}>
+                <a href={`#${section.id}`}>{section.title}</a>
+              </li>
+            ))}
+          </ol>
+        </nav>
+
+        <article className={styles.body}>
+          {labels.sections.map((section) => (
+            <section key={section.id} id={section.id} className={styles.section}>
+              <h2>{section.title}</h2>
+              {section.text.map((line, index) => (
+                <p key={index}>{line}</p>
+              ))}
+            </section>
+          ))}
+
+          <section id="operator-details" className={styles.operator}>
+            <h2>{labels.operator}</h2>
+            {details.length ? (
+              <dl>
+                {details.map((row) => (
+                  <div key={row.label} className={styles.detail}>
+                    <dt>{row.label}</dt>
+                    <dd>{row.value}</dd>
+                  </div>
+                ))}
+              </dl>
+            ) : (
+              <p>{labels.operatorUnknown}</p>
+            )}
+          </section>
+        </article>
+      </div>
+    </section>
+  );
+}

package/templates/components/orionplace/products/ProductReviewImageViewer.README.md

@@ -7,7 +7,11 @@ and public image URLs. `index` chooses the first displayed photo and resets
 the viewer when it changes. Previous and Next, arrow keys, Home, End and
 thumbnail buttons change the photo, and so does a sideways swipe on the large
 photo; `onChange` receives its ID and position. `StorefrontProduct` opens the
-product's own photos here with `label` and `alt`.
+product's own photos here with `label` and `alt`. `BlogArticle` opens the
+images of an article with `captions`, a caption under each photo, and `wide`,
+which lets the viewer use up to 1600px of the screen width instead of 960px
+and adds full-size zoom: the magnifier button or a click on the image shows it
+at its own size, scrolling inside the viewer.
 `onClose` handles the close button, Escape and a click outside the dialog.
 The component returns keyboard focus to the element that opened it. The
 dialog's images are mounted when it opens, so an unopened viewer starts no
@@ -21,6 +25,8 @@ image requests.
 | `index?: number`                                             | Zero-based index of the current item in its collection.                                  |
 | `label?: string`                                             | Dialog name instead of «Review photos».                                                  |
 | `alt?: string`                                               | Photo text before the photo number instead of «Review photo».                            |
+| `captions?: string[]`                                        | Caption under each photo, in the order of `images`.                                      |
+| `wide?: boolean`                                             | Up to 1600px wide instead of 960px, with full-size zoom, for detailed images.            |
 | `onChange?: (photo: { id: number; index: number; }) => void` | Called when the visitor confirms a new value. The callback payload is shown in its type. |
 | `onClose?: () => void`                                       | Called when the visitor closes the panel or dialog. The callback has no payload.         |
 
@@ -32,7 +38,10 @@ image requests.
 клавиши стрелок, Home, End, миниатюры и смахивание по большой фотографии
 меняют фотографию; `StorefrontProduct` открывает здесь фотографии товара с
 `label` и `alt`; `onChange`
-получает её ID и номер в списке. `onClose` обрабатывает кнопку закрытия,
+получает её ID и номер в списке. `BlogArticle` открывает изображения статьи с
+`captions` — подписью под каждой фотографией — и `wide`, при котором
+просмотрщик занимает до 1600px ширины экрана вместо 960px, а кнопка с лупой или
+нажатие на изображение показывает его в полный размер с прокруткой. `onClose` обрабатывает кнопку закрытия,
 Escape и щелчок вне диалога. При закрытии фокус возвращается на элемент,
 который открыл просмотрщик. Изображения появляются при открытии диалога,
 поэтому закрытый просмотрщик не начинает их загрузку.
@@ -44,6 +53,8 @@ Escape и щелчок вне диалога. При закрытии фокус
 | `images: IProductFeedbackImage[]`                            | Упорядоченные изображения галереи.                                                               |
 | `label?: string`                                             | Название диалога вместо «Фотографии к отзыву». |
 | `alt?: string`                                               | Текст фотографии перед её номером вместо «Фотография к отзыву». |
+| `captions?: string[]`                                        | Подпись под каждой фотографией в порядке `images`. |
+| `wide?: boolean`                                             | До 1600px ширины вместо 960px и показ в полный размер — для подробных изображений. |
 | `index?: number`                                             | Индекс текущего элемента в коллекции, начиная с нуля.                                            |
 | `onChange?: (photo: { id: number; index: number; }) => void` | Вызывается, когда покупатель подтверждает новое значение. Данные обработчика указаны в его типе. |
 | `onClose?: () => void`                                       | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.         |

package/templates/components/orionplace/products/ProductReviewImageViewer.module.css

@@ -12,8 +12,9 @@
   color: var(--orionplace-text);
   font-family: inherit;
 }
+.wide { max-width: 1600px; }
 .viewer::backdrop { background: rgb(0 0 0 / 35%); backdrop-filter: blur(2px); }
-.content { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; container: review-image-viewer / inline-size; }
+.content { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto auto; container: review-image-viewer / inline-size; }
 .header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--orionplace-border); }
 .header p { margin: 0; color: var(--orionplace-muted); font-size: 12px; line-height: 1rem; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
 .header button { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; outline: none; background: transparent; color: inherit; font-size: 24px; line-height: 2rem; cursor: pointer; transition: background-color 150ms; }
@@ -48,3 +49,11 @@
   }
 }
 .thumbnails img { width: 100%; height: 100%; object-fit: contain; }
+.caption { margin: 0; padding: 4px 16px 12px; color: var(--orionplace-muted); font-size: 14px; line-height: 1.5rem; text-align: center; }
+.zoom { margin-left: auto; }
+.zoom svg { width: 1.25rem; height: 1.25rem; }
+.fitted { display: contents; }
+.zoomed { position: absolute; inset: 0; overflow: auto; }
+.fullImage { display: block; width: auto; height: auto; max-width: none !important; max-height: none !important; margin: auto; }
+.zoomIn { cursor: zoom-in; }
+.zoomOut { cursor: zoom-out; }

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

@@ -15,11 +15,15 @@ import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage'
 import styles from './ProductReviewImageViewer.module.css';
 
 // `label` and `alt` name the product's own photos on the product page.
+// `captions` are shown under each image (blog article images have them);
+// `wide` lets screenshots and other detailed images use more of the screen.
 export interface ProductReviewImageViewerProps {
   images: IProductFeedbackImage[];
   index?: number;
   label?: string;
   alt?: string;
+  captions?: string[];
+  wide?: boolean;
   onChange?: (photo: { id: number; index: number }) => void;
   onClose?: () => void;
 }
@@ -29,6 +33,8 @@ export function ProductReviewImageViewer({
   index = 0,
   label,
   alt,
+  captions,
+  wide = false,
   onChange,
   onClose,
 }: ProductReviewImageViewerProps) {
@@ -41,6 +47,10 @@ export function ProductReviewImageViewer({
   const [active, setActive] = useState(() => validIndex(index, images.length));
   const current = images[active];
   const several = images.length > 1;
+  const caption = captions?.[active]?.trim() ?? '';
+  // A wide viewer can show the image at its own size; the stage then scrolls.
+  const [zoomed, setZoomed] = useState(false);
+  const toggleZoom = () => setZoomed((value) => wide && !value);
 
   useEffect(() => {
     setMounted(true);
@@ -50,6 +60,11 @@ export function ProductReviewImageViewer({
     setActive(validIndex(index, images.length));
   }, [images, index]);
 
+  // Another photo opens fitted to the screen.
+  useEffect(() => {
+    setZoomed(false);
+  }, [active]);
+
   useEffect(() => {
     const element    = dialog.current;
     if (!mounted || !element) {
@@ -101,7 +116,7 @@ export function ProductReviewImageViewer({
     const touch = event.changedTouches[0];
     const start = swipeStart.current;
     swipeStart.current = undefined;
-    if (!start || !touch || !several) {
+    if (!start || !touch || !several || zoomed) {
       return;
     }
     select(
@@ -150,7 +165,7 @@ export function ProductReviewImageViewer({
     <dialog
       data-stable-modal="fixed"
       ref={dialog}
-      className={styles.viewer}
+      className={wide ? `${styles.viewer} ${styles.wide}` : styles.viewer}
       aria-label={label || labels.photoViewer}
       data-feature-part="ProductReviewImageViewer"
       data-review-image-viewer
@@ -166,6 +181,28 @@ export function ProductReviewImageViewer({
           <p aria-live="polite" data-review-image-position>
             {active + 1} / {images.length}
           </p>
+          {wide ? (
+            <button
+              type="button"
+              className={styles.zoom}
+              aria-label={zoomed ? labels.zoomOut : labels.zoomIn}
+              aria-pressed={zoomed}
+              data-review-image-zoom
+              onClick={toggleZoom}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                aria-hidden="true"
+              >
+                <circle cx="10.5" cy="10.5" r="6.5" />
+                <path d="m15.5 15.5 5 5M7.5 10.5h6" />
+                {zoomed ? null : <path d="M10.5 7.5v6" />}
+              </svg>
+            </button>
+          ) : null}
           <button
             type="button"
             aria-label={common.close}
@@ -176,18 +213,28 @@ export function ProductReviewImageViewer({
           </button>
         </header>
         <div
-          className={several ? `${styles.stage} ${styles.swipe}` : styles.stage}
+          className={several && !zoomed ? `${styles.stage} ${styles.swipe}` : styles.stage}
           data-review-image-stage
           onTouchStart={startSwipe}
           onTouchEnd={endSwipe}
         >
+          {/* At full size the image scrolls inside the stage; the arrows stay in place. */}
           {current && (
-            <OrionplaceImage
-              key={current.id}
-              src={current.image}
-              alt={photoLabel(active)}
-              className={styles.mainImage}
-            />
+            <div
+              className={zoomed ? styles.zoomed : styles.fitted}
+              data-review-image-zoomed={zoomed || undefined}
+            >
+              <OrionplaceImage
+                key={current.id}
+                src={current.image}
+                alt={photoLabel(active)}
+                className={[
+                  zoomed ? styles.fullImage : styles.mainImage,
+                  wide ? (zoomed ? styles.zoomOut : styles.zoomIn) : '',
+                ].join(' ').trim()}
+                onClick={toggleZoom}
+              />
+            </div>
           )}
           {several && (
             <>
@@ -228,6 +275,11 @@ export function ProductReviewImageViewer({
             </>
           )}
         </div>
+        {caption ? (
+          <p className={styles.caption} data-review-image-caption>
+            {caption}
+          </p>
+        ) : null}
         {several && (
           <ol className={styles.thumbnails}>
             {images.map((photo, position) => (