orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,162 @@
+# 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

@@ -0,0 +1,71 @@
+.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

@@ -0,0 +1,402 @@
+'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>
+  );
+}