orionplace-nuxt 0.4.0 → 0.5.0

package/README.md

@@ -129,7 +129,7 @@ Framework imports such as `#imports` keep their own names.
 <!-- 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
 `app/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.
 
@@ -294,6 +294,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
 
@@ -1096,10 +1098,14 @@ red `*` directly after the label text.
 
 The default layout renders the [footer](https://orionmarket.place/en/sandbox/components/nuxt/footer)
 with real store categories, home-section anchors, profile/journal navigation,
-a contact-page link and social links. On `/contact`, `StorefrontContact` places
+a contact-page link, a `/privacy` link and social links. On `/contact`, `StorefrontContact` places
 company details (address, `tel:` phone link, registration numbers with copy
 buttons and social links) in a column beside the bordered message-form panel;
-the columns stack on narrow screens and empty details are hidden.
+the columns stack on narrow screens and empty details are hidden. `/privacy`
+shows the store's privacy policy (`StorefrontPrivacy`, texts in
+`app/utils/orionplace/privacyLabels.ts`) with the operator's details; on the
+website the layout's `CookieNotice` links its `#cookies` section until the
+visitor dismisses it.
 The home banner spans the available viewport
 width without a frame. Its media area keeps the same proportions at every width; the image fills the
 area without distortion and crops its edges when needed. Event media keeps its

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orionplace-nuxt",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Nuxt 4 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/src/project-readme.mjs

