orionplace-react 0.7.8 → 0.8.0

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

@@ -1,350 +0,0 @@
-'use client';
-
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import type { CSSProperties } from 'react';
-import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
-import {
-  useOrionplaceProducts,
-  useOrionplaceProductsStore,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import type {
-  IProductSecondaryVariant,
-  IProductSecondaryVariantValue,
-  IProductVariantValue,
-} from '@/interfaces/orionplace/products/IProduct';
-import type { IProductSecondaryVariantRequest } from '@/interfaces/orionplace/products/IProductSecondaryVariantRequest';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import { getAvailableValueFromObject } from '@/lib/orionplace/presentation';
-import { productLabels } from '@/lib/orionplace/productLabels';
-import { ProductSecondaryVariantModal } from './ProductSecondaryVariantModal';
-import type { ProductActionSelection } from './ProductCardActions';
-import styles from './ProductCardVariants.module.css';
-
-export interface ProductCardVariantsHandle {
-  openForPurchase: () => void;
-}
-
-export interface ProductCardVariantsProps {
-  productId: number;
-  collection?: OrionplaceProductCollection;
-  variantProductIds?: number[];
-  disabled?: boolean;
-  actionsDisabled?: boolean;
-  onSelect?: (variant: IProductVariantValue) => void;
-  onSelectSecondary?: (variant: IProductSecondaryVariant) => void;
-  onRequestSecondary?: (request: IProductSecondaryVariantRequest) => void;
-  onAdd?: (selection: ProductActionSelection & { quantity: number }) => void;
-  onRemove?: (selection: ProductActionSelection & { cartItem: number }) => void;
-  onSubscribe?: (selection: ProductActionSelection) => void;
-  onUnsubscribe?: (selection: ProductActionSelection) => void;
-  onPreorder?: (selection: ProductActionSelection) => void;
-  className?: string;
-}
-
-export const ProductCardVariants = forwardRef<
-  ProductCardVariantsHandle,
-  ProductCardVariantsProps
->(function ProductCardVariants(
-  {
-    productId,
-    collection = 'products',
-    variantProductIds,
-    disabled = false,
-    actionsDisabled = false,
-    onSelect,
-    onSelectSecondary,
-    onRequestSecondary,
-    onAdd,
-    onRemove,
-    onSubscribe,
-    onUnsubscribe,
-    onPreorder,
-    className = '',
-  },
-  ref,
-) {
-  const product                         = useOrionplaceProduct(productId, collection);
-  const productsStore                   = useOrionplaceProductsStore();
-  const secondaryStates                 = useOrionplaceProducts(
-    (state) => state.secondaryVariants,
-  );
-  const localeCode                      = useOrionplaceSelections((state) => state.localeCode);
-  const [modalVariant, setModalVariant] = useState<IProductVariantValue>();
-  const [purchaseMode, setPurchaseMode] = useState(false);
-  const primary                         = product?.variants.main_variant;
-  const secondary                       = product?.secondary_variants;
-  const requiresSecondary               =
-    !variantProductIds &&
-    Boolean(primary?.second_exists || secondary?.variants.length);
-  const copy                            = productLabels(localeCode);
-  const primaryName                     =
-    getAvailableValueFromObject(primary?.locale, localeCode) || copy.variants;
-  const secondaryName                   =
-    getAvailableValueFromObject(secondary?.secondary.locale, localeCode) ||
-    copy.secondary;
-
-  useEffect(() => {
-    setModalVariant(undefined);
-  }, [productId, collection]);
-
-  useEffect(() => {
-    if (disabled) {
-      setModalVariant(undefined);
-    }
-  }, [disabled]);
-
-  function offered(id: number | null | undefined) {
-    return (
-      validId(id) &&
-      (!variantProductIds || variantProductIds.includes(Number(id)))
-    );
-  }
-
-  function canSelectPrimary(value: IProductVariantValue) {
-    return (
-      offered(value.reload_product) &&
-      (!requiresSecondary ||
-        (validId(value.id) && validId(product?.product_group_id)))
-    );
-  }
-
-  function isPrimarySelected(value: IProductVariantValue) {
-    const state =
-      product && secondaryStates[`${product.product_group_id}:${value.id}`];
-    return (
-      value.reload_product === productId ||
-      Boolean(
-        state?.data?.variants.some((option) => option.product.id === productId),
-      )
-    );
-  }
-
-  function variantName(
-    value: IProductVariantValue | IProductSecondaryVariantValue,
-  ) {
-    return (
-      getAvailableValueFromObject(value.locale, localeCode) || String(value.id)
-    );
-  }
-
-  function requestSecondary(value: IProductVariantValue) {
-    if (product) {
-      onRequestSecondary?.({
-        product: product.id,
-        productGroup: product.product_group_id,
-        variant: value,
-      });
-    }
-  }
-
-  function openSecondary(value: IProductVariantValue) {
-    if (!product || disabled || !canSelectPrimary(value)) {
-      return;
-    }
-    setModalVariant(value);
-    const state           = productsStore
-      .getState()
-      .getSecondaryVariants(product.product_group_id, value.id);
-    if (state?.status === 'ready' || state?.status === 'loading') {
-      return;
-    }
-    const otherCollection = collection === 'products' ? 'featured' : 'products';
-    const target          =
-      productsStore
-        .getState()
-        .getProduct(Number(value.reload_product), collection) ??
-      productsStore
-        .getState()
-        .getProduct(Number(value.reload_product), otherCollection);
-    if (target?.secondary_variants) {
-      productsStore
-        .getState()
-        .setSecondaryVariants(product.product_group_id, value.id, {
-          status: 'ready',
-          data: target.secondary_variants,
-        });
-      return;
-    }
-    requestSecondary(value);
-  }
-
-  useImperativeHandle(ref, () => ({
-    openForPurchase() {
-      if (disabled || actionsDisabled) {
-        return;
-      }
-      const value =
-        primary?.value.find(isPrimarySelected) ??
-        primary?.value.find(canSelectPrimary);
-      if (value) {
-        openSecondary(value);
-        setPurchaseMode(true);
-      }
-    },
-  }));
-
-  function selectPrimary(value: IProductVariantValue) {
-    if (disabled || !canSelectPrimary(value)) {
-      return;
-    }
-    setPurchaseMode(false);
-    if (requiresSecondary) {
-      openSecondary(value);
-    } else {
-      onSelect?.(value);
-    }
-  }
-
-  function selectModalSecondary(value: IProductSecondaryVariant) {
-    const state  =
-      product &&
-      modalVariant &&
-      productsStore
-        .getState()
-        .getSecondaryVariants(product.product_group_id, modalVariant.id);
-    if (
-      disabled ||
-      !offered(value.product.id) ||
-      state?.status !== 'ready' ||
-      !state.data?.variants.includes(value)
-    ) {
-      return;
-    }
-    const target =
-      productsStore.getState().updates[collection][value.product.id] ??
-      value.product;
-    productsStore.getState().setProduct(
-      {
-        ...target,
-        secondary_variants: state.data,
-      },
-      collection,
-    );
-    setModalVariant(undefined);
-    onSelectSecondary?.(value);
-  }
-
-  if (!primary?.value.length && !secondary?.variants.length) {
-    return null;
-  }
-
-  return (
-    <div
-      className={`${styles.variants} ${className}`.trim()}
-      data-product-part="ProductCardVariants"
-      data-product-variants
-    >
-      {Boolean(primary?.value.length) && (
-        <div
-          role="group"
-          aria-label={primaryName}
-          className={styles.group}
-        >
-          <p className={styles.screenReaderOnly}>{primaryName}</p>
-          <div className={styles.choices}>
-            {primary!.value.map((value) => {
-              const selected = isPrimarySelected(value);
-              const swatch   = Boolean(primary!.is_color && value.color);
-              return (
-                <button
-                  key={value.id}
-                  type="button"
-                  disabled={disabled || !canSelectPrimary(value)}
-                  aria-pressed={selected}
-                  title={`${primaryName}: ${variantName(value)}`}
-                  className={`${styles.choice} ${swatch ? styles.swatch : ''}`}
-                  style={
-                    swatch ? swatchStyle(value.color, selected) : undefined
-                  }
-                  data-product-variant={value.id}
-                  onClick={() => selectPrimary(value)}
-                >
-                  <span
-                    className={swatch ? styles.screenReaderOnly : undefined}
-                  >
-                    {variantName(value)}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      )}
-      {Boolean(secondary?.variants.length) && (
-        <div
-          role="group"
-          aria-label={secondaryName}
-          className={styles.group}
-        >
-          <p className={styles.screenReaderOnly}>{secondaryName}</p>
-          <div className={styles.choices}>
-            {secondary!.variants.map((entry) => {
-              const selected = entry.product.id === productId;
-              const swatch   = Boolean(
-                secondary!.secondary.is_color && entry.value.color,
-              );
-              return (
-                <button
-                  key={entry.product.id}
-                  type="button"
-                  disabled={disabled || !offered(entry.product.id)}
-                  aria-pressed={selected}
-                  title={`${secondaryName}: ${variantName(entry.value)}`}
-                  className={`${styles.choice} ${swatch ? styles.swatch : ''}`}
-                  style={
-                    swatch
-                      ? swatchStyle(entry.value.color, selected)
-                      : undefined
-                  }
-                  data-secondary-variant={entry.product.id}
-                  onClick={() => onSelectSecondary?.(entry)}
-                >
-                  <span
-                    className={swatch ? styles.screenReaderOnly : undefined}
-                  >
-                    {variantName(entry.value)}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      )}
-      {modalVariant && (
-        <ProductSecondaryVariantModal
-          productId={productId}
-          collection={collection}
-          variantId={modalVariant.id}
-          purchaseMode={purchaseMode}
-          actionsDisabled={disabled || actionsDisabled}
-          onAdd={onAdd}
-          onRemove={onRemove}
-          onSubscribe={onSubscribe}
-          onUnsubscribe={onUnsubscribe}
-          onPreorder={onPreorder}
-          onChangePrimary={openSecondary}
-          onRetry={() => requestSecondary(modalVariant)}
-          onSelect={selectModalSecondary}
-          onClose={() => setModalVariant(undefined)}
-        />
-      )}
-    </div>
-  );
-});
-
-function validId(value: number | null | undefined) {
-  return Number.isInteger(value) && Number(value) > 0;
-}
-
-function swatchStyle(
-  color: string | null | undefined,
-  selected: boolean,
-): CSSProperties {
-  return {
-    borderColor: color || undefined,
-    backgroundColor: selected
-      ? 'var(--orionplace-surface)'
-      : color || undefined,
-  };
-}

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

@@ -1,91 +0,0 @@
-# ProductGroup
-
-## English
-
-Renders products from the selected `collection` (`products` by default or
-`featured`) as a responsive group of `ProductCard` instances. `productIds`
-selects and orders specific products. A positive `limit` displays only the
-first matching products. `disabled` prevents card actions. `layout="grid"`
-keeps the grid on narrow screens; the default responsive layout scrolls
-horizontally there. `products` supplies complete product objects when a parent
-request returns a collection that is not part of Application Load. When
-Application Load enables mobile arrows, they appear only if the row can
-scroll. The group forwards each card's selection,
-seller, variant, wishlist and purchase callbacks. `renderFooter` receives
-the product listed in this group, even after its card displays a selected
-variant.
-
-Each card initially includes only its primary image. Hovering or focusing
-one card adds secondary images for that card; other cards keep their first
-image until interacted with.
-
-### Props
-
-| Prop                                                                                                              | Meaning                                                                                                              |
-| ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `collection?: OrionplaceProductCollection`                                                                        | Product-store collection used to resolve the supplied product ID.                                                    |
-| `disabled?: boolean`                                                                                              | Disables the component controls and prevents new actions.                                                            |
-| `limit?: number`                                                                                                  | Limits how many supplied entries the component renders.                                                              |
-| `products?: readonly IProduct[]`                                                                                  | Product records supplied for server rendering and hydration.                                                         |
-| `productIds?: number[]`                                                                                           | Product IDs rendered in the supplied order.                                                                          |
-| `hiddenBadges?: readonly string[]` | Card badges to leave out: `new`, `popular`, `deal`. A blog article passes the badges the author turned off for a placement. |
-| `layout?: "responsive" \| "grid"`                                                                                 | Selects the supported component layout.                                                                              |
-| `productHref?: (id: number) => string`                                                                            | Builds the product destination from the callback arguments.                                                          |
-| `renderFooter?: (product: IProduct) => ReactNode`                                                                 | Replaces the default footer region; the renderer inputs are shown in its type.                                       |
-| `className?: string`                                                                                              | Additional CSS class for the component root.                                                                         |
-| `onSelect?: (product: IProduct) => void`                                                                          | Passes the displayed product object when its image or name is selected. The application handles product navigation. |
-| `onSelectSeller?: (seller: IProductSeller) => void`                                                               | Passes the displayed product’s seller object when the seller is selected. The application opens the seller page. |
-| `onSelectVariant?: (selection: ProductActionSelection & { variant: IProductVariantValue; }) => void`              | Passes the previously displayed product ID in `product` and chosen primary variant in `variant`. An available variant product replaces the card; the application loads missing product data. |
-| `onRequestSecondaryVariants?: (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. |
-| `onSelectSecondaryVariant?: (selection: ProductActionSelection & { variant: IProductSecondaryVariant; }) => void` | Passes the previously displayed product ID in `product` and chosen secondary variant in `variant` after replacing the displayed product. The secondary-variant data remains available. |
-| `onToggleFavorite?: (selection: ProductActionSelection & { selected: boolean; }) => void`                         | Passes the product ID in `product` and desired wishlist state in `selected` after the heart is pressed. The application confirms the change with a request and updates product data. |
-| `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. |
-
-## Русский
-
-Показывает товары из `collection` (`products` по умолчанию или `featured`)
-группой карточек `ProductCard`. `productIds` выбирает товары и задаёт их
-порядок. Положительное значение `limit` оставляет первые подходящие товары.
-`disabled` запрещает действия с карточками. `layout="grid"` сохраняет сетку
-на узком экране; обычный режим там прокручивается по горизонтали. `products`
-передаёт полные объекты товаров, если родительский запрос вернул подборку,
-которой нет в Application Load. Если настройка Application Load разрешает
-мобильные стрелки, они появляются,
-когда товары можно прокрутить. Группа передаёт обработчикам выбор товара,
-продавца, варианта, избранного и действия покупки. `renderFooter` получает
-товар из списка группы, даже если карточка показывает выбранный вариант.
-
-Изначально каждая карточка содержит только первую фотографию. После
-наведения или перехода к карточке с клавиатуры остальные фотографии
-появляются у этой карточки; другие карточки продолжают показывать только
-первую фотографию.
-
-### Свойства
-
-| Свойство                                                                                                          | Назначение                                                                                                         |
-| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `collection?: OrionplaceProductCollection`                                                                        | Коллекция store товаров, в которой компонент ищет переданный ID товара.                                            |
-| `disabled?: boolean`                                                                                              | Блокирует элементы компонента и новые действия.                                                                    |
-| `limit?: number`                                                                                                  | Ограничивает число показанных переданных записей.                                                                  |
-| `products?: readonly IProduct[]`                                                                                  | Товары для серверного рендера и гидратации.                                                                        |
-| `productIds?: number[]`                                                                                           | ID для товара, используемые в переданном порядке.                                                                  |
-| `hiddenBadges?: readonly string[]` | Значки карточки, которые не показываются: `new`, `popular`, `deal`. Статья блога передаёт значки, отключённые автором для размещения. |
-| `layout?: "responsive" \| "grid"`                                                                                 | Выбирает поддерживаемый вариант компоновки.                                                                        |
-| `productHref?: (id: number) => string`                                                                            | Строит адрес ссылки товара из аргументов обработчика.                                                              |
-| `renderFooter?: (product: IProduct) => ReactNode`                                                                 | Заменяет стандартный блок нижней части; входные данные функции указаны в её типе.                                  |
-| `className?: string`                                                                                              | Дополнительный CSS-класс корневого элемента.                                                                       |
-| `onSelect?: (product: IProduct) => void`                                                                          | Передаёт объект отображаемого товара при выборе его изображения или названия. Приложение выполняет переход к товару. |
-| `onSelectSeller?: (seller: IProductSeller) => void`                                                               | Передаёт объект продавца отображаемого товара при выборе продавца. Приложение открывает его страницу. |
-| `onSelectVariant?: (selection: ProductActionSelection & { variant: IProductVariantValue; }) => void`              | Передаёт ID ранее отображаемого товара в `product` и выбранный основной вариант в `variant`. Доступный товар выбранного варианта заменяет карточку; отсутствующие данные загружает приложение. |
-| `onRequestSecondaryVariants?: (request: IProductSecondaryVariantRequest) => void`                                 | Передаёт ID товара в `product`, ID группы товаров в `productGroup` и основной вариант в `variant`, когда для него нужно загрузить дополнительные варианты. Приложение загружает и передаёт их в хранилище товаров. |
-| `onSelectSecondaryVariant?: (selection: ProductActionSelection & { variant: IProductSecondaryVariant; }) => void` | Передаёт ID ранее отображаемого товара в `product` и выбранный дополнительный вариант в `variant` после замены отображаемого товара. Выбор сохраняет данные дополнительных вариантов. |
-| `onToggleFavorite?: (selection: ProductActionSelection & { selected: boolean; }) => void`                         | Передаёт ID товара в `product` и желаемое состояние избранного в `selected` после нажатия сердца. Приложение подтверждает изменение запросом и обновляет данные товара. |
-| `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` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос. |

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

@@ -1,64 +0,0 @@
-.group { min-width: 0; container: products / inline-size; }
-.track {
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  align-items: stretch;
-  column-gap: 16px;
-  row-gap: 0;
-}
-.track > [data-product-layout='card'] {
-  grid-row: span 8;
-  grid-template-rows: subgrid;
-  align-content: normal;
-  max-width: none;
-  padding-bottom: 32px;
-}
-.track [data-product-part='ProductCardDescription'] { display: none; }
-.scrollControls { display: flex; justify-content: end; gap: 8px; margin-top: 4px; }
-.scrollControls button {
-  width: 40px;
-  height: 40px;
-  border: 1px solid var(--orionplace-text);
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  /* The same text-sm as the banner and events arrows. */
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  cursor: pointer;
-}
-.scrollControls button:focus-visible {
-  background: var(--orionplace-hover);
-}
-@media (hover: hover) {
-  .scrollControls button:hover {
-    background: var(--orionplace-hover);
-  }
-}
-.scrollControls button:disabled { opacity: .4; cursor: default; }
-@container products (min-width: 660px) {
-  .track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-@container products (min-width: 900px) {
-  .track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-}
-@container products (min-width: 1200px) {
-  .track { grid-template-columns: repeat(5, minmax(0, 1fr)); }
-}
-/* A narrow group (below 592px of its own width, the old 640px screen). */
-@container products (width < 592px) {
-  .track:not(.grid) {
-    grid-template-columns: none;
-    grid-auto-flow: column;
-    grid-template-rows: repeat(8, auto);
-    grid-auto-columns: min(62%, 256px);
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    overscroll-behavior-x: contain;
-  }
-  .track.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .track > * { min-width: 0; scroll-snap-align: start; }
-  /* The row scrolls sideways, so card pictures leave sideways swipes to it. */
-  .track:not(.grid) [data-product-photo-swipe] { touch-action: auto; }
-}