orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/storefront/StorefrontHeader.tsx

@@ -1,389 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useRef,
-  type FocusEvent,
-  type KeyboardEvent,
-  type MouseEvent,
-  type PointerEvent,
-  type ReactNode,
-} from 'react';
-import { usePathname } from 'next/navigation';
-import { StorefrontLink as Link } from '@/lib/orionplace/navigation';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectStatus } from '@/stores/orionplace';
-import { headerLabels } from '@/lib/orionplace/headerLabels';
-import { BrandLogos } from '@/components/orionplace/branding/BrandLogos';
-import { CatalogHeader, type CatalogHeaderProps } from '@/components/orionplace/catalog/CatalogHeader';
-import { MainCurrencySwitcher } from '@/components/orionplace/currencies/MainCurrencySwitcher';
-import { MainLanguageSwitcher } from '@/components/orionplace/locale/MainLanguageSwitcher';
-import { MainSearch } from '@/components/orionplace/search/MainSearch';
-import { StorefrontAccount } from './StorefrontAccount';
-import { StorefrontCartButton } from './StorefrontCartButton';
-import { StorefrontWishlistButton } from './StorefrontWishlistButton';
-import styles from './StorefrontHeader.module.css';
-
-type ProductEvents = Pick<
-  CatalogHeaderProps,
-  | 'onAdd'
-  | 'onRemove'
-  | 'onToggleFavorite'
-  | 'onSubscribe'
-  | 'onUnsubscribe'
-  | 'onPreorder'
-  | 'onSelectSeller'
-  | 'onSelectVariant'
-  | 'onRequestSecondaryVariants'
-  | 'onSelectSecondaryVariant'
->;
-
-export interface StorefrontHeaderProps extends ProductEvents {
-  variantPending?: boolean;
-  variantError?: boolean;
-  productActionsDisabled?: boolean;
-  categoryHref?: CatalogHeaderProps['categoryHref'];
-  productHref?: CatalogHeaderProps['productHref'];
-  onSignIn?: () => void;
-  onSignOut?: () => void;
-  onSelectProfile?: () => void;
-  onSelectWallet?: () => void;
-  onSelectWishlist?: () => void;
-  onSelectCart?: () => void;
-  onPreviewCart?: () => void;
-  onCloseCartPreview?: () => void;
-  onSelectManufacturers?: () => void;
-  onSelectJournal?: () => void;
-  onSearch?: (query: string) => void;
-  onSelectCategory?: CatalogHeaderProps['onSelect'];
-  onSelectProduct?: CatalogHeaderProps['onSelectProduct'];
-  renderLogo?: (props: { label: string }) => ReactNode;
-  renderActions?: () => ReactNode;
-  renderCatalog?: () => ReactNode;
-  renderSearch?: (props: {
-    label: string;
-    buttonLabel: string;
-    disabled: boolean;
-  }) => ReactNode;
-  renderLocale?: (props: {
-    label: string;
-    codeOnly: true;
-    disabled: boolean;
-  }) => ReactNode;
-  renderCurrency?: (props: {
-    label: string;
-    codeOnly: true;
-    disabled: boolean;
-  }) => ReactNode;
-  renderAccount?: (props: { disabled: boolean }) => ReactNode;
-  renderWishlist?: (props: { disabled: boolean; compact: true }) => ReactNode;
-  renderCart?: (props: { disabled: boolean; compact: true }) => ReactNode;
-  renderCartPreview?: () => ReactNode;
-}
-
-const pages = ['manufacturers', 'journal'] as const;
-
-export function StorefrontHeader({
-  variantPending         = false,
-  variantError           = false,
-  productActionsDisabled = false,
-  categoryHref,
-  productHref,
-  onSignIn,
-  onSignOut,
-  onSelectProfile,
-  onSelectWallet,
-  onSelectWishlist,
-  onSelectCart,
-  onPreviewCart,
-  onCloseCartPreview,
-  onSelectManufacturers,
-  onSelectJournal,
-  onSearch,
-  onSelectCategory,
-  onSelectProduct,
-  renderLogo,
-  renderActions,
-  renderCatalog,
-  renderSearch,
-  renderLocale,
-  renderCurrency,
-  renderAccount,
-  renderWishlist,
-  renderCart,
-  renderCartPreview,
-  ...productEvents
-}: StorefrontHeaderProps) {
-  const status        = useOrionplace(selectStatus);
-  const locale        = useOrionplaceSelections((state) => state.localeCode);
-  const pathname      = usePathname();
-  const navigationRef = useRef<HTMLDivElement>(null);
-  const labels        = headerLabels(locale);
-  const unavailable   = status !== 'success';
-  const pageLinks     = pages.map((page) => ({
-    page,
-    label: labels[page],
-    href: `/${page}?locale=${encodeURIComponent(locale)}`,
-    active: pathname === `/${page}` || pathname.startsWith(`/${page}/`),
-  }));
-
-  // A narrow header scrolls its navigation row; keep the current page visible.
-  useEffect(() => {
-    const link    = navigationRef.current?.querySelector<HTMLElement>(
-      '[data-header-page][aria-current="page"]',
-    );
-    const row     = link?.parentElement;
-    if (!link || !row || row.scrollWidth <= row.clientWidth) {
-      return;
-    }
-
-    const linkBox = link.getBoundingClientRect();
-    const rowBox  = row.getBoundingClientRect();
-    if (linkBox.right > rowBox.right) {
-      row.scrollLeft += linkBox.right - rowBox.right;
-    } else if (linkBox.left < rowBox.left) {
-      row.scrollLeft -= rowBox.left - linkBox.left;
-    }
-  }, [pathname]);
-
-  // The cart preview opens while a mouse pointer or keyboard focus rests on
-  // the cart area, and closes shortly after both leave it. A tap selects the
-  // cart directly, because touch screens have no hover.
-  const cartPart      = useRef<HTMLDivElement>(null);
-  const cartTimer     = useRef<ReturnType<typeof setTimeout> | undefined>(
-    undefined,
-  );
-  const cartHandlers  = useRef({ onPreviewCart, onCloseCartPreview });
-
-  useEffect(() => {
-    cartHandlers.current = { onPreviewCart, onCloseCartPreview };
-  });
-  useEffect(() => () => clearTimeout(cartTimer.current), []);
-
-  function scheduleCartPreview(open: boolean) {
-    clearTimeout(cartTimer.current);
-    cartTimer.current = setTimeout(
-      () => {
-        if (open) {
-          cartHandlers.current.onPreviewCart?.();
-        } else {
-          cartHandlers.current.onCloseCartPreview?.();
-        }
-      },
-      open ? 400 : 250,
-    );
-  }
-
-  function cartPointer(event: PointerEvent<HTMLDivElement>, open: boolean) {
-    if (event.pointerType === 'mouse') {
-      scheduleCartPreview(open);
-    }
-  }
-
-  function cartFocusIn(event: FocusEvent<HTMLDivElement>) {
-    if (event.target.matches(':focus-visible')) {
-      scheduleCartPreview(true);
-    }
-  }
-
-  function cartFocusOut(event: FocusEvent<HTMLDivElement>) {
-    if (!cartPart.current?.contains(event.relatedTarget as Node | null)) {
-      scheduleCartPreview(false);
-    }
-  }
-
-  function cartKeydown(event: KeyboardEvent<HTMLDivElement>) {
-    if (event.key !== 'Escape') {
-      return;
-    }
-
-    clearTimeout(cartTimer.current);
-    onCloseCartPreview?.();
-    cartPart.current?.querySelector<HTMLElement>('button')?.focus();
-  }
-
-  function selectPage(
-    page: (typeof pages)[number],
-    event: MouseEvent<HTMLAnchorElement>,
-    close: (restoreFocus?: boolean) => void,
-  ) {
-    const modified = event.button !== 0 || event.ctrlKey || event.metaKey ||
-      event.shiftKey || event.altKey;
-    if (modified) {
-      return;
-    }
-    event.preventDefault();
-    close();
-    if (page === 'manufacturers') {
-      onSelectManufacturers?.();
-    } else {
-      onSelectJournal?.();
-    }
-  }
-
-  return (
-    <header
-      className={styles.header}
-      data-storefront-header
-    >
-      <div className={styles.grid}>
-        <Link
-          href={`/?locale=${encodeURIComponent(locale)}`}
-          aria-label={labels.home}
-          className={styles.logo}
-        >
-          <span
-            className={styles.logoSurface}
-            data-header-part="BrandLogos"
-          >
-            {renderLogo?.({ label: labels.home }) ?? (
-              <BrandLogos label={labels.home} />
-            )}
-          </span>
-        </Link>
-        <div
-          className={styles.search}
-          data-header-part="MainSearch"
-        >
-          {renderSearch?.({
-            label: labels.search,
-            buttonLabel: labels.find,
-            disabled: unavailable,
-          }) ?? (
-            <MainSearch
-              label={labels.search}
-              buttonLabel={labels.find}
-              disabled={unavailable}
-              onSearch={onSearch}
-            />
-          )}
-        </div>
-        <div className={styles.preferences}>
-          <div data-header-part="MainCurrencySwitcher">
-            {renderCurrency?.({
-              label: labels.currency,
-              disabled: unavailable,
-              codeOnly: true,
-            }) ?? (
-              <MainCurrencySwitcher
-                label={labels.currency}
-                disabled={unavailable}
-                codeOnly
-              />
-            )}
-          </div>
-          <div data-header-part="MainLanguageSwitcher">
-            {renderLocale?.({
-              label: labels.language,
-              disabled: unavailable,
-              codeOnly: true,
-            }) ?? (
-              <MainLanguageSwitcher
-                label={labels.language}
-                disabled={unavailable}
-                codeOnly
-              />
-            )}
-          </div>
-        </div>
-        <div className={styles.actions}>
-          {renderActions?.() ?? (
-            <>
-              <div data-header-part="StorefrontAccount">
-                {renderAccount?.({ disabled: unavailable }) ?? (
-                  <StorefrontAccount
-                    disabled={unavailable}
-                    onSignIn={onSignIn}
-                    onSignOut={onSignOut}
-                    onSelectProfile={onSelectProfile}
-                    onSelectWallet={onSelectWallet}
-                  />
-                )}
-              </div>
-              <div data-header-part="StorefrontWishlistButton">
-                {renderWishlist?.({
-                  disabled: unavailable,
-                  compact: true,
-                }) ?? (
-                  <StorefrontWishlistButton
-                    disabled={unavailable}
-                    compact
-                    onSelect={onSelectWishlist}
-                  />
-                )}
-              </div>
-              <div
-                ref={cartPart}
-                data-header-part="StorefrontCartButton"
-                className={styles.cart}
-                onPointerEnter={(event) => cartPointer(event, true)}
-                onPointerLeave={(event) => cartPointer(event, false)}
-                onFocus={cartFocusIn}
-                onBlur={cartFocusOut}
-                onKeyDown={cartKeydown}
-              >
-                {renderCart?.({ disabled: unavailable, compact: true }) ?? (
-                  <StorefrontCartButton
-                    disabled={unavailable}
-                    compact
-                    onSelect={onSelectCart}
-                  />
-                )}
-                {renderCartPreview?.()}
-              </div>
-            </>
-          )}
-        </div>
-        <div
-          ref={navigationRef}
-          className={styles.navigation}
-        >
-          <div data-header-part="CatalogHeader">
-            {renderCatalog?.() ?? (
-              <CatalogHeader
-                label={labels.catalog}
-                disabled={unavailable}
-                productActionsDisabled={productActionsDisabled}
-                closeLabel={labels.close}
-                backLabel={labels.back}
-                viewCategoryLabel={labels.viewCategory}
-                productsLabel={labels.highlights}
-                emptyLabel={labels.empty}
-                emptyProductsLabel={labels.emptyProducts}
-                categoryHref={categoryHref}
-                productHref={productHref}
-                onSelect={onSelectCategory}
-                onSelectProduct={onSelectProduct}
-                renderNavigation={({ close }) => pageLinks.map((link) => (
-                  <a
-                    key={link.page}
-                    href={link.href}
-                    aria-current={link.active ? 'page' : undefined}
-                    data-header-page={link.page}
-                    className={styles.pageLink}
-                    onClick={(event) => selectPage(link.page, event, close)}
-                  >
-                    {link.label}
-                  </a>
-                ))}
-                {...productEvents}
-              />
-            )}
-          </div>
-          {(variantPending || variantError) && (
-            <p
-              role="status"
-              aria-live="polite"
-              className={styles.variantStatus}
-            >
-              {variantError ? labels.variantFailed : labels.variantLoading}
-            </p>
-          )}
-        </div>
-      </div>
-    </header>
-  );
-}

