mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
b5088c70a1
Audit-driven sweep: replaced 168 hand-written inline <svg> icons across 77 files with the central Phosphor (react-icons/pi) components from @/components/icons, preserving each icon's size classes and colour (dynamic stroke colours via the parent's currentColor, RefreshIcon's spinning state, conditional rotate-180 chevrons). Verified: tsc + vite build + eslint clean; an adversarial diff review of all changed files found the replacements correct (70 files clean, 0 blockers). Remaining inline <svg> dropped from 262 to ~95 — the survivors are legitimate non-icons (brand/provider logos, loading spinners & framer-motion animations, charts/sparklines, background decoration) plus a few ambiguous glyphs.
529 lines
18 KiB
TypeScript
529 lines
18 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useNavigate, useSearchParams } from 'react-router';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
campaignsApi,
|
|
CampaignCreateRequest,
|
|
CampaignBonusType,
|
|
ServerSquadInfo,
|
|
TariffListItem,
|
|
} from '../api/campaigns';
|
|
import { partnerApi } from '../api/partners';
|
|
import { AdminBackButton } from '../components/admin';
|
|
import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
|
|
import Twemoji from 'react-twemoji';
|
|
import { CampaignIcon, CheckIcon, LinkIcon, RefreshIcon } from '@/components/icons';
|
|
|
|
// Bonus type config
|
|
const bonusTypeConfig: Record<
|
|
CampaignBonusType,
|
|
{ labelKey: string; color: string; bgColor: string; borderColor: string }
|
|
> = {
|
|
balance: {
|
|
labelKey: 'admin.campaigns.bonusType.balance',
|
|
color: 'text-success-400',
|
|
bgColor: 'bg-success-500/10',
|
|
borderColor: 'border-success-500/30',
|
|
},
|
|
subscription: {
|
|
labelKey: 'admin.campaigns.bonusType.subscription',
|
|
color: 'text-accent-400',
|
|
bgColor: 'bg-accent-500/10',
|
|
borderColor: 'border-accent-500/30',
|
|
},
|
|
tariff: {
|
|
labelKey: 'admin.campaigns.bonusType.tariff',
|
|
color: 'text-accent-400',
|
|
bgColor: 'bg-accent-500/10',
|
|
borderColor: 'border-accent-500/30',
|
|
},
|
|
none: {
|
|
labelKey: 'admin.campaigns.bonusType.none',
|
|
color: 'text-dark-400',
|
|
bgColor: 'bg-dark-500/10',
|
|
borderColor: 'border-dark-500/30',
|
|
},
|
|
};
|
|
|
|
// Server selector component
|
|
function ServerSelector({
|
|
servers,
|
|
selected,
|
|
onToggle,
|
|
}: {
|
|
servers: ServerSquadInfo[];
|
|
selected: string[];
|
|
onToggle: (uuid: string) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
if (servers.length === 0) return null;
|
|
|
|
return (
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-dark-300">
|
|
{t('admin.campaigns.form.servers')}
|
|
</label>
|
|
<div className="max-h-48 space-y-2 overflow-y-auto rounded-lg border border-dark-700 bg-dark-800 p-3">
|
|
{servers.map((server) => (
|
|
<button
|
|
key={server.id}
|
|
type="button"
|
|
onClick={() => onToggle(server.squad_uuid)}
|
|
className={`flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors ${
|
|
selected.includes(server.squad_uuid)
|
|
? 'bg-accent-500/20 text-accent-300'
|
|
: 'bg-dark-700 text-dark-300 hover:bg-dark-600'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`flex h-5 w-5 items-center justify-center rounded ${
|
|
selected.includes(server.squad_uuid) ? 'bg-accent-500 text-white' : 'bg-dark-600'
|
|
}`}
|
|
>
|
|
{selected.includes(server.squad_uuid) && <CheckIcon />}
|
|
</div>
|
|
<span className="text-sm font-medium">
|
|
<Twemoji options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}>
|
|
{server.display_name}
|
|
</Twemoji>
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Tariff selector component
|
|
function TariffSelector({
|
|
tariffs,
|
|
value,
|
|
onChange,
|
|
}: {
|
|
tariffs: TariffListItem[];
|
|
value: number | null;
|
|
onChange: (id: number | null) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div>
|
|
<label
|
|
htmlFor="campaign-tariff-select"
|
|
className="mb-2 block text-sm font-medium text-dark-300"
|
|
>
|
|
{t('admin.campaigns.form.selectTariff')}
|
|
</label>
|
|
<select
|
|
id="campaign-tariff-select"
|
|
value={value || ''}
|
|
onChange={(e) => onChange(e.target.value ? parseInt(e.target.value) : null)}
|
|
className="input"
|
|
>
|
|
<option value="">{t('admin.campaigns.form.notSelected')}</option>
|
|
{tariffs.map((tariff) => (
|
|
<option key={tariff.id} value={tariff.id}>
|
|
{tariff.name} ({tariff.traffic_limit_gb} GB, {tariff.device_limit}{' '}
|
|
{t('admin.campaigns.form.devices')})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function slugify(text: string): string {
|
|
return text
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/gi, '_')
|
|
.replace(/^_|_$/g, '')
|
|
.slice(0, 30);
|
|
}
|
|
|
|
export default function AdminCampaignCreate() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
const [searchParams] = useSearchParams();
|
|
const partnerId = searchParams.get('partnerId');
|
|
|
|
// Fetch partner info if creating for a partner
|
|
const { data: partner } = useQuery({
|
|
queryKey: ['admin-partner-detail', partnerId],
|
|
queryFn: () => partnerApi.getPartnerDetail(Number(partnerId)),
|
|
enabled: !!partnerId,
|
|
});
|
|
|
|
// Form state
|
|
const [name, setName] = useState('');
|
|
const [startParameter, setStartParameter] = useState('');
|
|
const [bonusType, setBonusType] = useState<CampaignBonusType>('balance');
|
|
const [isActive, setIsActive] = useState(true);
|
|
|
|
// Auto-fill from partner
|
|
const [autoFilled, setAutoFilled] = useState(false);
|
|
useEffect(() => {
|
|
if (partner && !autoFilled) {
|
|
const partnerName = partner.first_name || partner.username || '';
|
|
if (!name && partnerName) setName(partnerName);
|
|
if (!startParameter && partnerName) setStartParameter(`partner_${slugify(partnerName)}`);
|
|
setAutoFilled(true);
|
|
}
|
|
}, [partner, autoFilled, name, startParameter]);
|
|
|
|
// Balance bonus
|
|
const [balanceBonusRubles, setBalanceBonusRubles] = useState<number | ''>(0);
|
|
|
|
// Subscription bonus
|
|
const [subscriptionDays, setSubscriptionDays] = useState<number | ''>(7);
|
|
const [subscriptionTraffic, setSubscriptionTraffic] = useState<number | ''>(10);
|
|
const [subscriptionDevices, setSubscriptionDevices] = useState<number | ''>(1);
|
|
const [selectedSquads, setSelectedSquads] = useState<string[]>([]);
|
|
|
|
// Tariff bonus
|
|
const [tariffId, setTariffId] = useState<number | null>(null);
|
|
const [tariffDays, setTariffDays] = useState<number | ''>(30);
|
|
|
|
// Fetch servers
|
|
const { data: servers = [] } = useQuery({
|
|
queryKey: ['admin-campaigns-servers'],
|
|
queryFn: () => campaignsApi.getAvailableServers(),
|
|
});
|
|
|
|
// Fetch tariffs
|
|
const { data: tariffs = [] } = useQuery({
|
|
queryKey: ['admin-campaigns-tariffs'],
|
|
queryFn: () => campaignsApi.getAvailableTariffs(),
|
|
});
|
|
|
|
// Create mutation
|
|
const createMutation = useMutation({
|
|
mutationFn: campaignsApi.createCampaign,
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-campaigns'] });
|
|
queryClient.invalidateQueries({ queryKey: ['admin-campaigns-overview'] });
|
|
if (partnerId) {
|
|
queryClient.invalidateQueries({ queryKey: ['admin-partner-detail', partnerId] });
|
|
navigate(`/admin/partners/${partnerId}`);
|
|
} else {
|
|
navigate('/admin/campaigns');
|
|
}
|
|
},
|
|
});
|
|
|
|
const toggleServer = (uuid: string) => {
|
|
setSelectedSquads((prev) =>
|
|
prev.includes(uuid) ? prev.filter((s) => s !== uuid) : [...prev, uuid],
|
|
);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
const data: CampaignCreateRequest = {
|
|
name,
|
|
start_parameter: startParameter,
|
|
bonus_type: bonusType,
|
|
is_active: isActive,
|
|
};
|
|
|
|
if (bonusType === 'balance') {
|
|
data.balance_bonus_kopeks = Math.round(toNumber(balanceBonusRubles) * 100);
|
|
} else if (bonusType === 'subscription') {
|
|
data.subscription_duration_days = toNumber(subscriptionDays, 7);
|
|
data.subscription_traffic_gb = toNumber(subscriptionTraffic, 10);
|
|
data.subscription_device_limit = toNumber(subscriptionDevices, 1);
|
|
data.subscription_squads = selectedSquads;
|
|
} else if (bonusType === 'tariff') {
|
|
data.tariff_id = tariffId || undefined;
|
|
data.tariff_duration_days = toNumber(tariffDays, 30);
|
|
}
|
|
|
|
if (partnerId) {
|
|
data.partner_user_id = Number(partnerId);
|
|
}
|
|
|
|
createMutation.mutate(data);
|
|
};
|
|
|
|
const isNameValid = name.trim().length > 0;
|
|
const isStartParamValid =
|
|
startParameter.trim().length > 0 && /^[a-zA-Z0-9_-]+$/.test(startParameter);
|
|
const isValid = isNameValid && isStartParamValid;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<AdminBackButton />
|
|
<div className="flex items-center gap-3">
|
|
<div className="rounded-lg bg-accent-500/20 p-2 text-accent-400">
|
|
<CampaignIcon className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold text-dark-100">
|
|
{t('admin.campaigns.modal.createTitle')}
|
|
</h1>
|
|
<p className="text-sm text-dark-400">{t('admin.campaigns.subtitle')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Partner info banner */}
|
|
{partnerId && partner && (
|
|
<div className="rounded-xl border border-accent-500/20 bg-accent-500/5 p-4">
|
|
<div className="flex items-start gap-3">
|
|
<LinkIcon className="mt-0.5 h-5 w-5 shrink-0 text-accent-400" />
|
|
<p className="text-sm text-accent-300">
|
|
{t('admin.campaigns.form.partnerAutoAssign', {
|
|
name: partner.first_name || partner.username || `#${partnerId}`,
|
|
})}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Basic Info */}
|
|
<div className="card space-y-4">
|
|
{/* Name */}
|
|
<div>
|
|
<label htmlFor="campaign-name" className="mb-2 block text-sm font-medium text-dark-300">
|
|
{t('admin.campaigns.form.name')}
|
|
<span className="text-error-400">*</span>
|
|
</label>
|
|
<input
|
|
id="campaign-name"
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className={`input ${name.length > 0 && !isNameValid ? 'border-error-500/50' : ''}`}
|
|
placeholder={t('admin.campaigns.form.namePlaceholder')}
|
|
maxLength={255}
|
|
/>
|
|
{name.length > 0 && !isNameValid && (
|
|
<p className="mt-1 text-xs text-error-400">
|
|
{t('admin.campaigns.validation.nameRequired')}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Start Parameter */}
|
|
<div>
|
|
<label
|
|
htmlFor="campaign-start-param"
|
|
className="mb-2 block text-sm font-medium text-dark-300"
|
|
>
|
|
{t('admin.campaigns.form.startParameter')}
|
|
<span className="text-error-400">*</span>
|
|
</label>
|
|
<input
|
|
id="campaign-start-param"
|
|
type="text"
|
|
value={startParameter}
|
|
onChange={(e) => setStartParameter(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ''))}
|
|
className={`input font-mono ${startParameter.length > 0 && !isStartParamValid ? 'border-error-500/50' : ''}`}
|
|
placeholder="instagram_jan2024"
|
|
maxLength={100}
|
|
/>
|
|
<p className="mt-1 text-xs text-dark-500">
|
|
{t('admin.campaigns.form.startParameterHint')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Active toggle */}
|
|
<div className="flex items-center justify-between rounded-lg border border-dark-700 bg-dark-800 p-4">
|
|
<span className="text-sm font-medium text-dark-300">
|
|
{t('admin.campaigns.form.active')}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsActive(!isActive)}
|
|
role="switch"
|
|
aria-checked={isActive}
|
|
aria-label={t('admin.campaigns.form.active')}
|
|
className={`relative h-6 w-11 rounded-full transition-colors ${
|
|
isActive ? 'bg-accent-500' : 'bg-dark-600'
|
|
}`}
|
|
>
|
|
<span
|
|
className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
|
|
isActive ? 'left-6' : 'left-1'
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bonus Type */}
|
|
<div className="card space-y-4">
|
|
<h2 id="bonus-type-label" className="text-lg font-semibold text-dark-100">
|
|
{t('admin.campaigns.form.bonusType')}
|
|
</h2>
|
|
|
|
<div
|
|
className="grid grid-cols-2 gap-3"
|
|
role="radiogroup"
|
|
aria-labelledby="bonus-type-label"
|
|
>
|
|
{(Object.keys(bonusTypeConfig) as CampaignBonusType[]).map((type) => (
|
|
<button
|
|
key={type}
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={bonusType === type}
|
|
onClick={() => setBonusType(type)}
|
|
className={`rounded-lg border p-4 text-left transition-all ${
|
|
bonusType === type
|
|
? `${bonusTypeConfig[type].bgColor} ${bonusTypeConfig[type].borderColor} ${bonusTypeConfig[type].color}`
|
|
: 'border-dark-700 bg-dark-800 text-dark-300 hover:border-dark-600'
|
|
}`}
|
|
>
|
|
<span className="text-sm font-medium">{t(bonusTypeConfig[type].labelKey)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bonus Settings */}
|
|
{bonusType === 'balance' && (
|
|
<div
|
|
className={`card space-y-4 border ${bonusTypeConfig.balance.borderColor} ${bonusTypeConfig.balance.bgColor}`}
|
|
>
|
|
<h2 className={`text-lg font-semibold ${bonusTypeConfig.balance.color}`}>
|
|
{t('admin.campaigns.form.balanceBonus')}
|
|
</h2>
|
|
<div className="flex items-center gap-3">
|
|
<input
|
|
type="number"
|
|
value={balanceBonusRubles}
|
|
onChange={createNumberInputHandler(setBalanceBonusRubles, 0)}
|
|
className="input w-32"
|
|
min={0}
|
|
step={1}
|
|
/>
|
|
<span className="text-dark-300">₽</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{bonusType === 'subscription' && (
|
|
<div
|
|
className={`card space-y-4 border ${bonusTypeConfig.subscription.borderColor} ${bonusTypeConfig.subscription.bgColor}`}
|
|
>
|
|
<h2 className={`text-lg font-semibold ${bonusTypeConfig.subscription.color}`}>
|
|
{t('admin.campaigns.form.trialSubscription')}
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<label
|
|
htmlFor="campaign-sub-days"
|
|
className="mb-2 block text-sm font-medium text-dark-300"
|
|
>
|
|
{t('admin.campaigns.form.days')}
|
|
</label>
|
|
<input
|
|
id="campaign-sub-days"
|
|
type="number"
|
|
value={subscriptionDays}
|
|
onChange={createNumberInputHandler(setSubscriptionDays, 1)}
|
|
className="input"
|
|
min={1}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="campaign-sub-traffic"
|
|
className="mb-2 block text-sm font-medium text-dark-300"
|
|
>
|
|
{t('admin.campaigns.form.trafficGb')}
|
|
</label>
|
|
<input
|
|
id="campaign-sub-traffic"
|
|
type="number"
|
|
value={subscriptionTraffic}
|
|
onChange={createNumberInputHandler(setSubscriptionTraffic, 0)}
|
|
className="input"
|
|
min={0}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="campaign-sub-devices"
|
|
className="mb-2 block text-sm font-medium text-dark-300"
|
|
>
|
|
{t('admin.campaigns.form.devices')}
|
|
</label>
|
|
<input
|
|
id="campaign-sub-devices"
|
|
type="number"
|
|
value={subscriptionDevices}
|
|
onChange={createNumberInputHandler(setSubscriptionDevices, 1)}
|
|
className="input"
|
|
min={1}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<ServerSelector servers={servers} selected={selectedSquads} onToggle={toggleServer} />
|
|
</div>
|
|
)}
|
|
|
|
{bonusType === 'tariff' && (
|
|
<div
|
|
className={`card space-y-4 border ${bonusTypeConfig.tariff.borderColor} ${bonusTypeConfig.tariff.bgColor}`}
|
|
>
|
|
<h2 className={`text-lg font-semibold ${bonusTypeConfig.tariff.color}`}>
|
|
{t('admin.campaigns.form.tariff')}
|
|
</h2>
|
|
|
|
<TariffSelector tariffs={tariffs} value={tariffId} onChange={setTariffId} />
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="campaign-tariff-days"
|
|
className="mb-2 block text-sm font-medium text-dark-300"
|
|
>
|
|
{t('admin.campaigns.form.durationDays')}
|
|
</label>
|
|
<input
|
|
id="campaign-tariff-days"
|
|
type="number"
|
|
value={tariffDays}
|
|
onChange={createNumberInputHandler(setTariffDays, 1)}
|
|
className="input w-32"
|
|
min={1}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{bonusType === 'none' && (
|
|
<div
|
|
className={`card border ${bonusTypeConfig.none.borderColor} ${bonusTypeConfig.none.bgColor}`}
|
|
>
|
|
<p className="text-sm text-dark-400">{t('admin.campaigns.form.noBonusDescription')}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
<div className="card flex items-center justify-end gap-3">
|
|
<button
|
|
onClick={() => navigate(partnerId ? `/admin/partners/${partnerId}` : '/admin/campaigns')}
|
|
className="btn-secondary"
|
|
>
|
|
{t('common.cancel')}
|
|
</button>
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={!isValid || createMutation.isPending}
|
|
className="btn-primary flex items-center gap-2"
|
|
>
|
|
{createMutation.isPending ? <RefreshIcon /> : <CampaignIcon className="h-6 w-6" />}
|
|
{t('admin.campaigns.form.save')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|