orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/support/TicketImage.tsx

@@ -1,254 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useRef,
-  useState,
-  type MouseEvent,
-} from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { ticketLabels } from '@/lib/orionplace/ticketLabels';
-import {
-  createPageScrollLock,
-  restoreFocus,
-} from '@/lib/orionplace/modalWindow';
-import styles from './Support.module.css';
-
-export interface TicketImageLoadAction {
-  endpoint: 'customer_tickets_ticket_images';
-  request: Record<string, never>;
-  path: { image_id: number };
-  signal: AbortSignal;
-}
-
-export interface TicketImageProps {
-  imageId: number;
-  initialSource?: string;
-  loadOnMount?: boolean;
-  onLoad: (action: TicketImageLoadAction) => Promise<Blob> | Blob;
-}
-
-function ImageIcon() {
-  return (
-    <svg
-      className={styles.icon}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M4 4h16v16H4Z" />
-      <circle
-        cx="9"
-        cy="9"
-        r="2"
-      />
-      <path d="m20 15-5-5L4 20" />
-    </svg>
-  );
-}
-
-export function TicketImage({
-  imageId,
-  initialSource = '',
-  loadOnMount = true,
-  onLoad,
-}: TicketImageProps) {
-  const locale                = useOrionplaceSelections((state) => state.localeCode);
-  const labels                = ticketLabels(locale);
-  const common                = featureLabels(locale);
-  const active                = useRef<AbortController | undefined>(undefined);
-  const objectUrl             = useRef('');
-  const viewer                = useRef<HTMLDialogElement>(null);
-  const [pageScroll]          = useState(() => createPageScrollLock());
-  const opener                = useRef<HTMLElement | undefined>(undefined);
-  const callback              = useRef(onLoad);
-  callback.current            = onLoad;
-  const [source, setSource]   = useState(initialSource);
-  const [pending, setPending] = useState(loadOnMount && !initialSource);
-  // Any failure shows the localized `labels.imageError`; the reason of a
-  // failed request is never displayed.
-  const [failed, setFailed]   = useState(false);
-
-  function releaseObjectUrl() {
-    if (objectUrl.current) {
-      URL.revokeObjectURL(objectUrl.current);
-      objectUrl.current = '';
-    }
-  }
-
-  async function load() {
-    active.current?.abort();
-    const controller = new AbortController();
-    active.current = controller;
-    setPending(true);
-    setFailed(false);
-
-    try {
-      const blob = await callback.current({
-        endpoint: 'customer_tickets_ticket_images',
-        request: {},
-        path: { image_id: imageId },
-        signal: controller.signal,
-      });
-      if (controller.signal.aborted) {
-        return;
-      }
-      if (
-        !(blob instanceof Blob) ||
-        /(?:application\/json|text\/html)/i.test(blob.type)
-      ) {
-        throw new Error(labels.imageError);
-      }
-      releaseObjectUrl();
-      objectUrl.current = URL.createObjectURL(blob);
-      setSource(objectUrl.current);
-    } catch {
-      if (!controller.signal.aborted) {
-        setSource('');
-        setFailed(true);
-      }
-    } finally {
-      if (!controller.signal.aborted) {
-        setPending(false);
-      }
-    }
-  }
-
-  // A tap opens the image in a window on the page. A new tab of a `blob:`
-  // address replaced the storefront in the Android app, where Back then had
-  // no page to return to. A modified click still opens the link as usual.
-  function open(event: MouseEvent<HTMLAnchorElement>) {
-    if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey) {
-      return;
-    }
-    event.preventDefault();
-    opener.current = event.currentTarget;
-    pageScroll.lock();
-    viewer.current?.showModal();
-  }
-
-  // The link that opened the window gets the focus back.
-  function closed() {
-    pageScroll.unlock();
-    restoreFocus(opener.current);
-  }
-
-  // A tap beside the image, on the backdrop, closes the window.
-  function closeOutside(event: MouseEvent<HTMLDialogElement>) {
-    if (event.target === viewer.current) {
-      viewer.current?.close();
-    }
-  }
-
-  useEffect(() => () => pageScroll.unlock(), [pageScroll]);
-
-  useEffect(() => {
-    setSource(initialSource);
-    setFailed(false);
-    if (loadOnMount && !initialSource) {
-      void load();
-    } else {
-      setPending(false);
-    }
-
-    return () => {
-      active.current?.abort();
-      releaseObjectUrl();
-    };
-  }, [imageId, initialSource, loadOnMount]);
-
-  return (
-    <div
-      className={`${styles.root} ${styles.thumbnail}`}
-      data-feature-part="TicketImage"
-    >
-      {source ? (
-        <a
-          className={styles.thumbnailLink}
-          href={source}
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label={labels.image}
-          onClick={open}
-        >
-          <img
-            src={source}
-            alt={labels.image}
-            width={96}
-            height={96}
-          />
-        </a>
-      ) : null}
-      {source ? (
-        <dialog
-          ref={viewer}
-          className={`${styles.root} ${styles.viewer}`}
-          aria-label={labels.image}
-          data-stable-modal="fixed"
-          data-ticket-image-viewer
-          onClick={closeOutside}
-          onClose={closed}
-        >
-          <img
-            src={source}
-            alt={labels.image}
-            width={960}
-            height={960}
-          />
-          <button
-            className={`${styles.tool} ${styles.iconButton} ${styles.viewerClose}`}
-            type="button"
-            aria-label={common.close}
-            title={common.close}
-            onClick={() => viewer.current?.close()}
-          >
-            <svg
-              className={styles.icon}
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.6"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M6 6l12 12M18 6 6 18" />
-            </svg>
-          </button>
-        </dialog>
-      ) : (
-        <div className={styles.thumbnailState}>
-          <ImageIcon />
-          <p role="status">{pending ? common.loading : labels.imageError}</p>
-          {failed ? (
-            <button
-              className={`${styles.tool} ${styles.iconButton}`}
-              type="button"
-              aria-label={common.retry}
-              title={common.retry}
-              onClick={() => void load()}
-            >
-              <svg
-                className={styles.icon}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.6"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                aria-hidden="true"
-              >
-                <path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7" />
-              </svg>
-            </button>
-          ) : null}
-        </div>
-      )}
-    </div>
-  );
-}

