orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,503 @@
+'use client';
+
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type FormEvent,
+} from 'react';
+import {
+  useOrionplaceProductsStore,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import type {
+  ICartOptionGroup,
+} from '@/interfaces/orionplace/cart/ICartData';
+import type { IProductSecondaryVariantRequest } from '@/interfaces/orionplace/products/IProductSecondaryVariantRequest';
+import {
+  cartOptionActiveRow,
+  cartOptionCards,
+  cartOptionGroupFilled,
+  cartOptionProducts,
+  type ICartOptionCard,
+  type ICartOptionRow,
+} from '@/lib/orionplace/cartOptions';
+import {
+  getAvailableNestedValueFromObject,
+  getAvailableValueFromObject,
+} from '@/lib/orionplace/presentation';
+import { formatCurrency } from '@/lib/orionplace/currency';
+import { cartLabels } from '@/lib/orionplace/cartLabels';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { productLabels } from '@/lib/orionplace/productLabels';
+import { ProductCard } from '@/components/orionplace/products/ProductCard';
+import styles from './CartItemOptions.module.css';
+import { apiErrorMessage } from '@/lib/orionplace/api';
+
+export type CartItemOptionAction =
+  | {
+      endpoint: 'cart_customer_option_first_set';
+      request: { quantity: number };
+      params: { delivery_option_item_id: number };
+    }
+  | {
+      endpoint: 'cart_customer_option_add_additional';
+      request: FormData;
+      params: { option_group_id: number };
+    }
+  | {
+      endpoint: 'cart_customer_option_cleanup_additional';
+      request: Record<string, never>;
+      params: { option_group_id: number };
+    };
+
+export interface CartItemOptionsProps {
+  group: ICartOptionGroup;
+  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;
+  // The page of an offered product; its picture and name link there.
+  productHref?: (productId: number) => string;
+  onChange?: (
+    action: CartItemOptionAction,
+  ) => Promise<unknown> | unknown;
+  onRequestSecondaryVariants?: (
+    request: IProductSecondaryVariantRequest,
+  ) => void;
+}
+
+export function CartItemOptions({
+  group,
+  disabled = false,
+  pending = false,
+  error = '',
+  showRequestErrors = true,
+  productHref,
+  onChange,
+  onRequestSecondaryVariants,
+}: CartItemOptionsProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const currencyId = useOrionplaceSelections((state) => state.currencyId);
+  const currency = useOrionplaceSelections(
+    (state) => state.init?.currencies[currencyId],
+  );
+  const productStore = useOrionplaceProductsStore();
+  const labels = cartLabels(locale);
+  const common = featureLabels(locale);
+  const productCopy = productLabels(locale);
+  const title = getAvailableValueFromObject(group.option_name, locale)
+    ?.option_group_display_name;
+  const [text, setText] = useState(group.option_text_data || '');
+  const [file, setFile] = useState<File>();
+  const [chosenRows, setChosenRows] = useState<Record<string, number>>({});
+  const [taskPending, setTaskPending] = useState(false);
+  const [taskError, setTaskError] = useState('');
+  const textEdited = useRef(false);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const busy = disabled || pending || taskPending;
+  const optionType = group.option_type?.option_type || '';
+  const isTextOption = ['text', 'textarea', 'file'].includes(optionType);
+  // A file group saves only a newly chosen file: the stored file stays until
+  // the customer clears it.
+  const isFileOption = optionType === 'file';
+  // The backend limits uploads by the domain setting cart_option_file_max_mb
+  // and answers a larger file with a field error; 0 means no limit.
+  const fileLimit = group.limits?.file_max_mb ?? 0;
+  const fileTooLarge =
+    !!file && fileLimit > 0 && file.size > fileLimit * 1024 * 1024;
+  const cards = useMemo(
+    () => isTextOption ? [] : cartOptionCards(group),
+    [group, isTextOption],
+  );
+  const choiceHint = isTextOption
+    ? ''
+    : group.option_type?.multiple_choices
+      ? labels.optionMultiple
+      : labels.optionSingle;
+  const missing = group.option_group_required &&
+    !cartOptionGroupFilled(group);
+  const offeredIds = cards.flatMap((card) => card.productIds);
+  const entries = cards.flatMap((card) => {
+    const row = cartOptionActiveRow(card, chosenRows[card.key]);
+    if (!row) {
+      return [];
+    }
+    const others = card.rows.filter((other) =>
+      other.option.id !== row.option.id && other.option.quantity > 0,
+    );
+    return [{ card, row, alsoSelected: alsoSelectedText(others) }];
+  });
+
+  useEffect(() => {
+    if (!textEdited.current) {
+      setText(group.option_text_data || '');
+    }
+    for (const product of cartOptionProducts(group)) {
+      const stored = productStore.getState().getProduct(product.id, 'products');
+      productStore.getState().setProduct({
+        ...product,
+        cart_counts: stored?.cart_counts ?? product.cart_counts ?? null,
+      }, 'products');
+    }
+  }, [group, productStore]);
+
+  function rowName(row: ICartOptionRow) {
+    return getAvailableNestedValueFromObject(
+      row.product.locale,
+      locale,
+      'product_name',
+    ) || `#${row.product.id}`;
+  }
+
+  function alsoSelectedText(rows: ICartOptionRow[]) {
+    return rows
+      .map((row) => `${rowName(row)} × ${row.option.quantity}`)
+      .join(', ');
+  }
+
+  function showVariantRow(
+    card: ICartOptionCard,
+    productId: number | null | undefined,
+  ) {
+    const row = card.rows.find((item) => item.product.id === productId);
+    if (row) {
+      setChosenRows((current) => ({
+        ...current,
+        [card.key]: row.option.id,
+      }));
+    }
+  }
+
+  function resetFile() {
+    setFile(undefined);
+    if (fileInput.current) {
+      fileInput.current.value = '';
+    }
+  }
+
+  async function change(
+    action: CartItemOptionAction,
+    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 setQuantity(row: ICartOptionRow, quantity: number) {
+    if (
+      !Number.isInteger(quantity) ||
+      quantity < 0 ||
+      quantity > row.maxQuantity
+    ) {
+      return;
+    }
+    void change({
+      endpoint: 'cart_customer_option_first_set',
+      request: { quantity },
+      params: { delivery_option_item_id: row.option.id },
+    });
+  }
+
+  function clear() {
+    void change({
+      endpoint: 'cart_customer_option_cleanup_additional',
+      request: {},
+      params: { option_group_id: group.id },
+    }, () => {
+      setText('');
+      textEdited.current = false;
+      resetFile();
+    });
+  }
+
+  function chooseFile(event: ChangeEvent<HTMLInputElement>) {
+    setFile(event.target.files?.[0]);
+  }
+
+  function save(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if ((isFileOption && !file) || fileTooLarge) {
+      return;
+    }
+    const body = new FormData();
+    body.append(
+      'data',
+      JSON.stringify(file ? {} : { option_text_data: text }),
+    );
+    if (file) {
+      body.append('option_file_data', file, file.name);
+    }
+    void change({
+      endpoint: 'cart_customer_option_add_additional',
+      request: body,
+      params: { option_group_id: group.id },
+    }, () => {
+      textEdited.current = false;
+      resetFile();
+    });
+  }
+
+  function rowTotal(row: ICartOptionRow) {
+    const amount = row.option.option_price
+      ?.options_price_after_promo[currencyId]?.transform_value;
+    return formatCurrency(amount, currency, locale);
+  }
+
+  return (
+    <details
+      className={styles.root}
+      data-feature-part="CartItemOptions"
+      data-option-state={
+        group.option_group_required ? (missing ? 'missing' : 'done') : undefined
+      }
+    >
+      <summary>
+        <span className={styles.title}>
+          <span className={styles.name}>{title || labels.options}</span>
+          {choiceHint ? <span className={styles.hint}>{choiceHint}</span> : null}
+          {missing ? (
+            <span className={styles.missing}>{labels.optionMissing}</span>
+          ) : null}
+        </span>
+        {group.option_group_required ? (
+          <span
+            className={styles.required}
+            data-state={missing ? 'missing' : 'done'}
+            data-cart-option-required
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d={missing ? 'M12 7v6M12 17h.01' : 'm5 12.5 4.5 4.5L19 7.5'} />
+            </svg>
+            {labels.optionRequired}
+          </span>
+        ) : null}
+      </summary>
+
+      {isTextOption ? (
+        <form className={styles.form} onSubmit={save}>
+          {optionType !== 'file' ? (
+            <label className={styles.field}>
+              <span>
+                {labels.optionText}
+                {group.option_group_required ? (
+                  <b aria-hidden="true">*</b>
+                ) : null}
+              </span>
+              <textarea
+                value={text}
+                disabled={busy}
+                required={group.option_group_required}
+                onChange={(event) => {
+                  textEdited.current = true;
+                  setText(event.target.value);
+                }}
+              />
+            </label>
+          ) : (
+            <label className={styles.field}>
+              <span>
+                {labels.optionFile}
+                {group.option_group_required && !group.option_file_data ? (
+                  <b aria-hidden="true">*</b>
+                ) : null}
+              </span>
+              <input
+                ref={fileInput}
+                type="file"
+                disabled={busy}
+                required={
+                  group.option_group_required && !group.option_file_data
+                }
+                onChange={chooseFile}
+              />
+              {fileLimit > 0 ? (
+                <span className={styles.hint}>
+                  {labels.optionFileLimit.replace('{size}', String(fileLimit))}
+                </span>
+              ) : null}
+              {group.option_file_data ? (
+                <span>
+                  {labels.selectedFile}:{' '}
+                  {group.option_file_data.split('/').pop()}
+                </span>
+              ) : null}
+              {fileTooLarge ? (
+                <span
+                  className={styles.error}
+                  role="alert"
+                >
+                  {labels.optionFileTooLarge.replace('{size}', String(fileLimit))}
+                </span>
+              ) : null}
+            </label>
+          )}
+          <div className={styles.actions}>
+            <button
+              type="submit"
+              className={`${styles.button} ${styles.primary}`.trim()}
+              disabled={busy || (isFileOption && !file) || fileTooLarge}
+            >
+              {common.save}
+            </button>
+            {group.option_text_data || group.option_file_data ? (
+              <button
+                type="button"
+                className={styles.button}
+                disabled={busy}
+                aria-label={labels.clearOptionHint}
+                onClick={clear}
+              >
+                {labels.clearOption}
+              </button>
+            ) : null}
+          </div>
+        </form>
+      ) : (
+        <ul className={styles.cards}>
+          {entries.map(({ card, row, alsoSelected }) => (
+            <li key={card.key} data-cart-option-card>
+              <ProductCard
+                productId={row.product.id}
+                initialProduct={row.product}
+                variantProductIds={offeredIds}
+                productHref={productHref}
+                disabled={busy}
+                purchaseActions={false}
+                compact
+                onSelectVariant={({ variant }) =>
+                  showVariantRow(card, variant.reload_product)
+                }
+                onSelectSecondaryVariant={({ variant }) =>
+                  showVariantRow(card, variant.product.id)
+                }
+                onRequestSecondaryVariants={onRequestSecondaryVariants}
+                renderFooter={() => (
+                  <OptionControls
+                    row={row}
+                    rowName={rowName(row)}
+                    total={rowTotal(row)}
+                    alsoSelected={alsoSelected}
+                    disabled={busy}
+                    onQuantity={(quantity) => setQuantity(row, quantity)}
+                  />
+                )}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+      {error || taskError ? (
+        <p className={styles.error} role="alert">{error || taskError}</p>
+      ) : null}
+    </details>
+  );
+}
+
+function OptionControls({
+  row,
+  rowName,
+  total,
+  alsoSelected,
+  disabled,
+  onQuantity,
+}: {
+  row: ICartOptionRow;
+  rowName: string;
+  total: string;
+  alsoSelected: string;
+  disabled: boolean;
+  onQuantity: (quantity: number) => void;
+}) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const labels = cartLabels(locale);
+  const productCopy = productLabels(locale);
+
+  return (
+    <div className={styles.controls}>
+      {row.option.quantity > 0 ? (
+        <div
+          className={styles.quantity}
+          role="group"
+          aria-label={productCopy.quantity}
+          data-cart-option-quantity
+        >
+          <button
+            type="button"
+            disabled={disabled}
+            aria-label={
+              row.option.quantity === 1
+                ? labels.remove
+                : productCopy.decrease
+            }
+            data-cart-option-decrease
+            onClick={() => onQuantity(row.option.quantity - 1)}
+          >
+            −
+          </button>
+          <span aria-live="polite" aria-atomic="true">
+            {row.option.quantity}
+          </span>
+          <button
+            type="button"
+            disabled={disabled || row.option.quantity >= row.maxQuantity}
+            aria-label={productCopy.increase}
+            data-cart-option-increase
+            onClick={() => onQuantity(row.option.quantity + 1)}
+          >
+            +
+          </button>
+        </div>
+      ) : row.maxQuantity > 0 ? (
+        <button
+          type="button"
+          className={styles.add}
+          disabled={disabled}
+          aria-label={`${productCopy.add}: ${rowName}`}
+          data-cart-option-add
+          onClick={() => onQuantity(1)}
+        >
+          {productCopy.add}
+        </button>
+      ) : (
+        <p className={styles.note} data-cart-option-unavailable>
+          {labels.optionUnavailable}
+        </p>
+      )}
+      {row.option.quantity > 0 ? (
+        <p className={styles.total} data-cart-option-total>
+          {labels.total}: {total}
+        </p>
+      ) : null}
+      {row.maxQuantity > 0 && row.option.quantity >= row.maxQuantity ? (
+        <p className={styles.note} data-cart-option-limit>
+          {labels.optionLimit.replace('{count}', String(row.maxQuantity))}
+        </p>
+      ) : null}
+      {alsoSelected ? (
+        <p className={styles.note} data-cart-option-other>
+          {labels.optionSelected}: {alsoSelected}
+        </p>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,138 @@
+# CartLineItem · React
+
+## English
+
+One cart or checkout item with its image, name, price, quantity and options.
+
+## Contract and dependencies
+
+`product` accepts the ordinary `IProduct` returned in the cart step or an
+`ICartCheckoutProduct` returned inside a checkout shipment. Both forms render
+their localized name and first small image in a real product link. The image
+has fixed intrinsic dimensions. `productHref` can replace the default localized
+`/product/{id}` destination.
+
+For an ordinary cart item, the editable quantity starts from
+`product.cart_counts.quantity`. Save calls `onChange` with
+`cart_guest_first_set` and `{ product: product.id, quantity }`. Remove calls
+`cart_guest_remove_by_cart_item` with
+`params.cart_item_id = product.cart_counts.cart_id`. An unsaved quantity stays
+in the input during unrelated product updates. A rejected action preserves it
+and displays the error.
+
+An `ICartCheckoutProduct` shows the read-only `dlf_count` and
+`dlf_prices.total_price_after_promo`. Remove calls
+`cart_customer_remove_by_dlf_item` with `params.dlf_item_id = dlf_id`.
+`unavailable` also makes an ordinary product quantity read-only.
+
+Each `option_group` is rendered below its checkout item through
+`CartItemOptions`; `optionProps` supplies its action handlers and secondary
+variant loader. The list has an accessible name containing the item name.
+`disabled` and `pending` block line and option controls; `error` displays a
+parent request error. A rejected action is shown under the line unless
+`showRequestErrors` is `false`, as inside `StorefrontCart`, which shows it
+once above the lines.
+
+Source is maintained in `components/orionplace/cart/CartLineItem.tsx`; its
+physical interfaces are in `interfaces/orionplace/products/IProduct.ts` and
+`interfaces/orionplace/cart/ICartData.ts`.
+
+### Props
+
+| Prop                                                                     | Meaning                                                                                  |
+| ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
+| `product: IProduct \| ICartCheckoutProduct`                              | Product or checkout item displayed by the component.                                     |
+| `unavailable?: boolean`                                                  | Makes an unavailable item read-only and prevents its actions.                            |
+| `disabled?: boolean`                                                     | Disables the component controls and prevents new actions.                                |
+| `pending?: boolean`                                                      | Shows the loading state and blocks duplicate actions.                                    |
+| `error?: string`                                                         | Customer-visible error for the component request; omit it when no request failed.        |
+| `showRequestErrors?: boolean`                                            | Shows a rejected action inside the component (default `true`). `StorefrontCart` passes `false`: it shows the error above the lines.|
+| `productHref?: (productId: number, locale: string) => string`            | Builds the product destination from the callback arguments.                              |
+| `optionProps?: Omit<CartItemOptionsProps, "group">`                      | Props forwarded to the option child component.                                           |
+| `onChange?: (action: CartLineItemAction) => Promise<unknown> \| unknown` | Called when the visitor confirms a new value. The callback payload is shown in its type. |
+
+## Русский
+
+Компонент показывает один товар корзины или оформления заказа: изображение,
+название, цену, количество и дополнения.
+
+`product` принимает обычный `IProduct` из шага корзины или
+`ICartCheckoutProduct` из отправления на шаге оформления. В обоих случаях
+локализованное название и первое маленькое изображение находятся внутри обычной
+ссылки на товар. У изображения заданы физические размеры. `productHref` заменяет
+стандартный локализованный путь `/product/{id}`.
+
+Для обычного товара редактируемое количество начинается со значения
+`product.cart_counts.quantity`. Сохранение передаёт в `onChange` действие
+`cart_guest_first_set` и `{ product: product.id, quantity }`. Удаление передаёт
+`cart_guest_remove_by_cart_item` и
+`params.cart_item_id = product.cart_counts.cart_id`. Несохранённое количество
+не теряется при постороннем обновлении товара. При отклонённом действии значение
+остаётся в поле, а компонент показывает ошибку.
+
+Для `ICartCheckoutProduct` показаны `dlf_count` без редактирования и сумма
+`dlf_prices.total_price_after_promo`. Удаление передаёт
+`cart_customer_remove_by_dlf_item` и `params.dlf_item_id = dlf_id`. Значение
+`unavailable` также делает количество обычного товара доступным только для
+чтения.
+
+Каждая группа `option_group` выводится под товаром через `CartItemOptions`;
+`optionProps` передаёт обработчики действий и загрузчик дополнительных
+вариантов. Доступное имя списка содержит название товара. `disabled` и `pending`
+блокируют элементы товара и его дополнений, а `error` показывает ошибку
+родительского запроса. Ошибка отклонённого действия выводится под товаром,
+если `showRequestErrors` не `false`; внутри `StorefrontCart` она показывается
+один раз над товарами.
+
+Исходный файл: `components/orionplace/cart/CartLineItem.tsx`; физические
+интерфейсы: `interfaces/orionplace/products/IProduct.ts` и
+`interfaces/orionplace/cart/ICartData.ts`.
+
+### Свойства
+
+| Свойство                                                                 | Назначение                                                                                       |
+| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
+| `product: IProduct \| ICartCheckoutProduct`                              | Товар или позиция оформления, которую показывает компонент.                                      |
+| `unavailable?: boolean`                                                  | Делает недоступную позицию доступной только для чтения и блокирует её действия.                  |
+| `disabled?: boolean`                                                     | Блокирует элементы компонента и новые действия.                                                  |
+| `pending?: boolean`                                                      | Показывает загрузку и блокирует повторные действия.                                              |
+| `error?: string`                                                         | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.             |
+| `showRequestErrors?: boolean`                                            | Показывать ошибку отклонённого действия в самом компоненте (по умолчанию `true`). `StorefrontCart` передаёт `false`: ошибку он показывает над товарами.|
+| `productHref?: (productId: number, locale: string) => string`            | Строит адрес ссылки товара из аргументов обработчика.                                            |
+| `optionProps?: Omit<CartItemOptionsProps, "group">`                      | Свойства, передаваемые дочернему компоненту дополнений.                                          |
+| `onChange?: (action: CartLineItemAction) => Promise<unknown> \| unknown` | Вызывается, когда покупатель подтверждает новое значение. Данные обработчика указаны в его типе. |
+## Response fields and application actions
+
+The following tables describe the response and the supplied composition’s follow-up actions. The framework-specific props and events above identify which work belongs to the component and which belongs to its parent.
+
+### English
+
+### Cart and checkout values
+
+`product` — In CART, page_data.cart_data contains products. In CHECKOUT, each shipment in page_data.cart_data contains product_items. One product may be split between shipments; each shipment item has its own ID and quantity.
+
+| Field or condition | Meaning and application action |
+| --- | --- |
+| CART quantity and total | Use `product.cart_counts.quantity` and `product.cart_counts.cart_item_price_after_promo`. The price is a currency-ID dictionary; display the selected currency’s `transform_value`. |
+| CHECKOUT quantity and total | Use `product.dlf_count` and `product.dlf_prices.total_price_after_promo`. This total includes the shipment item’s options. Quantity is read-only here. |
+| Save quantity | `cart_guest_first_set` receives `product: product.id` and the new total `quantity`. The unsaved quantity remains during unrelated refreshes; confirmed saving allows the next cart response to replace it. |
+| Remove in CART | Pass `product.cart_counts.cart_id` as `cart_item_id` to `cart_guest_remove_by_cart_item`. |
+| Remove in CHECKOUT | Pass `product.dlf_id` as `dlf_item_id` to `cart_customer_remove_by_dlf_item`. Reload all cart shipments and totals after confirmation. |
+| Unavailable or incomplete data | `unavailable` hides quantity editing. If shipment/cart total data is absent, the displayed amount falls back to `product.product_price_dict`; it does not establish a confirmed checkout total. |
+
+### Русский
+
+### Значения в корзине и при оформлении
+
+`product` — В CART page_data.cart_data содержит товары. В CHECKOUT каждая отправка в page_data.cart_data содержит product_items. Товар может быть разделён между отправками; у каждой позиции отправки свои ID и количество.
+
+| Поле или условие | Значение и действие приложения |
+| --- | --- |
+| Количество и сумма в CART | Используются `product.cart_counts.quantity` и `product.cart_counts.cart_item_price_after_promo`. Цена — словарь по ID валюты; выводится `transform_value` выбранной валюты. |
+| Количество и сумма в CHECKOUT | Используются `product.dlf_count` и `product.dlf_prices.total_price_after_promo`. Сумма включает опции позиции отправки. Количество здесь доступно только для чтения. |
+| Сохранение количества | `cart_guest_first_set` получает `product: product.id` и новое полное `quantity`. Несохранённое количество сохраняется при других обновлениях; после подтверждения сохранения его заменяет следующий ответ корзины. |
+| Удаление в CART | Передайте `product.cart_counts.cart_id` как `cart_item_id` в `cart_guest_remove_by_cart_item`. |
+| Удаление в CHECKOUT | Передайте `product.dlf_id` как `dlf_item_id` в `cart_customer_remove_by_dlf_item`. После подтверждения загрузите все отправки и суммы корзины заново. |
+| Недоступные или неполные данные | `unavailable` скрывает редактирование количества. Если суммы позиции отправки/корзины отсутствуют, выводится `product.product_price_dict`; эта цена не подтверждает итог оформления. |
+
+[English guide](https://orionmarket.place/en/sandbox/components/react/cart-line-item) · [Русский](https://orionmarket.place/ru/sandbox/components/react/cart-line-item)