orionplace-react 0.1.0 → 0.2.0

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

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

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

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

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