orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,105 @@
+# TicketConversation · React
+
+## English
+
+`TicketConversation` renders one support conversation from `ticket` and its
+complete `replies` list. It shows the localized type, open or closed state,
+creation date and, for an order conversation, the return decision and order
+link. A return request marked as a defect (`is_defect: true`) shows Defect
+beside the type. A conversation about a purchased item or subscription includes the
+matching subject card when the parent supplies that data.
+
+For a return, the component shows the current shipment state and what the
+customer should do next, carrier details, tracking number, and each returned
+item with its stage counts and selected-currency refund amount. Customer
+messages appear on the right and support replies on the left. Each protected
+attachment is loaded through `onLoadImage` by `TicketImage`.
+
+An open conversation displays `TicketMessageForm` and calls
+`onSubmit(text, files)`. Close and delete require an inline confirmation before
+calling `onClose` or `onDelete`; deletion is available only while the
+conversation has at most one message and no approved decision. A closed
+conversation displays the current rating and calls `onRate(rating)`. Refresh
+calls `onRefresh`. `pending` disables all actions, and `sentRevision` remounts
+the reply form after confirmed delivery.
+
+When `ticket.reply_wait` is set, the reply form is locked with the
+`ticketReplyWaitText()` hint: `support_reply` until support answers for the
+first time, `delay` while the store's `ticket_reply_delay_minutes` after the
+customer's last message have not passed. A `delay` wait unlocks by itself
+after `reply_wait.seconds`; a `support_reply` wait ends when `onRefresh`
+brings the ticket with the support reply. The backend applies the same rule to
+`customer_tickets_reply`.
+
+The component makes no list, reply or mutation request itself. Source is
+maintained in `components/orionplace/support/TicketConversation.tsx`.
+
+### Props
+
+| Prop                                                                    | Meaning                                                                                               |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `ticket: ICustomerTicket`                                               | Support ticket displayed in the conversation.                                                         |
+| `replies: ICustomerTicketReply[]`                                       | Replies grouped under their owning record.                                                            |
+| `pending?: boolean`                                                     | Shows the loading state and blocks duplicate actions.                                                 |
+| `sentRevision?: number`                                                 | Changes after a successful send so the message form can reset its draft.                              |
+| `subscription?: ICustomerSubscription`                                  | Customer subscription displayed or changed by the component.                                          |
+| `subscriptionPlan?: ISubscribeTariff`                                   | Plan data used to describe the support ticket subscription.                                           |
+| `orderHref?: (orderId: number, locale: string) => string`               | Builds the order destination from the callback arguments.                                             |
+| `onLoadImage: (action: TicketImageLoadAction) => Promise<Blob> \| Blob` | Called when a protected image must be loaded. The callback payload is shown in its type.              |
+| `onSubmit?: (text: string, files: File[]) => void`                      | Passes reply `text` and the `files` array from the message form. The application sends the reply and supplies the updated conversation and `sentRevision`. |
+| `onClose?: () => void`                                                  | Called without arguments after the customer confirms closing the support ticket. The application submits the close request and updates ticket data. |
+| `onDelete?: () => void`                                                 | Called without arguments after the customer confirms deleting the support ticket. The application submits the deletion request and updates the list. |
+| `onRate?: (rating: number) => void`                                     | Passes the numeric support rating when the closed ticket’s rating form is submitted. The application saves the rating and updates ticket data. |
+| `onRefresh?: () => void`                                                | The refresh button calls the handler without arguments. The application loads the current ticket and replies. |
+
+## Русский
+
+`TicketConversation` выводит одно обращение из `ticket` и полный список его
+сообщений `replies`. Компонент показывает локализованный тип, открытое или
+закрытое состояние, дату создания, а для обращения по заказу — решение по
+возврату и ссылку на заказ. Заявка на возврат, отмеченная как брак
+(`is_defect: true`), показывает «Брак» рядом с типом. Для обращения по купленному товару или подписке
+показывается соответствующая карточка, если родитель передал эти данные.
+
+Для возврата выводятся текущее состояние отправления и следующее действие
+покупателя, перевозчик, трек-номер и каждый возвращаемый товар с количеством на
+этапах возврата и суммой в выбранной валюте. Сообщения покупателя находятся
+справа, ответы поддержки — слева. Каждое защищённое вложение `TicketImage`
+загружает через `onLoadImage`.
+
+В открытом обращении `TicketMessageForm` вызывает `onSubmit(text, files)`.
+Закрытие и удаление сначала требуют подтверждения, затем вызывают `onClose` или
+`onDelete`; удалить можно только обращение не более чем с одним сообщением и
+без одобренного решения. В закрытом обращении показывается текущая оценка, а
+сохранение вызывает `onRate(rating)`. Обновление вызывает `onRefresh`.
+`pending` блокирует действия, а смена `sentRevision` создаёт форму ответа
+заново после подтверждённой отправки.
+
+Если задан `ticket.reply_wait`, форма ответа блокируется с подсказкой
+`ticketReplyWaitText()`: `support_reply` — до первого ответа поддержки,
+`delay` — пока после последнего сообщения покупателя не прошло
+`ticket_reply_delay_minutes` магазина. Ожидание `delay` снимается само через
+`reply_wait.seconds`; ожидание `support_reply` заканчивается, когда
+`onRefresh` приносит обращение с ответом поддержки. Сервер применяет то же
+правило к `customer_tickets_reply`.
+
+Сам компонент не загружает список и сообщения и не выполняет изменения.
+Исходный файл: `components/orionplace/support/TicketConversation.tsx`.
+
+### Свойства
+
+| Свойство                                                                | Назначение                                                                                                    |
+| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `ticket: ICustomerTicket`                                               | Обращение, которое показано в переписке с поддержкой.                                                         |
+| `replies: ICustomerTicketReply[]`                                       | Ответы, сгруппированные под исходной записью.                                                                 |
+| `pending?: boolean`                                                     | Показывает загрузку и блокирует повторные действия.                                                           |
+| `sentRevision?: number`                                                 | Меняется после успешной отправки, чтобы форма очистила черновик.                                              |
+| `subscription?: ICustomerSubscription`                                  | Подписка покупателя, которую показывает или изменяет компонент.                                               |
+| `subscriptionPlan?: ISubscribeTariff`                                   | Данные тарифа для описания подписки в обращении.                                                              |
+| `orderHref?: (orderId: number, locale: string) => string`               | Строит адрес ссылки заказа из аргументов обработчика.                                                         |
+| `onLoadImage: (action: TicketImageLoadAction) => Promise<Blob> \| Blob` | Вызывается, когда нужно загрузить защищённое изображение. Данные обработчика указаны в его типе.              |
+| `onSubmit?: (text: string, files: File[]) => void`                      | Передаёт текст ответа `text` и массив файлов `files` из формы сообщения. Приложение отправляет ответ и передаёт обновлённую переписку и `sentRevision`. |
+| `onClose?: () => void`                                                  | Вызывается без аргументов после подтверждения закрытия обращения. Приложение отправляет запрос закрытия и обновляет данные обращения. |
+| `onDelete?: () => void`                                                 | Вызывается без аргументов после подтверждения удаления обращения. Приложение отправляет запрос удаления и обновляет список. |
+| `onRate?: (rating: number) => void`                                     | Передаёт числовую оценку поддержки при отправке формы оценки закрытого обращения. Приложение сохраняет оценку и обновляет данные обращения. |
+| `onRefresh?: () => void`                                                | Кнопка обновления вызывает обработчик без аргументов. Приложение загружает актуальное обращение и ответы. |

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

