orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,218 @@
+'use client';
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  useOrionplaceCatalog,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
+import type {
+  ITariffSelection,
+  ITariffSubscribeRequest,
+} from '@/interfaces/orionplace/subscribeTariff/ITariffSelection';
+import {
+  tariffIsOpen,
+  tariffSubscribeRequest,
+} from '@/lib/orionplace/tariffs';
+import { tariffPageHref } from '@/lib/orionplace/tariffPage';
+import {
+  tariffDays,
+  tariffLabels,
+  tariffText,
+} from '@/lib/orionplace/tariffLabels';
+import { TariffCardDescription } from './TariffCardDescription';
+import { TariffCardFeatures } from './TariffCardFeatures';
+import { TariffCardImage } from './TariffCardImage';
+import { TariffCardPrices } from './TariffCardPrices';
+import { TariffCardTitle } from './TariffCardTitle';
+import { TariffSubscriptionModal } from './TariffSubscriptionModal';
+import styles from './TariffCard.module.css';
+
+export interface TariffCardProps {
+  tariffId: number;
+  disabled?: boolean;
+  pending?: boolean;
+  suspended?: boolean;
+  error?: string;
+  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;
+  onSelect?: (selection: ITariffSelection) => void;
+  onSubscribe?: (request: ITariffSubscribeRequest) => void;
+  onRequireSignIn?: (returnPath: string) => void;
+}
+
+export function TariffCard({
+  tariffId,
+  disabled = false,
+  pending = false,
+  suspended = false,
+  error = '',
+  completed = false,
+  periodLabel = '',
+  label = '',
+  guest = false,
+  open,
+  image,
+  title,
+  description,
+  features,
+  prices,
+  tariffHref = tariffPageHref,
+  subscriptionsHref,
+  walletHref,
+  onSelect,
+  onSubscribe,
+  onRequireSignIn,
+}: TariffCardProps) {
+  const tariffs = useOrionplaceCatalog((state) => state.tariffs);
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const tariff = tariffs?.data.find((entry) => entry.id === tariffId);
+  const [selection, setSelection] = useState<ITariffSelection>();
+  const [period, setPeriod] = useState<number>();
+  const [option, setOption] = useState<number>();
+  const opened = useRef('');
+  const labels = tariffLabels(locale);
+  const trialBadge = tariff && tariff.trial_days > 0
+    ? tariffText(labels.trialBadge, {
+        days: tariffDays(tariff.trial_days, locale),
+      })
+    : '';
+
+  function isAvailable(value: ITariffSelection) {
+    return Boolean(
+      tariff &&
+      value.tariff === tariff.id &&
+      tariffIsOpen(tariff, tariffs?.subscriptions) &&
+      tariffSubscribeRequest(tariff, value.price),
+    );
+  }
+
+  function choose(value: ITariffSelection) {
+    if (disabled || pending || guest || !isAvailable(value)) {
+      return;
+    }
+    if (value.price !== null) {
+      setPeriod(value.price);
+    }
+    setSelection(value);
+    onSelect?.(value);
+  }
+
+  useEffect(() => {
+    setPeriod(undefined);
+    setOption(undefined);
+    setSelection(undefined);
+    opened.current = '';
+  }, [tariffId]);
+
+  useEffect(() => {
+    if (selection && !isAvailable(selection)) {
+      setSelection(undefined);
+    }
+  }, [selection, tariff, tariffs?.subscriptions]);
+
+  useEffect(() => {
+    if (!open || open.tariff !== tariffId) {
+      return;
+    }
+    const key = `${open.tariff}:${open.price ?? 'trial'}`;
+    if (opened.current === key || !isAvailable(open)) {
+      return;
+    }
+    opened.current = key;
+    choose(open);
+  }, [open?.tariff, open?.price, tariff, tariffs?.subscriptions]);
+
+  if (!tariff) {
+    return null;
+  }
+
+  const href = tariffHref(tariff, locale);
+
+  return (
+    <article
+      className={styles.card}
+      data-feature-part="TariffCard"
+      data-tariff-id={tariff.id}
+    >
+      {image !== undefined ? image : (
+        <a href={href} className={styles.imageLink}>
+          <TariffCardImage tariffId={tariff.id} />
+        </a>
+      )}
+      {trialBadge ? (
+        <span className={styles.trial} data-tariff-trial>
+          {trialBadge}
+        </span>
+      ) : null}
+      <div className={styles.title}>
+        {title !== undefined ? title : (
+          <a href={href}>
+            <TariffCardTitle tariffId={tariff.id} />
+          </a>
+        )}
+      </div>
+      <div className={styles.description}>
+        {description !== undefined ? description : (
+          <TariffCardDescription tariffId={tariff.id} />
+        )}
+      </div>
+      <div className={styles.features}>
+        {features !== undefined ? features : (
+          <TariffCardFeatures
+            tariffId={tariff.id}
+            period={period}
+            option={option}
+            onOptionChange={setOption}
+          />
+        )}
+      </div>
+      <div className={styles.prices}>
+        {prices ? prices(choose) : (
+          <TariffCardPrices
+            tariffId={tariff.id}
+            selectedPeriod={period}
+            disabled={disabled || pending}
+            guest={guest}
+            periodLabel={periodLabel}
+            label={label}
+            onPeriodChange={setPeriod}
+            onSelect={choose}
+            onRequireSignIn={onRequireSignIn}
+          />
+        )}
+      </div>
+      {selection ? (
+        <TariffSubscriptionModal
+          tariffId={tariff.id}
+          price={selection.price}
+          option={option}
+          pending={pending}
+          suspended={suspended}
+          error={error}
+          completed={completed}
+          subscriptionsHref={subscriptionsHref}
+          walletHref={walletHref}
+          onClose={() => setSelection(undefined)}
+          onSubmit={onSubscribe}
+        />
+      ) : null}
+    </article>
+  );
+}

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

