orionplace-react 0.7.8 → 0.8.0

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

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

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