orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/subscriptions/SubscriptionPlanSummary.tsx

@@ -1,236 +0,0 @@
-'use client';
-
-import {
-  useOrionplaceCatalog,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
-import type { ICustomerSubscription } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
-import {
-  getAvailableNestedValueFromObject,
-  plainText,
-} from '@/lib/orionplace/presentation';
-import { subscriptionManageLabels } from '@/lib/orionplace/subscriptionManageLabels';
-import { subscriptionUsageMeters } from '@/lib/orionplace/subscriptionUsage';
-import { tariffFeatures } from '@/lib/orionplace/tariffs';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import { OrionplaceInfoHint } from '@/components/orionplace/shared/OrionplaceInfoHint';
-import styles from './SubscriptionPlanSummary.module.css';
-
-export interface SubscriptionPlanSummaryProps {
-  plan?: ISubscribeTariff;
-  subscription?: ICustomerSubscription;
-  className?: string;
-}
-
-const usageIcons: Record<string, string> = {
-  files_size:
-    'M4 7c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3Zm0 0v10c0 1.7 3.6 3 8 3s8-1.3 8-3V7M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3',
-  api_requests: 'M13 3 5 14h6l-1 7 8-11h-6l1-7Z',
-  front_hosts:
-    'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm-9-9h18M12 3c2.5 2.5 3.5 5.5 3.5 9s-1 6.5-3.5 9c-2.5-2.5-3.5-5.5-3.5-9s1-6.5 3.5-9Z',
-};
-const gaugeIcon = 'M4 19h16M7 16V9M12 16V5M17 16v-4';
-const planIcon = 'M4 7.5 12 3l8 4.5v9L12 21l-8-4.5zM4 7.5 12 12l8-4.5M12 12v9';
-
-function Icon({ path }: { path: string }) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d={path} />
-    </svg>
-  );
-}
-
-export function SubscriptionPlanSummary({
-  plan,
-  subscription,
-  className = '',
-}: SubscriptionPlanSummaryProps) {
-  const parents = useOrionplaceCatalog(
-    (state) => state.storeTariffs?.subscriptions ?? [],
-  );
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const copy = subscriptionManageLabels(locale);
-  const name = getAvailableNestedValueFromObject(
-    plan?.locales,
-    locale,
-    'tariff_name',
-  );
-  const description = plainText(
-    getAvailableNestedValueFromObject(
-      plan?.locales,
-      locale,
-      'tariff_short_description',
-    ),
-  );
-  const picture = plan?.tariff_image?.small?.[0];
-  const meters = subscriptionUsageMeters(
-    subscription?.plugin?.remote_subscription_tariff_usages ?? null,
-    plan,
-    locale,
-  );
-  const measured = new Set(meters.map((meter) => meter.limitKey));
-  const features = plan
-    ? tariffFeatures(plan, parents, locale).filter(
-        (feature) => !measured.has(feature.key),
-      )
-    : [];
-  const hasPlan = Boolean(picture || description || features.length);
-
-  if (!hasPlan && !meters.length) {
-    return null;
-  }
-
-  return (
-    <section
-      className={`${styles.root} ${hasPlan && meters.length ? styles.split : ''} ${className}`.trim()}
-      data-feature-part="SubscriptionPlanSummary"
-      data-subscription-plan
-    >
-      {hasPlan ? (
-        <div
-          className={styles.block}
-          data-subscription-plan-block
-        >
-          <h4>
-            <Icon path={planIcon} />
-            {copy.planTitle}
-          </h4>
-          {picture || description ? (
-            <div className={styles.identity}>
-              {picture ? (
-                <OrionplaceImage
-                  src={picture}
-                  alt={name || ''}
-                  width={48}
-                  height={48}
-                />
-              ) : null}
-              {description ? <p>{description}</p> : null}
-            </div>
-          ) : null}
-          {features.length ? (
-            <ul
-              className={!meters.length ? styles.featureColumns : ''}
-              aria-label={copy.planIncludes}
-              data-subscription-plan-features
-            >
-              {features.map((feature) => (
-                <li
-                  key={feature.key}
-                  data-included={feature.value !== false}
-                >
-                  <svg
-                    viewBox="0 0 16 16"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    aria-hidden="true"
-                  >
-                    <path
-                      d={
-                        feature.value === false
-                          ? 'M4 8h8'
-                          : 'm3 8.5 3 3 7-7'
-                      }
-                    />
-                  </svg>
-                  <span>
-                    {feature.label}
-                    {feature.detail ? `: ${feature.detail}` : ''}
-                    {feature.hint ? (
-                      <OrionplaceInfoHint
-                        label={feature.label}
-                        text={feature.hint}
-                      />
-                    ) : null}
-                    {feature.value === false ? (
-                      <span className={styles.screenReaderOnly}>
-                        ({copy.planNotIncluded})
-                      </span>
-                    ) : null}
-                  </span>
-                </li>
-              ))}
-            </ul>
-          ) : null}
-        </div>
-      ) : null}
-      {meters.length ? (
-        <div
-          className={styles.block}
-          data-subscription-usage
-        >
-          <h4>
-            <Icon path={gaugeIcon} />
-            {copy.usageTitle}
-          </h4>
-          {meters.map((meter) => {
-            const value = meter.limit
-              ? copy.usageOf
-                  .replace('{used}', meter.used)
-                  .replace('{limit}', meter.limit)
-              : meter.used;
-            const tone =
-              meter.share === null
-                ? 'normal'
-                : meter.share >= 1
-                  ? 'danger'
-                  : meter.share >= 0.8
-                    ? 'attention'
-                    : 'normal';
-            return (
-              <div
-                key={meter.key}
-                className={styles.meter}
-                data-subscription-usage-key={meter.key}
-              >
-                <div className={styles.meterHeading}>
-                  <span>
-                    <Icon path={usageIcons[meter.key] ?? gaugeIcon} />
-                    <span>
-                      {meter.label}
-                      {meter.hint ? (
-                        <OrionplaceInfoHint
-                          label={meter.label}
-                          text={meter.hint}
-                        />
-                      ) : null}
-                    </span>
-                  </span>
-                  <span>{value}</span>
-                </div>
-                {meter.share !== null ? (
-                  <div
-                    className={styles.track}
-                    role="meter"
-                    aria-valuemin={0}
-                    aria-valuemax={100}
-                    aria-valuenow={Math.round(meter.share * 100)}
-                    aria-valuetext={value}
-                    aria-label={meter.label}
-                  >
-                    <span
-                      data-tone={tone}
-                      style={{ width: `${meter.share * 100}%` }}
-                    />
-                  </div>
-                ) : null}
-              </div>
-            );
-          })}
-        </div>
-      ) : null}
-    </section>
-  );
-}

