orionplace-react 0.4.0 → 0.5.0

package/README.md

@@ -127,7 +127,7 @@ starting the application. Imports then work at any component directory depth.
 <!-- components:start (generated by scripts/generate-package-readme-components.mjs) -->
 ## Components
 
-The starter includes **124 storefront components**, copied into
+The starter includes **126 storefront components**, copied into
 `components/orionplace/` of your project. Each one has a README in English and Russian
 next to its source that describes its inputs, data and actions.
 
@@ -292,6 +292,8 @@ Journal content and customer contact flows.
 | **Contact details** | `AboutPage` | Display the store’s published company and contact information. |
 | **Contact form** | `ContactForm` | Sending a question to the store. |
 | **Unsubscribe from emails** | `EmailUnsubscribe` | Confirming an unsubscribe request from an email link. |
+| **Privacy policy page** | `StorefrontPrivacy` | The store’s personal data policy with a cookies section and the operator’s details. |
+| **Cookie notice** | `CookieNotice` | A small notice about the necessary cookies with a link to the cookies section of the policy. |
 
 ### Shared interface
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orionplace-react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Next.js 16 storefront for your Orionplace marketplace: setup CLI, server API gateway, typed store and ready-made catalog, cart, checkout and account components in English and Russian, plus an Android app build.",
   "type": "module",
   "license": "MIT",

package/templates/app/StorefrontShell.tsx

@@ -20,6 +20,7 @@ import {
 import { OrionplaceThemeProvider } from '@/components/orionplace/theme/OrionplaceThemeProvider';
 import { StorefrontHeader } from '@/components/orionplace/storefront/StorefrontHeader';
 import { StorefrontFooter } from '@/components/orionplace/storefront/StorefrontFooter';
+import { CookieNotice } from '@/components/orionplace/legal/CookieNotice';
 import { CartPreview } from '@/components/orionplace/cart/CartPreview';
 import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
 import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
@@ -354,6 +355,13 @@ function ShellContent({ children }: { children: ReactNode }) {
       />
       <div className={styles.content}>{children}</div>
       <StorefrontFooter onNavigate={route} />
+      {/* The notice is for the website; the Android app links its policy from the store listing. */}
+      {APP_ORIGIN ? null : (
+        <CookieNotice
+          href={`${localized('/privacy')}#cookies`}
+          onNavigate={route}
+        />
+      )}
     </div>
   );
 }

package/templates/app/_storefront/PrivacyPage.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { StorefrontPrivacy } from '@/components/orionplace/legal/StorefrontPrivacy';
+import styles from '@/app/storefront.module.css';
+
+export function PrivacyPage() {
+  return (
+    <main
+      className={styles.page}
+      data-storefront-page="privacy"
+    >
+      <StorefrontPrivacy />
+    </main>
+  );
+}

package/templates/app/_storefront/storefrontRoutes.tsx

@@ -13,6 +13,7 @@ import { ManufacturersPage } from '@/app/_storefront/ManufacturersPage';
 import { OrdersPage } from '@/app/_storefront/OrdersPage';
 import { ProductPage } from '@/app/_storefront/ProductPage';
 import { ProfilePage } from '@/app/_storefront/ProfilePage';
+import { PrivacyPage } from '@/app/_storefront/PrivacyPage';
 import { PromocodesPage } from '@/app/_storefront/PromocodesPage';
 import { PromoPage } from '@/app/_storefront/PromoPage';
 import { SearchPage } from '@/app/_storefront/SearchPage';
@@ -451,6 +452,8 @@ const routes: Record<string, Loader> = {
     };
   },
 
+  '/privacy': async () => ({ page: <PrivacyPage /> }),
+
   '/profile': async () => ({ page: <ProfilePage /> }),
 
   '/promo/[id]': async (context) => {

package/templates/app/privacy/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/privacy', props);
+}

package/templates/components/orionplace/blog/BlogArticle.README.md

@@ -21,6 +21,14 @@ the image fails. Article videos accept HTTP or HTTPS addresses and the
 backend's `/ps3/...` paths. In an Android app build those paths (cover, videos,
 images and videos inside the text) load from the storefront address.
 
