orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,439 @@
+'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

@@ -0,0 +1,66 @@
+# 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` | Вызывается, когда покупатель подтверждает новое значение. Данные обработчика указаны в его типе. |