package/templates/components/orionplace/support/TicketItemCard.README.md

@@ -1,66 +0,0 @@
-# TicketItemCard · React
-
-## English
-
-`TicketItemCard` identifies the purchased item that a support conversation or
-return is about. `product` supplies the localized name, variant and pictures.
-The component prefers `product.images.small` and falls back to
-`product.images.full`; the main picture reserves a 96 by 96 area before it
-loads. A missing product remains visible as “Item no longer available”.
-
-`option` names the purchased option group, `quantity` is the purchased amount,
-and `amount` is shown in the currently selected currency under `amountLabel` or
-the localized Paid label. With `gallery`, each product picture is an accessible
-button that replaces the main picture. The selection returns to the first
-picture when the product changes. `children` adds related lines such as return
-counts.
-
-The product name links to `productHref(product.id, locale)`. The component
-makes no request and reports no action. Source is maintained in
-`components/orionplace/support/TicketItemCard.tsx`.
-
-### Props
-
-| Prop                                                          | Meaning                                                     |
-| ------------------------------------------------------------- | ----------------------------------------------------------- |
-| `product: IProduct`                                           | Product or checkout item displayed by the component.        |
-| `quantity?: number`                                           | Current item quantity.                                      |
-| `option?: string`                                             | Selected tariff or product option.                          |
-| `amount?: ICurrencyAmounts`                                   | Monetary amount shown for the current item.                 |
-| `amountLabel?: string`                                        | Visible or accessible label for amount.                     |
-| `gallery?: boolean`                                           | Images shown for the current product or support item.       |
-| `productHref?: (productId: number, locale: string) => string` | Builds the product destination from the callback arguments. |
-| `children?: ReactNode`                                        | React content rendered inside the component.                |
-
-## Русский
-
-`TicketItemCard` показывает купленный товар, к которому относится обращение
-или возврат. `product` передаёт локализованное название, вариант и изображения.
-Компонент сначала использует `product.images.small`, а при их отсутствии —
-`product.images.full`; под основное изображение заранее выделяется область 96
-на 96. Если товар больше не приходит в ответе, карточка остаётся видимой с
-текстом «Товар больше не доступен».
-
-`option` называет группу купленного дополнения, `quantity` содержит купленное
-количество, а `amount` выводится в выбранной валюте под `amountLabel` или
-локализованной подписью «Оплачено». При `gallery` каждое изображение становится
-доступной кнопкой и заменяет основное. После смены товара снова выбирается
-первое изображение. Через `children` родитель добавляет связанные строки,
-например количество товаров на этапах возврата.
-
-Название товара ведёт по адресу `productHref(product.id, locale)`. Компонент не
-выполняет запросы и не сообщает о действиях. Исходный файл:
-`components/orionplace/support/TicketItemCard.tsx`.
-
-### Свойства
-
-| Свойство                                                      | Назначение                                                  |
-| ------------------------------------------------------------- | ----------------------------------------------------------- |
-| `product: IProduct`                                           | Товар или позиция оформления, которую показывает компонент. |
-| `quantity?: number`                                           | Текущее количество позиции.                                 |
-| `option?: string`                                             | Выбранная опция тарифа или товара.                          |
-| `amount?: ICurrencyAmounts`                                   | Денежная сумма для текущей позиции.                         |
-| `amountLabel?: string`                                        | Видимая или доступная подпись для суммы.                    |
-| `gallery?: boolean`                                           | Изображения текущего товара или обращения.                  |
-| `productHref?: (productId: number, locale: string) => string` | Строит адрес ссылки товара из аргументов обработчика.       |
-| `children?: ReactNode`                                        | React-содержимое внутри компонента.                         |

