orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,36 @@
+# ProductCardStockNotice
+
+## English
+
+Shows a low-stock notice when the product has the low-stock flag and its
+remaining quantity is above zero. `productId` identifies the product;
+`collection` defaults to `products` and can be `featured`. `label`
+overrides the localized notice. `showQuantity` adds the remaining number.
+The component renders nothing when there is no notice.
+
+### Props
+
+| Prop                                       | Meaning                                                                |
+| ------------------------------------------ | ---------------------------------------------------------------------- |
+| `productId: number`                        | ID of the product handled by ProductCardStockNotice.                   |
+| `collection?: OrionplaceProductCollection` | Product-store collection used to resolve the supplied product ID.      |
+| `showQuantity?: boolean`                   | Shows the quantity region when enabled.                                |
+| `label?: string`                           | Visible or accessible name for the component’s main control or region. |
+
+## Русский
+
+Показывает предупреждение, если у товара стоит признак заканчивающегося
+запаса и доступное количество больше нуля. `productId` задаёт товар;
+`collection` по умолчанию равно `products`, для подборки используйте
+`featured`. `label` заменяет локализованный текст. `showQuantity`
+добавляет оставшееся количество. Без предупреждения компонент ничего
+не показывает.
+
+### Свойства
+
+| Свойство                                   | Назначение                                                              |
+| ------------------------------------------ | ----------------------------------------------------------------------- |
+| `productId: number`                        | ID товара, с которым работает ProductCardStockNotice.                   |
+| `collection?: OrionplaceProductCollection` | Коллекция store товаров, в которой компонент ищет переданный ID товара. |
+| `showQuantity?: boolean`                   | Показывает блок количества, когда значение включено.                    |
+| `label?: string`                           | Видимое или доступное название основного элемента компонента.           |

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

@@ -0,0 +1,8 @@
+.notice {
+  margin: 0;
+  color: var(--orionplace-danger);
+  font-size: 11px;
+  line-height: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}

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

@@ -0,0 +1,35 @@
+'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 './ProductCardStockNotice.module.css';
+
+export interface ProductCardStockNoticeProps {
+  productId: number;
+  collection?: OrionplaceProductCollection;
+  showQuantity?: boolean;
+  label?: string;
+}
+
+export function ProductCardStockNotice({
+  productId,
+  collection = 'products',
+  showQuantity = false,
+  label,
+}: ProductCardStockNoticeProps) {
+  const product = useOrionplaceProduct(productId, collection);
+  const localeCode = useOrionplaceSelections((state) => state.localeCode);
+  if (!product?.flags?.flag_is_soon_be_out || product.c_real_left <= 0) {
+    return null;
+  }
+
+  const caption = label || productLabels(localeCode).lowStock;
+
+  return (
+    <p className={styles.notice} data-product-part="ProductCardStockNotice">
+      {showQuantity ? `${caption}: ${product.c_real_left}` : caption}
+    </p>
+  );
+}

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

@@ -0,0 +1,30 @@
+# ProductCardTitle
+
+## English
+
+Shows the product name from the selected language in the React product
+store. `productId` identifies the product. `collection` selects `products`
+by default or `featured`. If that language has no name, the first available
+translation is used. The component renders nothing when the product is absent.
+
+### Props
+
+| Prop                                       | Meaning                                                           |
+| ------------------------------------------ | ----------------------------------------------------------------- |
+| `productId: number`                        | ID of the product handled by ProductCardTitle.                    |
+| `collection?: OrionplaceProductCollection` | Product-store collection used to resolve the supplied product ID. |
+
+## Русский
+
+Показывает название товара на выбранном языке из React-хранилища товаров.
+`productId` задаёт товар. `collection` по умолчанию выбирает `products`,
+для подборки используйте `featured`. Если названия на выбранном языке нет,
+используется первый доступный перевод. Если товар отсутствует, компонент
+ничего не показывает.
+
+### Свойства
+
+| Свойство                                   | Назначение                                                              |
+| ------------------------------------------ | ----------------------------------------------------------------------- |
+| `productId: number`                        | ID товара, с которым работает ProductCardTitle.                         |
+| `collection?: OrionplaceProductCollection` | Коллекция store товаров, в которой компонент ищет переданный ID товара. |

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

