orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/search/MainSearch.module.css

@@ -0,0 +1,202 @@
+.search {
+  container-type: inline-size;
+  container-name: search;
+  position: relative;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+  transition: border-color 150ms ease;
+}
+
+.history {
+  position: absolute;
+  z-index: 60;
+  top: calc(100% + 1px);
+  right: -1px;
+  left: -1px;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  box-shadow: 0 12px 28px rgb(0 0 0 / 12%);
+}
+
+.history ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.history li {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+
+.history li:last-child {
+  border-bottom: 0;
+}
+
+.historyQuery,
+.historyDelete {
+  min-height: 2.5rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.historyDelete svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.historyQuery {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  padding: 0.625rem 0.875rem;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.historyDelete {
+  flex: 0 0 2.5rem;
+  color: var(--orionplace-muted);
+  font-size: 1.25rem;
+  line-height: calc(1.75 / 1.25);
+}
+
+.historyQuery:focus-visible,
+.historyDelete:focus-visible {
+  background: var(--orionplace-hover);
+  outline: none;
+}
+
+@media (hover: hover) {
+  .historyQuery:hover:not(:disabled),
+  .historyDelete:hover:not(:disabled) {
+    background: var(--orionplace-hover);
+    outline: none;
+  }
+}
+
+.historyStatus {
+  display: block;
+  margin: 0;
+  padding: 0.75rem 0.875rem;
+  color: var(--orionplace-muted);
+}
+
+.search:focus-within {
+  border-color: var(--orionplace-text);
+}
+
+.field {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+}
+
+.input {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 2.5rem;
+  padding: 1px 0.75rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 20px;
+  outline: none;
+}
+
+.input::placeholder {
+  color: var(--orionplace-muted);
+}
+
+.input:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  gap: 0.5rem;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding: 1px 0.625rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.75rem;
+  line-height: 16px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.button:focus-visible {
+  background: var(--orionplace-hover);
+  outline: none;
+}
+
+@media (hover: hover) {
+  .button:hover:not(:disabled) {
+    background: var(--orionplace-hover);
+    outline: none;
+  }
+}
+
+.button:disabled {
+  cursor: default;
+}
+
+.icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@container search (min-width: 480px) {
+  .input {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .search {
+    transition: none;
+  }
+}
+
+.historyQuery:disabled,
+.historyDelete:disabled {
+  opacity: 0.5;
+  cursor: default;
+}

package/templates/components/orionplace/search/MainSearch.tsx

@@ -0,0 +1,217 @@
+'use client';
+
+import { useEffect, useId, useRef, useState, type FormEvent } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import {
+  useOrionplace,
+  useOrionplaceBrowse,
+  useOrionplaceBrowseStore,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import { getAvailableValueFromObject } from '@/lib/orionplace/presentation';
+import styles from './MainSearch.module.css';
+
+export interface MainSearchProps {
+  label?: string;
+  buttonLabel?: string;
+  disabled?: boolean;
+  history?: readonly MainSearchHistoryItem[];
+  historyPending?: boolean;
+  historyError?: string;
+  historyDeleting?: readonly number[];
+  onSearch?: (query: string) => void;
+  onHistorySearch?: (query: string) => void;
+  onHistoryDelete?: (id: number) => void;
+}
+
+export interface MainSearchHistoryItem {
+  id: number;
+  q: string;
+}
+
+export function MainSearch({
+  label           = 'Search',
+  buttonLabel     = 'Find',
+  disabled        = false,
+  history         = [],
+  historyPending  = false,
+  historyError    = '',
+  historyDeleting = [],
+  onSearch,
+  onHistorySearch,
+  onHistoryDelete,
+}: MainSearchProps) {
+  const init                          = useOrionplace(selectInit);
+  const locale                        = useOrionplaceSelections((state) => state.localeCode);
+  const query                         = useOrionplaceBrowse((state) => state.searchQuery);
+  const browseStore                   = useOrionplaceBrowseStore();
+  const pathname                      = usePathname();
+  const searchParams                  = useSearchParams();
+  const routeQuery                    =
+    pathname === '/browse' ? (searchParams.get('q') ?? '').trim() : '';
+  const value                         = query || routeQuery;
+  const hints                         = [
+    ...new Set(
+      (init?.search_hints ?? [])
+        .map((hint) => getAvailableValueFromObject(hint, locale))
+        .filter((hint): hint is string => Boolean(hint)),
+    ),
+  ];
+  const id                            = useId();
+  const historySearch                 = useRef(onHistorySearch);
+  historySearch.current               = onHistorySearch;
+  const [historyOpen, setHistoryOpen] = useState(false);
+  // The store's hints step aside while the history list is open: on a phone
+  // the browser's own hint list would cover it.
+  const historyVisible                = historyOpen &&
+    Boolean(historyPending || history.length || historyError);
+  const removeLabel                   = locale.toLowerCase().startsWith('ru')
+    ? 'Удалить из истории'
+    : 'Remove from history';
+
+  useEffect(() => {
+    if (!query && routeQuery) {
+      browseStore.getState().setSearchQuery(routeQuery);
+    }
+  }, [browseStore, query, routeQuery]);
+
+  useEffect(() => {
+    if (!historyOpen || disabled || !historySearch.current) {
+      return;
+    }
+    const timeout = setTimeout(
+      () => historySearch.current?.(value.trim()),
+      250,
+    );
+    return () => clearTimeout(timeout);
+  }, [historyOpen, value, disabled]);
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const normalized = value.trim();
+    if (!disabled && normalized) {
+      setHistoryOpen(false);
+      // A phone closes its keyboard, so the results are not covered.
+      event.currentTarget.querySelector('input')?.blur();
+      onSearch?.(normalized);
+    }
+  }
+
+  return (
+    <form
+      className={styles.search}
+      data-main-search
+      onSubmit={submit}
+      onBlur={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setHistoryOpen(false);
+        }
+      }}
+    >
+      <label className={styles.field}>
+        <span className={styles.visuallyHidden}>{label}</span>
+        <input
+          type="search"
+          list={historyVisible ? undefined : id}
+          value={value}
+          placeholder={label}
+          disabled={disabled}
+          className={styles.input}
+          onChange={(event) =>
+            browseStore.getState().setSearchQuery(event.target.value)
+          }
+          onFocus={() => setHistoryOpen(true)}
+        />
+      </label>
+      <datalist id={id}>
+        {hints.map((hint) => (
+          <option
+            key={hint}
+            value={hint}
+          />
+        ))}
+      </datalist>
+      <button
+        type="submit"
+        disabled={disabled || !value.trim()}
+        className={styles.button}
+      >
+        <svg
+          viewBox="0 0 20 20"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          aria-hidden="true"
+          className={styles.icon}
+        >
+          <circle
+            cx="8.5"
+            cy="8.5"
+            r="5.5"
+          />
+          <path d="m13 13 4.5 4.5" />
+        </svg>
+        <span className={styles.visuallyHidden}>{buttonLabel}</span>
+      </button>
+      {historyVisible ? (
+        <div
+          className={styles.history}
+          data-search-history
+        >
+          {historyPending ? (
+            <span
+              className={styles.historyStatus}
+              role="status"
+            >
+              {locale.toLowerCase().startsWith('ru') ? 'Загрузка…' : 'Loading…'}
+            </span>
+          ) : historyError ? (
+            <p
+              className={styles.historyStatus}
+              role="alert"
+            >
+              {historyError}
+            </p>
+          ) : (
+            <ul>
+              {history.map((item) => (
+                <li key={item.id}>
+                  <button
+                    type="button"
+                    className={styles.historyQuery}
+                    disabled={disabled}
+                    onClick={() => {
+                      browseStore.getState().setSearchQuery(item.q);
+                      setHistoryOpen(false);
+                      onSearch?.(item.q);
+                    }}
+                  >
+                    {item.q}
+                  </button>
+                  <button
+                    type="button"
+                    className={styles.historyDelete}
+                    disabled={disabled || historyDeleting.includes(item.id)}
+                    aria-label={`${removeLabel}: ${item.q}`}
+                    onClick={() => onHistoryDelete?.(item.id)}
+                  >
+                    <svg
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      aria-hidden="true"
+                    >
+                      <path d="m5 5 10 10M15 5 5 15" />
+                    </svg>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      ) : null}
+    </form>
+  );
+}

package/templates/components/orionplace/search/ProductSearchResults.README.md

@@ -0,0 +1,166 @@
+# ProductSearchResults · React
+
+## English
+
+Search and category result area with filters, product cards, loading, retry,
+empty and pagination states.
+
+## Contract and dependencies
+
+The host owns `products_search` and passes the resulting products or their
+cached `productIds`, pagination and request state. `products` lets a server page
+render newly returned products before they are present in Application Load.
+When both are supplied, `productIds` selects and orders entries from that array.
+The component never replaces missing results with home-page products and does
+not issue requests.
+
+`facets` and `filters` supply the server-loaded selector set and current
+selection to `SearchFilters`. Omitting them uses the isolated browse store.
+The supplied pages pass the choices of the first response for the current query
+or category (`useProductSearch().facets`), so a filtered response never removes
+a choice.
+Filter changes call `onChangeFilters` with the complete selection. Clear calls
+`onClearFilters`. `hideCategories` removes a category facet for a fixed category
+page, while `fixedFilters` hides every condition already fixed by a manufacturer,
+seller, store or featured scope.
+
+A defined `query` shorter than three trimmed characters displays the search
+prompt instead of filters and results. While the first request is pending, the
+component shows filter and product placeholders. A later pending request keeps
+existing cards visible, disables their actions and exposes a loading status.
+`failed` shows Retry; a loaded empty result shows the shared search empty state,
+the relevant search or category hint, Clear when filters are selected and Home.
+
+The filter disclosure is available in a narrow container; wider containers
+keep filters visible. The result area retains its measured height while result
+data shrinks and resets that retained height when facets are cleared.
+
+Pagination appears when a previous or next page can exist. Previous is disabled
+on page 1. Next is disabled while pending, after failure or when `hasNext` is
+false. The buttons call `onChangePage` with the requested page and do not mutate
+the current page themselves.
+
+All `ProductGroup` actions and variant events are forwarded with their physical
+payloads. Source is maintained in
+`components/orionplace/search/ProductSearchResults.tsx`; filter interfaces are
+in `interfaces/orionplace/products/IProductSearchFacets.ts`.
+
+### Props
+
+| Prop                                                                                                              | Meaning                                                                                                              |
+| ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `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.                                                                                  |
+| `hideCategories?: boolean`                                                                                        | Hides the category filter because the page already fixes the category.                                               |
+| `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.                                                                    |
+| `pending?: boolean`                                                                                               | Shows the loading state and blocks duplicate actions.                                                                |
+| `failed?: boolean`                                                                                                | Marks the current load as failed and exposes the retry state.                                                        |
+| `loaded?: boolean`                                                                                                | Distinguishes a confirmed empty result from data that has not loaded yet.                                            |
+| `productActionsDisabled?: boolean`                                                                                | Disables cart, wishlist, subscription and preorder actions.                                                          |
+| `productHref?: (productId: number) => string`                                                                     | Builds the product destination from the callback arguments.                                                          |
+| `onSelectHome?: () => void`                                                                                       | Called when the visitor opens the home page. The callback has no payload.                                            |
+| `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.                                     |
+| `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. |
+
+## Русский
+
+Компонент объединяет фильтры, карточки товаров, загрузку, повтор запроса,
+пустой результат и пагинацию для поиска и страницы категории.
+
+Родитель управляет `products_search` и передаёт полученные товары либо их
+сохранённые `productIds`, пагинацию и состояние запроса. `products` позволяет
+серверной странице показать новые товары до их появления в Application Load.
+Если переданы оба свойства, `productIds` выбирает и упорядочивает товары из
+этого массива. Компонент не заменяет отсутствующие результаты товарами главной
+страницы и сам не выполняет запросы.
+
+`facets` и `filters` передают серверный набор вариантов и текущий выбор в
+`SearchFilters`. Без них используется отдельный browse store. Готовые страницы
+передают варианты из первого ответа для текущего запроса или категории
+(`useProductSearch().facets`), поэтому ответ с выбранными фильтрами не убирает
+варианты выбора. Изменение фильтра вызывает `onChangeFilters` с полным набором,
+а сброс — `onClearFilters`. `hideCategories` скрывает категории на странице с
+зафиксированной категорией, а `fixedFilters` скрывает условия, уже заданные
+производителем, продавцом, магазином или режимом рекомендуемых товаров.
+
+Если определённый `query` после удаления пробелов короче трёх символов, вместо
+фильтров и результатов показана подсказка поиска. Во время первого запроса
+видны заполнители фильтров и карточек. Следующее обновление сохраняет карточки,
+блокирует их действия и сообщает о загрузке. `failed` показывает кнопку повтора.
+Пустой подтверждённый результат использует общий вид пустого поиска, подходящую
+подсказку поиска или категории, сброс при выбранных фильтрах и кнопку «Главная».
+
+В узком контейнере фильтры раскрываются кнопкой, в широком остаются видимыми.
+Область результатов сохраняет измеренную высоту при уменьшении данных и
+сбрасывает её после очистки набора вариантов.
+
+Пагинация появляется, когда возможна предыдущая или следующая страница.
+«Назад» недоступна на первой странице. «Далее» недоступна во время запроса,
+после ошибки или при `hasNext = false`. Кнопки вызывают `onChangePage` с нужной
+страницей и сами не меняют текущее значение.
+
+Все действия и события вариантов `ProductGroup` передаются с физическими
+данными. Исходный файл:
+`components/orionplace/search/ProductSearchResults.tsx`; интерфейсы фильтров:
+`interfaces/orionplace/products/IProductSearchFacets.ts`.
+
+### Свойства
+
+| Свойство                                                                                                          | Назначение                                                                                                         |
+| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `products?: readonly IProduct[]`                                                                                  | Товары для серверного рендера и гидратации.                                                                        |
+| `productIds?: number[]`                                                                                           | ID для товара, используемые в переданном порядке.                                                                  |
+| `query?: string`                                                                                                  | Текущий текст поиска товаров или магазина.                                                                         |
+| `facets?: IProductSearchFacets`                                                                                   | Варианты фильтров из подтверждённого поиска товаров.                                                               |
+| `filters?: ProductFacetSelection`                                                                                 | Текущий подтверждённый набор фильтров.                                                                             |
+| `hideCategories?: boolean`                                                                                        | Скрывает фильтр категорий, когда категория уже задана страницей.                                                   |
+| `fixedFilters?: readonly string[]`                                                                                | Условия, заданные страницей и скрытые из редактируемых фильтров.                                                   |
+| `emptyDescription?: string`                                                                                       | Пояснение для пустого подтверждённого результата.                                                                  |
+| `filtersDisabled?: boolean`                                                                                       | Блокирует изменение фильтров, сохраняя текущий выбор видимым.                                                      |
+| `page?: number`                                                                                                   | Текущая страница результата.                                                                                       |
+| `pages?: number`                                                                                                  | Число страниц в ответе API.                                                                                        |
+| `total?: number`                                                                                                  | Общее число записей в ответе API.                                                                                  |
+| `hasNext?: boolean`                                                                                               | Есть ли у результата API следующая страница.                                                                       |
+| `pending?: boolean`                                                                                               | Показывает загрузку и блокирует повторные действия.                                                                |
+| `failed?: boolean`                                                                                                | Отмечает неудачную загрузку и показывает возможность повторить запрос.                                             |
+| `loaded?: boolean`                                                                                                | Отличает подтверждённый пустой результат от ещё не загруженных данных.                                             |
+| `productActionsDisabled?: boolean`                                                                                | Блокирует корзину, избранное, подписку и предзаказ.                                                                |
+| `productHref?: (productId: number) => string`                                                                     | Строит адрес ссылки товара из аргументов обработчика.                                                              |
+| `onSelectHome?: () => void`                                                                                       | Вызывается, когда покупатель открывает главную страницу. Обработчик не получает данные.                            |
+| `onChangeFilters?: (selection: ProductFacetSelection) => void`                                                    | Вызывается, когда покупатель изменяет фильтры товаров. Данные обработчика указаны в его типе.                      |
+| `onClearFilters?: () => void`                                                                                     | Вызывается, когда покупатель очищает фильтры товаров. Обработчик не получает данные.                               |
+| `onChangePage?: (page: number) => void`                                                                           | Вызывается, когда покупатель открывает другую страницу результатов. Данные обработчика указаны в его типе.         |
+| `onRetry?: () => 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` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос. |