package/templates/components/orionplace/support/TicketItemCard.tsx

@@ -1,140 +0,0 @@
-'use client';
-
-import { useEffect, useState, type ReactNode } from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { ICurrencyAmounts } from '@/interfaces/orionplace/cart/ICartData';
-import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
-import { formatCurrency } from '@/lib/orionplace/currency';
-import {
-  orderAmount,
-  orderItemVariant,
-} from '@/lib/orionplace/orderPresentation';
-import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
-import { ticketLabels } from '@/lib/orionplace/ticketLabels';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import styles from './Support.module.css';
-
-export interface TicketItemCardProps {
-  product: IProduct | null;
-  quantity?: number;
-  option?: string;
-  amount?: ICurrencyAmounts | null;
-  amountLabel?: string;
-  gallery?: boolean;
-  productHref?: (productId: number, locale: string) => string;
-  children?: ReactNode;
-}
-
-export function TicketItemCard({
-  product,
-  quantity,
-  option,
-  amount,
-  amountLabel,
-  gallery = false,
-  productHref = (id, locale) =>
-    `/product/${id}?locale=${encodeURIComponent(locale)}`,
-  children,
-}: TicketItemCardProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const currencyId = useOrionplaceSelections((state) => state.currencyId);
-  const currency = useOrionplaceSelections(
-    (state) => state.init?.currencies[state.currencyId],
-  );
-  const labels = ticketLabels(locale);
-  const name =
-    getAvailableNestedValueFromObject(
-      product?.locale,
-      locale,
-      'product_name',
-    ) || labels.itemUnknown;
-  const pictures = product?.images?.small?.length
-    ? product.images.small
-    : (product?.images?.full ?? []);
-  const [selected, setSelected] = useState(0);
-  const photo = pictures[selected] ?? pictures[0] ?? null;
-  const variant = orderItemVariant(product, locale);
-  const value = orderAmount(amount, currencyId);
-  const price = value === undefined ? '' : formatCurrency(value, currency, locale);
-
-  useEffect(() => {
-    setSelected(0);
-  }, [product?.id]);
-
-  return (
-    <div
-      className={`${styles.root} ${styles.item}`}
-      data-feature-part="TicketItemCard"
-      data-ticket-item
-    >
-      <div
-        className={styles.itemPhoto}
-        data-ticket-item-photo
-      >
-        <OrionplaceImage
-          src={photo}
-          alt={name}
-          width={96}
-          height={96}
-        />
-      </div>
-      <div className={styles.itemBody}>
-        {product ? (
-          <a
-            className={styles.link}
-            href={productHref(product.id, locale)}
-          >
-            {name}
-          </a>
-        ) : (
-          <p className={styles.itemName}>{name}</p>
-        )}
-        {option ? (
-          <p>
-            <span className={styles.screenReaderOnly}>
-              {labels.itemOption}:{' '}
-            </span>
-            {option}
-          </p>
-        ) : null}
-        {variant ? <p>{variant}</p> : null}
-        {quantity ? (
-          <p>
-            {labels.itemQuantity}: {quantity}
-          </p>
-        ) : null}
-        {price ? (
-          <p>
-            {amountLabel || labels.itemPrice}: {price}
-          </p>
-        ) : null}
-        {gallery && pictures.length > 1 ? (
-          <ul
-            className={styles.gallery}
-            data-ticket-item-gallery
-          >
-            {pictures.map((picture, index) => (
-              <li key={`${picture}:${index}`}>
-                <button
-                  type="button"
-                  aria-label={`${labels.itemPicture} ${index + 1} / ${pictures.length}`}
-                  aria-pressed={index === selected}
-                  onClick={() => setSelected(index)}
-                >
-                  <OrionplaceImage
-                    src={picture}
-                    alt=""
-                    width={48}
-                    height={48}
-                    ariaHidden
-                  />
-                </button>
-              </li>
-            ))}
-          </ul>
-        ) : null}
-        {children}
-      </div>
-    </div>
-  );
-}

