orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,175 @@
+'use client';
+
+import '@/components/orionplace/shared/dialogs.css';
+
+import { useId, type FormEvent, type MouseEvent } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { useOrionplaceDialog } from '@/hooks/useOrionplaceDialog';
+import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
+import type {
+  ICustomerSubscription,
+  ISubscriptionCancelRequest,
+} from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import { subscriptionManageLabels } from '@/lib/orionplace/subscriptionManageLabels';
+import styles from './SubscriptionDialog.module.css';
+
+export interface SubscriptionCancelDialogProps {
+  subscription?: ICustomerSubscription;
+  plan?: ISubscribeTariff;
+  pending?: boolean;
+  error?: string;
+  fields?: Record<string, string>;
+  modal?: boolean;
+  onSubmit?: (request: ISubscriptionCancelRequest) => void;
+  onClose?: () => void;
+}
+
+export function SubscriptionCancelDialog({
+  subscription,
+  plan,
+  pending = false,
+  error = '',
+  fields = {},
+  modal = true,
+  onSubmit,
+  onClose,
+}: SubscriptionCancelDialogProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const copy = subscriptionManageLabels(locale);
+  const id = useId();
+  const { dialog, initialFocus } = useOrionplaceDialog(subscription?.id, modal);
+  const name =
+    getAvailableNestedValueFromObject(plan?.locales, locale, 'tariff_name') ||
+    copy.manage;
+  const consequence = subscription?.active_until?.date
+    ? copy.cancelSummary.replace('{date}', subscription.active_until.date)
+    : copy.cancelSummaryNoDate;
+  const fieldError = fields.paid_subscription || '';
+  const generalError = fields.__all__ || (fieldError ? '' : error);
+
+  function close() {
+    if (!pending) {
+      onClose?.();
+    }
+  }
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!pending && subscription) {
+      onSubmit?.({ paid_subscription: subscription.id });
+    }
+  }
+
+  function backdrop(event: MouseEvent<HTMLDialogElement>) {
+    const bounds = dialog.current?.getBoundingClientRect();
+    if (
+      modal &&
+      event.target === dialog.current &&
+      bounds &&
+      (event.clientX < bounds.left ||
+        event.clientX > bounds.right ||
+        event.clientY < bounds.top ||
+        event.clientY > bounds.bottom)
+    ) {
+      close();
+    }
+  }
+
+  if (!subscription) {
+    return null;
+  }
+
+  return (
+    <dialog
+      data-stable-modal="compact"
+      ref={dialog}
+      className={`${styles.dialog} ${styles.narrow} ${modal ? '' : styles.inline}`.trim()}
+      aria-labelledby={`${id}-title`}
+      aria-describedby={`${id}-summary`}
+      aria-busy={pending}
+      data-feature-part="SubscriptionCancelDialog"
+      data-subscription-cancel-dialog
+      onCancel={(event) => {
+        event.preventDefault();
+        close();
+      }}
+      onKeyDown={(event) => {
+        // Escape belongs to this window, not to the page behind it.
+        if (event.key === 'Escape') {
+          event.stopPropagation();
+        }
+      }}
+      onClick={backdrop}
+    >
+      <form
+        className={styles.form}
+        onSubmit={submit}
+      >
+        <header className={styles.header}>
+          <div>
+            <p className={styles.eyebrow}>{name}</p>
+            <h2
+              id={`${id}-title`}
+              className={styles.title}
+            >
+              {copy.cancelTitle}
+            </h2>
+          </div>
+          <button
+            ref={initialFocus}
+            type="button"
+            className={styles.close}
+            disabled={pending}
+            aria-label={copy.close}
+            onClick={close}
+          >
+            ×
+          </button>
+        </header>
+        <p
+          id={`${id}-summary`}
+          className={styles.attention}
+          role="status"
+        >
+          {consequence}
+        </p>
+        <p className={styles.description}>{copy.cancelResume}</p>
+        {fieldError ? (
+          <p
+            role="alert"
+            className={styles.fieldError}
+          >
+            {fieldError}
+          </p>
+        ) : null}
+        {generalError ? (
+          <p
+            role="alert"
+            className={styles.error}
+          >
+            {generalError}
+          </p>
+        ) : null}
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={styles.secondary}
+            disabled={pending}
+            onClick={close}
+          >
+            {copy.cancelKeep}
+          </button>
+          <button
+            type="submit"
+            className={styles.danger}
+            disabled={pending}
+          >
+            {pending ? <span className={styles.spinner} aria-hidden="true" /> : null}
+            {pending ? copy.cancelPending : copy.cancelSubmit}
+          </button>
+        </div>
+      </form>
+    </dialog>
+  );
+}

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

