orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/manufacturers/StorefrontManufacturers.README.md

@@ -1,122 +0,0 @@
-# StorefrontManufacturers · React
-
-## English
-
-`StorefrontManufacturers` combines the alphabetical index, a complete
-letter-prefix list and manufacturer details. The host implements two typed
-actions so a server page and a browser use the same API boundary.
-
-`onLoadIndex` receives `manufactures_manufactures_list_get`,
-`{ filters: {} }` and an `AbortSignal`. Its returned groups appear in
-`ManufacturerIndex`. Selecting a letter calls `onSearch` with
-`manufactures_manufactures_get`, `filters.name_starts`, page one and the
-component's page size. The search field changes that prefix and also returns to
-page one. Pagination sends the requested page while retaining the current
-prefix.
-
-Selecting a manufacturer calls `onSearch` with `filters.id` and shows the
-returned name, image and localized `brand_pitch` as plain text. The product link
-defaults to `/browse?manufacturer=<id>&locale=<locale>`. A normal click calls
-`onSelectProducts(manufacturer)` when supplied; modifier clicks retain browser
-navigation. Back returns to the index and loads it if the page opened directly
-on a manufacturer.
-
-With `onNavigate(view, replace)` a letter, a manufacturer and Back open their
-own address instead (`?prefix=D`, `?manufacturer=5`, the index); a name search
-replaces the letter's address. The caller remounts the component with the
-view's props, so the browser's Back steps back through the views.
-
-`initialIndexGroups`, `initialManufacturers` and `initialPagination` provide
-server-rendered data. `manufacturerId` or `initialPrefix` opens the matching
-browse view. When its initial data is absent, `loadOnMount` starts the relevant
-request after hydration; it defaults to `true`. Initial errors remain visible
-without an automatic duplicate request. A new request cancels the earlier
-request in the same view, and unmounting cancels both request types.
-
-Source is maintained in
-`components/orionplace/manufacturers/StorefrontManufacturers.tsx`; request and
-response interfaces are in
-`interfaces/orionplace/catalog/ICatalogDirectory.ts`.
-
-### Props
-
-| Prop                                                                                                                    | Meaning                                                                                                   |
-| ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `manufacturerId?: number`                                                                                               | ID of the manufacturer handled by StorefrontManufacturers.                                                |
-| `initialPrefix?: string`                                                                                                | Server-provided initial prefix used for the first render and hydration.                                   |
-| `initialIndexGroups?: IManufacturerIndexGroup[]`                                                                        | Server-provided initial index groups used for the first render and hydration.                             |
-| `initialManufacturers?: IManufacturer[]`                                                                                | Server-provided initial manufacturers used for the first render and hydration.                            |
-| `initialPagination?: Partial<IApiPagination>`                                                                           | Server-provided initial pagination used for the first render and hydration.                               |
-| `initialIndexError?: string`                                                                                            | Server-provided initial index error used for the first render and hydration.                              |
-| `initialBrowseError?: string`                                                                                           | Server-provided initial browse error used for the first render and hydration.                             |
-| `loadOnMount?: boolean`                                                                                                 | Starts the load callback after hydration when server data was not supplied.                               |
-| `disabled?: boolean`                                                                                                    | Disables the component controls and prevents new actions.                                                 |
-| `productsHref?: (manufacturerId: number, locale: string) => string`                                                     | Builds the products destination from the callback arguments.                                              |
-| `onLoadIndex: (action: ManufacturerIndexLoadAction) => Promise<IManufacturerIndexGroup[]> \| IManufacturerIndexGroup[]` | Called when the manufacturer index must be loaded. The callback payload is shown in its type.             |
-| `onSearch: (action: ManufacturerSearchAction) => Promise<ManufacturerSearchData> \| ManufacturerSearchData`             | Called when the visitor submits search text. The callback payload is shown in its type.                   |
-| `onSelectProducts?: (manufacturer: IManufacturer) => void`                                                              | Called when the visitor opens products for the current record. The callback payload is shown in its type. |
-| `onNavigate?: (view: ManufacturerView, replace: boolean) => void`                                                       | Opens a letter, a manufacturer or the index by its address; the caller remounts the component.            |
-| `onIndexChange?: (groups: IManufacturerIndexGroup[]) => void`                                                           | Called when the manufacturer index data changes. The callback payload is shown in its type.               |
-| `onResultsChange?: (data: ManufacturerSearchData) => void`                                                              | Called when the confirmed result data changes. The callback payload is shown in its type.                 |
-
-## Русский
-
-`StorefrontManufacturers` объединяет алфавитный указатель, полный
-список на выбранную букву и данные одного производителя. Родитель
-выполняет два типизированных действия, чтобы серверная страница и
-браузер использовали один контракт API.
-
-`onLoadIndex` получает `manufactures_manufactures_list_get`,
-`{ filters: {} }` и `AbortSignal`. Возвращённые группы показывает
-`ManufacturerIndex`. Буква вызывает `onSearch` с
-`manufactures_manufactures_get`, `filters.name_starts`, первой страницей и
-размером страницы компонента. Поиск меняет этот префикс и также
-возвращается на первую страницу. Пагинация передаёт нужную страницу и
-сохраняет текущий префикс.
-
-Выбор производителя вызывает `onSearch` с `filters.id` и показывает
-возвращённые название, изображение и локализованный `brand_pitch` без
-HTML-разметки. Ссылка на товары по умолчанию ведёт на
-`/browse?manufacturer=<id>&locale=<locale>`. Обычный щелчок вызывает
-`onSelectProducts(manufacturer)`, если этот обработчик передан. Щелчок с
-модификатором сохраняет переход браузера. Кнопка «Назад» открывает
-указатель и загружает его, если страница сразу открылась для одного
-производителя.
-
-С `onNavigate(view, replace)` буква, производитель и «Назад» открывают свой
-адрес (`?prefix=D`, `?manufacturer=5`, указатель); поиск по названию заменяет
-адрес буквы. Вызывающий пересоздаёт компонент с параметрами вида, поэтому
-«Назад» в браузере проходит по видам обратно.
-
-`initialIndexGroups`, `initialManufacturers` и `initialPagination` передают
-данные для серверного HTML. `manufacturerId` или `initialPrefix` сразу
-открывает соответствующий список. Если начальных данных нет, `loadOnMount`
-запускает нужный запрос после гидратации; по умолчанию он включён.
-Начальная ошибка остаётся видимой без повторного автоматического запроса.
-Новый запрос отменяет предыдущий в том же режиме, а размонтирование
-отменяет оба типа запросов.
-
-Исходный файл:
-`components/orionplace/manufacturers/StorefrontManufacturers.tsx`; интерфейсы запросов
-и ответов находятся в `interfaces/orionplace/catalog/ICatalogDirectory.ts`.
-
-### Свойства
-
-| Свойство                                                                                                                | Назначение                                                                                            |
-| ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `manufacturerId?: number`                                                                                               | ID производителя, с которым работает StorefrontManufacturers.                                         |
-| `initialPrefix?: string`                                                                                                | Начальное значение префикса, полученное на сервере для первого рендера и гидратации.                  |
-| `initialIndexGroups?: IManufacturerIndexGroup[]`                                                                        | Начальное значение групп указателя, полученное на сервере для первого рендера и гидратации.           |
-| `initialManufacturers?: IManufacturer[]`                                                                                | Начальное значение производителей, полученное на сервере для первого рендера и гидратации.            |
-| `initialPagination?: Partial<IApiPagination>`                                                                           | Начальное значение пагинации, полученное на сервере для первого рендера и гидратации.                 |
-| `initialIndexError?: string`                                                                                            | Начальное значение ошибки указателя, полученное на сервере для первого рендера и гидратации.          |
-| `initialBrowseError?: string`                                                                                           | Начальное значение ошибки поиска, полученное на сервере для первого рендера и гидратации.             |
-| `loadOnMount?: boolean`                                                                                                 | Запускает загрузку после гидратации, если серверные данные не переданы.                               |
-| `disabled?: boolean`                                                                                                    | Блокирует элементы компонента и новые действия.                                                       |
-| `productsHref?: (manufacturerId: number, locale: string) => string`                                                     | Строит адрес ссылки товаров из аргументов обработчика.                                                |
-| `onLoadIndex: (action: ManufacturerIndexLoadAction) => Promise<IManufacturerIndexGroup[]> \| IManufacturerIndexGroup[]` | Вызывается, когда нужно загрузить указатель производителей. Данные обработчика указаны в его типе.    |
-| `onSearch: (action: ManufacturerSearchAction) => Promise<ManufacturerSearchData> \| ManufacturerSearchData`             | Вызывается, когда покупатель отправляет поисковый текст. Данные обработчика указаны в его типе.       |
-| `onSelectProducts?: (manufacturer: IManufacturer) => void`                                                              | Вызывается, когда покупатель открывает товары текущей записи. Данные обработчика указаны в его типе.  |
-| `onNavigate?: (view: ManufacturerView, replace: boolean) => void`                                                       | Открывает букву, производителя или указатель по адресу; вызывающий пересоздаёт компонент.             |
-| `onIndexChange?: (groups: IManufacturerIndexGroup[]) => void`                                                           | Вызывается, когда изменяются данные указателя производителей. Данные обработчика указаны в его типе.  |
-| `onResultsChange?: (data: ManufacturerSearchData) => void`                                                              | Вызывается, когда изменяются подтверждённые данные результата. Данные обработчика указаны в его типе. |

