orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,32 @@
+'use client';
+
+import {
+  useOrionplaceCatalog,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import styles from './TariffCardImage.module.css';
+
+export function TariffCardImage({ tariffId }: { tariffId: number }) {
+  const tariff = useOrionplaceCatalog((state) =>
+    state.tariffs?.data.find((entry) => entry.id === tariffId),
+  );
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const source = tariff?.tariff_image?.small[0];
+  const title = getAvailableNestedValueFromObject(
+    tariff?.locales,
+    locale,
+    'tariff_name',
+  );
+
+  return source ? (
+    <OrionplaceImage
+      src={source}
+      alt={title || ''}
+      width={640}
+      height={160}
+      className={styles.image}
+    />
+  ) : null;
+}

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

@@ -0,0 +1,74 @@
+# TariffCardPrices · React
+
+## English
+
+`TariffCardPrices` reads `tariffId`, the parent subscription and the selected
+currency from the isolated stores. Paid periods are ordered by duration. When
+several are available, choosing one calls `onPeriodChange(tariff_cost_id)`.
+`selectedPeriod` selects that period; a missing or unavailable value falls back
+to the shortest returned paid period. Each amount uses the selected currency's
+left and right symbols. A positive `trial_days` adds the trial action.
+
+The plan and its parent subscription must both allow customer subscriptions.
+An administrator-only or closed plan shows its localized reason instead of
+actions. `disabled` blocks actions. For a signed-in visitor, a paid or trial
+choice calls `onSelect({ tariff, price })`; `price` is the selected
+`tariff_cost_id`, or `null` for a trial. With `guest`, the same action calls
+`onRequireSignIn(returnPath)` so the application can authenticate the visitor
+and restore the exact choice. `label` replaces the paid action caption, and
+`periodLabel` replaces the localized day word when the parent supplies a unit.
+
+The component makes no requests. Source is maintained in
+`components/orionplace/tariffs/TariffCardPrices.tsx`.
+
+### Props
+
+| Prop                                               | Meaning                                                                                                  |
+| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `tariffId: number`                                 | ID of the tariff handled by TariffCardPrices.                                                            |
+| `selectedPeriod?: number`                          | Billing period currently selected in the price control.                                                  |
+| `disabled?: boolean`                               | Disables the component controls and prevents new actions.                                                |
+| `guest?: boolean`                                  | Uses the signed-out purchase path and sign-in action.                                                    |
+| `periodLabel?: string`                             | Visible or accessible label for period.                                                                  |
+| `label?: string`                                   | Visible or accessible name for the component’s main control or region.                                   |
+| `onPeriodChange?: (period: number) => void`        | Passes the selected paid period’s `tariff_cost_id`. The application supplies it through `selectedPeriod`. |
+| `onSelect?: (selection: ITariffSelection) => void` | Selecting an available subscription passes the tariff ID in `tariff` and `tariff_cost_id` in `price`; a trial has `price: null`. The application opens confirmation. |
+| `onRequireSignIn?: (returnPath: string) => void`   | Called when the visitor must sign in before continuing. The callback payload is shown in its type.       |
+
+## Русский
+
+`TariffCardPrices` читает тариф с указанным `tariffId`, родительскую подписку и
+выбранную валюту из отдельных хранилищ. Платные периоды сортируются по
+длительности. Если их несколько, выбор вызывает
+`onPeriodChange(tariff_cost_id)`. `selectedPeriod` задаёт период; отсутствующее
+или недоступное значение заменяется самым коротким полученным платным периодом.
+Сумма использует левый и правый символы выбранной валюты. Положительное
+`trial_days` добавляет действие пробного периода.
+
+Тариф и его родительская подписка должны разрешать самостоятельное
+подключение. Для закрытого тарифа или тарифа администратора вместо действий
+показывается локализованная причина. `disabled` блокирует действия. Для
+авторизованного посетителя платный или пробный выбор вызывает
+`onSelect({ tariff, price })`, где `price` содержит выбранный
+`tariff_cost_id` или `null` для пробного периода. С `guest` то же действие
+вызывает `onRequireSignIn(returnPath)`, чтобы приложение выполнило вход и
+восстановило точный выбор. `label` заменяет текст платной кнопки, а
+`periodLabel` — локализованное слово «день», если родитель передаёт свою
+единицу.
+
+Компонент не отправляет запросы. Исходный файл:
+`components/orionplace/tariffs/TariffCardPrices.tsx`.
+
+### Свойства
+
+| Свойство                                           | Назначение                                                                                                |
+| -------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `tariffId: number`                                 | ID тарифа, с которым работает TariffCardPrices.                                                           |
+| `selectedPeriod?: number`                          | Период оплаты, выбранный в блоке цены.                                                                    |
+| `disabled?: boolean`                               | Блокирует элементы компонента и новые действия.                                                           |
+| `guest?: boolean`                                  | Использует сценарий покупки без входа и действие входа.                                                   |
+| `periodLabel?: string`                             | Видимая или доступная подпись для периода.                                                                |
+| `label?: string`                                   | Видимое или доступное название основного элемента компонента.                                             |
+| `onPeriodChange?: (period: number) => void`        | Передаёт `tariff_cost_id` выбранного платного периода. Приложение передаёт его в `selectedPeriod`. |
+| `onSelect?: (selection: ITariffSelection) => void` | При выборе доступного подключения передаёт ID тарифа в `tariff` и `tariff_cost_id` в `price`; для пробного периода `price` равен `null`. Приложение открывает подтверждение. |
+| `onRequireSignIn?: (returnPath: string) => void`   | Вызывается, когда покупателю нужно войти перед продолжением. Данные обработчика указаны в его типе.       |

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

@@ -0,0 +1,142 @@
+/*
+ * Three rows of the card, as in the other packages: the period choice, the
+ * price and the actions or the note. Inside a card they are rows of the shared
+ * card grid, so every card in a row starts its price and actions level.
+ */
+.root {
+  display: grid;
+  min-width: 0;
+  grid-row: span 3;
+  grid-template-rows: subgrid;
+  row-gap: 0;
+  color: var(--orionplace-text);
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+}
+
+.periods {
+  display: grid;
+  grid-row: 1;
+  align-content: start;
+  gap: 0.5rem;
+}
+
+.periods > p {
+  margin: 0;
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.periods > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.periods button {
+  display: inline-flex;
+  min-height: 2.25rem;
+  align-items: center;
+  padding: 0 0.75rem;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  color: var(--orionplace-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+}
+
+.periods button:focus-visible,
+.periods button[aria-pressed='true'] {
+  border-color: var(--orionplace-text);
+  color: var(--orionplace-text);
+}
+
+@media (hover: hover) {
+  .periods button:hover {
+    border-color: var(--orionplace-text);
+    color: var(--orionplace-text);
+  }
+}
+
+.price {
+  grid-row: 2;
+  margin-top: 1rem;
+}
+
+.price p {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem 0.5rem;
+  margin: 0;
+}
+
+.price span {
+  font-size: 1.5rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.25;
+}
+
+.price small {
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.actions {
+  display: grid;
+  grid-row: 3;
+  margin-top: 1rem;
+  align-content: start;
+  gap: 0.5rem;
+}
+
+.actions button {
+  display: inline-flex;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1.5rem;
+  border: 1px solid;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+/* Under `.actions button`, whose border would take the text colour. */
+.actions .primary {
+  border-color: var(--orionplace-accent);
+  background: var(--orionplace-accent);
+  color: var(--orionplace-surface);
+}
+
+.actions .secondary {
+  border-color: var(--orionplace-text);
+  background: transparent;
+  color: var(--orionplace-text);
+}
+
+.notice {
+  grid-row: 3;
+  margin: 1rem 0 0;
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}

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

@@ -0,0 +1,181 @@
+'use client';
+
+import { useId } from 'react';
+import {
+  useOrionplaceCatalog,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import type { ITariffSelection } from '@/interfaces/orionplace/subscribeTariff/ITariffSelection';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import {
+  tariffAmount,
+  tariffAvailability,
+  tariffMoney,
+  tariffPaidPeriods,
+  tariffReturnPath,
+} from '@/lib/orionplace/tariffs';
+import {
+  tariffDays,
+  tariffLabels,
+  tariffText,
+} from '@/lib/orionplace/tariffLabels';
+import styles from './TariffCardPrices.module.css';
+
+export interface TariffCardPricesProps {
+  tariffId: number;
+  selectedPeriod?: number;
+  disabled?: boolean;
+  guest?: boolean;
+  periodLabel?: string;
+  label?: string;
+  onPeriodChange?: (period: number) => void;
+  onSelect?: (selection: ITariffSelection) => void;
+  onRequireSignIn?: (returnPath: string) => void;
+}
+
+export function TariffCardPrices({
+  tariffId,
+  selectedPeriod,
+  disabled = false,
+  guest = false,
+  periodLabel = '',
+  label = '',
+  onPeriodChange,
+  onSelect,
+  onRequireSignIn,
+}: TariffCardPricesProps) {
+  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 tariff = tariffs?.data.find((entry) => entry.id === tariffId);
+  const labels = tariffLabels(locale);
+  const id = useId();
+
+  if (!tariff) {
+    return null;
+  }
+
+  const duration = (days: number) => periodLabel
+    ? `${days} ${periodLabel}`
+    : tariffDays(days, locale);
+  const availability = tariffAvailability(tariff, tariffs?.subscriptions);
+  const paidPeriods = tariffPaidPeriods(tariff).map((price) => ({
+    price: price.tariff_cost_id,
+    duration: duration(price.days),
+    amount: tariffMoney(
+      tariffAmount(price.amount, currencyId),
+      locale,
+      currency,
+    ),
+  }));
+  const selected = paidPeriods.find((entry) => entry.price === selectedPeriod) ??
+    paidPeriods[0];
+  const trialDuration = tariff.trial_days > 0
+    ? duration(tariff.trial_days)
+    : '';
+  const name = getAvailableNestedValueFromObject(
+    tariff.locales,
+    locale,
+    'tariff_name',
+  ) || String(tariffId);
+  const notice = availability === 'admin'
+    ? labels.adminOnly
+    : availability === 'closed'
+      ? labels.closed
+      : selected || trialDuration
+        ? ''
+        : labels.noPeriods;
+
+  function choose(price: number | null) {
+    if (disabled || availability !== 'open') {
+      return;
+    }
+    const selection = { tariff: tariffId, price };
+    if (guest) {
+      onRequireSignIn?.(tariffReturnPath(selection, locale));
+    } else {
+      onSelect?.(selection);
+    }
+  }
+
+  return (
+    <div className={styles.root} data-feature-part="TariffCardPrices">
+      {paidPeriods.length > 1 ? (
+        <div className={styles.periods}>
+          <p id={`${id}-periods`}>{labels.periods}</p>
+          <div role="group" aria-labelledby={`${id}-periods`}>
+            {paidPeriods.map((period) => (
+              <button
+                key={period.price}
+                type="button"
+                aria-pressed={period.price === selected?.price}
+                data-tariff-period-option={period.price}
+                onClick={() => onPeriodChange?.(period.price)}
+              >
+                {period.duration}
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+      {selected || trialDuration ? (
+        <div className={styles.price}>
+          {selected ? (
+            <p>
+              <span data-tariff-amount>{selected.amount}</span>
+              <small>{tariffText(labels.perPeriod, {
+                days: selected.duration,
+              })}</small>
+            </p>
+          ) : (
+            <p>
+              <span>{labels.free}</span>
+              <small>{tariffText(labels.perPeriod, {
+                days: trialDuration,
+              })}</small>
+            </p>
+          )}
+        </div>
+      ) : null}
+      {availability === 'open' && (selected || trialDuration) ? (
+        <div className={styles.actions}>
+          {selected ? (
+            <button
+              type="button"
+              className={styles.primary}
+              disabled={disabled}
+              aria-label={tariffText(labels.subscribeAria, {
+                name,
+                days: selected.duration,
+              })}
+              data-tariff-period={selected.price}
+              onClick={() => choose(selected.price)}
+            >
+              {label || labels.subscribe}
+            </button>
+          ) : null}
+          {trialDuration ? (
+            <button
+              type="button"
+              className={selected ? styles.secondary : styles.primary}
+              disabled={disabled}
+              aria-label={tariffText(labels.trialAria, {
+                name,
+                days: trialDuration,
+              })}
+              data-tariff-period="trial"
+              onClick={() => choose(null)}
+            >
+              {labels.tryTrial}
+            </button>
+          ) : null}
+        </div>
+      ) : notice ? (
+        <p className={styles.notice} data-tariff-unavailable>{notice}</p>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+# TariffCardTitle · React
+
+## English
+
+`TariffCardTitle` reads `tariffId` from the isolated catalog store and shows
+the localized `tariff_name`. If the returned plan has no populated name, its
+numeric ID remains visible. An unknown ID renders nothing.
+
+The component emits no events and makes no requests. Source is maintained in
+`components/orionplace/tariffs/TariffCardTitle.tsx`.
+
+### Props
+
+| Prop               | Meaning                                      |
+| ------------------ | -------------------------------------------- |
+| `tariffId: number` | ID of the tariff handled by TariffCardTitle. |
+
+## Русский
+
+`TariffCardTitle` читает тариф с указанным `tariffId` из отдельного хранилища
+каталога и показывает локализованное `tariff_name`. Если у полученного тарифа
+нет заполненного названия, остаётся виден его числовой ID. Неизвестный ID
+ничего не выводит.
+
+Компонент не отправляет события и запросы. Исходный файл:
+`components/orionplace/tariffs/TariffCardTitle.tsx`.
+
+### Свойства
+
+| Свойство           | Назначение                                     |
+| ------------------ | ---------------------------------------------- |
+| `tariffId: number` | ID тарифа, с которым работает TariffCardTitle. |

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

@@ -0,0 +1,9 @@
+.title {
+  margin: 0;
+  color: var(--orionplace-text);
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1.25;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}

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

@@ -0,0 +1,29 @@
+'use client';
+
+import {
+  useOrionplaceCatalog,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import styles from './TariffCardTitle.module.css';
+
+export function TariffCardTitle({ tariffId }: { tariffId: number }) {
+  const tariff = useOrionplaceCatalog((state) =>
+    state.tariffs?.data.find((entry) => entry.id === tariffId),
+  );
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const title = getAvailableNestedValueFromObject(
+    tariff?.locales,
+    locale,
+    'tariff_name',
+  );
+
+  return tariff ? (
+    <h3
+      className={styles.title}
+      data-feature-part="TariffCardTitle"
+    >
+      {title || tariff.id}
+    </h3>
+  ) : null;
+}

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

@@ -0,0 +1,88 @@
+# TariffCards · React
+
+## English
+
+`TariffCards` reads the tariff collection from the isolated catalog store and
+renders it in response order. Without `subscriptionId` it shows plans from all
+returned subscriptions. With `subscriptionId` it keeps only plans whose
+`subscription` has that ID. A nonempty `tariffIds` list narrows the result to
+those tariff IDs. When no plan matches, the component renders nothing.
+
+All remaining properties and the `onSelect`, `onSubscribe` and
+`onRequireSignIn` events are passed to every `TariffCard`. Each card keeps its
+own period, option and confirmation dialog. The shared grid aligns equivalent
+card regions at wider viewport sizes.
+
+The component makes no request. Source is maintained in
+`components/orionplace/tariffs/TariffCards.tsx`.
+
+### Props
+
+| Prop                                                                    | Meaning                                                                                                       |
+| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `subscriptionId?: number`                                               | ID of the subscription handled by TariffCards.                                                                |
+| `tariffIds?: number[]`                                                  | Tariff IDs rendered in the supplied order.                                                                    |
+| `onSubscribe?: (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. |
+| `pending?: boolean`                                                     | Shows the loading state and blocks duplicate actions.                                                         |
+| `error?: string`                                                        | Customer-visible error for the component request; omit it when no request failed.                             |
+| `onSelect?: (selection: ITariffSelection) => void`                      | Passes the tariff ID in `tariff` and paid period ID in `price` selected in a card. A trial has `price: null`. |
+| `onRequireSignIn?: (returnPath: string) => void`                        | Called when the visitor must sign in before continuing. The callback payload is shown in its type.            |
+| `disabled?: boolean`                                                    | Disables the component controls and prevents new actions.                                                     |
+| `suspended?: boolean`                                                   | Keeps entered purchase values visible while a recoverable external step is open.                              |
+| `completed?: boolean`                                                   | Successful result displayed after the action finishes.                                                        |
+| `periodLabel?: string`                                                  | Visible or accessible label for period.                                                                       |
+| `label?: string`                                                        | Visible or accessible name for the component’s main control or region.                                        |
+| `guest?: boolean`                                                       | Uses the signed-out purchase path and sign-in action.                                                         |
+| `open?: ITariffSelection`                                               | Controls whether the panel or dialog is open.                                                                 |
+| `image?: ReactNode`                                                     | Image region or replacement renderer for the current card.                                                    |
+| `title?: ReactNode`                                                     | Title region or replacement renderer for the current card.                                                    |
+| `description?: ReactNode`                                               | Supporting text shown below the main message.                                                                 |
+| `features?: ReactNode`                                                  | Feature-summary region or replacement renderer for the tariff card.                                           |
+| `prices?: (choose: (selection: ITariffSelection) => void) => ReactNode` | Price region or replacement renderer for the tariff card.                                                     |
+| `tariffHref?: (tariff: ISubscribeTariff, locale: string) => string`     | Builds the tariff destination from the callback arguments.                                                    |
+| `subscriptionsHref?: (locale: string) => string`                        | Builds the subscriptions destination from the callback arguments.                                             |
+| `walletHref?: (locale: string) => string`                               | Builds the wallet destination from the callback arguments.                                                    |
+
+## Русский
+
+`TariffCards` читает коллекцию тарифов из отдельного хранилища каталога и
+показывает её в порядке ответа. Без `subscriptionId` выводятся тарифы всех
+полученных подписок. С `subscriptionId` остаются только тарифы, поле
+`subscription` которых содержит этот ID. Непустой список `tariffIds`
+дополнительно оставляет только указанные ID тарифов. Если ничего не найдено,
+компонент ничего не выводит.
+
+Остальные свойства и события `onSelect`, `onSubscribe` и
+`onRequireSignIn` передаются каждой `TariffCard`. Каждая карточка отдельно
+хранит период, опцию и окно подтверждения. На широком экране общая сетка
+выравнивает одинаковые области карточек.
+
+Компонент не отправляет запросы. Исходный файл:
+`components/orionplace/tariffs/TariffCards.tsx`.
+
+### Свойства
+
+| Свойство                                                                | Назначение                                                                                                         |
+| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `subscriptionId?: number`                                               | ID подписки, с которым работает TariffCards.                                                                       |
+| `tariffIds?: number[]`                                                  | ID для тарифа, используемые в переданном порядке.                                                                  |
+| `onSubscribe?: (request: ITariffSubscribeRequest) => void`              | Подтверждение передаёт ID тарифа `tariff`, выбранные `period`, `option` и непустой промокод `attach_issue`, когда они применимы. Пробное подключение пропускает `period` и промокод; приложение отправляет запрос. |
+| `pending?: boolean`                                                     | Показывает загрузку и блокирует повторные действия.                                                                |
+| `error?: string`                                                        | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                               |
+| `onSelect?: (selection: ITariffSelection) => void`                      | Передаёт выбранные в карточке ID тарифа `tariff` и ID платного периода `price`. Для пробного подключения `price` равен `null`. |
+| `onRequireSignIn?: (returnPath: string) => void`                        | Вызывается, когда покупателю нужно войти перед продолжением. Данные обработчика указаны в его типе.                |
+| `disabled?: boolean`                                                    | Блокирует элементы компонента и новые действия.                                                                    |
+| `suspended?: boolean`                                                   | Сохраняет введённые данные покупки во время внешнего шага, после которого можно продолжить.                        |
+| `completed?: boolean`                                                   | Успешный результат после завершения действия.                                                                      |
+| `periodLabel?: string`                                                  | Видимая или доступная подпись для периода.                                                                         |
+| `label?: string`                                                        | Видимое или доступное название основного элемента компонента.                                                      |
+| `guest?: boolean`                                                       | Использует сценарий покупки без входа и действие входа.                                                            |
+| `open?: ITariffSelection`                                               | Управляет открытым состоянием панели или диалога.                                                                  |
+| `image?: ReactNode`                                                     | Блок изображения или функция, которая его заменяет.                                                                |
+| `title?: ReactNode`                                                     | Блок названия карточки или функция, которая его заменяет.                                                          |
+| `description?: ReactNode`                                               | Пояснение под основным сообщением.                                                                                 |
+| `features?: ReactNode`                                                  | Блок характеристик тарифа или функция, которая его заменяет.                                                       |
+| `prices?: (choose: (selection: ITariffSelection) => void) => ReactNode` | Блок цен тарифа или функция, которая его заменяет.                                                                 |
+| `tariffHref?: (tariff: ISubscribeTariff, locale: string) => string`     | Строит адрес ссылки тарифа из аргументов обработчика.                                                              |
+| `subscriptionsHref?: (locale: string) => string`                        | Строит адрес ссылки подписок из аргументов обработчика.                                                            |
+| `walletHref?: (locale: string) => string`                               | Строит адрес ссылки кошелька из аргументов обработчика.                                                            |

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

@@ -0,0 +1,24 @@
+.grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0 1rem;
+  margin-bottom: -1rem;
+}
+
+.grid > * {
+  margin-bottom: 1rem;
+}
+
+/* The plans page around the cards (592px; 1216px for the old 1280px screen). */
+@container (min-width: 592px) {
+  .grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 1216px) {
+  .grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}

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

@@ -0,0 +1,44 @@
+'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>
+  );
+}