@@ -0,0 +1,95 @@
+# SubscriptionChangeDialog · React
+
+## English
+
+The subscriptions page opens only `mode="plan"`: the storefront backend
+refuses `subscriptions_change_option`, because another service option is
+another server, so a customer cancels and subscribes with the new option.
+
+`SubscriptionChangeDialog` changes either the plan or service option of
+`subscription`. `mode="plan"` offers another purchasable plan from the same
+subscription group. `mode="option"` uses `plan` and starts with an option other
+than `subscription.option`. Period choices keep only positive durations that
+the selected option prices.
+
+A plan change keeps the current option when the new plan contains it. Changing
+the plan or option replaces the selected paid period and automatic-renewal
+period with valid choices for that pair; automatic renewal that is off stays
+off. The summary shows the plan amount,
+option amount, returned amount for unused days, account balance and the total
+available for the change. `walletHref(locale)` supplies the deposit link.
+
+The first submit shows the effect of the change. The second calls `onSubmit`
+with `existed_subscription`, `period`, the selected plan or option, and optional
+`renew_period` and trimmed `attach_issue`. Named `fields` appear beside their
+controls and return the dialog from confirmation to editing. `fields.__all__`
+supplies the general message.
+
+`pending` blocks changes, submit and dismissal. Modal and inline presentation
+use the same native dialog with scroll and focus cleanup. Changing `modal`
+while the dialog is open switches it in place and keeps the entered values and
+the focused field. Source is maintained
+in `components/orionplace/subscriptions/SubscriptionChangeDialog.tsx`.
+
+### Props
+
+| Prop                                                       | Meaning                                                                                               |
+| ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `subscription?: ICustomerSubscription`                     | Customer subscription displayed or changed by the component.                                          |
+| `mode?: "option" \| "plan"`                                | Which request the dialog prepares: `plan` changes the plan, `option` changes the option.              |
+| `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.                                  |
+| `balance?: number`                                         | Current wallet balance used to check whether the payment can proceed.                                 |
+| `walletHref?: (locale: string) => string`                  | Builds the wallet destination from the callback arguments.                                            |
+| `onSubmit?: (request: ISubscriptionChangeRequest) => void` | Called when the visitor submits the confirmed form values. The callback payload is shown in its type. |
+| `onClose?: () => void`                                     | Called when the visitor closes the panel or dialog. The callback has no payload.                      |
+
+## Русский
+
+Страница подписок открывает только `mode="plan"`: бэкенд витрины отклоняет
+`subscriptions_change_option`, потому что другая опция сервиса — это другой
+сервер, поэтому покупатель отменяет подписку и оформляет новую с нужной опцией.
+
+`SubscriptionChangeDialog` меняет тариф или опцию сервиса для `subscription`.
+При `mode="plan"` доступны другие продаваемые тарифы той же подписки. При
+`mode="option"` используется `plan`, а первым выбирается вариант, отличный от
+`subscription.option`. В списке периодов остаются положительные длительности,
+для которых у выбранной опции есть цена.
+
+При смене тарифа текущая опция сохраняется, если она есть в новом тарифе.
+Смена тарифа или опции заменяет оплачиваемый период и период автопродления на
+допустимые для новой пары значения; выключенное автопродление остаётся
+выключенным. Сводка показывает цену тарифа, цену опции,
+возврат за неиспользованные дни, баланс аккаунта и общую доступную сумму.
+Ссылку на пополнение задаёт `walletHref(locale)`.
+
+Первая отправка показывает результат смены. Вторая вызывает `onSubmit` с
+`existed_subscription`, `period`, выбранным тарифом или опцией, а также
+необязательными `renew_period` и очищенным `attach_issue`. Именованные `fields`
+выводятся рядом с соответствующими полями и возвращают окно с подтверждения к
+редактированию. `fields.__all__` задаёт общее сообщение.
+
+Во время `pending` заблокированы изменения, отправка и закрытие. Модальный и
+встроенный режимы используют один системный диалог с очисткой прокрутки и
+фокуса. Если изменить `modal`, пока окно открыто, оно переключается на месте, а
+введённые значения и поле с фокусом сохраняются. Исходный файл:
+`components/orionplace/subscriptions/SubscriptionChangeDialog.tsx`.
+
+### Свойства
+
+| Свойство                                                   | Назначение                                                                                                    |
+| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `subscription?: ICustomerSubscription`                     | Подписка покупателя, которую показывает или изменяет компонент.                                               |
+| `mode?: "option" \| "plan"`                                | Какой запрос готовит окно: `plan` меняет тарифный план, `option` — опцию.                                     |
+| `plan?: ISubscribeTariff`                                  | Тарифный план текущей карточки или подписки.                                                                  |
+| `pending?: boolean`                                        | Показывает загрузку и блокирует повторные действия.                                                           |
+| `error?: string`                                           | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                          |
+| `fields?: Record<string, string>`                          | Ошибки полей или настроенные поля текущей формы.                                                              |
+| `modal?: boolean`                                          | Показывает нативное модальное окно при `true` и встроенную панель при `false`.                                |
+| `balance?: number`                                         | Текущий баланс кошелька для проверки возможности оплаты.                                                      |
+| `walletHref?: (locale: string) => string`                  | Строит адрес ссылки кошелька из аргументов обработчика.                                                       |
+| `onSubmit?: (request: ISubscriptionChangeRequest) => void` | Вызывается, когда покупатель отправляет подтверждённые значения формы. Данные обработчика указаны в его типе. |
+| `onClose?: () => void`                                     | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.                      |