orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/products/StorefrontWishlist.README.md

@@ -1,162 +0,0 @@
-# StorefrontWishlist · React
-
-## English
-
-`StorefrontWishlist` shows saved products and products with active availability
-notifications. Pass a server response through `initial` when the account page
-has already loaded it. Otherwise `loadOnMount` calls `onLoad` with
-`products_search`. The Wishlist tab sends `show_whishlist=true`; Notifications
-sends `subscription_exists=true`. Tab and page changes replace the cards and
-keep the returned pagination.
-
-The component stores every returned product in the isolated product store and
-renders the current page as standard `ProductGroup` cards. `productHref`
-supplies their product links. `productActionsDisabled`, a pending list request
-or a removal request disables product actions until the request finishes.
-
-Remove on the Wishlist tab calls `onRemoveWishlist` with
-`products_whishlist_delete_by_whish_id` and the listed product's
-`whishlist_id`. The returned `count` updates the shared wishlist counter.
-When the entry already ended elsewhere, for example in another tab, the
-backend answers “Wish not found” with the current `count`; the component
-applies it, clears the heart and loads the page again instead of showing the
-error.
-Unsubscribe on the Notifications tab calls `onUnsubscribeEntry` with
-`product_subscription_delete` and the listed product ID. A confirmed change
-updates ordinary, featured and secondary-variant copies of that product, then
-reloads the current page. If that reload fails, the entry stays removed and
-other entries remain usable. Retry requests the first page of the selected list.
-
-The card controls forward these independent events:
-
-- `onSelect(product)` receives the displayed `IProduct`.
-- `onSelectSeller(seller)` receives that product's `IProductSeller`.
-- `onSelectVariant({ product, variant })` receives the listed product ID and
-  selected main-variant value.
-- `onRequestSecondaryVariants(request)` receives the product group and main
-  variant value needed for the secondary lookup.
-- `onSelectSecondaryVariant({ product, variant })` receives the listed product
-  ID and the selected secondary variant with its product.
-- `onToggleFavorite({ product, selected })` reports the requested wishlist
-  state.
-- `onAdd({ product, quantity })` and `onRemove({ product, cartItem })` report
-  cart changes.
-- `onSubscribe({ product })`, `onUnsubscribe({ product })` and
-  `onPreorder({ product })` report availability actions.
-
-When a forwarded wishlist or notification action removes an entry from the
-product store, the component hides that card and reloads the current page to
-fill the available space.
-
-Source is maintained in
-`components/orionplace/products/StorefrontWishlist.tsx`; wishlist response
-fields are in `interfaces/orionplace/products/IWishlist.ts` and
-`interfaces/orionplace/products/IProductSearchApi.ts`.
-
-### Props
-
-| Prop                                                                                                                                                                                                                                                  | Meaning                                                                                                              |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `initial?: { products?: { data: IProduct[]; rpag: IApiPagination; }; min_max?: IProductSearchRanges; variants?: Record<string, IProductVariantFilter>; selects?: IProductSearchChoices; c_cat_products?: number; promo?: IPromoDefinition \| null; }` | Server-provided initial data used for the first render and hydration.                                                |
-| `initialError?: string`                                                                                                                                                                                                                               | Server-provided initial error used for the first render and hydration.                                               |
-| `initialMode?: "wishlist" \| "notifications"`                                                                                                                                                                                                         | Server-provided initial mode used for the first render and hydration.                                                |
-| `loadOnMount?: boolean`                                                                                                                                                                                                                               | Starts the load callback after hydration when server data was not supplied.                                          |
-| `productActionsDisabled?: boolean`                                                                                                                                                                                                                    | Disables cart, wishlist, subscription and preorder actions.                                                          |
-| `productHref?: (id: number) => string`                                                                                                                                                                                                                | Builds the product destination from the callback arguments.                                                          |
-| `onLoad: (action: WishlistLoadAction) => Promise<WishlistPage> \| WishlistPage`                                                                                                                                                                       | Called when the component needs its primary data. The callback payload is shown in its type.                         |
-| `onRemoveWishlist?: (action: WishlistRemoveAction) => Promise<{ count: number; }> \| { count: number; }`                                                                                                                                              | Called when the visitor removes a product from the current wishlist list. The callback payload is shown in its type. |
-| `onUnsubscribeEntry?: (action: WishlistUnsubscribeAction) => Promise<void> \| void`                                                                                                                                                                   | Called when the visitor removes an availability notification. The callback payload is shown in its type.             |
-| `onModeChange?: (mode: "wishlist" \| "notifications") => void`                                                                                                                                                                                        | Called when the visitor changes the current list mode. The callback payload is shown in its type.                    |
-| `onPageChange?: (page: number) => void`                                                                                                                                                                                                               | Called when the visitor requests another page. The callback payload is 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. |
-
-## Русский
-
-`StorefrontWishlist` показывает сохранённые товары и товары с действующими
-уведомлениями о наличии. Если страница личного кабинета уже загрузила ответ на
-сервере, передайте его через `initial`. Иначе `loadOnMount` вызывает `onLoad` с
-методом `products_search`. Вкладка «Избранное» отправляет
-`show_whishlist=true`, а «Уведомления» — `subscription_exists=true`. Смена
-вкладки или страницы заменяет карточки и сохраняет полученную пагинацию.
-
-Компонент сохраняет каждый полученный товар в отдельном хранилище товаров и
-показывает текущую страницу стандартными карточками `ProductGroup`.
-`productHref` задаёт ссылки товаров. `productActionsDisabled`, выполняемый
-запрос списка или удаления блокируют действия карточек до завершения запроса.
-
-Кнопка «Убрать» в избранном вызывает `onRemoveWishlist` с методом
-`products_whishlist_delete_by_whish_id` и `whishlist_id` сохранённой позиции.
-Поле `count` из ответа обновляет общий счётчик избранного. Если позиция уже
-удалена в другом месте, например в другой вкладке, сервер отвечает «Wish not
-found» с текущим `count`: компонент применяет счётчик, снимает отметку с
-товара и загружает страницу заново вместо показа ошибки. Кнопка «Отписаться»
-во вкладке уведомлений вызывает `onUnsubscribeEntry` с методом
-`product_subscription_delete` и ID товара. Подтверждённое изменение обновляет
-основную, рекомендованную и вложенные копии вариантов товара, затем повторно
-загружает
-текущую страницу. Если эта загрузка завершается ошибкой, позиция остаётся
-удалённой, а остальные позиции остаются доступны. Кнопка повтора загружает
-первую страницу выбранного списка.
-
-Элементы карточки независимо передают следующие события:
-
-- `onSelect(product)` получает показанный `IProduct`.
-- `onSelectSeller(seller)` получает `IProductSeller` этого товара.
-- `onSelectVariant({ product, variant })` получает ID товара из списка и
-  выбранное значение основного варианта.
-- `onRequestSecondaryVariants(request)` получает группу товара и значение
-  основного варианта для загрузки дополнительных вариантов.
-- `onSelectSecondaryVariant({ product, variant })` получает ID товара из
-  списка и выбранный дополнительный вариант с его товаром.
-- `onToggleFavorite({ product, selected })` сообщает запрошенное состояние
-  избранного.
-- `onAdd({ product, quantity })` и `onRemove({ product, cartItem })` сообщают
-  изменения корзины.
-- `onSubscribe({ product })`, `onUnsubscribe({ product })` и
-  `onPreorder({ product })` сообщают действия с доступностью товара.
-
-Если переданное действие избранного или уведомления удалило позицию из
-хранилища товаров, компонент скрывает карточку и повторно загружает текущую
-страницу, чтобы дополнить список.
-
-Исходный файл:
-`components/orionplace/products/StorefrontWishlist.tsx`; поля ответа находятся
-в `interfaces/orionplace/products/IWishlist.ts` и
-`interfaces/orionplace/products/IProductSearchApi.ts`.
-
-### Свойства
-
-| Свойство                                                                                                                                                                                                                                              | Назначение                                                                                                         |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `initial?: { products?: { data: IProduct[]; rpag: IApiPagination; }; min_max?: IProductSearchRanges; variants?: Record<string, IProductVariantFilter>; selects?: IProductSearchChoices; c_cat_products?: number; promo?: IPromoDefinition \| null; }` | Начальные данные с сервера для первого рендера и гидратации.                                                       |
-| `initialError?: string`                                                                                                                                                                                                                               | Начальное значение ошибки, полученное на сервере для первого рендера и гидратации.                                 |
-| `initialMode?: "wishlist" \| "notifications"`                                                                                                                                                                                                         | Начальное значение режима, полученное на сервере для первого рендера и гидратации.                                 |
-| `loadOnMount?: boolean`                                                                                                                                                                                                                               | Запускает загрузку после гидратации, если серверные данные не переданы.                                            |
-| `productActionsDisabled?: boolean`                                                                                                                                                                                                                    | Блокирует корзину, избранное, подписку и предзаказ.                                                                |
-| `productHref?: (id: number) => string`                                                                                                                                                                                                                | Строит адрес ссылки товара из аргументов обработчика.                                                              |
-| `onLoad: (action: WishlistLoadAction) => Promise<WishlistPage> \| WishlistPage`                                                                                                                                                                       | Вызывается, когда компоненту нужны основные данные. Данные обработчика указаны в его типе.                         |
-| `onRemoveWishlist?: (action: WishlistRemoveAction) => Promise<{ count: number; }> \| { count: number; }`                                                                                                                                              | Вызывается, когда покупатель удаляет товар из текущего списка избранного. Данные обработчика указаны в его типе.   |
-| `onUnsubscribeEntry?: (action: WishlistUnsubscribeAction) => Promise<void> \| void`                                                                                                                                                                   | Вызывается, когда покупатель отключает уведомление о наличии. Данные обработчика указаны в его типе.               |
-| `onModeChange?: (mode: "wishlist" \| "notifications") => void`                                                                                                                                                                                        | Вызывается, когда покупатель меняет режим списка. Данные обработчика указаны в его типе.                           |
-| `onPageChange?: (page: number) => 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` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос. |

