orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/payments/PaymentPanel.README.md

@@ -1,114 +0,0 @@
-# PaymentPanel · React
-
-## English
-
-Opens a supplied payment link and lets the customer ask the parent to check the
-payment status.
-
-## Contract and dependencies
-
-`payment.link` must be an absolute HTTP or HTTPS address. When
-`payment.link_type` is `EPaymentLinkType.IFRAME`, the component opens that
-address in a titled frame inside the panel. Other accepted link types produce a
-safe link that opens the payment page in a new tab. An invalid or unsupported
-address shows the localized request-failed message and is never placed in an
-`iframe` or link.
-
-Check calls `onRefresh`. The parent should reload the payment or order status
-and pass the resulting state back to the component. While `pending` is `true`,
-Check is disabled and the panel exposes its busy state. Close remains available
-and calls `onClose`; closing the panel does not mark the payment as completed.
-
-The component makes no API request and performs no browser work during server
-rendering. It is shared by cart, order and wallet flows. Source is maintained in
-`components/orionplace/payments/PaymentPanel.tsx`; its physical input interface
-is `interfaces/orionplace/shared/IStorefrontControls.ts`.
-
-### Props
-
-| Prop                          | Meaning                                                                          |
-| ----------------------------- | -------------------------------------------------------------------------------- |
-| `payment: IStorefrontPayment` | Payment state containing the link, display mode and current status.              |
-| `pending?: boolean`           | Shows the loading state and blocks duplicate actions.                            |
-| `onRefresh?: () => void`      | Called when the visible data must be refreshed. The callback has no payload.     |
-| `onClose?: () => void`        | Called when the visitor closes the panel or dialog. The callback has no payload. |
-
-## Русский
-
-Компонент открывает полученную ссылку на оплату и позволяет покупателю
-попросить родительский раздел проверить состояние платежа.
-
-`payment.link` должен содержать абсолютный HTTP- или HTTPS-адрес. Если
-`payment.link_type` равен `EPaymentLinkType.IFRAME`, адрес открывается во
-встроенном окне с доступным названием. Для другого допустимого типа компонент
-показывает безопасную ссылку, которая открывает страницу оплаты в новой
-вкладке. При недопустимом адресе показано локализованное сообщение об ошибке, а
-сам адрес не попадает в `iframe` или ссылку.
-
-Кнопка «Проверить» вызывает `onRefresh`. Родитель должен заново получить
-состояние платежа или заказа и передать результат компоненту. При
-`pending = true` эта кнопка недоступна, а панель сообщает о занятости. Кнопка
-«Закрыть» остаётся доступной и вызывает `onClose`; закрытие панели само по себе
-не подтверждает оплату.
-
-Компонент не выполняет API-запросы и не обращается к браузеру во время
-серверного рендеринга. Его используют разделы корзины, заказов и кошелька.
-Исходный файл: `components/orionplace/payments/PaymentPanel.tsx`; физический
-интерфейс входных данных:
-`interfaces/orionplace/shared/IStorefrontControls.ts`.
-
-### Свойства
-
-| Свойство                      | Назначение                                                                               |
-| ----------------------------- | ---------------------------------------------------------------------------------------- |
-| `payment: IStorefrontPayment` | Состояние оплаты со ссылкой, режимом показа и текущим статусом.                          |
-| `pending?: boolean`           | Показывает загрузку и блокирует повторные действия.                                      |
-| `onRefresh?: () => void`      | Вызывается, когда нужно обновить видимые данные. Обработчик не получает данные.          |
-| `onClose?: () => void`        | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные. |
-## 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
-
-### Payment response cases
-
-`payment` — The panel accepts HTTP/HTTPS URLs. The parent decides whether a payment response needs an external page.
-
-| Field or condition | Meaning and application action |
-| --- | --- |
-| Accepted `link`, `link_type: EPaymentLinkType.IFRAME` | Display the payment URL in an iframe. |
-| Accepted `link`, another `link_type` | Display a link opening the payment page in a new tab. |
-| Empty or rejected `link` passed to the panel | Display failure text. Check the response before opening the panel. |
-| Successful order response with empty `link` and null `link_type` | No external payment page is supplied. The parent continues from the refreshed order state; an empty link by itself does not establish payment success or failure. |
-
-### Application actions
-
-| Field or condition | Meaning and application action |
-| --- | --- |
-| `pending` | Disables the status-check button while its request is running. The close control remains available. |
-| `onRefresh` | Calls the callback without arguments when the customer checks status. The wallet reloads invoices and profile balance; the order page reloads `profile_orders_get`. |
-| `onClose` | Calls the callback without arguments. The supplied parent hides the panel and refreshes the same wallet or order data. Closing changes panel visibility, while the returned invoice/order status determines payment completion. |
-
-### Русский
-
-### Варианты ответа оплаты
-
-`payment` — Панель принимает HTTP/HTTPS-ссылки. Родитель определяет, нужна ли внешняя страница по полученному ответу.
-
-| Поле или условие | Значение и действие приложения |
-| --- | --- |
-| Допустимый `link`, `link_type: EPaymentLinkType.IFRAME` | Страница оплаты открывается в iframe. |
-| Допустимый `link`, другой `link_type` | Выводится ссылка, открывающая страницу оплаты в новой вкладке. |
-| В панель передан пустой или отклонённый `link` | Выводится сообщение об ошибке. Проверьте ответ до открытия панели. |
-| Успешный ответ заказа с пустым `link` и null в `link_type` | Внешняя страница оплаты не предоставлена. Родитель продолжает по обновлённому состоянию заказа; одна пустая ссылка не подтверждает успех или ошибку оплаты. |
-
-### Действия приложения
-
-| Поле или условие | Значение и действие приложения |
-| --- | --- |
-| `pending` | Отключает кнопку проверки состояния на время запроса. Закрытие остаётся доступным. |
-| `onRefresh` | Событие без данных при проверке состояния. Кошелёк обновляет платежи и баланс профиля; страница заказов загружает `profile_orders_get`. |
-| `onClose` | Событие без данных. Готовый родитель скрывает панель и обновляет те же данные кошелька или заказа. Закрытие меняет видимость панели, а завершение оплаты определяется полученным состоянием платежа/заказа. |
-
-[English guide](https://orionmarket.place/en/sandbox/components/react/payment-panel) · [Русский](https://orionmarket.place/ru/sandbox/components/react/payment-panel)

package/templates/components/orionplace/payments/PaymentPanel.module.css

@@ -1,134 +0,0 @@
-.panel {
-  display: grid;
-  box-sizing: border-box;
-  gap: 1.25rem;
-  padding: 1.25rem;
-  border: 1px solid var(--orionplace-border);
-  color: var(--orionplace-text);
-  background: var(--orionplace-surface);
-  font: inherit;
-}
-
-.heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.heading h2 {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.frame {
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  height: 32rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-}
-
-.button,
-.textButton {
-  box-sizing: border-box;
-  color: inherit;
-  background: transparent;
-  font: inherit;
-  cursor: pointer;
-  outline: none;
-}
-
-.button {
-  display: inline-flex;
-  width: fit-content;
-  min-height: 2.75rem;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0 1.5rem;
-  border: 1px solid var(--orionplace-text);
-  border-radius: 0;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  text-decoration: none;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.button:focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .button:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.button:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-.primary {
-  border-color: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-  background: var(--orionplace-accent);
-}
-
-.primary:focus-visible {
-  background: var(--orionplace-accent);
-  opacity: 0.85;
-}
-
-@media (hover: hover) {
-  .primary:hover {
-    background: var(--orionplace-accent);
-    opacity: 0.85;
-  }
-}
-
-.textButton {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0 0 0.125rem;
-  border: 0;
-  border-bottom: 1px solid currentColor;
-  border-radius: 0;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.textButton:focus-visible {
-  opacity: 0.7;
-}
-
-@media (hover: hover) {
-  .textButton:hover {
-    opacity: 0.7;
-  }
-}
-
-.failed {
-  margin: 0;
-  color: var(--orionplace-danger);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-/* The page around the panel, not the screen, as in the other packages. */
-@container (min-width: 592px) {
-  .panel {
-    padding: 1.5rem;
-  }
-}

package/templates/components/orionplace/payments/PaymentPanel.tsx

@@ -1,76 +0,0 @@
-'use client';
-
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { IStorefrontPayment } from '@/interfaces/orionplace/shared/IStorefrontControls';
-import { EPaymentLinkType } from '@/interfaces/orionplace/payments/IInvoice';
-import { paymentUrl } from '@/lib/orionplace/featureData';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import styles from './PaymentPanel.module.css';
-
-export interface PaymentPanelProps {
-  payment: IStorefrontPayment;
-  pending?: boolean;
-  onRefresh?: () => void;
-  onClose?: () => void;
-}
-
-export function PaymentPanel({
-  payment,
-  pending = false,
-  onRefresh,
-  onClose,
-}: PaymentPanelProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = featureLabels(locale);
-  const url = paymentUrl(payment.link);
-  const embedded = url && payment.link_type === EPaymentLinkType.IFRAME;
-
-  return (
-    <section
-      className={styles.panel}
-      aria-busy={pending}
-      data-feature-part="PaymentPanel"
-    >
-      <header className={styles.heading}>
-        <h2>{labels.wallet.paymentTitle}</h2>
-        <button type="button" className={styles.textButton} onClick={() => onClose?.()}>
-          {labels.close}
-        </button>
-      </header>
-
-      {embedded ? (
-        <iframe
-          src={url}
-          title={labels.wallet.paymentTitle}
-          className={styles.frame}
-          referrerPolicy="strict-origin-when-cross-origin"
-          data-payment-frame
-        />
-      ) : url ? (
-        <a
-          href={url}
-          className={`${styles.button} ${styles.primary}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          data-payment-link
-        >
-          {labels.wallet.pay}
-          <span aria-hidden="true">↗</span>
-        </a>
-      ) : (
-        <p className={styles.failed} role="alert" data-payment-invalid>
-          {labels.failed}
-        </p>
-      )}
-
-      <button
-        type="button"
-        className={styles.button}
-        disabled={pending}
-        onClick={() => onRefresh?.()}
-      >
-        {labels.wallet.check}
-      </button>
-    </section>
-  );
-}

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

@@ -1,62 +0,0 @@
-# HoverImageViewer
-
-## English
-
-Shows the small product images from the React product store, using the full
-images when no small images are available. `productId` identifies the
-product; `collection` is `products` by default or `featured`.
-`label` names each image control. `disabled` prevents selection and
-`className` adds presentation classes. Selecting the main image or an indicator
-calls `onSelect(image)` with that image URL.
-
-The first image is present in server-rendered HTML and uses browser lazy
-loading. Secondary image elements are not rendered until the visitor
-hovers or focuses the viewer. At that point their requests begin for that
-product. Moving across the main image or focusing an indicator changes the
-preview; a sideways swipe on a touch screen steps to the next or previous
-photo; leaving the viewer returns to the first image. A newly selected
-product resets the preview and its secondary-image loading state.
-`ProductCard` has the same photo switching built in, without the dot buttons.
-
-### Props
-
-| Prop                                       | Meaning                                                                                                  |
-| ------------------------------------------ | -------------------------------------------------------------------------------------------------------- |
-| `productId: number`                        | ID of the product handled by HoverImageViewer.                                                           |
-| `collection?: OrionplaceProductCollection` | Product-store collection used to resolve the supplied product ID.                                        |
-| `label?: string`                           | Visible or accessible name for the component’s main control or region.                                   |
-| `disabled?: boolean`                       | Disables the component controls and prevents new actions.                                                |
-| `className?: string`                       | Additional CSS class for the component root.                                                             |
-| `onSelect?: (image: string) => void`       | Called when the visitor chooses the component’s primary item. The callback payload is shown in its type. |
-
-## Русский
-
-Показывает небольшие изображения товара из React-хранилища товаров. Если
-их нет, использует полноразмерные изображения. `productId` задаёт товар;
-`collection` по умолчанию равно `products`,
-для подборки используйте `featured`. `label` задаёт название кнопок
-изображений, `disabled` запрещает выбор, а `className` добавляет классы
-оформления. Выбор основной фотографии или указателя вызывает
-`onSelect(image)` с адресом выбранного изображения.
-
-Первое изображение есть в HTML ответа сервера и загружается браузером
-по мере приближения к экрану. Элементы остальных изображений не
-появляются, пока посетитель не наведёт указатель на просмотрщик или не
-перейдёт к нему с клавиатуры. После этого начинается загрузка фотографий
-этого товара. Движение указателя по фотографии и фокус на указателе
-меняют показанное изображение, движение пальца влево или вправо на
-сенсорном экране листает фотографии; уход с просмотрщика возвращает первое.
-После смены товара выбор и подготовка дополнительных изображений
-начинаются заново. В `ProductCard` такое же переключение фотографий
-встроено, без кнопок-точек.
-
-### Свойства
-
-| Свойство                                   | Назначение                                                                                                |
-| ------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
-| `productId: number`                        | ID товара, с которым работает HoverImageViewer.                                                           |
-| `collection?: OrionplaceProductCollection` | Коллекция store товаров, в которой компонент ищет переданный ID товара.                                   |
-| `label?: string`                           | Видимое или доступное название основного элемента компонента.                                             |
-| `disabled?: boolean`                       | Блокирует элементы компонента и новые действия.                                                           |
-| `className?: string`                       | Дополнительный CSS-класс корневого элемента.                                                              |
-| `onSelect?: (image: string) => void`       | Вызывается, когда покупатель выбирает основной элемент компонента. Данные обработчика указаны в его типе. |

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

@@ -1,88 +0,0 @@
-.root {
-  width: 100%;
-  max-width: 176px;
-}
-
-.viewport {
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  width: 100%;
-  aspect-ratio: 3 / 4;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  outline: none;
-  transition: opacity 150ms;
-}
-
-/* Sideways moves on several photos switch the photo. */
-.viewport[data-product-photo-swipe] { touch-action: pan-y; }
-@media (hover: hover) {
-  .viewport:hover {
-    opacity: 0.85;
-  }
-}
-.viewport:focus-visible { opacity: 0.7; }
-
-.image {
-  position: absolute;
-  inset: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.active { opacity: 1; visibility: visible; }
-
-.controls {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 4px;
-  padding-top: 8px;
-}
-
-.control {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  outline: none;
-}
-
-.control:focus-visible { background: var(--orionplace-hover); }
-
-@media (hover: hover) {
-  .control:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.marker {
-  display: block;
-  width: 12px;
-  height: 2px;
-  background: var(--orionplace-border);
-  transition: width 150ms, background-color 150ms;
-}
-
-.markerActive {
-  width: 20px;
-  background: var(--orionplace-accent);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .viewport,
-  .marker { transition: none; }
-}

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

@@ -1,179 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import type { MouseEvent, TouchEvent } from 'react';
-import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import {
-  productPhotoAfterSwipe,
-  productPhotoAtPointer,
-  productPhotos,
-} from '@/lib/orionplace/productPhotos';
-import styles from './HoverImageViewer.module.css';
-
-export interface HoverImageViewerProps {
-  productId: number;
-  collection?: OrionplaceProductCollection;
-  label?: string;
-  disabled?: boolean;
-  className?: string;
-  onSelect?: (image: string) => void;
-}
-
-export function HoverImageViewer({
-  productId,
-  collection = 'products',
-  label = 'Image',
-  disabled = false,
-  className = '',
-  onSelect,
-}: HoverImageViewerProps) {
-  const product = useOrionplaceProduct(productId, collection);
-  // Small photos, or full-size ones when the product has no small photos.
-  const images = productPhotos(product?.images);
-  const imageKey = images.join('\u0000');
-  const viewport = useRef<HTMLButtonElement>(null);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [primed, setPrimed] = useState(false);
-  const swipeStart = useRef<{ x: number; y: number } | undefined>(undefined);
-  const swipedAt = useRef(0);
-
-  useEffect(() => {
-    setActiveIndex(0);
-    setPrimed(false);
-  }, [productId, collection, imageKey]);
-
-  if (images.length === 0) {
-    return null;
-  }
-
-  const visibleIndex = Math.min(activeIndex, images.length - 1);
-
-  function previewImage(event: MouseEvent<HTMLButtonElement>) {
-    setActiveIndex(
-      productPhotoAtPointer(
-        event.clientX,
-        event.currentTarget.getBoundingClientRect(),
-        images.length,
-      ),
-    );
-  }
-
-  // A sideways swipe on a touch screen steps to the next or previous photo,
-  // as in ProductCard.
-  function startSwipe(event: TouchEvent<HTMLButtonElement>) {
-    const touch = event.touches[0];
-    setPrimed(true);
-    swipeStart.current =
-      touch && event.touches.length === 1
-        ? { x: touch.clientX, y: touch.clientY }
-        : undefined;
-  }
-
-  function endSwipe(event: TouchEvent<HTMLButtonElement>) {
-    const touch = event.changedTouches[0];
-    const start = swipeStart.current;
-    swipeStart.current = undefined;
-    if (!start || !touch) {
-      return;
-    }
-
-    const next = productPhotoAfterSwipe(
-      visibleIndex,
-      images.length,
-      touch.clientX - start.x,
-      touch.clientY - start.y,
-    );
-    if (next !== visibleIndex) {
-      setActiveIndex(next);
-      swipedAt.current = Date.now();
-    }
-  }
-
-  function selectImage(index: number) {
-    const image = images[index];
-    // The click a browser may send after a swipe does not choose the photo.
-    if (disabled || Date.now() - swipedAt.current < 500) {
-      return;
-    }
-    if (image) {
-      setActiveIndex(index);
-      onSelect?.(image);
-    }
-  }
-
-  return (
-    <div
-      className={`${styles.root} ${className}`.trim()}
-      data-feature-part="HoverImageViewer"
-      data-product-id={productId}
-      data-gallery-controls={images.length > 1 ? 'true' : undefined}
-      onPointerEnter={() => setPrimed(true)}
-      onFocusCapture={() => setPrimed(true)}
-      onMouseLeave={() => setActiveIndex(0)}
-    >
-      <button
-        ref={viewport}
-        type="button"
-        disabled={disabled}
-        aria-label={`${label} ${visibleIndex + 1}`}
-        className={styles.viewport}
-        data-product-image-viewport
-        data-product-photo-swipe={images.length > 1 || undefined}
-        onMouseMove={previewImage}
-        onTouchStart={startSwipe}
-        onTouchEnd={endSwipe}
-        onFocus={() => setPrimed(true)}
-        onClick={() => selectImage(visibleIndex)}
-      >
-        {images.map((image, index) => {
-          if (index > 0 && !primed && index !== visibleIndex) {
-            return null;
-          }
-
-          return (
-            <OrionplaceImage
-              key={`${index}:${image}`}
-              src={image}
-              alt={`${label} ${index + 1}`}
-              width={3}
-              height={4}
-              ariaHidden={index !== visibleIndex}
-              loading={index === 0 ? 'lazy' : 'eager'}
-              className={`${styles.image} ${index === visibleIndex ? styles.active : ''}`}
-            />
-          );
-        })}
-      </button>
-      {images.length > 1 && (
-        <div
-          className={styles.controls}
-          data-product-image-controls
-        >
-          {images.map((image, index) => (
-            <button
-              key={`${index}:${image}`}
-              type="button"
-              disabled={disabled}
-              aria-label={`${label} ${index + 1}`}
-              aria-pressed={index === visibleIndex}
-              className={styles.control}
-              onMouseEnter={() => setActiveIndex(index)}
-              onFocus={() => {
-                setPrimed(true);
-                setActiveIndex(index);
-              }}
-              onClick={() => selectImage(index)}
-            >
-              <span
-                aria-hidden="true"
-                className={`${styles.marker} ${index === visibleIndex ? styles.markerActive : ''}`}
-              />
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}