orionplace-react 0.7.8 → 0.8.0

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

@@ -1,225 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
-import {
-  useOrionplace,
-  useOrionplaceCatalog,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectProfile } from '@/stores/orionplace';
-import { selectUsedSubscriptions } from '@/stores/orionplaceCatalog';
-import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
-import type {
-  ITariffSelection,
-  ITariffSubscribeRequest,
-} from '@/interfaces/orionplace/subscribeTariff/ITariffSelection';
-import {
-  tariffIsOpen,
-  tariffSubscribeRequest,
-  tariffTrialOpen,
-} 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 profile = useOrionplace((state) => selectProfile(state)?.id);
-  const used = useOrionplaceCatalog(selectUsedSubscriptions(profile));
-  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);
-  // No trial badge for a customer who already had this subscription record.
-  const trialBadge = tariff && tariffTrialOpen(tariff, used)
-    ? 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

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

@@ -1,72 +0,0 @@
-/* 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

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

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

@@ -1,60 +0,0 @@
-/* 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

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

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