orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/components/orionplace/subscriptions/SubscriptionPlanSummary.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useOrionplaceCatalogStore } from '@/stores/orionplaceCatalog';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { tariffFeatures } from '@/utils/orionplace/tariffs';
+  import { subscriptionUsageMeters } from '@/utils/orionplace/subscriptionUsage';
+  import { subscriptionManageLabels } from '@/utils/orionplace/subscriptionManageLabels';
+  import {
+    getAvailableNestedValueFromObject,
+    plainText,
+  } from '@/utils/orionplace/presentation';
+  import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
+  import type { ICustomerSubscription } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+  import OrionplaceImage from '@/components/orionplace/shared/OrionplaceImage.vue';
+  import OrionplaceInfoHint from '@/components/orionplace/shared/OrionplaceInfoHint.vue';
+
+  const props       = defineProps<{
+    plan?: ISubscribeTariff;
+    subscription?: ICustomerSubscription;
+  }>();
+  const catalogStore   = useOrionplaceCatalogStore();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const copy           = computed(() => subscriptionManageLabels(selectionStore.localeCode));
+  const planName       = computed(
+    () =>
+      getAvailableNestedValueFromObject(
+        props.plan?.locales,
+        selectionStore.localeCode,
+        'tariff_name',
+      ) || '',
+  );
+  const description = computed(() =>
+    plainText(
+      getAvailableNestedValueFromObject(
+        props.plan?.locales,
+        selectionStore.localeCode,
+        'tariff_short_description',
+      ),
+    ),
+  );
+  const picture     = computed(() => props.plan?.tariff_image?.small?.[0]);
+  const meters      = computed(() =>
+    subscriptionUsageMeters(
+      props.subscription?.plugin?.remote_subscription_tariff_usages ?? null,
+      props.plan,
+      selectionStore.localeCode,
+    ),
+  );
+  // A limit that already has a usage bar is not repeated in the plan list.
+  const features    = computed(() => {
+    if (!props.plan) {
+      return [];
+    }
+
+    const measured = new Set(meters.value.map((meter) => meter.limitKey));
+
+    return tariffFeatures(
+      props.plan,
+      catalogStore.storeTariffs?.subscriptions,
+      selectionStore.localeCode,
+    ).filter((feature) => !measured.has(feature.key));
+  });
+  const hasPlan     = computed(
+    () =>
+      Boolean(picture.value || description.value) ||
+      features.value.length > 0,
+  );
+  const visible     = computed(() => hasPlan.value || meters.value.length > 0);
+
+  // 24 × 24 stroke icons for the known usage values.
+  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 usageIcon(key: string) {
+    return usageIcons[key] ?? gaugeIcon;
+  }
+
+  // The bar turns to the attention color near the limit and to the danger
+  // color at it, so a nearly full storage is noticed before an upload fails.
+  function tone(share: number) {
+    if (share >= 1) {
+      return 'bg-orionplace-danger';
+    }
+
+    return share >= 0.8 ? 'bg-orionplace-attention' : 'bg-orionplace-accent';
+  }
+
+  function usageText(used: string, limit: string) {
+    return limit
+      ? copy.value.usageOf.replace('{used}', used).replace('{limit}', limit)
+      : used;
+  }
+</script>
+<template>
+  <!--
+    Two titled blocks: the plan and the usage the service reported. They sit
+    side by side from 48rem when both are present; the extend dialog passes
+    no subscription, so it shows the plan block alone.
+  -->
+  <section
+    v-if="visible"
+    class="grid min-w-0 gap-6 text-sm text-orionplace-text"
+    :class="{ '@min-[720px]:grid-cols-2 @min-[720px]:gap-8': hasPlan && meters.length }"
+    data-subscription-plan
+  >
+    <div
+      v-if="hasPlan"
+      class="grid min-w-0 content-start gap-4"
+      data-subscription-plan-block
+    >
+      <h4 class="op-feature-muted m-0 flex items-center gap-2 text-sm font-normal leading-5">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="h-4 w-4 shrink-0"
+        >
+          <path :d="planIcon" />
+        </svg>
+        {{ copy.planTitle }}
+      </h4>
+      <div
+        v-if="picture || description"
+        class="flex min-w-0 items-start gap-3"
+      >
+        <div
+          v-if="picture"
+          class="
+            box-border h-12 w-12 shrink-0 overflow-hidden
+            border border-solid border-orionplace-border
+            bg-orionplace-surface
+          "
+        >
+          <OrionplaceImage
+            :src="picture"
+            :alt="planName"
+            class="h-full w-full object-contain"
+          />
+        </div>
+        <p
+          v-if="description"
+          class="m-0 min-w-0 leading-6 text-orionplace-muted"
+        >
+          {{ description }}
+        </p>
+      </div>
+      <ul
+        v-if="features.length"
+        class="m-0 grid list-none gap-2 p-0"
+        :class="{ '@min-[592px]:grid-cols-2 @min-[592px]:gap-x-8': !meters.length }"
+        :aria-label="copy.planIncludes"
+        data-subscription-plan-features
+      >
+        <li
+          v-for="feature in features"
+          :key="feature.key"
+          class="flex min-w-0 items-start gap-2 leading-5"
+          :class="
+            feature.value === false
+              ? 'text-orionplace-muted'
+              : 'text-orionplace-text'
+          "
+        >
+          <svg
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="mt-0.5 h-4 w-4 shrink-0"
+          >
+            <path
+              v-if="feature.value !== false"
+              d="m3 8.5 3 3 7-7"
+            />
+            <path
+              v-else
+              d="M4 8h8"
+            />
+          </svg>
+          <span class="min-w-0">
+            {{ feature.label
+            }}<template v-if="feature.detail">: {{ feature.detail }}</template>
+            <OrionplaceInfoHint
+              v-if="feature.hint"
+              :label="feature.label"
+              :text="feature.hint"
+              class="ml-1"
+            />
+            <span
+              v-if="feature.value === false"
+              class="sr-only"
+            >
+              ({{ copy.planNotIncluded }})
+            </span>
+          </span>
+        </li>
+      </ul>
+    </div>
+    <div
+      v-if="meters.length"
+      class="grid min-w-0 content-start gap-4"
+      data-subscription-usage
+    >
+      <h4 class="op-feature-muted m-0 flex items-center gap-2 text-sm font-normal leading-5">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="h-4 w-4 shrink-0"
+        >
+          <path :d="gaugeIcon" />
+        </svg>
+        {{ copy.usageTitle }}
+      </h4>
+      <div
+        v-for="meter in meters"
+        :key="meter.key"
+        class="grid min-w-0 gap-2"
+        :data-subscription-usage-key="meter.key"
+      >
+        <div class="flex min-w-0 items-center justify-between gap-3">
+          <span class="flex min-w-0 items-center gap-2">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+              class="h-4 w-4 shrink-0 text-orionplace-muted"
+            >
+              <path :d="usageIcon(meter.key)" />
+            </svg>
+            <span class="min-w-0">
+              {{ meter.label
+              }}<OrionplaceInfoHint
+                v-if="meter.hint"
+                :label="meter.label"
+                :text="meter.hint"
+                class="ml-1"
+              />
+            </span>
+          </span>
+          <span class="shrink-0 tabular-nums">
+            {{ usageText(meter.used, meter.limit) }}
+          </span>
+        </div>
+        <div
+          v-if="meter.share !== null"
+          role="meter"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :aria-valuenow="Math.round(meter.share * 100)"
+          :aria-valuetext="usageText(meter.used, meter.limit)"
+          :aria-label="meter.label"
+          class="h-1.5 w-full overflow-hidden bg-orionplace-muted-surface"
+        >
+          <div
+            class="h-full"
+            :class="tone(meter.share)"
+            :style="{ width: `${meter.share * 100}%` }"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,138 @@
+# Subscription service details · Nuxt
+
+The [subscription service details](https://orionmarket.place/en/sandbox/components/nuxt/subscription-remote)
+are `app/components/orionplace/subscriptions/SubscriptionRemoteDetails.vue`,
+nested under My subscriptions in Components. The subscriptions page renders
+one for each subscription and the block appears only for a subscription that a
+subscription service runs. The block has no frame of its own; the subscription
+card places it in its footer, under the plan and usage.
+
+## Contract and dependencies
+
+`subscription` is the item of `subscriptions_get` to describe. Everything the
+block shows comes from that item's `plugin` object:
+
+- `remote_subscription_id` is the subscription's identifier on the service.
+- `remote_subscription_last_sync` is the moment the service last confirmed the
+  subscription. The storefront backend clears it while a change is waiting for
+  that confirmation, and the block then says the confirmation is still
+  awaited. The card separately checks `remote_subscription_sync_pending` before its end date.
+- `remote_subscription_data_user` is the package the service returned for the
+  customer.
+
+That package is written by the subscription service, so its keys belong to
+that service and are not part of the storefront contract. Without further
+configuration the component shows the plain text, number and true/false values
+it finds and shows nothing for a nested object, an empty value or a key that
+names a credential or a storage location. `host` is shown as Host (Хост in
+Russian); any other key keeps the name the service used. The package's `id`
+repeats `remote_subscription_id`, so an equal value is shown once.
+
+The usage the service reported in `remote_subscription_tariff_usages` is shown
+by [SubscriptionPlanSummary](./SubscriptionPlanSummary.README.md), next to
+the plan limits.
+
+## Rendering one service's own fields
+
+Pass `fields` to choose which keys are shown, in which order and under which
+label:
+
+```vue
+<SubscriptionRemoteDetails
+  :subscription="subscription"
+  :fields="[
+    { key: 'host', label: 'Application address' },
+    { key: 'id', label: 'Service record' },
+  ]"
+/>
+```
+
+For a package that needs its own markup, the `details` slot replaces the
+generated rows. It receives `data`, the package as the service returned it,
+and `entries`, the values the component prepared from it:
+
+```vue
+<SubscriptionRemoteDetails :subscription="subscription">
+  <template #details="{ data }">
+    <div class="flex flex-col gap-1">
+      <dt>Application address</dt>
+      <dd>{{ data?.host }}</dd>
+    </div>
+  </template>
+</SubscriptionRemoteDetails>
+```
+
+A credential or a storage location must not reach the page. The component
+drops those keys itself, and a slot that reads `data` directly is responsible
+for the same restraint.
+
+## Endpoint coverage
+
+- `subscriptions_get`
+
+## Related components
+
+[My subscriptions](https://orionmarket.place/en/sandbox/components/nuxt/subscriptions),
+[Plan and usage](https://orionmarket.place/en/sandbox/components/nuxt/subscription-plan),
+[Plan and option change](https://orionmarket.place/en/sandbox/components/nuxt/subscription-change).
+## 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 | The details slot receives raw service `data` and the filtered `entries`. Custom rendering must choose the fields it intends 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` оставляет лишь это сведение. |
+| Собственные сведения | Слот details получает исходные `data` сервиса и отфильтрованные `entries`. Собственный вывод должен выбирать предназначенные для отображения поля. |
+
+[English guide](https://orionmarket.place/en/sandbox/components/nuxt/subscription-remote) · [Русский](https://orionmarket.place/ru/sandbox/components/nuxt/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/app/components/orionplace/subscriptions/SubscriptionRemoteDetails.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { subscriptionManageLabels } from '@/utils/orionplace/subscriptionManageLabels';
+  import {
+    subscriptionHasRemote,
+    subscriptionRemoteEntries,
+  } from '@/utils/orionplace/subscriptionRemote';
+  import type { ISubscriptionRemoteField } from '@/utils/orionplace/subscriptionRemote';
+  import type { ICustomerSubscription } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+  import '@/components/orionplace/shared/features.css';
+
+  defineSlots<{
+    details(properties: {
+      data: unknown;
+      entries: ReturnType<typeof subscriptionRemoteEntries>;
+    }): unknown;
+  }>();
+
+  const props   = defineProps<{
+    subscription: ICustomerSubscription;
+    fields?: ISubscriptionRemoteField[];
+  }>();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const copy           = computed(() => subscriptionManageLabels(selectionStore.localeCode));
+  const plugin         = computed(() => props.subscription.plugin);
+  const present        = computed(() => subscriptionHasRemote(props.subscription));
+  // Keys of the service package that the storefront names itself.
+  const named   = computed<Record<string, string>>(() => ({
+    host: copy.value.remoteHost,
+  }));
+  /*
+   * `remote_subscription_data_user` is the package the subscription service
+   * itself returned, so its keys differ from one service to another. Without
+   * a declared `fields` list the component shows the plain values; a key the
+   * storefront knows, such as `host`, gets its translated name, and any other
+   * key keeps its own name. The package's `id` repeats
+   * `remote_subscription_id`, which already has its own row, so an equal
+   * value is shown once. The usage the service reported belongs to
+   * SubscriptionPlanSummary, beside the limits of the plan.
+   */
+  const details = computed(() => {
+    const remoteId = plugin.value?.remote_subscription_id;
+    const entries  = subscriptionRemoteEntries(
+      plugin.value?.remote_subscription_data_user ?? null,
+      props.fields,
+    );
+
+    return entries
+      .filter(
+        (entry) =>
+          !(entry.key === 'id' && entry.value === String(remoteId)),
+      )
+      .map((entry) => ({
+        ...entry,
+        label:
+          entry.label === entry.key
+            ? (named.value[entry.key] ?? entry.label)
+            : entry.label,
+      }));
+  });
+  /*
+   * The service clears the sync time while a change is waiting for its
+   * confirmation, which is the same condition the card's “being set up”
+   * state uses, so the row says that instead of showing an empty date.
+   */
+  const synced  = computed(() => {
+    const moment = plugin.value?.remote_subscription_last_sync;
+
+    if (!moment?.date) {
+      return copy.value.remoteSyncPending;
+    }
+
+    return `${moment.date} ${moment.time}`.trim();
+  });
+</script>
+<template>
+  <!--
+    The block has no frame of its own: the subscription card places it in its
+    footer, so one border separates it from the plan above.
+  -->
+  <section
+    v-if="present"
+    class="grid gap-3"
+    data-subscription-remote-details
+  >
+    <h3 class="op-feature-muted m-0 flex items-center gap-2 text-sm font-normal leading-5">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        class="h-4 w-4 shrink-0"
+      >
+        <path
+          d="M4 5h16v6H4zM4 13h16v6H4zM8 8h.01M8 16h.01"
+        />
+      </svg>
+      {{ copy.remoteTitle }}
+    </h3>
+    <dl class="m-0 grid gap-x-8 gap-y-3 @min-[592px]:grid-cols-2">
+      <div
+        v-if="typeof plugin?.remote_subscription_id === 'number'"
+        class="flex flex-col gap-1"
+      >
+        <dt class="op-feature-muted">{{ copy.remoteId }}</dt>
+        <dd class="m-0 text-sm tabular-nums">
+          {{ plugin.remote_subscription_id }}
+        </dd>
+      </div>
+      <div class="flex flex-col gap-1">
+        <dt class="op-feature-muted">{{ copy.remoteSync }}</dt>
+        <dd class="m-0 text-sm">{{ synced }}</dd>
+      </div>
+      <slot
+        name="details"
+        :data="plugin?.remote_subscription_data_user"
+        :entries="details"
+      >
+        <div
+          v-for="entry in details"
+          :key="entry.key"
+          class="flex flex-col gap-1"
+        >
+          <dt class="op-feature-muted">{{ entry.label }}</dt>
+          <dd class="m-0 break-words text-sm">{{ entry.value }}</dd>
+        </div>
+      </slot>
+    </dl>
+  </section>
+</template>

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

@@ -0,0 +1,85 @@
+# Automatic renewal · Nuxt
+
+The [automatic renewal dialog](https://orionmarket.place/en/sandbox/components/nuxt/subscription-renewal)
+is `app/components/orionplace/subscriptions/SubscriptionRenewalDialog.vue`,
+nested under My subscriptions in Components. The subscriptions page opens it
+for the `Automatic renewal` action of one subscription.
+
+## Contract and dependencies
+
+`subscription` is the item of `subscriptions_get` the customer opened. The
+parent passes the resolved plan in `plan`; the dialog reads the selected currency.
+
+The choices are “turn automatic renewal off” and every paid period of the plan.
+The current setting is preselected, and the dialog states what the chosen
+option does: renewal stops and the paid period stays available, or the amount
+is charged from the account balance when the paid period ends and the
+subscription continues for the chosen length. An ended subscription starts a paid period immediately only when the balance is sufficient. Otherwise the renewal choice is saved without purchasing a period.
+
+`plan` is the plan the subscriptions page read from the subscription's
+`tariff`, and it supplies the paid periods. Without a plan the dialog offers
+turning renewal off, which needs no plan period.
+
+`submit` emits `{ existed_subscription, renew_period? }` for
+`subscriptions_change_renew`; a request without `renew_period` turns automatic
+renewal off. The host sends the request and reloads the subscriptions from the
+confirmed response.
+
+While the request runs, the controls stay visible and disabled and the dialog
+cannot be dismissed. Field and general errors from `form_errors` stay beside
+the form. `modal` defaults to true; false renders the same dialog inside its
+container. Changing `modal` while the dialog is open switches it in place and
+keeps the entered values and the focused field.
+
+## Endpoint coverage
+
+- `subscriptions_change_renew`
+
+## Related components
+
+[My subscriptions](https://orionmarket.place/en/sandbox/components/nuxt/subscriptions),
+[Subscription renewal payment](https://orionmarket.place/en/sandbox/components/nuxt/subscription-extend),
+[Subscription plans](https://orionmarket.place/en/sandbox/components/nuxt/subscription-plans).
+## 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 `submit` | 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` | Автопродление отключается. Запрос не покупает период; оплаченный доступ сохраняется до своей даты окончания. |
+| Есть активный или будущий оплаченный период | Выбор продления сохраняется. Этот запрос не покупает дополнительный период немедленно. |
+| Нет доступного оплаченного периода; средств достаточно | Выбранный период с применимой доплатой за опцию оплачивается с баланса и начинается сразу. |
+| Нет доступного оплаченного периода; средств недостаточно | Настройка продления успешно сохраняется, но период не покупается. Покажите текущую дату окончания и баланс; для оплаты продления покупателю нужно пополнить баланс. |
+| После `submit` | Родитель отправляет запрос и загружает `subscriptions_get` и `profile_get`. `renew_period` подтверждает настройку; `active_until` и признак синхронизации определяют состояние доступа. Успех сам по себе подтверждает сохранение настройки, но не новый оплаченный доступ. |
+
+[English guide](https://orionmarket.place/en/sandbox/components/nuxt/subscription-renewal) · [Русский](https://orionmarket.place/ru/sandbox/components/nuxt/subscription-renewal)