orionplace-react 0.1.0 → 0.2.1

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

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

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