orionplace-react 0.7.8 → 0.8.0

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

@@ -1,219 +0,0 @@
-.root {
-  composes: feature from '../shared/features.module.css';
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: 2.5rem;
-  color: var(--orionplace-text);
-  font-family: inherit;
-  container-type: inline-size;
-}
-
-.header {
-  display: grid;
-  gap: 1.5rem;
-  padding-bottom: 2rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-.introduction {
-  display: grid;
-  max-width: 42rem;
-  gap: 0.75rem;
-}
-
-.introduction h1,
-.groupHeading h2 {
-  margin: 0;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  line-height: 1.25;
-  text-transform: uppercase;
-}
-
-.introduction h1 {
-  font-size: 1.5rem;
-}
-
-.groupHeading h2 {
-  font-size: 1.125rem;
-}
-
-.introduction p,
-.groupHeading p,
-.notice p {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.introduction nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem 1.5rem;
-  padding-top: 0.25rem;
-}
-
-/* The page's own text links, as `commerce-link` in the other packages; the
-   plan cards keep their own picture and name links. */
-.introduction nav a,
-.notice a {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  align-self: flex-start;
-  gap: 0.25rem;
-  padding-bottom: 0.125rem;
-  border-bottom: 1px solid currentColor;
-  color: var(--orionplace-text);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  outline: none;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
-.introduction nav a:focus-visible,
-.notice a:focus-visible {
-  opacity: 0.7;
-}
-
-@media (hover: hover) {
-  .introduction nav a:hover,
-  .notice a:hover {
-    opacity: 0.7;
-  }
-}
-
-.search {
-  display: flex;
-  min-width: 0;
-  align-items: end;
-}
-
-.search label {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  flex-direction: column;
-  gap: 0.5rem;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.search input {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  min-height: 2.75rem;
-  padding: 0 0.75rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  font: inherit;
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-/* The page's own buttons (search, notices, empty state), as `commerce-button`
-   in the other packages; the plan cards keep their own buttons. */
-.search button,
-.notice button,
-.root [data-empty-state] button,
-.root [data-empty-state] a {
-  display: inline-flex;
-  min-height: 2.75rem;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1.5rem;
-  border: 1px solid var(--orionplace-text);
-  background: transparent;
-  color: var(--orionplace-text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
-.search button {
-  margin-left: -1px;
-  border-color: var(--orionplace-accent);
-  background: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-}
-
-.search button:disabled,
-.notice button:disabled,
-.root input:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.notice {
-  display: grid;
-  justify-items: start;
-  gap: 0.75rem;
-  padding: 1rem;
-  border: 1px solid var(--orionplace-border);
-}
-
-.error {
-  border-color: var(--orionplace-danger);
-  color: var(--orionplace-danger);
-}
-
-.error p,
-.success p {
-  color: inherit;
-}
-
-.success {
-  border-color: var(--orionplace-success);
-  color: var(--orionplace-success);
-}
-
-.group,
-.groupHeading {
-  display: grid;
-  gap: 1.25rem;
-}
-
-.groupHeading {
-  max-width: 42rem;
-  gap: 0.5rem;
-}
-
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-/* The page's width on a 1024px screen, as in the other packages. */
-@container (min-width: 960px) {
-  .header {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 27.5rem);
-    align-items: end;
-    gap: 2.5rem;
-  }
-}
-
-/* The title follows the component's own width, as in the other packages. */
-@container (min-width: 592px) {
-  .introduction h1 { font-size: 1.875rem; }
-  .groupHeading h2 { font-size: 1.5rem; }
-}

package/templates/components/orionplace/subscriptions/StorefrontTariffs.tsx

@@ -1,367 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState, type FormEvent } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceCatalog,
-  useOrionplaceCatalogStore,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import {
-  selectIsAuthenticated,
-  selectProfile,
-} from '@/stores/orionplace';
-import { selectUsedSubscriptions } from '@/stores/orionplaceCatalog';
-import { tariffResumable } from '@/lib/orionplace/tariffs';
-import type { ISubscriptionTariffsResponse } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
-import type { ITariffSelection } from '@/interfaces/orionplace/subscribeTariff/ITariffSelection';
-import {
-  getAvailableNestedValueFromObject,
-  plainText,
-} from '@/lib/orionplace/presentation';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { subscriptionLabels } from '@/lib/orionplace/subscriptionLabels';
-import {
-  useOrionplaceTariffPurchase,
-  type TariffPurchaseActions,
-} from '@/hooks/useOrionplaceTariffPurchase';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { TariffCards } from '@/components/orionplace/tariffs/TariffCards';
-import styles from './StorefrontTariffs.module.css';
-import { apiErrorMessage } from '@/lib/orionplace/api';
-
-type TariffsPage = NonNullable<ISubscriptionTariffsResponse['page_data']>;
-
-export interface TariffsLoadAction {
-  endpoint: 'subscriptions_guest_search';
-  request: { filters: { search_string: string } };
-  signal: AbortSignal;
-}
-
-export interface StorefrontTariffsProps extends TariffPurchaseActions {
-  resume?: ITariffSelection;
-  ids?: number[];
-  initialError?: string;
-  loadOnMount?: boolean;
-  tariffsHref?: (locale: string) => string;
-  subscriptionsHref?: (locale: string) => string;
-  walletHref?: (locale: string) => string;
-  onLoad: (action: TariffsLoadAction) => Promise<TariffsPage> | TariffsPage;
-  onRequireSignIn?: (returnPath: string) => void;
-  onListLoaded?: (page: TariffsPage) => void;
-}
-
-export function StorefrontTariffs({
-  resume,
-  ids = [],
-  initialError = '',
-  loadOnMount = true,
-  tariffsHref = (locale) => `/tariffs?locale=${encodeURIComponent(locale)}`,
-  subscriptionsHref = (locale) =>
-    `/subscriptions?locale=${encodeURIComponent(locale)}`,
-  walletHref = (locale) => `/wallet?locale=${encodeURIComponent(locale)}`,
-  onLoad,
-  onRequireSignIn,
-  onListLoaded,
-  onSubscribe,
-  onLoadSubscriptions,
-  onLoadProfile,
-  onAccountLoaded,
-}: StorefrontTariffsProps) {
-  const authenticated           = useOrionplace(selectIsAuthenticated);
-  const tariffs                 = useOrionplaceCatalog((state) => state.tariffs);
-  const replaced                = useOrionplaceCatalog(
-    (state) => state.tariffsSnapshot !== undefined,
-  );
-  const catalogStore            = useOrionplaceCatalogStore();
-  const profile                 = useOrionplace(
-    (state) => selectProfile(state)?.id,
-  );
-  const used                    = useOrionplaceCatalog(
-    selectUsedSubscriptions(profile),
-  );
-  const locale                  = useOrionplaceSelections((state) => state.localeCode);
-  const labels                  = subscriptionLabels(locale);
-  const common                  = featureLabels(locale);
-  const callbacks               = useRef({ onLoad, onListLoaded });
-  callbacks.current             = { onLoad, onListLoaded };
-  const active                  = useRef<AbortController | undefined>(undefined);
-  const requested               = useRef(false);
-  const automaticLoad           = loadOnMount && (!tariffs || replaced) && !initialError;
-  const [query, setQuery]       = useState('');
-  const [searched, setSearched] = useState('');
-  const [pending, setPending]   = useState(automaticLoad);
-  const [error, setError]       = useState(initialError);
-  const purchase                = useOrionplaceTariffPurchase(
-    {
-      onSubscribe,
-      onLoadSubscriptions,
-      onLoadProfile,
-      onAccountLoaded,
-    },
-    common.failed,
-  );
-  const busy                    = pending || purchase.pending;
-  const shown                   = (tariffs?.data ?? []).filter(
-    (tariff) => !ids.length || ids.includes(tariff.id),
-  );
-  const groups                  = [...new Set(shown.map((tariff) => tariff.subscription))].map(
-    (id) => {
-      const subscription = tariffs?.subscriptions.find(
-        (entry) => entry.id === id,
-      );
-      return {
-        id,
-        name: getAvailableNestedValueFromObject(
-          subscription?.locale,
-          locale,
-          'subscription_name',
-        ),
-        description: plainText(
-          getAvailableNestedValueFromObject(
-            subscription?.locale,
-            locale,
-            'subscription_description',
-          ),
-        ),
-      };
-    },
-  );
-  const empty                   = Boolean(tariffs) && shown.length === 0;
-  const emptyMessage            = searched
-    ? labels.emptyOffers
-    : ids.length
-      ? labels.emptyIds
-      : labels.noOffers;
-
-  async function load(search = query) {
-    if (active.current) {
-      return;
-    }
-    const controller = new AbortController();
-    const text       = search.trim();
-    active.current   = controller;
-    setPending(true);
-    setError('');
-    try {
-      const page = await callbacks.current.onLoad({
-        endpoint: 'subscriptions_guest_search',
-        request: { filters: { search_string: text } },
-        signal: controller.signal,
-      });
-      if (controller.signal.aborted) {
-        return;
-      }
-      // An empty search is the complete list; a text search changes only
-      // what this page shows, not the plans the subscriptions page offers.
-      if (text) {
-        catalogStore.getState().setTariffs(page);
-      } else {
-        catalogStore.getState().setStoreTariffs(page);
-      }
-      setSearched(text);
-      callbacks.current.onListLoaded?.(page);
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        setError(
-          apiErrorMessage(reason) || common.failed,
-        );
-      }
-    } finally {
-      if (active.current === controller) {
-        active.current = undefined;
-        setPending(false);
-      }
-    }
-  }
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    void load();
-  }
-
-  function reset() {
-    setQuery('');
-    void load('');
-  }
-
-  useEffect(() => {
-    if (!requested.current && automaticLoad) {
-      requested.current = true;
-      void load('');
-    }
-    return () => {
-      active.current?.abort();
-      active.current    = undefined;
-      requested.current = false;
-    };
-  }, []);
-
-  return (
-    <section
-      className={styles.root}
-      data-feature-part="StorefrontTariffs"
-      aria-busy={busy}
-    >
-      <header className={styles.header}>
-        <div className={styles.introduction}>
-          <h1>{labels.offers}</h1>
-          <p>{labels.intro}</p>
-          {authenticated ? (
-            <nav aria-label={labels.mine}>
-              <a href={subscriptionsHref(locale)}>{labels.mine}</a>
-              <a href={walletHref(locale)}>{labels.wallet}</a>
-            </nav>
-          ) : null}
-        </div>
-        <form
-          role="search"
-          className={styles.search}
-          onSubmit={submit}
-        >
-          <label>
-            {labels.searchHint}
-            <input
-              type="search"
-              name="search_string"
-              value={query}
-              disabled={busy}
-              onChange={(event) => setQuery(event.currentTarget.value)}
-            />
-          </label>
-          <button
-            type="submit"
-            disabled={busy}
-          >
-            {labels.search}
-          </button>
-        </form>
-      </header>
-      {busy ? (
-        <span
-          className="op-feature-loading"
-          role="status"
-        >
-          <span className={styles.screenReaderOnly}>{common.loading}</span>
-        </span>
-      ) : null}
-      {ids.length && !empty ? (
-        <div
-          className={styles.notice}
-          role="status"
-          data-tariffs-filter
-        >
-          <p>{labels.filtered}</p>
-          <a
-            href={tariffsHref(locale)}
-            aria-label={labels.allPlansHint}
-          >
-            {labels.allPlans}
-          </a>
-        </div>
-      ) : null}
-      {error ? (
-        <div
-          className={`${styles.notice} ${styles.error}`}
-          role="alert"
-        >
-          <p>{error}</p>
-          <button
-            type="button"
-            disabled={busy}
-            onClick={() => void load()}
-          >
-            {common.retry}
-          </button>
-        </div>
-      ) : null}
-      {purchase.completed && !purchase.needsRefresh ? (
-        <div
-          className={`${styles.notice} ${styles.success}`}
-          role="status"
-          data-tariffs-completed
-        >
-          <p>{labels.confirmed}</p>
-          <a href={subscriptionsHref(locale)}>{labels.mine}</a>
-        </div>
-      ) : null}
-      {purchase.needsRefresh && !purchase.pending ? (
-        <div
-          className={styles.notice}
-          role="status"
-        >
-          <p>{labels.refreshRequired}</p>
-          <button
-            type="button"
-            disabled={busy}
-            onClick={() => void purchase.refresh()}
-          >
-            {common.refresh}
-          </button>
-        </div>
-      ) : null}
-      {empty && !pending ? (
-        <OrionplaceEmptyState
-          kind="subscriptions"
-          size="large"
-          message={emptyMessage}
-        >
-          {searched ? (
-            <button
-              type="button"
-              disabled={busy}
-              onClick={reset}
-            >
-              {labels.reset}
-            </button>
-          ) : null}
-          {ids.length ? (
-            <a
-              href={tariffsHref(locale)}
-              aria-label={labels.allPlansHint}
-            >
-              {labels.allPlans}
-            </a>
-          ) : null}
-        </OrionplaceEmptyState>
-      ) : null}
-      {groups.map((group) => (
-        <section
-          key={group.id}
-          className={styles.group}
-          aria-label={group.name || labels.offers}
-          data-subscription-id={group.id}
-        >
-          {group.name || group.description ? (
-            <div className={styles.groupHeading}>
-              {group.name ? <h2>{group.name}</h2> : null}
-              {group.description ? <p>{group.description}</p> : null}
-            </div>
-          ) : null}
-          <TariffCards
-            subscriptionId={group.id}
-            tariffIds={ids}
-            guest={!authenticated}
-            open={authenticated
-              ? tariffResumable(
-                resume,
-                resume && tariffs?.data.find((entry) => entry.id === resume.tariff),
-                used,
-              )
-              : undefined}
-            disabled={busy || purchase.needsRefresh}
-            pending={purchase.pending}
-            suspended={purchase.needsRefresh}
-            error={purchase.completed ? '' : purchase.error}
-            completed={purchase.completed}
-            subscriptionsHref={subscriptionsHref}
-            walletHref={walletHref}
-            onRequireSignIn={onRequireSignIn}
-            onSelect={purchase.resetFeedback}
-            onSubscribe={(request) => void purchase.subscribe(request)}
-          />
-        </section>
-      ))}
-    </section>
-  );
-}

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

@@ -1,67 +0,0 @@
-# SubscriptionCancelDialog · React
-
-## English
-
-`SubscriptionCancelDialog` confirms cancellation for `subscription`. It names
-the localized `plan`, explains that automatic renewal stops, and uses
-`active_until.date` when the paid access end date is known. Cancellation does
-not shorten the paid period and does not promise a refund.
-
-Submit calls `onSubmit({ paid_subscription: subscription.id })`. The
-`paid_subscription` message from `fields` appears beside the action;
-`fields.__all__` supplies the general response message. A field message hides
-the fallback `error` so the same failure is not repeated.
-
-`pending` blocks submit, Escape, the close button and backdrop dismissal.
-`modal={false}` opens the native dialog inline. Modal presentation locks page
-scrolling, focuses the close button and restores the opener when removed.
-Changing `modal` while the dialog is open switches it in place and keeps the
-focused control.
-Source is maintained in
-`components/orionplace/subscriptions/SubscriptionCancelDialog.tsx`.
-
-### Props
-
-| Prop                                                       | Meaning                                                                                               |
-| ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `subscription?: ICustomerSubscription`                     | Customer subscription displayed or changed by the component.                                          |
-| `plan?: ISubscribeTariff`                                  | Tariff plan associated with the current card or subscription.                                         |
-| `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.                     |
-| `fields?: Record<string, string>`                          | Field-level errors or configured fields used by the current form.                                     |
-| `modal?: boolean`                                          | Uses a native modal dialog when true and an inline panel when false.                                  |
-| `onSubmit?: (request: ISubscriptionCancelRequest) => void` | Confirmation passes `paid_subscription`, the ID of the subscription being cancelled. The application submits the request and supplies the result or errors. |
-| `onClose?: () => void`                                     | Called when the visitor closes the panel or dialog. The callback has no payload.                      |
-
-## Русский
-
-`SubscriptionCancelDialog` подтверждает отмену `subscription`. Компонент
-показывает локализованное название `plan`, объясняет остановку автопродления и
-использует `active_until.date`, когда известна дата окончания оплаченного
-доступа. Отмена не сокращает оплаченный период и не обещает возврат денег.
-
-Отправка вызывает `onSubmit({ paid_subscription: subscription.id })`. Сообщение
-`paid_subscription` из `fields` выводится рядом с действием, а `fields.__all__`
-задаёт общее сообщение ответа. При наличии ошибки поля запасной `error` не
-повторяется.
-
-Во время `pending` заблокированы отправка, Escape, кнопка закрытия и щелчок по
-фону. `modal={false}` открывает системный диалог внутри страницы. Модальный
-режим блокирует прокрутку, переводит фокус на кнопку закрытия и после удаления
-возвращает его элементу, который открыл окно. Если изменить `modal`, пока окно
-открыто, оно переключается на месте, а фокус остаётся на прежнем элементе.
-Исходный файл:
-`components/orionplace/subscriptions/SubscriptionCancelDialog.tsx`.
-
-### Свойства
-
-| Свойство                                                   | Назначение                                                                                                    |
-| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `subscription?: ICustomerSubscription`                     | Подписка покупателя, которую показывает или изменяет компонент.                                               |
-| `plan?: ISubscribeTariff`                                  | Тарифный план текущей карточки или подписки.                                                                  |
-| `pending?: boolean`                                        | Показывает загрузку и блокирует повторные действия.                                                           |
-| `error?: string`                                           | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                          |
-| `fields?: Record<string, string>`                          | Ошибки полей или настроенные поля текущей формы.                                                              |
-| `modal?: boolean`                                          | Показывает нативное модальное окно при `true` и встроенную панель при `false`.                                |
-| `onSubmit?: (request: ISubscriptionCancelRequest) => void` | Подтверждение передаёт `paid_subscription` — ID отменяемой подписки. Приложение отправляет запрос и передаёт результат или ошибки. |
-| `onClose?: () => void`                                     | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.                      |