orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/categories/StorefrontCategory.README.md

@@ -0,0 +1,155 @@
+# StorefrontCategory · React
+
+## English
+
+`StorefrontCategory` renders one public category from the catalog store. The
+page includes its localized name, plain-text description, optional logo,
+breadcrumb path, immediate public subcategories and `ProductSearchResults`.
+A missing ID or a private category shows the category-not-found state.
+
+Pass `products` to include the current server search result in guest HTML. The
+matching `facets` and `filters` properties keep the first filter view consistent
+with those products. The component passes the remaining loading, failure,
+pagination and product-action properties to `ProductSearchResults`, fixes the
+category scope by hiding the category facet, and never starts a search request.
+
+`homeHref` and `categoryHref(categoryId)` turn breadcrumb and category choices
+into real links. With a matching callback, a normal click calls
+`onSelectHome()` or `onSelectCategory(category)` and leaves routing to the
+application. A modifier click retains the browser's link behavior. Without a
+callback, a normal link navigates directly. Without a valid path, the control is
+a button. Product, filter, pagination and retry callbacks retain the exact
+`ProductSearchResults` contract.
+
+The supplied `/category/:id` page searches the category together with its
+public subcategories (`catalogBranchIds`), so a parent category lists the
+products of its whole branch.
+
+The maintained source is
+`components/orionplace/categories/StorefrontCategory.tsx`; category data uses
+`interfaces/orionplace/category/ICategory.ts`. The result and filter contracts
+are in `interfaces/orionplace/products/IProduct.ts` and
+`interfaces/orionplace/products/IProductSearchFacets.ts`.
+
+### Props
+
+| Prop                                                                                                              | Meaning                                                                                                              |
+| ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `categoryId: number`                                                                                              | ID of the category handled by StorefrontCategory.                                                                    |
+| `homeHref?: string`                                                                                               | Destination used by the home link.                                                                                   |
+| `categoryHref?: (categoryId: number) => string`                                                                   | Builds the category destination from the callback arguments.                                                         |
+| `onSelectHome?: () => void`                                                                                       | Called when the visitor opens the home page. The callback has no payload.                                            |
+| `onSelectCategory?: (category: ICategory) => void`                                                                | Called when the visitor chooses a category. The callback payload is shown in its type.                               |
+| `loaded?: boolean`                                                                                                | Distinguishes a confirmed empty result from data that has not loaded yet.                                            |
+| `pending?: boolean`                                                                                               | Shows the loading state and blocks duplicate actions.                                                                |
+| `onSelect?: (product: IProduct) => void`                                                                          | Passes the displayed product object when its image or name is selected. The application handles product navigation. |
+| `onSelectSeller?: (seller: IProductSeller) => void`                                                               | Passes the displayed product’s seller object when the seller is selected. The application opens the seller page. |
+| `onSelectVariant?: (selection: ProductActionSelection & { variant: IProductVariantValue; }) => void`              | Passes the previously displayed product ID in `product` and chosen primary variant in `variant`. An available variant product replaces the card; the application loads missing product data. |
+| `onRequestSecondaryVariants?: (request: IProductSecondaryVariantRequest) => void`                                 | Passes the product ID in `product`, product group ID in `productGroup` and primary variant in `variant` when its secondary variants need loading. The application loads them and supplies them to the product store. |
+| `onSelectSecondaryVariant?: (selection: ProductActionSelection & { variant: IProductSecondaryVariant; }) => void` | Passes the previously displayed product ID in `product` and chosen secondary variant in `variant` after replacing the displayed product. The secondary-variant data remains available. |
+| `onToggleFavorite?: (selection: ProductActionSelection & { selected: boolean; }) => void`                         | Passes the product ID in `product` and desired wishlist state in `selected` after the heart is pressed. The application confirms the change with a request and updates product data. |
+| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`                                     | Passes the product ID in `product` and the requested total quantity in `quantity` when adding an item or changing its quantity. The application sends the request and supplies confirmed product data. |
+| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void`                                  | Passes the product ID in `product` and cart item ID in `cartItem` when removing the last unit. The application removes that cart item and supplies confirmed product data. |
+| `onSubscribe?: (selection: ProductActionSelection) => void`                                                       | Passes the product ID in `product` when an availability notification is requested. The application handles any required sign-in, sends the request and updates subscription state. |
+| `onUnsubscribe?: (selection: ProductActionSelection) => void`                                                     | Passes the product ID in `product` when cancelling an availability notification. The application sends the request and supplies the confirmed subscription state. |
+| `onPreorder?: (selection: ProductActionSelection) => void`                                                        | Passes the product ID in `product` when preorder is selected. The application collects the required contact details and submits the request. |
+| `productActionsDisabled?: boolean`                                                                                | Disables cart, wishlist, subscription and preorder actions.                                                          |
+| `products?: readonly IProduct[]`                                                                                  | Product records supplied for server rendering and hydration.                                                         |
+| `productIds?: number[]`                                                                                           | Product IDs rendered in the supplied order.                                                                          |
+| `query?: string`                                                                                                  | Current product or storefront search text.                                                                           |
+| `facets?: IProductSearchFacets`                                                                                   | Filter choices returned by the confirmed product search.                                                             |
+| `filters?: ProductFacetSelection`                                                                                 | Current confirmed filter selection.                                                                                  |
+| `fixedFilters?: readonly string[]`                                                                                | Conditions fixed by the page scope and therefore hidden from editable filters.                                       |
+| `emptyDescription?: string`                                                                                       | Explanation shown when the confirmed result is empty.                                                                |
+| `filtersDisabled?: boolean`                                                                                       | Disables filter editing while keeping the current selection visible.                                                 |
+| `page?: number`                                                                                                   | Current result page.                                                                                                 |
+| `pages?: number`                                                                                                  | Number of pages reported by the API result.                                                                          |
+| `total?: number`                                                                                                  | Total records reported by the API result.                                                                            |
+| `hasNext?: boolean`                                                                                               | Whether the API result can have a following page.                                                                    |
+| `failed?: boolean`                                                                                                | Marks the current load as failed and exposes the retry state.                                                        |
+| `productHref?: (productId: number) => string`                                                                     | Builds the product destination from the callback arguments.                                                          |
+| `onChangeFilters?: (selection: ProductFacetSelection) => void`                                                    | Called when the visitor changes the product filters. The callback payload is shown in its type.                      |
+| `onClearFilters?: () => void`                                                                                     | Called when the visitor clears the product filters. The callback has no payload.                                     |
+| `onChangePage?: (page: number) => void`                                                                           | Called when the visitor requests another result page. The callback payload is shown in its type.                     |
+| `onRetry?: () => void`                                                                                            | Called when the visitor retries the failed request. The callback has no payload.                                     |
+
+## Русский
+
+`StorefrontCategory` показывает одну общедоступную категорию из store каталога.
+Страница содержит локализованное название, текстовое описание без HTML,
+необязательный логотип, путь к категории, непосредственные общедоступные
+подкатегории и `ProductSearchResults`. Для неизвестного ID или закрытой
+категории показывается состояние «Категория не найдена».
+
+Передайте `products`, чтобы товары текущего серверного поиска вошли в гостевой
+HTML. Свойства `facets` и `filters` сохраняют соответствие первого набора
+фильтров этим товарам. Остальные свойства загрузки, ошибки, пагинации и действий
+с товаром передаются в `ProductSearchResults`. Компонент скрывает фильтр
+категории, потому что категория уже выбрана, и сам не выполняет поисковый
+запрос.
+
+`homeHref` и `categoryHref(categoryId)` превращают элементы пути и категории в
+настоящие ссылки. Если передан соответствующий обработчик, обычный щелчок
+вызывает `onSelectHome()` или `onSelectCategory(category)`, а переход выполняет
+приложение. Щелчок с модификатором сохраняет стандартное поведение браузера.
+Без обработчика обычная ссылка открывается напрямую. Без допустимого адреса
+показывается кнопка. События товара, фильтров, пагинации и повторной загрузки
+сохраняют точный контракт `ProductSearchResults`.
+
+Готовая страница `/category/:id` ищет товары категории вместе с её
+общедоступными подкатегориями (`catalogBranchIds`), поэтому родительская
+категория показывает товары всей ветки.
+
+Поддерживаемый исходный файл:
+`components/orionplace/categories/StorefrontCategory.tsx`; данные категории
+описывает `interfaces/orionplace/category/ICategory.ts`. Контракты результатов и
+фильтров находятся в `interfaces/orionplace/products/IProduct.ts` и
+`interfaces/orionplace/products/IProductSearchFacets.ts`.
+
+### Свойства
+
+| Свойство                                                                                                          | Назначение                                                                                                         |
+| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `categoryId: number`                                                                                              | ID категории, с которым работает StorefrontCategory.                                                               |
+| `homeHref?: string`                                                                                               | Адрес ссылки главной страницы.                                                                                     |
+| `categoryHref?: (categoryId: number) => string`                                                                   | Строит адрес ссылки категории из аргументов обработчика.                                                           |
+| `onSelectHome?: () => void`                                                                                       | Вызывается, когда покупатель открывает главную страницу. Обработчик не получает данные.                            |
+| `onSelectCategory?: (category: ICategory) => void`                                                                | Вызывается, когда покупатель выбирает категорию. Данные обработчика указаны в его типе.                            |
+| `loaded?: boolean`                                                                                                | Отличает подтверждённый пустой результат от ещё не загруженных данных.                                             |
+| `pending?: boolean`                                                                                               | Показывает загрузку и блокирует повторные действия.                                                                |
+| `onSelect?: (product: IProduct) => void`                                                                          | Передаёт объект отображаемого товара при выборе его изображения или названия. Приложение выполняет переход к товару. |
+| `onSelectSeller?: (seller: IProductSeller) => void`                                                               | Передаёт объект продавца отображаемого товара при выборе продавца. Приложение открывает его страницу. |
+| `onSelectVariant?: (selection: ProductActionSelection & { variant: IProductVariantValue; }) => void`              | Передаёт ID ранее отображаемого товара в `product` и выбранный основной вариант в `variant`. Доступный товар выбранного варианта заменяет карточку; отсутствующие данные загружает приложение. |
+| `onRequestSecondaryVariants?: (request: IProductSecondaryVariantRequest) => void`                                 | Передаёт ID товара в `product`, ID группы товаров в `productGroup` и основной вариант в `variant`, когда для него нужно загрузить дополнительные варианты. Приложение загружает и передаёт их в хранилище товаров. |
+| `onSelectSecondaryVariant?: (selection: ProductActionSelection & { variant: IProductSecondaryVariant; }) => void` | Передаёт ID ранее отображаемого товара в `product` и выбранный дополнительный вариант в `variant` после замены отображаемого товара. Выбор сохраняет данные дополнительных вариантов. |
+| `onToggleFavorite?: (selection: ProductActionSelection & { selected: boolean; }) => void`                         | Передаёт ID товара в `product` и желаемое состояние избранного в `selected` после нажатия сердца. Приложение подтверждает изменение запросом и обновляет данные товара. |
+| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`                                     | Передаёт `product` — ID товара и `quantity` — запрошенное итоговое количество при добавлении или изменении количества. Приложение выполняет запрос и передаёт подтверждённые данные товара. |
+| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void`                                  | Передаёт ID товара в `product` и ID позиции корзины в `cartItem` при удалении последней единицы. Приложение удаляет эту позицию и передаёт подтверждённые данные товара. |
+| `onSubscribe?: (selection: ProductActionSelection) => void`                                                       | Передаёт ID товара в `product` при выборе уведомления о поступлении. Приложение выполняет вход, если он нужен, отправляет запрос и обновляет состояние подписки. |
+| `onUnsubscribe?: (selection: ProductActionSelection) => void`                                                     | Передаёт ID товара в `product` при отмене уведомления о поступлении. Приложение отправляет запрос и передаёт подтверждённое состояние подписки. |
+| `onPreorder?: (selection: ProductActionSelection) => void`                                                        | Передаёт ID товара в `product` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос. |
+| `productActionsDisabled?: boolean`                                                                                | Блокирует корзину, избранное, подписку и предзаказ.                                                                |
+| `products?: readonly IProduct[]`                                                                                  | Товары для серверного рендера и гидратации.                                                                        |
+| `productIds?: number[]`                                                                                           | ID для товара, используемые в переданном порядке.                                                                  |
+| `query?: string`                                                                                                  | Текущий текст поиска товаров или магазина.                                                                         |
+| `facets?: IProductSearchFacets`                                                                                   | Варианты фильтров из подтверждённого поиска товаров.                                                               |
+| `filters?: ProductFacetSelection`                                                                                 | Текущий подтверждённый набор фильтров.                                                                             |
+| `fixedFilters?: readonly string[]`                                                                                | Условия, заданные страницей и скрытые из редактируемых фильтров.                                                   |
+| `emptyDescription?: string`                                                                                       | Пояснение для пустого подтверждённого результата.                                                                  |
+| `filtersDisabled?: boolean`                                                                                       | Блокирует изменение фильтров, сохраняя текущий выбор видимым.                                                      |
+| `page?: number`                                                                                                   | Текущая страница результата.                                                                                       |
+| `pages?: number`                                                                                                  | Число страниц в ответе API.                                                                                        |
+| `total?: number`                                                                                                  | Общее число записей в ответе API.                                                                                  |
+| `hasNext?: boolean`                                                                                               | Есть ли у результата API следующая страница.                                                                       |
+| `failed?: boolean`                                                                                                | Отмечает неудачную загрузку и показывает возможность повторить запрос.                                             |
+| `productHref?: (productId: number) => string`                                                                     | Строит адрес ссылки товара из аргументов обработчика.                                                              |
+| `onChangeFilters?: (selection: ProductFacetSelection) => void`                                                    | Вызывается, когда покупатель изменяет фильтры товаров. Данные обработчика указаны в его типе.                      |
+| `onClearFilters?: () => void`                                                                                     | Вызывается, когда покупатель очищает фильтры товаров. Обработчик не получает данные.                               |
+| `onChangePage?: (page: number) => void`                                                                           | Вызывается, когда покупатель открывает другую страницу результатов. Данные обработчика указаны в его типе.         |
+| `onRetry?: () => void`                                                                                            | Вызывается, когда покупатель повторяет неудачный запрос. Обработчик не получает данные.                            |
+
+## Category visibility / Видимость категорий
+
+Navigation omits categories with `exclude_from_tree: true` and all their descendants. The full published catalog remains available for product main-category names, links and breadcrumbs.
+
+В навигации скрываются категории с `exclude_from_tree: true` и все их подкатегории. Полный каталог опубликованных категорий сохраняется для названий, ссылок и цепочек основной категории товара.