@@ -0,0 +1,13 @@
+.title {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  color: var(--orionplace-text);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import styles from './ProductCardTitle.module.css';
+
+export interface ProductCardTitleProps {
+  productId: number;
+  collection?: OrionplaceProductCollection;
+}
+
+export function ProductCardTitle({
+  productId,
+  collection = 'products',
+}: ProductCardTitleProps) {
+  const product = useOrionplaceProduct(productId, collection);
+  const localeCode = useOrionplaceSelections((state) => state.localeCode);
+  if (!product) {
+    return null;
+  }
+
+  const title = getAvailableNestedValueFromObject(
+    product.locale,
+    localeCode,
+    'product_name',
+  ) || '—';
+
+  return <h3 className={styles.title} data-product-part="ProductCardTitle">{title}</h3>;
+}

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

@@ -0,0 +1,77 @@
+# ProductCardVariants
+
+## English
+
+Shows the product's main and available additional variant values. Each
+choice refers to a product returned by the storefront API. `productId`
+identifies the displayed product in `collection` (`products` or `featured`).
+`variantProductIds`, when supplied, limits selection to those offered product
+IDs. `onSelect` requests a main variant; the storefront loads and stores its
+product, then the card displays it. `onSelectSecondary` reports the selected
+secondary product. When a main choice needs additional
+values, the selector opens a dialog and calls `onRequestSecondary` with the
+current product, group ID and selected main value. The storefront updates
+the product store with the loading, ready or error result. The exposed
+`openForPurchase()` method starts that choice before a purchase action.
+
+Choosing a secondary option in the dialog stores that product together with its
+secondary choices before calling `onSelectSecondary`. The card keeps those
+choices when it displays the selected product. The host can observe the
+selection while retaining the product data prepared by the component.
+
+### Props
+
+| Prop                                                                             | Meaning                                                                                                              |
+| -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `productId: number`                                                              | ID of the product handled by ProductCardVariants.                                                                    |
+| `collection?: OrionplaceProductCollection`                                       | Product-store collection used to resolve the supplied product ID.                                                    |
+| `variantProductIds?: number[]`                                                   | Product IDs available as variants of the current product.                                                            |
+| `disabled?: boolean`                                                             | Disables the component controls and prevents new actions.                                                            |
+| `actionsDisabled?: boolean`                                                      | Disables product actions while the surrounding flow is busy.                                                         |
+| `onSelect?: (variant: IProductVariantValue) => void`                             | Passes the selected primary variant when no secondary choice is required. The application handles replacing the product. |
+| `onSelectSecondary?: (variant: IProductSecondaryVariant) => void`                | Passes the selected secondary variant. For a dialog selection, its product has already been stored and the dialog closed. |
+| `onRequestSecondary?: (request: IProductSecondaryVariantRequest) => void`        | Passes the product ID in `product`, product group ID in `productGroup` and primary variant in `variant` when its secondary variants need loading. The application loads them and supplies them to the product store. |
+| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`    | Passes the product ID in `product` and the requested total quantity in `quantity` when adding an item or changing its quantity. The application sends the request and supplies confirmed product data. |
+| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void` | Passes the product ID in `product` and cart item ID in `cartItem` when removing the last unit. The application removes that cart item and supplies confirmed product data. |
+| `onSubscribe?: (selection: ProductActionSelection) => void`                      | Passes the product ID in `product` when an availability notification is requested. The application handles any required sign-in, sends the request and updates subscription state. |
+| `onUnsubscribe?: (selection: ProductActionSelection) => void`                    | Passes the product ID in `product` when cancelling an availability notification. The application sends the request and supplies the confirmed subscription state. |
+| `onPreorder?: (selection: ProductActionSelection) => void`                       | Passes the product ID in `product` when preorder is selected. The application collects the required contact details and submits the request. |
+| `className?: string`                                                             | Additional CSS class for the component root.                                                                         |
+
+## Русский
+
+Показывает основные и доступные дополнительные значения вариантов товара.
+Каждое значение связано с товаром из ответа API. `productId` задаёт
+показанный товар в `collection` (`products` или `featured`). Если передан
+`variantProductIds`, выбрать можно только товары с указанными ID.
+`onSelect` сообщает о выборе основного варианта: магазин загружает и сохраняет
+его товар, после чего карточка его показывает. `onSelectSecondary` сообщает
+о выбранном дополнительном товаре. Если для основного значения нужны
+дополнительные варианты, открывается диалог и `onRequestSecondary` получает
+текущий товар, ID группы и выбранное основное значение. Магазин записывает
+в хранилище состояние загрузки, результат или ошибку. Метод
+`openForPurchase()` запускает этот выбор перед действием покупки.
+
+При выборе дополнительного варианта в диалоге компонент сохраняет товар вместе
+со списком дополнительных вариантов до вызова `onSelectSecondary`. Карточка
+сохраняет этот список при показе выбранного товара. Приложение может обработать
+событие выбора, сохранив подготовленные компонентом данные товара.
+
+### Свойства
+
+| Свойство                                                                         | Назначение                                                                                                         |
+| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `productId: number`                                                              | ID товара, с которым работает ProductCardVariants.                                                                 |
+| `collection?: OrionplaceProductCollection`                                       | Коллекция store товаров, в которой компонент ищет переданный ID товара.                                            |
+| `variantProductIds?: number[]`                                                   | ID товаров, доступных как варианты текущего товара.                                                                |
+| `disabled?: boolean`                                                             | Блокирует элементы компонента и новые действия.                                                                    |
+| `actionsDisabled?: boolean`                                                      | Блокирует действия с товаром, пока внешний сценарий занят.                                                         |
+| `onSelect?: (variant: IProductVariantValue) => void`                             | Передаёт выбранный основной вариант, если дополнительный выбор не требуется. Приложение обрабатывает замену товара. |
+| `onSelectSecondary?: (variant: IProductSecondaryVariant) => void`                | Передаёт выбранный дополнительный вариант. При выборе в диалоге его товар уже сохранён в хранилище, а диалог закрыт. |
+| `onRequestSecondary?: (request: IProductSecondaryVariantRequest) => void`        | Передаёт ID товара в `product`, ID группы товаров в `productGroup` и основной вариант в `variant`, когда для него нужно загрузить дополнительные варианты. Приложение загружает и передаёт их в хранилище товаров. |
+| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`    | Передаёт `product` — ID товара и `quantity` — запрошенное итоговое количество при добавлении или изменении количества. Приложение выполняет запрос и передаёт подтверждённые данные товара. |
+| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void` | Передаёт ID товара в `product` и ID позиции корзины в `cartItem` при удалении последней единицы. Приложение удаляет эту позицию и передаёт подтверждённые данные товара. |
+| `onSubscribe?: (selection: ProductActionSelection) => void`                      | Передаёт ID товара в `product` при выборе уведомления о поступлении. Приложение выполняет вход, если он нужен, отправляет запрос и обновляет состояние подписки. |
+| `onUnsubscribe?: (selection: ProductActionSelection) => void`                    | Передаёт ID товара в `product` при отмене уведомления о поступлении. Приложение отправляет запрос и передаёт подтверждённое состояние подписки. |
+| `onPreorder?: (selection: ProductActionSelection) => void`                       | Передаёт ID товара в `product` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос. |
+| `className?: string`                                                             | Дополнительный CSS-класс корневого элемента.                                                                       |

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

@@ -0,0 +1,97 @@
+.variants {
+  display: grid;
+  min-width: 0;
+  gap: 8px;
+}
+.group {
+  min-width: 0;
+}
+.choices {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.choice {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: 0;
+  max-width: 100%;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid var(--orionplace-border);
+  background: transparent;
+  color: var(--orionplace-muted);
+  font: inherit;
+  font-size: 12px;
+  line-height: 16px;
+  cursor: pointer;
+}
+.choice[aria-pressed="true"],
+.choice:focus-visible {
+  border-color: var(--orionplace-text);
+  color: var(--orionplace-text);
+}
+@media (hover: hover) {
+  .choice:hover {
+    border-color: var(--orionplace-text);
+    color: var(--orionplace-text);
+  }
+}
+.choice:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.swatch {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border-width: 2px;
+  border-radius: 50%;
+}
+/* A 24px touch target around the 18px circle; neighbours stay apart. */
+.swatch::before {
+  position: absolute;
+  inset: -5px;
+  border-radius: 50%;
+  content: '';
+}
+.swatch:focus-visible {
+  transform: scale(1.1);
+}
+@media (hover: hover) {
+  .swatch:hover {
+    transform: scale(1.1);
+  }
+}
+/* The product page shows the same variant choices at a slightly larger size. */
+[data-product-layout='details'] .swatch {
+  width: 24px;
+  height: 24px;
+}
+[data-product-layout='details'] .choice:not(.swatch) {
+  height: 32px;
+  padding-inline: 12px;
+}
+.screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .swatch:focus-visible {
+    transform: none;
+  }
+  @media (hover: hover) {
+    .swatch:hover {
+      transform: none;
+    }
+  }
+}