orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/banners/MainBanner.tsx

@@ -1,159 +0,0 @@
-'use client';
-
-import { useEffect, useMemo, useState } from 'react';
-import type { MouseEvent } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import type {
-  IAppLoadCommonBanner,
-  TBannerFormats,
-} from '@/interfaces/orionplace';
-import { useOrionplaceMediaFormat } from '@/hooks/useOrionplaceMediaFormat';
-import { bannerFormatSizes, homeBannerSlides } from '@/lib/orionplace/homeContent';
-import { homeLabels } from '@/lib/orionplace/homeLabels';
-import { safePublicUrl } from '@/lib/orionplace/presentation';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import styles from './MainBanner.module.css';
-
-export interface MainBannerProps {
-  label?: string;
-  format?: TBannerFormats | 'auto';
-  categoryHref?: (categoryId: number) => string;
-  onSelect?: (banner: IAppLoadCommonBanner) => void;
-}
-
-export function MainBanner({
-  label = '',
-  format = 'auto',
-  categoryHref,
-  onSelect,
-}: MainBannerProps) {
-  const init = useOrionplace(selectInit);
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const mediaFormat = useOrionplaceMediaFormat();
-  const copy = homeLabels(locale);
-  const selectedFormat = format === 'auto' ? mediaFormat : format;
-  // The box has the shape of the chosen format's picture.
-  const size = bannerFormatSizes[selectedFormat];
-  const shape = { aspectRatio: `${size.width} / ${size.height}` };
-  const slides = useMemo(
-    () => homeBannerSlides(init, locale, selectedFormat),
-    [init, locale, selectedFormat],
-  );
-  const [index, setIndex] = useState(0);
-  const activeIndex = index < slides.length ? index : 0;
-  const active = slides[activeIndex];
-  const category = active?.banner.category;
-  const linked = category != null;
-  const href = linked && categoryHref
-    ? safePublicUrl(categoryHref(category))
-    : '';
-
-  useEffect(() => {
-    setIndex(0);
-  }, [slides]);
-
-  function move(offset: number) {
-    if (!slides.length) {
-      return;
-    }
-    setIndex((current) => (
-      current + offset + slides.length
-    ) % slides.length);
-  }
-
-  function select(event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) {
-    const modified = event.button > 0 || event.metaKey || event.ctrlKey ||
-      event.shiftKey || event.altKey;
-    if (href && modified) {
-      return;
-    }
-
-    event.preventDefault();
-    if (active && linked) {
-      onSelect?.(active.banner);
-    }
-  }
-
-  if (!active) {
-    return null;
-  }
-
-  const caption = label || copy.banner;
-  const media = (
-    <OrionplaceImage
-      src={active.src}
-      alt={`${caption} · ${activeIndex + 1}`}
-      width={size.width}
-      height={size.height}
-      loading="eager"
-      className={styles.image}
-    />
-  );
-  const banner = href ? (
-    <a
-      href={href}
-      data-banner-id={active.banner.id}
-      style={shape}
-      className={`${styles.banner} ${styles.interactive}`}
-      onClick={select}
-    >
-      {media}
-    </a>
-  ) : linked ? (
-    <button
-      type="button"
-      data-banner-id={active.banner.id}
-      style={shape}
-      className={`${styles.banner} ${styles.interactive}`}
-      onClick={select}
-    >
-      {media}
-    </button>
-  ) : (
-    <div
-      data-banner-id={active.banner.id}
-      style={shape}
-      className={styles.banner}
-    >
-      {media}
-    </div>
-  );
-
-  return (
-    <section
-      className={styles.root}
-      data-main-banner
-      aria-label={caption}
-      aria-roledescription="carousel"
-    >
-      {banner}
-      {slides.length > 1 && (
-        <div className={styles.controls}>
-          <span role="status" aria-live="polite" className={styles.counter}>
-            {activeIndex + 1} / {slides.length}
-          </span>
-          <button
-            type="button"
-            aria-label={copy.previous}
-            className={styles.control}
-            onClick={() => move(-1)}
-          >
-            ←
-          </button>
-          <button
-            type="button"
-            aria-label={copy.next}
-            className={styles.control}
-            onClick={() => move(1)}
-          >
-            →
-          </button>
-        </div>
-      )}
-    </section>
-  );
-}

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

