orionplace-react 0.7.7 → 0.8.0

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

@@ -1,384 +0,0 @@
-'use client';
-
-import '@/components/orionplace/shared/dialogs.css';
-
-import {
-  useEffect,
-  useId,
-  useMemo,
-  useState,
-  type FormEvent,
-  type MouseEvent,
-} from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import { useOrionplaceDialog } from '@/hooks/useOrionplaceDialog';
-import type {
-  ISubscribeTariff,
-  ISubscribeTariffOption,
-} from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
-import type {
-  ICustomerSubscription,
-  ISubscriptionRenewRequest,
-} from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
-import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
-import {
-  subscriptionDays,
-  subscriptionManageLabels,
-} from '@/lib/orionplace/subscriptionManageLabels';
-import { subscriptionPeriodChoices } from '@/lib/orionplace/subscriptionPlans';
-import { tariffMoney, tariffOptionAmount } from '@/lib/orionplace/tariffs';
-import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
-import { SubscriptionPlanSummary } from './SubscriptionPlanSummary';
-import styles from './SubscriptionDialog.module.css';
-
-export interface SubscriptionExtendDialogProps {
-  subscription?: ICustomerSubscription;
-  plan?: ISubscribeTariff;
-  option?: ISubscribeTariffOption;
-  pending?: boolean;
-  error?: string;
-  modal?: boolean;
-  balance?: number;
-  walletHref?: (locale: string) => string;
-  onSubmit?: (request: ISubscriptionRenewRequest) => void;
-  onClose?: () => void;
-}
-
-export function SubscriptionExtendDialog({
-  subscription,
-  plan,
-  option,
-  pending = false,
-  error = '',
-  modal = true,
-  balance: balanceOverride,
-  walletHref = (locale) => `/wallet?locale=${encodeURIComponent(locale)}`,
-  onSubmit,
-  onClose,
-}: SubscriptionExtendDialogProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const currencyId = useOrionplaceSelections((state) => state.currencyId);
-  const currency = useOrionplaceSelections(
-    (state) => state.init?.currencies[state.currencyId],
-  );
-  const storedBalance = useOrionplaceSelections(
-    (state) => state.init?.wallet?.[state.currencyId]?.transform_value,
-  );
-  const balance = balanceOverride ?? storedBalance;
-  const copy = subscriptionManageLabels(locale);
-  const id = useId();
-  const { dialog, initialFocus } = useOrionplaceDialog(subscription?.id, modal);
-  const choices = useMemo(
-    () =>
-      subscriptionPeriodChoices(plan, currencyId).map((choice) => ({
-        ...choice,
-        length: subscriptionDays(choice.days, locale),
-        price: tariffMoney(choice.amount, locale, currency),
-      })),
-    [plan, currencyId, locale, currency],
-  );
-  const choiceKey = choices.map((choice) => choice.id).join(',');
-  const initialPeriod =
-    choices.find(
-      (choice) => choice.days === subscription?.renew_period?.days,
-    ) ?? choices[0];
-  const [period, setPeriod] = useState<number | undefined>(initialPeriod?.id);
-  const [renewalChoice, setRenewalChoice] = useState(
-    initialPeriod && initialPeriod.days === subscription?.renew_period?.days
-      ? String(initialPeriod.id)
-      : '',
-  );
-  const [promo, setPromo] = useState('');
-  const [confirming, setConfirming] = useState(false);
-  const chosen = choices.find((choice) => choice.id === period);
-  const renewal = choices.find((choice) => String(choice.id) === renewalChoice);
-  const planName =
-    getAvailableNestedValueFromObject(plan?.locales, locale, 'tariff_name') ||
-    copy.manage;
-  const optionName =
-    getAvailableNestedValueFromObject(option?.locale, locale, 'option_name') ||
-    copy.optionPrice;
-  const optionAmount =
-    option && chosen
-      ? tariffOptionAmount(option, chosen.periodId, currencyId)
-      : undefined;
-  const visibleOptionAmount =
-    typeof optionAmount === 'number' && optionAmount > 0
-      ? optionAmount
-      : undefined;
-  const low =
-    chosen?.amount !== undefined &&
-    balance !== undefined &&
-    chosen.amount > balance;
-  const renewalOptions: Record<string, string> = {
-    '': copy.renewalOff,
-    ...Object.fromEntries(
-      choices.map((choice) => [
-        String(choice.id),
-        `${choice.length} · ${choice.price}`,
-      ]),
-    ),
-  };
-  const renewalNote = renewal
-    ? copy.renewalEffectOn
-        .replace('{price}', renewal.price)
-        .replace('{days}', renewal.length)
-    : copy.renewalEffectOff;
-  const after = copy.extendAfter.replace('{period}', chosen?.length || '—');
-
-  useEffect(() => {
-    const matching = choices.find(
-      (choice) => choice.days === subscription?.renew_period?.days,
-    );
-    setPeriod((matching ?? choices[0])?.id);
-    setRenewalChoice(matching ? String(matching.id) : '');
-    setPromo('');
-    setConfirming(false);
-  }, [subscription?.id, choiceKey]);
-
-  function money(amount: number | undefined) {
-    return tariffMoney(amount, locale, currency);
-  }
-
-  function close() {
-    if (!pending) {
-      onClose?.();
-    }
-  }
-
-  function back() {
-    if (confirming) {
-      setConfirming(false);
-    } else {
-      close();
-    }
-  }
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (pending || !subscription || !chosen) {
-      return;
-    }
-    if (!confirming) {
-      setConfirming(true);
-      return;
-    }
-    onSubmit?.({
-      paid_subscription: subscription.id,
-      period_to_add: chosen.id,
-      ...(renewal ? { renew_period: renewal.id } : {}),
-      ...(promo.trim() ? { attach_issue: promo.trim() } : {}),
-    });
-  }
-
-  function backdrop(event: MouseEvent<HTMLDialogElement>) {
-    const bounds = dialog.current?.getBoundingClientRect();
-    if (
-      modal &&
-      event.target === dialog.current &&
-      bounds &&
-      (event.clientX < bounds.left ||
-        event.clientX > bounds.right ||
-        event.clientY < bounds.top ||
-        event.clientY > bounds.bottom)
-    ) {
-      close();
-    }
-  }
-
-  if (!subscription) {
-    return null;
-  }
-
-  return (
-    <dialog
-      data-stable-modal="wide"
-      ref={dialog}
-      className={`${styles.dialog} ${styles.wide} ${modal ? '' : styles.inline}`.trim()}
-      aria-labelledby={`${id}-title`}
-      aria-describedby={`${id}-summary`}
-      aria-busy={pending}
-      data-feature-part="SubscriptionExtendDialog"
-      data-subscription-extend-dialog
-      onCancel={(event) => {
-        event.preventDefault();
-        close();
-      }}
-      onKeyDown={(event) => {
-        // Escape belongs to this window, not to the page behind it.
-        if (event.key === 'Escape') {
-          event.stopPropagation();
-        }
-      }}
-      onClick={backdrop}
-    >
-      <form
-        className={styles.form}
-        onSubmit={submit}
-      >
-        <header className={styles.header}>
-          <div>
-            <p className={styles.eyebrow}>{planName}</p>
-            <h2
-              id={`${id}-title`}
-              className={styles.title}
-            >
-              {copy.extendTitle}
-            </h2>
-          </div>
-          <button
-            ref={initialFocus}
-            type="button"
-            className={styles.close}
-            disabled={pending}
-            aria-label={copy.close}
-            onClick={close}
-          >
-            ×
-          </button>
-        </header>
-        <div className={styles.columns}>
-          <div className={styles.controls}>
-            <p
-              id={`${id}-summary`}
-              className={styles.description}
-            >
-              {copy.extendSummary}
-            </p>
-            {!confirming && choices.length > 1 ? (
-              <fieldset
-                className={styles.fieldset}
-                data-subscription-extend-periods
-              >
-                <legend>{copy.period}</legend>
-                {choices.map((choice) => (
-                  <label
-                    key={choice.id}
-                    className={styles.choice}
-                  >
-                    <span>
-                      <input
-                        type="radio"
-                        name="period_to_add"
-                        value={choice.id}
-                        checked={period === choice.id}
-                        disabled={pending}
-                        onChange={() => setPeriod(choice.id)}
-                      />
-                      <span>{choice.length}</span>
-                    </span>
-                    <span>{choice.price}</span>
-                  </label>
-                ))}
-              </fieldset>
-            ) : null}
-            {!confirming ? (
-              <label className={styles.label}>
-                <span>{copy.promo}</span>
-                <input
-                  name="attach_issue"
-                  maxLength={20}
-                  autoComplete="off"
-                  placeholder={copy.promoHint}
-                  value={promo}
-                  disabled={pending}
-                  onChange={(event) => setPromo(event.currentTarget.value)}
-                />
-              </label>
-            ) : null}
-            {!confirming ? (
-              <div className={styles.selectField}>
-                <OrionplaceSelect
-                  value={renewalChoice}
-                  options={renewalOptions}
-                  label={copy.renewalSettings}
-                  disabled={pending}
-                  onValueChange={setRenewalChoice}
-                />
-                <span className={styles.renewalNote}>{renewalNote}</span>
-              </div>
-            ) : null}
-          </div>
-          <aside
-            className={styles.summaryColumn}
-            data-subscription-extend-plan
-          >
-            <SubscriptionPlanSummary
-              plan={plan}
-              className={styles.planBox}
-            />
-            <dl className={styles.summary}>
-              <div>
-                <dt>{copy.period}</dt>
-                <dd>{chosen?.length || '—'}</dd>
-              </div>
-              <div>
-                <dt>{copy.planPrice}</dt>
-                <dd>{chosen?.price || '—'}</dd>
-              </div>
-              {visibleOptionAmount !== undefined ? (
-                <div>
-                  <dt>{optionName}</dt>
-                  <dd>{money(visibleOptionAmount)}</dd>
-                </div>
-              ) : null}
-              <div className={styles.total}>
-                <dt>{copy.balance}</dt>
-                <dd>{money(balance)}</dd>
-              </div>
-            </dl>
-          </aside>
-        </div>
-        {confirming ? (
-          <p
-            className={styles.notice}
-            role="status"
-          >
-            {after}
-          </p>
-        ) : null}
-        {low ? (
-          <>
-            <p className={styles.attention}>{copy.insufficient}</p>
-            <a
-              className={styles.wallet}
-              href={walletHref(locale)}
-            >
-              {copy.topUp}
-            </a>
-          </>
-        ) : null}
-        {error ? (
-          <p
-            role="alert"
-            className={styles.error}
-          >
-            {error}
-          </p>
-        ) : null}
-        <div className={styles.actions}>
-          <button
-            type="button"
-            className={styles.secondary}
-            disabled={pending}
-            onClick={back}
-          >
-            {confirming ? copy.cancel : copy.close}
-          </button>
-          <button
-            type="submit"
-            className={styles.primary}
-            disabled={pending || !chosen}
-          >
-            {pending ? <span className={styles.spinner} aria-hidden="true" /> : null}
-            {pending
-              ? copy.extendPending
-              : confirming
-                ? copy.extendSubmit
-                : copy.extendConfirm}
-          </button>
-        </div>
-      </form>
-    </dialog>
-  );
-}

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