+The cover and the images of the text open larger: a click, Enter or Space on
+one opens `ProductReviewImageViewer` at that image, with the article's other
+images a step away and each image's caption (its `figcaption`, else its
+`title`, else its `alt`) under it. The images get `role="button"`, a keyboard
+stop and an «Open image» name; a zoom-in cursor marks them. Images inside a
+link, a button or a product placement keep their own action. The helper is
+`lib/orionplace/blogImageViewer.ts`.
+
 During server rendering, editor HTML is converted to escaped text paragraphs.
 After hydration, DOMPurify replaces those paragraphs with sanitized formatting.
 The allowlist retains headings, text formatting, links, lists, quotes, code,
@@ -91,6 +99,14 @@ ID тарифов, ссылка также передаёт их в `ids`. Дл
 `preview_image_urls`. Область сохраняет пропорции 3:2. После ошибки загрузки
 обложка исчезает. Компонент выводит только видео с адресами HTTP или HTTPS.
 
+Обложка и изображения текста открываются крупно: нажатие, Enter или пробел на
+изображении открывает `ProductReviewImageViewer` на нём, остальные изображения
+статьи — в одном шаге, а под каждым — его подпись (`figcaption`, иначе `title`,
+иначе `alt`). Изображения получают `role="button"`, остановку клавиатуры и
+название «Открыть изображение»; их отмечает курсор с лупой. Изображения внутри
+ссылки, кнопки или размещения товара сохраняют своё действие. Вспомогательный
+модуль — `lib/orionplace/blogImageViewer.ts`.
+
 При серверном рендеринге HTML редактора превращается в экранированные
 текстовые абзацы. После гидратации DOMPurify заменяет их очищенным
 форматированным HTML. Разрешены заголовки, оформление текста, ссылки, списки,

package/templates/components/orionplace/blog/BlogArticle.module.css

@@ -302,3 +302,8 @@
 @media (prefers-reduced-motion: reduce) {
   .skeleton { animation: none; }
 }
+/* Images that open in the viewer. */
+.cover[data-blog-image-viewer],
+.prose img[data-blog-image-viewer] { cursor: zoom-in; }
+.cover[data-blog-image-viewer]:focus-visible,
+.prose img[data-blog-image-viewer]:focus-visible { outline: 2px solid var(--orionplace-accent); outline-offset: 3px; }

package/templates/components/orionplace/blog/BlogArticle.tsx

