orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/tariffs/TariffCards.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import { useOrionplaceCatalog } from '@/providers/OrionplaceProvider';
-import type { ITariffSubscribeRequest } from '@/interfaces/orionplace/subscribeTariff/ITariffSelection';
-import {
-  TariffCard,
-  type TariffCardProps,
-} from './TariffCard';
-import styles from './TariffCards.module.css';
-
-export interface TariffCardsProps extends Omit<TariffCardProps, 'tariffId'> {
-  subscriptionId?: number;
-  tariffIds?: number[];
-  onSubscribe?: (request: ITariffSubscribeRequest) => void;
-}
-
-export function TariffCards({
-  subscriptionId,
-  tariffIds = [],
-  ...cardProps
-}: TariffCardsProps) {
-  const tariffs = useOrionplaceCatalog((state) => state.tariffs);
-  const visible = (tariffs?.data ?? []).filter(
-    (tariff) =>
-      (subscriptionId === undefined || tariff.subscription === subscriptionId) &&
-      (!tariffIds.length || tariffIds.includes(tariff.id)),
-  );
-
-  if (!visible.length) {
-    return null;
-  }
-
-  return (
-    <div className={styles.grid} data-feature-part="TariffCards">
-      {visible.map((tariff) => (
-        <TariffCard
-          key={tariff.id}
-          tariffId={tariff.id}
-          {...cardProps}
-        />
-      ))}
-    </div>
-  );
-}

package/templates/components/orionplace/tariffs/TariffSubscriptionModal.README.md

