orionplace-react 0.7.8 → 0.8.0

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

@@ -1,33 +0,0 @@
-# ProductCardDescription
-
-## English
-
-Shows the product's short description from the selected language. HTML
-tags in the source description are removed before display. `productId`
-identifies the product; `collection` defaults to `products` and can be
-`featured`. `className` adds presentation classes. The component renders
-nothing when the product is absent.
-
-### Props
-
-| Prop                                       | Meaning                                                           |
-| ------------------------------------------ | ----------------------------------------------------------------- |
-| `productId: number`                        | ID of the product handled by ProductCardDescription.              |
-| `collection?: OrionplaceProductCollection` | Product-store collection used to resolve the supplied product ID. |
-| `className?: string`                       | Additional CSS class for the component root.                      |
-
-## Русский
-
-Показывает короткое описание товара на выбранном языке. HTML-теги из
-исходного описания удаляются перед показом. `productId` задаёт товар;
-`collection` по умолчанию равно `products`, для подборки используйте
-`featured`. `className` добавляет классы оформления. Если товар
-отсутствует, компонент ничего не показывает.
-
-### Свойства
-
-| Свойство                                   | Назначение                                                              |
-| ------------------------------------------ | ----------------------------------------------------------------------- |
-| `productId: number`                        | ID товара, с которым работает ProductCardDescription.                   |
-| `collection?: OrionplaceProductCollection` | Коллекция store товаров, в которой компонент ищет переданный ID товара. |
-| `className?: string`                       | Дополнительный CSS-класс корневого элемента.                            |

package/templates/components/orionplace/products/ProductCardDescription.module.css

@@ -1,6 +0,0 @@
-.description {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 14px;
-  line-height: 24px;
-}

package/templates/components/orionplace/products/ProductCardDescription.tsx

@@ -1,43 +0,0 @@
-'use client';
-
-import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import {
-  getAvailableNestedValueFromObject,
-  plainText,
-} from '@/lib/orionplace/presentation';
-import styles from './ProductCardDescription.module.css';
-
-export interface ProductCardDescriptionProps {
-  productId: number;
-  collection?: OrionplaceProductCollection;
-  className?: string;
-}
-
-export function ProductCardDescription({
-  productId,
-  collection = 'products',
-  className = '',
-}: ProductCardDescriptionProps) {
-  const product = useOrionplaceProduct(productId, collection);
-  const localeCode = useOrionplaceSelections((state) => state.localeCode);
-  if (!product) {
-    return null;
-  }
-
-  const description = plainText(getAvailableNestedValueFromObject(
-    product.locale,
-    localeCode,
-    'short_description',
-  ));
-
-  return (
-    <p
-      className={`${styles.description} ${className}`.trim()}
-      data-product-part="ProductCardDescription"
-    >
-      {description}
-    </p>
-  );
-}

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