@@ -0,0 +1,40 @@
+# TariffCardDescription · React
+
+## English
+
+`TariffCardDescription` reads the plan identified by `tariffId` from the
+isolated catalog store. The localized `tariff_short_description` is stripped
+of markup and included in server HTML. When a localized `tariff_description`
+exists, hydration adds a Details disclosure containing sanitized formatting.
+Unsafe elements, attributes and addresses are removed before that HTML is
+inserted. With neither description the component renders nothing.
+
+The component emits no events and makes no requests. Source is maintained in
+`components/orionplace/tariffs/TariffCardDescription.tsx`; the plan contract is
+`interfaces/orionplace/subscribeTariff/ISubscribeTariff.ts`.
+
+### Props
+
+| Prop               | Meaning                                            |
+| ------------------ | -------------------------------------------------- |
+| `tariffId: number` | ID of the tariff handled by TariffCardDescription. |
+
+## Русский
+
+`TariffCardDescription` читает тариф с указанным `tariffId` из отдельного
+хранилища каталога. Разметка удаляется из локализованного
+`tariff_short_description`, поэтому краткий текст входит в первоначальный
+HTML. Если заполнено локализованное `tariff_description`, после гидратации
+появляется раскрываемый раздел «Подробнее» с безопасным форматированием.
+Опасные элементы, атрибуты и адреса удаляются до вставки HTML. Без обоих
+описаний компонент ничего не выводит.
+
+Компонент не отправляет события и запросы. Исходный файл:
+`components/orionplace/tariffs/TariffCardDescription.tsx`; контракт тарифа:
+`interfaces/orionplace/subscribeTariff/ISubscribeTariff.ts`.
+
+### Свойства
+
+| Свойство           | Назначение                                           |
+| ------------------ | ---------------------------------------------------- |
+| `tariffId: number` | ID тарифа, с которым работает TariffCardDescription. |

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

