orionplace-react 0.1.0 → 0.2.1

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

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

@@ -0,0 +1,214 @@
+.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

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

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

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

package/templates/components/orionplace/theme/OrionplaceThemeProvider.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import {
+  createOrionplaceThemeStyle,
+  defaultOrionplaceTheme,
+  resolveOrionplaceThemeName,
+} from '@/themes/orionplace';
+import type { OrionplaceThemeColors, OrionplaceThemeMode } from '@/themes/orionplace';
+import styles from './OrionplaceThemeProvider.module.css';
+
+export interface OrionplaceThemeProviderProps {
+  mode?: OrionplaceThemeMode;
+  colors?: Partial<OrionplaceThemeColors>;
+  children: ReactNode;
+}
+
+export function OrionplaceThemeProvider({
+  mode = defaultOrionplaceTheme,
+  colors,
+  children,
+}: OrionplaceThemeProviderProps) {
+  const themeName = resolveOrionplaceThemeName(mode);
+
+  return (
+    <div
+      data-orionplace-theme={themeName}
+      style={createOrionplaceThemeStyle(themeName, colors)}
+      className={styles.root}
+    >
+      {children}
+    </div>
+  );
+}