orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,111 @@
+# 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.
+
+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`. Если обязательное
+обновление не удалось, окно скрывается, новое подключение блокируется и
+появляется кнопка обновления, а заполненные поля окна сохраняются.
+
+Компонент отправляет запросы только через переданные функции. Исходный файл:
+`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

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