fix

2026-06-06 15:53:14 +03:00
parent d1e6529950
commit 517059d53e
8 changed files with 486 additions and 170 deletions
--- a/src/pages/converter/ui/LegalConverterPage.tsx
+++ b/src/pages/converter/ui/LegalConverterPage.tsx
@@ -0,0 +1,152 @@
+import { useState } from 'react'
+import { FormField } from '@shared/ui'
+import styles from './LegalConverterPage.module.css'
+
+const MIN_ORDER = 500_000
+
+// Тестовые значения: чем дольше пользователь готов ждать, тем ниже комиссия сервиса.
+const TERM_OPTIONS = [
+  { days: 1, rate: 0.05 },
+  { days: 3, rate: 0.035 },
+  { days: 7, rate: 0.02 },
+  { days: 14, rate: 0.012 },
+] as const
+
+const ru = (n: number) => n.toLocaleString('ru-RU', { maximumFractionDigits: 0 })
+
+const dayLabel = (days: number) => {
+  const mod10 = days % 10
+  const mod100 = days % 100
+  if (mod10 === 1 && mod100 !== 11) return `${days} день`
+  if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 >= 20)) return `${days} дня`
+  return `${days} дней`
+}
+
+export function LegalConverterPage() {
+  const [amount, setAmount] = useState('')
+  const [name, setName] = useState('')
+  const [contact, setContact] = useState('')
+  const [days, setDays] = useState<number>(TERM_OPTIONS[0].days)
+
+  const numAmount = Number(amount.replace(/\D/g, '')) || 0
+  const belowMin = numAmount > 0 && numAmount < MIN_ORDER
+
+  const rate = TERM_OPTIONS.find((o) => o.days === days)?.rate ?? TERM_OPTIONS[0].rate
+  const commission = numAmount * rate
+  const total = numAmount + commission
+
+  const handleAmountChange = (value: string) => {
+    const digits = value.replace(/\D/g, '')
+    setAmount(digits ? ru(Number(digits)) : '')
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Бэкенд пока не подключён — заявка никуда не отправляется.
+  }
+
+  return (
+    <form className={styles.wrap} onSubmit={handleSubmit}>
+      <div className={styles.header}>
+        <h1 className={styles.title}>Оставить заявку</h1>
+        <p className={styles.subtitle}>
+          Конвертация крупных объёмов по индивидуальному курсу. Оставьте заявку —
+          менеджер свяжется с вами, подтвердит актуальный курс и сопроводит сделку.
+        </p>
+      </div>
+
+      <div className={styles.body}>
+        <div className={styles.formCol}>
+          <FormField
+            label="Объём заявки, ₽"
+            type="text"
+            value={amount}
+            onChange={handleAmountChange}
+            placeholder="от 500 000"
+          />
+          {belowMin && (
+            <p className={styles.hint}>
+              Минимальный объём заявки — {ru(MIN_ORDER)} ₽
+            </p>
+          )}
+
+          <div className={styles.field}>
+            <label className={styles.fieldLabel} htmlFor="term">
+              Срок ожидания операции
+            </label>
+            <select
+              id="term"
+              className={styles.select}
+              value={days}
+              onChange={(e) => setDays(Number(e.target.value))}
+            >
+              {TERM_OPTIONS.map((o) => (
+                <option key={o.days} value={o.days}>
+                  {dayLabel(o.days)} — комиссия {(o.rate * 100).toFixed(1)} %
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <FormField
+            label="Как к вам обращаться"
+            type="text"
+            value={name}
+            onChange={setName}
+            placeholder="Имя"
+          />
+
+          <FormField
+            label="Email или телефон для связи"
+            type="text"
+            value={contact}
+            onChange={setContact}
+            placeholder="example@mail.ru / +7 900 000-00-00"
+          />
+        </div>
+
+        <div className={styles.infoCol}>
+          <div className={styles.infoTitle}>УСЛОВИЯ</div>
+
+          <div className={styles.infoRow}>
+            <span className={styles.infoLabel}>Минимальный объём</span>
+            <span className={styles.infoValue}>{ru(MIN_ORDER)} ₽</span>
+          </div>
+
+          <div className={styles.infoRow}>
+            <span className={styles.infoLabel}>Срок ожидания</span>
+            <span className={styles.infoValue}>{dayLabel(days)}</span>
+          </div>
+
+          <div className={styles.infoRow}>
+            <span className={styles.infoLabel}>Ставка комиссии</span>
+            <span className={styles.infoValue}>{(rate * 100).toFixed(1)} %</span>
+          </div>
+
+          <div className={styles.infoRow}>
+            <span className={styles.infoLabel}>Сумма комиссии</span>
+            <span className={styles.infoValue}>
+              {numAmount > 0 ? `≈ ${ru(commission)} ₽` : '—'}
+            </span>
+          </div>
+
+          <div className={styles.infoRow} data-accent>
+            <span className={styles.infoLabel}>Итого к оплате</span>
+            <span className={styles.infoValue}>
+              {numAmount > 0 ? `≈ ${ru(total)} ₽` : '—'}
+            </span>
+          </div>
+
+          <p className={styles.note}>
+            Итоговая комиссия рассчитывается индивидуально и зависит от объёма,
+            валюты и направления сделки.
+          </p>
+        </div>
+      </div>
+
+      <button type="submit" className={styles.submitBtn} disabled={belowMin}>
+        Оставить заявку
+      </button>
+    </form>
+  )
+}