orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/wallet/WalletBalance.README.md

@@ -1,46 +0,0 @@
-# WalletBalance
-
-## English
-
-`WalletBalance` shows the signed-in customer's wallet amount for the currently
-selected currency. It reads the amount from
-`wallet[currencyId].transform_value` when `wallet` is supplied, otherwise from
-`init.wallet[currencyId].transform_value`, and uses the selected currency's left
-and right symbols. The currency code is shown when neither symbol is set. A dash
-is shown when Application Load has no finite amount for that currency.
-
-`label` names the value and defaults to “Balance”. The normal presentation uses
-a description list. `compact` puts the amount inline and visually hides the
-label while retaining it for assistive technology. The component only displays
-Application Load data and emits no event.
-
-### Props
-
-| Prop                                       | Meaning                                                                |
-| ------------------------------------------ | ---------------------------------------------------------------------- |
-| `label?: string`                           | Visible or accessible name for the component’s main control or region. |
-| `compact?: boolean`                        | Uses the compact component presentation.                               |
-| `wallet?: Record<string, ITransformValue>` | Wallet values used by the balance display.                             |
-
-## Русский
-
-`WalletBalance` показывает сумму в кошельке вошедшего покупателя для выбранной
-сейчас валюты. Сумма берётся из
-`wallet[currencyId].transform_value`, если передан `wallet`, иначе из
-`init.wallet[currencyId].transform_value`. Компонент выводит левый и правый
-символы выбранной валюты, а при отсутствии обоих символов — код валюты. Если в
-Application Load нет конечного числового значения для этой валюты, выводится
-тире.
-
-`label` задаёт название значения; по умолчанию используется «Balance». Обычный
-вид использует список определений. `compact` выводит сумму в строке и визуально
-скрывает подпись, сохраняя её для вспомогательных технологий. Компонент только
-показывает данные Application Load и не отправляет событий.
-
-### Свойства
-
-| Свойство                                   | Назначение                                                    |
-| ------------------------------------------ | ------------------------------------------------------------- |
-| `label?: string`                           | Видимое или доступное название основного элемента компонента. |
-| `compact?: boolean`                        | Включает компактное представление компонента.                 |
-| `wallet?: Record<string, ITransformValue>` | Данные кошелька для отображения баланса.                      |

package/templates/components/orionplace/wallet/WalletBalance.module.css

