orionplace-react 0.1.0 → 0.2.1

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

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

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

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

@@ -0,0 +1,88 @@
+# 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`                            | Кнопка отмены в режиме создания обращения вызывает обработчик без аргументов. Приложение закрывает форму создания. |