package/templates/components/orionplace/products/StorefrontWishlist.module.css

@@ -1,71 +0,0 @@
-.root {
-  composes: feature featureStack from '../account/account.module.css';
-  container-type: inline-size;
-}
-
-.title {
-  composes: featureTitle from '../account/account.module.css';
-}
-
-.tabs {
-  composes: featureActions from '../account/account.module.css';
-}
-
-.button {
-  composes: featureButton from '../account/account.module.css';
-}
-
-.error {
-  composes: notice noticeError from '../account/account.module.css';
-}
-
-.remove {
-  justify-self: start;
-  padding: 0 0 0.125rem;
-  border: 0;
-  border-bottom: 1px solid currentColor;
-  border-radius: 0;
-  background: transparent;
-  color: var(--orionplace-muted);
-  font-family: inherit;
-  font-size: 11px;
-  line-height: normal;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  cursor: pointer;
-  outline: none;
-  transition: color 150ms;
-}
-
-.remove:focus-visible {
-  color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .remove:hover {
-    color: var(--orionplace-text);
-  }
-}
-
-.remove:disabled {
-  cursor: default;
-  opacity: 0.4;
-}
-
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .remove {
-    transition: none;
-  }
-}

package/templates/components/orionplace/products/StorefrontWishlist.tsx