@@ -0,0 +1,72 @@
+/* Two rows of the card: the short description and the details disclosure,
+   which starts at the same height in every card of a row. */
+.root {
+  display: grid;
+  grid-row: span 2;
+  grid-template-rows: subgrid;
+  row-gap: 0;
+  color: var(--orionplace-text);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.root > p {
+  grid-row: 1;
+  margin: 0;
+  color: var(--orionplace-muted);
+}
+
+.root > details {
+  grid-row: 2;
+  margin-top: 0.5rem;
+}
+
+.root summary {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.25rem;
+  padding-bottom: 0.125rem;
+  border-bottom: 1px solid currentColor;
+  cursor: pointer;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.08em;
+  list-style: none;
+  text-transform: uppercase;
+}
+
+.root summary::-webkit-details-marker {
+  display: none;
+}
+
+.root summary span {
+  transition: transform 150ms ease;
+}
+
+.root details[open] summary span {
+  transform: rotate(180deg);
+}
+
+.details {
+  margin-top: 0.75rem;
+  overflow-wrap: anywhere;
+}
+
+.details :global(p) {
+  margin: 0;
+}
+
+.details :global(p + p) {
+  margin-top: 0.5rem;
+}
+
+.details :global(a) {
+  color: var(--orionplace-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .root summary span {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  useOrionplaceCatalog,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import {
+  getAvailableNestedValueFromObject,
+  plainText,
+} from '@/lib/orionplace/presentation';
+import { safeBlogArticleHtml } from '@/lib/orionplace/blogArticleHtml';
+import { tariffLabels } from '@/lib/orionplace/tariffLabels';
+import styles from './TariffCardDescription.module.css';
+
+export function TariffCardDescription({ tariffId }: { tariffId: number }) {
+  const tariff = useOrionplaceCatalog((state) =>
+    state.tariffs?.data.find((entry) => entry.id === tariffId),
+  );
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const [hydrated, setHydrated] = useState(false);
+  const labels = tariffLabels(locale);
+  const description = plainText(getAvailableNestedValueFromObject(
+    tariff?.locales,
+    locale,
+    'tariff_short_description',
+  ));
+  const source = getAvailableNestedValueFromObject(
+    tariff?.locales,
+    locale,
+    'tariff_description',
+  );
+  const details = hydrated && source ? safeBlogArticleHtml(source) : '';
+
+  useEffect(() => setHydrated(true), []);
+
+  if (!description && !details) {
+    return null;
+  }
+
+  return (
+    <div className={styles.root} data-feature-part="TariffCardDescription">
+      {description ? <p>{description}</p> : null}
+      {details ? (
+        <details>
+          <summary>
+            {labels.details}
+            <span aria-hidden="true">↓</span>
+          </summary>
+          <div
+            className={styles.details}
+            dangerouslySetInnerHTML={{ __html: details }}
+          />
+        </details>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+# TariffCardFeatures · React
+
+## English
+
+`TariffCardFeatures` reads the plan identified by `tariffId` and its parent
+subscription from the isolated catalog store. It lists supported boolean and
+numeric values from `tariff_variables_json` in response order. Known fields use
+localized storefront names, units and explanations; custom fields use their
+localized name from the parent subscription. Unnamed values and text or nested
+service identifiers are omitted. `false` is announced as excluded, and numeric
+limits show their verified unit.
+
+When the plan offers several options, the selector shows their localized names
+and the surcharge for `period` in the selected currency. `option` is the
+selected option ID; `onOptionChange(option)` receives the next ID. A plan with
+zero or one option has no selector. Option images use the same safe fallback as
+the shared select.
+
+The component makes no requests. Source is maintained in
+`components/orionplace/tariffs/TariffCardFeatures.tsx`.
+
+### Props
+
+| Prop                                                     | Meaning                                                                                     |
+| -------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `tariffId: number`                                       | ID of the tariff handled by TariffCardFeatures.                                             |
+| `period?: number`                                        | Selected tariff billing period.                                                             |
+| `option?: number`                                        | Selected tariff or product option.                                                          |
+| `onOptionChange?: (option: number \| undefined) => void` | Passes the selected tariff option ID, or `undefined` when cleared. The application supplies the new `option` value. |
+
+## Русский
+
+`TariffCardFeatures` читает тариф с указанным `tariffId` и его родительскую
+подписку из отдельного хранилища каталога. Булевы и числовые значения из
+`tariff_variables_json` выводятся в порядке ответа. Известные поля получают
+локализованные названия, единицы и пояснения магазина; пользовательские поля —
+локализованное название из родительской подписки. Поля без названия, текстовые
+и вложенные служебные идентификаторы не показываются. Значение `false`
+обозначается как не включённое, а числовые ограничения содержат проверенную
+единицу.
+
+Если тариф предлагает несколько опций, селектор показывает их локализованные
+названия и доплату для `period` в выбранной валюте. `option` содержит выбранный
+ID, а `onOptionChange(option)` получает следующий ID. При нуле или одной опции
+селектора нет. Для изображений опций действует безопасная заглушка общего
+селектора.
+
+Компонент не отправляет запросы. Исходный файл:
+`components/orionplace/tariffs/TariffCardFeatures.tsx`.
+
+### Свойства
+
+| Свойство                                                 | Назначение                                                                                 |
+| -------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| `tariffId: number`                                       | ID тарифа, с которым работает TariffCardFeatures.                                          |
+| `period?: number`                                        | Выбранный период оплаты тарифа.                                                            |
+| `option?: number`                                        | Выбранная опция тарифа или товара.                                                         |
+| `onOptionChange?: (option: number \| undefined) => void` | Передаёт ID выбранной опции тарифа или `undefined`, если выбор очищен. Приложение передаёт новое значение `option`. |

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

@@ -0,0 +1,60 @@
+/* Three rows of the card: the features, then the two rows the option
+   chooser fills, so the choosers of every card in a row start 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);
+}
+
+.root ul {
+  display: grid;
+  grid-row: 1;
+  align-content: start;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.root li {
+  display: flex;
+  min-width: 0;
+  align-items: start;
+  gap: 0.75rem;
+  line-height: 1.25rem;
+}
+
+.root > :not(ul) {
+  grid-row: 2 / span 2;
+  margin-top: 1.25rem;
+}
+
+.excluded {
+  color: var(--orionplace-muted);
+}
+
+.mark {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+  margin-top: .125rem;
+}
+
+.root li > span:last-child > span {
+  margin-left: 0.25rem;
+}
+
+.screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

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

@@ -0,0 +1,140 @@
+'use client';
+
+import {
+  useOrionplaceCatalog,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import type { ISubscribeTariffOption } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import {
+  tariffFeatures,
+  tariffMoney,
+  tariffOptionAmount,
+  tariffPaidPeriods,
+} from '@/lib/orionplace/tariffs';
+import { tariffLabels } from '@/lib/orionplace/tariffLabels';
+import { OrionplaceInfoHint } from '@/components/orionplace/shared/OrionplaceInfoHint';
+import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
+import styles from './TariffCardFeatures.module.css';
+
+export interface TariffCardFeaturesProps {
+  tariffId: number;
+  period?: number;
+  option?: number;
+  onOptionChange?: (option: number | undefined) => void;
+}
+
+export function TariffCardFeatures({
+  tariffId,
+  period,
+  option,
+  onOptionChange,
+}: TariffCardFeaturesProps) {
+  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 features = tariff
+    ? tariffFeatures(tariff, tariffs?.subscriptions, locale).map((feature) => ({
+        ...feature,
+        included: feature.value !== false,
+      }))
+    : [];
+  const periods = tariff ? tariffPaidPeriods(tariff) : [];
+  const price = periods.find((entry) => entry.tariff_cost_id === period) ??
+    periods[0];
+  const options = tariff?.options ?? [];
+  const hasChoice = options.length > 1;
+
+  function caption(entry: ISubscribeTariffOption) {
+    const name = getAvailableNestedValueFromObject(
+      entry.locale,
+      locale,
+      'option_name',
+    );
+    const amount = price
+      ? tariffOptionAmount(entry, price.period_id, currencyId)
+      : undefined;
+    const extra = amount
+      ? tariffMoney(amount, locale, currency)
+      : '';
+    const title = String(name || entry.id);
+    return extra ? `${title} · +${extra}` : title;
+  }
+
+  const captions = Object.fromEntries(
+    options.map((entry) => [String(entry.id), caption(entry)]),
+  );
+  const imageValues = Object.fromEntries(
+    options.map((entry) => [String(entry.id), entry.image]),
+  );
+  const icons = Object.values(imageValues).some(Boolean)
+    ? imageValues
+    : undefined;
+
+  if (!features.length && !hasChoice) {
+    return null;
+  }
+
+  return (
+    <div className={styles.root} data-feature-part="TariffCardFeatures">
+      {features.length ? (
+        <ul aria-label={labels.features}>
+          {features.map((feature) => (
+            <li
+              key={feature.key}
+              data-tariff-feature={feature.key}
+              data-included={feature.included}
+              className={feature.included ? '' : styles.excluded}
+            >
+              <svg
+                className={styles.mark}
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <path
+                  d={feature.included ? 'm3 8.5 3 3 7-7' : 'M4 8h8'}
+                />
+              </svg>
+              <span>
+                {feature.label}
+                {feature.detail ? `: ${feature.detail}` : ''}
+                {feature.hint ? (
+                  <OrionplaceInfoHint
+                    label={feature.label}
+                    text={feature.hint}
+                  />
+                ) : null}
+                {!feature.included ? (
+                  <span className={styles.screenReaderOnly}>
+                    ({labels.notIncluded})
+                  </span>
+                ) : null}
+              </span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {hasChoice ? (
+        <OrionplaceSelect
+          value={option === undefined ? '' : String(option)}
+          options={captions}
+          icons={icons}
+          label={labels.options}
+          onValueChange={(value) => onOptionChange?.(
+            value ? Number(value) : undefined,
+          )}
+        />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+# TariffCardImage · React
+
+## English
+
+`TariffCardImage` reads the plan identified by `tariffId` from the isolated
+catalog store. It shows the first small image from `tariff_image.small`, uses
+the localized `tariff_name` as alternative text and reserves image space while
+it loads. A plan without an image renders no placeholder.
+
+The component emits no events and makes no requests. Source is maintained in
+`components/orionplace/tariffs/TariffCardImage.tsx`; the plan contract is
+`interfaces/orionplace/subscribeTariff/ISubscribeTariff.ts`.
+
+### Props
+
+| Prop               | Meaning                                      |
+| ------------------ | -------------------------------------------- |
+| `tariffId: number` | ID of the tariff handled by TariffCardImage. |
+
+## Русский
+
+`TariffCardImage` читает тариф с указанным `tariffId` из отдельного хранилища
+каталога. Компонент показывает первое малое изображение из
+`tariff_image.small`, использует локализованное `tariff_name` как доступное
+название и резервирует место до загрузки. Если у тарифа нет изображения,
+заглушка не выводится.
+
+Компонент не отправляет события и запросы. Исходный файл:
+`components/orionplace/tariffs/TariffCardImage.tsx`; контракт тарифа:
+`interfaces/orionplace/subscribeTariff/ISubscribeTariff.ts`.
+
+### Свойства
+
+| Свойство           | Назначение                                     |
+| ------------------ | ---------------------------------------------- |
+| `tariffId: number` | ID тарифа, с которым работает TariffCardImage. |

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

@@ -0,0 +1,8 @@
+.image {
+  box-sizing: border-box;
+  width: 100%;
+  height: 10rem;
+  border-radius: 0;
+  background: var(--orionplace-surface);
+  object-fit: contain;
+}