@@ -6,6 +6,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type SyntheticEvent,
 } from 'react';
 import {
   useOrionplace,
@@ -41,6 +42,16 @@ import {
   BlogComments,
   type BlogCommentsProps,
 } from './BlogComments';
+import {
+  blogViewerImage,
+  blogViewerImages,
+  blogViewerIndex,
+  blogViewerPhotos,
+  isBlogViewerOpenKey,
+  markBlogViewerImages,
+  type IBlogViewerImage,
+} from '@/lib/orionplace/blogImageViewer';
+import { ProductReviewImageViewer } from '@/components/orionplace/products/ProductReviewImageViewer';
 import styles from './BlogArticle.module.css';
 
 export interface BlogArticleProps extends ProductGroupEvents {
@@ -92,6 +103,9 @@ export function BlogArticle({
   const [mounted, setMounted] = useState(false);
   const [coverFailed, setCoverFailed] = useState(false);
   const articleRef = useRef<HTMLDivElement>(null);
+  const coverRef = useRef<HTMLImageElement>(null);
+  // The cover and the text images open larger in the viewer.
+  const [viewer, setViewer] = useState<{ images: IBlogViewerImage[]; index: number }>();
   const requestRef = useRef<AbortController | undefined>(undefined);
   const previousAuthentication = useRef(authenticated);
   const wasShown = useRef(Boolean(preloaded));
@@ -177,6 +191,30 @@ export function BlogArticle({
     setCoverFailed(false);
   }, [cover]);
 
+  // The text is set as HTML: its images become buttons after each render.
+  useEffect(() => {
+    markBlogViewerImages(
+      blogViewerImages([coverRef.current, articleRef.current]),
+      labels.imageOpen,
+    );
+  }, [html, cover, coverFailed, mounted, labels.imageOpen, post?.id]);
+
+  const openViewer = (event: SyntheticEvent) => {
+    const images = blogViewerImages([coverRef.current, articleRef.current]);
+    const index = blogViewerIndex(event.target, images);
+    if (index < 0) {
+      return;
+    }
+    event.preventDefault();
+    setViewer({
+      index,
+      images: images.map((image) => {
+        const shown = blogViewerImage(image);
+        return image === coverRef.current ? { ...shown, alt: shown.alt || title } : shown;
+      }),
+    });
+  };
+
   useEffect(() => {
     requestRef.current?.abort();
     setAccessChanged(false);
@@ -240,7 +278,16 @@ export function BlogArticle({
       ) : null}
 
       {post ? (
-        <article className={styles.article} data-blog-article={post.id}>
+        <article
+          className={styles.article}
+          data-blog-article={post.id}
+          onClick={openViewer}
+          onKeyDown={(event) => {
+            if (isBlogViewerOpenKey(event.nativeEvent)) {
+              openViewer(event);
+            }
+          }}
+        >
           <header className={styles.header}>
             <h1>{title}</h1>
             <div className={styles.meta}>
@@ -252,6 +299,7 @@ export function BlogArticle({
             </div>
             {cover && !coverFailed ? (
               <img
+                ref={coverRef}
                 src={cover}
                 alt=""
                 width={3}
@@ -344,6 +392,17 @@ export function BlogArticle({
       ) : settled && !pending && !error ? (
         <OrionplaceEmptyState kind="journal" message={labels.unavailable} />
       ) : null}
+      {viewer && viewer.images.length ? (
+        <ProductReviewImageViewer
+          images={blogViewerPhotos(viewer.images)}
+          index={viewer.index}
+          label={labels.imageViewer}
+          alt={title || labels.imageViewer}
+          captions={viewer.images.map((image) => image.caption || image.alt)}
+          wide
+          onClose={() => setViewer(undefined)}
+        />
+      ) : null}
     </section>
   );
 }

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) => (

package/templates/components/orionplace/storefront/StorefrontFooter.tsx

@@ -154,6 +154,9 @@ export function StorefrontFooter({
             <a href={route('/contact')} className={styles.navigationLink}>
               {labels.contact}
             </a>
+            <a href={route('/privacy')} className={styles.navigationLink}>
+              {labels.privacy}
+            </a>
           </nav>
         </div>
         <p className={styles.copyright}>

package/templates/lib/orionplace/blogImageViewer.ts

@@ -0,0 +1,84 @@
+/**
+ * The images of a blog article a reader can open larger: the cover and the
+ * pictures of the article text. Images inside a link, a button or a product
+ * placement keep their own click.
+ */
+export interface IBlogViewerImage {
+  src: string;
+  alt: string;
+  caption: string;
+}
+
+/** The images in the shape the photo viewer takes: one entry per image, numbered in order. */
+export function blogViewerPhotos(images: IBlogViewerImage[]) {
+  return images.map((image, index) => ({ id: index + 1, image: image.src }));
+}
+
+const SKIPPED = 'a, button, [data-product-id], [data-product-ids], [data-blog-image-viewer-skip]';
+
+/** The openable images under the given roots, in reading order. */
+export function blogViewerImages(
+  roots: (ParentNode | null | undefined)[],
+): HTMLImageElement[] {
+  const images: HTMLImageElement[] = [];
+  for (const root of roots) {
+    if (!root || typeof root.querySelectorAll !== 'function') {
+      continue;
+    }
+    const found = isImage(root) ? [root] : [...root.querySelectorAll('img')];
+    for (const image of found) {
+      if (typeof image.closest === 'function' && !image.closest(SKIPPED) && imageSource(image)) {
+        images.push(image);
+      }
+    }
+  }
+  return images;
+}
+
+/** What the viewer shows for one image: its address, text and caption. */
+export function blogViewerImage(image: HTMLImageElement): IBlogViewerImage {
+  const caption = image.closest('figure')?.querySelector('figcaption')?.textContent?.trim() ?? '';
+
+  return {
+    src: imageSource(image),
+    alt: image.alt.trim(),
+    caption: caption || image.title.trim(),
+  };
+}
+
+/**
+ * Makes each image a button for keyboard and screen reader users.
+ * `label` names the action, for example «Open image».
+ */
+export function markBlogViewerImages(images: HTMLImageElement[], label: string) {
+  for (const image of images) {
+    image.dataset.blogImageViewer = '';
+    image.tabIndex = 0;
+    image.setAttribute('role', 'button');
+    const name = image.alt.trim();
+    image.setAttribute('aria-label', name ? `${label}: ${name}` : label);
+  }
+}
+
+/** The position of the clicked or focused image in the list, or -1. */
+export function blogViewerIndex(target: EventTarget | null, images: HTMLImageElement[]) {
+  const image = target && typeof (target as Element).closest === 'function'
+    ? (target as Element).closest('img')
+    : null;
+
+  return image ? images.indexOf(image) : -1;
+}
+
+/** A key that opens the focused image. */
+export function isBlogViewerOpenKey(event: KeyboardEvent) {
+  return event.key === 'Enter' || event.key === ' ';
+}
+
+// No `instanceof HTMLImageElement`: the helper also loads where there is no DOM.
+function isImage(node: ParentNode): node is HTMLImageElement {
+  return (node as Element).tagName === 'IMG';
+}
+
+function imageSource(image: HTMLImageElement) {
+  return image.currentSrc || image.getAttribute('src') || '';
+}

package/templates/lib/orionplace/blogLabels.ts

@@ -40,6 +40,8 @@ const en = {
   articleCount: (count: number) =>
     `${count} ${count === 1 ? 'article' : 'articles'}`,
   noFiltered: 'No articles match the selected filters.',
+  imageOpen: 'Open image',
+  imageViewer: 'Image viewer',
 };
 
 function russianArticleCount(count: number) {
@@ -101,6 +103,8 @@ const ru: typeof en = {
   resetHint: 'Сбросить фильтры статей',
   articleCount: russianArticleCount,
   noFiltered: 'Нет статей по выбранным фильтрам.',
+  imageOpen: 'Открыть изображение',
+  imageViewer: 'Просмотр изображения',
 };
 
 export function blogLabels(locale: string) {

package/templates/lib/orionplace/footerLabels.ts

@@ -7,6 +7,7 @@ export function footerLabels(locale: string) {
         manufacturers: 'Производители',
         sections: 'Покупателям',
         contact: 'Контакты',
+        privacy: 'Политика конфиденциальности',
         home: 'На главную',
         profile: 'Личный кабинет',
         journal: 'Журнал',
@@ -23,6 +24,7 @@ export function footerLabels(locale: string) {
         manufacturers: 'Manufacturers',
         sections: 'Discover',
         contact: 'Contact',
+        privacy: 'Privacy policy',
         home: 'Home',
         profile: 'My account',
         journal: 'Journal',

package/templates/lib/orionplace/pageMetadata.ts

@@ -72,6 +72,7 @@ export function storefrontSeoPage(pathname: string): StorefrontSeoPage {
     'sellers',
     'stores',
     'contact',
+    'privacy',
     'tariffs',
     ...privatePages,
   ]);

package/templates/lib/orionplace/pageSeo.ts

@@ -44,6 +44,11 @@ const pageCopy = {
       'Контакты компании и обратная связь с магазином.',
       'контакты, сообщение',
     ],
+    privacy: [
+      'Политика обработки персональных данных',
+      'Какие данные получает магазин, зачем, кому передаёт, и какие cookie использует сайт.',
+      'персональные данные, политика, cookie',
+    ],
     unsubscribe: [
       'Настройки рассылки',
       'Отписка от писем магазина.',
@@ -166,6 +171,11 @@ const pageCopy = {
       'Company contact details and a message form for the store.',
       'contact, message',
     ],
+    privacy: [
+      'Privacy policy',
+      'Which data the store receives, why, who receives it, and which cookies the site uses.',
+      'personal data, privacy, cookies',
+    ],
     unsubscribe: [
       'Email preferences',
       'Unsubscribe from store emails.',

package/templates/lib/orionplace/privacyLabels.ts

@@ -0,0 +1,198 @@
+/*
+ * Texts of the privacy page (/privacy) and the cookie notice.
+ *
+ * The page describes what the storefront itself does: the account, orders,
+ * the two platform cookies and the notice's own storage mark. A store that
+ * adds analytics, chat widgets or other cookies lists them in the cookies
+ * section here. The operator is the store's company from the platform's
+ * contact details; `{company}` in a text is replaced with its name.
+ */
+
+export interface PrivacySection {
+  id: string;
+  title: string;
+  text: string[];
+}
+
+export interface PrivacyLabels {
+  title: string;
+  lead: string;
+  contents: string;
+  operator: string;
+  operatorUnknown: string;
+  sections: PrivacySection[];
+  cookie: {
+    label: string;
+    text: string;
+    link: string;
+    ok: string;
+  };
+}
+
+/** Local storage mark: the visitor has dismissed the cookie notice. */
+export const COOKIE_NOTICE_STORAGE_KEY = 'orionplace-cookie-notice-seen';
+
+const ru: PrivacyLabels = {
+  title: 'Политика обработки персональных данных',
+  lead: 'Какие данные магазин получает, зачем, кому их передаёт и как долго хранит.',
+  contents: 'Содержание',
+  operator: 'Оператор персональных данных',
+  operatorUnknown: 'Реквизиты оператора указаны на странице «Контакты».',
+  sections: [
+    {
+      id: 'operator',
+      title: '1. Кто обрабатывает данные',
+      text: [
+        'Оператор персональных данных — {company} (далее — Магазин). Реквизиты Магазина указаны в конце страницы.',
+        'Обработка ведётся в соответствии с Федеральным законом № 152-ФЗ «О персональных данных».',
+      ],
+    },
+    {
+      id: 'data',
+      title: '2. Какие данные',
+      text: [
+        'Аккаунт: номер телефона, а если вы их укажете — имя, адрес электронной почты, дата рождения и фото.',
+        'Заказы: товары, адреса доставки, имя и телефон получателя, суммы, способ и статус оплаты, возвраты. Данные карты вводятся на странице платёжного провайдера; Магазин номера карт не получает.',
+        'Обращения, отзывы и комментарии, избранное, подписки на товары и история поиска.',
+        'История входов: дата и время, IP-адрес, браузер и тип устройства.',
+      ],
+    },
+    {
+      id: 'purposes',
+      title: '3. Зачем',
+      text: [
+        'Чтобы вы могли войти, оформить, оплатить, получить и вернуть заказ, получить ответ на обращение и опубликовать отзыв; чтобы защищать аккаунт и выполнять требования закона. Письма о новинках и акциях приходят, только если вы их включили.',
+      ],
+    },
+    {
+      id: 'recipients',
+      title: '4. Кому передаются данные',
+      text: [
+        'Только тем, без кого заказ не выполнить, и в нужном объёме: службам доставки, платёжным провайдерам, операторам связи (для кодов подтверждения) и платформе, на серверах которой работает Магазин. Данные не продаются.',
+      ],
+    },
+    {
+      id: 'storage',
+      title: '5. Сколько хранятся',
+      text: [
+        'Пока существует аккаунт. Записи о заказах и платежах хранятся столько, сколько требует закон о бухгалтерском учёте.',
+      ],
+    },
+    {
+      id: 'rights',
+      title: '6. Ваши права',
+      text: [
+        'В профиле можно изменить свои данные, отключить письма и удалить аккаунт. Также можно узнать, какие данные обрабатываются, потребовать их уточнить или удалить и отозвать согласие: напишите в поддержку или на странице «Контакты».',
+      ],
+    },
+    {
+      id: 'cookies',
+      title: '7. Cookie и локальное хранилище',
+      text: [
+        'Сайт использует только необходимые для работы cookie: sessionid сохраняет вход в аккаунт, csrftoken защищает формы от подделки запросов.',
+        'В локальном хранилище браузера сохраняется отметка о том, что вы видели уведомление о cookie. Рекламных и аналитических cookie нет. Если запретить cookie, вход и оформление заказа не будут работать.',
+      ],
+    },
+    {
+      id: 'changes',
+      title: '8. Изменение политики',
+      text: [
+        'Новая редакция действует с момента публикации на этой странице.',
+      ],
+    },
+  ],
+  cookie: {
+    label: 'Уведомление о cookie',
+    text: 'Сайт использует только необходимые cookie: для входа в аккаунт и защиты форм.',
+    link: 'Подробнее',
+    ok: 'Понятно',
+  },
+};
+
+const en: PrivacyLabels = {
+  title: 'Privacy policy',
+  lead: 'Which data the store receives, why, who it shares it with and how long it keeps it.',
+  contents: 'Contents',
+  operator: 'Data controller',
+  operatorUnknown: 'The controller’s details are on the Contact page.',
+  sections: [
+    {
+      id: 'operator',
+      title: '1. Who processes the data',
+      text: [
+        'The data controller is {company} (the Store). The Store’s details are at the end of this page.',
+        'Data is processed under Russian Federal Law No. 152-FZ “On Personal Data”.',
+      ],
+    },
+    {
+      id: 'data',
+      title: '2. Which data',
+      text: [
+        'Account: phone number and, if you add them, name, email address, date of birth and photo.',
+        'Orders: products, delivery addresses, recipient name and phone, amounts, payment method and status, refunds. Card details are entered on the payment provider’s page; the Store does not receive card numbers.',
+        'Support requests, reviews and comments, wishlist, product subscriptions and search history.',
+        'Sign-in history: date and time, IP address, browser and device type.',
+      ],
+    },
+    {
+      id: 'purposes',
+      title: '3. Why',
+      text: [
+        'To let you sign in, place, pay for, receive and return orders, get answers to requests and publish reviews; to protect the account and meet legal duties. News and promotion emails come only if you turned them on.',
+      ],
+    },
+    {
+      id: 'recipients',
+      title: '4. Who receives the data',
+      text: [
+        'Only those needed to fulfil an order, and only as much as they need: delivery services, payment providers, telecom operators (for confirmation codes) and the platform whose servers run the Store. The data is not sold.',
+      ],
+    },
+    {
+      id: 'storage',
+      title: '5. How long it is kept',
+      text: [
+        'While the account exists. Order and payment records are kept as long as accounting law requires.',
+      ],
+    },
+    {
+      id: 'rights',
+      title: '6. Your rights',
+      text: [
+        'In the profile you can change your details, turn emails off and delete the account. You can also ask which data is processed, ask to correct or delete it and withdraw consent: write to support or use the Contact page.',
+      ],
+    },
+    {
+      id: 'cookies',
+      title: '7. Cookies and local storage',
+      text: [
+        'The site uses only the cookies it needs to work: sessionid keeps you signed in, csrftoken protects forms from request forgery.',
+        'The browser’s local storage keeps the fact that you have seen the cookie notice. There are no advertising or analytics cookies. If you block cookies, signing in and checking out do not work.',
+      ],
+    },
+    {
+      id: 'changes',
+      title: '8. Changes to this policy',
+      text: ['A new version applies from its publication on this page.'],
+    },
+  ],
+  cookie: {
+    label: 'Cookie notice',
+    text: 'The site uses only the cookies it needs: to sign you in and to protect forms.',
+    link: 'Learn more',
+    ok: 'OK',
+  },
+};
+
+export function privacyLabels(locale: string, company = ''): PrivacyLabels {
+  const copy = locale.toLowerCase().startsWith('ru') ? ru : en;
+  const name = company || (copy === ru ? 'Магазин' : 'the Store');
+
+  return {
+    ...copy,
+    sections: copy.sections.map((section) => ({
+      ...section,
+      text: section.text.map((line) => line.replaceAll('{company}', name)),
+    })),
+  };
+}

package/templates/lib/orionplace/reviewLabels.ts

@@ -47,6 +47,8 @@ const en = {
   less: 'Less',
   gallery: 'Product images',
   previousImage: 'Previous image',
+  zoomIn: 'Show at full size',
+  zoomOut: 'Fit to screen',
   nextImage: 'Next image',
   thumbnailsBack: 'Show previous thumbnails',
   thumbnailsForward: 'Show next thumbnails',
@@ -124,6 +126,8 @@ const ru: typeof en = {
   less: 'Свернуть',
   gallery: 'Фотографии товара',
   previousImage: 'Предыдущая фотография',
+  zoomIn: 'Показать в полный размер',
+  zoomOut: 'Вписать в экран',
   nextImage: 'Следующая фотография',
   thumbnailsBack: 'Показать предыдущие миниатюры',
   thumbnailsForward: 'Показать следующие миниатюры',