orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/cart/CartLineItem.module.css

@@ -1,57 +0,0 @@
-.root { display: flex; min-width: 0; flex-direction: column; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--orionplace-border); color: var(--orionplace-text); }
-.line { display: flex; min-width: 0; align-items: flex-start; gap: 1rem; }
-.imageLink { display: block; width: 6rem; height: 6rem; flex: 0 0 6rem; background: var(--orionplace-surface); outline: none; }
-.imageLink:focus-visible { opacity: 0.85; }
-@media (hover: hover) {
-  .imageLink:hover {
-    opacity: 0.85;
-  }
-}
-.image { box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }
-.content { display: grid; min-width: 0; flex: 1; gap: 0.75rem; }
-.name { color: inherit; font-size: 0.875rem; line-height: 1.25rem; text-decoration: none; outline: none; }
-.name:focus-visible { opacity: 0.7; }
-@media (hover: hover) {
-  .name:hover {
-    opacity: 0.7;
-  }
-}
-.price { margin: 0; font-size: 0.875rem; line-height: calc(1.25 / 0.875); font-weight: 500; font-variant-numeric: tabular-nums; }
-.quantityText { margin: 0; color: var(--orionplace-muted); font-size: 0.75rem; line-height: calc(1 / 0.75); text-transform: uppercase; letter-spacing: 0.08em; }
-.quantityForm { display: flex; align-items: flex-end; }
-.quantityForm label { display: flex; width: 6rem; min-width: 0; flex-direction: column; gap: 0.5rem; color: var(--orionplace-muted); font-size: 0.75rem; line-height: calc(1 / 0.75); text-transform: uppercase; letter-spacing: 0.08em; }
-.quantityForm b { color: var(--orionplace-danger); font-weight: 400; letter-spacing: 0; }
-.quantityForm input,
-.quantityForm button { box-sizing: border-box; min-height: 2.5rem; border: 1px solid var(--orionplace-border); border-radius: 0; color: var(--orionplace-text); background: var(--orionplace-surface); font: inherit; }
-.quantityForm input { width: 100%; min-width: 0; padding: 0.5rem 0.75rem; text-align: center; font-size: 0.875rem; line-height: calc(1.25 / 0.875); font-variant-numeric: tabular-nums; outline: none; }
-.quantityForm button { flex: 0 0 auto; margin-left: -1px; padding: 0.5rem 1rem; font-size: 0.75rem; line-height: calc(1 / 0.75); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
-.quantityForm button:focus-visible { background: var(--orionplace-hover); outline: none; }
-@media (hover: hover) {
-  .quantityForm button:hover {
-    background: var(--orionplace-hover);
-    outline: none;
-  }
-}
-.quantityForm button:disabled,
-.quantityForm input:disabled,
-.remove:disabled { cursor: not-allowed; opacity: 0.4; }
-.remove { width: fit-content; align-self: start; padding: 0 0 0.125rem; border: 0; border-bottom: 1px solid currentColor; color: var(--orionplace-muted); background: transparent; font: inherit; font-size: 0.75rem; line-height: calc(1 / 0.75); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
-.remove:focus-visible { color: var(--orionplace-text); outline: none; }
-@media (hover: hover) {
-  .remove:hover {
-    color: var(--orionplace-text);
-    outline: none;
-  }
-}
-.options { display: flex; box-sizing: border-box; min-width: 0; flex-direction: column; margin: 0 0 0 0.75rem; padding: 0 0 0 1rem; border-left: 1px solid var(--orionplace-border); list-style: none; }
-.options > li + li { border-top: 1px solid var(--orionplace-border); }
-.error { margin: 0; padding: 0.75rem; border: 1px solid var(--orionplace-danger); color: var(--orionplace-danger); font-size: 0.875rem; line-height: calc(1.25 / 0.875); }
-
-/* The cart's own width, not the screen's, as in the other packages. */
-@container (min-width: 592px) {
-  .line { gap: 1.25rem; }
-  .imageLink { width: 7rem; height: 7rem; flex-basis: 7rem; }
-  .content { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; }
-  .price { grid-row: span 3; text-align: right; }
-  .options { margin-left: 7rem; padding-left: 1.25rem; }
-}

package/templates/components/orionplace/cart/CartLineItem.tsx

@@ -1,263 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useRef,
-  useState,
-  type FormEvent,
-} from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
-import type {
-  ICartCheckoutProduct,
-} from '@/interfaces/orionplace/cart/ICartData';
-import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
-import { formatCurrency } from '@/lib/orionplace/currency';
-import { cartLabels } from '@/lib/orionplace/cartLabels';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import {
-  CartItemOptions,
-  type CartItemOptionsProps,
-} from './CartItemOptions';
-import styles from './CartLineItem.module.css';
-import { apiErrorMessage } from '@/lib/orionplace/api';
-
-export type CartLineItemAction =
-  | {
-      endpoint: 'cart_guest_first_set';
-      request: { product: number; quantity: number };
-      params: Record<string, never>;
-    }
-  | {
-      endpoint: 'cart_guest_remove_by_cart_item';
-      request: Record<string, never>;
-      params: { cart_item_id: number };
-    }
-  | {
-      endpoint: 'cart_customer_remove_by_dlf_item';
-      request: Record<string, never>;
-      params: { dlf_item_id: number };
-    };
-
-export interface CartLineItemProps {
-  product: IProduct | ICartCheckoutProduct;
-  unavailable?: boolean;
-  disabled?: boolean;
-  pending?: boolean;
-  error?: string;
-  // false when the parent already shows a rejected action (StorefrontCart
-  // does, above the lines), so the error is not shown twice.
-  showRequestErrors?: boolean;
-  productHref?: (productId: number, locale: string) => string;
-  optionProps?: Omit<CartItemOptionsProps, 'group'>;
-  onChange?: (
-    action: CartLineItemAction,
-  ) => Promise<unknown> | unknown;
-}
-
-function checkoutProduct(
-  product: IProduct | ICartCheckoutProduct,
-): ICartCheckoutProduct | undefined {
-  return 'dlf_id' in product ? product : undefined;
-}
-
-function initialQuantity(product: IProduct | ICartCheckoutProduct) {
-  return checkoutProduct(product)?.dlf_count ??
-    (product.cart_counts as { quantity?: number | null } | null | undefined)
-      ?.quantity ??
-    1;
-}
-
-export function CartLineItem({
-  product,
-  unavailable = false,
-  disabled = false,
-  pending = false,
-  error = '',
-  showRequestErrors = true,
-  productHref = (id, locale) =>
-    `/product/${id}?locale=${encodeURIComponent(locale)}`,
-  optionProps,
-  onChange,
-}: CartLineItemProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const currencyId = useOrionplaceSelections((state) => state.currencyId);
-  const currency = useOrionplaceSelections(
-    (state) => state.init?.currencies[currencyId],
-  );
-  const labels = cartLabels(locale);
-  const common = featureLabels(locale);
-  const shipment = checkoutProduct(product);
-  const options = shipment?.option_group ?? [];
-  const [quantity, setQuantity] = useState<number | ''>(
-    () => initialQuantity(product),
-  );
-  const [taskPending, setTaskPending] = useState(false);
-  const [taskError, setTaskError] = useState('');
-  const edited = useRef(false);
-  const busy = disabled || pending || taskPending;
-  const name = getAvailableNestedValueFromObject(
-    product.locale,
-    locale,
-    'product_name',
-  ) || `#${product.id}`;
-  const price = shipment?.dlf_prices.total_price_after_promo ??
-    product.cart_counts?.cart_item_price_after_promo ??
-    product.product_price_dict;
-  const image = product.images?.small?.[0] || '';
-  const href = productHref(product.id, locale);
-
-  useEffect(() => {
-    if (!edited.current) {
-      setQuantity(initialQuantity(product));
-    }
-  }, [product]);
-
-  async function change(action: CartLineItemAction, confirmed?: () => void) {
-    if (busy) {
-      return;
-    }
-    setTaskPending(true);
-    setTaskError('');
-    try {
-      await onChange?.(action);
-      confirmed?.();
-    } catch (reason) {
-      if (showRequestErrors) {
-        setTaskError(
-          apiErrorMessage(reason) || common.failed,
-        );
-      }
-    } finally {
-      setTaskPending(false);
-    }
-  }
-
-  function save(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (!Number.isInteger(quantity) || Number(quantity) < 1) {
-      return;
-    }
-    void change({
-      endpoint: 'cart_guest_first_set',
-      request: { product: product.id, quantity: Number(quantity) },
-      params: {},
-    }, () => {
-      edited.current = false;
-    });
-  }
-
-  function remove() {
-    if (shipment) {
-      void change({
-        endpoint: 'cart_customer_remove_by_dlf_item',
-        request: {},
-        params: { dlf_item_id: shipment.dlf_id },
-      });
-      return;
-    }
-    const cartItem = product.cart_counts?.cart_id;
-    if (cartItem) {
-      void change({
-        endpoint: 'cart_guest_remove_by_cart_item',
-        request: {},
-        params: { cart_item_id: cartItem },
-      });
-    }
-  }
-
-  return (
-    <article
-      className={styles.root}
-      aria-busy={busy}
-      data-feature-part="CartLineItem"
-      data-cart-product={product.id}
-    >
-      <div className={styles.line}>
-        <a href={href} className={styles.imageLink} aria-label={name}>
-          {image ? (
-            <OrionplaceImage
-              src={image}
-              alt={name}
-              width={88}
-              height={88}
-              className={styles.image}
-            />
-          ) : null}
-        </a>
-        <div className={styles.content}>
-          <a className={styles.name} href={href}>{name}</a>
-          <p className={styles.price}>
-            {formatCurrency(
-              price?.[currencyId]?.transform_value,
-              currency,
-              locale,
-            )}
-          </p>
-          {shipment || unavailable ? (
-            <p className={styles.quantityText}>
-              {labels.quantity}: {quantity}
-            </p>
-          ) : (
-            <form className={styles.quantityForm} onSubmit={save}>
-              <label>
-                <span>{labels.quantity} <b aria-hidden="true">*</b></span>
-                <input
-                  value={quantity}
-                  type="number"
-                  min={1}
-                  step={1}
-                  required
-                  disabled={busy}
-                  onChange={(event) => {
-                    edited.current = true;
-                    setQuantity(
-                      event.target.value === ''
-                        ? ''
-                        : event.target.valueAsNumber,
-                    );
-                  }}
-                />
-              </label>
-              <button type="submit" disabled={busy}>{common.save}</button>
-            </form>
-          )}
-          {shipment || product.cart_counts?.cart_id ? (
-            <button
-              type="button"
-              className={styles.remove}
-              disabled={busy}
-              onClick={remove}
-            >
-              {labels.remove}
-            </button>
-          ) : null}
-        </div>
-      </div>
-
-      {options.length ? (
-        <ul
-          className={styles.options}
-          aria-label={`${labels.options}: ${name}`}
-          data-cart-item-options
-        >
-          {options.map((group) => (
-            <li key={group.id}>
-              <CartItemOptions
-                productHref={(id) => productHref(id, locale)}
-                {...optionProps}
-                group={group}
-                disabled={busy || optionProps?.disabled}
-                pending={pending || optionProps?.pending}
-              />
-            </li>
-          ))}
-        </ul>
-      ) : null}
-      {error || taskError ? (
-        <p className={styles.error} role="alert">{error || taskError}</p>
-      ) : null}
-    </article>
-  );
-}

package/templates/components/orionplace/cart/CartPreview.README.md

@@ -1,99 +0,0 @@
-# CartPreview · React
-
-## English
-
-Compact cart contents from `ICartPreviewState`, shown as a dropdown below the
-header's cart button.
-
-## Contract and dependencies
-
-The storefront shell renders it through `renderCartPreview` of
-`StorefrontHeader`, which places it below the cart button and right-aligns it
-with the cart area. The header calls `onPreviewCart` when a mouse pointer rests
-on the cart area or keyboard focus enters it, and `onCloseCartPreview` shortly
-after both leave or at once on Escape. A tap on a touch screen calls
-`onSelectCart` instead, and the shell opens `/cart`.
-
-The shell requests `cart_guest_modal_get` once per opening and sets the header
-counter from `page_data.cart.c_cart_positions`. `state.pending`
-shows a localized loading status. `state.error` displays the supplied message
-and Retry calls `onRetry`. An empty successful result uses the shared cart
-empty state.
-
-Each `state.products` entry shows its localized name, first small image,
-`cart_counts.modal_quantity` and current-currency cart-item amount. The amount
-already covers that quantity. A lower `cart_item_price_after_promo` is shown
-beside the crossed-out `cart_item_price_no_discount`. The footer shows the sum
-of product quantities. Images reserve their width and height.
-
-Selecting a row calls `onSelectProduct` with the numeric product ID; Go to cart
-calls `onSelectCart`. The trash icon calls `onRemove` with the row's
-`cart_counts.cart_id` and stays disabled while that ID is in `state.removing`.
-The shell sends `cart_guest_remove_by_cart_item`; after a confirmed removal it
-drops the row, sets `c_cart_positions` from the response and clears the
-product's `cart_counts`. A failed removal keeps the row and sets
-`state.removeError`. After a removal the panel keeps its height and receives
-focus, so the preview stays open with the remaining items under the pointer.
-The component itself does not load or change cart data.
-
-Source is maintained in `components/orionplace/cart/CartPreview.tsx`; the
-physical interface is `interfaces/orionplace/cart/ICartModal.ts`.
-
-### Props
-
-| Prop                                            | Meaning                                                                                              |
-| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `state: ICartPreviewState`                      | Whether the preview is open and loading, an error, the products and the cart-item IDs being removed. |
-| `onRetry?: () => void`                          | Called when the visitor retries a failed loading request. The callback has no payload.               |
-| `onSelectProduct?: (productId: number) => void` | Called with the product ID when the visitor chooses a product row.                                   |
-| `onSelectCart?: () => void`                     | Called when the visitor selects Go to cart. The callback has no payload.                             |
-| `onRemove?: (cartItemId: number) => void`       | Called with the cart-item ID from `cart_counts.cart_id` when the visitor selects a row's trash icon. |
-
-## Русский
-
-Компонент показывает краткое содержимое корзины из `ICartPreviewState`
-в виде списка под кнопкой корзины в шапке.
-
-Оболочка магазина выводит его через `renderCartPreview` компонента
-`StorefrontHeader`: список появляется под кнопкой корзины и выравнивается по
-правому краю области корзины. Шапка вызывает `onPreviewCart`, когда указатель
-мыши задерживается на области корзины или туда переходит фокус клавиатуры, и
-`onCloseCartPreview` вскоре после того, как оба её покинули, или сразу по
-Escape. Касание на сенсорном экране вместо этого вызывает `onSelectCart`, и
-оболочка открывает `/cart`.
-
-При каждом открытии оболочка запрашивает `cart_guest_modal_get` и передаёт
-счётчику шапки `page_data.cart.c_cart_positions`. При
-`state.pending` показан локализованный статус загрузки. `state.error`
-показывает полученный текст, а «Повторить» вызывает `onRetry`. Пустой успешный
-результат использует общий вид пустой корзины.
-
-Для каждого элемента `state.products` показаны локализованное название, первое
-маленькое изображение, `cart_counts.modal_quantity` и сумма позиции в выбранной
-валюте. Сумма уже учитывает количество. Если
-`cart_item_price_after_promo` меньше `cart_item_price_no_discount`, исходная
-сумма показана зачёркнутой. Внизу показано общее количество товаров. У
-изображений зарезервированы ширина и высота.
-
-Выбор строки вызывает `onSelectProduct` с числовым ID товара, «Перейти в
-корзину» — `onSelectCart`. Значок корзины вызывает `onRemove` с
-`cart_counts.cart_id` строки и недоступен, пока этот ID есть в
-`state.removing`. Оболочка отправляет `cart_guest_remove_by_cart_item`; после
-подтверждённого удаления она убирает строку, берёт `c_cart_positions` из ответа
-и очищает `cart_counts` товара. При ошибке строка остаётся, а в
-`state.removeError` появляется текст. После удаления панель сохраняет высоту и
-получает фокус, поэтому краткая корзина остаётся открытой, а оставшиеся товары —
-под указателем. Сам компонент не загружает и не меняет данные корзины.
-
-Исходный файл: `components/orionplace/cart/CartPreview.tsx`; физический
-интерфейс: `interfaces/orionplace/cart/ICartModal.ts`.
-
-### Свойства
-
-| Свойство                                        | Назначение                                                                                           |
-| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `state: ICartPreviewState`                      | Открыта ли краткая корзина и идёт ли загрузка, ошибка, товары и ID удаляемых позиций.                |
-| `onRetry?: () => void`                          | Вызывается, когда покупатель повторяет неудачную загрузку. Обработчик не получает данные.            |
-| `onSelectProduct?: (productId: number) => void` | Вызывается с ID товара, когда покупатель выбирает строку товара.                                     |
-| `onSelectCart?: () => void`                     | Вызывается, когда покупатель нажимает «Перейти в корзину». Обработчик не получает данные.            |
-| `onRemove?: (cartItemId: number) => void`       | Вызывается с ID позиции из `cart_counts.cart_id`, когда покупатель нажимает значок корзины в строке. |

package/templates/components/orionplace/cart/CartPreview.module.css

@@ -1,225 +0,0 @@
-.root {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  z-index: 50;
-  box-sizing: border-box;
-  width: min(23.75rem, calc(100vw - 2rem));
-  padding-top: 0.5rem;
-  color: var(--orionplace-text);
-  font: inherit;
-  letter-spacing: normal;
-  text-align: left;
-  text-transform: none;
-}
-.panel {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  outline: none;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-}
-.root button {
-  color: inherit;
-  font: inherit;
-  font-weight: 400;
-  cursor: pointer;
-  outline: none;
-}
-.loading {
-  min-height: 6rem;
-  margin: 0;
-}
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-}
-.state {
-  display: grid;
-  gap: 0.75rem;
-  padding: 1rem;
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-}
-.error {
-  margin: 0;
-  padding: 0.75rem;
-  border: 1px solid var(--orionplace-danger);
-  color: var(--orionplace-danger);
-}
-.removeError {
-  margin: 0 1rem 0.75rem;
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-}
-.root .retry {
-  justify-self: start;
-  height: 2.5rem;
-  padding: 0 1.25rem;
-  border: 1px solid var(--orionplace-text);
-  border-radius: 0;
-  background: transparent;
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-.items {
-  max-height: min(21.5rem, 55vh);
-  margin: 0;
-  padding: 0;
-  overflow: auto;
-  list-style: none;
-}
-.row {
-  display: flex;
-  align-items: center;
-}
-.row + .row {
-  border-top: 1px solid var(--orionplace-border);
-}
-.item {
-  display: grid;
-  flex: 1;
-  min-width: 0;
-  grid-template-columns: 3rem minmax(0, 1fr);
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 0.5rem 0.75rem 1rem;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  text-align: left;
-}
-.image {
-  box-sizing: border-box;
-  width: 3rem;
-  height: 3rem;
-  background: var(--orionplace-surface);
-}
-.product {
-  display: grid;
-  min-width: 0;
-  gap: 0.25rem;
-}
-.name {
-  display: -webkit-box;
-  overflow: hidden;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-.details {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  column-gap: 0.5rem;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  font-variant-numeric: tabular-nums;
-}
-.price {
-  color: var(--orionplace-text);
-}
-.discounted {
-  color: var(--orionplace-danger);
-}
-.root .remove {
-  display: grid;
-  flex-shrink: 0;
-  width: 2.5rem;
-  height: 2.5rem;
-  margin-right: 0.5rem;
-  place-items: center;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: var(--orionplace-muted);
-}
-.remove svg {
-  width: 1.125rem;
-  height: 1.125rem;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.root .item:focus-visible,
-.root .retry:focus-visible {
-  background: var(--orionplace-hover);
-}
-@media (hover: hover) {
-  .root .item:hover,
-  .root .retry:hover {
-    background: var(--orionplace-hover);
-  }
-}
-.root .remove:focus-visible {
-  background: var(--orionplace-hover);
-  color: var(--orionplace-danger);
-}
-@media (hover: hover) {
-  .root .remove:hover {
-    background: var(--orionplace-hover);
-    color: var(--orionplace-danger);
-  }
-}
-.root .remove:disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-.footer {
-  display: grid;
-  margin-top: auto;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-.total {
-  display: flex;
-  justify-content: space-between;
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-.total span:last-child {
-  color: var(--orionplace-text);
-  font-variant-numeric: tabular-nums;
-}
-.root .next {
-  display: flex;
-  box-sizing: border-box;
-  width: 100%;
-  height: 2.75rem;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0 1.5rem;
-  border: 1px solid var(--orionplace-accent);
-  border-radius: 0;
-  background: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-.root .next:focus-visible {
-  opacity: 0.85;
-}
-@media (hover: hover) {
-  .root .next:hover {
-    opacity: 0.85;
-  }
-}