orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/subscriptions/StorefrontTariff.README.md

@@ -1,124 +0,0 @@
-# StorefrontTariff · React
-
-## English
-
-`StorefrontTariff` renders one public plan identified by `tariffId`.
-`preloaded` reuses that plan and its parent subscription from the isolated
-catalog store in server HTML. Otherwise hydration calls `onLoad` with
-`subscriptions_guest_search` and `filters.id`. Only the matching plan from a
-successful response is accepted. The catalog is replaced with that plan and
-the returned parent subscriptions, `onLoaded(plan)` reports it, and an empty
-successful result calls `onMissing()`. A failed request shows Retry and keeps
-the error separate from the missing state. Changing `tariffId` aborts the old
-request and clears its media and purchase choices.
-
-The heading and breadcrumb use `tariff_name`, then `tariff_title`; the browser
-page title uses `tariff_title`, then `tariff_name`. The short description
-is plain text in server HTML. The full editor description is also readable as
-plain paragraphs on the server; after hydration it changes to sanitized rich
-HTML. Images use the full collection, falling back to small images, and videos
-follow in `display_order`. Main images and thumbnails reserve fixed aspect
-space. Previous, next and thumbnail actions wrap around the collection. Unsafe
-image, video and poster addresses are not loaded.
-
-The purchase panel uses the verified feature, option, period and price
-components. A guest choice calls `onRequireSignIn(returnPath)` with this
-localized detail-page path, plan ID and selected paid cost ID or `trial`.
-For a signed-in visitor, `resume` opens the matching choice. Confirmation calls
-`subscriptions_subscribe`, then `subscriptions_get` and `profile_get` through
-the callbacks from `TariffPurchaseActions`. A failed required refresh hides the
-dialog, blocks another purchase and exposes Refresh without discarding the
-dialog fields.
-
-For a signed-in customer the component also reads `subscriptions_get` once
-through `onLoadSubscriptions`: plans of a subscription the customer already
-had offer no trial, and a resumed trial opens only after that read, for a
-customer new to the subscription. A failed read leaves the trial shown; the
-backend still refuses a repeated trial.
-
-The component makes requests only through its callbacks. Source is maintained
-in `components/orionplace/subscriptions/StorefrontTariff.tsx`; the plan contract
-is `interfaces/orionplace/subscribeTariff/ISubscribeTariff.ts`.
-
-### Props
-
-| Prop                                                                                                                 | Meaning                                                                                                       |
-| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `tariffId: number`                                                                                                   | ID of the tariff handled by StorefrontTariff.                                                                 |
-| `preloaded?: boolean`                                                                                                | Server-loaded record used for the first render and hydration.                                                 |
-| `resume?: ITariffSelection`                                                                                          | Restores the selected tariff and period after a sign-in return.                                               |
-| `initialError?: string`                                                                                              | Server-provided initial error used for the first render and hydration.                                        |
-| `loadOnMount?: boolean`                                                                                              | Starts the load callback after hydration when server data was not supplied.                                   |
-| `tariffsHref?: (locale: string) => string`                                                                           | Builds the tariffs 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.                                                    |
-| `onLoad: (action: TariffPageLoadAction) => Promise<TariffsPage> \| TariffsPage`                                      | Called when the component needs its primary data. The callback payload is shown in its type.                  |
-| `onRequireSignIn?: (returnPath: string) => void`                                                                     | Called when the visitor must sign in before continuing. The callback payload is shown in its type.            |
-| `onLoaded?: (tariff: ISubscribeTariff) => void`                                                                      | Called when the requested data loads successfully. The callback payload is shown in its type.                 |
-| `onMissing?: () => void`                                                                                             | Called when the requested public record does not exist. The callback has no payload.                          |
-| `onSubscribe: (action: TariffSubscribeAction) => Promise<void> \| void`                                              | Called when the visitor subscribes to the current product or plan. The callback payload is shown in its type. |
-| `onLoadSubscriptions: (action: TariffSubscriptionsRefreshAction) => Promise<SubscriptionsPage> \| SubscriptionsPage` | Called when the customer subscriptions must be refreshed. The callback payload is shown in its type.          |
-| `onLoadProfile: (action: TariffProfileRefreshAction) => Promise<ProfilePage> \| ProfilePage`                         | Called when the current profile must be refreshed. The callback payload is shown in its type.                 |
-| `onAccountLoaded?: (subscriptions: SubscriptionsPage, profile: ProfilePage) => void`                                 | Called when the refreshed account data is ready. The callback payload is shown in its type.                   |
-
-## Русский
-
-`StorefrontTariff` показывает один публичный тариф с указанным `tariffId`.
-`preloaded` использует тариф и его родительскую подписку из отдельного
-хранилища каталога уже в серверном HTML. Иначе после гидратации `onLoad`
-получает `subscriptions_guest_search` и `filters.id`. Из успешного ответа
-принимается только тариф с этим ID. Каталог заменяется этим тарифом и
-полученными родительскими подписками, `onLoaded(plan)` сообщает о тарифе, а
-пустой успешный ответ вызывает `onMissing()`. Ошибка показывает повтор и не
-смешивается с отсутствующим тарифом. Смена `tariffId` отменяет старый запрос и
-очищает выбранный материал и оформление.
-
-Заголовок и хлебные крошки берутся из `tariff_name`, затем из `tariff_title`;
-заголовок вкладки браузера — из `tariff_title`, затем из `tariff_name`. Краткое описание
-входит в серверный HTML как обычный текст. Полное редакторское описание также
-читается на сервере обычными абзацами, а после гидратации заменяется безопасной
-форматированной разметкой. Сначала показываются полные изображения с резервом
-на малые, затем видео по `display_order`. Основное изображение и миниатюры
-заранее резервируют место. Предыдущее, следующее и миниатюры циклически меняют
-материал. Небезопасные адреса изображений, видео и обложек не загружаются.
-
-Панель оформления использует проверенные компоненты возможностей, опций,
-периодов и цен. Для гостя `onRequireSignIn(returnPath)` получает
-локализованный адрес этой страницы, ID тарифа и выбранный ID платной стоимости
-или `trial`. Для авторизованного посетителя `resume` открывает этот выбор.
-Подтверждение вызывает `subscriptions_subscribe`, затем `subscriptions_get` и
-`profile_get` через функции `TariffPurchaseActions`. Если обязательное
-обновление не удалось, окно скрывается, новое подключение блокируется и
-появляется кнопка обновления, а заполненные поля окна сохраняются.
-
-Для авторизованного покупателя компонент также один раз читает
-`subscriptions_get` через `onLoadSubscriptions`: тарифы подписки, которая у
-покупателя уже была, не предлагают пробный период, а восстановленный пробный
-выбор открывается только после этого чтения и только для нового покупателя
-подписки. При ошибке чтения пробный период остаётся видимым; повторный пробный
-период всё равно отклоняет сервер.
-
-Компонент отправляет запросы только через переданные функции. Исходный файл:
-`components/orionplace/subscriptions/StorefrontTariff.tsx`; контракт тарифа:
-`interfaces/orionplace/subscribeTariff/ISubscribeTariff.ts`.
-
-### Свойства
-
-| Свойство                                                                                                             | Назначение                                                                                                         |
-| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `tariffId: number`                                                                                                   | ID тарифа, с которым работает StorefrontTariff.                                                                    |
-| `preloaded?: boolean`                                                                                                | Запись, загруженная на сервере для первого рендера и гидратации.                                                   |
-| `resume?: ITariffSelection`                                                                                          | Восстанавливает выбранный тариф и период после возврата со входа.                                                  |
-| `initialError?: string`                                                                                              | Начальное значение ошибки, полученное на сервере для первого рендера и гидратации.                                 |
-| `loadOnMount?: boolean`                                                                                              | Запускает загрузку после гидратации, если серверные данные не переданы.                                            |
-| `tariffsHref?: (locale: string) => string`                                                                           | Строит адрес ссылки тарифов из аргументов обработчика.                                                             |
-| `subscriptionsHref?: (locale: string) => string`                                                                     | Строит адрес ссылки подписок из аргументов обработчика.                                                            |
-| `walletHref?: (locale: string) => string`                                                                            | Строит адрес ссылки кошелька из аргументов обработчика.                                                            |
-| `onLoad: (action: TariffPageLoadAction) => Promise<TariffsPage> \| TariffsPage`                                      | Вызывается, когда компоненту нужны основные данные. Данные обработчика указаны в его типе.                         |
-| `onRequireSignIn?: (returnPath: string) => void`                                                                     | Вызывается, когда покупателю нужно войти перед продолжением. Данные обработчика указаны в его типе.                |
-| `onLoaded?: (tariff: ISubscribeTariff) => void`                                                                      | Вызывается, когда запрошенные данные успешно загружены. Данные обработчика указаны в его типе.                     |
-| `onMissing?: () => void`                                                                                             | Вызывается, когда запрошенная общедоступная запись не существует. Обработчик не получает данные.                   |
-| `onSubscribe: (action: TariffSubscribeAction) => Promise<void> \| void`                                              | Вызывается, когда покупатель оформляет подписку на текущий товар или тариф. Данные обработчика указаны в его типе. |
-| `onLoadSubscriptions: (action: TariffSubscriptionsRefreshAction) => Promise<SubscriptionsPage> \| SubscriptionsPage` | Вызывается, когда нужно обновить подписки покупателя. Данные обработчика указаны в его типе.                       |
-| `onLoadProfile: (action: TariffProfileRefreshAction) => Promise<ProfilePage> \| ProfilePage`                         | Вызывается, когда нужно обновить текущий профиль. Данные обработчика указаны в его типе.                           |
-| `onAccountLoaded?: (subscriptions: SubscriptionsPage, profile: ProfilePage) => void`                                 | Вызывается, когда обновлённые данные аккаунта готовы. Данные обработчика указаны в его типе.                       |

