orionplace-react 0.7.7 → 0.8.0

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

@@ -1,453 +0,0 @@
-.dialog {
-  box-sizing: border-box;
-  width: 32.5rem;
-  max-width: calc(100vw - 2rem);
-  max-height: calc(100dvh - 2rem);
-  margin: auto;
-  overflow: auto;
-  padding: 0;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  container-type: inline-size;
-}
-
-.wide {
-  width: 55rem;
-}
-
-.narrow {
-  width: 30rem;
-}
-
-.inline {
-  position: relative;
-  width: 100%;
-  max-width: 100%;
-  margin: 0;
-}
-
-.dialog::backdrop {
-  background: rgb(0 0 0 / 35%);
-  backdrop-filter: blur(2px);
-}
-
-.form {
-  display: grid;
-  gap: 1.25rem;
-  padding: 1.25rem;
-}
-
-/* The renewal and cancel dialogs are roomier, as in the other packages. */
-.dialog:not(.wide) .form {
-  gap: 1.5rem;
-  padding: 1.5rem;
-}
-
-.header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.header div {
-  display: grid;
-  gap: 0.25rem;
-}
-
-.eyebrow,
-.description,
-.hint {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.title {
-  margin: 0;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.close {
-  display: grid;
-  outline: none;
-  width: 2.5rem;
-  height: 2.5rem;
-  flex: none;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
-.close:focus-visible,
-.secondary:focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .close:hover,
-  .secondary:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.notice {
-  composes: notice from '../account/account.module.css';
-}
-
-/* The tinted notices with their icon, as `op-notice-attention` and
-   `op-notice-error` in the other packages. */
-.attention {
-  composes: notice noticeAttention from '../account/account.module.css';
-}
-
-.error {
-  composes: notice noticeError from '../account/account.module.css';
-  white-space: pre-line;
-}
-
-.fieldError {
-  color: var(--orionplace-danger);
-}
-
-.fieldset {
-  display: grid;
-  gap: 0.75rem;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.fieldset legend {
-  margin-bottom: 0.75rem;
-  padding: 0;
-  color: var(--orionplace-muted);
-}
-
-/* The period choices of the extend and change dialogs are tighter than the
-   renewal choices, as in the other packages. */
-.wide .fieldset {
-  gap: 0.5rem;
-}
-
-.wide .fieldset legend {
-  margin-bottom: 0.5rem;
-}
-
-.choice {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  border: 1px solid var(--orionplace-border);
-  cursor: pointer;
-  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.wide .choice {
-  padding: 0.5rem 0.75rem;
-}
-
-/* The renewal choice without a period has its note under its name. */
-.choiceOff {
-  justify-content: normal;
-}
-
-.choice > span {
-  display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
-}
-
-.wide .choice > span {
-  gap: 0.5rem;
-}
-
-.choiceOff > span {
-  display: grid;
-  gap: 0.25rem;
-}
-
-.choice > span + span,
-.choice > span > span:not(.hint) {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.wide .choice:has(input:checked) {
-  border-color: var(--orionplace-text);
-}
-
-.choice:has(:focus-visible) {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .choice:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .choice {
-    transition: none;
-  }
-}
-
-.choice input {
-  accent-color: var(--orionplace-accent);
-}
-
-/* A field with its caption above, as `op-feature-label` and
-   `op-feature-input` in the other packages. */
-.label {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.label > span:first-child {
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.label input {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  min-height: 2.75rem;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  font: inherit;
-  outline: none;
-}
-
-.label input:focus-visible {
-  border-color: var(--orionplace-text);
-}
-
-.label input:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-/* A select with its note or error under it. */
-.selectField {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.renewalNote {
-  color: var(--orionplace-muted);
-  line-height: 1.25rem;
-}
-
-.columns {
-  display: grid;
-  min-width: 0;
-  gap: 1.25rem;
-}
-
-.controls,
-.summaryColumn {
-  display: grid;
-  min-width: 0;
-  align-content: start;
-  gap: 1rem;
-}
-
-.planBox {
-  padding: 1rem;
-  border: 1px solid var(--orionplace-border);
-}
-
-.summary {
-  display: grid;
-  gap: 0.75rem;
-  margin: 0;
-  padding: 1rem;
-  background: var(--orionplace-muted-surface);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.summary div {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.summary dd {
-  margin: 0;
-  font-variant-numeric: tabular-nums;
-}
-
-/* The balance with its top-up link under it. */
-.summary .balance {
-  display: grid;
-  justify-items: end;
-  gap: 0.25rem;
-}
-
-/* A hint sits 4px after its label, as in the other packages. */
-.summary dt [data-feature-part='OrionplaceInfoHint'] {
-  margin-left: 0.25rem;
-}
-
-.summary .total {
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.actions {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0.5rem;
-}
-
-.actions button {
-  height: 2.75rem;
-  outline: none;
-  padding-inline: 1.5rem;
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.secondary {
-  border: 1px solid var(--orionplace-text);
-  background: transparent;
-  color: inherit;
-}
-
-.primary,
-.danger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  border: 1px solid var(--orionplace-accent);
-  background: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-}
-
-.danger {
-  border-color: var(--orionplace-danger);
-  background: var(--orionplace-danger);
-}
-
-.primary:focus-visible,
-.danger:focus-visible {
-  opacity: 0.85;
-}
-
-@media (hover: hover) {
-  .primary:hover,
-  .danger:hover {
-    opacity: 0.85;
-  }
-}
-
-/* A pending request keeps the way back visible, as in the other packages;
-   only the confirming button fades. */
-.secondary:disabled,
-.close:disabled {
-  cursor: wait;
-}
-
-.primary:disabled,
-.danger:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-.spinner {
-  width: 1rem;
-  height: 1rem;
-  box-sizing: border-box;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner { animation: none; }
-}
-
-.wallet {
-  width: fit-content;
-  padding-bottom: 0.125rem;
-  border-bottom: 1px solid currentColor;
-  color: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
-/*
- * Each dialog follows its own width, not the screen's, as in the other
- * packages: the wide dialogs at the widths they had on 640px and 768px
- * screens, the narrow ones once they are nearly full width.
- */
-@container (min-width: 600px) {
-  .wide .form {
-    padding: 1.5rem;
-  }
-
-  .wide .title {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-
-  .wide .fieldset {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container (min-width: 720px) {
-  .columns {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
-    gap: 1.5rem;
-  }
-}
-
-@container (min-width: 29rem) {
-  .dialog:not(.wide) .form {
-    padding: 2rem;
-  }
-
-  .dialog:not(.wide) .title {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}

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

@@ -1,75 +0,0 @@
-# SubscriptionExtendDialog · React
-
-## English
-
-`SubscriptionExtendDialog` buys another paid period for `subscription` from
-the account balance. It uses the periods of `plan`, the selected currency and
-the matching surcharge of `option`. A current renewal period with the same
-number of days is selected first; otherwise the shortest available period is
-selected. A single available period is shown in the summary without a choice
-list.
-
-The first submit opens the confirmation step. The second calls `onSubmit` with
-`paid_subscription`, `period_to_add`, an optional `renew_period` and a trimmed
-nonempty `attach_issue`. The automatic-renewal choice is sent again because
-the renewal request saves that setting together with the purchase.
-
-The balance warning compares the plan-period amount with the selected-currency
-wallet value and links through `walletHref(locale)`. `pending` preserves the
-form while blocking submit and dismissal. Modal and inline presentation use
-the same focus-safe native dialog. 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/SubscriptionExtendDialog.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.                                         |
-| `option?: ISubscribeTariffOption`                         | Selected tariff or product option.                                                                    |
-| `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.                     |
-| `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: ISubscriptionRenewRequest) => 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.                      |
-
-## Русский
-
-`SubscriptionExtendDialog` покупает дополнительный оплаченный период для
-`subscription` с баланса аккаунта. Компонент использует периоды `plan`,
-выбранную валюту и соответствующую доплату `option`. Сначала выбирается период
-с тем же числом дней, что и текущее автопродление; иначе выбирается самый
-короткий доступный период. Единственный период показывается в сводке без списка
-выбора.
-
-Первая отправка открывает этап подтверждения. Вторая вызывает `onSubmit` с
-`paid_subscription`, `period_to_add`, необязательным `renew_period` и непустым
-очищенным `attach_issue`. Выбор автопродления отправляется повторно, потому что
-запрос продления сохраняет эту настройку вместе с покупкой.
-
-Предупреждение о балансе сравнивает стоимость периода тарифа со значением
-кошелька в выбранной валюте и использует ссылку `walletHref(locale)`. Во время
-`pending` форма сохраняется, а отправка и закрытие блокируются. Модальный и
-встроенный режимы используют один системный диалог с управлением фокусом.
-Если изменить `modal`, пока окно открыто, оно переключается на месте, а
-введённые значения и поле с фокусом сохраняются. Исходный файл:
-`components/orionplace/subscriptions/SubscriptionExtendDialog.tsx`.
-
-### Свойства
-
-| Свойство                                                  | Назначение                                                                                                    |
-| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `subscription?: ICustomerSubscription`                    | Подписка покупателя, которую показывает или изменяет компонент.                                               |
-| `plan?: ISubscribeTariff`                                 | Тарифный план текущей карточки или подписки.                                                                  |
-| `option?: ISubscribeTariffOption`                         | Выбранная опция тарифа или товара.                                                                            |
-| `pending?: boolean`                                       | Показывает загрузку и блокирует повторные действия.                                                           |
-| `error?: string`                                          | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                          |
-| `modal?: boolean`                                         | Показывает нативное модальное окно при `true` и встроенную панель при `false`.                                |
-| `balance?: number`                                        | Текущий баланс кошелька для проверки возможности оплаты.                                                      |
-| `walletHref?: (locale: string) => string`                 | Строит адрес ссылки кошелька из аргументов обработчика.                                                       |
-| `onSubmit?: (request: ISubscriptionRenewRequest) => void` | Вызывается, когда покупатель отправляет подтверждённые значения формы. Данные обработчика указаны в его типе. |
-| `onClose?: () => void`                                    | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.                      |