orionplace-react 0.4.0 → 0.6.0

package/src/project-readme.mjs

@@ -89,6 +89,7 @@ and Next.js configuration are preserved.
 | \`../${base}app/_storefront/\` | Route controllers that connect components, navigation and API actions. |
 | \`../${base}app/api/[...orionplace]/route.ts\` | The route handler serving \`/api/...\` from your project. |
 | \`../${base}app/ps3/blog/[...orionplace]/route.ts\` | The route handler serving guarded blog images and videos under \`/ps3/blog/...\`. |
+| \`../${base}app/robots.txt/route.ts\`, \`../${base}app/sitemap.xml/route.ts\` | \`/robots.txt\` and the storefront sitemap. |
 | \`../${base}proxy.ts\` | Marks personalized pages private and answers HTTP 503 when Application Load fails. |
 | \`../sitemaps/${frontend}.cfg\` | The backend URL used for this frontend domain. |
 | \`../.env\` | Local MIMIC setting; keep secrets out of version control. |
@@ -389,8 +390,22 @@ location / {
 
 Here localhost is your frontend process on your VPS. That process selects the
 remote personal API from the domain file. The proxy must overwrite those headers.
-An unknown domain never falls back to another tenant. This setup does not generate
-sitemap XML or add analytics.
+An unknown domain never falls back to another tenant. \`/robots.txt\` points
+crawlers to \`/sitemap.xml\`, which lists the public pages, categories, products
+on sale and journal publications in every storefront language (each publication
+only in the languages it is written in). The sitemap is built from the backend
+and kept for an hour in \`node_modules/.cache/orionplace/sitemaps/\`
+(\`ORIONPLACE_CACHE_DIR\` moves it). After you publish or change content, rebuild
+it at once from the project folder; the running storefront serves the new
+sitemap without a restart:
+
+\`\`\`bash
+npm run orionplace:sitemap                          # every frontend domain
+npx orionplace-react sitemap rebuild shop.example.com  # one domain
+npx orionplace-react sitemap status                  # when each was built
+\`\`\`
+
+This setup does not add analytics.
 
 ## Android app
 

package/src/setup.mjs

@@ -187,6 +187,7 @@ export async function setupProject({ cwd = process.cwd(), action = 'set', field,
   pkg.scripts['orionplace:remove-frontend'] ||= 'orionplace-react remove frontend';
   pkg.scripts['orionplace:mimic']           ||= 'orionplace-react set mimic';
   pkg.scripts['orionplace:help']            ||= 'orionplace-react help';
+  pkg.scripts['orionplace:sitemap']         ||= 'orionplace-react sitemap rebuild';
   pkg.scripts['orionplace:update']          ||= 'orionplace-react update';
   pkg.dependencies                          ||= {};
   pkg.dependencies.zustand                  ||= dependencies.zustand || '^5.0.15';

package/src/sitemap.mjs

@@ -0,0 +1,93 @@
+import { existsSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import { relative, resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const metadata = JSON.parse(await readFile(new URL('../package.json', import.meta.url), 'utf8'));
+const cli      = metadata.name;
+
+/**
+ * The project's own gateway runtime (orionplace/runtime/marketplace.mjs): the
+ * sitemap is built with the code the running storefront uses.
+ */
+async function projectRuntime(root) {
+  const path    = resolve(root, 'orionplace/runtime/marketplace.mjs');
+  if (!existsSync(path)) {
+    throw new Error(`No orionplace/runtime/marketplace.mjs in ${root}. Run this in the storefront project (or pass --cwd).`);
+  }
+  const runtime = await import(pathToFileURL(path).href);
+  if (typeof runtime.rebuildMarketplaceSitemap !== 'function') {
+    throw new Error(`This project's runtime has no sitemap support. Run npx ${cli} update first.`);
+  }
+  return runtime;
+}
+
+/**
+ * The storefront reads SITEMAPS_DIR and ORIONPLACE_CACHE_DIR from the
+ * project's .env; the command uses the same folders. Variables already set
+ * in the shell win.
+ */
+async function projectEnvironment(root) {
+  let source = '';
+  try { source = await readFile(resolve(root, '.env'), 'utf8'); }
+  catch (error) { if (error.code !== 'ENOENT') throw error; }
+  for (const line of source.split(/\r?\n/)) {
+    const match = /^\s*(?:export\s+)?(SITEMAPS_DIR|ORIONPLACE_CACHE_DIR)\s*=\s*(.*?)\s*$/.exec(line);
+    if (!match || process.env[match[1]] !== undefined) continue;
+    const value = match[2].replace(/^(['"])(.*)\1$/, '$2');
+    if (value) process.env[match[1]] = resolve(root, value);
+  }
+}
+
+async function domainsFor(runtime, root, domain) {
+  if (domain) {
+    const normalized = runtime.normalizeFrontDomain(domain);
+    if (!normalized) throw new Error(`Invalid frontend domain: ${domain}`);
+    return [normalized];
+  }
+  const domains = await runtime.marketplaceDomains(root);
+  if (!domains.length) throw new Error(`No frontend domains yet. Add one: npx ${cli} add frontend <shop.example.com>`);
+  return domains;
+}
+
+function age(built, now = Date.now()) {
+  const minutes = Math.max(0, Math.round((now - Date.parse(built)) / 60_000));
+  return minutes < 60 ? `${minutes} min ago` : `${Math.floor(minutes / 60)} h ${minutes % 60} min ago`;
+}
+
+/**
+ * `sitemap rebuild [domain]`: build the sitemap of every frontend domain (or
+ * one) now. `sitemap status [domain]`: show when each was built.
+ * @param {{cwd: string, action: string, domain?: string, log?: (line: string) => void}} options
+ * @returns {Promise<number>} exit code
+ */
+export async function sitemapCommand({ cwd, action, domain, log = console.log }) {
+  if (!['rebuild', 'status'].includes(action)) {
+    throw new Error(`Use: npx ${cli} sitemap rebuild [domain] | sitemap status [domain]`);
+  }
+  const root    = resolve(cwd);
+  await projectEnvironment(root);
+  const runtime = await projectRuntime(root);
+  const domains = await domainsFor(runtime, root, domain);
+  let failed    = 0;
+  for (const name of domains) {
+    if (action === 'status') {
+      const sitemap = await runtime.readSitemapCache(name, root);
+      const stale   = sitemap && Date.now() - Date.parse(sitemap.built) >= runtime.SITEMAP_LIFETIME;
+      log(sitemap
+        ? `${name}: built ${sitemap.built} (${age(sitemap.built)}), ${runtime.sitemapUrlCount(sitemap)} URLs${stale ? '; rebuilt at the next crawl' : ''}`
+        : `${name}: not built yet; built at the first /sitemap.xml request or with: npx ${cli} sitemap rebuild`);
+      continue;
+    }
+    const started = Date.now();
+    try {
+      const done = await runtime.rebuildMarketplaceSitemap(name, { root });
+      log(`${name}: ${done.urls} URLs (${done.pages} pages, ${done.publications} journal publications) in ${((Date.now() - started) / 1000).toFixed(1)} s`);
+      log(`  saved ${relative(root, done.path)}; the running storefront serves it now at https://${name}/sitemap.xml`);
+    } catch (error) {
+      failed++;
+      log(`${name}: not rebuilt: ${error?.message ?? error}`);
+    }
+  }
+  return failed ? 1 : 0;
+}

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/app/robots.txt/route.ts

@@ -0,0 +1,11 @@
+// robots.txt of the storefront domain; it points crawlers to the sitemap.
+import { marketplaceRobotsResponse } from '@orionplace-runtime/marketplace.mjs';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+export function GET(request: Request): Promise<Response> {
+  return marketplaceRobotsResponse(request, {
+    mimicFrontDomain: process.env.MIMIC_FRONT_DOMAIN ?? '',
+  });
+}

package/templates/app/sitemap.xml/route.ts

@@ -0,0 +1,12 @@
+// The storefront sitemap: public pages, categories, products and journal
+// publications in every language, built from the backend for an hour.
+import { marketplaceSitemapResponse } from '@orionplace-runtime/marketplace.mjs';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+export function GET(request: Request): Promise<Response> {
+  return marketplaceSitemapResponse(request, {
+    mimicFrontDomain: process.env.MIMIC_FRONT_DOMAIN ?? '',
+  });
+}

package/templates/components/orionplace/account/ProfileDetailsForm.README.md

@@ -7,6 +7,8 @@ date of birth. Application Load supplies the initial values. Dates in
 `day.month.year` or `day/month/year` form are converted to the ISO value required
 by the native date field and the request. The sign-in phone number is read-only.
 
+Under the phone the hint names its country: `user.origin_country` from the application load, shown with the browser's country name («Its country, Russia, decides which payment methods you can use»). Without a country the plain hint stays.
+
 Submit is enabled only after an editable value changes and `state.loaded` is
 true with no pending request. Submission trims the two names and calls
 `onRequest` with `{ action: 'details', data: { first_name, last_name, dob } }`.
@@ -28,6 +30,8 @@ the latest Application Load profile values. Field messages come from
 `день.месяц.год` или `день/месяц/год` преобразуется в ISO-значение для системного
 поля даты и запроса. Номер телефона для входа доступен только для чтения.
 
+Под телефоном подсказка называет его страну: `user.origin_country` из загрузки приложения с названием страны от браузера («Его страна, Россия, определяет доступные способы оплаты»). Без страны остаётся обычная подсказка.
+
 Кнопка сохранения становится доступной только после изменения редактируемого
 значения, когда `state.loaded` равен `true` и нет выполняемого запроса. При
 отправке внешние пробелы в имени и фамилии удаляются, затем `onRequest` получает

package/templates/components/orionplace/account/ProfileDetailsForm.tsx

@@ -11,7 +11,7 @@ import type {
   IStorefrontProfileState,
 } from '@/interfaces/orionplace/accounts/IStorefrontProfile';
 import { profileLabels } from '@/lib/orionplace/profileLabels';
-import { profileDate } from '@/lib/orionplace/profile';
+import { profileCountryName, profileDate } from '@/lib/orionplace/profile';
 import styles from './ProfileDetailsForm.module.css';
 
 export interface ProfileDetailsFormProps {
@@ -26,6 +26,11 @@ export function ProfileDetailsForm({
   const profile             = useOrionplace(selectProfile);
   const locale              = useOrionplaceSelections((value) => value.localeCode);
   const labels              = profileLabels(locale);
+  // The phone country decides which payment methods the customer gets at checkout.
+  const country             = profileCountryName(profile?.origin_country, locale);
+  const phoneHint           = country
+    ? labels.phoneCountryHint.replace('{country}', country)
+    : labels.phoneHint;
   const busy                = Boolean(state.pending) || !state.loaded;
   const synchronized        = {
     first_name: profile?.first_name ?? '',
@@ -148,7 +153,7 @@ export function ProfileDetailsForm({
             autoComplete="tel"
             readOnly
           />
-          <small>{labels.phoneHint}</small>
+          <small>{phoneHint}</small>
         </label>
         <label>
           <span>{labels.dob}</span>

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/cart/CartCheckoutDetails.README.md

@@ -30,6 +30,8 @@ The comment field takes up to 1024 characters; its own Save action sends
 `cart_customer_commentary_set` with `cart_commentary`. New cart data replaces the local recipient and comment
 drafts.
 
+When `payment_methods` is empty, the payment block shows «No payment method is available for this order…» instead of a select. The backend offers a method limited by country only to customers whose phone number is from one of its countries (`origin_country`), not by the delivery address.
+
 On the Russian storefront a phone number typed without «+» the way it is written in Russia — «8 900 555-01-72» or «900 555-01-72» — becomes «+79005550172» when the field loses focus and before it is sent: the backend accepts only international numbers. A number typed with «+», other numbers and other languages are sent as typed (`phoneWithCountryCode()`).
 
 ### Props
@@ -77,6 +79,8 @@ On the Russian storefront a phone number typed without «+» the way it is writt
 `cart_commentary`. Новые данные корзины
 заменяют локальные значения получателя и комментария.
 
+Когда `payment_methods` пуст, вместо списка показывается «Для этого заказа нет доступных способов оплаты…». Способ, ограниченный по странам, бэкенд предлагает только покупателям с номером телефона одной из этих стран (`origin_country`), а не по адресу доставки.
+
 В русской витрине номер без «+», набранный по-российски — «8 900 555-01-72» или «900 555-01-72», — при выходе из поля и перед отправкой становится «+79005550172»: бэкенд принимает только международный формат. Номер с «+», другие номера и другие языки отправляются как набраны (`phoneWithCountryCode()`).
 
 ### Свойства

package/templates/components/orionplace/cart/CartCheckoutDetails.tsx

@@ -269,15 +269,26 @@ export function CartCheckoutDetails({
         <>
           <section className={styles.panel}>
             <h2>{labels.payment}</h2>
-            <OrionplaceSelect
-              value={String(summary?.selected_payment ?? 0)}
-              options={payments}
-              icons={paymentIcons}
-              label={labels.payment}
-              disabled={disabled}
-              required
-              onValueChange={selectPayment}
-            />
+            {/* Methods depend on the order and on the customer's phone country:
+                an empty list is said, not shown as a select with only the prompt. */}
+            {methods.length ? (
+              <OrionplaceSelect
+                value={String(summary?.selected_payment ?? 0)}
+                options={payments}
+                icons={paymentIcons}
+                label={labels.payment}
+                disabled={disabled}
+                required
+                onValueChange={selectPayment}
+              />
+            ) : (
+              <p
+                className={styles.muted}
+                role="status"
+              >
+                {labels.noPayment}
+              </p>
+            )}
           </section>
 
           <section className={styles.panel}>

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>
+  );
+}