package/templates/components/orionplace/subscriptions/StorefrontTariff.module.css

@@ -1,311 +0,0 @@
-.root {
-  composes: feature from '../shared/features.module.css';
-  width: 100%;
-  color: var(--orionplace-text);
-  container: tariff / inline-size;
-  font-family: inherit;
-}
-
-.breadcrumbs {
-  margin-bottom: 1.5rem;
-}
-
-.layout {
-  display: grid;
-  align-items: start;
-  gap: 2rem;
-}
-
-.gallery {
-  display: grid;
-  min-width: 0;
-  gap: 0.75rem;
-}
-
-.stage {
-  position: relative;
-  display: grid;
-  min-width: 0;
-  min-height: 18rem;
-  place-items: center;
-  background: var(--orionplace-muted-surface);
-}
-
-.mainMedia {
-  width: 100%;
-  height: 100%;
-  max-height: 70vh;
-  object-fit: contain;
-}
-
-.unavailable {
-  margin: 0;
-  padding: 1.5rem;
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-  text-align: center;
-}
-
-.mediaButton {
-  position: absolute;
-  top: 50%;
-  display: grid;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  place-items: center;
-  transform: translateY(-50%);
-  border: 1px solid var(--orionplace-border);
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--orionplace-surface) 90%, transparent);
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-size: 1.5rem;
-}
-
-.previous {
-  left: 0.5rem;
-}
-
-.next {
-  right: 0.5rem;
-}
-
-.thumbnails {
-  display: flex;
-  min-width: 0;
-  gap: 0.5rem;
-  overflow: auto;
-}
-
-.thumbnails button {
-  box-sizing: border-box;
-  display: grid;
-  width: 3.5rem;
-  height: 4.375rem;
-  flex: 0 0 auto;
-  padding: 0.25rem;
-  place-items: center;
-  border: 1px solid transparent;
-  background: var(--orionplace-surface);
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-}
-
-.thumbnails button:focus-visible,
-.thumbnails button[aria-pressed='true'] {
-  border-color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .thumbnails button:hover {
-    border-color: var(--orionplace-text);
-  }
-}
-
-.thumbnail {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.details,
-.details > header {
-  display: grid;
-  min-width: 0;
-  align-content: start;
-  gap: 1.5rem;
-}
-
-.details > header {
-  gap: 0.75rem;
-}
-
-.details h1 {
-  margin: 0;
-  overflow-wrap: anywhere;
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 1.25;
-}
-
-.details header p,
-.notice p {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.purchase {
-  display: grid;
-  gap: 1.5rem;
-  padding: 1.25rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-}
-
-.notice {
-  display: grid;
-  justify-items: start;
-  gap: 0.75rem;
-  padding: 1rem;
-  border: 1px solid var(--orionplace-border);
-}
-
-.error {
-  margin-bottom: 1.5rem;
-  border-color: var(--orionplace-danger);
-  color: var(--orionplace-danger);
-}
-
-.error p {
-  color: inherit;
-}
-
-.notice button {
-  min-height: 2.5rem;
-  padding: 0 1rem;
-  border: 1px solid currentColor;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.75rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.description {
-  display: grid;
-  gap: 0.75rem;
-  margin-top: 2.5rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.description h2 {
-  margin: 0;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.description > div {
-  overflow-wrap: anywhere;
-  font-size: 0.875rem;
-  line-height: 1.7;
-}
-
-.description p {
-  margin: 0.75rem 0;
-}
-
-.description p:first-child {
-  margin-top: 0;
-}
-
-.description img {
-  max-width: 100%;
-  height: auto;
-}
-
-.skeleton {
-  display: grid;
-  gap: 2rem;
-}
-
-.skeleton > div:first-child {
-  min-height: 26rem;
-  background: var(--orionplace-border);
-}
-
-.skeleton > div:last-child {
-  display: grid;
-  align-content: start;
-  gap: 1.25rem;
-}
-
-.skeleton span {
-  display: block;
-  height: 2rem;
-  background: var(--orionplace-border);
-}
-
-.skeleton span:nth-child(2) {
-  height: 1.25rem;
-}
-
-.skeleton span:nth-child(3) {
-  height: 18rem;
-}
-
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-@container tariff (min-width: 35rem) {
-  /* The plan name follows the page's own width, as in the other packages. */
-  .details h1 {
-    font-size: 1.75rem;
-  }
-
-  .gallery {
-    grid-template-columns: 4.5rem minmax(0, 1fr);
-    gap: 1rem;
-  }
-
-  .stage {
-    grid-column: 2;
-    grid-row: 1;
-  }
-
-  .thumbnails {
-    grid-column: 1;
-    grid-row: 1;
-    flex-direction: column;
-  }
-
-  .thumbnails button {
-    width: 4.5rem;
-    height: 5.625rem;
-  }
-}
-
-@container tariff (min-width: 60rem) {
-  .layout,
-  .skeleton {
-    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
-  }
-
-  .layout {
-    column-gap: 3rem;
-  }
-
-  .stage {
-    min-height: 32.5rem;
-  }
-}
-
-/* The columns move further apart on a wide page, as in the other packages. */
-@container tariff (min-width: 75rem) {
-  .layout {
-    column-gap: 5rem;
-  }
-}
-
-/* The purchase panel's padding follows the page from 592px, as in Nuxt. */
-@container tariff (min-width: 592px) {
-  .purchase {
-    padding: 1.5rem;
-  }
-}