orionplace-react 0.1.0 → 0.2.0

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

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

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

@@ -0,0 +1,168 @@
+.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;
+  }
+}