@@ -1,46 +0,0 @@
-.compact {
-  display: inline-flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  column-gap: 0.25rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.compactValue {
-  overflow-wrap: anywhere;
-}
-
-.balance {
-  margin: 0;
-  color: var(--orionplace-text);
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-}
-
-.balance dt {
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.balance dd {
-  margin: 0.5rem 0 0;
-  font-size: 1.875rem;
-  line-height: calc(2.25 / 1.875);
-  font-variant-numeric: tabular-nums;
-  font-weight: 500;
-}
-
-.visuallyHidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

package/templates/components/orionplace/wallet/WalletBalance.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { ITransformValue } from '@/interfaces/orionplace/shared/ITransformValue';
-import { formatCurrency } from '@/lib/orionplace/currency';
-import styles from './WalletBalance.module.css';
-
-export interface WalletBalanceProps {
-  label?: string;
-  compact?: boolean;
-  wallet?: Record<string, ITransformValue>;
-}
-
-export function WalletBalance({
-  label = 'Balance',
-  compact = false,
-  wallet,
-}: WalletBalanceProps) {
-  const selections = useOrionplaceSelections((state) => state);
-  const amount = (wallet ?? selections.init?.wallet)?.[selections.currencyId]
-    ?.transform_value;
-  const currency = selections.init?.currencies[selections.currencyId];
-  let value = '—';
-
-  if (typeof amount === 'number' && Number.isFinite(amount)) {
-    // Written for the reader's language like every price: «806,36 ₽».
-    value = formatCurrency(amount, currency, selections.localeCode);
-  }
-
-  if (compact) {
-    return (
-      <span
-        className={styles.compact}
-        data-wallet-balance
-      >
-        <span className={styles.visuallyHidden}>{label}:</span>
-        <span className={styles.compactValue}>{value}</span>
-      </span>
-    );
-  }
-
-  return (
-    <dl
-      className={styles.balance}
-      data-wallet-balance
-    >
-      <dt>{label}</dt>
-      <dd>{value}</dd>
-    </dl>
-  );
-}

package/templates/components/orionplace/wallet/WalletTopUpForm.README.md

@@ -1,54 +0,0 @@
-# WalletTopUpForm · React
-
-## English
-
-`WalletTopUpForm` collects an amount, one selectable Application Load currency
-and one payment method returned by `invoices_payment_methods_get`. Payment
-names use the selected locale and method logos appear in the selector. The
-first available method is selected when the current method disappears.
-
-The browser requires an amount of zero or more. Submission calls `onSubmit`
-with `{ amount, payment, currency }`; the amount remains the exact input string
-and the two IDs are numbers. `errors.amount` and `errors.payment` appear beside
-their controls. `pending` disables the form, and `onCancel` closes it without
-sending a request.
-
-The component itself makes no request. Source is maintained in
-`components/orionplace/wallet/WalletTopUpForm.tsx`.
-
-### Props
-
-| Prop                                                | Meaning                                                                                               |
-| --------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `methods: IPaymentMethod[]`                         | Payment or delivery methods available for the current action.                                         |
-| `pending?: boolean`                                 | Shows the loading state and blocks duplicate actions.                                                 |
-| `errors?: Record<string, string>`                   | Field-specific validation errors returned for the current form.                                       |
-| `onSubmit?: (value: IInvoiceCreateRequest) => void` | After form validation, passes the entered `amount`, payment method ID in `payment` and currency ID in `currency`. The application creates the top-up invoice. |
-| `onCancel?: () => void`                             | Called when the visitor cancels the current form or action. The callback has no payload.              |
-
-## Русский
-
-`WalletTopUpForm` собирает сумму, одну доступную для выбора валюту из
-Application Load и один способ оплаты из ответа
-`invoices_payment_methods_get`. Названия способов оплаты используют выбранный
-язык, а их логотипы выводятся в списке. Если выбранный способ исчезает, форма
-выбирает первый доступный.
-
-Браузер требует сумму от нуля. При отправке вызывается `onSubmit` со значением
-`{ amount, payment, currency }`: сумма сохраняет точную строку из поля, а два
-ID передаются числами. `errors.amount` и `errors.payment` выводятся рядом со
-своими элементами. `pending` блокирует форму, а `onCancel` закрывает её без
-запроса.
-
-Сам компонент не выполняет запросы. Исходный файл:
-`components/orionplace/wallet/WalletTopUpForm.tsx`.
-
-### Свойства
-
-| Свойство                                            | Назначение                                                                                                    |
-| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `methods: IPaymentMethod[]`                         | Способы оплаты или доставки, доступные для текущего действия.                                                 |
-| `pending?: boolean`                                 | Показывает загрузку и блокирует повторные действия.                                                           |
-| `errors?: Record<string, string>`                   | Ошибки отдельных полей текущей формы.                                                                         |
-| `onSubmit?: (value: IInvoiceCreateRequest) => void` | Передаёт введённую сумму `amount`, ID способа оплаты `payment` и ID валюты `currency` после проверки формы. Приложение создаёт счёт на пополнение. |
-| `onCancel?: () => void`                             | Вызывается, когда покупатель отменяет текущую форму или действие. Обработчик не получает данные.              |

package/templates/components/orionplace/wallet/WalletTopUpForm.module.css

@@ -1,152 +0,0 @@
-.panel {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  gap: 1.25rem;
-  padding: 1.25rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  font: inherit;
-  container-type: inline-size;
-}
-
-.panel h2 {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.empty {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.fields {
-  display: grid;
-  gap: 1rem;
-}
-
-.field,
-.selectField {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.field {
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.required,
-.error {
-  color: var(--orionplace-danger);
-}
-
-.input {
-  width: 100%;
-  min-width: 0;
-  height: 2.75rem;
-  box-sizing: border-box;
-  padding: 0 0.75rem;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  font: inherit;
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-}
-
-.input:focus-visible {
-  border-color: var(--orionplace-text);
-  outline: none;
-}
-
-.error {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-/* No error, no line: the fields keep the spacing of the other packages. */
-.error:empty {
-  display: none;
-}
-
-.field .error {
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-/* A narrow form stacks its buttons at full width, as in the other packages. */
-.actions {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.button {
-  display: inline-flex;
-  min-height: 2.75rem;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0 1.5rem;
-  border: 1px solid var(--orionplace-text);
-  border-radius: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.button svg {
-  width: 1rem;
-  height: 1rem;
-  flex: none;
-}
-
-.button:disabled {
-  cursor: default;
-  opacity: 0.4;
-}
-
-.primary {
-  border-color: var(--orionplace-accent);
-  background: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-}
-
-/*
- * The form's frame follows the wallet around it and its fields and buttons
- * follow the form's own width, not the screen, as in the other packages.
- */
-@container (min-width: 592px) {
-  .panel {
-    padding: 1.5rem;
-  }
-
-  .fields {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .actions {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}

package/templates/components/orionplace/wallet/WalletTopUpForm.tsx

@@ -1,181 +0,0 @@
-'use client';
-
-import { useEffect, useState, type FormEvent } from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { IPaymentMethod } from '@/interfaces/orionplace/cart/ICartData';
-import type { IInvoiceCreateRequest } from '@/interfaces/orionplace/payments/IInvoice';
-import { currencyLabel } from '@/lib/orionplace/currency';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
-import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
-import styles from './WalletTopUpForm.module.css';
-
-export interface WalletTopUpFormProps {
-  methods: IPaymentMethod[];
-  pending?: boolean;
-  errors?: Record<string, string>;
-  onSubmit?: (value: IInvoiceCreateRequest) => void;
-  onCancel?: () => void;
-}
-
-export function WalletTopUpForm({
-  methods,
-  pending = false,
-  errors = {},
-  onSubmit,
-  onCancel,
-}: WalletTopUpFormProps) {
-  const selections = useOrionplaceSelections((state) => state);
-  const labels = featureLabels(selections.localeCode);
-  const [amount, setAmount] = useState('');
-  const [payment, setPayment] = useState('');
-  const [currency, setCurrency] = useState(selections.currencyId);
-  const paymentList = Object.fromEntries(
-    methods.map((method) => [
-      String(method.id),
-      getAvailableNestedValueFromObject(
-        method.locale,
-        selections.localeCode,
-        'payment_name',
-      ) || String(method.id),
-    ]),
-  );
-  const paymentIcons = Object.fromEntries(
-    methods.map((method) => [String(method.id), method.logo]),
-  );
-  const currencies = Object.fromEntries(
-    Object.entries(selections.init?.currencies ?? {})
-      .filter(([, value]) => value.allowed_select)
-      .map(([id, value]) => [id, currencyLabel(value)]),
-  );
-
-  useEffect(() => {
-    if (!Object.hasOwn(paymentList, payment)) {
-      setPayment(Object.keys(paymentList)[0] ?? '');
-    }
-  }, [methods, selections.localeCode, payment]);
-
-  useEffect(() => {
-    if (!Object.hasOwn(currencies, currency)) {
-      setCurrency(
-        Object.hasOwn(currencies, selections.currencyId)
-          ? selections.currencyId
-          : (Object.keys(currencies)[0] ?? ''),
-      );
-    }
-  }, [selections.init?.currencies, selections.currencyId, currency]);
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (pending || !payment || !currency || amount === '') {
-      return;
-    }
-    onSubmit?.({
-      amount,
-      payment: Number(payment),
-      currency: Number(currency),
-    });
-  }
-
-  return (
-    <form
-      className={styles.panel}
-      aria-busy={pending}
-      data-feature-part="WalletTopUpForm"
-      onSubmit={submit}
-    >
-      <h2>{labels.wallet.topUp}</h2>
-      {!methods.length ? (
-        <p className={styles.empty}>{labels.wallet.unavailable}</p>
-      ) : (
-        <div className={styles.fields}>
-          <label className={styles.field}>
-            <span>
-              {labels.wallet.amount}{' '}
-              <span
-                className={styles.required}
-                aria-hidden="true"
-              >
-                *
-              </span>
-            </span>
-            <input
-              className={styles.input}
-              value={amount}
-              name="amount"
-              type="number"
-              min="0"
-              step="any"
-              inputMode="decimal"
-              required
-              disabled={pending}
-              aria-invalid={Boolean(errors.amount)}
-              onChange={(event) => setAmount(event.target.value)}
-            />
-            <small className={styles.error}>{errors.amount}</small>
-          </label>
-          <div className={styles.selectField}>
-            <OrionplaceSelect
-              value={currency}
-              options={currencies}
-              label={labels.wallet.currency}
-              disabled={pending}
-              required
-              onValueChange={setCurrency}
-            />
-          </div>
-          <div className={styles.selectField}>
-            <OrionplaceSelect
-              value={payment}
-              options={paymentList}
-              icons={paymentIcons}
-              label={labels.wallet.payment}
-              disabled={pending}
-              required
-              onValueChange={setPayment}
-            />
-            <small className={styles.error}>{errors.payment}</small>
-          </div>
-        </div>
-      )}
-      <div className={styles.actions}>
-        <button
-          type="submit"
-          className={`${styles.button} ${styles.primary}`}
-          disabled={pending || !methods.length}
-        >
-          {pending ? labels.loading : labels.wallet.create}
-          <svg
-            viewBox="0 0 20 20"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M4 10h12m-4-4 4 4-4 4" />
-          </svg>
-        </button>
-        <button
-          className={styles.button}
-          type="button"
-          disabled={pending}
-          onClick={() => onCancel?.()}
-        >
-          <svg
-            viewBox="0 0 20 20"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            aria-hidden="true"
-          >
-            <path d="m5.5 5.5 9 9m0-9-9 9" />
-          </svg>
-          {labels.cancel}
-        </button>
-      </div>
-    </form>
-  );
-}