orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/sellers/StorefrontSellers.tsx

@@ -0,0 +1,360 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceCatalog,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import type {
+  ISellerDirectoryEntry,
+  ISellerDirectoryFilters,
+  ISellerDirectoryRequest,
+  ISellerDirectoryResponse,
+} from '@/interfaces/orionplace/sellers/ISellerDirectory';
+import { findNavigationCategory, navigationCatalogCategories } from '@/lib/orionplace/catalog';
+import { directoryLabels } from '@/lib/orionplace/directoryLabels';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { mergePagination } from '@/lib/orionplace/featureData';
+import {
+  emptySellerFilters,
+  hasSellerFilters,
+  sellerCategoryOptions,
+  sellerDirectoryRequest,
+  sellerProfileRequest,
+} from '@/lib/orionplace/sellerDirectory';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
+import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
+import { SellerFilters } from './SellerFilters';
+import { SellerPhotoGallery } from './SellerPhotoGallery';
+import { SellerSummary } from './SellerSummary';
+import styles from './StorefrontSellers.module.css';
+import { apiErrorMessage } from '@/lib/orionplace/api';
+
+type SellerPage = NonNullable<ISellerDirectoryResponse['page_data']>;
+
+export interface SellersLoadAction {
+  endpoint: 'sellers_get';
+  request: ISellerDirectoryRequest;
+  signal: AbortSignal;
+}
+
+export interface StorefrontSellersProps {
+  sellerId?: number;
+  initial?: SellerPage;
+  initialError?: string;
+  loadOnMount?: boolean;
+  disabled?: boolean;
+  sellerHref?: (seller: ISellerDirectoryEntry, locale: string) => string;
+  allSellersHref?: (locale: string) => string;
+  onLoad: (action: SellersLoadAction) => Promise<SellerPage> | SellerPage;
+  onLoaded?: (seller: ISellerDirectoryEntry | null) => void;
+  onFiltersChange?: (filters: ISellerDirectoryFilters) => void;
+  onPageChange?: (page: number) => void;
+}
+
+export function StorefrontSellers({
+  sellerId,
+  initial,
+  initialError = '',
+  loadOnMount = true,
+  disabled = false,
+  sellerHref = (seller, locale) =>
+    `/sellers?seller=${seller.id}&locale=${encodeURIComponent(locale)}`,
+  allSellersHref = (locale) => `/sellers?locale=${encodeURIComponent(locale)}`,
+  onLoad,
+  onLoaded,
+  onFiltersChange,
+  onPageChange,
+}: StorefrontSellersProps) {
+  const init                          = useOrionplace(selectInit);
+  const singleSeller                  = Boolean(init?.visual_settings?.single_seller_mode);
+  const locale                        = useOrionplaceSelections((state) => state.localeCode);
+  const catalog                       = useOrionplaceCatalog((state) => state.catalog);
+  const labels                        = directoryLabels(locale);
+  const common                        = featureLabels(locale);
+  const initialAutomatic              = loadOnMount && !initial && !initialError;
+  const [filters, setFilters]         =
+    useState<ISellerDirectoryFilters>(emptySellerFilters);
+  const [sellers, setSellers]         = useState<ISellerDirectoryEntry[]>(
+    initial?.sellers.data ?? [],
+  );
+  const [pagination, setPagination]   = useState<Partial<IApiPagination>>(
+    initial?.sellers.rpag ?? {},
+  );
+  const [categoryIds, setCategoryIds] = useState<number[]>(
+    sellerId ? [] : (initial?.selects?.cats ?? []),
+  );
+  const [loaded, setLoaded]           = useState(Boolean(initial));
+  const [pending, setPending]         = useState(initialAutomatic);
+  const [error, setError]             = useState(initialError);
+  const activeRequest                 = useRef<AbortController | undefined>(undefined);
+  const requested                     = useRef(false);
+  const previousSellerId              = useRef(sellerId);
+  const callbacks                     = useRef({ onLoad, onLoaded });
+  callbacks.current                   = { onLoad, onLoaded };
+  const profile                       = sellerId ? sellers[0] : undefined;
+  const filtered                      = hasSellerFilters(filters);
+  const total                         =
+    pagination.selected_count ?? pagination.total_count ?? sellers.length;
+  const categories                    = sellerCategoryOptions(
+    categoryIds,
+    (id) => findNavigationCategory(navigationCatalogCategories(catalog), id),
+    locale,
+  );
+  const orderingOptions               = {
+    '-seller_raiting': labels.ratingHigh,
+    seller_raiting: labels.ratingLow,
+  };
+
+  async function load(
+    page = 1,
+    nextFilters = filters,
+    nextSellerId = sellerId,
+  ) {
+    if (disabled || singleSeller) {
+      return;
+    }
+    activeRequest.current?.abort();
+    const controller      = new AbortController();
+    activeRequest.current = controller;
+    setPending(true);
+    setError('');
+
+    try {
+      const data = await callbacks.current.onLoad({
+        endpoint: 'sellers_get',
+        request: nextSellerId
+          ? sellerProfileRequest(nextSellerId)
+          : sellerDirectoryRequest(nextFilters, page),
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted) {
+        return;
+      }
+      if (!data.sellers) {
+        throw new Error('Missing seller list');
+      }
+
+      if (
+        !nextSellerId &&
+        page === 1 &&
+        !hasSellerFilters(nextFilters) &&
+        data.selects?.cats
+      ) {
+        setCategoryIds(data.selects.cats);
+      }
+      setSellers(data.sellers.data);
+      setPagination((previous) =>
+        mergePagination(page === 1 ? {} : previous, data.sellers.rpag),
+      );
+      setLoaded(true);
+      if (nextSellerId) {
+        callbacks.current.onLoaded?.(data.sellers.data[0] ?? null);
+      }
+    } catch (reason) {
+      if (!controller.signal.aborted) {
+        setError(
+          apiErrorMessage(reason) || common.failed,
+        );
+      }
+    } finally {
+      if (activeRequest.current === controller) {
+        activeRequest.current = undefined;
+        setPending(false);
+      }
+    }
+  }
+
+  function changeFilters(nextFilters: ISellerDirectoryFilters) {
+    setFilters(nextFilters);
+    onFiltersChange?.(nextFilters);
+    void load(1, nextFilters);
+  }
+
+  function changeOrdering(ordering: string) {
+    if (ordering !== '-seller_raiting' && ordering !== 'seller_raiting') {
+      return;
+    }
+    changeFilters({ ...filters, ordering });
+  }
+
+  function changePage(page: number) {
+    onPageChange?.(page);
+    void load(page);
+  }
+
+  useEffect(() => {
+    if (singleSeller) {
+      activeRequest.current?.abort();
+      requested.current = false;
+      return;
+    }
+    if (initial && sellerId) {
+      callbacks.current.onLoaded?.(initial.sellers.data[0] ?? null);
+    }
+    if (!requested.current && initialAutomatic) {
+      requested.current = true;
+      void load();
+    }
+    return () => {
+      activeRequest.current?.abort();
+      activeRequest.current = undefined;
+      requested.current     = false;
+    };
+  }, [singleSeller]);
+
+  useEffect(() => {
+    if (previousSellerId.current === sellerId) {
+      return;
+    }
+    previousSellerId.current = sellerId;
+    activeRequest.current?.abort();
+    activeRequest.current    = undefined;
+    const nextFilters        = emptySellerFilters();
+    setFilters(nextFilters);
+    setSellers(initial?.sellers.data ?? []);
+    setPagination(initial?.sellers.rpag ?? {});
+    setCategoryIds(sellerId ? [] : (initial?.selects?.cats ?? []));
+    setLoaded(Boolean(initial));
+    setPending(false);
+    setError(initialError);
+    if (initial && sellerId) {
+      callbacks.current.onLoaded?.(initial.sellers.data[0] ?? null);
+    } else if (loadOnMount && !initial && !initialError) {
+      void load(1, nextFilters, sellerId);
+    }
+  }, [sellerId]);
+
+  if (singleSeller) {
+    return null;
+  }
+
+  return (
+    <section
+      className={styles.root}
+      data-feature-part="StorefrontSellers"
+    >
+      {sellerId ? (
+        <a
+          className={styles.back}
+          href={allSellersHref(locale)}
+        >
+          ← {labels.allSellers}
+        </a>
+      ) : (
+        <h1 className={styles.title}>{labels.sellers}</h1>
+      )}
+
+      {error ? (
+        <div
+          className={styles.error}
+          role="alert"
+        >
+          <span>{error}</span>
+          <button
+            type="button"
+            disabled={pending || disabled}
+            onClick={() => void load(pagination.page ?? 1)}
+          >
+            {common.retry}
+          </button>
+        </div>
+      ) : null}
+      {pending ? (
+        <p
+          className="op-feature-loading"
+          role="status"
+        >
+          <span className={styles.screenReaderOnly}>{common.loading}</span>
+        </p>
+      ) : null}
+
+      {sellerId ? (
+        profile ? (
+          <div
+            className={styles.profile}
+            data-seller-profile
+          >
+            <SellerSummary
+              seller={profile}
+              layout="profile"
+            />
+            <SellerPhotoGallery
+              images={profile.images}
+              name={profile.seller_name}
+            />
+          </div>
+        ) : loaded && !pending ? (
+          <OrionplaceEmptyState
+            kind="stores"
+            size="large"
+            message={labels.sellerMissing}
+            description={labels.sellerMissingHint}
+          />
+        ) : null
+      ) : (
+        <div className={styles.directory}>
+          <aside aria-label={labels.filters}>
+            <SellerFilters
+              value={filters}
+              categories={categories}
+              disabled={disabled}
+              onChange={changeFilters}
+            />
+          </aside>
+          <div
+            className={styles.results}
+            aria-busy={pending || undefined}
+          >
+            <header className={styles.resultsHeader}>
+              <p data-seller-total>
+                {labels.results}: {total}
+              </p>
+              <div data-seller-sort>
+                <OrionplaceSelect
+                  value={filters.ordering}
+                  options={orderingOptions}
+                  label={labels.sort}
+                  compact
+                  disabled={disabled}
+                  onValueChange={changeOrdering}
+                />
+              </div>
+            </header>
+            {sellers.length ? (
+              <ul className={`${styles.list} ${pending ? styles.dimmed : ''}`}>
+                {sellers.map((seller) => (
+                  <li key={seller.id}>
+                    <SellerSummary
+                      seller={seller}
+                      href={sellerHref(seller, locale)}
+                    />
+                  </li>
+                ))}
+              </ul>
+            ) : loaded && !pending && filtered ? (
+              <OrionplaceEmptyState
+                kind="search"
+                message={labels.noMatches}
+              />
+            ) : loaded && !pending ? (
+              <OrionplaceEmptyState
+                kind="stores"
+                message={common.empty}
+              />
+            ) : null}
+            <StorefrontPagination
+              pagination={pagination}
+              pending={pending || disabled}
+              onChange={changePage}
+            />
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}

package/templates/components/orionplace/shared/OrionplaceAvatar.README.md

@@ -0,0 +1,35 @@
+# OrionplaceAvatar
+
+## English
+
+`components/orionplace/shared/OrionplaceAvatar.tsx` shows a person's image or
+initials. If the image fails, the initials replace it. Changing `src` retries
+the image. The initial image or initials are included in server HTML.
+
+### Props
+
+| Prop                                     | Meaning                                                                                              |
+| ---------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `src?: string \| null`                   | Photo URL. `null` (default) or an empty value shows initials.                                        |
+| `name?: string`                          | User name: the photo's alternative text and the source of the initials. Defaults to an empty string. |
+| `size?: "small" \| "regular" \| "large"` | `small`, `regular` (default) or `large`; each one sets the diameter of the circle.                   |
+
+Initials are the first letters of the first two words in `name`, for example
+"CB" for "Customer B"; without `name` the circle shows a neutral mark.
+
+## Русский
+
+`OrionplaceAvatar` показывает изображение человека или его инициалы. Если
+изображение не загрузилось, его заменяют инициалы. При смене `src` компонент
+повторяет загрузку. Начальное изображение или инициалы входят в HTML сервера.
+
+### Свойства
+
+| Свойство                                 | Назначение                                                                                    |
+| ---------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `src?: string \| null`                   | Адрес фото. При `null` (по умолчанию) или пустом значении выводятся инициалы.                 |
+| `name?: string`                          | Имя пользователя: альтернативный текст фото и источник инициалов. По умолчанию пустая строка. |
+| `size?: "small" \| "regular" \| "large"` | `small`, `regular` (по умолчанию) или `large`; каждое значение задаёт диаметр круга.          |
+
+Инициалы — первые буквы первых двух слов `name`, например «CB» для
+«Customer B»; без `name` в круге выводится нейтральный знак.

package/templates/components/orionplace/shared/OrionplaceAvatar.module.css

@@ -0,0 +1,35 @@
+.root {
+  box-sizing: content-box;
+  display: inline-grid;
+  width: 2.5rem;
+  height: 2.5rem;
+  flex-shrink: 0;
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 50%;
+  background: var(--orionplace-muted-surface);
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.root[data-avatar-size='small'] {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.6875rem;
+}
+
+.root[data-avatar-size='large'] {
+  width: 6rem;
+  height: 6rem;
+  font-size: 1.75rem;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/templates/components/orionplace/shared/OrionplaceAvatar.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import styles from './OrionplaceAvatar.module.css';
+
+export interface OrionplaceAvatarProps {
+  src?: string | null;
+  name?: string;
+  size?: 'small' | 'regular' | 'large';
+}
+
+function initials(name: string): string {
+  const letters = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0]);
+
+  return letters.join('').toUpperCase() || '○';
+}
+
+export function OrionplaceAvatar({
+  src = null,
+  name = '',
+  size = 'regular',
+}: OrionplaceAvatarProps) {
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    setFailed(false);
+  }, [src]);
+
+  return (
+    <span
+      data-orionplace-avatar
+      data-avatar-size={size}
+      className={styles.root}
+    >
+      {src && !failed ? (
+        <img
+          src={src}
+          alt={name}
+          width={1}
+          height={1}
+          loading="lazy"
+          decoding="async"
+          className={styles.image}
+          onError={() => setFailed(true)}
+        />
+      ) : (
+        <span
+          role={name ? 'img' : undefined}
+          aria-label={name || undefined}
+          aria-hidden={name ? undefined : true}
+        >
+          {initials(name)}
+        </span>
+      )}
+    </span>
+  );
+}

package/templates/components/orionplace/shared/OrionplaceBreadcrumbs.README.md

@@ -0,0 +1,33 @@
+# OrionplaceBreadcrumbs
+
+## English
+
+`components/orionplace/shared/OrionplaceBreadcrumbs.tsx` shows the current
+page's path. The first Home link uses the selected locale from the React
+selection store. The final entry is always current-page text, even when its
+`to` address is supplied. The initial path renders in server HTML.
+
+### Props
+
+| Prop                   | Meaning                                                                |
+| ---------------------- | ---------------------------------------------------------------------- |
+| `items: IBreadcrumb[]` | Entries rendered by the component in their supplied order.             |
+| `home?: boolean`       | Includes the localized Home entry at the beginning of the path.        |
+| `label?: string`       | Visible or accessible name for the component’s main control or region. |
+| `loading?: boolean`    | Controls native image loading priority.                                |
+
+## Русский
+
+`OrionplaceBreadcrumbs` показывает путь к текущей странице. Первая ссылка
+«Главная» сохраняет выбранный язык из React-хранилища. Последний пункт всегда
+показан как текст текущей страницы, даже если для него передан адрес `to`.
+Начальный путь входит в HTML ответа сервера.
+
+### Свойства
+
+| Свойство               | Назначение                                                    |
+| ---------------------- | ------------------------------------------------------------- |
+| `items: IBreadcrumb[]` | Записи, которые компонент показывает в переданном порядке.    |
+| `home?: boolean`       | Добавляет локализованную «Главную» в начало пути.             |
+| `label?: string`       | Видимое или доступное название основного элемента компонента. |
+| `loading?: boolean`    | Управляет нативным приоритетом загрузки изображения.          |

package/templates/components/orionplace/shared/OrionplaceBreadcrumbs.module.css

@@ -0,0 +1,81 @@
+.root {
+  min-width: 0;
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.list,
+.placeholder {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 0.5rem;
+  row-gap: 0.25rem;
+}
+
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.item {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  column-gap: 0.5rem;
+}
+
+.current,
+.plain,
+.link {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.current {
+  color: var(--orionplace-text);
+}
+
+.link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.link:focus-visible {
+  color: var(--orionplace-text);
+}
+
+@media (hover: hover) {
+  .link:hover {
+    color: var(--orionplace-text);
+  }
+}
+
+.placeholder {
+  animation: breadcrumb-pulse 1.5s ease-in-out infinite;
+}
+
+.placeholderPart {
+  display: flex;
+  height: 1rem;
+  align-items: center;
+}
+
+.placeholderPart span {
+  width: 100%;
+  height: 0.75rem;
+  background: var(--orionplace-border);
+}
+
+@keyframes breadcrumb-pulse {
+  50% { opacity: 0.5; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .placeholder { animation: none; }
+}

package/templates/components/orionplace/shared/OrionplaceBreadcrumbs.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { StorefrontLink as Link } from '@/lib/orionplace/navigation';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type { IBreadcrumb } from '@/interfaces/orionplace/shared/IBreadcrumb';
+import styles from './OrionplaceBreadcrumbs.module.css';
+
+export interface OrionplaceBreadcrumbsProps {
+  items: IBreadcrumb[];
+  home?: boolean;
+  label?: string;
+  loading?: boolean;
+}
+
+function labels(locale: string) {
+  return locale.toLowerCase().startsWith('ru')
+    ? { path: 'Путь к странице', home: 'Главная' }
+    : { path: 'Page path', home: 'Home' };
+}
+
+export function OrionplaceBreadcrumbs({
+  items,
+  home = true,
+  label = '',
+  loading = false,
+}: OrionplaceBreadcrumbsProps) {
+  const localeCode = useOrionplaceSelections((state) => state.localeCode);
+  const copy = labels(localeCode);
+  const start: IBreadcrumb[] = home
+    ? [{
+        id: 'home',
+        label: copy.home,
+        to: { path: '/', query: { locale: localeCode } },
+      }]
+    : [];
+  const path = [...start, ...items];
+
+  if (!loading && path.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav
+      aria-label={label || copy.path}
+      aria-busy={loading || undefined}
+      data-feature-part="OrionplaceBreadcrumbs"
+      data-orionplace-breadcrumbs
+      className={styles.root}
+    >
+      {loading ? (
+        <div
+          aria-hidden="true"
+          data-breadcrumbs-placeholder
+          className={styles.placeholder}
+        >
+          {[3, 5, 7, 10].map((width) => (
+            <span
+              key={width}
+              className={styles.placeholderPart}
+              style={{ width: `${width}rem` }}
+            >
+              <span />
+            </span>
+          ))}
+        </div>
+      ) : (
+        <ol className={styles.list}>
+          {path.map((item, index) => (
+            <li key={item.id} className={styles.item}>
+              {index > 0 && <span aria-hidden="true">/</span>}
+              {index === path.length - 1 ? (
+                <span aria-current="page" className={styles.current}>
+                  {item.label}
+                </span>
+              ) : item.to ? (
+                <Link
+                  href={{ pathname: item.to.path, query: item.to.query }}
+                  className={styles.link}
+                >
+                  {item.label}
+                </Link>
+              ) : (
+                <span className={styles.plain}>{item.label}</span>
+              )}
+            </li>
+          ))}
+        </ol>
+      )}
+    </nav>
+  );
+}