package/templates/components/orionplace/subscriptions/SubscriptionRemoteDetails.README.md

@@ -1,123 +0,0 @@
-# SubscriptionRemoteDetails · React
-
-## English
-
-`SubscriptionRemoteDetails` reads the `plugin` object of one
-`subscriptions_get` item. It renders only when a subscription service supplied
-a numeric `remote_subscription_id`, a usable customer-data value or a usable
-usage value. The block shows the service subscription ID and the last confirmed
-date and time. When `remote_subscription_last_sync` has no date, it explains
-that the service is still confirming the latest change.
-
-`remote_subscription_data_user` belongs to the subscription service. By
-default, the component shows its nonempty strings, finite numbers and booleans.
-Nested values are omitted. Keys that name credentials or storage locations are
-removed before rendering. `host` receives a localized label; other keys keep
-their service name. An `id` equal to `remote_subscription_id` is shown once.
-`fields` chooses the keys, order and optional labels. `renderDetails(data,
-entries)` can replace the generated rows; `entries` is already filtered, while
-direct use of `data` remains the application's responsibility.
-
-The component emits nothing and makes no request. Source is maintained in
-`components/orionplace/subscriptions/SubscriptionRemoteDetails.tsx`.
-
-### Props
-
-| Prop                                                                                 | Meaning                                                                         |
-| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- |
-| `subscription: ICustomerSubscription`                                                | Customer subscription displayed or changed by the component.                    |
-| `fields?: SubscriptionRemoteField[]`                                                 | Service-data keys to show in order, each with an optional label.               |
-| `className?: string`                                                                 | Additional CSS class for the component root.                                    |
-| `renderDetails?: (data: JsonValue, entries: SubscriptionRemoteEntry[]) => ReactNode` | Replaces the default details region; the renderer inputs are shown in its type. |
-
-## Русский
-
-`SubscriptionRemoteDetails` читает объект `plugin` одной позиции
-`subscriptions_get`. Блок появляется, только если сервис подписки передал
-числовой `remote_subscription_id`, подходящее значение данных покупателя или
-использования. В блоке видны ID подписки в сервисе и дата со временем
-последнего подтверждения. Если в `remote_subscription_last_sync` нет даты,
-текст сообщает, что сервис ещё подтверждает последнее изменение.
-
-Форма `remote_subscription_data_user` принадлежит сервису подписки. По
-умолчанию компонент показывает непустые строки, конечные числа и логические
-значения. Вложенные значения скрываются. Ключи, называющие учётные данные или
-места хранения, удаляются до вывода. `host` получает локализованную подпись,
-остальные ключи сохраняют название сервиса. `id`, совпадающий с
-`remote_subscription_id`, выводится один раз. `fields` задаёт ключи, порядок и
-необязательные подписи. `renderDetails(data, entries)` заменяет готовые строки;
-`entries` уже отфильтрован, а безопасное прямое чтение `data` остаётся
-ответственностью приложения.
-
-Компонент не отправляет события и запросы. Исходный файл:
-`components/orionplace/subscriptions/SubscriptionRemoteDetails.tsx`.
-
-### Свойства
-
-| Свойство                                                                             | Назначение                                                                        |
-| ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- |
-| `subscription: ICustomerSubscription`                                                | Подписка покупателя, которую показывает или изменяет компонент.                   |
-| `fields?: SubscriptionRemoteField[]`                                                 | Ключи данных сервиса в порядке вывода, с необязательными подписями.                                  |
-| `className?: string`                                                                 | Дополнительный CSS-класс корневого элемента.                                      |
-| `renderDetails?: (data: JsonValue, entries: SubscriptionRemoteEntry[]) => ReactNode` | Заменяет стандартный блок подробностей; входные данные функции указаны в её типе. |
-## Response fields and application actions
-
-The following tables describe the response and the supplied composition’s follow-up actions. The framework-specific props and events above identify which work belongs to the component and which belongs to its parent.
-
-### English
-
-### Remote identity, details and confirmation
-
-`subscription.plugin` — The stable plugin fields come from `subscriptions_get`. Keys inside the service’s data packages are defined by that service.
-
-| Field or condition | Meaning and application action |
-| --- | --- |
-| `remote_subscription_id` | The subscription ID in the connected service. A numeric value makes the block visible even without detail rows. |
-| `remote_subscription_data_user` | Customer-facing service data. Without `fields`, eligible primitive values become rows. `host` gets a translated label; other keys keep their own names. |
-| `remote_subscription_tariff_usages` | Reported usage for `SubscriptionPlanSummary`. Displayable values here also make this remote block visible, but usage is not repeated in its details list. |
-| `remote_subscription_last_sync` | Last confirmed date/time. An absent date makes the confirmation row say confirmation is pending; it cannot establish the card’s access state. |
-| `remote_subscription_sync_pending` | The separate flag used by the subscription card to choose Pending before checking `active_until`. |
-| No numeric remote ID and no eligible values | The block is hidden, including when `plugin` is absent. A timestamp alone does not make it visible. |
-
-### Which package values become rows
-
-| Field or condition | Meaning and application action |
-| --- | --- |
-| Strings, numbers and booleans | Show nonblank strings, finite numbers and booleans, including zero and false. Omit null, nested objects, arrays and credential/storage-location keys. |
-| `fields[].key` and `fields[].label` | Select keys in the supplied order and optionally replace labels. Missing or ineligible values stay omitted; selecting a key does not bypass the filtering. |
-| Package `id` equals `remote_subscription_id` | Hide the repeated package ID; the dedicated remote ID row already shows it. |
-| Example package | `host: shop.example` and `enabled: false` produce two rows. A nested `settings` object produces no default row. An explicit fields list containing only `host` shows only that detail. |
-| Custom details | `renderDetails(data, entries)` receives raw service data and filtered entries. Select the fields to display. |
-
-### Русский
-
-### ID, сведения и подтверждение сервиса
-
-`subscription.plugin` — Постоянные поля plugin приходят из `subscriptions_get`. Ключи внутри пакетов данных определяются самим сервисом.
-
-| Поле или условие | Значение и действие приложения |
-| --- | --- |
-| `remote_subscription_id` | ID подписки в подключённом сервисе. Числовое значение делает блок видимым даже без дополнительных сведений. |
-| `remote_subscription_data_user` | Данные сервиса для покупателя. Без `fields` подходящие простые значения становятся строками. `host` получает переведённую подпись, другие ключи сохраняют своё имя. |
-| `remote_subscription_tariff_usages` | Показатели для `SubscriptionPlanSummary`. Подходящие значения здесь тоже делают блок сервиса видимым, но не повторяются в его списке сведений. |
-| `remote_subscription_last_sync` | Дата и время последнего подтверждения. Без даты строка сообщает об ожидании подтверждения; состояние доступа по ней не определяется. |
-| `remote_subscription_sync_pending` | Отдельный признак, по которому карточка выбирает ожидание до проверки `active_until`. |
-| Нет числового ID сервиса и подходящих значений | Блок скрывается, в том числе при отсутствии `plugin`. Одной даты подтверждения для видимости недостаточно. |
-
-### Какие значения становятся строками
-
-| Поле или условие | Значение и действие приложения |
-| --- | --- |
-| Строки, числа и логические значения | Выводятся непустые строки, конечные числа и логические значения, включая ноль и false. Пропускаются null, вложенные объекты, массивы, ключи учётных данных и расположения хранилищ. |
-| `fields[].key` и `fields[].label` | Выбирают ключи в заданном порядке и при необходимости заменяют подпись. Отсутствующие и неподходящие значения пропускаются; выбор ключа не отменяет фильтрацию. |
-| `id` пакета равен `remote_subscription_id` | Повторный ID пакета скрывается: его уже показывает отдельная строка ID сервиса. |
-| Пример пакета | `host: shop.example` и `enabled: false` дают две строки. Вложенный объект `settings` по умолчанию не выводится. Явный список fields только с `host` оставляет лишь это сведение. |
-| Собственные сведения | `renderDetails(data, entries)` получает исходные данные сервиса и отфильтрованные записи. Выберите поля для отображения. |
-
-[English guide](https://orionmarket.place/en/sandbox/components/react/subscription-remote) · [Русский](https://orionmarket.place/ru/sandbox/components/react/subscription-remote)
-
-## Initial service setup / Первичная настройка сервиса
-
-Success confirms that the subscription and its paid or trial period are saved. For a connected service, setup continues in the background; a temporary provider outage keeps the purchased period and is retried automatically. Refresh `subscriptions_get` and the wallet balance. Show Pending while `plugin.remote_subscription_sync_pending` is true; `remote_subscription_id` can be null before the service accepts setup. Use this existing subscription instead of submitting another purchase. Automatic renewal is initially disabled.
-
-Успех подтверждает сохранение подписки и её оплаченного или пробного периода. Подключённый сервис настраивается в фоне; при временной недоступности сервиса купленный период сохраняется, а настройка повторяется автоматически. Обновите `subscriptions_get` и баланс кошелька. Пока `plugin.remote_subscription_sync_pending` равен true, показывайте ожидание; до принятия настройки сервисом `remote_subscription_id` может быть null. Используйте существующую подписку вместо повторной покупки. Автоматическое продление изначально отключено.

package/templates/components/orionplace/subscriptions/SubscriptionRemoteDetails.module.css

@@ -1,57 +0,0 @@
-.root {
-  display: grid;
-  gap: 0.75rem;
-  color: var(--orionplace-text);
-  font-family: inherit;
-}
-
-.root h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-}
-
-.root h3 svg {
-  width: 1rem;
-  height: 1rem;
-  flex: 0 0 auto;
-}
-
-.root dl {
-  display: grid;
-  gap: 0.75rem 2rem;
-  margin: 0;
-}
-
-.root dl > div {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-/* A label is body text in the muted colour, as `op-feature-muted` in Nuxt. */
-.root dt {
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.root dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-/* The subscriptions page's own width, as in the other packages. */
-@container (min-width: 592px) {
-  .root dl {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}

package/templates/components/orionplace/subscriptions/SubscriptionRemoteDetails.tsx

@@ -1,101 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { JsonValue } from '@/interfaces/orionplace/transport';
-import type { ICustomerSubscription } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
-import { subscriptionManageLabels } from '@/lib/orionplace/subscriptionManageLabels';
-import {
-  subscriptionHasRemote,
-  subscriptionRemoteEntries,
-  type SubscriptionRemoteEntry,
-  type SubscriptionRemoteField,
-} from '@/lib/orionplace/subscriptionRemote';
-import styles from './SubscriptionRemoteDetails.module.css';
-
-export interface SubscriptionRemoteDetailsProps {
-  subscription: ICustomerSubscription;
-  fields?: SubscriptionRemoteField[];
-  className?: string;
-  renderDetails?: (
-    data: JsonValue,
-    entries: SubscriptionRemoteEntry[],
-  ) => ReactNode;
-}
-
-export function SubscriptionRemoteDetails({
-  subscription,
-  fields,
-  className = '',
-  renderDetails,
-}: SubscriptionRemoteDetailsProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const copy = subscriptionManageLabels(locale);
-  const plugin = subscription.plugin;
-  if (!subscriptionHasRemote(subscription)) {
-    return null;
-  }
-  const remoteId = plugin.remote_subscription_id;
-  const named: Record<string, string> = { host: copy.remoteHost };
-  const entries = subscriptionRemoteEntries(
-    plugin.remote_subscription_data_user,
-    fields,
-  )
-    .filter(
-      (entry) => !(entry.key === 'id' && entry.value === String(remoteId)),
-    )
-    .map((entry) => ({
-      ...entry,
-      label:
-        entry.label === entry.key
-          ? (named[entry.key] ?? entry.label)
-          : entry.label,
-    }));
-  const moment = plugin.remote_subscription_last_sync;
-  const synced = moment?.date
-    ? `${moment.date} ${moment.time}`.trim()
-    : copy.remoteSyncPending;
-
-  return (
-    <section
-      className={`${styles.root} ${className}`.trim()}
-      data-feature-part="SubscriptionRemoteDetails"
-      data-subscription-remote-details
-    >
-      <h3>
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M4 5h16v6H4zM4 13h16v6H4zM8 8h.01M8 16h.01" />
-        </svg>
-        {copy.remoteTitle}
-      </h3>
-      <dl>
-        {typeof remoteId === 'number' ? (
-          <div>
-            <dt>{copy.remoteId}</dt>
-            <dd>{remoteId}</dd>
-          </div>
-        ) : null}
-        <div>
-          <dt>{copy.remoteSync}</dt>
-          <dd>{synced}</dd>
-        </div>
-        {renderDetails
-          ? renderDetails(plugin.remote_subscription_data_user, entries)
-          : entries.map((entry) => (
-              <div key={entry.key}>
-                <dt>{entry.label}</dt>
-                <dd>{entry.value}</dd>
-              </div>
-            ))}
-      </dl>
-    </section>
-  );
-}

package/templates/components/orionplace/subscriptions/SubscriptionRenewalDialog.README.md

@@ -1,109 +0,0 @@
-# SubscriptionRenewalDialog · React
-
-## English
-
-`SubscriptionRenewalDialog` edits automatic renewal for `subscription`. Paid
-periods come from `plan.prices`, are ordered by duration and show the selected
-currency amount. A period whose number of days matches
-`subscription.renew_period.days` is selected when the dialog opens. The off
-choice is selected when the subscription has no matching renewal period.
-
-Submit calls `onSubmit` with `existed_subscription` and the selected
-`renew_period`. Turning renewal off omits `renew_period`. The current setting,
-the charge timing and the resulting paid duration are stated separately. An
-unchanged off setting cannot be submitted.
-
-`pending` blocks changes, submit and dismissal. `error` displays the general
-failure. `modal={false}` uses inline native-dialog presentation. Modal mode
-locks page scrolling, manages focus and restores the opener. Changing `modal`
-while the dialog is open switches it in place and keeps the entered values and
-the focused field. Source is maintained in
-`components/orionplace/subscriptions/SubscriptionRenewalDialog.tsx`.
-
-### Props
-
-| Prop                                                               | Meaning                                                                                               |
-| ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------- |
-| `subscription?: ICustomerSubscription`                             | Customer subscription displayed or changed by the component.                                          |
-| `plan?: ISubscribeTariff`                                          | Tariff plan associated with the current card or subscription.                                         |
-| `pending?: boolean`                                                | Shows the loading state and blocks duplicate actions.                                                 |
-| `error?: string`                                                   | Customer-visible error for the component request; omit it when no request failed.                     |
-| `modal?: boolean`                                                  | Uses a native modal dialog when true and an inline panel when false.                                  |
-| `onSubmit?: (request: ISubscriptionRenewalSettingRequest) => void` | Called when the visitor submits the confirmed form values. The callback payload is shown in its type. |
-| `onClose?: () => void`                                             | Called when the visitor closes the panel or dialog. The callback has no payload.                      |
-
-## Русский
-
-`SubscriptionRenewalDialog` меняет автопродление `subscription`. Платные
-периоды берутся из `plan.prices`, сортируются по длительности и показывают
-сумму в выбранной валюте. При открытии выбирается период, число дней которого
-совпадает с `subscription.renew_period.days`. Если подходящего периода нет,
-выбирается выключенное автопродление.
-
-Отправка вызывает `onSubmit` с `existed_subscription` и выбранным
-`renew_period`. При выключении автопродления поле `renew_period` не отправляется.
-Текущая настройка, момент списания и новая длительность оплаченного периода
-объясняются отдельно. Неизменённую выключенную настройку отправить нельзя.
-
-Во время `pending` заблокированы изменения, отправка и закрытие. `error`
-показывает общую ошибку. `modal={false}` использует системный диалог внутри
-страницы. Модальный режим блокирует прокрутку, управляет фокусом и возвращает
-его открывшему элементу. Если изменить `modal`, пока окно открыто, оно
-переключается на месте, а введённые значения и поле с фокусом сохраняются.
-Исходный файл:
-`components/orionplace/subscriptions/SubscriptionRenewalDialog.tsx`.
-
-### Свойства
-
-| Свойство                                                           | Назначение                                                                                                    |
-| ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| `subscription?: ICustomerSubscription`                             | Подписка покупателя, которую показывает или изменяет компонент.                                               |
-| `plan?: ISubscribeTariff`                                          | Тарифный план текущей карточки или подписки.                                                                  |
-| `pending?: boolean`                                                | Показывает загрузку и блокирует повторные действия.                                                           |
-| `error?: string`                                                   | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                          |
-| `modal?: boolean`                                                  | Показывает нативное модальное окно при `true` и встроенную панель при `false`.                                |
-| `onSubmit?: (request: ISubscriptionRenewalSettingRequest) => void` | Вызывается, когда покупатель отправляет подтверждённые значения формы. Данные обработчика указаны в его типе. |
-| `onClose?: () => void`                                             | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.                      |
-## Response fields and application actions
-
-The following tables describe the response and the supplied composition’s follow-up actions. The framework-specific props and events above identify which work belongs to the component and which belongs to its parent.
-
-### English
-
-### What the dialog submits
-
-| Field or condition | Meaning and application action |
-| --- | --- |
-| `existed_subscription` | Purchased subscription ID from `subscriptions_get` → `page_data.data[].id`. |
-| `renew_period` | The selected plan price’s `tariff_cost_id`. The optional `plan` prop supplies the choices. Omit the field to turn renewal off; without a plan, the dialog can still offer disabling an existing setting. |
-
-### What a successful save means
-
-| Field or condition | Meaning and application action |
-| --- | --- |
-| No `renew_period` | Automatic renewal is disabled. This request purchases no period; already paid access continues to its end date. |
-| An active or future paid period exists | The renewal choice is saved. This request does not purchase another period immediately. |
-| No available paid period; sufficient balance | The selected period, including its applicable option charge, is paid from the balance and starts immediately. |
-| No available paid period; insufficient balance | The renewal choice is saved successfully, but no period is purchased. Show the current end date and balance; the customer needs to fund the balance before a renewal can be paid. |
-| After `onSubmit` | The host sends the request and reloads `subscriptions_get` and `profile_get`. `renew_period` confirms the saved choice; `active_until` and the synchronization flag determine access status. Success alone confirms the setting, not renewed access. |
-
-### Русский
-
-### Что передаёт окно
-
-| Поле или условие | Значение и действие приложения |
-| --- | --- |
-| `existed_subscription` | ID купленной подписки из `subscriptions_get` → `page_data.data[].id`. |
-| `renew_period` | `tariff_cost_id` выбранной цены тарифа. Варианты берутся из необязательного свойства `plan`. Пропустите поле для отключения продления; без тарифа окно всё ещё позволяет отключить существующую настройку. |
-
-### Что означает успешное сохранение
-
-| Поле или условие | Значение и действие приложения |
-| --- | --- |
-| Нет `renew_period` | Автопродление отключается. Запрос не покупает период; оплаченный доступ сохраняется до своей даты окончания. |
-| Есть активный или будущий оплаченный период | Выбор продления сохраняется. Этот запрос не покупает дополнительный период немедленно. |
-| Нет доступного оплаченного периода; средств достаточно | Выбранный период с применимой доплатой за опцию оплачивается с баланса и начинается сразу. |
-| Нет доступного оплаченного периода; средств недостаточно | Настройка продления успешно сохраняется, но период не покупается. Покажите текущую дату окончания и баланс; для оплаты продления покупателю нужно пополнить баланс. |
-| После `onSubmit` | Родитель отправляет запрос и загружает `subscriptions_get` и `profile_get`. `renew_period` подтверждает настройку; `active_until` и признак синхронизации определяют состояние доступа. Успех сам по себе подтверждает сохранение настройки, но не новый оплаченный доступ. |
-
-[English guide](https://orionmarket.place/en/sandbox/components/react/subscription-renewal) · [Русский](https://orionmarket.place/ru/sandbox/components/react/subscription-renewal)