@@ -1,116 +0,0 @@
-# SubscriptionPlanSummary · React
-
-## English
-
-`SubscriptionPlanSummary` combines the selected plan with usage reported for
-one customer subscription. `plan` supplies the first small image, localized
-plain-text short description, module flags and numeric limits. Image space is
-reserved at 48 by 48. Known limits use their maintained units, and zero storage
-or API-request limits read as unlimited.
-
-When `subscription` is supplied, numeric values from
-`plugin.remote_subscription_tariff_usages` are matched to the plan field named
-`max_` plus the usage key. For example, `files_size` uses
-`max_files_size`. A positive limit shows a bounded meter and changes tone near
-and at the limit. Without a positive limit, the used amount remains visible
-without a meter. Credential-shaped keys and nonnumeric values are omitted. A
-limit represented by a usage row is not repeated in the feature list.
-
-The component emits nothing and makes no request. It renders nothing when the
-plan has no visible identity or features and the service reported no usable
-usage. Source is maintained in
-`components/orionplace/subscriptions/SubscriptionPlanSummary.tsx`.
-
-### Props
-
-| Prop                                   | Meaning                                                       |
-| -------------------------------------- | ------------------------------------------------------------- |
-| `plan?: ISubscribeTariff`              | Tariff plan associated with the current card or subscription. |
-| `subscription?: ICustomerSubscription` | Customer subscription displayed or changed by the component.  |
-| `className?: string`                   | Additional CSS class for the component root.                  |
-
-## Русский
-
-`SubscriptionPlanSummary` объединяет выбранный тариф и использование одной
-подписки покупателя. `plan` задаёт первое малое изображение, локализованное
-краткое описание обычным текстом, флаги модулей и числовые ограничения. Для
-изображения заранее выделяется область 48 на 48. Известные ограничения
-показываются с поддерживаемыми единицами, а нулевой лимит хранилища или
-API-запросов означает отсутствие ограничения.
-
-При наличии `subscription` числовые значения из
-`plugin.remote_subscription_tariff_usages` сопоставляются с полем тарифа,
-названным `max_` плюс ключ использования. Например, `files_size` использует
-`max_files_size`. Положительный лимит выводится ограниченным индикатором,
-который меняет цвет рядом с пределом и на пределе. Без положительного лимита
-видна использованная величина без индикатора. Ключи, похожие на учётные данные,
-и нечисловые значения скрываются. Лимит с отдельной строкой использования не
-повторяется в списке возможностей.
-
-Компонент не отправляет события и запросы. Если у тарифа нет видимого
-изображения, описания или возможностей и сервис не передал подходящие данные
-использования, компонент ничего не выводит. Исходный файл:
-`components/orionplace/subscriptions/SubscriptionPlanSummary.tsx`.
-
-### Свойства
-
-| Свойство                               | Назначение                                                      |
-| -------------------------------------- | --------------------------------------------------------------- |
-| `plan?: ISubscribeTariff`              | Тарифный план текущей карточки или подписки.                    |
-| `subscription?: ICustomerSubscription` | Подписка покупателя, которую показывает или изменяет компонент. |
-| `className?: string`                   | Дополнительный CSS-класс корневого элемента.                    |
-## 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
-
-### Usage values and their limits
-
-`subscription.plugin.remote_subscription_tariff_usages` — Service-reported usage from `subscriptions_get`. The component matches each numeric key to max_ plus that key in plan.tariff_variables_json; it does not measure usage in the browser.
-
-| Field or condition | Meaning and application action |
-| --- | --- |
-| `files_size` → `max_files_size` | Storage in MB. Whole multiples of 1024 MB are displayed in GB. A zero limit means unlimited storage; zero usage still means 0 MB. |
-| `api_requests` → `max_api_requests` | Request count for the calendar month. The monthly counter starts again next month. A zero limit means unlimited requests. |
-| `front_hosts` → `max_front_hosts` | Number of connected storefront domains. A zero limit is displayed as zero. |
-| `sellers` → `max_sellers` | Seller account count. A zero limit means unlimited sellers. |
-| Missing or nonnumeric limit | Display the reported usage without a limit or progress bar. Other service-defined keys retain their key as the label; their meaning and unit depend on that service. |
-| Nonnumeric usage | Strings, booleans, arrays, nested objects and nonfinite numbers do not become usage meters. Credential/storage-location keys are omitted. |
-| Positive numeric limit | The bar shows usage divided by the limit, bounded between empty and full. The displayed usage retains the reported number even above the limit; zero limits have no bar. |
-
-### Optional inputs and plan settings
-
-| Field or condition | Meaning and application action |
-| --- | --- |
-| Only `plan` | Show the plan description, image and supported parameters; there are no service usage readings. |
-| Only `subscription` | Show eligible usage values without plan limits. With neither plan details nor eligible usage, the block is hidden. |
-| `sales_module`, `blog_module`, `qr_module` | Boolean plan capabilities for sales, blog and QR stock labelling. The built-in parameter reference is on `subscriptions_guest_search`. |
-| A parameter already shown beside usage | Its limit is omitted from the separate plan parameter list so it appears once. |
-
-### Русский
-
-### Показатели использования и пределы
-
-`subscription.plugin.remote_subscription_tariff_usages` — Показатели сервиса из `subscriptions_get`. Каждому числовому ключу компонент сопоставляет max_ плюс этот ключ в plan.tariff_variables_json; браузер сам использование не измеряет.
-
-| Поле или условие | Значение и действие приложения |
-| --- | --- |
-| `files_size` → `max_files_size` | Хранилище в МБ. Целые кратные 1024 МБ выводятся в ГБ. Нулевой предел означает отсутствие ограничения; нулевое использование остаётся 0 МБ. |
-| `api_requests` → `max_api_requests` | Число запросов за календарный месяц. В следующем месяце счётчик начинается заново. Нулевой предел означает отсутствие ограничения. |
-| `front_hosts` → `max_front_hosts` | Количество подключённых доменов магазина. Нулевой предел выводится как ноль. |
-| `sellers` → `max_sellers` | Количество аккаунтов продавцов. Нулевой предел означает отсутствие ограничения. |
-| Предел отсутствует или не является числом | Выводится использование без предела и шкалы. Другие ключи сервиса сохраняют своё имя в подписи; их смысл и единицы определяет этот сервис. |
-| Использование не является числом | Строки, логические значения, массивы, вложенные объекты и неконечные числа не становятся показателями. Ключи учётных данных и расположения хранилищ пропускаются. |
-| Положительный числовой предел | Шкала показывает отношение использования к пределу от пустой до полной. Само число сохраняется и при превышении предела; для нулевого предела шкалы нет. |
-
-### Необязательные данные и параметры тарифа
-
-| Поле или условие | Значение и действие приложения |
-| --- | --- |
-| Только `plan` | Выводятся описание, изображение и поддерживаемые параметры тарифа; показателей использования сервиса нет. |
-| Только `subscription` | Выводятся подходящие показатели без пределов тарифа. Если нет ни данных тарифа, ни подходящих показателей, блок скрывается. |
-| `sales_module`, `blog_module`, `qr_module` | Логические признаки модулей продаж, блога и QR-маркировки остатков. Справочник встроенных параметров находится в `subscriptions_guest_search`. |
-| Параметр уже показан рядом с использованием | Его предел исключается из отдельного списка параметров тарифа, чтобы выводиться один раз. |
-
-[English guide](https://orionmarket.place/en/sandbox/components/react/subscription-plan) · [Русский](https://orionmarket.place/ru/sandbox/components/react/subscription-plan)

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

@@ -1,168 +0,0 @@
-.root {
-  display: grid;
-  min-width: 0;
-  gap: 1.5rem;
-  color: var(--orionplace-text);
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-}
-
-.block {
-  display: grid;
-  min-width: 0;
-  align-content: start;
-  gap: 1rem;
-}
-
-.block h4 {
-  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;
-}
-
-.block h4 svg,
-.meterHeading svg {
-  width: 1rem;
-  height: 1rem;
-  flex: 0 0 auto;
-}
-
-.identity {
-  display: flex;
-  min-width: 0;
-  align-items: start;
-  gap: 0.75rem;
-}
-
-.identity img,
-.identity [data-image-placeholder] {
-  box-sizing: border-box;
-  width: 3rem;
-  height: 3rem;
-  flex: 0 0 auto;
-  border: 1px solid var(--orionplace-border);
-  object-fit: contain;
-}
-
-.identity p {
-  min-width: 0;
-  margin: 0;
-  color: var(--orionplace-muted);
-  line-height: 1.5rem;
-}
-
-.block ul {
-  display: grid;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.block li {
-  display: flex;
-  min-width: 0;
-  align-items: start;
-  gap: 0.5rem;
-  line-height: 1.25rem;
-}
-
-.block li[data-included='false'] {
-  color: var(--orionplace-muted);
-}
-
-.block li > svg {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  margin-top: .125rem;
-}
-
-/* A hint sits 4px after its label, as in the other packages. */
-.block li > span > [data-feature-part='OrionplaceInfoHint'],
-.meterHeading [data-feature-part='OrionplaceInfoHint'] {
-  margin-left: 0.25rem;
-}
-
-.meter {
-  display: grid;
-  min-width: 0;
-  gap: 0.5rem;
-}
-
-.meterHeading,
-.meterHeading > span:first-child {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.meterHeading {
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.meterHeading svg {
-  color: var(--orionplace-muted);
-}
-
-.meterHeading > span:last-child {
-  flex: 0 0 auto;
-  font-variant-numeric: tabular-nums;
-}
-
-.track {
-  width: 100%;
-  height: 0.375rem;
-  overflow: hidden;
-  background: var(--orionplace-muted-surface);
-}
-
-.track > span {
-  display: block;
-  height: 100%;
-  background: var(--orionplace-accent);
-}
-
-.track > span[data-tone='attention'] {
-  background: var(--orionplace-attention);
-}
-
-.track > span[data-tone='danger'] {
-  background: var(--orionplace-danger);
-}
-
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-/*
- * The subscriptions page's own width, as in the other packages: the plan's
- * features in two columns from 592px, the plan beside its usage from 720px
- * (the page's width on a 768px screen).
- */
-@container (min-width: 592px) {
-  .featureColumns {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    column-gap: 2rem;
-  }
-}
-
-@container (min-width: 720px) {
-  .split {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 2rem;
-  }
-}