orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,33 @@
+# 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

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

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

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

@@ -0,0 +1,52 @@
+# 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

@@ -0,0 +1,64 @@
+.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

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

@@ -0,0 +1,33 @@
+# 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

@@ -0,0 +1,22 @@
+.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

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

@@ -0,0 +1,33 @@
+# 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

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

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

@@ -0,0 +1,36 @@
+# 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

@@ -0,0 +1,31 @@
+.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

@@ -0,0 +1,61 @@
+'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>
+  );
+}