package/templates/components/orionplace/categories/StorefrontCategory.module.css

@@ -0,0 +1,148 @@
+/* The page frame follows its own width: a size container around <main>,
+   so the docs tabs and every placement show the same padding. */
+.page {
+  container: page / inline-size;
+  width: 100%;
+  min-width: 0;
+}
+
+.root {
+  display: grid;
+  box-sizing: border-box;
+  width: min(100%, 90rem);
+  min-width: 0;
+  gap: 2rem;
+  margin: 0 auto;
+  padding: 1.5rem 1rem;
+  color: var(--orionplace-text);
+  font: inherit;
+  container-type: inline-size;
+}
+
+.breadcrumbs,
+.breadcrumbItem {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+}
+
+/* The separator is a glyph; only the words are uppercase, as in Nuxt. */
+.breadcrumbItem > [aria-hidden='true'] {
+  text-transform: none;
+}
+
+.breadcrumbs {
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.crumb {
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-decoration: none;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+.crumb:focus-visible {
+  color: var(--orionplace-text);
+}
+
+@media (hover: hover) {
+  .crumb:hover {
+    color: var(--orionplace-text);
+  }
+}
+
+.current {
+  color: var(--orionplace-text);
+}
+
+.header {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+
+.header > div {
+  min-width: 0;
+  max-width: 48rem;
+}
+
+.header h1 {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: calc(2 / 1.5);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.header p {
+  margin: 0.75rem 0 0;
+  color: var(--orionplace-muted);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.logo {
+  box-sizing: border-box;
+  width: 5rem;
+  height: 5rem;
+  flex: 0 0 5rem;
+  padding: 0.5rem;
+  object-fit: contain;
+  background: var(--orionplace-surface);
+}
+
+.children {
+  min-width: 0;
+}
+
+.children h2 {
+  margin: 0 0 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+@container page (min-width: 640px) {
+  .root {
+    padding: 2rem 1.5rem;
+  }
+
+  /* 80px, 96px from 640px, as Nuxt's h-20 and h-24. */
+  .logo {
+    width: 6rem;
+    height: 6rem;
+    flex-basis: 6rem;
+  }
+}
+
+@container page (min-width: 1024px) {
+  .root {
+    padding-inline: 2rem;
+  }
+}
+
+/* The title follows the component's own width, as in the other packages. */
+@container (min-width: 592px) {
+  .header h1 { font-size: 1.875rem; line-height: calc(2.25 / 1.875); }
+}

package/templates/components/orionplace/categories/StorefrontCategory.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+import type { MouseEvent } from 'react';
+import {
+  useOrionplaceCatalog,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import type { ICategory } from '@/interfaces/orionplace/category/ICategory';
+import {
+  catalogTrailToCategory,
+  findCatalogCategory,
+  findNavigationCategory,
+  navigationCatalogCategories,
+} from '@/lib/orionplace/catalog';
+import { categoryLabels } from '@/lib/orionplace/categoryLabels';
+import {
+  getAvailableNestedValueFromObject,
+  plainText,
+  safePublicUrl,
+} from '@/lib/orionplace/presentation';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import {
+  ProductSearchResults,
+  type ProductSearchResultsProps,
+} from '@/components/orionplace/search/ProductSearchResults';
+import { CategoryGroup } from './CategoryGroup';
+import styles from './StorefrontCategory.module.css';
+
+export interface StorefrontCategoryProps extends Omit<
+  ProductSearchResultsProps,
+  'hideCategories' | 'onSelectHome'
+> {
+  categoryId: number;
+  homeHref?: string;
+  categoryHref?: (categoryId: number) => string;
+  onSelectHome?: () => void;
+  onSelectCategory?: (category: ICategory) => void;
+}
+
+export function StorefrontCategory({
+  categoryId,
+  homeHref,
+  categoryHref,
+  onSelectHome,
+  onSelectCategory,
+  emptyDescription,
+  ...results
+}: StorefrontCategoryProps) {
+  const catalog      = useOrionplaceCatalog((state) => state.catalog);
+  const locale       = useOrionplaceSelections((state) => state.localeCode);
+  const labels       = categoryLabels(locale);
+  const category     = findCatalogCategory(catalog, categoryId);
+  const trail        = catalogTrailToCategory(catalog, categoryId);
+  const children     = navigationCatalogCategories(
+    findNavigationCategory(catalog, categoryId)?.childs,
+  );
+  const safeHomeHref = safePublicUrl(homeHref);
+  const catalogHref  = `/catalog?locale=${encodeURIComponent(locale)}`;
+  const description  = plainText(
+    getAvailableNestedValueFromObject(
+      category?.locale,
+      locale,
+      'cg_description',
+    ),
+  );
+
+  function categoryName(item: ICategory) {
+    return (
+      getAvailableNestedValueFromObject(item.locale, locale, 'cg_name') ||
+      `${labels.category} ${item.id}`
+    );
+  }
+
+  function selectLink(
+    event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
+    href: string,
+    action: (() => void) | undefined,
+  ) {
+    const modified =
+      event.button > 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey;
+    if (href && (modified || !action)) {
+      return;
+    }
+
+    event.preventDefault();
+    action?.();
+  }
+
+  function breadcrumb(
+    label: string,
+    href: string,
+    action: (() => void) | undefined,
+    current = false,
+  ) {
+    if (current) {
+      return (
+        <span
+          aria-current="page"
+          className={styles.current}
+        >
+          {label}
+        </span>
+      );
+    }
+
+    if (href) {
+      return (
+        <a
+          href={href}
+          className={styles.crumb}
+          onClick={(event) => selectLink(event, href, action)}
+        >
+          {label}
+        </a>
+      );
+    }
+
+    return (
+      <button
+        type="button"
+        className={styles.crumb}
+        onClick={(event) => selectLink(event, '', action)}
+      >
+        {label}
+      </button>
+    );
+  }
+
+  return (
+    <div className={styles.page}>
+      <main
+        className={styles.root}
+        data-storefront-category
+      >
+        <nav
+          aria-label={labels.breadcrumb}
+          className={styles.breadcrumbs}
+          data-category-breadcrumbs
+        >
+          {breadcrumb(labels.home, safeHomeHref, onSelectHome)}
+          <span className={styles.breadcrumbItem}>
+            <span aria-hidden="true">/</span>
+            {breadcrumb(labels.catalog, catalogHref, undefined)}
+          </span>
+          {trail.map((item, index) => {
+            const current = index === trail.length - 1;
+            const href = current ? '' : safePublicUrl(categoryHref?.(item.id));
+            return (
+              <span
+                key={item.id}
+                className={styles.breadcrumbItem}
+              >
+                <span aria-hidden="true">/</span>
+                {breadcrumb(
+                  categoryName(item),
+                  href,
+                  onSelectCategory ? () => onSelectCategory(item) : undefined,
+                  current,
+                )}
+              </span>
+            );
+          })}
+        </nav>
+
+        {category ? (
+          <>
+            <header className={styles.header}>
+              <div>
+                <h1>{categoryName(category)}</h1>
+                {description ? <p>{description}</p> : null}
+              </div>
+              {category.logo_image ? (
+                <OrionplaceImage
+                  src={category.logo_image}
+                  alt={categoryName(category)}
+                  width={96}
+                  height={96}
+                  className={styles.logo}
+                />
+              ) : null}
+            </header>
+
+            {children.length ? (
+              <section
+                aria-label={labels.subcategories}
+                data-category-part="CategoryGroup"
+                className={styles.children}
+              >
+                <h2>{labels.subcategories}</h2>
+                <CategoryGroup
+                  parentId={categoryId}
+                  categoryHref={categoryHref}
+                  onSelect={onSelectCategory}
+                />
+              </section>
+            ) : null}
+
+            <div data-category-part="ProductSearchResults">
+              <ProductSearchResults
+                key={categoryId}
+                {...results}
+                hideCategories
+                emptyDescription={emptyDescription}
+                onSelectHome={onSelectHome}
+              />
+            </div>
+          </>
+        ) : (
+          <OrionplaceEmptyState
+            kind="search"
+            size="large"
+            messageTag="h1"
+            message={labels.missing}
+            description={labels.missingHint}
+          />
+        )}
+      </main>
+    </div>
+  );
+}

package/templates/components/orionplace/contact/AboutPage.README.md

@@ -0,0 +1,40 @@
+# AboutPage · React
+
+## English
+
+`AboutPage` displays the company details supplied by Application Load
+`init.contact`. Empty values are omitted. It shows `company_name`, a different
+`company_legal_name`, `company_contact_address`, `company_contact_phone`,
+`company_tax_id` and `company_organization_id`. A formatted phone number becomes
+a `tel:` link containing only its dialable characters.
+
+The first server HTML contains all available text and the phone link. Copy
+controls appear after hydration when the Clipboard API is available. Each
+control copies the exact displayed value, announces success to assistive
+technology and shows a local fallback beside the value if writing to the
+clipboard fails. The component performs no browser work during server
+rendering.
+
+Source is maintained in `components/orionplace/contact/AboutPage.tsx`; the
+physical contact interface is
+`interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonContact.ts`.
+
+## Русский
+
+`AboutPage` показывает реквизиты компании из `init.contact` ответа Application
+Load. Пустые значения пропускаются. Компонент выводит `company_name`, отличающееся
+от него `company_legal_name`, `company_contact_address`,
+`company_contact_phone`, `company_tax_id` и `company_organization_id`.
+Отформатированный телефон становится ссылкой `tel:`, которая содержит только
+символы, нужные для набора номера.
+
+Первый серверный HTML содержит весь доступный текст и ссылку телефона. Кнопки
+копирования появляются после гидратации, если доступен Clipboard API. Каждая
+кнопка копирует точное показанное значение, сообщает об успехе вспомогательным
+технологиям и показывает рядом со значением подсказку при ошибке записи в буфер
+обмена. Во время серверного рендеринга компонент не выполняет браузерных
+действий.
+
+Поддерживаемый исходный файл:
+`components/orionplace/contact/AboutPage.tsx`; физический интерфейс контактов:
+`interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonContact.ts`.