@@ -122,9 +122,11 @@ red \`*\` directly after the label text.
 
 The default layout renders the [footer](https://orionmarket.place/en/sandbox/components/nuxt/footer)
 with real store categories, home-section anchors, profile/journal navigation,
-a \`/contact\` link, social links and the company name in its copyright line.
-Company contact and registration details appear beside the message form on
-\`/contact\`. The home banner spans the available viewport
+a \`/contact\` link, a \`/privacy\` link, social links and the company name in
+its copyright line. Company contact and registration details appear beside the
+message form on \`/contact\`. \`/privacy\` shows the store's privacy policy
+(texts in \`app/utils/orionplace/privacyLabels.ts\`); on the website a cookie
+notice links its \`#cookies\` section until the visitor dismisses it. The home banner spans the available viewport
 width without a frame. Its media area keeps the same proportions at every width; the image fills the
 area without distortion and crops its edges when needed. Event media keeps its
 own reserved proportions, which differ on a narrow screen.

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

@@ -20,7 +20,7 @@ After client-side navigation, while the first `blog_posts_get` request runs, a p
 
 When `has_full_access` is false, the article shows its preview and an access panel: the text explains that the full article opens with an active subscription plan that includes it, and the Plans link opens the storefront plans page `/tariffs` with the current `locale`. `premium_tariff_ids` lists the IDs of the plans that include the article; the link passes them as `ids`, so the plans page shows only those plans. Without those IDs the link opens the whole list.
 
-The first preview image is shown above the text, in an area that keeps its proportions. A post without a preview image, or with an image that fails to load, shows no cover. Article videos are shown with their poster image; their addresses may be backend paths (`/ps3/...`). In an Android app build the backend's own media paths (`/ps3/...`: cover, article videos, images and videos inside the text) load from the storefront address.
+The first preview image is shown above the text, in an area that keeps its proportions. A post without a preview image, or with an image that fails to load, shows no cover. 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 `app/utils/orionplace/blogImageViewer.ts`. Article videos are shown with their poster image; their addresses may be backend paths (`/ps3/...`). In an Android app build the backend's own media paths (`/ps3/...`: cover, article videos, images and videos inside the text) load from the storefront address.
 
 When the first successful `blog_posts_get` response has no article with this ID, the server render of the supplied page answers HTTP 404; after client-side navigation the component emits `missing`. The backend returns an empty list for an unknown ID, an unpublished article and a subscription-only article that the current visitor cannot open. An article returned with `has_full_access = false` keeps its preview and the access panel with the Plans link. An article that disappears after sign-out keeps the “This article is unavailable” state on the page. A failed request is not a missing article: the error notice keeps its Refresh button. The supplied `app/pages/journal/[id].vue` opens the storefront 404 page on `missing` through `useOrionplaceMissingPage()`.
 

package/templates/app/components/orionplace/blog/BlogArticle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { computed, onMounted, ref, watch } from 'vue';
+  import { computed, nextTick, onMounted, ref, watch } from 'vue';
   import { useRuntimeConfig } from '#imports';
   import { useOrionplaceStore } from '@/stores/orionplace';
   import { useOrionplaceProductsStore } from '@/stores/orionplaceProducts';
@@ -25,6 +25,16 @@
     nativeAppOrigin,
   } from '@/utils/orionplace/nativeApp';
   import { requestBlogPost } from '@/utils/orionplace/blogLayout';
+  import {
+    blogViewerImage,
+    blogViewerImages,
+    blogViewerPhotos,
+    blogViewerIndex,
+    isBlogViewerOpenKey,
+    markBlogViewerImages,
+  } from '@/utils/orionplace/blogImageViewer';
+  import type { IBlogViewerImage } from '@/utils/orionplace/blogImageViewer';
+  import ProductReviewImageViewer from '@/components/orionplace/products/ProductReviewImageViewer.vue';
   import type { IBlogPost } from '@/interfaces/orionplace/blog/IBlogApi';
   import type { IProductSecondaryVariantRequest } from '@/interfaces/orionplace/products/IProductSecondaryVariantRequest';
   import type {
@@ -75,6 +85,10 @@
   const task           = useOrionplaceTask();
   const post           = ref<IBlogPost>();
   const article        = ref<HTMLElement>();
+  const coverImage     = ref<HTMLImageElement>();
+  // The cover and the text images open larger in the viewer.
+  const viewerImages   = ref<IBlogViewerImage[]>([]);
+  const viewerStart    = ref(-1);
   const accessChanged  = ref(false);
   const coverFailed    = ref(false);
   const appOrigin      = nativeAppOrigin(
@@ -230,6 +244,44 @@
     wasShown.value = true;
     showProducts(props.initialPost.related_products);
   }
+  function openableImages() {
+    return blogViewerImages([coverImage.value, article.value]);
+  }
+
+  // The text is set with v-html: its images become buttons after each render.
+  watch(
+    [html, cover, mounted, () => labels.value.imageOpen, () => post.value?.id],
+    () => {
+      void nextTick(() => markBlogViewerImages(openableImages(), labels.value.imageOpen));
+    },
+    { flush: 'post' },
+  );
+
+  function openViewer(event: Event) {
+    const images = openableImages();
+    const index  = blogViewerIndex(event.target, images);
+    if (index < 0) {
+      return;
+    }
+    event.preventDefault();
+    viewerImages.value = images.map((image) => {
+      const shown = blogViewerImage(image);
+      return image === coverImage.value ? { ...shown, alt: shown.alt || title.value } : shown;
+    });
+    viewerStart.value  = index;
+  }
+
+  function onArticleKeydown(event: KeyboardEvent) {
+    if (isBlogViewerOpenKey(event)) {
+      openViewer(event);
+    }
+  }
+
+  // The viewer gives the focus back to the image that opened it.
+  function closeViewer() {
+    viewerStart.value = -1;
+  }
+
   onMounted(() => {
     mounted.value = true;
     if (!preloaded) {
@@ -277,6 +329,8 @@
     <article
       v-if="post"
       class="op-feature-stack mx-auto w-full max-w-[720px]"
+      @click="openViewer"
+      @keydown="onArticleKeydown"
     >
       <header class="op-feature-stack">
         <h1
@@ -302,6 +356,7 @@
         </div>
         <img
           v-if="cover && !coverFailed"
+          ref="coverImage"
           :src="cover"
           alt=""
           width="3"
@@ -471,6 +526,16 @@
       kind="journal"
       :message="labels.unavailable"
     />
+    <ProductReviewImageViewer
+      v-if="viewerStart >= 0 && viewerImages.length"
+      :images="blogViewerPhotos(viewerImages)"
+      :index="viewerStart"
+      :label="labels.imageViewer"
+      :alt="title || labels.imageViewer"
+      :captions="viewerImages.map((image) => image.caption || image.alt)"
+      wide
+      @close="closeViewer"
+    />
   </section>
 </template>
 
@@ -683,6 +748,18 @@
     vertical-align: bottom;
   }
 
+  /* Images that open in the viewer. */
+  [data-blog-article-cover][data-blog-image-viewer],
+  .op-feature-prose :deep(img[data-blog-image-viewer]) {
+    cursor: zoom-in;
+  }
+
+  [data-blog-article-cover][data-blog-image-viewer]:focus-visible,
+  .op-feature-prose :deep(img[data-blog-image-viewer]:focus-visible) {
+    outline: 2px solid var(--orionplace-accent);
+    outline-offset: 3px;
+  }
+
   .op-feature-prose :deep(:where(img, video)) {
     display: block;
     max-width: 100%;

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

@@ -0,0 +1,34 @@
+# CookieNotice · Nuxt
+
+A small notice about the necessary cookies with a link to the cookies section of the policy.
+
+The supplied layout shows it on every page of the website, not in the Android app build.
+[English guide](https://orionmarket.place/en/sandbox/components/nuxt/cookie-notice) ·
+[Russian guide](https://orionmarket.place/ru/sandbox/components/nuxt/cookie-notice)
+
+## Contract and dependencies
+
+After mounting, the notice appears at the bottom of the screen until the
+visitor presses OK; the choice is kept in local storage under
+`orionplace-cookie-notice-seen` (`COOKIE_NOTICE_STORAGE_KEY` in
+`app/utils/orionplace/privacyLabels.ts`). Server HTML never contains it. 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.
+
+`href` is the address of the cookies section with the language, for example
+`/privacy?locale=ru#cookies`; the default is `/privacy#cookies`. An ordinary
+click on the link emits `navigate` with `href`; the layout navigates.
+
+Source is maintained in
+`app/components/orionplace/legal/CookieNotice.vue`.
+
+The configured Nuxt starter initializes Application Load and its named API client.
+Component-source ZIPs contain imported children, types,
+composables, labels and styles. The included `orionplace/COMPONENT-DOWNLOAD.md`
+describes dependencies, theme and consumer configuration. Standalone file
+copying requires the same dependencies. Links to storefront routes use the
+pages supplied by the full starter.
+
+## Endpoint coverage
+
+None.