package/templates/components/orionplace/manufacturers/StorefrontManufacturers.module.css

@@ -1,92 +0,0 @@
-/* The letter and details views use the shared account classes, as the
-   other packages use op-feature-*; ManufacturerIndex styles its own. */
-.root {
-  composes: feature featureStack from '../account/account.module.css';
-  width: 100%;
-  container-type: inline-size;
-}
-
-.heading {
-  composes: featureHeading from '../account/account.module.css';
-}
-
-.title {
-  composes: featureTitle from '../account/account.module.css';
-}
-
-.button {
-  composes: featureButton from '../account/account.module.css';
-}
-
-.search {
-  composes: featureActions from '../account/account.module.css';
-  align-items: flex-end;
-}
-
-.label {
-  composes: featureLabel from '../account/account.module.css';
-  flex: 1;
-}
-
-.input {
-  composes: featureInput from '../account/account.module.css';
-}
-
-.error {
-  composes: notice noticeError from '../account/account.module.css';
-}
-
-.records {
-  composes: featureRecords from '../account/account.module.css';
-  gap: 1rem;
-}
-
-.record {
-  composes: featurePanel featureStack from '../account/account.module.css';
-}
-
-.image {
-  width: 100%;
-  height: 8rem;
-  box-sizing: border-box;
-  padding: 1rem;
-  border-radius: 0;
-  background: var(--orionplace-surface);
-}
-
-.subtitle {
-  composes: featureSubtitle from '../account/account.module.css';
-}
-
-.copy {
-  composes: featureCopy featureMuted from '../account/account.module.css';
-  line-height: 1.75rem;
-}
-
-.actions {
-  composes: featureActions from '../account/account.module.css';
-}
-
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* The page's own width (592px and 960px), as in the other packages. */
-@container (min-width: 592px) {
-  .records {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container (min-width: 960px) {
-  .records {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}

package/templates/components/orionplace/manufacturers/StorefrontManufacturers.tsx

@@ -1,455 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useRef,
-  useState,
-  type FormEvent,
-  type MouseEvent,
-} from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
-import type {
-  IManufacturer,
-  IManufacturerIndexGroup,
-  IManufacturerIndexRequest,
-  IManufacturerSearchRequest,
-} from '@/interfaces/orionplace/catalog/ICatalogDirectory';
-import { directoryLabels } from '@/lib/orionplace/directoryLabels';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { manufacturerIndexLabels } from '@/lib/orionplace/manufacturerIndex';
-import { mergePagination } from '@/lib/orionplace/featureData';
-import {
-  manufacturerIndexResult,
-  manufacturerPitch,
-  manufacturerSearchRequest,
-  manufacturerSearchResult,
-  type ManufacturerSearchData,
-} from '@/lib/orionplace/manufacturerDirectory';
-import { safePublicUrl } from '@/lib/orionplace/presentation';
-import { ManufacturerIndex } from './ManufacturerIndex';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
-import styles from './StorefrontManufacturers.module.css';
-import { apiErrorMessage } from '@/lib/orionplace/api';
-
-export interface ManufacturerIndexLoadAction {
-  endpoint: 'manufactures_manufactures_list_get';
-  request: IManufacturerIndexRequest;
-  signal: AbortSignal;
-}
-
-export interface ManufacturerSearchAction {
-  endpoint: 'manufactures_manufactures_get';
-  request: IManufacturerSearchRequest;
-  signal: AbortSignal;
-}
-
-/** One view of the directory: the index, a letter or one manufacturer. */
-export interface ManufacturerView {
-  manufacturer?: number;
-  prefix?: string;
-}
-
-export interface StorefrontManufacturersProps {
-  manufacturerId?: number;
-  initialPrefix?: string;
-  initialIndexGroups?: IManufacturerIndexGroup[];
-  initialManufacturers?: IManufacturer[];
-  initialPagination?: Partial<IApiPagination>;
-  initialIndexError?: string;
-  initialBrowseError?: string;
-  loadOnMount?: boolean;
-  disabled?: boolean;
-  productsHref?: (manufacturerId: number, locale: string) => string;
-  onLoadIndex: (
-    action: ManufacturerIndexLoadAction,
-  ) => Promise<IManufacturerIndexGroup[]> | IManufacturerIndexGroup[];
-  onSearch: (
-    action: ManufacturerSearchAction,
-  ) => Promise<ManufacturerSearchData> | ManufacturerSearchData;
-  onSelectProducts?: (manufacturer: IManufacturer) => void;
-  /**
-   * Opens a view by its address (Back steps through them). The caller
-   * remounts the component with the view's props; without it the views
-   * change in place.
-   */
-  onNavigate?: (view: ManufacturerView, replace: boolean) => void;
-  onIndexChange?: (groups: IManufacturerIndexGroup[]) => void;
-  onResultsChange?: (data: ManufacturerSearchData) => void;
-}
-
-export function StorefrontManufacturers({
-  manufacturerId,
-  initialPrefix = '',
-  initialIndexGroups,
-  initialManufacturers,
-  initialPagination = {},
-  initialIndexError = '',
-  initialBrowseError = '',
-  loadOnMount = true,
-  disabled = false,
-  productsHref = (id, locale) =>
-    `/browse?manufacturer=${id}&locale=${encodeURIComponent(locale)}`,
-  onLoadIndex,
-  onSearch,
-  onSelectProducts,
-  onNavigate,
-  onIndexChange,
-  onResultsChange,
-}: StorefrontManufacturersProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = directoryLabels(locale);
-  const common = featureLabels(locale);
-  const indexCopy = manufacturerIndexLabels(locale);
-  const initialBrowsing = Boolean(manufacturerId || initialPrefix);
-  const indexAutomatic = loadOnMount && !initialBrowsing &&
-    initialIndexGroups === undefined && !initialIndexError;
-  const browseAutomatic = loadOnMount && initialBrowsing &&
-    initialManufacturers === undefined && !initialBrowseError;
-  const indexRequest = useRef<AbortController | undefined>(undefined);
-  const browseRequest = useRef<AbortController | undefined>(undefined);
-  const loadIndexRef = useRef(onLoadIndex);
-  const searchRef = useRef(onSearch);
-  const [selected, setSelected] = useState(manufacturerId);
-  const [prefix, setPrefix] = useState(initialPrefix);
-  const [browsing, setBrowsing] = useState(initialBrowsing);
-  const [groups, setGroups] = useState(initialIndexGroups ?? []);
-  const [indexLoaded, setIndexLoaded] = useState(
-    initialIndexGroups !== undefined,
-  );
-  const [indexPending, setIndexPending] = useState(indexAutomatic);
-  const [indexError, setIndexError] = useState(initialIndexError);
-  const [manufacturers, setManufacturers] = useState(
-    initialManufacturers ?? [],
-  );
-  const [pagination, setPagination] = useState(initialPagination);
-  const [browseLoaded, setBrowseLoaded] = useState(
-    initialManufacturers !== undefined,
-  );
-  const [browsePending, setBrowsePending] = useState(browseAutomatic);
-  const [browseError, setBrowseError] = useState(initialBrowseError);
-  loadIndexRef.current = onLoadIndex;
-  searchRef.current = onSearch;
-  const busy = disabled || indexPending || browsePending;
-
-  async function loadIndex() {
-    if (disabled) {
-      return;
-    }
-    indexRequest.current?.abort();
-    const controller = new AbortController();
-    indexRequest.current = controller;
-    setIndexPending(true);
-    setIndexLoaded(false);
-    setIndexError('');
-    setGroups([]);
-
-    try {
-      const result = manufacturerIndexResult(await loadIndexRef.current({
-        endpoint: 'manufactures_manufactures_list_get',
-        request: { filters: {} },
-        signal: controller.signal,
-      }));
-      if (controller.signal.aborted) {
-        return;
-      }
-      setGroups(result);
-      setIndexLoaded(true);
-      onIndexChange?.(result);
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        setIndexError(
-          apiErrorMessage(reason) || common.failed,
-        );
-      }
-    } finally {
-      if (indexRequest.current === controller) {
-        indexRequest.current = undefined;
-        setIndexPending(false);
-      }
-    }
-  }
-
-  async function loadResults(
-    page = 1,
-    nextSelected = selected,
-    nextPrefix = prefix,
-  ) {
-    if (disabled) {
-      return;
-    }
-    browseRequest.current?.abort();
-    const controller = new AbortController();
-    browseRequest.current = controller;
-    setBrowsePending(true);
-    setBrowseError('');
-
-    try {
-      const result = manufacturerSearchResult(await searchRef.current({
-        endpoint: 'manufactures_manufactures_get',
-        request: manufacturerSearchRequest(nextSelected, nextPrefix, page),
-        signal: controller.signal,
-      }));
-      if (controller.signal.aborted) {
-        return;
-      }
-      setManufacturers(result.manufactures.data);
-      setPagination((previous) => mergePagination(
-        page === 1 ? {} : previous,
-        result.manufactures.rpag,
-      ));
-      setBrowseLoaded(true);
-      onResultsChange?.(result);
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        setBrowseError(
-          apiErrorMessage(reason) || common.failed,
-        );
-      }
-    } finally {
-      if (browseRequest.current === controller) {
-        browseRequest.current = undefined;
-        setBrowsePending(false);
-      }
-    }
-  }
-
-  // The address takes over until the new view mounts.
-  function navigate(view: ManufacturerView, replace = false) {
-    setBrowsePending(true);
-    onNavigate?.(view, replace);
-  }
-
-  function selectManufacturer(id: number) {
-    if (busy) {
-      return;
-    }
-    if (onNavigate) {
-      navigate({ manufacturer: id });
-      return;
-    }
-    setSelected(id);
-    setBrowsing(true);
-    setBrowseLoaded(false);
-    void loadResults(1, id, prefix);
-  }
-
-  function selectLetter(letter: string) {
-    if (busy) {
-      return;
-    }
-    if (onNavigate) {
-      navigate({ prefix: letter });
-      return;
-    }
-    setSelected(undefined);
-    setPrefix(letter);
-    setBrowsing(true);
-    setBrowseLoaded(false);
-    void loadResults(1, undefined, letter);
-  }
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    const nextPrefix = prefix.trim();
-    setPrefix(nextPrefix);
-    if (onNavigate && nextPrefix !== initialPrefix) {
-      navigate({ prefix: nextPrefix || undefined }, true);
-      return;
-    }
-    setBrowseLoaded(false);
-    void loadResults(1, undefined, nextPrefix);
-  }
-
-  function back() {
-    if (busy) {
-      return;
-    }
-    if (onNavigate) {
-      navigate({});
-      return;
-    }
-    browseRequest.current?.abort();
-    setBrowsing(false);
-    setSelected(undefined);
-    if (!indexLoaded) {
-      void loadIndex();
-    }
-  }
-
-  function selectProducts(
-    event: MouseEvent<HTMLAnchorElement>,
-    manufacturer: IManufacturer,
-  ) {
-    const modified = event.button > 0 || event.metaKey || event.ctrlKey ||
-      event.shiftKey || event.altKey;
-    if (modified || !onSelectProducts) {
-      return;
-    }
-    event.preventDefault();
-    onSelectProducts(manufacturer);
-  }
-
-  useEffect(() => {
-    if (indexAutomatic) {
-      void loadIndex();
-    } else if (browseAutomatic) {
-      void loadResults(1, manufacturerId, initialPrefix);
-    }
-
-    return () => {
-      indexRequest.current?.abort();
-      browseRequest.current?.abort();
-    };
-  }, []);
-
-  return (
-    <section
-      className={styles.root}
-      data-feature-part="StorefrontManufacturers"
-      aria-busy={indexPending || browsePending}
-    >
-      {!browsing ? (
-        <ManufacturerIndex
-          state={{
-            pending: indexPending,
-            loaded: indexLoaded,
-            groups,
-            error: indexError,
-          }}
-          disabled={busy}
-          headingLevel={1}
-          onLoad={() => void loadIndex()}
-          onRetry={() => void loadIndex()}
-          onSelectLetter={selectLetter}
-          onSelectManufacturer={selectManufacturer}
-        />
-      ) : (
-        <>
-          <div className={styles.heading}>
-            <h1 className={styles.title}>
-              {selected && manufacturers[0]
-                ? manufacturers[0].name
-                : labels.manufacturers}
-            </h1>
-            <button
-              className={styles.button}
-              type="button"
-              disabled={busy}
-              onClick={back}
-            >
-              ← {common.back}
-            </button>
-          </div>
-
-          {!selected ? (
-            <form className={styles.search} onSubmit={submit}>
-              <label className={styles.label}>
-                <span>{labels.letter}</span>
-                <input
-                  className={styles.input}
-                  value={prefix}
-                  type="search"
-                  disabled={busy}
-                  onChange={(event) => setPrefix(event.target.value)}
-                />
-              </label>
-              <button
-                className={styles.button}
-                type="submit"
-                disabled={busy}
-              >
-                {common.search}
-              </button>
-            </form>
-          ) : null}
-
-          {browseError ? (
-            <div className={styles.error} role="alert">
-              {browseError}
-              <button
-                className={styles.button}
-                type="button"
-                disabled={busy}
-                onClick={() => void loadResults()}
-              >
-                {common.retry}
-              </button>
-            </div>
-          ) : null}
-          {browsePending ? (
-            <p className="op-feature-loading" role="status">
-              <span className={styles.screenReaderOnly}>{common.loading}</span>
-            </p>
-          ) : null}
-
-          {manufacturers.length ? (
-            <ul className={styles.records}>
-              {manufacturers.map((manufacturer) => {
-                const pitch = manufacturerPitch(manufacturer, locale);
-                const href = safePublicUrl(
-                  productsHref(manufacturer.id, locale),
-                );
-
-                return (
-                  <li
-                    key={manufacturer.id}
-                    className={styles.record}
-                  >
-                    <OrionplaceImage
-                      src={manufacturer.image || manufacturer.small_image}
-                      alt={manufacturer.name}
-                      width={640}
-                      height={256}
-                      className={styles.image}
-                    />
-                    <h2 className={styles.subtitle}>{manufacturer.name}</h2>
-                    {pitch ? <p className={styles.copy}>{pitch}</p> : null}
-                    <div className={styles.actions}>
-                      {!selected ? (
-                        <button
-                          className={styles.button}
-                          type="button"
-                          disabled={busy}
-                          onClick={() =>
-                            selectManufacturer(manufacturer.id)
-                          }
-                        >
-                          {labels.details}
-                        </button>
-                      ) : null}
-                      {href ? (
-                        <a
-                          className={styles.button}
-                          href={href}
-                          onClick={(event) =>
-                            selectProducts(event, manufacturer)
-                          }
-                        >
-                          {labels.products} →
-                        </a>
-                      ) : null}
-                    </div>
-                  </li>
-                );
-              })}
-            </ul>
-          ) : browseLoaded && !browsePending ? (
-            <OrionplaceEmptyState
-              kind="search"
-              message={indexCopy.empty}
-            />
-          ) : null}
-
-          <StorefrontPagination
-            pagination={pagination}
-            pending={busy}
-            onChange={(page) => void loadResults(page)}
-          />
-        </>
-      )}
-    </section>
-  );
-}