package/templates/components/orionplace/support/TicketMessageForm.README.md

@@ -1,88 +0,0 @@
-# TicketMessageForm · React
-
-## English
-
-`TicketMessageForm` collects the text and images for a new support conversation
-or a reply. The browser requires 2–2048 characters. The text area grows with
-the message until its maximum height, then scrolls. The attachment action
-accepts JPG, GIF, PNG, WebP and ICO files, keeps earlier selections when more
-files are chosen, lists every filename and lets the visitor remove one file.
-
-Each message, new or reply, accepts up to five images. Exceeding that limit
-keeps the chosen files visible, explains the problem and blocks submission.
-With `creating`, the form displays Create and Cancel; without it, the form
-displays Send. `pending` disables all controls. A refused submission is shown
-by the parent above the conversation list, as in Nuxt.
-`waitHint` locks the text, attachments and submit button and shows that text
-above the actions (`data-ticket-wait`); `TicketConversation` passes
-`ticketReplyWaitText(ticket.reply_wait)` while the backend would reject a new
-message.
-
-`refundWindow` turns a new return request (with `creating`) into a choice
-about a defect (`data-ticket-defect`). `regular`, inside the return period,
-adds an optional “The item is defective” checkbox. `defect`, after the regular
-period while only a defect can be returned, shows the “Defect” checkbox checked
-and locked with “The regular return period is over; a return is possible for
-a defect only.” `null` or no value shows no choice. `StorefrontSupport` passes
-the `refund_window` of the order line the conversation is about and sends
-`is_defect: true` only for a request marked as a defect.
-
-A valid submission calls `onSubmit(text, files, isDefect)`. The form keeps its values so
-a failed request can be corrected; the parent remounts it after confirmed
-success. `onCancel` is available in creation mode. Source is maintained in
-`components/orionplace/support/TicketMessageForm.tsx`.
-
-### Props
-
-| Prop                                               | Meaning                                                                                               |
-| -------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `pending?: boolean`                                | Shows the loading state and blocks duplicate actions.                                                 |
-| `creating?: boolean`                               | Uses the new-record form state instead of the reply state.                                            |
-| `waitHint?: string`                                | Locks the form and shows this hint while a new message would be rejected.                             |
-| `refundWindow?: OrderRefundWindow \| null`         | Return request window of the order line: `regular` offers an optional defect mark, `defect` requires it, `null` shows none. |
-| `onSubmit?: (text: string, files: File[], isDefect: boolean) => void` | After form validation, passes the message `text`, `files` array and whether the return request is marked as a defect as separate arguments. Fields are preserved; the application sends the message and remounts the form after success. |
-| `onCancel?: () => void`                            | The cancel button in ticket creation mode calls the handler without arguments. The application closes the creation form. |
-
-## Русский
-
-`TicketMessageForm` собирает текст и изображения для нового обращения или
-ответа. Браузер требует от 2 до 2048 символов. Поле растёт вместе с сообщением
-до максимальной высоты, затем прокручивается. Кнопка прикрепления принимает
-файлы JPG, GIF, PNG, WebP и ICO, сохраняет предыдущий выбор при добавлении
-новых файлов, показывает каждое имя и позволяет убрать отдельный файл.
-
-Каждое сообщение, новое или ответ, принимает до пяти изображений. Если выбрать
-больше, файлы остаются видимыми, форма объясняет ошибку и блокирует отправку.
-При `creating` форма показывает действия «Создать» и «Отмена», без него —
-«Отправить». `pending` блокирует все элементы. Ошибку отправки родитель
-показывает над списком обращений, как в Nuxt. `waitHint` блокирует текст,
-вложения и кнопку отправки и показывает этот текст над действиями
-(`data-ticket-wait`); `TicketConversation` передаёт
-`ticketReplyWaitText(ticket.reply_wait)`, пока сервер отклонил бы новое
-сообщение.
-
-`refundWindow` превращает новую заявку на возврат (при `creating`) в выбор
-о браке (`data-ticket-defect`). `regular`, пока идёт срок возврата, добавляет
-необязательный флажок «Товар с браком». `defect`, когда обычный срок истёк и
-вернуть можно только брак, показывает отмеченный и заблокированный флажок
-«Брак» с пояснением «Срок обычного возврата истёк; возврат возможен только по
-браку.» `null` или отсутствие значения не показывает выбор. `StorefrontSupport`
-передаёт `refund_window` позиции заказа, о которой обращение, и отправляет
-`is_defect: true` только для заявки, отмеченной как брак.
-
-После успешной проверки форма вызывает `onSubmit(text, files, isDefect)`. Значения
-сохраняются, чтобы после неудачного запроса их можно было исправить; после
-подтверждённого успеха родитель создаёт форму заново. В режиме создания
-`onCancel` сообщает об отмене. Исходный файл:
-`components/orionplace/support/TicketMessageForm.tsx`.
-
-### Свойства
-
-| Свойство                                           | Назначение                                                                                                    |
-| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `pending?: boolean`                                | Показывает загрузку и блокирует повторные действия.                                                           |
-| `creating?: boolean`                               | Включает форму нового обращения вместо ответа.                                                                |
-| `waitHint?: string`                                | Блокирует форму и показывает эту подсказку, пока новое сообщение было бы отклонено.                           |
-| `refundWindow?: OrderRefundWindow \| null`         | Срок заявки на возврат для позиции заказа: `regular` — необязательная отметка брака, `defect` — обязательная, `null` — без отметки. |
-| `onSubmit?: (text: string, files: File[], isDefect: boolean) => void` | После проверки формы передаёт отдельными аргументами текст `text`, массив файлов `files` и отметку брака для заявки на возврат. Поля сохраняются; приложение отправляет сообщение и после успеха создаёт форму заново. |
-| `onCancel?: () => void`                            | Кнопка отмены в режиме создания обращения вызывает обработчик без аргументов. Приложение закрывает форму создания. |