package/templates/app/components/orionplace/legal/CookieNotice.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue';
+
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import {
+    COOKIE_NOTICE_STORAGE_KEY,
+    privacyLabels,
+  } from '@/utils/orionplace/privacyLabels';
+  import '@/components/orionplace/shared/features.css';
+
+  // The storefront sets only necessary cookies, so this is a notice, not a
+  // consent form. It appears after mounting and stays away once dismissed.
+  const props          = withDefaults(defineProps<{ href?: string }>(), {
+    href: '/privacy#cookies',
+  });
+  const emit           = defineEmits<{ navigate: [path: string] }>();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const labels         = computed(() => privacyLabels(selectionStore.localeCode).cookie);
+  const visible        = ref(false);
+
+  function dismiss() {
+    visible.value = false;
+    try {
+      localStorage.setItem(COOKIE_NOTICE_STORAGE_KEY, '1');
+    } catch {
+      // Without storage the notice comes back on the next visit.
+    }
+  }
+
+  function open(event: MouseEvent) {
+    if (
+      event.ctrlKey ||
+      event.metaKey ||
+      event.shiftKey ||
+      event.altKey ||
+      event.button !== 0
+    ) {
+      return;
+    }
+    event.preventDefault();
+    emit('navigate', props.href);
+  }
+
+  onMounted(() => {
+    try {
+      visible.value = localStorage.getItem(COOKIE_NOTICE_STORAGE_KEY) !== '1';
+    } catch {
+      visible.value = true;
+    }
+  });
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    data-feature-part="CookieNotice"
+    role="region"
+    :aria-label="labels.label"
+    class="
+      op-feature fixed inset-x-3 bottom-3 z-40
+      flex flex-col items-stretch gap-3
+      border border-solid border-orionplace-border
+      bg-orionplace-surface p-4 shadow-lg
+      sm:left-auto sm:right-5 sm:bottom-5 sm:max-w-[560px]
+      sm:flex-row sm:items-center sm:gap-4
+    "
+  >
+    <p class="op-feature-copy op-feature-muted">
+      {{ labels.text }}
+      <a
+        :href="props.href"
+        class="whitespace-nowrap text-orionplace-text underline underline-offset-2"
+        @click="open"
+      >{{ labels.link }}</a>
+    </p>
+    <button
+      type="button"
+      class="op-feature-button op-feature-primary shrink-0"
+      @click="dismiss"
+    >
+      {{ labels.ok }}
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,35 @@
+# StorefrontPrivacy · Nuxt
+
+The store's personal data policy with a cookies section and the operator's details.
+
+The supplied storefront uses this component at `/privacy`; the footer links it.
+[English guide](https://orionmarket.place/en/sandbox/components/nuxt/privacy-page) ·
+[Russian guide](https://orionmarket.place/ru/sandbox/components/nuxt/privacy-page)
+
+## Contract and dependencies
+
+The page has no inputs 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; the cookies
+section has the anchor `#cookies`, which the cookie notice opens. The operator
+block shows the company name, tax ID, registration number, address and phone
+from `store.init.contact`; empty values are left out.
+
+The texts are in `app/utils/orionplace/privacyLabels.ts`, in Russian and
+English. They describe the storefront as supplied: the `sessionid` and
+`csrftoken` cookies and the notice's own local storage mark. A store that adds
+analytics, chat widgets or other cookies lists them in the cookies section.
+
+Source is maintained in
+`app/components/orionplace/legal/StorefrontPrivacy.vue`; the primary interface is `app/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonContact.ts`.
+
+The configured Nuxt starter initializes Application Load and its named API client.
+Component-source ZIPs contain imported children, types,
+composables, labels and styles. The included `orionplace/COMPONENT-DOWNLOAD.md`
+describes dependencies, theme and consumer configuration. Standalone file
+copying requires the same dependencies. Links to storefront routes use the
+pages supplied by the full starter.
+
+## Endpoint coverage
+
+None: the page reads the Application Load contact details.

package/templates/app/components/orionplace/legal/StorefrontPrivacy.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+
+  import { useOrionplaceStore } from '@/stores/orionplace';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { contactLabels } from '@/utils/orionplace/contactLabels';
+  import { privacyLabels } from '@/utils/orionplace/privacyLabels';
+  import '@/components/orionplace/shared/features.css';
+
+  const store          = useOrionplaceStore();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const contact        = computed(() => store.init?.contact);
+  const company        = computed(
+    () =>
+      contact.value?.company_legal_name?.trim() ||
+      contact.value?.company_name?.trim() ||
+      '',
+  );
+  const labels         = computed(() =>
+    privacyLabels(selectionStore.localeCode, company.value),
+  );
+  const fields         = computed(() => contactLabels(selectionStore.localeCode));
+  // The operator's details as the platform sends them; empty rows are left out.
+  const details        = computed(() =>
+    [
+      [fields.value.legalName, company.value],
+      [fields.value.taxId, contact.value?.company_tax_id],
+      [fields.value.registrationNumber, contact.value?.company_organization_id],
+      [fields.value.address, contact.value?.company_contact_address],
+      [fields.value.phone, contact.value?.company_contact_phone],
+    ]
+      .map(([label, value]) => ({ label, value: value?.trim() ?? '' }))
+      .filter((row) => row.value),
+  );
+</script>
+
+<template>
+  <section
+    data-feature-part="StorefrontPrivacy"
+    class="op-feature grid w-full @container"
+  >
+    <header
+      class="
+        grid gap-3
+        border-0 border-b border-solid border-orionplace-border
+        mb-8 pb-6 @min-[592px]:mb-12 @min-[592px]:pb-8
+      "
+    >
+      <h1 class="op-feature-title">{{ labels.title }}</h1>
+      <p class="op-feature-copy op-feature-muted max-w-2xl">{{ labels.lead }}</p>
+    </header>
+
+    <div
+      class="
+        grid items-start gap-10
+        @min-[960px]:grid-cols-[minmax(0,3fr)_minmax(0,9fr)] @min-[960px]:gap-16
+      "
+    >
+      <nav
+        :aria-label="labels.contents"
+        class="grid gap-3 @min-[960px]:sticky @min-[960px]:top-6"
+      >
+        <h2 class="op-feature-subtitle op-feature-muted">{{ labels.contents }}</h2>
+        <ol class="m-0 grid list-none gap-2 p-0">
+          <li
+            v-for="section in labels.sections"
+            :key="section.id"
+          >
+            <a
+              :href="`#${section.id}`"
+              class="
+                text-orionplace-text no-underline outline-none
+                hover:underline focus-visible:underline
+              "
+            >{{ section.title }}</a>
+          </li>
+        </ol>
+      </nav>
+
+      <article class="grid min-w-0 max-w-3xl gap-8">
+        <section
+          v-for="section in labels.sections"
+          :id="section.id"
+          :key="section.id"
+          class="grid scroll-mt-6 gap-3"
+        >
+          <h2 class="op-feature-subtitle">{{ section.title }}</h2>
+          <p
+            v-for="(line, index) in section.text"
+            :key="index"
+            class="op-feature-copy"
+          >
+            {{ line }}
+          </p>
+        </section>
+
+        <section
+          id="operator-details"
+          class="op-feature-panel grid gap-3"
+        >
+          <h2 class="op-feature-subtitle">{{ labels.operator }}</h2>
+          <dl
+            v-if="details.length"
+            class="m-0 grid gap-x-6 gap-y-2 @min-[592px]:grid-cols-[auto_1fr]"
+          >
+            <template
+              v-for="row in details"
+              :key="row.label"
+            >
+              <dt class="op-feature-muted">{{ row.label }}</dt>
+              <dd class="m-0 break-words">{{ row.value }}</dd>
+            </template>
+          </dl>
+          <p
+            v-else
+            class="op-feature-copy op-feature-muted"
+          >
+            {{ labels.operatorUnknown }}
+          </p>
+        </section>
+      </article>
+    </div>
+  </section>
+</template>

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

@@ -4,7 +4,8 @@ The photos of one review, shown large on the page they were opened from.
 
 The supplied storefront uses this component at `/product/:id` and
 `/sellers?seller=<id>`, inside `ProductReviews`, and on `/product/:id` for the
-product's own photos, inside `StorefrontProduct`.
+product's own photos, inside `StorefrontProduct`, and on `/journal/:id` for the
+images of an article, inside `BlogArticle`.
 [English guide](https://orionmarket.place/en/sandbox/components/nuxt/product-review-image-viewer) ·
 [Russian guide](https://orionmarket.place/ru/sandbox/components/nuxt/product-review-image-viewer)
 
@@ -25,7 +26,7 @@ around the viewer emit `close`; the parent removes the component, which
 returns the focus to the photo that opened it. Changing the photo emits
 `change` with its `id` and its position. A sideways swipe on the large photo
 shows the next or previous one. `label` replaces the dialog name and `alt` the
-photo text: the product page passes «Product photos» and the product name.
+photo text: the product page passes «Product photos» and the product name. `captions` puts a caption under each photo and `wide` 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, and another photo opens fitted again; `BlogArticle` passes both for the images of an article.
 
 While the viewer is open the page behind it does not scroll, and its scrollbar
 space is kept, so opening and closing the viewer does not move the page. The

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

@@ -12,14 +12,18 @@
   import OrionplaceImage from '@/components/orionplace/shared/OrionplaceImage.vue';
 
   // `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.
   const props          = withDefaults(
     defineProps<{
       images: IProductFeedbackImage[];
       index?: number;
       label?: string;
       alt?: string;
+      captions?: string[];
+      wide?: boolean;
     }>(),
-    { index: 0 },
+    { index: 0, captions: () => [], wide: false },
   );
   const emit           = defineEmits<{
     change: [photo: { id: number; index: number }];
@@ -33,6 +37,13 @@
   const active         = ref(startIndex());
   const current        = computed(() => props.images[active.value]);
   const several        = computed(() => props.images.length > 1);
+  const caption        = computed(() => props.captions[active.value]?.trim() ?? '');
+  // A wide viewer can show the image at its own size; the stage then scrolls.
+  const zoomed         = ref(false);
+
+  function toggleZoom() {
+    zoomed.value = props.wide && !zoomed.value;
+  }
   // The element that opened the viewer receives the focus back on close.
   let opener: HTMLElement | undefined;
 
@@ -83,7 +94,7 @@
     const start = swipeStart;
 
     swipeStart  = undefined;
-    if (!start || !touch || !several.value) {
+    if (!start || !touch || !several.value || zoomed.value) {
       return;
     }
     select(
@@ -147,6 +158,11 @@
     },
   );
 
+  // Another photo opens fitted to the screen.
+  watch(active, () => {
+    zoomed.value = false;
+  });
+
   onMounted(() => {
     if (typeof document === 'undefined') {
       return;
@@ -172,12 +188,13 @@
     ref="dialog"
     class="
       m-auto box-border h-[calc(100dvh-32px)] max-h-none
-      w-[calc(100vw-32px)] max-w-[960px]
+      w-[calc(100vw-32px)]
       overflow-hidden rounded-none p-0
       border border-solid border-orionplace-border
       bg-orionplace-surface font-orionplace text-orionplace-text
       backdrop:bg-black/35 backdrop:backdrop-blur-[2px]
     "
+    :class="wide ? 'max-w-[1600px]' : 'max-w-[960px]'"
     :aria-label="label || labels.photoViewer"
     data-feature-part="ProductReviewImageViewer"
     data-review-image-viewer
@@ -192,7 +209,7 @@
     <div
       class="
         @container/review-image-viewer
-        grid h-full grid-rows-[auto_minmax(0,1fr)_auto]
+        grid h-full grid-rows-[auto_minmax(0,1fr)_auto_auto]
       "
     >
       <header
@@ -212,6 +229,41 @@
         >
           {{ active + 1 }} / {{ images.length }}
         </p>
+        <button
+          v-if="wide"
+          type="button"
+          class="
+            ml-auto grid h-10 w-10 shrink-0 place-items-center
+            cursor-pointer border-0 bg-transparent p-0
+            text-orionplace-text
+            outline-none transition-colors motion-reduce:transition-none
+            hover:bg-orionplace-hover focus-visible:bg-orionplace-hover
+          "
+          :aria-label="zoomed ? labels.zoomOut : labels.zoomIn"
+          :aria-pressed="zoomed"
+          data-review-image-zoom
+          @click="toggleZoom"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            class="h-5 w-5"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="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" />
+            <path
+              v-if="!zoomed"
+              d="M10.5 7.5v6"
+            />
+          </svg>
+        </button>
         <button
           type="button"
           class="
@@ -234,18 +286,30 @@
           p-4 @min-[606px]/review-image-viewer:px-20
           select-none
         "
-        :class="{ 'touch-pan-y': several }"
+        :class="{ 'touch-pan-y': several && !zoomed }"
         data-review-image-stage
         @touchstart.passive="startSwipe"
         @touchend="endSwipe"
       >
-        <OrionplaceImage
+        <!-- At full size the image scrolls inside the stage; the arrows stay in place. -->
+        <div
           v-if="current"
-          :key="current.id"
-          :src="current.image"
-          :alt="photoLabel(active)"
-          class="block h-full max-h-full w-full object-contain"
-        />
+          :class="zoomed ? 'absolute inset-0 overflow-auto' : 'contents'"
+          :data-review-image-zoomed="zoomed || undefined"
+        >
+          <OrionplaceImage
+            :key="current.id"
+            :src="current.image"
+            :alt="photoLabel(active)"
+            :class="[
+              zoomed
+                ? 'm-auto block h-auto w-auto max-h-none! max-w-none!'
+                : 'block h-full max-h-full w-full object-contain',
+              wide && (zoomed ? 'cursor-zoom-out' : 'cursor-zoom-in'),
+            ]"
+            @click="toggleZoom"
+          />
+        </div>
         <template v-if="several">
           <button
             type="button"
@@ -285,6 +349,16 @@
           </button>
         </template>
       </div>
+      <p
+        v-if="caption"
+        class="
+          m-0 px-4 pt-1 pb-3 text-center text-sm leading-6
+          text-orionplace-muted
+        "
+        data-review-image-caption
+      >
+        {{ caption }}
+      </p>
       <ol
         v-if="several"
         class="

package/templates/app/components/orionplace/storefront/StorefrontFooter.vue

@@ -205,6 +205,18 @@
           >
             {{ copy.contact }}
           </a>
+          <a
+            :href="route('/privacy')"
+            class="
+              w-fit
+              text-sm leading-6 text-orionplace-inverse-text no-underline
+              outline-none
+              hover:text-orionplace-inverse-muted
+              focus-visible:text-orionplace-inverse-muted
+            "
+          >
+            {{ copy.privacy }}
+          </a>
         </nav>
       </div>
       <p

package/templates/app/layouts/default.vue

@@ -22,6 +22,7 @@
   import { headerLabels } from '@/utils/orionplace/headerLabels';
   import StorefrontFooter from '@/components/orionplace/storefront/StorefrontFooter.vue';
   import StorefrontHeader from '@/components/orionplace/storefront/StorefrontHeader.vue';
+  import CookieNotice from '@/components/orionplace/legal/CookieNotice.vue';
   import '@/components/orionplace/shared/features.css';
   import { useOrionplaceCartPreview } from '@/composables/useOrionplaceCartPreview';
   import { useOrionplaceSignIn } from '@/composables/useOrionplaceSignIn';
@@ -314,6 +315,12 @@
     />
     <div class="min-w-0 flex-1"><slot /></div>
     <StorefrontFooter @navigate="navigateTo($event)" />
+    <!-- The notice is for the website; the Android app links its policy from the store listing. -->
+    <CookieNotice
+      v-if="!appBuild"
+      :href="`/privacy?locale=${encodeURIComponent(store.localeCode)}#cookies`"
+      @navigate="navigateTo($event)"
+    />
   </div>
 </template>
 <style>

package/templates/app/pages/privacy.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import { useOrionplaceStore } from '@/stores/orionplace';
+  import StorefrontPrivacy from '@/components/orionplace/legal/StorefrontPrivacy.vue';
+  import { useOrionplacePageSeo } from '@/composables/useOrionplacePageSeo';
+  const store = useOrionplaceStore();
+  useOrionplacePageSeo('privacy', () => store.localeCode);
+</script>
+<template>
+  <main
+    class="
+      mx-auto max-w-[1440px]
+      px-4 py-8 sm:px-6 sm:py-10 lg:px-8
+    "
+  >
+    <StorefrontPrivacy />
+  </main>
+</template>

package/templates/app/utils/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/app/utils/orionplace/blogLabels.ts

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

package/templates/app/utils/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/app/utils/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/app/utils/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/app/utils/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: 'Показать следующие миниатюры',

package/templates/orionplace/COMPONENTS.md

@@ -1513,10 +1513,14 @@ red `*` directly after the label text.
 
 The default layout renders the [footer](https://orionmarket.place/en/sandbox/components/nuxt/footer)
 with real store categories, home-section anchors, profile/journal navigation,
-a contact-page link and social links. On `/contact`, `StorefrontContact` places
+a contact-page link, a `/privacy` link and social links. On `/contact`, `StorefrontContact` places
 company details (address, `tel:` phone link, registration numbers with copy
 buttons and social links) in a column beside the bordered message-form panel;
-the columns stack on narrow screens and empty details are hidden.
+the columns stack on narrow screens and empty details are hidden. `/privacy`
+shows the store's privacy policy (`StorefrontPrivacy`, texts in
+`app/utils/orionplace/privacyLabels.ts`) with the operator's details; on the
+website the layout's `CookieNotice` links its `#cookies` section until the
+visitor dismisses it.
 The home banner spans the available viewport
 width without a frame. Its media area keeps the same proportions at every width; the image fills the
 area without distortion and crops its edges when needed. Event media keeps its
@@ -1605,6 +1609,8 @@ Package labels and guides are available in English and Russian.
 | `/contact`                                                                                                                                                                                      | [StorefrontContact](../app/components/orionplace/contact/StorefrontContact.vue)                       | Contact details and message form                                                                                                                                                     |
 | `/contact`                                                                                                                                                                                      | [ContactForm](../app/components/orionplace/contact/ContactForm.vue)                                   | `misc_captcha`, `misc_contact`                                                                                                                                                       |
 | `/unsubscribe`                                                                                                                                                                                  | [EmailUnsubscribe](../app/components/orionplace/contact/EmailUnsubscribe.vue)                         | `misc_unsubscribe`                                                                                                                                                                   |
+| `/privacy`                                                                                                                                                                                      | [StorefrontPrivacy](../app/components/orionplace/legal/StorefrontPrivacy.vue)                         | None: Application Load contact details                                                                                                                                               |
+| Every page (layout)                                                                                                                                                                             | [CookieNotice](../app/components/orionplace/legal/CookieNotice.vue)                                   | None: dismissal kept in local storage                                                                                                                                                |
 | `/`                                                                                                                                                                                             | [EventEnrollmentDialog](../app/components/orionplace/events/EventEnrollmentDialog.vue)                | `profile_event_subscribe`                                                                                                                                                            |
 | `/product/:id`                                                                                                                                                                                  | [StorefrontProduct](../app/components/orionplace/products/StorefrontProduct.vue)                      | `products_search`; `products_preview` when the address contains `?key=`                                                                                                              |
 | `/product/:id`, `/sellers`                                                                                                                                                                      | [ProductReviews](../app/components/orionplace/products/ProductReviews.vue)                            | `products_view_feedbacks_feedback_get`, `products_view_feedbacks_stats_get`, `products_feedbacks_mine_get`, `products_feedbacks_like_or_dislike`, `products_feedbacks_reply_preload` |