@@ -1,92 +0,0 @@
-# TariffSubscriptionModal · React
-
-## English
-
-`TariffSubscriptionModal` confirms one paid or trial choice for `tariffId`.
-`price` is the selected `tariff_cost_id`, or `null` for the trial. The dialog
-shows the base amount, selected option surcharge and total in the selected
-currency. Paid choices accept a promotion code. Trial choices omit that field
-and offer only options whose `eligiable_for_trial` is `true`.
-
-The initial `option` is kept when that option is available; otherwise the first
-available option is selected. Changing the option updates its plain-text
-description and total. Submit calls `onSubmit(request)` with `tariff`, a paid
-`period`, an optional `option` and a trimmed nonempty `attach_issue`. Trial
-requests omit `period` and the promotion code. An invalid period or option
-disables confirmation and shows the localized invalid-choice message.
-
-The parent supplies `pending`, `error` and `completed`. Pending blocks submit
-and dismissal while preserving entered values. Completed replaces the form
-with a link from `subscriptionsHref(locale)`; paid forms also use
-`walletHref(locale)` for balance top-up. `suspended` temporarily hides the
-native dialog without discarding its fields.
-
-Escape, the close button and a backdrop click call `onClose()` when no request
-is pending. The dialog locks document scrolling, focuses its close button and
-restores the previous scroll settings and opener focus when removed.
-
-The component makes no request itself. Source is maintained in
-`components/orionplace/tariffs/TariffSubscriptionModal.tsx`; the submit
-contract is `interfaces/orionplace/subscribeTariff/ITariffSelection.ts`.
-
-### Props
-
-| Prop                                                    | Meaning                                                                                               |
-| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `tariffId: number`                                      | ID of the tariff handled by TariffSubscriptionModal.                                                  |
-| `price: number`                                         | Selected tariff price and billing period.                                                             |
-| `option?: number`                                       | Selected tariff or product option.                                                                    |
-| `pending?: boolean`                                     | Shows the loading state and blocks duplicate actions.                                                 |
-| `suspended?: boolean`                                   | Keeps entered purchase values visible while a recoverable external step is open.                      |
-| `error?: string`                                        | Customer-visible error for the component request; omit it when no request failed.                     |
-| `completed?: boolean`                                   | Successful result displayed after the action finishes.                                                |
-| `subscriptionsHref?: (locale: string) => string`        | Builds the subscriptions destination from the callback arguments.                                     |
-| `walletHref?: (locale: string) => string`               | Builds the wallet destination from the callback arguments.                                            |
-| `onClose?: () => void`                                  | Called when the visitor closes the panel or dialog. The callback has no payload.                      |
-| `onSubmit?: (request: ITariffSubscribeRequest) => void` | Confirmation passes the tariff ID in `tariff`, selected `period`, `option` and a nonempty `attach_issue` promo code where applicable. A trial omits `period` and the promo code; the application submits the request. |
-
-## Русский
-
-`TariffSubscriptionModal` подтверждает платный или пробный выбор тарифа с
-`tariffId`. `price` содержит выбранный `tariff_cost_id` или `null` для
-пробного периода. Окно показывает базовую сумму, доплату выбранной опции и
-итог в выбранной валюте. Для платного периода доступно поле промокода. В
-пробном периоде этого поля нет, а список содержит только опции с
-`eligiable_for_trial = true`.
-
-Начальная `option` сохраняется, если она доступна; иначе выбирается первая
-доступная опция. Смена опции обновляет её обычное текстовое описание и итог.
-Отправка вызывает `onSubmit(request)` с `tariff`, платным `period`,
-необязательной `option` и непустым очищенным `attach_issue`. В пробном запросе
-нет `period` и промокода. Недоступный период или опция блокирует подтверждение
-и показывает локализованное сообщение.
-
-Родитель передаёт `pending`, `error` и `completed`. Во время `pending` нельзя
-отправить или закрыть окно, а введённые значения сохраняются. `completed`
-заменяет форму ссылкой из `subscriptionsHref(locale)`; платная форма также
-использует `walletHref(locale)` для пополнения баланса. `suspended` временно
-скрывает системное окно, сохраняя его поля.
-
-Escape, кнопка закрытия и щелчок по фону вызывают `onClose()`, если запрос не
-выполняется. Окно блокирует прокрутку документа, переводит фокус на кнопку
-закрытия и восстанавливает прежние настройки прокрутки и фокус после удаления.
-
-Сам компонент запрос не отправляет. Исходный файл:
-`components/orionplace/tariffs/TariffSubscriptionModal.tsx`; контракт отправки:
-`interfaces/orionplace/subscribeTariff/ITariffSelection.ts`.
-
-### Свойства
-
-| Свойство                                                | Назначение                                                                                                    |
-| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `tariffId: number`                                      | ID тарифа, с которым работает TariffSubscriptionModal.                                                        |
-| `price: number`                                         | Выбранная цена тарифа и период оплаты.                                                                        |
-| `option?: number`                                       | Выбранная опция тарифа или товара.                                                                            |
-| `pending?: boolean`                                     | Показывает загрузку и блокирует повторные действия.                                                           |
-| `suspended?: boolean`                                   | Сохраняет введённые данные покупки во время внешнего шага, после которого можно продолжить.                   |
-| `error?: string`                                        | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                          |
-| `completed?: boolean`                                   | Успешный результат после завершения действия.                                                                 |
-| `subscriptionsHref?: (locale: string) => string`        | Строит адрес ссылки подписок из аргументов обработчика.                                                       |
-| `walletHref?: (locale: string) => string`               | Строит адрес ссылки кошелька из аргументов обработчика.                                                       |
-| `onClose?: () => void`                                  | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.                      |
-| `onSubmit?: (request: ITariffSubscribeRequest) => void` | Подтверждение передаёт ID тарифа `tariff`, выбранные `period`, `option` и непустой промокод `attach_issue`, когда они применимы. Пробное подключение пропускает `period` и промокод; приложение отправляет запрос. |

package/templates/components/orionplace/tariffs/TariffSubscriptionModal.module.css