@@ -0,0 +1,502 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
+import type { ICustomerSubscription } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+import {
+  ECustomerTicketSolution,
+  ECustomerTicketStatus,
+  ECustomerTicketType,
+  ETicketReplyDirection,
+  type ICustomerTicket,
+  type ICustomerTicketReply,
+} from '@/interfaces/orionplace/tickets/ICustomerTicketApi';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { orderRefundEntries } from '@/lib/orionplace/orderPresentation';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import {
+  refundShipmentView,
+  ticketLabels,
+  ticketSolutionText,
+  ticketSolutionTone,
+  ticketReplyWaitText,
+  ticketStatusView,
+  ticketTypeText,
+} from '@/lib/orionplace/ticketLabels';
+import {
+  orderTicketLines,
+  ticketOrderLine,
+} from '@/lib/orionplace/ticketItems';
+import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
+import { TicketImage, type TicketImageLoadAction } from './TicketImage';
+import { TicketItemCard } from './TicketItemCard';
+import { TicketMessageForm } from './TicketMessageForm';
+import { TicketSubscriptionCard } from './TicketSubscriptionCard';
+import styles from './Support.module.css';
+
+export interface TicketConversationProps {
+  ticket: ICustomerTicket;
+  replies: ICustomerTicketReply[];
+  pending?: boolean;
+  sentRevision?: number;
+  subscription?: ICustomerSubscription;
+  subscriptionPlan?: ISubscribeTariff;
+  orderHref?: (orderId: number, locale: string) => string;
+  onLoadImage: (action: TicketImageLoadAction) => Promise<Blob> | Blob;
+  onSubmit?: (text: string, files: File[]) => void;
+  onClose?: () => void;
+  onDelete?: () => void;
+  onRate?: (rating: number) => void;
+  onRefresh?: () => void;
+}
+
+function Icon({ children }: { children: React.ReactNode }) {
+  return (
+    <svg
+      className={styles.icon}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {children}
+    </svg>
+  );
+}
+
+function StatusIcon({ locked }: { locked: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect
+        x="5"
+        y="11"
+        width="14"
+        height="10"
+      />
+      <path
+        d={locked ? 'M8 11V7a4 4 0 0 1 8 0v4' : 'M8 11V7a4 4 0 0 1 7.6-1.7'}
+      />
+    </svg>
+  );
+}
+
+export function TicketConversation({
+  ticket,
+  replies,
+  pending = false,
+  sentRevision = 0,
+  subscription,
+  subscriptionPlan,
+  orderHref = (id, locale) =>
+    `/orders?order=${id}&locale=${encodeURIComponent(locale)}`,
+  onLoadImage,
+  onSubmit,
+  onClose,
+  onDelete,
+  onRate,
+  onRefresh,
+}: TicketConversationProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const currencyId = useOrionplaceSelections((state) => state.currencyId);
+  const labels = ticketLabels(locale);
+  const common = featureLabels(locale);
+  const [confirmation, setConfirmation] = useState<'close' | 'delete'>();
+  const [rating, setRating] = useState(String(ticket.rating));
+  const status = ticketStatusView(ticket.status, labels);
+  const type = ticketTypeText(ticket.type, labels);
+  const refund = ticket.refund;
+  const refundState = refund
+    ? refundShipmentView(refund.shipment_status, labels)
+    : undefined;
+  const carrier = getAvailableNestedValueFromObject(
+    refund?.track?.carrier_name,
+    locale,
+    'carrier_name',
+  );
+  const orderLines = orderTicketLines(refund?.order, locale);
+  const refundItems = orderRefundEntries(refund?.order, currencyId).map(
+    (entry) => ({
+      ...entry,
+      option: orderLines.find((line) => line.key === entry.key)?.option,
+    }),
+  );
+  const line = ticketOrderLine(ticket, orderLines);
+  const subject =
+    ticket.type.int === ECustomerTicketType.ORDER &&
+    (ticket.product || line?.product)
+      ? {
+          product: line?.product ?? ticket.product ?? null,
+          quantity: line?.quantity,
+          option: line?.option,
+          amount: line?.amount,
+        }
+      : undefined;
+  const decision =
+    ticket.type.int === ECustomerTicketType.ORDER
+      ? {
+          text: ticketSolutionText(ticket.solution, labels),
+          tone: ticketSolutionTone(ticket.solution),
+        }
+      : undefined;
+  const created = [ticket.time_created?.date, ticket.time_created?.time]
+    .filter(Boolean)
+    .join(' ');
+  const canDelete =
+    ticket.counts.c_total_messages <= 1 &&
+    ticket.solution.int !== ECustomerTicketSolution.SOLUTION_APROOVED;
+  const ratings = {
+    0: labels.unrated,
+    1: '★',
+    2: '★★',
+    3: '★★★',
+    4: '★★★★',
+    5: '★★★★★',
+  };
+
+  useEffect(() => {
+    setRating(String(ticket.rating));
+    setConfirmation(undefined);
+  }, [ticket.id, ticket.rating]);
+
+  // A `delay` wait ends by itself, so a timer unlocks the form; a
+  // `support_reply` wait ends when a refresh brings the support reply.
+  const replyWait                 = ticket.reply_wait;
+  const [waitOver, setWaitOver]   = useState(false);
+  const waitHint                  = waitOver
+    ? ''
+    : ticketReplyWaitText(replyWait, labels);
+  useEffect(() => {
+    setWaitOver(false);
+    if (replyWait?.reason !== 'delay' || !replyWait.seconds) {
+      return;
+    }
+    const timer = setTimeout(() => setWaitOver(true), replyWait.seconds * 1000);
+    return () => clearTimeout(timer);
+  }, [replyWait]);
+
+  function confirm() {
+    if (confirmation === 'close') {
+      onClose?.();
+    } else if (confirmation === 'delete') {
+      onDelete?.();
+    }
+    setConfirmation(undefined);
+  }
+
+  return (
+    <section
+      className={`${styles.root} ${styles.stack}`}
+      data-feature-part="TicketConversation"
+    >
+      <header className={styles.conversationHeader}>
+        <div className={styles.conversationHeading}>
+          <h2>
+            {labels.ticket} #{ticket.id}
+          </h2>
+          <p className={styles.meta}>
+            {type ? <span>{type}</span> : null}
+            {ticket.is_defect ? (
+              <span
+                className={styles.defectMark}
+                data-ticket-defect
+              >
+                {labels.defect}
+              </span>
+            ) : null}
+            {status.text ? (
+              <span
+                className={styles.status}
+                data-ticket-status={status.icon}
+              >
+                <StatusIcon locked={status.icon === 'lock'} />
+                {status.text}
+              </span>
+            ) : null}
+            {decision ? (
+              <span
+                className={styles.decision}
+                data-tone={decision.tone}
+              >
+                {labels.decision}: {decision.text}
+              </span>
+            ) : null}
+            {created ? <time>{created}</time> : null}
+          </p>
+          {ticket.order_id ? (
+            <a
+              className={`${styles.link} ${styles.orderLink}`}
+              href={orderHref(ticket.order_id, locale)}
+            >
+              {labels.order} #{ticket.order_id}
+            </a>
+          ) : null}
+        </div>
+        <div className={styles.tools}>
+          <button
+            className={`${styles.tool} ${styles.iconButton}`}
+            type="button"
+            aria-label={common.refresh}
+            title={common.refresh}
+            disabled={pending}
+            onClick={() => onRefresh?.()}
+          >
+            <Icon>
+              <path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7" />
+            </Icon>
+          </button>
+          {ticket.status.int === ECustomerTicketStatus.OPEN ? (
+            <button
+              className={styles.tool}
+              type="button"
+              disabled={pending}
+              aria-label={labels.closeHint}
+              onClick={() => setConfirmation('close')}
+            >
+              <Icon>
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="9"
+                />
+                <path d="m8 12.5 2.5 2.5L16 9.5" />
+              </Icon>
+              {labels.close}
+            </button>
+          ) : null}
+          {canDelete ? (
+            <button
+              className={`${styles.tool} ${styles.danger}`}
+              type="button"
+              disabled={pending}
+              aria-label={labels.deleteHint}
+              onClick={() => setConfirmation('delete')}
+            >
+              <Icon>
+                <path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v5m4-5v5" />
+              </Icon>
+              {labels.delete}
+            </button>
+          ) : null}
+        </div>
+      </header>
+
+      {subject ? (
+        <section
+          className={styles.subject}
+          data-ticket-subject
+          aria-labelledby={`ticket-${ticket.id}-subject`}
+        >
+          <h3
+            id={`ticket-${ticket.id}-subject`}
+            className={styles.subjectTitle}
+          >
+            {labels.subject}
+          </h3>
+          <TicketItemCard
+            {...subject}
+            gallery
+          />
+        </section>
+      ) : null}
+
+      {subscription ? (
+        <section
+          className={styles.subject}
+          data-ticket-subscription-subject
+          aria-labelledby={`ticket-${ticket.id}-subscription`}
+        >
+          <h3
+            id={`ticket-${ticket.id}-subscription`}
+            className={styles.subjectTitle}
+          >
+            {labels.subscriptionSubject}
+          </h3>
+          <TicketSubscriptionCard
+            subscription={subscription}
+            plan={subscriptionPlan}
+          />
+        </section>
+      ) : null}
+
+      {refund && refundState ? (
+        <section
+          className={styles.refund}
+          data-tone={refundState.tone}
+          data-ticket-refund
+          aria-labelledby={`ticket-${ticket.id}-refund`}
+        >
+          <header className={styles.refundHeader}>
+            <h3
+              id={`ticket-${ticket.id}-refund`}
+              className={styles.refundTitle}
+            >
+              {labels.refund} #{refund.id}
+            </h3>
+            <span className={styles.refundState}>{refundState.text}</span>
+          </header>
+          {refundState.hint ? (
+            <p className={styles.refundCopy}>{refundState.hint}</p>
+          ) : null}
+          <dl className={styles.refundFacts}>
+            {carrier ? (
+              <div>
+                <dt>{labels.refundCarrier}</dt>
+                <dd>{carrier}</dd>
+              </div>
+            ) : null}
+            {refund.track?.track ? (
+              <div>
+                <dt>{labels.refundTrack}</dt>
+                <dd>{refund.track.track}</dd>
+              </div>
+            ) : null}
+            {refund.track?.status ? (
+              <div>
+                <dt>{labels.refundCarrierStatus}</dt>
+                <dd>{refund.track.status}</dd>
+              </div>
+            ) : null}
+          </dl>
+          {refundItems.length ? (
+            <>
+              <h4 className={styles.subjectTitle}>{labels.refundItems}</h4>
+              <ul className={styles.refundItems}>
+                {refundItems.map((entry) => (
+                  <li key={entry.key}>
+                    <TicketItemCard
+                      product={entry.product}
+                      quantity={entry.quantity}
+                      option={entry.option}
+                      amount={entry.refund.amount}
+                      amountLabel={labels.refundAmount}
+                    >
+                      {entry.refund.counts.map((count) => (
+                        <span
+                          key={count.key}
+                          className={styles.refundCount}
+                        >
+                          {labels.refundCounts[count.key]}: {count.count}
+                        </span>
+                      ))}
+                    </TicketItemCard>
+                  </li>
+                ))}
+              </ul>
+            </>
+          ) : null}
+        </section>
+      ) : null}
+
+      {confirmation ? (
+        <div className={`${styles.notice} ${styles.confirmation}`}>
+          <p>
+            {confirmation === 'close'
+              ? labels.closeQuestion
+              : labels.deleteQuestion}
+          </p>
+          <div className={styles.actions}>
+            <button
+              className={`${styles.button} ${styles.primary}`}
+              type="button"
+              disabled={pending}
+              onClick={confirm}
+            >
+              {common.continue}
+            </button>
+            <button
+              className={styles.button}
+              type="button"
+              disabled={pending}
+              onClick={() => setConfirmation(undefined)}
+            >
+              {common.back}
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      <ol
+        className={styles.messages}
+        aria-live="polite"
+      >
+        {replies.map((reply) => {
+          const own =
+            reply.direction.int === ETicketReplyDirection.TO_MANAGMENT;
+          return (
+            <li
+              key={reply.id}
+              className={`${styles.message} ${own ? styles.ownMessage : ''}`.trim()}
+            >
+              <div className={styles.bubble}>
+                <p className={styles.sender}>
+                  {reply.sender.first_name} {reply.sender.last_name}
+                </p>
+                <p className={styles.messageText}>{reply.reply_text}</p>
+                {reply.reply_images.length ? (
+                  <div className={styles.attachments}>
+                    {reply.reply_images.map((file) => (
+                      <TicketImage
+                        key={file.id}
+                        imageId={file.id}
+                        onLoad={onLoadImage}
+                      />
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+              <time className={styles.messageTime}>
+                {reply.reply_time?.date} {reply.reply_time?.time}
+              </time>
+            </li>
+          );
+        })}
+      </ol>
+
+      {ticket.status.int === ECustomerTicketStatus.OPEN ? (
+        <TicketMessageForm
+          key={`${ticket.id}:${sentRevision}`}
+          pending={pending}
+          waitHint={waitHint}
+          onSubmit={onSubmit}
+        />
+      ) : (
+        <form
+          className={`${styles.panel} ${styles.rating}`}
+          onSubmit={(event) => {
+            event.preventDefault();
+            onRate?.(Number(rating));
+          }}
+        >
+          <div className={styles.ratingField}>
+            <OrionplaceSelect
+              options={ratings}
+              label={labels.rating}
+              value={rating}
+              disabled={pending}
+              onValueChange={setRating}
+            />
+          </div>
+          <button
+            className={styles.button}
+            type="submit"
+            disabled={pending}
+          >
+            {common.save}
+          </button>
+        </form>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,52 @@
+# TicketImage · React
+
+## English
+
+`TicketImage` loads one protected support attachment. After hydration it calls
+`onLoad` with endpoint `customer_tickets_ticket_images`, an empty request,
+`path.image_id` and an abort signal. The callback must return the image as a
+`Blob`. JSON and HTML responses are rejected as failures.
+
+The component reserves a square attachment area while loading. A successful
+blob becomes a local object URL and opens in a new tab from a 96 by 96 image.
+The object URL is revoked when the image changes or the component unmounts. A
+failed request displays Retry and starts the same action again. `initialSource`
+can supply a server-rendered URL and prevents the automatic request;
+`loadOnMount={false}` also disables automatic loading.
+
+Source is maintained in `components/orionplace/support/TicketImage.tsx`.
+
+### Props
+
+| Prop                                                               | Meaning                                                                                      |
+| ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
+| `imageId: number`                                                  | ID of the image handled by TicketImage.                                                      |
+| `initialSource?: string`                                           | Server-provided initial source used for the first render and hydration.                      |
+| `loadOnMount?: boolean`                                            | Starts the load callback after hydration when server data was not supplied.                  |
+| `onLoad: (action: TicketImageLoadAction) => Promise<Blob> \| Blob` | Called when the component needs its primary data. The callback payload is shown in its type. |
+
+## Русский
+
+`TicketImage` загружает одно защищённое изображение из обращения. После
+гидратации компонент вызывает `onLoad` с методом
+`customer_tickets_ticket_images`, пустым запросом, `path.image_id` и сигналом
+отмены. Обработчик должен вернуть изображение как `Blob`. Ответы JSON и HTML
+считаются ошибкой.
+
+Во время загрузки компонент сохраняет квадратную область вложения. Успешный
+`Blob` превращается в локальный URL и открывается в новой вкладке из изображения
+96 на 96. При смене изображения и удалении компонента локальный URL
+освобождается. После ошибки появляется кнопка повтора того же запроса.
+`initialSource` задаёт URL для серверного HTML и отменяет автоматический запрос;
+`loadOnMount={false}` также отключает автоматическую загрузку.
+
+Исходный файл: `components/orionplace/support/TicketImage.tsx`.
+
+### Свойства
+
+| Свойство                                                           | Назначение                                                                                     |
+| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
+| `imageId: number`                                                  | ID изображения, с которым работает TicketImage.                                                |
+| `initialSource?: string`                                           | Начальное значение адреса изображения, полученное на сервере для первого рендера и гидратации. |
+| `loadOnMount?: boolean`                                            | Запускает загрузку после гидратации, если серверные данные не переданы.                        |
+| `onLoad: (action: TicketImageLoadAction) => Promise<Blob> \| Blob` | Вызывается, когда компоненту нужны основные данные. Данные обработчика указаны в его типе.     |