@@ -1,183 +0,0 @@
-# BlogArticle
-
-## English
-
-`BlogArticle` shows one journal article, its subscription access state, attached
-products and discussion. `postId` identifies the article. A route can pass the
-matching `initialPost` from its server request; the first server HTML then
-contains the title, author, date, cover dimensions and readable article text,
-and the browser does not repeat the request. Without that value, `onLoad`
-receives `blog_posts_get` with `filters.id = postId`, page 1 and one requested
-item. A successful empty result calls `onMissing` only until an article has
-been shown. If a previously shown article disappears after the session changes,
-the component shows its unavailable state instead.
-
-Full text appears only while both `is_full` and `has_full_access` are true.
-Otherwise the component uses `post_preview_text` and links to `/tariffs` with
-the selected locale. When `premium_tariff_ids` contains plan IDs, the link also
-passes them in `ids`. The cover uses the earliest `preview_images` item, then
-the first `preview_image_urls` value. It reserves a 3:2 area and disappears if
-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,
-tables, images and galleries, audio and video controls, collapsible sections,
-alignment and supported text styles. External links open in a new tab with
-`noopener noreferrer`; editor article links use `/journal/<id>`. Scripts,
-frames, forms, event attributes, unsafe URLs and unsupported styles are removed.
-A leading heading that repeats the page title is removed.
-
-For an authenticated, accessible non-public article with a positive reading
-time, trusted interaction with visible article text calls `onReading` with
-`blog_reading_start`. Timely follow-up requests use
-`blog_reading_heartbeat` and the interval returned by the previous response.
-Hiding the page, moving away, losing focus or becoming inactive pauses the
-requests. A 401, 403 or returned field error removes the full text and shows
-the access-changed notice.
-
-Products the author places in the text appear at those positions. The
-marketplace blog editor writes an empty block with `data-product-id="12"` for
-one card or `data-product-ids="12,15,9"` for a row of up to 24 cards; the
-block keeps its float or centred style, and `data-product-hidden-badges`
-(`new`, `popular`, `good-deal`) turns card badges off. Products missing from
-`related_products` are requested through `onLoadPlacements` with
-`products_search` and `filters.id_in`, up to 35 IDs per request. A block whose
-products are not found stays hidden. Article text styles do not reach the
-cards, and in a narrow article a floated card stands alone in the middle. The
-helper is `lib/orionplace/blogProductPlacements.ts`.
-
-`related_products` supplies complete product objects to `ProductGroup`, so
-their standard cards are present during server rendering. The product callbacks
-forward the same payloads as `ProductGroup`; `productActionsDisabled` blocks
-their actions while the host is processing a request. `commentsProps` controls
-the article's `BlogComments` instance. Authentication changes reload the
-article. Loading, refreshable failure, access change and unavailable states are
-separate.
-
-### Props
-
-| Prop                                                                                                                    | Meaning                                                                                                              |
-| ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `postId: number`                                                                                                        | ID of the post handled by BlogArticle.                                                                               |
-| `productActionsDisabled?: boolean`                                                                                      | Disables cart, wishlist, subscription and preorder actions.                                                          |
-| `initialPost?: IBlogPost`                                                                                               | Server-provided initial post used for the first render and hydration.                                                |
-| `commentsProps?: Omit<BlogCommentsProps, "postId">`                                                                     | Props forwarded to the comments child component.                                                                     |
-| `onLoad?: (action: BlogArticleLoadAction) => Promise<IBlogPost \| null \| undefined> \| IBlogPost \| null \| undefined` | Called when the component needs its primary data. The callback payload is shown in its type.                         |
-| `onLoadPlacements?: (action: BlogPlacementLoadAction) => Promise<BlogPlacementData \| null \| undefined> \| BlogPlacementData \| null \| undefined` | Called when products placed in the article text are missing from `related_products`: `products_search` with `filters.id_in`, up to 35 IDs. Without it only related products fill the placements. |
-| `onReading?: (action: BlogReadingAction) => Promise<IBlogReadingData> \| IBlogReadingData`                              | Called when the article reading session starts, continues or stops. The callback payload is shown in its type.       |
-| `onBack?: () => void`                                                                                                   | Called when the visitor chooses Back. The callback has no payload.                                                   |
-| `onLoaded?: (post: IBlogPost) => void`                                                                                  | Called when the requested data loads successfully. The callback payload is shown in its type.                        |
-| `onMissing?: () => void`                                                                                                | Called when the requested public record does not exist. The callback has no payload.                                 |
-| `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. |
-
-## Русский
-
-`BlogArticle` показывает одну статью журнала, её доступ по подписке,
-прикреплённые товары и обсуждение. `postId` задаёт статью. Маршрут может
-передать подходящий `initialPost`, полученный серверным запросом. Тогда первый
-серверный HTML уже содержит название, автора, дату, размеры обложки и
-читаемый текст, а браузер не повторяет запрос. Без этого значения `onLoad`
-получает `blog_posts_get` с `filters.id = postId`, первой страницей и одним
-запрошенным элементом. Первый успешный пустой результат вызывает `onMissing`.
-Если ранее показанная статья исчезла после смены сессии, компонент оставляет
-на странице состояние недоступной статьи.
-
-Полный текст показывается, только когда `is_full` и `has_full_access` равны
-`true`. В остальных случаях компонент использует `post_preview_text` и даёт
-ссылку на `/tariffs` с выбранной локалью. Если в `premium_tariff_ids` есть
-ID тарифов, ссылка также передаёт их в `ids`. Для обложки используется первое
-по `display_order` изображение из `preview_images`, затем первое значение
-`preview_image_urls`. Область сохраняет пропорции 3:2. После ошибки загрузки
-обложка исчезает. Компонент выводит только видео с адресами HTTP или HTTPS.
-
-Обложка и изображения текста открываются крупно: нажатие, Enter или пробел на
-изображении открывает `ProductReviewImageViewer` на нём, остальные изображения
-статьи — в одном шаге, а под каждым — его подпись (`figcaption`, иначе `title`,
-иначе `alt`). Изображения получают `role="button"`, остановку клавиатуры и
-название «Открыть изображение»; их отмечает курсор с лупой. Изображения внутри
-ссылки, кнопки или размещения товара сохраняют своё действие. Вспомогательный
-модуль — `lib/orionplace/blogImageViewer.ts`.
-
-При серверном рендеринге HTML редактора превращается в экранированные
-текстовые абзацы. После гидратации DOMPurify заменяет их очищенным
-форматированным HTML. Разрешены заголовки, оформление текста, ссылки, списки,
-цитаты, код, таблицы, изображения и галереи, аудио и видео с управлением,
-раскрываемые разделы, выравнивание и поддерживаемые стили текста. Внешние
-ссылки открываются в новой вкладке с `noopener noreferrer`, а ссылки редактора
-на статьи ведут на `/journal/<id>`. Скрипты, фреймы, формы, обработчики
-событий, небезопасные адреса и неподдерживаемые стили удаляются. Первый
-заголовок, повторяющий название страницы, удаляется.
-
-Для вошедшего покупателя чтение доступной непубличной статьи с положительным
-временем чтения учитывается после реального действия внутри видимого текста.
-Первый вызов `onReading` передаёт `blog_reading_start`, следующие
-своевременные вызовы — `blog_reading_heartbeat` с интервалом из предыдущего
-ответа. Скрытие страницы, уход от текста, потеря фокуса и отсутствие действий
-приостанавливают запросы. Ответ 401, 403 или ошибка поля удаляет полный текст
-и показывает сообщение об изменении доступа.
-
-Товары, которые автор разместил в тексте, показываются на своих местах.
-Редактор блога маркетплейса пишет пустой блок с `data-product-id="12"` для
-одной карточки или `data-product-ids="12,15,9"` для ряда до 24 карточек;
-блок сохраняет обтекание или выравнивание по центру, а
-`data-product-hidden-badges` (`new`, `popular`, `good-deal`) отключает значки
-карточки. Товары, которых нет в `related_products`, запрашиваются через
-`onLoadPlacements` — `products_search` с `filters.id_in`, до 35 ID за запрос.
-Блок, товары которого не найдены, скрыт. Стили текста статьи не действуют на
-карточки, а в узкой статье карточка с обтеканием стоит отдельно по центру.
-Вспомогательный модуль — `lib/orionplace/blogProductPlacements.ts`.
-
-`related_products` передаёт полные объекты товаров в `ProductGroup`, поэтому
-обычные карточки есть уже в серверном HTML. Обработчики товаров получают те
-же данные, что и в `ProductGroup`; `productActionsDisabled` блокирует
-действия, пока магазин обрабатывает запрос. `commentsProps` управляет
-экземпляром `BlogComments` этой статьи. При смене авторизации статья
-загружается снова. Загрузка, ошибка с повтором, изменение доступа и
-недоступная статья показаны как отдельные состояния.
-
-### Свойства
-
-| Свойство                                                                                                                | Назначение                                                                                                             |
-| ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| `postId: number`                                                                                                        | ID статьи, с которым работает BlogArticle.                                                                             |
-| `productActionsDisabled?: boolean`                                                                                      | Блокирует корзину, избранное, подписку и предзаказ.                                                                    |
-| `initialPost?: IBlogPost`                                                                                               | Начальное значение статьи, полученное на сервере для первого рендера и гидратации.                                     |
-| `commentsProps?: Omit<BlogCommentsProps, "postId">`                                                                     | Свойства, передаваемые дочернему компоненту комментариев.                                                              |
-| `onLoad?: (action: BlogArticleLoadAction) => Promise<IBlogPost \| null \| undefined> \| IBlogPost \| null \| undefined` | Вызывается, когда компоненту нужны основные данные. Данные обработчика указаны в его типе.                             |
-| `onLoadPlacements?: (action: BlogPlacementLoadAction) => Promise<BlogPlacementData \| null \| undefined> \| BlogPlacementData \| null \| undefined` | Вызывается, когда товаров, размещённых в тексте статьи, нет в `related_products`: `products_search` с `filters.id_in`, до 35 ID. Без него размещения заполняют только прикреплённые товары. |
-| `onReading?: (action: BlogReadingAction) => Promise<IBlogReadingData> \| IBlogReadingData`                              | Вызывается, когда сеанс чтения статьи начинается, продолжается или завершается. Данные обработчика указаны в его типе. |
-| `onBack?: () => void`                                                                                                   | Вызывается, когда покупатель выбирает «Назад». Обработчик не получает данные.                                          |
-| `onLoaded?: (post: IBlogPost) => void`                                                                                  | Вызывается, когда запрошенные данные успешно загружены. Данные обработчика указаны в его типе.                         |
-| `onMissing?: () => void`                                                                                                | Вызывается, когда запрошенная общедоступная запись не существует. Обработчик не получает данные.                       |
-| `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` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос. |