@@ -1,214 +0,0 @@
-.dialog {
-  box-sizing: border-box;
-  width: 30rem;
-  max-width: calc(100vw - 2rem);
-  max-height: calc(100dvh - 2rem);
-  margin: auto;
-  overflow: auto;
-  padding: 1.5rem;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-}
-
-.dialog::backdrop {
-  /* The theme's text colour, as `backdrop:bg-orionplace-text/30` in Nuxt. */
-  background: color-mix(in srgb, var(--orionplace-text) 30%, transparent);
-  backdrop-filter: blur(2px);
-}
-
-.dialog > header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-.dialog > header h3 {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.dialog > header button {
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-size: 1.5rem;
-  line-height: 1;
-}
-
-.dialog > header button:focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .dialog > header button:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.dialog > header button:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-.dialog form,
-.completed {
-  display: grid;
-  gap: 1.25rem;
-}
-
-.plan {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.plan p,
-.description,
-.note {
-  margin: 0;
-  color: var(--orionplace-muted);
-}
-
-.plan p,
-.promo {
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.description {
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-/* The payment note is small print under the summary, as in Nuxt. */
-.note {
-  font-size: 0.75rem;
-  line-height: 1.5rem;
-}
-
-.promo {
-  display: grid;
-  gap: 0.5rem;
-  color: var(--orionplace-muted);
-}
-
-/* The code is typed as it is, not in the label's small capitals. */
-.promo input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 2.75rem;
-  padding: 0 0.75rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  font: inherit;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  letter-spacing: normal;
-  outline: none;
-  text-transform: none;
-}
-
-.promo input:focus-visible {
-  border-color: var(--orionplace-text);
-}
-
-.summary {
-  display: grid;
-  gap: 0.75rem;
-  margin: 0;
-  padding: 1rem;
-  background: var(--orionplace-muted-surface);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.summary div {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.summary dd {
-  margin: 0;
-}
-
-.summary .total {
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--orionplace-border);
-  font-weight: 500;
-}
-
-.wallet {
-  width: fit-content;
-  padding-bottom: 0.125rem;
-  border-bottom: 1px solid currentColor;
-  color: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
-/* A refusal and the confirmation use the shared notices with their icons,
-   as `op-notice` in the other packages. */
-.error {
-  composes: notice noticeError from '../account/account.module.css';
-  white-space: pre-line;
-}
-
-.success {
-  composes: notice noticeSuccess from '../account/account.module.css';
-}
-
-.submit,
-.completed a {
-  display: inline-flex;
-  min-height: 2.75rem;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1.5rem;
-  border: 1px solid var(--orionplace-accent);
-  background: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
-.submit:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-/*
- * The larger padding once the dialog has its full 30rem width (from a 32rem
- * viewport), so a narrow preview frame shows the same dialog as a wide page.
- */
-@media (min-width: 32rem) {
-  .dialog {
-    padding: 2rem;
-  }
-}

package/templates/components/orionplace/tariffs/TariffSubscriptionModal.tsx

@@ -1,299 +0,0 @@
-'use client';
-
-import '@/components/orionplace/shared/dialogs.css';
-
-import {
-  useEffect,
-  useId,
-  useRef,
-  useState,
-  type FormEvent,
-  type MouseEvent,
-} from 'react';
-import {
-  useOrionplaceCatalog,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import type { ITariffSubscribeRequest } from '@/interfaces/orionplace/subscribeTariff/ITariffSelection';
-import {
-  getAvailableNestedValueFromObject,
-  plainText,
-} from '@/lib/orionplace/presentation';
-import {
-  tariffAmount,
-  tariffMoney,
-  tariffOptions,
-  tariffOptionAmount,
-  tariffSubscribeRequest,
-} from '@/lib/orionplace/tariffs';
-import {
-  tariffDays,
-  tariffLabels,
-} from '@/lib/orionplace/tariffLabels';
-import {
-  createPageScrollLock,
-  restoreFocus,
-} from '@/lib/orionplace/modalWindow';
-import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
-import { TariffCardTitle } from './TariffCardTitle';
-import styles from './TariffSubscriptionModal.module.css';
-
-export interface TariffSubscriptionModalProps {
-  tariffId: number;
-  price: number | null;
-  option?: number;
-  pending?: boolean;
-  suspended?: boolean;
-  error?: string;
-  completed?: boolean;
-  subscriptionsHref?: (locale: string) => string;
-  walletHref?: (locale: string) => string;
-  onClose?: () => void;
-  onSubmit?: (request: ITariffSubscribeRequest) => void;
-}
-
-export function TariffSubscriptionModal({
-  tariffId,
-  price,
-  option: initialOption,
-  pending = false,
-  suspended = false,
-  error = '',
-  completed = false,
-  subscriptionsHref = (locale) =>
-    `/subscriptions?locale=${encodeURIComponent(locale)}`,
-  walletHref = (locale) => `/wallet?locale=${encodeURIComponent(locale)}`,
-  onClose,
-  onSubmit,
-}: TariffSubscriptionModalProps) {
-  const tariffs = useOrionplaceCatalog((state) => state.tariffs);
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const currencyId = useOrionplaceSelections((state) => state.currencyId);
-  const currency = useOrionplaceSelections(
-    (state) => state.init?.currencies[state.currencyId],
-  );
-  const labels = tariffLabels(locale);
-  const id = useId();
-  const dialog = useRef<HTMLDialogElement>(null);
-  const closeButton = useRef<HTMLButtonElement>(null);
-  const opener = useRef<HTMLElement | undefined>(undefined);
-  const tariff = tariffs?.data.find((entry) => entry.id === tariffId);
-  const period = tariff?.prices.find(
-    (entry) => entry.tariff_cost_id === price,
-  );
-  const options = tariff ? tariffOptions(tariff, price) : [];
-  const optionKey = options.map((entry) => entry.id).join(',');
-  const initial = options.find((entry) => entry.id === initialOption) ?? options[0];
-  const [optionId, setOptionId] = useState(
-    initial ? String(initial.id) : '',
-  );
-  const [promo, setPromo] = useState('');
-  const selectedOption = options.find(
-    (entry) => entry.id === Number(optionId),
-  );
-  const durationDays = price === null ? tariff?.trial_days : period?.days;
-  const duration = durationDays ? tariffDays(durationDays, locale) : '';
-  const optionCaptions = Object.fromEntries([
-    ['', labels.noOption],
-    ...options.map((entry) => [
-      String(entry.id),
-      getAvailableNestedValueFromObject(
-        entry.locale,
-        locale,
-        'option_name',
-      ) || String(entry.id),
-    ]),
-  ]);
-  const optionDescription = plainText(getAvailableNestedValueFromObject(
-    selectedOption?.locale,
-    locale,
-    'option_description',
-  ));
-  const baseAmount = price === null
-    ? 0
-    : tariffAmount(period?.amount, currencyId);
-  const extraAmount = price === null
-    ? 0
-    : tariffOptionAmount(
-        selectedOption,
-        period?.period_id ?? 0,
-        currencyId,
-      );
-  const total = baseAmount !== undefined && extraAmount !== undefined
-    ? Math.round((baseAmount + extraAmount) * 100) / 100
-    : undefined;
-  const request = tariff
-    ? tariffSubscribeRequest(
-        tariff,
-        price,
-        optionId ? Number(optionId) : undefined,
-        promo,
-      )
-    : undefined;
-
-  function money(amount: number | undefined) {
-    return tariffMoney(amount, locale, currency);
-  }
-
-  function close() {
-    if (!pending) {
-      onClose?.();
-    }
-  }
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (!pending && request) {
-      onSubmit?.(request);
-    }
-  }
-
-  function onBackdrop(event: MouseEvent<HTMLDialogElement>) {
-    const bounds = dialog.current?.getBoundingClientRect();
-    if (
-      event.target === dialog.current && bounds &&
-      (event.clientX < bounds.left || event.clientX > bounds.right ||
-        event.clientY < bounds.top || event.clientY > bounds.bottom)
-    ) {
-      close();
-    }
-  }
-
-  useEffect(() => {
-    const next = options.find((entry) => entry.id === initialOption) ?? options[0];
-    setOptionId(next ? String(next.id) : '');
-  }, [tariffId, price, initialOption, optionKey]);
-
-  useEffect(() => {
-    opener.current = document.activeElement instanceof HTMLElement
-      ? document.activeElement
-      : undefined;
-  }, []);
-
-  useEffect(() => {
-    const element    = dialog.current;
-    if (suspended || !element) {
-      return;
-    }
-    const pageScroll = createPageScrollLock();
-    const scrollX    = window.scrollX;
-    const scrollY    = window.scrollY;
-    pageScroll.lock();
-    element.showModal();
-    closeButton.current?.focus({ preventScroll: true });
-    window.scrollTo({ left: scrollX, top: scrollY, behavior: 'instant' });
-    return () => {
-      element.close();
-      pageScroll.unlock();
-      restoreFocus(opener.current);
-    };
-  }, [suspended]);
-
-  return (
-    <dialog
-      data-stable-modal="form"
-      ref={dialog}
-      className={styles.dialog}
-      aria-labelledby={`${id}-title`}
-      data-feature-part="TariffSubscriptionModal"
-      data-tariff-modal
-      onKeyDown={(event) => {
-        // Escape belongs to this window, not to the page behind it.
-        if (event.key === 'Escape') {
-          event.stopPropagation();
-        }
-      }}
-      onCancel={(event) => {
-        event.preventDefault();
-        close();
-      }}
-      onClick={onBackdrop}
-    >
-      <header>
-        <h3 id={`${id}-title`}>{labels.title}</h3>
-        <button
-          ref={closeButton}
-          type="button"
-          disabled={pending}
-          aria-label={labels.close}
-          onClick={close}
-        >
-          <span aria-hidden="true">×</span>
-        </button>
-      </header>
-      {completed ? (
-        <div className={styles.completed}>
-          <p role="status" className={styles.success}>{labels.complete}</p>
-          <a href={subscriptionsHref(locale)} data-tariff-subscriptions-link>
-            {labels.mine}
-          </a>
-        </div>
-      ) : tariff ? (
-        <form onSubmit={submit}>
-          <div className={styles.plan}>
-            <TariffCardTitle tariffId={tariffId} />
-            <p>
-              {duration}
-              {price === null ? ` · ${labels.trial}` : ''}
-            </p>
-          </div>
-          {options.length ? (
-            <OrionplaceSelect
-              value={optionId}
-              options={optionCaptions}
-              label={labels.option}
-              disabled={pending}
-              onValueChange={setOptionId}
-            />
-          ) : null}
-          {optionDescription ? <p className={styles.description}>{optionDescription}</p> : null}
-          {price !== null ? (
-            <label className={styles.promo}>
-              {labels.promo}
-              <input
-                name="attach_issue"
-                maxLength={20}
-                value={promo}
-                disabled={pending}
-                autoComplete="off"
-                onChange={(event) => setPromo(event.currentTarget.value)}
-              />
-            </label>
-          ) : null}
-          <dl className={styles.summary}>
-            <div><dt>{labels.base}</dt><dd>{money(baseAmount)}</dd></div>
-            {selectedOption ? (
-              <div><dt>{labels.extra}</dt><dd>{money(extraAmount)}</dd></div>
-            ) : null}
-            <div className={styles.total}>
-              <dt>{price === null ? labels.total : labels.beforePromo}</dt>
-              <dd>{money(total)}</dd>
-            </div>
-          </dl>
-          <p className={styles.note}>
-            {price === null ? labels.trialInfo : labels.payment}
-          </p>
-          {price !== null ? (
-            <a className={styles.wallet} href={walletHref(locale)}>{labels.wallet}</a>
-          ) : null}
-          {error || !request ? (
-            <p role="alert" className={styles.error}>
-              {error || labels.invalid}
-            </p>
-          ) : null}
-          <button
-            type="submit"
-            className={styles.submit}
-            disabled={pending || !request}
-          >
-            {pending
-              ? labels.pending
-              : price === null
-                ? labels.confirmTrial
-                : labels.confirm}
-          </button>
-        </form>
-      ) : null}
-    </dialog>
-  );
-}

package/templates/components/orionplace/theme/OrionplaceThemeProvider.README.md

@@ -1,30 +0,0 @@
-# OrionplaceThemeProvider
-
-## English
-
-Sets the storefront colors for its children. `mode` selects `light` or `dark`
-and defaults to `light`. `colors` overrides individual palette values for
-this provider. The selected mode still sets the browser color scheme.
-
-### Props
-
-| Prop                                      | Meaning                                                      |
-| ----------------------------------------- | ------------------------------------------------------------ |
-| `mode?: "light" \| "dark"`                | Theme mode: `light` or `dark`; `light` when omitted.         |
-| `colors?: Partial<OrionplaceThemeColors>` | Theme color overrides applied inside the provider.           |
-| `children: ReactNode`                     | React content rendered inside the component.                 |
-
-## Русский
-
-Задаёт цвета магазина для дочерних компонентов. `mode` выбирает `light`
-или `dark`; по умолчанию используется `light`. `colors` переопределяет
-отдельные цвета внутри этого компонента. Выбранный режим также задаёт
-цветовую схему браузера.
-
-### Свойства
-
-| Свойство                                  | Назначение                                                   |
-| ----------------------------------------- | ------------------------------------------------------------ |
-| `mode?: "light" \| "dark"`                | Режим темы: `light` или `dark`; без значения — `light`.      |
-| `colors?: Partial<OrionplaceThemeColors>` | Переопределения цветов темы внутри провайдера.               |
-| `children: ReactNode`                     | React-содержимое внутри компонента.                          |

package/templates/components/orionplace/theme/OrionplaceThemeProvider.module.css

@@ -1,8 +0,0 @@
-.root {
-  --orionplace-font: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui,
-    sans-serif;
-  background: var(--orionplace-background);
-  color: var(--orionplace-text);
-  font-family: var(--orionplace-font);
-  -webkit-font-smoothing: antialiased;
-}