@@ -1,402 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import {
-  useOrionplaceProducts,
-  useOrionplaceProductsStore,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
-import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
-import type {
-  IProductSearchRequest,
-  IProductSearchResponse,
-} from '@/interfaces/orionplace/products/IProductSearchApi';
-import { fieldErrorText, OrionplaceApiError } from '@/lib/orionplace/api';
-import { activityLabels } from '@/lib/orionplace/activityLabels';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { mergePagination } from '@/lib/orionplace/featureData';
-import { productLabels } from '@/lib/orionplace/productLabels';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
-import {
-  ProductGroup,
-  type ProductGroupEvents,
-  type ProductGroupProps,
-} from './ProductGroup';
-import styles from './StorefrontWishlist.module.css';
-
-type WishlistPage = NonNullable<IProductSearchResponse['page_data']>;
-
-export interface WishlistLoadAction {
-  endpoint: 'products_search';
-  request: IProductSearchRequest;
-  signal: AbortSignal;
-}
-
-export interface WishlistRemoveAction {
-  endpoint: 'products_whishlist_delete_by_whish_id';
-  request: Record<string, never>;
-  path: { whishlist_id: number };
-  signal: AbortSignal;
-}
-
-export interface WishlistUnsubscribeAction {
-  endpoint: 'product_subscription_delete';
-  request: Record<string, never>;
-  path: { product_id: number };
-  signal: AbortSignal;
-}
-
-export interface StorefrontWishlistProps extends ProductGroupEvents {
-  initial?: WishlistPage;
-  initialError?: string;
-  initialMode?: 'wishlist' | 'notifications';
-  loadOnMount?: boolean;
-  productActionsDisabled?: boolean;
-  productHref?: ProductGroupProps['productHref'];
-  onLoad: (action: WishlistLoadAction) => Promise<WishlistPage> | WishlistPage;
-  onRemoveWishlist?: (
-    action: WishlistRemoveAction,
-  ) => Promise<{ count: number }> | { count: number };
-  onUnsubscribeEntry?: (
-    action: WishlistUnsubscribeAction,
-  ) => Promise<void> | void;
-  onModeChange?: (mode: 'wishlist' | 'notifications') => void;
-  onPageChange?: (page: number) => void;
-}
-
-export function StorefrontWishlist({
-  initial,
-  initialError = '',
-  initialMode = 'wishlist',
-  loadOnMount = true,
-  productActionsDisabled = false,
-  productHref,
-  onLoad,
-  onRemoveWishlist,
-  onUnsubscribeEntry,
-  onModeChange,
-  onPageChange,
-  ...events
-}: StorefrontWishlistProps) {
-  const locale                      = useOrionplaceSelections((state) => state.localeCode);
-  const updates                     = useOrionplaceProducts((state) => state.updates.products);
-  const productStore                = useOrionplaceProductsStore();
-  const labels                      = activityLabels(locale);
-  const common                      = featureLabels(locale);
-  const productsCopy                = productLabels(locale);
-  const [mode, setMode]             = useState(initialMode);
-  const [products, setProducts]     = useState<IProduct[]>(
-    initial?.products?.data ?? [],
-  );
-  const [pagination, setPagination] = useState<Partial<IApiPagination>>(
-    initial?.products?.rpag ?? {},
-  );
-  const [loaded, setLoaded]         = useState(Boolean(initial));
-  const [pending, setPending]       = useState(
-    loadOnMount && !initial && !initialError,
-  );
-  const [error, setError]           = useState(initialError);
-  const activeRequest               = useRef<AbortController | undefined>(undefined);
-  const requested                   = useRef(false);
-  const callbacks                   = useRef({ onLoad, onRemoveWishlist, onUnsubscribeEntry });
-  callbacks.current                 = { onLoad, onRemoveWishlist, onUnsubscribeEntry };
-
-  const currentProducts             = products.map(
-    (product) => updates[product.id] ?? product,
-  );
-  const visibleProducts             = currentProducts.filter((product) =>
-    mode === 'notifications'
-      ? Boolean(product.subscription_id)
-      : Boolean(product.whishlist_id),
-  );
-  const disabled                    = productActionsDisabled || pending;
-
-  function requestBody(
-    page: number,
-    selectedMode = mode,
-  ): IProductSearchRequest {
-    return {
-      filters:
-        selectedMode === 'notifications'
-          ? { subscription_exists: true }
-          : { show_whishlist: true },
-      paginate: { page, pp_items: 12 },
-    };
-  }
-
-  async function fetchPage(
-    controller: AbortController,
-    page: number,
-    selectedMode = mode,
-  ) {
-    const data = await callbacks.current.onLoad({
-      endpoint: 'products_search',
-      request: requestBody(page, selectedMode),
-      signal: controller.signal,
-    });
-    if (controller.signal.aborted) {
-      return;
-    }
-    if (!data.products) {
-      throw new Error('Missing product list');
-    }
-
-    for (const product of data.products.data) {
-      productStore
-        .getState()
-        .setProduct(product, 'products', data.selects?.sellers);
-    }
-    setProducts(data.products.data);
-    setPagination((previous) =>
-      mergePagination(page === 1 ? {} : previous, data.products?.rpag),
-    );
-    setLoaded(true);
-  }
-
-  async function run(work: (controller: AbortController) => Promise<void>) {
-    if (activeRequest.current) {
-      return;
-    }
-    const controller      = new AbortController();
-    activeRequest.current = controller;
-    setPending(true);
-    setError('');
-    try {
-      await work(controller);
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        const fields = (reason as { fields?: Record<string, string> })?.fields;
-        setError(
-          fieldErrorText(fields ?? {}) || common.failed,
-        );
-      }
-    } finally {
-      if (activeRequest.current === controller) {
-        activeRequest.current = undefined;
-        setPending(false);
-      }
-    }
-  }
-
-  function load(page = 1, selectedMode = mode) {
-    return run((controller) => fetchPage(controller, page, selectedMode));
-  }
-
-  function selectMode(selectedMode: 'wishlist' | 'notifications') {
-    if (pending) {
-      return;
-    }
-    setMode(selectedMode);
-    setProducts([]);
-    setPagination({});
-    setLoaded(false);
-    onModeChange?.(selectedMode);
-    void load(1, selectedMode);
-  }
-
-  function changePage(page: number) {
-    onPageChange?.(page);
-    void load(page);
-  }
-
-  function removeEntry(listed: IProduct) {
-    const product = productStore.getState().getProduct(listed.id) ?? listed;
-    if (mode === 'notifications' && !callbacks.current.onUnsubscribeEntry) {
-      return;
-    }
-    if (
-      mode === 'wishlist' &&
-      (!product.whishlist_id || !callbacks.current.onRemoveWishlist)
-    ) {
-      setError(common.failed);
-      return;
-    }
-
-    void run(async (controller) => {
-      if (mode === 'notifications') {
-        await callbacks.current.onUnsubscribeEntry?.({
-          endpoint: 'product_subscription_delete',
-          request: {},
-          path: { product_id: product.id },
-          signal: controller.signal,
-        });
-        if (controller.signal.aborted) {
-          return;
-        }
-        productStore.getState().patchProduct(product.id, {
-          subscription_id: null,
-        });
-      } else {
-        let result: { count?: number } | undefined;
-        try {
-          result = await callbacks.current.onRemoveWishlist?.({
-            endpoint: 'products_whishlist_delete_by_whish_id',
-            request: {},
-            path: { whishlist_id: Number(product.whishlist_id) },
-            signal: controller.signal,
-          });
-          if (!result) {
-            return;
-          }
-        } catch (reason) {
-          // "Wish not found": the entry already ended, for example in another
-          // tab. OrionMarketplace sends the current counter with the error, and the page
-          // is read again after this.
-          if (
-            !(reason instanceof OrionplaceApiError) ||
-            reason.kind !== 'failed' ||
-            reason.status === 401 ||
-            !Object.keys(reason.fields).length
-          ) {
-            throw reason;
-          }
-          result = reason.data as { count?: number } | undefined;
-        }
-        if (controller.signal.aborted) {
-          return;
-        }
-        if (Number.isInteger(result?.count)) {
-          productStore
-            .getState()
-            .setProductCounters({ c_wishlist: result!.count });
-        }
-        productStore
-          .getState()
-          .patchProduct(product.id, { whishlist_id: null });
-      }
-
-      await fetchPage(controller, pagination.page ?? 1);
-    });
-  }
-
-  useEffect(() => {
-    for (const product of initial?.products?.data ?? []) {
-      productStore
-        .getState()
-        .setProduct(product, 'products', initial?.selects?.sellers);
-    }
-  }, [initial, productStore]);
-
-  useEffect(() => {
-    if (!requested.current && loadOnMount && !initial && !initialError) {
-      requested.current = true;
-      void load();
-    }
-    return () => {
-      activeRequest.current?.abort();
-      activeRequest.current = undefined;
-      requested.current     = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (loaded && !pending && visibleProducts.length < products.length) {
-      void load(pagination.page ?? 1);
-    }
-  }, [visibleProducts.length, products.length]);
-
-  return (
-    <section
-      className={styles.root}
-      data-feature-part="StorefrontWishlist"
-      aria-busy={pending || undefined}
-    >
-      <h1 className={styles.title}>{labels.wishlist}</h1>
-      <div className={styles.tabs}>
-        <button
-          className={styles.button}
-          type="button"
-          disabled={pending}
-          aria-pressed={mode === 'wishlist'}
-          data-wishlist-tab="wishlist"
-          onClick={() => selectMode('wishlist')}
-        >
-          {labels.wishlist}
-        </button>
-        <button
-          className={styles.button}
-          type="button"
-          disabled={pending}
-          aria-pressed={mode === 'notifications'}
-          data-wishlist-tab="notifications"
-          onClick={() => selectMode('notifications')}
-        >
-          {labels.notifications}
-        </button>
-      </div>
-
-      {error ? (
-        <div
-          role="alert"
-          className={styles.error}
-        >
-          {error}
-          <button
-            className={styles.button}
-            type="button"
-            disabled={pending}
-            onClick={() => void load()}
-          >
-            {common.retry}
-          </button>
-        </div>
-      ) : null}
-      {pending ? (
-        <p
-          role="status"
-          className="op-feature-loading"
-        >
-          <span className={styles.screenReaderOnly}>{common.loading}</span>
-        </p>
-      ) : null}
-
-      {visibleProducts.length ? (
-        <div data-wishlist-products>
-          <ProductGroup
-            products={visibleProducts}
-            productIds={visibleProducts.map((product) => product.id)}
-            layout="grid"
-            disabled={disabled}
-            productHref={productHref}
-            {...events}
-            renderFooter={(product) => (
-              <button
-                type="button"
-                className={styles.remove}
-                data-wishlist-remove
-                disabled={pending}
-                aria-label={
-                  mode === 'notifications'
-                    ? productsCopy.unsubscribeHint
-                    : productsCopy.removeFavorite
-                }
-                onClick={() => removeEntry(product)}
-              >
-                {mode === 'notifications'
-                  ? labels.stopNotification
-                  : labels.removeWish}
-              </button>
-            )}
-          />
-        </div>
-      ) : loaded && !pending ? (
-        <OrionplaceEmptyState
-          kind={mode === 'notifications' ? 'notifications' : 'wishlist'}
-          message={
-            mode === 'notifications'
-              ? labels.notificationsEmpty
-              : labels.wishlistEmpty
-          }
-        />
-      ) : null}
-
-      <StorefrontPagination
-        pagination={pagination}
-        pending={pending}
-        onChange={changePage}
-      />
-    </section>
-  );
-}