orionplace-react 0.1.0 → 0.2.0

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

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

@@ -0,0 +1,350 @@
+'use client';
+
+import { useEffect, useRef, useState, type FormEvent } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceCatalog,
+  useOrionplaceCatalogStore,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectIsAuthenticated } from '@/stores/orionplace';
+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 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 ? resume : 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

@@ -0,0 +1,67 @@
+# 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`                                     | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.                      |