orionplace-react 0.7.8 → 0.8.0

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

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

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

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