refactor: convert partner/withdrawal modals to separate pages

Replace 7 modal dialogs with 8 dedicated page routes for better mobile/Telegram WebApp UX. Add campaign management (assign/create with auto-assign) to partner detail page. New pages: AdminApplicationReview, AdminPartnerCommission, AdminPartnerRevoke, AdminWithdrawalReject, AdminPartnerCampaignAssign, AdminPartnerCampaignCreate, ReferralPartnerApply, ReferralWithdrawalRequest. ~610 lines removed from parent pages, ~425 lines removed net.
2026-07-29 18:13:47 +00:00 · 2026-02-17 10:28:32 +03:00
parent 779fbf0dc6
commit 062976180c
17 changed files with 1320 additions and 614 deletions
--- a/src/pages/ReferralWithdrawalRequest.tsx
+++ b/src/pages/ReferralWithdrawalRequest.tsx
@@ -0,0 +1,136 @@
+import { useState, useEffect, type FormEvent } from 'react';
+import { useNavigate } from 'react-router';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { withdrawalApi } from '../api/withdrawals';
+import { useCurrency } from '../hooks/useCurrency';
+
+export default function ReferralWithdrawalRequest() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { formatWithCurrency, currencySymbol } = useCurrency();
+
+  const [form, setForm] = useState({
+    amount_kopeks: 0,
+    payment_details: '',
+  });
+
+  const { data: balance } = useQuery({
+    queryKey: ['withdrawal-balance'],
+    queryFn: withdrawalApi.getBalance,
+  });
+
+  // Guard: redirect if can't request
+  useEffect(() => {
+    if (balance && !balance.can_request) {
+      navigate('/referral', { replace: true });
+    }
+  }, [balance, navigate]);
+
+  const withdrawMutation = useMutation({
+    mutationFn: withdrawalApi.create,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['withdrawal-balance'] });
+      queryClient.invalidateQueries({ queryKey: ['withdrawal-history'] });
+      navigate('/referral');
+    },
+  });
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    if (form.payment_details.length < 5) return;
+    if (form.amount_kopeks <= 0) return;
+    withdrawMutation.mutate({
+      amount_kopeks: form.amount_kopeks,
+      payment_details: form.payment_details,
+    });
+  };
+
+  return (
+    <div className="animate-fade-in space-y-6">
+      <h1 className="text-2xl font-bold text-dark-50">{t('referral.withdrawal.requestTitle')}</h1>
+      <p className="text-sm text-dark-400">
+        {t('referral.withdrawal.requestDesc', {
+          available: balance ? formatWithCurrency(balance.available_total / 100) : '',
+        })}
+      </p>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="bento-card space-y-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-dark-300">
+              {t('referral.withdrawal.fields.amount')}
+            </label>
+            <input
+              type="number"
+              min={balance?.min_amount_kopeks ?? 0}
+              max={balance?.available_total ?? 0}
+              step={100}
+              className="input w-full"
+              value={form.amount_kopeks || ''}
+              onChange={(e) =>
+                setForm({
+                  ...form,
+                  amount_kopeks: e.target.value ? Number(e.target.value) : 0,
+                })
+              }
+              placeholder={t('referral.withdrawal.fields.amountPlaceholder')}
+            />
+            <p className="mt-1 text-xs text-dark-500">
+              {t('referral.withdrawal.fields.amountHint', { currency: currencySymbol })}
+            </p>
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-dark-300">
+              {t('referral.withdrawal.fields.paymentDetails')}
+            </label>
+            <textarea
+              className="input min-h-[80px] w-full"
+              value={form.payment_details}
+              onChange={(e) => setForm({ ...form, payment_details: e.target.value })}
+              placeholder={t('referral.withdrawal.fields.paymentDetailsPlaceholder')}
+              required
+              minLength={5}
+            />
+          </div>
+        </div>
+
+        {withdrawMutation.isError && (
+          <div className="rounded-lg bg-error-500/10 p-3 text-sm text-error-400">
+            {t('referral.withdrawal.requestError')}
+          </div>
+        )}
+
+        <div className="flex gap-3">
+          <button
+            type="button"
+            onClick={() => navigate('/referral')}
+            className="btn-secondary flex-1 px-5"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            type="submit"
+            disabled={
+              withdrawMutation.isPending ||
+              form.payment_details.length < 5 ||
+              form.amount_kopeks <= 0
+            }
+            className={`btn-primary flex-1 px-5 ${
+              withdrawMutation.isPending ||
+              form.payment_details.length < 5 ||
+              form.amount_kopeks <= 0
+                ? 'opacity-50'
+                : ''
+            }`}
+          >
+            {withdrawMutation.isPending
+              ? t('referral.withdrawal.requesting')
+              : t('referral.withdrawal.submitRequest')}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}