package/templates/components/orionplace/storefront/StorefrontHome.README.md

@@ -1,138 +0,0 @@
-# StorefrontHome
-
-## English
-
-`StorefrontHome` composes the localized main banners, public categories,
-ordinary products, discounts, new products, page events and featured products.
-Empty sections are omitted. Categories use Application Load ordering settings.
-Product IDs stay separated by section: ordinary products exclude discounted,
-new and featured IDs; discounted products have `discount < 1`; new products use
-`flags.flag_is_new` or IDs supplied through the products store; featured
-products come only from `init.featured` and follow the events section.
-
-The page's spacing and section headings follow the width of the component
-itself (a size container), not the screen: from 640px of its own width the
-sections are 56px apart with 24px side padding and larger headings, and from
-1024px the side padding is 32px. A full-width home page looks as it did at
-those screen widths; a narrower placement gets the compact spacing.
-
-When Application Load has no new-flagged product, the generated home page
-calls `useOrionplaceHomeProducts()`. After mounting, it sends the discovered
-`products_search` endpoint with `filters: { only_new: true }` for the first
-page and passes the confirmed products and search sellers to
-`setHomeNewProducts(products, sellers)`. A failed request shows a notice with
-an explicit Retry action. Resetting the Application Load snapshot clears the
-loaded IDs. The home component itself does not request products.
-
-`productLimit` defaults to 12 for each product section. More reveals every
-already loaded item in that section without sending a request. An Application
-Load or limit change restores the limit. Featured More is a real localized link;
-a plain click calls `onSelectFeatured`, while modifier clicks retain browser
-navigation.
-
-The component forwards each category, banner, event, product, seller, variant,
-favorite and purchase callback from its physical child component.
-`productActionsDisabled` disables product-card interaction. `categoryHref` and
-`productHref` create server-rendered links. `renderBanners`, `renderCategories`,
-`renderProducts` and `renderEvents` replace their respective sections when data
-for that section exists. `renderProducts` receives the section key, ordered IDs,
-collection, disabled state and current limit.
-
-### Props
-
-| Prop                                                                                                              | Meaning                                                                                                              |
-| ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `productLimit?: number`                                                                                           | Limits the product entries rendered in each home section.                                                            |
-| `productActionsDisabled?: boolean`                                                                                | Disables cart, wishlist, subscription and preorder actions.                                                          |
-| `categoryHref?: (categoryId: number) => string`                                                                   | Builds the category destination from the callback arguments.                                                         |
-| `productHref?: (id: number) => string`                                                                            | Builds the product destination from the callback arguments.                                                          |
-| `featuredHref?: (locale: string) => string`                                                                       | Builds the featured destination from the callback arguments.                                                         |
-| `onSelectCategory?: (category: ICategory) => void`                                                                | Called when the visitor chooses a category. The callback payload is shown in its type.                               |
-| `onSelectBanner?: (banner: IAppLoadCommonBanner) => void`                                                         | Called when the visitor chooses a home banner. The callback payload is shown in its type.                            |
-| `onSelectEvent?: (event: IAppLoadCommonEvents) => void`                                                           | Called when the visitor chooses an event. The callback payload is shown in its type.                                 |
-| `onSelectFeatured?: () => void`                                                                                   | Called when the visitor opens featured products. The callback has no payload.                                        |
-| `renderBanners?: () => ReactNode`                                                                                 | Replaces the default banners region; the renderer inputs are shown in its type.                                      |
-| `renderCategories?: () => ReactNode`                                                                              | Replaces the default categories region; the renderer inputs are shown in its type.                                   |
-| `renderProducts?: (props: StorefrontHomeProductRenderProps) => ReactNode`                                         | Replaces the default products region; the renderer inputs are shown in its type.                                     |
-| `renderEvents?: () => ReactNode`                                                                                  | Replaces the default events region; the renderer inputs are shown in its type.                                       |
-| `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. |
-
-## Русский
-
-`StorefrontHome` объединяет локализованные главные баннеры, публичные категории,
-обычные товары, скидки, новинки, события страницы и рекомендуемые товары. Пустые
-разделы не выводятся. Категории используют настройки порядка из Application
-Load. ID товаров остаются разделены по подборкам: обычные товары исключают ID
-скидок, новинок и рекомендаций; в скидки входят товары с `discount < 1`; новинки
-определяются по `flags.flag_is_new` или по ID из хранилища товаров;
-рекомендованные товары берутся только из `init.featured` и следуют после
-событий.
-
-Отступы страницы и заголовки разделов зависят от ширины самого компонента
-(контейнерный запрос), а не экрана: с 640px собственной ширины разделы
-разделены 56px, боковые поля 24px и заголовки крупнее, с 1024px поля 32px.
-Домашняя страница во всю ширину выглядит как раньше при этих ширинах экрана,
-а в более узком месте получает компактные отступы.
-
-Если в Загрузке приложения нет товаров с признаком новинки, сгенерированная
-главная страница вызывает `useOrionplaceHomeProducts()`. После монтирования
-она отправляет доступный запрос `products_search` с
-`filters: { only_new: true }` для первой страницы и передаёт подтверждённые
-товары и продавцов из ответа в `setHomeNewProducts(products, sellers)`. При
-ошибке страница показывает сообщение с кнопкой «Повторить». Сброс снимка
-Загрузки приложения очищает загруженные ID. Сам компонент главной страницы
-товары не запрашивает.
-
-`productLimit` по умолчанию показывает до 12 товаров в каждом разделе. Кнопка
-«Ещё» открывает все уже загруженные товары этого раздела без запроса. Смена
-Application Load или ограничения снова применяет лимит. «Ещё» в рекомендациях —
-настоящая локализованная ссылка: обычное нажатие вызывает
-`onSelectFeatured`, а нажатие с модификатором сохраняет переход средствами
-браузера.
-
-Компонент передаёт обработчикам события категорий, баннеров, событий, товаров,
-продавцов, вариантов, избранного и покупки от соответствующих физических
-дочерних компонентов. `productActionsDisabled` блокирует взаимодействие с
-карточками. `categoryHref` и `productHref` создают ссылки в серверном HTML.
-`renderBanners`, `renderCategories`, `renderProducts` и `renderEvents` заменяют
-свои разделы, когда для них есть данные. `renderProducts` получает ключ
-раздела, упорядоченные ID, коллекцию, состояние блокировки и текущий лимит.
-
-### Свойства
-
-| Свойство                                                                                                          | Назначение                                                                                                         |
-| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `productLimit?: number`                                                                                           | Ограничивает число товаров в каждом блоке главной страницы.                                                        |
-| `productActionsDisabled?: boolean`                                                                                | Блокирует корзину, избранное, подписку и предзаказ.                                                                |
-| `categoryHref?: (categoryId: number) => string`                                                                   | Строит адрес ссылки категории из аргументов обработчика.                                                           |
-| `productHref?: (id: number) => string`                                                                            | Строит адрес ссылки товара из аргументов обработчика.                                                              |
-| `featuredHref?: (locale: string) => string`                                                                       | Строит адрес ссылки рекомендуемых товаров из аргументов обработчика.                                               |
-| `onSelectCategory?: (category: ICategory) => void`                                                                | Вызывается, когда покупатель выбирает категорию. Данные обработчика указаны в его типе.                            |
-| `onSelectBanner?: (banner: IAppLoadCommonBanner) => void`                                                         | Вызывается, когда покупатель выбирает баннер главной страницы. Данные обработчика указаны в его типе.              |
-| `onSelectEvent?: (event: IAppLoadCommonEvents) => void`                                                           | Вызывается, когда покупатель выбирает событие. Данные обработчика указаны в его типе.                              |
-| `onSelectFeatured?: () => void`                                                                                   | Вызывается, когда покупатель открывает рекомендуемые товары. Обработчик не получает данные.                        |
-| `renderBanners?: () => ReactNode`                                                                                 | Заменяет стандартный блок баннеров; входные данные функции указаны в её типе.                                      |
-| `renderCategories?: () => ReactNode`                                                                              | Заменяет стандартный блок категорий; входные данные функции указаны в её типе.                                     |
-| `renderProducts?: (props: StorefrontHomeProductRenderProps) => ReactNode`                                         | Заменяет стандартный блок товаров; входные данные функции указаны в её типе.                                       |
-| `renderEvents?: () => ReactNode`                                                                                  | Заменяет стандартный блок событий; входные данные функции указаны в её типе.                                       |
-| `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` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос. |

package/templates/components/orionplace/storefront/StorefrontHome.module.css

@@ -1,116 +0,0 @@
-/* The page follows its own width (the screen widths of the former steps,
-   since the home page spans the page), as in the other packages. */
-.root {
-  container: home / inline-size;
-  width: 100%;
-  min-width: 0;
-  color: var(--orionplace-text);
-}
-
-.home {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 40px;
-  padding-bottom: 40px;
-}
-
-.withoutBanner {
-  padding-top: 40px;
-}
-
-.section {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 1440px;
-  margin-inline: auto;
-  padding-inline: 16px;
-}
-
-.sectionHeader {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 20px;
-}
-
-/* 18px on 28px, 24px on 32px from 640px of the page's width, as Nuxt's
-   text-lg and text-2xl. */
-.heading {
-  margin: 0 0 20px;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 28px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.sectionHeader .heading {
-  margin-bottom: 0;
-}
-
-.more {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 4px;
-  margin-bottom: 4px;
-  padding: 0 0 2px;
-  border: 0;
-  border-bottom: 1px solid currentcolor;
-  outline: none;
-  background: transparent;
-  color: var(--orionplace-text);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-  letter-spacing: 0.08em;
-  text-decoration: none;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-/* The 19px link gets a touch target of at least 24px. */
-.more::before {
-  position: absolute;
-  inset: -4px 0;
-  content: '';
-}
-@media (hover: hover) {
-  .more:hover {
-    opacity: 0.7;
-  }
-}
-
-.more:focus-visible {
-  color: var(--orionplace-muted);
-}
-
-@container home (min-width: 640px) {
-  .home {
-    gap: 56px;
-    padding-bottom: 56px;
-  }
-
-  .withoutBanner {
-    padding-top: 56px;
-  }
-
-  .section {
-    padding-inline: 24px;
-  }
-
-  .heading {
-    font-size: 24px;
-    line-height: 32px;
-  }
-}
-
-@container home (min-width: 1024px) {
-  .section {
-    padding-inline: 32px;
-  }
-}