fix: админ-редактор — системные методы оплаты, реальные периоды тарифов, фильтрация на публичной странице

- Способы оплаты: загрузка из системного API вместо ручного ввода, toggleable чекбоксы
- Периоды тарифов: загрузка из period_prices через useQueries вместо произвольного ввода
- Публичная страница: глобальный список периодов, скрытие тарифов без цены для выбранного периода
- Локализация: добавлены ключи для 4 языков (ru/en/zh/fa)

src/locales/en.json

@@ -3188,7 +3188,12 @@
       "invalidSlug": "Slug can only contain lowercase letters, numbers, and hyphens",
       "titleRequired": "Title is required",
       "noTariffs": "Select at least one tariff",
-      "noPaymentMethods": "Add at least one payment method"
+      "noPaymentMethods": "Add at least one payment method",
+      "selectMethods": "Select available methods",
+      "noSystemMethods": "No payment methods configured in the system",
+      "methodOrder": "Drag to reorder",
+      "loadingPeriods": "Loading...",
+      "periodDaySuffix": "d"
     }
   },
   "adminUpdates": {

src/locales/fa.json

@@ -2914,7 +2914,12 @@
       "invalidSlug": "Slug can only contain lowercase letters, numbers, and hyphens",
       "titleRequired": "Title is required",
       "noTariffs": "Select at least one tariff",
-      "noPaymentMethods": "Add at least one payment method"
+      "noPaymentMethods": "Add at least one payment method",
+      "selectMethods": "انتخاب روش‌های پرداخت موجود",
+      "noSystemMethods": "هیچ روش پرداختی در سیستم پیکربندی نشده است",
+      "methodOrder": "برای تغییر ترتیب بکشید",
+      "loadingPeriods": "در حال بارگذاری...",
+      "periodDaySuffix": "روز"
     }
   },
   "adminUpdates": {

src/locales/ru.json

@@ -3743,7 +3743,12 @@
       "invalidSlug": "Slug может содержать только строчные буквы, цифры и дефисы",
       "titleRequired": "Заголовок обязателен",
       "noTariffs": "Выберите хотя бы один тариф",
-      "noPaymentMethods": "Добавьте хотя бы один способ оплаты"
+      "noPaymentMethods": "Добавьте хотя бы один способ оплаты",
+      "selectMethods": "Выберите доступные методы",
+      "noSystemMethods": "В системе не настроено ни одного способа оплаты",
+      "methodOrder": "Перетащите для изменения порядка",
+      "loadingPeriods": "Загрузка...",
+      "periodDaySuffix": "д"
     }
   },
   "adminUpdates": {

src/locales/zh.json

@@ -2913,7 +2913,12 @@
       "invalidSlug": "Slug can only contain lowercase letters, numbers, and hyphens",
       "titleRequired": "Title is required",
       "noTariffs": "Select at least one tariff",
-      "noPaymentMethods": "Add at least one payment method"
+      "noPaymentMethods": "Add at least one payment method",
+      "selectMethods": "选择可用的支付方式",
+      "noSystemMethods": "系统中未配置任何支付方式",
+      "methodOrder": "拖动以调整顺序",
+      "loadingPeriods": "加载中...",
+      "periodDaySuffix": "天"
     }
   },
   "adminUpdates": {

src/pages/AdminLandingEditor.tsx

@@ -1,6 +1,6 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useQueries, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import {
   adminLandingsApi,
@@ -8,7 +8,8 @@ import {
   LandingFeature,
   LandingPaymentMethod,
 } from '../api/landings';
-import { tariffsApi, TariffListItem } from '../api/tariffs';
+import { tariffsApi, TariffListItem, PeriodPrice } from '../api/tariffs';
+import { adminPaymentMethodsApi } from '../api/adminPaymentMethods';
 import { Toggle } from '../components/admin';
 import { useNotify } from '@/platform';
 import { usePlatform } from '../platform/hooks/usePlatform';
@@ -48,6 +49,10 @@ const ChevronDownIcon = ({ open }: { open: boolean }) => (
   </svg>
 );
 
+function formatPrice(kopeks: number): string {
+  return `${(kopeks / 100).toLocaleString('ru-RU')} \u20BD`;
+}
+
 // ============ Sortable Feature Item ============
 
 interface SortableFeatureProps {
@@ -121,17 +126,14 @@ function SortableFeatureItem({ feature, index, onUpdate, onRemove }: SortableFea
   );
 }
 
-// ============ Sortable Payment Method ============
+// ============ Sortable Selected Payment Method Card ============
 
-interface SortableMethodProps {
+interface SortableSelectedMethodProps {
   method: MethodWithId;
-  index: number;
+  onRemove: (methodId: string) => void;
-  onUpdate: (index: number, field: keyof LandingPaymentMethod, value: string) => void;
-  onRemove: (index: number) => void;
 }
 
-function SortableMethodItem({ method, index, onUpdate, onRemove }: SortableMethodProps) {
+function SortableSelectedMethodCard({ method, onRemove }: SortableSelectedMethodProps) {
-  const { t } = useTranslation();
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: method._id,
   });
@@ -148,54 +150,21 @@ function SortableMethodItem({ method, index, onUpdate, onRemove }: SortableMetho
       ref={setNodeRef}
       style={style}
       className={cn(
-        'flex items-start gap-2 rounded-lg border p-3',
+        'flex items-center gap-2 rounded-lg border px-3 py-2',
         isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50',
       )}
     >
       <button
         {...attributes}
         {...listeners}
-        className="mt-2 flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
+        className="flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
       >
         <GripIcon />
       </button>
-      <div className="min-w-0 flex-1 space-y-2">
+      <span className="min-w-0 flex-1 truncate text-sm text-dark-100">{method.display_name}</span>
-        <div className="grid grid-cols-2 gap-2">
-          <input
-            type="text"
-            value={method.method_id}
-            onChange={(e) => onUpdate(index, 'method_id', e.target.value)}
-            placeholder={t('admin.landings.methodId')}
-            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-          />
-          <input
-            type="text"
-            value={method.display_name}
-            onChange={(e) => onUpdate(index, 'display_name', e.target.value)}
-            placeholder={t('admin.landings.methodName')}
-            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-          />
-        </div>
-        <div className="grid grid-cols-2 gap-2">
-          <input
-            type="text"
-            value={method.description}
-            onChange={(e) => onUpdate(index, 'description', e.target.value)}
-            placeholder={t('admin.landings.methodDesc')}
-            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-          />
-          <input
-            type="text"
-            value={method.icon_url}
-            onChange={(e) => onUpdate(index, 'icon_url', e.target.value)}
-            placeholder={t('admin.landings.methodIcon')}
-            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-          />
-        </div>
-      </div>
       <button
-        onClick={() => onRemove(index)}
+        onClick={() => onRemove(method.method_id)}
-        className="mt-2 flex-shrink-0 text-dark-500 hover:text-error-400"
+        className="flex-shrink-0 text-dark-500 hover:text-error-400"
       >
         <TrashIcon />
       </button>
@@ -282,6 +251,38 @@ export default function AdminLandingEditor() {
 
   const allTariffs = tariffsData?.tariffs ?? [];
 
+  // Fetch system payment methods
+  const { data: systemMethods } = useQuery({
+    queryKey: ['admin-payment-methods'],
+    queryFn: () => adminPaymentMethodsApi.getAll(),
+    staleTime: 30_000,
+  });
+
+  const availablePaymentMethods = useMemo(
+    () => (systemMethods ?? []).filter((m) => m.is_enabled && m.is_provider_configured),
+    [systemMethods],
+  );
+
+  // Fetch tariff details for period info
+  const tariffDetailQueries = useQueries({
+    queries: selectedTariffIds.map((tariffId) => ({
+      queryKey: ['admin-tariff-detail', tariffId],
+      queryFn: () => tariffsApi.getTariff(tariffId),
+      staleTime: 60_000,
+      enabled: selectedTariffIds.includes(tariffId),
+    })),
+  });
+
+  const tariffPeriodsMap = useMemo(() => {
+    const map: Record<number, PeriodPrice[]> = {};
+    tariffDetailQueries.forEach((q, i) => {
+      if (q.data) {
+        map[selectedTariffIds[i]] = q.data.period_prices;
+      }
+    });
+    return map;
+  }, [tariffDetailQueries, selectedTariffIds]);
+
   // Fetch landing for editing
   const { data: landingData } = useQuery({
     queryKey: ['admin-landing', id],
@@ -431,26 +432,30 @@ export default function AdminLandingEditor() {
   }, []);
 
   // ---- Payment methods helpers ----
-  const addMethod = () => {
+  const togglePaymentMethod = (methodId: string) => {
-    setPaymentMethods((prev) => [
+    setPaymentMethods((prev) => {
-      ...prev,
+      const exists = prev.find((m) => m.method_id === methodId);
-      {
+      if (exists) {
-        _id: crypto.randomUUID(),
+        return prev.filter((m) => m.method_id !== methodId);
-        method_id: '',
+      }
-        display_name: '',
+      const systemMethod = availablePaymentMethods.find((m) => m.method_id === methodId);
-        description: '',
+      if (!systemMethod) return prev;
-        icon_url: '',
+      return [
-        sort_order: prev.length,
+        ...prev,
-      },
+        {
-    ]);
+          _id: crypto.randomUUID(),
+          method_id: systemMethod.method_id,
+          display_name: systemMethod.display_name ?? systemMethod.default_display_name,
+          description: '',
+          icon_url: '',
+          sort_order: prev.length,
+        },
+      ];
+    });
   };
 
-  const updateMethod = (index: number, field: keyof LandingPaymentMethod, value: string) => {
+  const removePaymentMethod = (methodId: string) => {
-    setPaymentMethods((prev) => prev.map((m, i) => (i === index ? { ...m, [field]: value } : m)));
+    setPaymentMethods((prev) => prev.filter((m) => m.method_id !== methodId));
-  };
-
-  const removeMethod = (index: number) => {
-    setPaymentMethods((prev) => prev.filter((_, i) => i !== index));
   };
 
   const handleMethodDragEnd = useCallback((event: DragEndEvent) => {
@@ -472,13 +477,27 @@ export default function AdminLandingEditor() {
     );
   };
 
-  const togglePeriod = (tariffId: number, days: number) => {
+  const togglePeriodFromTariff = (tariffId: number, days: number, allPeriods: PeriodPrice[]) => {
     const key = String(tariffId);
+    const allDays = allPeriods.map((p) => p.days);
+
     setAllowedPeriods((prev) => {
-      const current = prev[key] ?? [];
+      const current = prev[key];
-      const updated = current.includes(days)
+      if (!current) {
-        ? current.filter((d) => d !== days)
+        // No override yet -- all periods allowed. Remove this one.
-        : [...current, days];
+        const updated = allDays.filter((d) => d !== days);
+        return { ...prev, [key]: updated };
+      }
+
+      const hasDay = current.includes(days);
+      const updated = hasDay ? current.filter((d) => d !== days) : [...current, days];
+
+      // If all periods are selected again, remove the override
+      if (updated.length === allDays.length) {
+        const { [key]: _, ...rest } = prev;
+        return rest;
+      }
+
       return { ...prev, [key]: updated };
     });
   };
@@ -664,23 +683,44 @@ export default function AdminLandingEditor() {
                     </span>
                   )}
                 </label>
-                {/* Period checkboxes if tariff is selected and is not daily */}
+                {/* Period checkboxes from tariff detail */}
                 {selectedTariffIds.includes(tariff.id) && !tariff.is_daily && (
-                  <div className="ml-7 mt-2 flex flex-wrap gap-2">
+                  <div className="ml-7 mt-2">
                     <span className="text-xs text-dark-500">{t('admin.landings.periods')}:</span>
-                    {/* We show known periods from the tariff detail. Since TariffListItem doesn't have period_prices,
+                    {tariffPeriodsMap[tariff.id] ? (
-                        we let the user type periods or rely on the backend returning allowed_periods.
+                      <div className="mt-1 flex flex-wrap gap-2">
-                        For simplicity, show the allowed_periods for this tariff if any are set. */}
+                        {tariffPeriodsMap[tariff.id].map((period) => {
-                    {(allowedPeriods[String(tariff.id)] ?? []).map((days) => (
+                          const override = allowedPeriods[String(tariff.id)];
-                      <button
+                          const isAllowed = !override || override.includes(period.days);
-                        key={days}
+                          return (
-                        onClick={() => togglePeriod(tariff.id, days)}
+                            <button
-                        className="rounded bg-accent-500/20 px-2 py-0.5 text-xs text-accent-400 hover:bg-accent-500/30"
+                              key={period.days}
-                      >
+                              onClick={() =>
-                        {days}d<span className="ml-1 text-accent-300">x</span>
+                                togglePeriodFromTariff(
-                      </button>
+                                  tariff.id,
-                    ))}
+                                  period.days,
-                    <AddPeriodButton tariffId={tariff.id} onAdd={togglePeriod} />
+                                  tariffPeriodsMap[tariff.id],
+                                )
+                              }
+                              className={cn(
+                                'rounded-full px-3 py-1 text-xs font-medium transition-colors',
+                                isAllowed
+                                  ? 'bg-accent-500/20 text-accent-400'
+                                  : 'bg-dark-700/50 text-dark-500 line-through',
+                              )}
+                            >
+                              {period.days}
+                              {t('admin.landings.periodDaySuffix')} —{' '}
+                              {formatPrice(period.price_kopeks)}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <span className="ml-2 text-xs text-dark-600">
+                        {t('admin.landings.loadingPeriods')}
+                      </span>
+                    )}
                   </div>
                 )}
               </div>
@@ -694,27 +734,62 @@ export default function AdminLandingEditor() {
           open={openSections.methods}
           onToggle={() => toggleSection('methods')}
         >
-          <div className="space-y-3">
+          <div className="space-y-4">
-            <DndContext sensors={sensors} onDragEnd={handleMethodDragEnd}>
+            {/* Available system methods as toggleable list */}
-              <SortableContext items={methodIds} strategy={verticalListSortingStrategy}>
+            <div>
-                {paymentMethods.map((method, index) => (
+              <p className="mb-2 text-sm text-dark-500">{t('admin.landings.selectMethods')}</p>
-                  <SortableMethodItem
+              <div className="space-y-2">
-                    key={method._id}
+                {availablePaymentMethods.map((sysMethod) => {
-                    method={method}
+                  const isSelected = paymentMethods.some(
-                    index={index}
+                    (m) => m.method_id === sysMethod.method_id,
-                    onUpdate={updateMethod}
+                  );
-                    onRemove={removeMethod}
+                  return (
-                  />
+                    <label
-                ))}
+                      key={sysMethod.method_id}
-              </SortableContext>
+                      className={cn(
-            </DndContext>
+                        'flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors',
-            <button
+                        isSelected
-              onClick={addMethod}
+                          ? 'border-accent-500/50 bg-accent-500/5'
-              className="flex items-center gap-2 rounded-lg border border-dashed border-dark-600 px-4 py-2 text-sm text-dark-400 transition-colors hover:border-dark-500 hover:text-dark-300"
+                          : 'border-dark-700 bg-dark-800/50 hover:border-dark-600',
-            >
+                      )}
-              <PlusIcon />
+                    >
-              {t('admin.landings.addMethod')}
+                      <input
-            </button>
+                        type="checkbox"
+                        checked={isSelected}
+                        onChange={() => togglePaymentMethod(sysMethod.method_id)}
+                        className="h-4 w-4 rounded border-dark-600 bg-dark-700 text-accent-500"
+                      />
+                      <span className="text-sm font-medium text-dark-100">
+                        {sysMethod.display_name ?? sysMethod.default_display_name}
+                      </span>
+                    </label>
+                  );
+                })}
+                {availablePaymentMethods.length === 0 && (
+                  <p className="text-sm text-dark-600">{t('admin.landings.noSystemMethods')}</p>
+                )}
+              </div>
+            </div>
+
+            {/* Selected methods with drag-to-reorder */}
+            {paymentMethods.length > 0 && (
+              <div>
+                <p className="mb-2 text-sm text-dark-500">{t('admin.landings.methodOrder')}</p>
+                <DndContext sensors={sensors} onDragEnd={handleMethodDragEnd}>
+                  <SortableContext items={methodIds} strategy={verticalListSortingStrategy}>
+                    <div className="space-y-2">
+                      {paymentMethods.map((method) => (
+                        <SortableSelectedMethodCard
+                          key={method._id}
+                          method={method}
+                          onRemove={removePaymentMethod}
+                        />
+                      ))}
+                    </div>
+                  </SortableContext>
+                </DndContext>
+              </div>
+            )}
           </div>
         </Section>
 
@@ -765,60 +840,3 @@ export default function AdminLandingEditor() {
     </div>
   );
 }
-
-// ============ Tiny helper for adding a period ============
-
-function AddPeriodButton({
-  tariffId,
-  onAdd,
-}: {
-  tariffId: number;
-  onAdd: (tariffId: number, days: number) => void;
-}) {
-  const [value, setValue] = useState('');
-  const [showInput, setShowInput] = useState(false);
-
-  if (!showInput) {
-    return (
-      <button
-        onClick={() => setShowInput(true)}
-        className="rounded border border-dashed border-dark-600 px-2 py-0.5 text-xs text-dark-500 hover:border-dark-500 hover:text-dark-400"
-      >
-        +
-      </button>
-    );
-  }
-
-  return (
-    <input
-      type="number"
-      autoFocus
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-      onBlur={() => {
-        const days = parseInt(value, 10);
-        if (days > 0) {
-          onAdd(tariffId, days);
-        }
-        setValue('');
-        setShowInput(false);
-      }}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter') {
-          const days = parseInt(value, 10);
-          if (days > 0) {
-            onAdd(tariffId, days);
-          }
-          setValue('');
-          setShowInput(false);
-        }
-        if (e.key === 'Escape') {
-          setValue('');
-          setShowInput(false);
-        }
-      }}
-      placeholder="30"
-      className="w-16 rounded border border-dark-600 bg-dark-800 px-2 py-0.5 text-xs text-dark-100 outline-none focus:border-accent-500"
-    />
-  );
-}

src/pages/QuickPurchase.tsx

@@ -569,22 +569,53 @@ export default function QuickPurchase() {
     };
   }, []);
 
+  // Collect ALL unique periods across ALL tariffs
+  const allPeriods = useMemo(() => {
+    if (!config) return [];
+    const periodMap = new Map<number, LandingTariffPeriod>();
+    for (const tariff of config.tariffs) {
+      for (const period of tariff.periods) {
+        if (!periodMap.has(period.days)) {
+          periodMap.set(period.days, period);
+        }
+      }
+    }
+    return Array.from(periodMap.values()).sort((a, b) => a.days - b.days);
+  }, [config]);
+
+  // Filter tariffs to only those that have the selected period
+  const visibleTariffs = useMemo(() => {
+    if (!config || !selectedPeriodDays) return config?.tariffs ?? [];
+    return config.tariffs.filter((t) => t.periods.some((p) => p.days === selectedPeriodDays));
+  }, [config, selectedPeriodDays]);
+
   // Auto-select first tariff, period, method on config load
   useEffect(() => {
     if (!config) return;
 
-    if (config.tariffs.length > 0 && selectedTariffId === null) {
+    // Auto-select first period from all available periods
-      const firstTariff = config.tariffs[0];
+    if (allPeriods.length > 0 && selectedPeriodDays === null) {
-      setSelectedTariffId(firstTariff.id);
+      setSelectedPeriodDays(allPeriods[0].days);
-      if (firstTariff.periods.length > 0 && selectedPeriodDays === null) {
+    }
-        setSelectedPeriodDays(firstTariff.periods[0].days);
+
-      }
+    // Auto-select first visible tariff
+    if (visibleTariffs.length > 0 && selectedTariffId === null) {
+      setSelectedTariffId(visibleTariffs[0].id);
     }
 
     if (config.payment_methods.length > 0 && selectedMethod === null) {
       setSelectedMethod(config.payment_methods[0].method_id);
     }
-  }, [config, selectedTariffId, selectedPeriodDays, selectedMethod]);
+  }, [config, allPeriods, visibleTariffs, selectedTariffId, selectedPeriodDays, selectedMethod]);
+
+  // When period changes, auto-select first visible tariff if current is hidden
+  useEffect(() => {
+    if (!visibleTariffs.length) return;
+    const currentVisible = visibleTariffs.find((t) => t.id === selectedTariffId);
+    if (!currentVisible) {
+      setSelectedTariffId(visibleTariffs[0].id);
+    }
+  }, [visibleTariffs, selectedTariffId]);
 
   // SEO: set document title
   useEffect(() => {
@@ -647,24 +678,13 @@ export default function QuickPurchase() {
     [config?.tariffs, selectedTariffId],
   );
 
-  const availablePeriods = useMemo(() => selectedTariff?.periods ?? [], [selectedTariff]);
-
   const selectedPeriod = useMemo(
-    () => availablePeriods.find((p) => p.days === selectedPeriodDays),
+    () => selectedTariff?.periods.find((p) => p.days === selectedPeriodDays),
-    [availablePeriods, selectedPeriodDays],
+    [selectedTariff, selectedPeriodDays],
   );
 
   const currentPrice = selectedPeriod?.price_kopeks ?? 0;
 
-  // When tariff changes, reset period to first available if current is invalid
-  useEffect(() => {
-    if (!selectedTariff) return;
-    const hasCurrent = selectedTariff.periods.some((p) => p.days === selectedPeriodDays);
-    if (!hasCurrent && selectedTariff.periods.length > 0) {
-      setSelectedPeriodDays(selectedTariff.periods[0].days);
-    }
-  }, [selectedTariff, selectedPeriodDays]);
-
   // Validation
   const canSubmit = useMemo(() => {
     if (!selectedTariffId || !selectedPeriodDays || !selectedMethod) return false;
@@ -727,7 +747,7 @@ export default function QuickPurchase() {
     return <ErrorState message={errMsg} />;
   }
 
-  const showTariffCards = config.tariffs.length > 1;
+  const showTariffCards = visibleTariffs.length > 1;
 
   return (
     <div className="min-h-dvh bg-dark-950">
@@ -757,13 +777,13 @@ export default function QuickPurchase() {
             className="space-y-6"
           >
             {/* Period tabs */}
-            {availablePeriods.length > 0 && (
+            {allPeriods.length > 0 && (
               <div>
                 <h2 className="mb-3 text-sm font-medium uppercase tracking-wider text-dark-400">
                   {t('landing.choosePeriod', 'Choose period')}
                 </h2>
                 <PeriodTabs
-                  periods={availablePeriods}
+                  periods={allPeriods}
                   selectedDays={selectedPeriodDays ?? 0}
                   onSelect={setSelectedPeriodDays}
                 />
@@ -801,7 +821,7 @@ export default function QuickPurchase() {
                   aria-label={t('landing.chooseTariff', 'Choose tariff')}
                   className="grid gap-3 sm:grid-cols-2"
                 >
-                  {config.tariffs.map((tariff) => {
+                  {visibleTariffs.map((tariff) => {
                     const period = tariff.periods.find((p) => p.days === selectedPeriodDays);
                     return (
                       <TariffCard