@@ -1,52 +0,0 @@
-# ProductCardFavorite
-
-## English
-
-Shows whether a product is saved to the customer's wishlist. `productId`
-identifies the product in `collection` (`products` by default, or `featured`).
-`iconOnly` defaults to `true`; `label` and `selectedLabel` replace the
-localized button names. `disabled` prevents selection. `onToggle` receives
-the requested saved state, including a guest click; the storefront handles
-sign-in and the wishlist API, then updates the product store. The button does
-show the requested state while that API request is pending. A successful
-response replaces it with the product's confirmed `whishlist_id`; a failed
-request restores the previous state. Every visible card for the same product
-uses this shared pending state.
-
-### Props
-
-| Prop                                       | Meaning                                                                             |
-| ------------------------------------------ | ----------------------------------------------------------------------------------- |
-| `productId: number`                        | ID of the product handled by ProductCardFavorite.                                   |
-| `collection?: OrionplaceProductCollection` | Product-store collection used to resolve the supplied product ID.                   |
-| `label?: string`                           | Visible or accessible name for the component’s main control or region.              |
-| `selectedLabel?: string`                   | Visible or accessible label for selected.                                           |
-| `iconOnly?: boolean`                       | Shows the action as an icon with an accessible label.                               |
-| `disabled?: boolean`                       | Disables the component controls and prevents new actions.                           |
-| `onToggle?: (selected: boolean) => void`   | Passes the desired wishlist state: `true` to add or `false` to remove. The displayed state changes after the application updates product data. |
-| `className?: string`                       | Additional CSS class for the component root.                                        |
-
-## Русский
-
-Показывает, сохранён ли товар в избранном. `productId` задаёт товар в
-`collection` (`products` по умолчанию или `featured`). `iconOnly` по
-умолчанию равно `true`; `label` и `selectedLabel` заменяют локализованные
-подписи кнопки. `disabled` запрещает выбор. `onToggle` получает желаемое
-состояние избранного, в том числе при нажатии гостя. Магазин обрабатывает
-вход и запрос к API, затем обновляет товар в хранилище. Пока запрос выполняется,
-кнопка показывает запрошенное состояние. Успешный ответ заменяет его
-подтверждённым `whishlist_id`; при ошибке возвращается прежнее состояние. Все
-видимые карточки этого товара используют одно ожидающее состояние.
-
-### Свойства
-
-| Свойство                                   | Назначение                                                              |
-| ------------------------------------------ | ----------------------------------------------------------------------- |
-| `productId: number`                        | ID товара, с которым работает ProductCardFavorite.                      |
-| `collection?: OrionplaceProductCollection` | Коллекция store товаров, в которой компонент ищет переданный ID товара. |
-| `label?: string`                           | Видимое или доступное название основного элемента компонента.           |
-| `selectedLabel?: string`                   | Видимая или доступная подпись для выбранного значения.                  |
-| `iconOnly?: boolean`                       | Показывает действие как значок с доступным названием.                   |
-| `disabled?: boolean`                       | Блокирует элементы компонента и новые действия.                         |
-| `onToggle?: (selected: boolean) => void`   | Передаёт желаемое состояние избранного: `true` для добавления, `false` для удаления. Отображаемое состояние меняется после обновления данных товара приложением. |
-| `className?: string`                       | Дополнительный CSS-класс корневого элемента.                            |

package/templates/components/orionplace/products/ProductCardFavorite.module.css

