orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,46 @@
+# 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

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

@@ -0,0 +1,51 @@
+'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

@@ -0,0 +1,54 @@
+# 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

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

@@ -0,0 +1,181 @@
+'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>
+  );
+}