orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/search/SearchFilters.tsx

@@ -1,439 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type FormEvent,
-} from 'react';
-import {
-  useOrionplace,
-  useOrionplaceBrowse,
-  useOrionplaceBrowseStore,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import type {
-  IProductSearchFacets,
-  ProductFacetSelection,
-} from '@/interfaces/orionplace/products/IProductSearchFacets';
-import {
-  applyPriceFilter,
-  cloneSearchFilters,
-  priceFilterBounds,
-  selectedFilterIds,
-} from '@/lib/orionplace/searchFilters';
-import { browseLabels } from '@/lib/orionplace/browseLabels';
-import { currencyLabel } from '@/lib/orionplace/currency';
-import {
-  getAvailableNestedValueFromObject,
-  getAvailableValueFromObject,
-} from '@/lib/orionplace/presentation';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import styles from './SearchFilters.module.css';
-
-export interface SearchFiltersProps {
-  disabled?: boolean;
-  hideCategories?: boolean;
-  fixedFilters?: readonly string[];
-  facets?: IProductSearchFacets | null;
-  selection?: ProductFacetSelection;
-  onChange?: (selection: ProductFacetSelection) => void;
-}
-
-export function SearchFilters({
-  disabled = false,
-  hideCategories = false,
-  fixedFilters = [],
-  facets: suppliedFacets,
-  selection,
-  onChange,
-}: SearchFiltersProps) {
-  const init = useOrionplace(selectInit);
-  const storedFacets = useOrionplaceBrowse((state) => state.searchFacets);
-  const storedFilters = useOrionplaceBrowse((state) => state.searchFilters);
-  const browseStore = useOrionplaceBrowseStore();
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const currencyId = useOrionplaceSelections((state) => state.currencyId);
-  const currency = useOrionplaceSelections(
-    (state) => state.init?.currencies[currencyId],
-  );
-  const labels = browseLabels(locale);
-  const facets = suppliedFacets === undefined ? storedFacets : suppliedFacets;
-  const filters = selection ?? storedFilters;
-  const bounds = priceFilterBounds(facets, currencyId);
-  const previousCurrency = useRef(currencyId);
-  const [priceFrom, setPriceFrom] = useState<number | ''>(() =>
-    Number(filters.price_from ?? bounds?.min ?? 0),
-  );
-  const [priceTo, setPriceTo] = useState<number | ''>(() =>
-    Number(filters.price_to ?? bounds?.max ?? 0),
-  );
-  const [discount, setDiscount] = useState<number | ''>(() => {
-    const multiplier = filters.price_discount_from;
-    return multiplier === undefined
-      ? ''
-      : Math.round((1 - Number(multiplier)) * 100);
-  });
-
-  const groups = useMemo(() => {
-    if (!facets) {
-      return [];
-    }
-    const available = [
-      {
-        key: 'categories',
-        title: labels.categories,
-        options: (hideCategories ? [] : facets.selects.categories ?? [])
-          .map((item) => ({
-            id: item.id,
-            count: item.count,
-            color: '',
-            title: getAvailableNestedValueFromObject(
-              item.locale,
-              locale,
-              'cg_name',
-            ) || String(item.id),
-          })),
-      },
-      {
-        key: 'product_owner',
-        title: labels.sellers,
-        options: init?.visual_settings?.single_seller_mode
-          ? []
-          : (facets.selects.sellers ?? []).map((item) => ({
-              id: item.id,
-              count: item.count,
-              color: '',
-              title: item.seller_name,
-            })),
-      },
-      {
-        key: 'product_manufacture',
-        title: labels.manufacturers,
-        options: (facets.selects.manufacture ?? []).map((item) => ({
-          id: item.id,
-          count: item.count,
-          color: '',
-          title: item.name,
-        })),
-      },
-      ...Object.values(facets.variants ?? {}).map((variant) => ({
-        key: `variant_${variant.id}`,
-        title: getAvailableNestedValueFromObject(
-          variant.locale,
-          locale,
-          'variant_type_name',
-        ) || String(variant.id),
-        options: variant.options.map((item) => ({
-          id: item.id,
-          count: item.count,
-          color: String(item.color ?? ''),
-          title: getAvailableValueFromObject(item.locale, locale) ||
-            String(item.id),
-        })),
-      })),
-    ];
-
-    return available.filter((group) =>
-      !fixedFilters.includes(group.key) && group.options.length,
-    );
-  }, [facets, fixedFilters, hideCategories, init, labels, locale]);
-
-  const specialOptions = [
-    {
-      key: 'avg_raiting_from',
-      title: labels.ratedProducts,
-      value: '4.5',
-      visible: (facets?.selects.raiting_above_45 ?? 0) > 0,
-    },
-    {
-      key: 'owner_rating_from',
-      title: labels.ratedSellers,
-      value: '4.5',
-      visible: !init?.visual_settings?.single_seller_mode &&
-        Boolean(facets?.selects.sellers?.length),
-    },
-    {
-      key: 'c_aprooved_feedbacks_from',
-      title: labels.withReviews,
-      value: '1',
-      visible: Boolean(facets),
-    },
-  ].filter((option) =>
-    option.visible && !fixedFilters.includes(option.key),
-  );
-  const hasDiscount = Boolean(facets?.selects.discounts?.any);
-
-  function commit(selection: ProductFacetSelection) {
-    browseStore.getState().setSearchFilters(selection);
-    onChange?.(cloneSearchFilters(
-      browseStore.getState().searchFilters,
-    ));
-  }
-
-  function toggle(key: string, id: number) {
-    if (disabled) {
-      return;
-    }
-    const current = selectedFilterIds(filters, key);
-    const selected = current.includes(id)
-      ? current.filter((value) => value !== id)
-      : [...current, id];
-    const next = cloneSearchFilters(filters);
-    if (selected.length) {
-      next[key] = selected;
-    } else {
-      delete next[key];
-    }
-    commit(next);
-  }
-
-  function applyPrice(event?: FormEvent) {
-    event?.preventDefault();
-    if (disabled || !bounds) {
-      return;
-    }
-    commit(applyPriceFilter(
-      filters,
-      bounds,
-      currencyId,
-      Number(priceFrom),
-      Number(priceTo),
-    ));
-  }
-
-  function applyDiscount() {
-    if (disabled) {
-      return;
-    }
-    const next = cloneSearchFilters(filters);
-    const percent = Number(discount);
-    if (!Number.isFinite(percent) || percent < 1) {
-      delete next.price_discount_from;
-    } else {
-      next.price_discount_from = String(
-        (100 - Math.min(100, percent)) / 100,
-      );
-    }
-    commit(next);
-  }
-
-  function toggleSpecial(key: string, value: string) {
-    if (disabled) {
-      return;
-    }
-    const next = cloneSearchFilters(filters);
-    if (next[key] === value) {
-      delete next[key];
-    } else {
-      next[key] = value;
-    }
-    commit(next);
-  }
-
-  function swatch(value: string) {
-    return /^#[0-9a-f]{3,8}$/i.test(value)
-      ? { backgroundColor: value }
-      : undefined;
-  }
-
-  useEffect(() => {
-    setPriceFrom(Number(filters.price_from ?? bounds?.min ?? 0));
-    setPriceTo(Number(filters.price_to ?? bounds?.max ?? 0));
-    const multiplier = filters.price_discount_from;
-    setDiscount(
-      multiplier === undefined
-        ? ''
-        : Math.round((1 - Number(multiplier)) * 100),
-    );
-  }, [bounds?.min, bounds?.max, filters]);
-
-  useEffect(() => {
-    if (previousCurrency.current === currencyId) {
-      return;
-    }
-    previousCurrency.current = currencyId;
-    if (filters.price_currency === undefined) {
-      return;
-    }
-    const next = cloneSearchFilters(filters);
-    delete next.price_from;
-    delete next.price_to;
-    delete next.price_currency;
-    commit(next);
-  }, [currencyId]);
-
-  return (
-    <aside
-      aria-label={labels.filters}
-      className={styles.root}
-      data-search-filters
-    >
-      {bounds ? (
-        <form data-price-filter onSubmit={applyPrice}>
-          <fieldset
-            disabled={disabled}
-            className={`${styles.group} ${styles.spaced}`}
-          >
-            <legend>{labels.price} · {currencyLabel(currency)}</legend>
-            <div className={styles.priceInputs}>
-              <label>
-                {labels.from}
-                <input
-                  value={priceFrom}
-                  type="number"
-                  step="0.01"
-                  min={bounds.min}
-                  max={bounds.max}
-                  aria-label={labels.priceFrom}
-                  data-price-from
-                  onChange={(event) => setPriceFrom(
-                    event.target.value === '' ? '' : event.target.valueAsNumber,
-                  )}
-                />
-              </label>
-              <label>
-                {labels.to}
-                <input
-                  value={priceTo}
-                  type="number"
-                  step="0.01"
-                  min={bounds.min}
-                  max={bounds.max}
-                  aria-label={labels.priceTo}
-                  data-price-to
-                  onChange={(event) => setPriceTo(
-                    event.target.value === '' ? '' : event.target.valueAsNumber,
-                  )}
-                />
-              </label>
-            </div>
-            <div className={styles.slider} data-price-slider>
-              <input
-                value={priceFrom}
-                type="range"
-                step="0.01"
-                min={bounds.min}
-                max={bounds.max}
-                aria-label={labels.priceFrom}
-                onChange={(event) => setPriceFrom(event.target.valueAsNumber)}
-                onPointerUp={() => applyPrice()}
-                onKeyUp={() => applyPrice()}
-              />
-              <input
-                value={priceTo}
-                type="range"
-                step="0.01"
-                min={bounds.min}
-                max={bounds.max}
-                aria-label={labels.priceTo}
-                onChange={(event) => setPriceTo(event.target.valueAsNumber)}
-                onPointerUp={() => applyPrice()}
-                onKeyUp={() => applyPrice()}
-              />
-            </div>
-            <button type="submit" className={styles.button}>
-              {labels.applyPrice}
-            </button>
-          </fieldset>
-        </form>
-      ) : null}
-
-      {groups.map((group) => (
-        <fieldset
-          key={group.key}
-          disabled={disabled}
-          data-filter-group={group.key}
-          className={styles.group}
-        >
-          <legend>{group.title}</legend>
-          <div className={styles.options}>
-            {group.options.map((option) => (
-              <label key={option.id}>
-                <input
-                  type="checkbox"
-                  checked={selectedFilterIds(filters, group.key)
-                    .includes(option.id)}
-                  value={option.id}
-                  onChange={() => toggle(group.key, option.id)}
-                />
-                {swatch(option.color) ? (
-                  <span
-                    style={swatch(option.color)}
-                    aria-hidden="true"
-                    data-filter-color
-                    className={styles.swatch}
-                  />
-                ) : null}
-                <span className={styles.optionTitle}>{option.title}</span>
-                {init?.visual_settings?.show_filter_counters &&
-                Number.isFinite(option.count) ? (
-                  <span className={styles.count} data-filter-count>
-                    {option.count}
-                  </span>
-                ) : null}
-              </label>
-            ))}
-          </div>
-        </fieldset>
-      ))}
-
-      {specialOptions.length || hasDiscount ? (
-        <fieldset
-          disabled={disabled}
-          className={`${styles.group} ${styles.spaced}`}
-          data-filter-additional
-        >
-          <legend>{labels.moreFilters}</legend>
-          <div className={styles.additional}>
-            {hasDiscount ? (
-              <label className={styles.discount}>
-                {labels.discountFrom}
-                <input
-                  value={discount}
-                  type="number"
-                  min={0}
-                  max={100}
-                  step={1}
-                  aria-label={labels.discountFrom}
-                  placeholder="0"
-                  onChange={(event) => setDiscount(
-                    event.target.value === '' ? '' : event.target.valueAsNumber,
-                  )}
-                  onBlur={applyDiscount}
-                  onKeyDown={(event) => {
-                    if (event.key === 'Enter') {
-                      event.preventDefault();
-                      applyDiscount();
-                    }
-                  }}
-                />
-              </label>
-            ) : null}
-            {specialOptions.map((option) => (
-              <label key={option.key} className={styles.special}>
-                <input
-                  type="checkbox"
-                  checked={filters[option.key] === option.value}
-                  data-filter-scalar={option.key}
-                  onChange={() => toggleSpecial(option.key, option.value)}
-                />
-                <span>{option.title}</span>
-              </label>
-            ))}
-          </div>
-        </fieldset>
-      ) : null}
-
-      {!groups.length && !bounds && !specialOptions.length && !hasDiscount ? (
-        <OrionplaceEmptyState
-          kind="search"
-          size="compact"
-          message={labels.emptyFilters}
-        />
-      ) : null}
-    </aside>
-  );
-}

package/templates/components/orionplace/sellers/SellerFilters.README.md

@@ -1,66 +0,0 @@
-# SellerFilters · React
-
-## English
-
-`SellerFilters` edits the seller-directory fields in `value` and returns the
-complete next value through `onChange(value)`. The name field updates
-`seller_name` after typing stops, when the field loses focus or when Enter is
-pressed. A rating choice sets `seller_rating_from` to the selected minimum, or
-to `null` for any rating. Category checkboxes add or remove their IDs in
-`seller_categories`.
-
-`categories` contains the category IDs and localized titles available for the
-current directory response. The category group is omitted when the array is
-empty. Clear resets the name, rating and categories while preserving the
-current `ordering`. `disabled` blocks the editable controls while the parent is
-processing a request.
-
-On narrow containers the filter fields open from the Filters button; on wider
-containers they remain visible. This changes presentation only and does not
-change `value`.
-
-The component makes no request. `StorefrontSellers` sends the returned filters
-to `sellers_get`. Source is maintained in
-`components/orionplace/sellers/SellerFilters.tsx`; the primary contract is
-`interfaces/orionplace/sellers/ISellerDirectory.ts`.
-
-### Props
-
-| Prop                                                 | Meaning                                                                                  |
-| ---------------------------------------------------- | ---------------------------------------------------------------------------------------- |
-| `value: ISellerDirectoryFilters`                     | Current controlled value.                                                                |
-| `categories?: SellerCategoryOption[]`                | Categories available to this component.                                                  |
-| `disabled?: boolean`                                 | Disables the component controls and prevents new actions.                                |
-| `onChange: (value: ISellerDirectoryFilters) => void` | Called when the visitor confirms a new value. The callback payload is shown in its type. |
-
-## Русский
-
-`SellerFilters` редактирует поля каталога продавцов из `value` и передаёт всё
-новое значение через `onChange(value)`. Поле названия обновляет
-`seller_name`, когда посетитель прекращает ввод, переводит фокус на другой
-элемент или нажимает Enter. Выбор рейтинга записывает минимальный рейтинг в
-`seller_rating_from`; вариант «Любой рейтинг» записывает `null`. Флажки
-категорий добавляют и удаляют их ID в `seller_categories`.
-
-`categories` содержит ID и локализованные названия категорий, доступных для
-текущего ответа каталога. Если массив пуст, группа категорий не показывается.
-Кнопка сброса очищает название, рейтинг и категории, сохраняя текущее значение
-`ordering`. `disabled` блокирует редактирование, пока родительский компонент
-обрабатывает запрос.
-
-В узком контейнере поля открываются кнопкой «Фильтры», а в широком остаются
-видимыми. Меняется только представление; значение `value` сохраняется.
-
-Компонент не отправляет запросы. `StorefrontSellers` передаёт полученные
-фильтры в `sellers_get`. Исходный файл:
-`components/orionplace/sellers/SellerFilters.tsx`; основной контракт:
-`interfaces/orionplace/sellers/ISellerDirectory.ts`.
-
-### Свойства
-
-| Свойство                                             | Назначение                                                                                       |
-| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `value: ISellerDirectoryFilters`                     | Текущее управляемое значение.                                                                    |
-| `categories?: SellerCategoryOption[]`                | Категории, доступные этому компоненту.                                                           |
-| `disabled?: boolean`                                 | Блокирует элементы компонента и новые действия.                                                  |
-| `onChange: (value: ISellerDirectoryFilters) => void` | Вызывается, когда покупатель подтверждает новое значение. Данные обработчика указаны в его типе. |