@@ -1,64 +0,0 @@
-.favorite {
-  display: inline-grid;
-  flex-shrink: 0;
-  place-items: center;
-  border: 1px solid transparent;
-  background: transparent;
-  color: var(--orionplace-text);
-  font-size: 12px;
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-.favorite:focus-visible {
-  background: var(--orionplace-hover);
-}
-@media (hover: hover) {
-  .favorite:hover {
-    background: var(--orionplace-hover);
-  }
-}
-.favorite:focus-visible {
-  outline: 1px solid var(--orionplace-text);
-}
-.favorite:disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-.iconOnly {
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  border-radius: 50%;
-}
-.withText {
-  height: 44px;
-  padding: 0 16px;
-  border-color: var(--orionplace-text);
-  background: var(--orionplace-surface);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-.selected {
-  color: var(--orionplace-accent);
-}
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-@media (prefers-reduced-motion: reduce) {
-  .favorite {
-    transition: none;
-  }
-}
-
-.favorite {
-  line-height: 16px;
-}
-
-.iconOnly {
-  border-radius: calc(infinity * 1px);
-}

package/templates/components/orionplace/products/ProductCardFavorite.tsx

@@ -1,90 +0,0 @@
-'use client';
-
-import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
-import {
-  useOrionplaceProducts,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import { productLabels } from '@/lib/orionplace/productLabels';
-import styles from './ProductCardFavorite.module.css';
-
-export interface ProductCardFavoriteProps {
-  productId: number;
-  collection?: OrionplaceProductCollection;
-  label?: string;
-  selectedLabel?: string;
-  iconOnly?: boolean;
-  disabled?: boolean;
-  onToggle?: (selected: boolean) => void;
-  className?: string;
-}
-
-export function ProductCardFavorite({
-  productId,
-  collection = 'products',
-  label,
-  selectedLabel,
-  iconOnly = true,
-  disabled = false,
-  onToggle,
-  className = '',
-}: ProductCardFavoriteProps) {
-  const product         = useOrionplaceProduct(productId, collection);
-  const pendingSelected = useOrionplaceProducts(
-    (state) => state.pendingFavorites[productId],
-  );
-  const localeCode      = useOrionplaceSelections((state) => state.localeCode);
-  const copy            = productLabels(localeCode);
-  const selected        = pendingSelected ?? Boolean(product?.whishlist_id);
-  const caption         = selected
-    ? selectedLabel || copy.removeFavorite
-    : label || copy.addFavorite;
-  const shortCaption    = selected
-    ? selectedLabel || copy.unsaveFavorite
-    : label || copy.saveFavorite;
-
-  return (
-    <button
-      type="button"
-      aria-pressed={selected}
-      aria-busy={pendingSelected === undefined ? undefined : true}
-      aria-label={caption}
-      title={iconOnly ? caption : undefined}
-      disabled={disabled || !product}
-      className={[
-        styles.favorite,
-        iconOnly ? styles.iconOnly : styles.withText,
-        selected ? styles.selected : '',
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      data-product-part="ProductCardFavorite"
-      data-product-favorite
-      data-product-favorite-pending={
-        pendingSelected === undefined ? undefined : ''
-      }
-      onClick={() => onToggle?.(!selected)}
-    >
-      {iconOnly && (
-        <svg
-          viewBox="0 0 24 24"
-          width="20"
-          height="20"
-          fill={selected ? 'currentColor' : 'none'}
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M12 20 4.2 12.4C-1.2 7.1 6.5.1 12 6.5 17.5.1 25.2 7.1 19.8 12.4Z" />
-        </svg>
-      )}
-      <span className={iconOnly ? styles.screenReaderOnly : undefined}>
-        {iconOnly ? caption : shortCaption}
-      </span>
-    </button>
-  );
-}

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

@@ -1,33 +0,0 @@
-# ProductCardPrice
-
-## English
-
-Shows the product price in the selected currency. `productId` identifies
-the product; `collection` defaults to `products` and can be `featured`.
-When the current price is lower than the base price, the base price is
-crossed out. Currency symbols follow their configured left and right
-positions. `className` adds presentation classes.
-
-### Props
-
-| Prop                                       | Meaning                                                           |
-| ------------------------------------------ | ----------------------------------------------------------------- |
-| `productId: number`                        | ID of the product handled by ProductCardPrice.                    |
-| `collection?: OrionplaceProductCollection` | Product-store collection used to resolve the supplied product ID. |
-| `className?: string`                       | Additional CSS class for the component root.                      |
-
-## Русский
-
-Показывает цену товара в выбранной валюте. `productId` задаёт товар;
-`collection` по умолчанию равно `products`, для подборки используйте
-`featured`. Если текущая цена ниже базовой, базовая цена перечёркнута.
-Символы валюты остаются с заданных сторон суммы. `className` добавляет
-классы оформления.
-
-### Свойства
-
-| Свойство                                   | Назначение                                                              |
-| ------------------------------------------ | ----------------------------------------------------------------------- |
-| `productId: number`                        | ID товара, с которым работает ProductCardPrice.                         |
-| `collection?: OrionplaceProductCollection` | Коллекция store товаров, в которой компонент ищет переданный ID товара. |
-| `className?: string`                       | Дополнительный CSS-класс корневого элемента.                            |

package/templates/components/orionplace/products/ProductCardPrice.module.css

@@ -1,22 +0,0 @@
-.price {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 2px 8px;
-}
-
-.current {
-  color: var(--orionplace-text);
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
-
-.sale { color: var(--orionplace-danger); }
-.base {
-  color: var(--orionplace-muted);
-  font-size: 12px;
-  line-height: 16px;
-  font-variant-numeric: tabular-nums;
-}

package/templates/components/orionplace/products/ProductCardPrice.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import { formatCurrency } from '@/lib/orionplace/currency';
-import styles from './ProductCardPrice.module.css';
-
-export interface ProductCardPriceProps {
-  productId: number;
-  collection?: OrionplaceProductCollection;
-  className?: string;
-}
-
-export function ProductCardPrice({
-  productId,
-  collection = 'products',
-  className = '',
-}: ProductCardPriceProps) {
-  const product = useOrionplaceProduct(productId, collection);
-  const currencyId = useOrionplaceSelections((state) => state.currencyId);
-  const currencies = useOrionplaceSelections((state) => state.init?.currencies);
-  const locale     = useOrionplaceSelections((state) => state.localeCode);
-  if (!product) {
-    return null;
-  }
-
-  const selectedId = currencyId ||
-    Object.keys(product.product_price_dict ?? {})[0] ||
-    Object.keys(product.base_price_dict ?? {})[0] ||
-    '';
-  const base = product.base_price_dict?.[selectedId]?.transform_value;
-  const price = product.product_price_dict?.[selectedId]?.transform_value ?? base;
-  const isSale = price !== undefined && base !== undefined && price < base;
-  const currency = currencies?.[selectedId];
-
-  return (
-    <div
-      className={`${styles.price} ${className}`.trim()}
-      data-product-part="ProductCardPrice"
-    >
-      <span className={`${styles.current} ${isSale ? styles.sale : ''}`}>
-        {formatCurrency(price, currency, locale)}
-      </span>
-      {isSale && (
-        <del className={styles.base}>{formatCurrency(base, currency, locale)}</del>
-      )}
-    </div>
-  );
-}

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

@@ -1,33 +0,0 @@
-# ProductCardRating
-
-## English
-
-Shows the product review average and review count from `feedback_stat`.
-`productId` identifies the product; `collection` defaults to `products`
-and can be `featured`. The word after the count follows the selected
-language's plural rule. `label` replaces that word. This is product review
-data, separate from the seller rating.
-
-### Props
-
-| Prop                                       | Meaning                                                                |
-| ------------------------------------------ | ---------------------------------------------------------------------- |
-| `productId: number`                        | ID of the product handled by ProductCardRating.                        |
-| `collection?: OrionplaceProductCollection` | Product-store collection used to resolve the supplied product ID.      |
-| `label?: string`                           | Visible or accessible name for the component’s main control or region. |
-
-## Русский
-
-Показывает среднюю оценку товара и число отзывов из `feedback_stat`.
-`productId` задаёт товар; `collection` по умолчанию равно `products`,
-для подборки используйте `featured`. Слово после числа согласуется
-с выбранным языком. `label` заменяет это слово. Здесь показаны отзывы
-о товаре; оценка продавца хранится отдельно.
-
-### Свойства
-
-| Свойство                                   | Назначение                                                              |
-| ------------------------------------------ | ----------------------------------------------------------------------- |
-| `productId: number`                        | ID товара, с которым работает ProductCardRating.                        |
-| `collection?: OrionplaceProductCollection` | Коллекция store товаров, в которой компонент ищет переданный ID товара. |
-| `label?: string`                           | Видимое или доступное название основного элемента компонента.           |

package/templates/components/orionplace/products/ProductCardRating.module.css

@@ -1,7 +0,0 @@
-.rating {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 12px;
-  line-height: 16px;
-  font-variant-numeric: tabular-nums;
-}

package/templates/components/orionplace/products/ProductCardRating.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import { productLabels } from '@/lib/orionplace/productLabels';
-import styles from './ProductCardRating.module.css';
-
-export interface ProductCardRatingProps {
-  productId: number;
-  collection?: OrionplaceProductCollection;
-  label?: string;
-}
-
-function reviewWord(localeCode: string, count: number): string {
-  const forms = productLabels(localeCode).reviews;
-  let rule: Intl.LDMLPluralRule;
-
-  try {
-    rule = new Intl.PluralRules(localeCode).select(count);
-  } catch {
-    rule = new Intl.PluralRules('en').select(count);
-  }
-
-  if (rule === 'one') {
-    return forms[0];
-  }
-  if (rule === 'few' && forms.length > 2) {
-    return forms[1];
-  }
-
-  return forms[forms.length - 1];
-}
-
-export function ProductCardRating({
-  productId,
-  collection = 'products',
-  label = '',
-}: ProductCardRatingProps) {
-  const product = useOrionplaceProduct(productId, collection);
-  const localeCode = useOrionplaceSelections((state) => state.localeCode);
-  const rating = product?.feedback_stat;
-  if (!rating) {
-    return null;
-  }
-
-  const caption = label || reviewWord(localeCode, rating.c_feedbacks);
-
-  return (
-    <p className={styles.rating} data-product-part="ProductCardRating">
-      <span aria-hidden="true">☆</span>{' '}
-      {rating.avg_raiting}{' '}
-      <span>· {rating.c_feedbacks} {caption}</span>
-    </p>
-  );
-}

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

@@ -1,36 +0,0 @@
-# ProductCardSeller
-
-## English
-
-Shows the product seller's name and seller rating. `productId` identifies
-the product; `collection` defaults to `products` and can be `featured`.
-Clicking or pressing Enter calls `onSelect(seller)` with the seller object.
-`disabled` prevents selection. In single-seller mode the component is hidden.
-The seller rating comes from `seller.raiting`, separate from product reviews.
-
-### Props
-
-| Prop                                          | Meaning                                                                                                  |
-| --------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| `productId: number`                           | ID of the product handled by ProductCardSeller.                                                          |
-| `collection?: OrionplaceProductCollection`    | Product-store collection used to resolve the supplied product ID.                                        |
-| `disabled?: boolean`                          | Disables the component controls and prevents new actions.                                                |
-| `onSelect?: (seller: IProductSeller) => void` | Called when the visitor chooses the component’s primary item. The callback payload is shown in its type. |
-
-## Русский
-
-Показывает название продавца товара и оценку продавца. `productId`
-задаёт товар; `collection` по умолчанию равно `products`, для подборки
-используйте `featured`. Щелчок или Enter вызывает `onSelect(seller)`
-с объектом продавца. `disabled` блокирует выбор. В режиме одного
-продавца компонент скрыт. Оценка берётся из `seller.raiting`,
-отдельно от отзывов о товаре.
-
-### Свойства
-
-| Свойство                                      | Назначение                                                                                                |
-| --------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `productId: number`                           | ID товара, с которым работает ProductCardSeller.                                                          |
-| `collection?: OrionplaceProductCollection`    | Коллекция store товаров, в которой компонент ищет переданный ID товара.                                   |
-| `disabled?: boolean`                          | Блокирует элементы компонента и новые действия.                                                           |
-| `onSelect?: (seller: IProductSeller) => void` | Вызывается, когда покупатель выбирает основной элемент компонента. Данные обработчика указаны в его типе. |

package/templates/components/orionplace/products/ProductCardSeller.module.css

@@ -1,31 +0,0 @@
-.seller {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  justify-self: start;
-  min-width: 0;
-  max-width: 100%;
-  color: var(--orionplace-muted);
-  font-size: 11px;
-  font-weight: 400;
-  line-height: 16px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  cursor: pointer;
-  outline: none;
-}
-
-@media (hover: hover) {
-  .seller:hover {
-    color: var(--orionplace-text);
-  }
-}
-.seller:focus-visible { background: var(--orionplace-hover); }
-.disabled { cursor: default; opacity: 0.5; }
-@media (hover: hover) {
-  .disabled:hover {
-    color: var(--orionplace-muted);
-  }
-}
-.name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.rating { display: inline-flex; gap: 4px; flex-shrink: 0; font-variant-numeric: tabular-nums; }

package/templates/components/orionplace/products/ProductCardSeller.tsx

@@ -1,61 +0,0 @@
-'use client';
-
-import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
-import { useOrionplaceProducts } from '@/providers/OrionplaceProvider';
-import type { IProductSeller } from '@/interfaces/orionplace/products/IProduct';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import styles from './ProductCardSeller.module.css';
-
-export interface ProductCardSellerProps {
-  productId: number;
-  collection?: OrionplaceProductCollection;
-  disabled?: boolean;
-  onSelect?: (seller: IProductSeller) => void;
-}
-
-export function ProductCardSeller({
-  productId,
-  collection = 'products',
-  disabled = false,
-  onSelect,
-}: ProductCardSellerProps) {
-  const product = useOrionplaceProduct(productId, collection);
-  const singleSellerMode = useOrionplaceProducts(
-    (state) => state.init?.visual_settings?.single_seller_mode ?? false,
-  );
-  const seller = product?.seller;
-  if (!seller || singleSellerMode) {
-    return null;
-  }
-
-  function selectSeller() {
-    if (seller && !disabled) {
-      onSelect?.(seller);
-    }
-  }
-
-  return (
-    <span
-      role="link"
-      tabIndex={disabled ? -1 : 0}
-      aria-disabled={disabled || undefined}
-      title={seller.name}
-      data-product-seller
-      data-product-part="ProductCardSeller"
-      className={`${styles.seller} ${disabled ? styles.disabled : ''}`.trim()}
-      onClick={selectSeller}
-      onKeyDown={(event) => {
-        if (event.key === 'Enter') {
-          event.preventDefault();
-          selectSeller();
-        }
-      }}
-    >
-      <span className={styles.name}>{seller.name}</span>
-      <span className={styles.rating}>
-        <span aria-hidden="true">☆</span>{' '}
-        {seller.raiting}
-      </span>
-    </span>
-  );
-}